چک لیست طراحی تجربه‌ی کاربری موبایل

این مقاله اولین تجربه نوشتن من در ویرگول هست که باید از آقای امیر تقی آبادی برای پیشنهادش برای شروع کردن به ترجمه مقالات مرتبط با حوزه تجربه کاربری تشکر کنم.توی این مقاله چک لیستی از باید‌‌های طراحی اپلیکیشن تهیه شده است که به شما کمک می‌کند تمام جوانب طراحی رو قبل از به اشتراک گذاری اپلیکیشن در نظر بگیرید. این چک لیست به مرور زمان تکمیل می‌شود به همین دلیل پیشنهاد می‌کنم این مقاله را بوک‌مارک کنید تا باز هم به مقاله سر بزنید. این چک لیست به 8 بخش اصلی تقسیم بندی میشه:ورود/ثبت‌نام (Login / Sign up)اولین تجربه کاربر (First-time experience)تجربیات روزانه (Daily interactions)نوتیفیکیشن (Notifications) مدیریت حساب کاربری (Account settings)خوراک (Feed)جستجو (Search)گوگل پلی (GooglePlay)ورود/ثبت‌نام (Login / Sign up)۱.اسپلش اسکرین (Splash screen)اسپلش اسکرین صفحه‌ای است که وقتی که کابر اپلیکیشن را راه اندازی و اجرا می‌کند برایش نمایش داده می‌شود و از آنجایی که Splash Screen اولین برخورد کاربربا اپلیکیشن است باعث ایجاد تصور اولیه کاربر درمورد اپلیکیشن می‌شود، حتی اگر کاربر قبلا از اپلیکیشن استفاده کرده باشد.اسپلش اسکرین پیشنهادی Airbnbبرای طراحی اسپلش اسکرین می‌توانید از مقاله چک لیست طراحی Splash Screen کمک بگیرید. https://virgool.io/@amirtaqiabadi/%D8%A7%D8%B5%D9%88%D9%84-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-splash-screen-y59gike4zgkd ۲.اطلاعات ثبت‌نامباید به این نکته توجه کنید که هنگام ثبت‌نام تنها اطلاعات ضروری مورد نیاز را از کاربر درخواست کنید بدلیل اینکه گرفتن اطلاعات زیاد در ابتدای ثبت‌نام باعث می‌شود کاربر از ادامه دادن مرحله ثبت‌نام منصرف شود.۳.ورود/ثبت‌نام از طریق حساب‌ کاربری گوگلکاربرها علاقه مند هستند بدون پر کردن فیلدهای مختلف و با صرف زمان کوتاه در اپلیکیشن ثبت‌نام کنند، به همین منظور اگر نیاز به داشتن شماره همراه کاربر ندارید می‌توانید با ثبت‌نام از طریق حساب‌ کاربری گوگل و یا شبکه اجتماعی فیس بوک مسیر ثبت‌نام کاربر را کوتاه کنید. برای طراحی فرم ثبت‌نام می‌توانید از مقاله چک لیست طراحی فرم ثبت‌نام کمک بگیرید. https://virgool.io/@amirtaqiabadi/httpsvirgoolioamirtaqiabadi%DA%86%DA%A9-%D9%84%DB%8C%D8%B3%D8%AA-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%81%D8%B1%D9%85-%D8%AB%D8%A8%D8%AA-%D9%86%D8%A7%D9%85-h2ltubnmbjrv ۴. بازیابی رمز عبوربه طور میانگین هر فرد در 90 سرویس آنلاین که نیاز به داشتن رمزعبور هست ثبت نام کرده و تعداد کمی از افراد هستند که با داشتن تعداد زیادی حساب کاربری، پسورد‌هایی که دارند رو فراموش نمی‌کنند. تحقیقات نشانگر این است که 21 درصد افراد پس از دو هفته پسوردی که استفاده کرده‌اند را فراموش می‌کنند. اگر اپلیکیشن شما نیاز به ورود دارد، پس شما باید گزینه بازیابی رمز عبور را برای کاربرها فراهم کنید.صفحه فراموشی رمز عبوراولین تجربه کاربر( First-time experience )۵.صفحه Onboardingطراحان رابط کاربری از واژه Onboarding برای توصیف مسیر آشناسازی کاربر با خدماتی که اپلیکیشن ارائه می‌دهد، استفاده می‌کنند. طراحی onboarding خوب، سبب افزایش احتمال تبدیل کاربر اولیه به کاربر همیشگی می‌شود.صفحه Onboarding اپلیکیشن کودکدر این مقاله یاد می‌گیرید با چه رویکردی صفحه Onboarding را طراحی کنید. https://virgool.io/@amirtaqiabadi/%D8%A7%D8%B5%D9%88%D9%84-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-user-onboarding-odq2c7vpapat اگر علاقه‌مند به کارهای خلاقانه هستید مقاله چند رویکرد خلاقانه برای Onboarding در موبایل را نیز چک کنید.۶.صفحه تایید اطلاعات (Data confirmation screen)بسیاری از اپلیکیشن‌ها از کاربر می‌خواهند که شماره موبایل یا آدرس ایمیلی که وارد کرده‌اند را تایید کنند. معمولا بعد از اینکه کاربر آدرس ایمیل/موبایل را وارد می‌کند صفحه تایید اطلاعات نمایش داده می‌شود.صفحه تایید اطلاعاتبرای صفحه تایید اطلاعات در نظر گرفتن نکات زیر بسیار مهم است:- دکمه ارسال مجدد کد تایید (برای شماره موبایل)- راهنمای پیدا کردن ایمیل کد تایید (برای مثال قرار دادن عنوان ایمیلی که برای کاربر ارسال می‌شود، جستجو در فایل spam و ...)۷.فضای خالی (Empty State)ارزش اکثر اپلیکیشن‌ها به محتوایی هست که به کاربر ارائه می‌دهند و این دلیل اولیه‌ای است که کاربر از آن اپلیکیشن استفاده می‌کند. بنابراین، بسیار مهم است فضاهایی که در آن ممکن هست کاربر هنوز محتوایی ندارد در جریان کاربری (user journey) در نظر گرفته شود. به چنین فضاهایی Empty State می‌گویند، Empty State به پیام‌هایی گفته می‌شود که برای کاربر نمایش داده می‌شود زمانی که محتوایی برای نمایش برای کاربر وجود ندارد. برای اطلاعات بیشتر به مقاله چک لیست طراحی Empty State رجوع کنید.نمونه‌ای از Empty Estate https://virgool.io/ux-unicorn/%DA%86%DA%A9-%D9%84%DB%8C%D8%B3%D8%AA-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-empty-state-honacekz2ee1 ۸.عکس پروفایل پیش فرض کاربر (Default user avatar)اکثریت کاربران (95% بر اساس گفته Jared M. Spool) تنظیمات پیش فرض را تغییر نمی‌دهند. این موضوع بیانگر این است که اکثریت کاربران از آواتار (Avatar) پیش فرضی که برای اپلیکیشن طراحی کردید استفاده می‌کنند.نمونه ای از آواتار پیش فرضبرای آشنایی با طراحی آواتار می‌توانید سری به مقاله چک لیست طراحی Avatar بزنید. https://virgool.io/@rominazamani91/%DA%86%DA%A9-%D9%84%DB%8C%D8%B3%D8%AA-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-avatar-trj2ldhtbfjz تجربه روزانه (Daily experience)۹.صفحه اجازه دسترسی (Permission requests screen)زمانی که کاربر اپلیکیشن جدیدی را باز می‌کند، آخرین چیزی که می‌خواهد ببیند تعداد زیادی پاپ آپ (popup) که اجازه دسترسی به امکانات موبایل را می‌خواهند از جمله :اپلیکیشن اجازه دسترسی به لوکیشن (Location) را می‌خواهد.اپلیکیشن اجازه دسترسی به مخاطبین شما را می‌خواهد.اپلیکیشن اجازه دسترسی به دوربین شما را می‌خواهد.چنین درخواست‌هایی تاثیر منفی روی تجربه کاربر می‌گذارد و سبب می‌شود کاربر از اپلیکیشن استفاده نکند. به همین دلیل است که بهتر است ابتدا اپلیکیشن در ارتباط با کاربر قرار بگیرد و پس از آن درخواست دسترسی به محتوای موبایل کاربر را ارائه دهد.نو تیفیکیشن اجازه دسترسیمقاله The Right Ways to Ask Users for Permissions روش‌های طرح سوال برای اجازه دسترسی به موبایل را آموزش می‌دهد.۱۰.حالت‌های مختلف المان‌های اینتراکتیواغلب دکمه‌ها و دیگر المان‌های اینتر اکتیو (interactive) دارای حالت‌های مختلفی هستند. این موضوع مهمی است که هر یک از حالت‌ها نظیر پیش فرض (Default)،فشرده شده و غیر فعال را برای هر یک از المان‌های اینتراکتیو اپلیکیشن طراحی کنید. برای طراحی دکمه‌ها می‌توانید از مقاله 7 قانون اساسی طراحی Button کمک بگیرید. و همچنین مقاله یازده سوال مهم در طراحی دکمه(Button design) اطلاعات خوبی را در اختیارتان قرار خواهد داد.سه حالت مختلف دکمه۱۱. ست آیکون (Icons set)برای افزایش یکپارچگی بصری در طراحی UI می‌توانید آیکن‌ها را در استایل یکسان طراحی و استفاده کنید. برای این منظور می‌توانید مقاله Checklist for Using Icons In UI کمک بگیرید. و همچنین می‌توانید از مقاله چک لیست طراحی آیکون استفاده کنید.آیکون های Tab bar توییتر برای ios۱۲.پیام خطا (Error states)همه ما می‌دانیم بهترین پیامِ خطا، پیامی است که نشان داده نمی‌شود، یعنی بهتر است همیشه مانع ایجاد خطا در مسیر انجام کارِ کاربر شوید و با راهنمایی کاربر در موقعیت و زمان مناسب می‌توانید مانع از این اتفاق شوید. اما وقتی خطایی از سمت کاربر رخ می‌دهد می‌توان با طراحی پیامِ خطا مناسب، نه تنها به کاربر آموزش استفاده صحیح از اپلیکیشن را یاد داد همچنین مانع ایجاد حس نادیده گرفتن از سوی کاربر می شوید. نمونه ای از پیام خطا با طراحی خوبموقعیت‌هایی که باید برای آن پیام خطا طراحی کنید:_ دسترسی به اینترنت امکان پذیر نیست._ اطلاعات وارد شده نادرست است._ خطای سیستم (System error).به یاد داشته باشید زمانی که کاربر اطلاعات نادرست وارد کرد، مشخص کنید در کدام فیلد اطلاعات نادرست وارد شده و برای اصلاح آن کاربر را راهنمایی کنید.برای طراحی پیام خطا در اپلیکیشن از مقاله چک لیست طراحی Error States کمک بگیرید.۱۳.پیام در حال بارگذاری (Loading states)اگر چه همیشه انتظار می‌رود اپلیکیشن دارای عملکرد سریع باشد، اما گاهی اوقات اپلیکیشن توانایی پاسخ سریع ندارد به دلایلی همچون سرعت پایین اینترنت، که باعث پایین آمدن پاسخ‌دهی اپلیکیشن می‌شود. برای چنین موقعیت‌هایی برای کاهش تنش کاربر، شما باید به کاربر اطمینان دهید که اپلیکیشن در حال پاسخگویی به درخواست کاربر است. وقتی اپلیکیشن به کاربر اطلاع نمی‌دهد که پروسه بارگذاری اطلاعات طول می‌کشد، اغلب کاربر گمان می‌کند اپلیکیشن درخواست کاربر را دریافت نکرده و دوباره درخواست می‌دهد، و تعداد بیشتر درخواست کاربر باعث کاهش سرعت عملکرد اپلیکیشن می‌شود. در اینجا می‌توانید 10 نمونه از نشانگرهای خلاقانه بارگذاری رو ببینید.انیمیشنی که نشان دهنده پیشرفت است بهترین حالت برای نمایش Loading است، مانند تصویر زیر:صفحه Loading۱۴.پیام موفقیت آمیز بودن پروسه (Success states )وقتی کاربر یک Task را به طور کامل انجام می‌دهد می‌بایست پیغامی مبنی بر موفقیت آمیز بودن پروسه برایش نمایش داده شود. طراح باید انواع مختلف پیام‌های Success را در نظر بگیرد:-پیام دلنشین(Delightful): زمانی که کاربر، تسک (Task) مهمی را برای اولین بار به طور کامل انجام می‌دهد، بهترین فرصت برای شماست که بین اپلیکیشن و کاربر رابطه حسی مثبت ایجاد کنید. با تجلیل کردن کاربر در مورد موفق انجام دادن پروسه به او نشان می‌دهید که کار را به طور عالی انجام داده است.-صفحه تایید (Confirmation screen): وقتی که کاربر پروسه خرید را انجام می‌دهد باید صفحه ای وجود داشته باشد که جزئیات خرید در آن نمایش داده شود به همین منظور تمامی اپلیکیشن های تجاری نیاز به صفحه کانفرمیشن دارند.۱۵.تکمیل خودکار (Autocomplete)به عنوان یک طراح همیشه باید تلاش کنید تا میزان هزینه تعامل (interaction cost )کاربر را کاهش دهید به وسیله حذف عملکردهای غیرضروری. زمانی که از فرآیندتکمیل خودکار فیلدها استفاده کنید،کاربر با تعداد کلیک‌های کمتری به هدف می‌رسد و باعث آسان‌تر شدن کارِ کاربر برای پاسخگویی به درخواست اپلیکیشن می‌شود.تکمیل خودکار۱۶.لغو عملیات (Undo action)همه ما دچار اشتباه می‌شویم، در نتیجه برای ایجاد تجربه خوب برای کاربر این موضوع بسیار ضروری است که برای کاربر گزینه بازیابی اطلاعات را فراهم کنید.لغو عملیات پاک کردن۱۷.بومی سازی/ بین المللی بعضی از تیم‌های محصول اهداف دسترسی به بازار بین المللی را دارند در نتیجه می‌بایست در پروسه طراحی به بومی و بین المللی بودن طرح توجه کرد. در همین راستا می بایست امکانه تغییر زبان اپلیکیشن وجود داشته باشد و همچنین در نظر بگیرید با تغییر زبان سیستم عامل توسط کاربر، زبان اپلیکیشن نیز تغییر کند.۱۸.راهنمازمانی که کاربر به مشکل برمی‌خورد، اولین کاری که انجام می‌دهد شروع به جستجو کردن برای یافتن راه حل است. پس بهتر است بخش راهنما و یا سوال متداول را برای اپلیکیشن خود طراحی کنید.راهنما و بازخورد۱۹.دسترس پذیری (Accessibility)دسترسی پذیری، افراد را با توانایی‌های مختلف قادر می‌سازد تا بتوانند محصول شما را درک و با آن ارتباط برقرار کنند.در اینجا خلاصه ای از آنچه طراحان در مورد دسترس پذیری باید بدانند آورده شده است.نوتیفیکیشن (Notification)۲۰.پوش نوتیفیکیشن (Push notifications)آیا می‌دانستید نوتیفیکیشن‌های آزاردهنده دلیل اصلی پاک کردن (uninstall) اپلیکیشن توسط کاربر است؟ اگر چه می‌توان این الگو ضد UX را تبدیل به عملکردی معنادار و مفید هم برای بیزینس و هم برای کاربر تبدیل کرد. برای دستیابی به این عملکرد می‌توان مقاله چک لیست طراحی Notification را مطالعه کنید. https://virgool.io/ux-unicorn/%DA%86%DA%A9-%D9%84%DB%8C%D8%B3%D8%AA-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-notification-axxa08s8efoc ۲۱.تنظیمات نوتیفیکیشنو همینطور در زمینه نوتیفیکیشن بهتر است برای کاربر آزادی عمل فراهم کنید و کاربر فرصت این را داشته باشد تا خودش انتخاب کند که مایل به دریافت چه نوتیفیکیشن‌هایی است. تنظیمات حساب کاربری (Account settings)۲۲.عکس پروفایلبه کاربرها اجازه دهید عکس مورد نظر خود را در پروفایل قرار دهند و همینطور بتوانند عکس خود را ویرایش کنند.ویرایش عکس پروفایل۲۳.صفحه مشخصات شخصیبه کاربران اجازه دهید تا بتوانند اطلاعاتی که وارد اپلیکیشن کرده‌اند را ویرایش کنند. صفحه‌ای برای نمایش و ویرایش آدرس و اطلاعات کاربر طراحی کنید.آدرس قابل ویرایش است۲۴.خروج (Logout)اگر اپلیکیشن شما نیاز به ورود کاربر دارد، شما باید حتما گزینه خروج را نیز طراحی کنید و از کاربر هنگام خروج تایید بگیرید.۲۵.شرایط استفاده از خدمات (Terms of Service)با قرار دادن شرایط استفاده از خدمات اپلیکیشن شما می‌توانید مانع از پیگرد قانونی از سمت کاربر شوید.۲۶.تنظیمات حریم خصوصیشرایطی فراهم کنید تا کاربران بدانند چه اطلاعاتی را با اپلیکیشن به اشتراک می‌گذارند و همچنین بتوانند تنظیمات را شخصی سازی کند.۲۷.ارسال نظرات (Send feedback)با فراهم کردن مسیری آسان برای دریافت نظرات کاربران، نه تنها می‌توانید دیدگاه کاربر در مورد اپلیکیشن خود را بدست آورید بلکه کاربر احساس می‌کند نظراتش برای شما قابل احترام و ارزش است.خوراک (Feed)۲۸.فضای اسکرول (Scrolling states)صفحه نمایش گوشی موبایل قادر به نمایش فضای محدودی است. به منظور استفاده بهینه از فضای صفحهِ نمایش گوشی، طراحان اطلاعات غیرضروری را نمایش نمی‌دهند. برای همین است که اپلیکیشن‌ها دارای دو بخش هستند: صفحه پیش فرض که وقتی کاربر وارد صفحه می‌شود مشاهده می‌کند و بخش اسکرول که کاربر با اسکرول کردن صفحه آن بخش از صفحه رو مشاهده می‌کند.جستجو (In-app search)۲۹.نحوه جستجوشما باید تصمیم بگیرید که می‌خواهید اپلیکیشن شما نتایج جستجو را به چه نحوی نمایش دهد. برای مثال اگر برای اپلیکیشن تجاری صفحه نمایش جستجو طراحی می‌کنید شما باید طراحی کنید که می‌خواهید نتایج بر اساس کدام یک از دسته‌های: قیمت، محبوبیت و یا غیره دسته بندی و نمایش داده شود. و برای سهولت استفاده کاربر می‌توانید آخرین جستجوهای کاربر را در اپلیکیشن ذخیره کنید. می‌توانید از مقاله چک لیست طراحی Search Box کمک بگیرید.۳۰.اشتراک گذاریدر اپلیکیشن قسمتی را فراهم کنید تا کاربر نتایج جستجو را بتواند به اشتراک بگذارد یا بوک مارک (bookmark) کند.۳۱.نتیجه‌ای یافت نشدوقتی کاربر آیتمی را جستجو می‌کند و نتیجه‌ای برای آن یافت نمی‌شود نباید تنها از عبارت "نتیجه‌ای یافت نشد" برای نمایش به کاربر استفاده کنید، بلکه علاوه بر آن می‌بایست کاربر را راهنمایی کنید چه کاری باید انجام دهد، مانند تصویر زیر که از کاربر خواسته شده تمامی فیلترها را پاک کند. مقاله 3 راهبرد اساسی در طراحی «No Result Page» توضیحات خوبی در این زمینه دارد.اپلیکیشن Flightگوگل پلی۳۲.آیکون اپلیکیشنو آخرین نکته، از آیکون بیادماندنی برای اپلیکیشن خود استفاده کنید. آیکونی که نشان دهنده هویت اپلیکیشن شما باشد و باعث جذب کاربر شود.منابع :https://uxplanet.org/30-things-we-often-forget-when-designing-mobile-apps-ae30cc3b2c6bhttps://parhamb.github.io/uxchecklist/#design