راهنمای جامع طراحی اپلیکیشن موبایل ( قسمت دوم )

دوشنبه ۰۶ فروردین ۹۷ توسط محمد نصراللهی

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

 

کاربر را تحت کنترل بگیرید

عناصر ارتباطی آشنا و قابل پیش بینی باشند

پیش بینی پذیری یک اصل مهم در طراحی UX است. وقتی همه چیز طوری که کاربر پیش‌بینی می‌کند کار کند آنها احساس کنترل بیشتری میکنند. برخلاف دسکتاپ که کاربر می‌تواند با ویژگی hover از تعاملی بودن یک عنصر آگاه شود در موبایل کاربر تنها با کلیک بر روی یک عنصر می تواند از تعاملی بودن آن آگاه شود. برای همین، ضروری است، عناصری که در طراحی از آنها استفاده می‌کنیم برای ما مفید باشند. چطور کاربر کاربرد یک عنصر مانند دکمه را تشخیص دهد؟ طرح ما باید یک عملکرد خاص را دنبال کند: راهی که شی به کاربر بفهماند که چطور باید از آن استفاده کند. المنت های تصویری که مانند دکمه هستند و قابل کلیک نیستند به راحتی کاربر را گیج می‌کنند.

 

دکمه برگشت باید به درستی کار کند

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

 

ارورهای معنا دار

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

برای مثال در شکل زیر ارور نمایش داده شده کمکی برای فهم مشکل نمی‌کند و به این سوال کاربر که "حالا چیکار کنم؟" جوابی نمی دهد.

 

 این ارور کمکی برای حل مشکل نمی کند

 

فرض نکنید که کاربرد به اندازه کافی از تکنولوژی سر در می آورد. همیشه با یک متن ساده مشکل را به کاربر بگویید. هر پیغام خطا باید به کاربر موارد زیر را بگوید:

  •  مشکل چیست و چرا ؟
  •  کاربر برای حل این مشکل باید چه کار کنم ؟

 

 برای اطلاعات بیشتر در مورد مدیریت ارور ها مقاله "How to Design Error States for Mobile Apps" را بخوانیم

 

یک رابط کاربری در دسترس طراحی کنید

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

 

به کور رنگی توجه کنید

4.5% از مردم جهان کوررنگی دارند( یک مرد از هر ۱۲ مرد و یک زن از هر ۲۰۰ زن )، ۴ درصد از دید کم رنج می‌برند و ۶ درصد کور هستند ( یک نفر از ۱۸۸ نفر ). راحت فراموش می‌کنیم که باید اپلیکیشن خود را برای این گروه نیز طراحی کنیم، زیرا بیشتر طراحان تجربه‌ای از این مشکلات ندارند.

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

 

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

 

طبق دستورالعمل W3C رنگ ها نباید تنها ابزار برای انتقال اطلاعات، نمایش فعالیت ها، تمایز عناصر تصویری و ... باشند. استفاده از ابزارهای تصویری دیگر بسیار مهم می باشد، تا کاربر بتواند با برنامه شما تعامل کند.

 

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

 

انیمیشن ها را اختیاری کنیم

کاربرانی که از بیماری حرکتی رنج می برند معمولاً تنظیمات انیمیشن را در سیستم عامل خود غیر فعال می کنند. وقتی گزینه کاهش حرکت در accessibility فعال است اپلیکیشن شما باید انیمیشن ها را به حداقل برساند و یا اصلا نمایش ندهد.

 

جهت یابی (navigation) در برنامه ساده باشد

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

 

از جهت یابی استاندارد استفاده کنید

بهتر است از تکنیک های استاندارد جهت یابی از قبیل tab bar ( برای ios ) و navigation drawer ( برای اندروید ) استفاده کنید. بیشتر کاربر ها با استفاده از این الگو های جهت یابی آشنا هستند.

 

side drawer ( اندروید )

 

 ( tab bar ( ios

 

برای اطلاعات بیشتر درباره الگو های جهت یابی مقاله "Basic Patterns for Mobile Navigation: Pros and Cons" را مطالعه کنید.

 

روش های جهت یابی را اولویت بندی کنید

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

 

الگو های جهت یابی را ترکیب نکنید

وقتی یک الگوی جهت یابی را انتخاب میکنید، همواره از آن استفاده کنید. اینطور نباشد که در یک قسمت از اپلیکیشن، از tab bar و در قسمت دیگر از side drawer استفاده کنید.

 

جهت یابی را قابل رویت کنید

همانطور که جاکوب نیلسن (Jakob Nielsen) میگوید " شناختن یک چیز راحت تر از به یاد سپردن آن است ". با نمایش گزینه ها، استفاده کاربر از حافظه اش را به کمترین حد برسانید. جهت یابی باید همیشه در دسترس باشد نه اینکه فقط زمانی که فکر میکنیم کاربر به آن نیاز دارد آن را ایجاد کنیم.

 

با لوکیشن فعلی ارتباط برقرار کنید

عدم نمایش لوکیشن فعلی یکی از بزرگترین مشکلات اکثر اپلیکیشن ها است. من کجام ؟ این یکی از مهم ترین سوال ها در زمان جهت یابی است. کاربر باید در هر لحظه بداند که در کجای اپلیکیشن شما قرار دارد.

اپلیکیشن سلامت (طراحی شده توسط اپل) درباره مکان فعلی کاربر اطلاعاتی میدهد (گزینه Health data هایلایت شده است) همچنین زیر بخش ها را نیز مشخص میکند (سرتیتر Activity در بالای صفحه).

 

از انیمیشن های کاربردی برای مشخص کردن جهت یابی استفاده کنید

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

 

انیمیشن های کاربردی می تواند توجه کاربر را جلب کند، او را راهنمایی کند و تغییر حالات پیچیده را برای او آسان و قابل فهم کند.

 

مراقب استفاده از حرکات (GESTURES) در ui باشید

استفاده از حرکات در طراحی تعاملی می تواند وسوسه انگیز باشد. اما در بیشتر موارد بهتر است که از این وسوسه دوری کنید. وقتی حرکات به عنوان گزینه ی اصلی جهت یابی استفاده می شوند، موجب ایجاد یک UX بد می شوند. چرا ؟ چون حرکات ابزار های کنترلی مخفی هستند. همانطور که توماس جوس ( Thomas joos ) در مقاله "فراتر از دکمه : استفاده از رابط حرکت محور" اشاره می کند، بیشترین نزول در استفاده از حرکات در رابط کاربری مربوط به منحنی یادگیری می باشد. هرگاه یک کنترل دیداری با یک حرکت جایگزین می شود، منحنی یادگیری اپلیکیشن افزایش مییابد. این اتفاق به این دلیل رخ می دهد که حرکات غیر قابل شناسایی و نیز معمولا مخفی هستند و کاربر باید آن ها را شناسایی کند تا بتواند از آن ها استفاده کند. به همین دلیل است که باید از حرکات شناخته شده استفاده کنید (حرکاتی که کاربر انتظار دارد).

وقتی از حرکات استفاده می کنید به نکات زیر توجه کنید:

  • از حرکات استاندارد استفاده کنید

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

  • حرکات را به عنوان مکمل ابزار های دیداری جهت یابی استفاده کنید، نه به عنوان جایگزین آن ها

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

 

برای اطلاعات بیشتر درباره استفاده از حرکات در ui، مقاله "In-App Gestures and Mobile App User Experience" را مطالعه کنید.

 

بر روی اولین تجربه تمرکز کنید

اولین تجربه، استفاده دوباره کاربر از اپلیکیشن شما را مشخص می کند. شما فقط یک فرصت دارید و اگر شکست بخورید، به احتمال زیاد کاربر دیگر از اپلیکیشن شما استفاده نمیکند.( تحقیقات محلی نشان می دهد که ۲۴% کاربران بعد از اولین استفاده دیگر به سراغ آن اپلیکیشن نمی روند.)

 

از دیوار ورود (sign-in walls) اجتناب کنید

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

 

اپلیکیشن pinterest از کاربران می خواهد که یا وارد حساب کاربری خود شوند یا ثبت نام کنند.

 

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

 

یک onboarding عالی بسازید

در طراحی UX اپلیکیشن، انتقال تجربه onboarding عالی، نکته ای اساسی در حفظ کاربران است. هدف onboarding این است که ارزشی که اپلیکیشن شما ایجاد می کند را نشان دهد.

در میان استراتژی های مختلف برای onboarding یکی از آن ها بسیار موثر است : contextual onboarding. 

contextual onboarding به این معنی است که دستورالعمل ها، زمانی که کاربر به آن ها نیاز دارد ارائه شوند. اپلیکیشن Duolingo یک مثال خوب از این مورد است. این اپلیکیشن یک تور (tour) تعاملی ایجاد کرده است تا نحوه کار اپلیکیشن را به کاربر نمایش دهد. کاربر تشویق می شود که یک تست کوتاه را با زبان انتخابی انجام دهد. این مورد آموزش را به یک سرگرمی تبدیل می کند.

 

اپلیکیشن Duolingo یک تور راهنما دارد که شامل یک تست کوتاه است.

 

مورد دیگری که در فرایند onboarding موثر است وجود یک وضعیت خالی ( empty state ) است. منظور از وضعیت خالی، یک صفحه خالی است که کاربر باید با برداشتن یک یا چند قدم، اقدام به پر کردن آن کند. یک وضعیت خالی علاوه بر این که به کاربر اطلاع می دهد که چه اطلاعاتی را نیاز دارد، نحوه تعامل با اپلیکیشن را نیز به او می آموزد.


وضعیت خالی در اپلیکیشن Expensify به کاربر می آموزد که چطور با برنامه کار کند.

برای اطلاعات بیشتر درباره onboarding مقاله "The Role of Empty States in User Onboarding" را بخوانید.

 

ادامه دارد ...


کلیدواژه: موبایل طراحی تبلت mobile design phone ui ux رابط کاربری تجربه کاربری اپلیکیشن app mobile design android ios

منابع: www.smashingmagazine.com

ارسال دیدگاه:
برای ارسال دیگاه باید به سیستم وارد شوید و یا ثبت نام کنید. ثبت نام چند لحظه بیشتر زمان شما را نمیگیرد.