همه ما بدون شک برای یک بار هم که شده، قربانی طراحی UX بد وبسایت‌ها شده‌ایم. در مقاله تجربه کاربری چیست با اهمیت و ضرورت UIآشنا شدیم در این مقاله چک لیست UIیا رابط کاربری برای سایت و اپلیکشن های موبایل را مورد بررسی قرار میدهید . این چک لیست کمک زیادی به شما در طراحی سایت و اپلیکیشن خواهد کرد.
چک لیست UIیا رابط کاربری برای سایت
تایپوگرافی
خوب است با این نکته شروع کنیم که شما نباید بیش از 2 فونت و همچنین استایل های چندگانه آنها را در یک پروژه استفاده کنید.
حروف بزرگ
هر بار که از متنی استفاده می کنید که کاملاً از حروف بزرگ تشکیل شده است ، فاصله بین حروف را فراموش نکنید..
فونت های باریک و کم رنگ.
رنگ های لایت و کمرنگ ممکن است استفاده شوند ، اما بستگی به نوع فونت شما دارد. اگر محصولی را طراحی کرده اید که کاربران روی صفحه نمایش ها خواهند دید ، بهتر است فونت های باریک و کم رنگ را فراموش کنید.
اندازه فونت سرتیتر ها و متن اصلی
شش عنوان وجود دارد h1 تا h6.
بزرگترین عنوان (ممکن است در اولین بخش صفحه اصلی قرار گیرد).
برای متن اصلی. تنظیمات پیش فرض مرورگر شما (اجازه دهید از Google Chrome به عنوان مرجع استفاده کنیم) هر متنی را در اندازه 16px نمایش می دهد.
12px را به عنوان کمترین اندازه ممکن در نظر داشته باشید . اندازه های کمتر به دلیل مشکلات بینایی یا مانیتورهای بد قابل خواندن نیستند.
ارتفاع خط
هرچند به ندرت پیش میاید که تنظیم ارتفاع خط را از حالت پیش فرض تغییر دهید . ولی بد نیست برای بهبود خوانایی آن را کمی افزایش دهید.
سلسله مراتب متن و سرتیترها
برای برجسته کردن قسمت های مهم یک متن باید از Bold text استفاده شود.
رنگ متن
در طراحی خود به رنگ متن توجه ویژه ای داشته باشید. رنگ ها باید از کنتراست کافی برخوردار باشد تا متن درهر نوع مانیتوری قابل خواندن باشد.
فاصله و حاشیه ها
فضاهای منفی (فضاهای خالی بین عناصر) برای یک طراحی خوب ضروری است.
فریم ها و خطوط اضافی را رها کنید
آسانترین راه برای جدا کردن یک بلوک معنایی از دیگری استفاده از یک قاب یا یک خط 1px است.
حاشیه ها
حاشیه ها به صورت بصری در تعیین اینکه آیا یک عنصر متعلق به عنصر دیگر است کمک می کند. در نظر بگیرید شامل یک تصویر ، عنوان ، 3-4 سطر متن پیش نمایش و تاریخ انتشار است.
تاریخ باید حاشیه کمی بزرگتر از حاشیه بین عنوان و متن داشته باشد.و تصویر باید با بیشترین فاصله نسبت به تاریخ قرار گیرد.برای درک بهتر به تصویر مرتبط زیر نگاه کنید.
استفاده کمتر از عناصر
همیشه مشتری یا مدیری وجود دارد که می خواهد همه اطلاعات را در یک بخش یا یک صفحه برنامه تلفن همراه قرار دهد. برای مثال عنوان ، تلفن، منو، یک پیشنهاد ویژه و یک آرم بزرگ.!
حاشیه های کناری متفاوت در صفحه نمایش
درتصویر زیر به حاشیه های قرار گرفته از لبه ها توجه کنید. اگر محتوا را به روشی کلاسیک قرار دهید از گوشه ی چپ بالایی به گوشه راست پایینی – حاشیه راست بالا را کمی بزرگتر ازسمت چپ قراردهید زیرا دراین حالت جذاب ترازحالتیست که حاشیه های لبه ای دو طرف برابر باشد.
رنگ ها و تصاویر
تصاویر ،نمادها و پس زمینه حالت کلی یک محصول را تنظیم می کنند. تصاویر باید دقیقاً آنچه را که یک شرکت ، یک برنامه یا یک وب سایت ارائه می دهد را نشان دهند.
لوگو ها
ساختن یک لوگو خوب بسیار دشوار است. با این وجود ، مطمئناً یک طراح فقط با رعایت قوانین و اصول اساسی می تواند یک لوگو مناسب را ایجاد کند.
سایه ها
سایه زیر یک شیء هرگز نباید سیاه باشد. همیشه سایه تیره تر از سطح روی آن ریخته خواهد شد.
آیکون ها و تصاویر
هرفایلی که بتواند وکتور باشد باید وکتور باشد. تمام آیکون ها ، فلش ها و لوگوها باید با فرمت SVG به توسعه دهندگان داده شوند PDF برای توسعه گر iOS
به یاد داشته باشیم که این یک چک لیست UIیا رابط کاربری برای سایت بود اما شما می توانید با خلافیت و تجربه خود مواردی را حذف یا اضافه کنید.
چک لیست UIیا رابط کاربری برای اپلیکیشن ها
۱.اسپلش اسکرین (Splash screen)
اسپلش اسکرین صفحه‌ای است که وقتی که کابر اپلیکیشن را راه اندازی و اجرا می‌کند برایش نمایش داده می‌شود و از آنجایی که Splash Screen اولین برخورد کاربربا اپلیکیشن است باعث ایجاد تصور اولیه کاربر درمورد اپلیکیشن می‌شود.
۲.اطلاعات ثبت‌نام
باید به این نکته توجه کنید که هنگام ثبت‌نام تنها اطلاعات ضروری مورد نیاز را از کاربر درخواست کنید
۳.ورود/ثبت‌نام از طریق حساب کاربری گوگل
کاربرها علاقه مند هستند بدون پر کردن فیلدهای مختلف و با صرف زمان کوتاه در اپلیکیشن ثبت‌نام کنند.
۴. بازیابی رمز عبور
اگر اپلیکیشن شما نیاز به ورود دارد، پس شما باید گزینه بازیابی رمز عبور را برای کاربرها فراهم کنید.
۵.صفحه Onboarding
طراحان رابط کاربری از واژه Onboarding برای توصیف مسیر آشناسازی کاربر با خدماتی که اپلیکیشن ارائه می‌دهد، استفاده می‌کنند. طراحی onboarding خوب، سبب افزایش احتمال تبدیل کاربر اولیه به کاربر همیشگی می‌شود.
۶.صفحه تایید اطلاعات (Data confirmation screen)
بسیاری از اپلیکیشن‌ها از کاربر می‌خواهند که شماره موبایل یا آدرس ایمیلی که وارد کرده‌اند را تایید کنند. معمولا بعد از اینکه کاربر آدرس ایمیل/موبایل را وارد می‌کند صفحه تایید اطلاعات نمایش داده می‌شود.
۷.فضای خالی (Empty State)
ارزش اکثر اپلیکیشن‌ها به محتوایی هست که به کاربر ارائه می‌دهند و این دلیل اولیه‌ای است که کاربر از آن اپلیکیشن استفاده می‌کند. بنابراین، بسیار مهم است فضاهایی که در آن ممکن هست کاربر هنوز محتوایی ندارد در جریان کاربری (user journey) در نظر گرفته شود. به چنین فضاهایی Empty State می‌گویند.
۸.عکس پروفایل پیش فرض کاربر (Default user avatar)
اکثریت کاربران (95% بر اساس گفته Jared M. Spool) تنظیمات پیش فرض را تغییر نمی‌دهند. این موضوع بیانگر این است که اکثریت کاربران از آواتار (Avatar) پیش فرضی که برای اپلیکیشن طراحی کردید استفاده می‌کنند.
۹.صفحه اجازه دسترسی (Permission requests screen)
زمانی که کاربر اپلیکیشن جدیدی را باز می‌کند، آخرین چیزی که می‌خواهد ببیند تعداد زیادی پاپ آپ (popup) که اجازه دسترسی به امکانات موبایل را می‌خواهند از جمله :
- اپلیکیشن اجازه دسترسی به لوکیشن (Location) را می‌خواهد.
- اپلیکیشن اجازه دسترسی به مخاطبین شما را می‌خواهد.
- اپلیکیشن اجازه دسترسی به دوربین شما را می‌خواهد.
چنین درخواست‌هایی تاثیر منفی روی تجربه کاربر می‌گذارد.
۱۰.حالت‌های مختلف المان‌های اینتراکتیو
اغلب دکمه‌ها و دیگر المان‌های اینتر اکتیو (interactive) دارای حالت‌های مختلفی هستند. این موضوع مهمی است که هر یک از حالت‌ها نظیر پیش فرض (Default)،فشرده شده و غیر فعال را برای هر یک از المان‌های اینتراکتیو اپلیکیشن طراحی کنید.
۱۱. ست آیکون (Icons set)
برای افزایش یکپارچگی بصری در طراحی UI می‌توانید آیکن‌ها را در استایل یکسان طراحی و استفاده کنید.
۱۲.پیام خطا (Error states)
همه ما می‌دانیم بهترین پیامِ خطا، پیامی است که نشان داده نمی‌شود، یعنی بهتر است همیشه مانع ایجاد خطا در مسیر انجام کارِ کاربر شوید و با راهنمایی کاربر در موقعیت و زمان مناسب می‌توانید مانع از این اتفاق شوید.
موقعیت‌هایی که باید برای آن پیام خطا طراحی کنید:
_ دسترسی به اینترنت امکان پذیر نیست.
_ اطلاعات وارد شده نادرست است.
_ خطای سیستم (System error).
به یاد داشته باشید زمانی که کاربر اطلاعات نادرست وارد کرد، مشخص کنید در کدام فیلد اطلاعات نادرست وارد شده و برای اصلاح آن کاربر را راهنمایی کنید.
۱۳.پیام در حال بارگذاری (Loading states)
اگر چه همیشه انتظار می‌رود اپلیکیشن دارای عملکرد سریع باشد، اما گاهی اوقات اپلیکیشن توانایی پاسخ سریع ندارد به دلایلی همچون سرعت پایین اینترنت، که باعث پایین آمدن پاسخ‌دهی اپلیکیشن می‌شود. برای چنین موقعیت‌هایی برای کاهش تنش کاربر، شما باید به کاربر اطمینان دهید که اپلیکیشن در حال پاسخگویی به درخواست کاربر است.
۱۴.پیام موفقیت آمیز بودن پروسه (Success states )
وقتی کاربر یک Task را به طور کامل انجام می‌دهد می‌بایست پیغامی مبنی بر موفقیت آمیز بودن پروسه برایش نمایش داده شود. طراح باید انواع مختلف پیام‌های Success را در نظر بگیرد:
-پیام دلنشین(Delightful): زمانی که کاربر، تسک (Task) مهمی را برای اولین بار به طور کامل انجام می‌دهد، بهترین فرصت برای شماست که بین اپلیکیشن و کاربر رابطه حسی مثبت ایجاد کنید
-صفحه تایید (Confirmation screen): وقتی که کاربر پروسه خرید را انجام می‌دهد باید صفحه ای وجود داشته باشد که جزئیات خرید در آن نمایش داده شود به همین منظور تمامی اپلیکیشن های تجاری نیاز به صفحه کانفرمیشن دارند.
۱۵.تکمیل خودکار (Autocomplete)
به عنوان یک طراح همیشه باید تلاش کنید تا میزان هزینه تعامل (interaction cost )کاربر را کاهش دهید به وسیله حذف عملکردهای غیرضروری.
۱۶.لغو عملیات (Undo action)
همه ما دچار اشتباه می‌شویم، در نتیجه برای ایجاد تجربه خوب برای کاربر این موضوع بسیار ضروری است که برای کاربر گزینه بازیابی اطلاعات را فراهم کنید.
۱۷.بومی سازی/ بین المللی
بعضی از تیم‌های محصول اهداف دسترسی به بازار بین المللی را دارند در نتیجه می‌بایست در پروسه طراحی به بومی و بین المللی بودن طرح توجه کرد.
۱۸.راهنما
زمانی که کاربر به مشکل برمی‌خورد، اولین کاری که انجام می‌دهد شروع به جستجو کردن برای یافتن راه حل است. پس بهتر است بخش راهنما و یا سوال متداول را برای اپلیکیشن خود طراحی کنید.
۱۹.دسترس پذیری (Accessibility)
دسترسی پذیری، افراد را با توانایی‌های مختلف قادر می‌سازد تا بتوانند محصول شما را درک و با آن ارتباط برقرار کنند.
۲۰.پوش نوتیفیکیشن (Push notifications)
آیا می‌دانستید نوتیفیکیشن‌های آزاردهنده دلیل اصلی پاک کردن (uninstall) اپلیکیشن توسط کاربر است؟ .
21.عکس پروفایل
به کاربرها اجازه دهید عکس مورد نظر خود را در پروفایل قرار دهند و همینطور بتوانند عکس خود را ویرایش کنند.
22.صفحه مشخصات شخصی
به کاربران اجازه دهید تا بتوانند اطلاعاتی که وارد اپلیکیشن کرده‌اند را ویرایش کنند. صفحه‌ای برای نمایش و ویرایش آدرس و اطلاعات کاربر طراحی کنید.
23.خروج (Logout)
اگر اپلیکیشن شما نیاز به ورود کاربر دارد، شما باید حتما گزینه خروج را نیز طراحی کنید و از کاربر هنگام خروج تایید بگیرید.
۲4.شرایط استفاده از خدمات (Terms of Service)
با قرار دادن شرایط استفاده از خدمات اپلیکیشن شما می‌توانید مانع از پیگرد قانونی از سمت کاربر شوید.
۲5.تنظیمات حریم خصوصی.
۲6.ارسال نظرات (Send feedback)
۲7.فضای اسکرول (Scrolling states)
صفحه نمایش گوشی موبایل قادر به نمایش فضای محدودی است. به منظور استفاده بهینه از فضای صفحهِ نمایش گوشی، طراحان اطلاعات غیرضروری را نمایش نمی‌دهند. برای همین است که اپلیکیشن‌ها دارای دو بخش هستند: صفحه پیش فرض که وقتی کاربر وارد صفحه می‌شود مشاهده می‌کند و بخش اسکرول که کاربر با اسکرول کردن صفحه آن بخش از صفحه رو مشاهده می‌کند.
۲8.نحوه جستجو
شما باید تصمیم بگیرید که می‌خواهید اپلیکیشن شما نتایج جستجو را به چه نحوی نمایش دهد.
29.اشتراک گذاری
در اپلیکیشن قسمتی را فراهم کنید تا کاربر نتایج جستجو را بتواند به اشتراک بگذارد یا بوک مارک (bookmark) کند.
۳0.نتیجه‌ای یافت نشد
وقتی کاربر آیتمی را جستجو می‌کند و نتیجه‌ای برای آن یافت نمی‌شود نباید تنها از عبارت “نتیجه‌ای یافت نشد” برای نمایش به کاربر استفاده کنید، بلکه علاوه بر آن می‌بایست کاربر را راهنمایی کنید چه کاری باید انجام دهد.
۳1.آیکون اپلیکیشن
و آخرین نکته، از آیکون بیادماندنی برای اپلیکیشن خود استفاده کنید. آیکونی که نشان دهنده هویت اپلیکیشن شما باشد و باعث جذب کاربر شود.
نتیجه گیری
به صورت خلاصه چک لیست UIیا رابط کاربری به ما می گوید از چیدمان های عجیب خودداری کنید.بیایید به مثال پیش نمایش اخبار که در بخش فضای خالی و حاشیه ها مطالعه کرده ایم برگردیم. اگر عناصر (تصویر ، عنوان ، متن و تاریخ) را به ترتیب غیر متعارف مرتب کنیم ، ممکن است گیج کننده باشد. سعی کنید به طرح های رابط آشنا بپردازید. تکراری بودن لزوماً به معنای کسل کننده بودن یک طرح نیست ، شما همیشه می توانید خلاقیت را در بخش های دیگر پروژه نشان دهید.
بدون یک دلیل منطقی از قراردادن آزمایشی عناصر در صفحه نمایش/ برگه و یا کارت خودداری کنید. زیرا ممکن است کاربر دچار سردرگمی شود و سایت شما را ترک کرده یا برنامه را حذف کند. به یاد داشته باشید که یک طراح و یک هنرمند حرفه های مختلفی دارند. در طراحی ما محصولات را به افراد معرفی میکنیم، این بدان معناست که انگیزه های خلاقانه شخصی شما فقط در جایی اعمال می شود که با تجربه کاربر تداخل نداشته باشد
بسیار ممنون که تا پایان ان مقاله با آپکاد همراه بودید. لطفا نظرات و پیشنهادات خود را با ما در میان بگذارید. اگر برای طراحی سایت در اصفهان در زمینه UI نیاز به مشورت دارید از خدمات رایگان آژانس بازاریابی آپکاد استفاده کنید.
