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

این مقاله اولین تجربه نوشتن من در ویرگول هست که باید از آقای امیر تقی آبادی برای پیشنهادش برای شروع کردن به ترجمه مقالات مرتبط با حوزه تجربه کاربری تشکر کنم.

توی این مقاله چک لیستی از باید‌‌های طراحی اپلیکیشن تهیه شده است که به شما کمک می‌کند تمام جوانب طراحی رو قبل از به اشتراک گذاری اپلیکیشن در نظر بگیرید. این چک لیست به مرور زمان تکمیل می‌شود به همین دلیل پیشنهاد می‌کنم این مقاله را بوک‌مارک کنید تا باز هم به مقاله سر بزنید. این چک لیست به 8 بخش اصلی تقسیم بندی میشه:

• ورود/ثبت‌نام (Login / Sign up)
• اولین تجربه کاربر (First-time experience)
• تجربیات روزانه (Daily interactions)
• نوتیفیکیشن (Notifications)
• مدیریت حساب کاربری (Account settings)
• خوراک (Feed)
• جستجو (Search)
• گوگل پلی (GooglePlay)

ورود/ثبت‌نام (Login / Sign up)

۱.اسپلش اسکرین (Splash screen)

اسپلش اسکرین صفحه‌ای است که وقتی که کابر اپلیکیشن را راه اندازی و اجرا می‌کند برایش نمایش داده می‌شود و از آنجایی که Splash Screen اولین برخورد کاربربا اپلیکیشن است باعث ایجاد تصور اولیه کاربر درمورد اپلیکیشن می‌شود، حتی اگر کاربر قبلا از اپلیکیشن استفاده کرده باشد.

برای طراحی اسپلش اسکرین می‌توانید از مقاله چک لیست طراحی Splash Screen کمک بگیرید.

۲.اطلاعات ثبت‌نام

باید به این نکته توجه کنید که هنگام ثبت‌نام تنها اطلاعات ضروری مورد نیاز را از کاربر درخواست کنید بدلیل اینکه گرفتن اطلاعات زیاد در ابتدای ثبت‌نام باعث می‌شود کاربر از ادامه دادن مرحله ثبت‌نام منصرف شود.

۳.ورود/ثبت‌نام از طریق حساب‌ کاربری گوگل

کاربرها علاقه مند هستند بدون پر کردن فیلدهای مختلف و با صرف زمان کوتاه در اپلیکیشن ثبت‌نام کنند، به همین منظور اگر نیاز به داشتن شماره همراه کاربر ندارید می‌توانید با ثبت‌نام از طریق حساب‌ کاربری گوگل و یا شبکه اجتماعی فیس بوک مسیر ثبت‌نام کاربر را کوتاه کنید. برای طراحی فرم ثبت‌نام می‌توانید از مقاله چک لیست طراحی فرم ثبت‌نام کمک بگیرید.

۴. بازیابی رمز عبور

به طور میانگین هر فرد در 90 سرویس آنلاین که نیاز به داشتن رمزعبور هست ثبت نام کرده و تعداد کمی از افراد هستند که با داشتن تعداد زیادی حساب کاربری، پسورد‌هایی که دارند رو فراموش نمی‌کنند. تحقیقات نشانگر این است که 21 درصد افراد پس از دو هفته پسوردی که استفاده کرده‌اند را فراموش می‌کنند. اگر اپلیکیشن شما نیاز به ورود دارد، پس شما باید گزینه بازیابی رمز عبور را برای کاربرها فراهم کنید.

اولین تجربه کاربر( First-time experience )

۵.صفحه Onboarding

طراحان رابط کاربری از واژه Onboarding برای توصیف مسیر آشناسازی کاربر با خدماتی که اپلیکیشن ارائه می‌دهد، استفاده می‌کنند. طراحی onboarding خوب، سبب افزایش احتمال تبدیل کاربر اولیه به کاربر همیشگی می‌شود.

در این مقاله یاد می‌گیرید با چه رویکردی صفحه Onboarding را طراحی کنید.

اگر علاقه‌مند به کارهای خلاقانه هستید مقاله چند رویکرد خلاقانه برای Onboarding در موبایل را نیز چک کنید.

۶.صفحه تایید اطلاعات (Data confirmation screen)

بسیاری از اپلیکیشن‌ها از کاربر می‌خواهند که شماره موبایل یا آدرس ایمیلی که وارد کرده‌اند را تایید کنند. معمولا بعد از اینکه کاربر آدرس ایمیل/موبایل را وارد می‌کند صفحه تایید اطلاعات نمایش داده می‌شود.

برای صفحه تایید اطلاعات در نظر گرفتن نکات زیر بسیار مهم است:

- دکمه ارسال مجدد کد تایید (برای شماره موبایل)

- راهنمای پیدا کردن ایمیل کد تایید (برای مثال قرار دادن عنوان ایمیلی که برای کاربر ارسال می‌شود، جستجو در فایل spam و ...)

۷.فضای خالی (Empty State)

ارزش اکثر اپلیکیشن‌ها به محتوایی هست که به کاربر ارائه می‌دهند و این دلیل اولیه‌ای است که کاربر از آن اپلیکیشن استفاده می‌کند. بنابراین، بسیار مهم است فضاهایی که در آن ممکن هست کاربر هنوز محتوایی ندارد در جریان کاربری (user journey) در نظر گرفته شود. به چنین فضاهایی Empty State می‌گویند، Empty State به پیام‌هایی گفته می‌شود که برای کاربر نمایش داده می‌شود زمانی که محتوایی برای نمایش برای کاربر وجود ندارد. برای اطلاعات بیشتر به مقاله چک لیست طراحی Empty State رجوع کنید.

۸.عکس پروفایل پیش فرض کاربر (Default user avatar)

اکثریت کاربران (95% بر اساس گفته Jared M. Spool) تنظیمات پیش فرض را تغییر نمی‌دهند. این موضوع بیانگر این است که اکثریت کاربران از آواتار (Avatar) پیش فرضی که برای اپلیکیشن طراحی کردید استفاده می‌کنند.

برای آشنایی با طراحی آواتار می‌توانید سری به مقاله چک لیست طراحی Avatar بزنید.

تجربه روزانه (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 کمک بگیرید. و همچنین می‌توانید از مقاله چک لیست طراحی آیکون استفاده کنید.

۱۲.پیام خطا (Error states)

همه ما می‌دانیم بهترین پیامِ خطا، پیامی است که نشان داده نمی‌شود، یعنی بهتر است همیشه مانع ایجاد خطا در مسیر انجام کارِ کاربر شوید و با راهنمایی کاربر در موقعیت و زمان مناسب می‌توانید مانع از این اتفاق شوید. اما وقتی خطایی از سمت کاربر رخ می‌دهد می‌توان با طراحی پیامِ خطا مناسب، نه تنها به کاربر آموزش استفاده صحیح از اپلیکیشن را یاد داد همچنین مانع ایجاد حس نادیده گرفتن از سوی کاربر می شوید.

موقعیت‌هایی که باید برای آن پیام خطا طراحی کنید:

_ دسترسی به اینترنت امکان پذیر نیست.

_ اطلاعات وارد شده نادرست است.

_ خطای سیستم (System error).

به یاد داشته باشید زمانی که کاربر اطلاعات نادرست وارد کرد، مشخص کنید در کدام فیلد اطلاعات نادرست وارد شده و برای اصلاح آن کاربر را راهنمایی کنید.

برای طراحی پیام خطا در اپلیکیشن از مقاله چک لیست طراحی Error States کمک بگیرید.

۱۳.پیام در حال بارگذاری (Loading states)

اگر چه همیشه انتظار می‌رود اپلیکیشن دارای عملکرد سریع باشد، اما گاهی اوقات اپلیکیشن توانایی پاسخ سریع ندارد به دلایلی همچون سرعت پایین اینترنت، که باعث پایین آمدن پاسخ‌دهی اپلیکیشن می‌شود. برای چنین موقعیت‌هایی برای کاهش تنش کاربر، شما باید به کاربر اطمینان دهید که اپلیکیشن در حال پاسخگویی به درخواست کاربر است. وقتی اپلیکیشن به کاربر اطلاع نمی‌دهد که پروسه بارگذاری اطلاعات طول می‌کشد، اغلب کاربر گمان می‌کند اپلیکیشن درخواست کاربر را دریافت نکرده و دوباره درخواست می‌دهد، و تعداد بیشتر درخواست کاربر باعث کاهش سرعت عملکرد اپلیکیشن می‌شود. در اینجا می‌توانید 10 نمونه از نشانگرهای خلاقانه بارگذاری رو ببینید.

انیمیشنی که نشان دهنده پیشرفت است بهترین حالت برای نمایش Loading است، مانند تصویر زیر:

۱۴.پیام موفقیت آمیز بودن پروسه (Success states )

وقتی کاربر یک Task را به طور کامل انجام می‌دهد می‌بایست پیغامی مبنی بر موفقیت آمیز بودن پروسه برایش نمایش داده شود. طراح باید انواع مختلف پیام‌های Success را در نظر بگیرد:

-پیام دلنشین(Delightful): زمانی که کاربر، تسک (Task) مهمی را برای اولین بار به طور کامل انجام می‌دهد، بهترین فرصت برای شماست که بین اپلیکیشن و کاربر رابطه حسی مثبت ایجاد کنید. با تجلیل کردن کاربر در مورد موفق انجام دادن پروسه به او نشان می‌دهید که کار را به طور عالی انجام داده است.

-صفحه تایید (Confirmation screen): وقتی که کاربر پروسه خرید را انجام می‌دهد باید صفحه ای وجود داشته باشد که جزئیات خرید در آن نمایش داده شود به همین منظور تمامی اپلیکیشن های تجاری نیاز به صفحه کانفرمیشن دارند.

۱۵.تکمیل خودکار (Autocomplete)

به عنوان یک طراح همیشه باید تلاش کنید تا میزان هزینه تعامل (interaction cost )کاربر را کاهش دهید به وسیله حذف عملکردهای غیرضروری. زمانی که از فرآیندتکمیل خودکار فیلدها استفاده کنید،کاربر با تعداد کلیک‌های کمتری به هدف می‌رسد و باعث آسان‌تر شدن کارِ کاربر برای پاسخگویی به درخواست اپلیکیشن می‌شود.

۱۶.لغو عملیات (Undo action)

همه ما دچار اشتباه می‌شویم، در نتیجه برای ایجاد تجربه خوب برای کاربر این موضوع بسیار ضروری است که برای کاربر گزینه بازیابی اطلاعات را فراهم کنید.

۱۷.بومی سازی/ بین المللی

بعضی از تیم‌های محصول اهداف دسترسی به بازار بین المللی را دارند در نتیجه می‌بایست در پروسه طراحی به بومی و بین المللی بودن طرح توجه کرد. در همین راستا می بایست امکانه تغییر زبان اپلیکیشن وجود داشته باشد و همچنین در نظر بگیرید با تغییر زبان سیستم عامل توسط کاربر، زبان اپلیکیشن نیز تغییر کند.

۱۸.راهنما

زمانی که کاربر به مشکل برمی‌خورد، اولین کاری که انجام می‌دهد شروع به جستجو کردن برای یافتن راه حل است. پس بهتر است بخش راهنما و یا سوال متداول را برای اپلیکیشن خود طراحی کنید.

۱۹.دسترس پذیری (Accessibility)

دسترسی پذیری، افراد را با توانایی‌های مختلف قادر می‌سازد تا بتوانند محصول شما را درک و با آن ارتباط برقرار کنند.در اینجا خلاصه ای از آنچه طراحان در مورد دسترس پذیری باید بدانند آورده شده است.

نوتیفیکیشن (Notification)

۲۰.پوش نوتیفیکیشن (Push notifications)

آیا می‌دانستید نوتیفیکیشن‌های آزاردهنده دلیل اصلی پاک کردن (uninstall) اپلیکیشن توسط کاربر است؟ اگر چه می‌توان این الگو ضد UX را تبدیل به عملکردی معنادار و مفید هم برای بیزینس و هم برای کاربر تبدیل کرد. برای دستیابی به این عملکرد می‌توان مقاله چک لیست طراحی Notification را مطالعه کنید.

۲۱.تنظیمات نوتیفیکیشن

و همینطور در زمینه نوتیفیکیشن بهتر است برای کاربر آزادی عمل فراهم کنید و کاربر فرصت این را داشته باشد تا خودش انتخاب کند که مایل به دریافت چه نوتیفیکیشن‌هایی است.

تنظیمات حساب کاربری (Account settings)

۲۲.عکس پروفایل

به کاربرها اجازه دهید عکس مورد نظر خود را در پروفایل قرار دهند و همینطور بتوانند عکس خود را ویرایش کنند.

۲۳.صفحه مشخصات شخصی

به کاربران اجازه دهید تا بتوانند اطلاعاتی که وارد اپلیکیشن کرده‌اند را ویرایش کنند. صفحه‌ای برای نمایش و ویرایش آدرس و اطلاعات کاربر طراحی کنید.

۲۴.خروج (Logout)

اگر اپلیکیشن شما نیاز به ورود کاربر دارد، شما باید حتما گزینه خروج را نیز طراحی کنید و از کاربر هنگام خروج تایید بگیرید.

۲۵.شرایط استفاده از خدمات (Terms of Service)

با قرار دادن شرایط استفاده از خدمات اپلیکیشن شما می‌توانید مانع از پیگرد قانونی از سمت کاربر شوید.

۲۶.تنظیمات حریم خصوصی

شرایطی فراهم کنید تا کاربران بدانند چه اطلاعاتی را با اپلیکیشن به اشتراک می‌گذارند و همچنین بتوانند تنظیمات را شخصی سازی کند.

۲۷.ارسال نظرات (Send feedback)

با فراهم کردن مسیری آسان برای دریافت نظرات کاربران، نه تنها می‌توانید دیدگاه کاربر در مورد اپلیکیشن خود را بدست آورید بلکه کاربر احساس می‌کند نظراتش برای شما قابل احترام و ارزش است.

خوراک (Feed)

۲۸.فضای اسکرول (Scrolling states)

صفحه نمایش گوشی موبایل قادر به نمایش فضای محدودی است. به منظور استفاده بهینه از فضای صفحهِ نمایش گوشی، طراحان اطلاعات غیرضروری را نمایش نمی‌دهند. برای همین است که اپلیکیشن‌ها دارای دو بخش هستند: صفحه پیش فرض که وقتی کاربر وارد صفحه می‌شود مشاهده می‌کند و بخش اسکرول که کاربر با اسکرول کردن صفحه آن بخش از صفحه رو مشاهده می‌کند.

جستجو (In-app search)

۲۹.نحوه جستجو

شما باید تصمیم بگیرید که می‌خواهید اپلیکیشن شما نتایج جستجو را به چه نحوی نمایش دهد. برای مثال اگر برای اپلیکیشن تجاری صفحه نمایش جستجو طراحی می‌کنید شما باید طراحی کنید که می‌خواهید نتایج بر اساس کدام یک از دسته‌های: قیمت، محبوبیت و یا غیره دسته بندی و نمایش داده شود. و برای سهولت استفاده کاربر می‌توانید آخرین جستجوهای کاربر را در اپلیکیشن ذخیره کنید. می‌توانید از مقاله چک لیست طراحی Search Box کمک بگیرید.

۳۰.اشتراک گذاری

در اپلیکیشن قسمتی را فراهم کنید تا کاربر نتایج جستجو را بتواند به اشتراک بگذارد یا بوک مارک (bookmark) کند.

۳۱.نتیجه‌ای یافت نشد

وقتی کاربر آیتمی را جستجو می‌کند و نتیجه‌ای برای آن یافت نمی‌شود نباید تنها از عبارت "نتیجه‌ای یافت نشد" برای نمایش به کاربر استفاده کنید، بلکه علاوه بر آن می‌بایست کاربر را راهنمایی کنید چه کاری باید انجام دهد، مانند تصویر زیر که از کاربر خواسته شده تمامی فیلترها را پاک کند. مقاله 3 راهبرد اساسی در طراحی «No Result Page» توضیحات خوبی در این زمینه دارد.

گوگل پلی

۳۲.آیکون اپلیکیشن

و آخرین نکته، از آیکون بیادماندنی برای اپلیکیشن خود استفاده کنید. آیکونی که نشان دهنده هویت اپلیکیشن شما باشد و باعث جذب کاربر شود.

منابع :

https://uxplanet.org/30-things-we-often-forget-when-designing-mobile-apps-ae30cc3b2c6b

https://parhamb.github.io/uxchecklist/#design