آموزش طراحی تجربهی کاربری؛ قسمت نهم: طراحی برای موبایل
پیش از آنکه بحث دربارهی طراحی سرویسهای موبایل را آغاز کنیم، باید بدانیم تجربهی کاربری در موبایل با کامپیوتر و سایر دستگاههای دیجیتال متفاوت و این موضوع، صرفا بهدلیل تفاوت اندازه نیست. فیزیک و مشخصات تلفنهمراه به محیط و الزامات طراحی متفاوتی نیاز دارد. ازآنجاکه دستگاههای موبایل سبکتر و حملپذیرتر هستند، راحتتر از آنها استفاده میکنیم و همین استفادهی مداوم باعث میشود رابطهی منحصربهفرد و احساسیتری با محصول داشته باشیم.
فیزیک و خصوصیات: اکثر موبایلهای امروزی صفحهنمایش لمسی دارند؛ یعنی کاربران فقط با استفاده از «اشاره» و عناصر سادهی رابط کاربری با آنها ارتباط برقرار میکنند. ابعاد کوچکتر تلفنهمراه ساده و کوچکسازی ساختار محتوا را نیز بهدنبال خواهد داشت. همچنین، بهدلیل پهنای باند و اتصالات محدود، اپلیکیشنهای تلفنهمراه باید بهشیوهای طراحی شوند که با کاهش دادههای موردنیاز و زمان بارگیری بهینهسازی شوند.
چگونه و کجا و کی: دسترسی دائمی به تلفنهمراه تمایل به استفاده از آن را نیز افزایش میدهد. زمانیکه تلویزیون نگاه میکنیم یا قدم میزنیم، با موبایل خود کار میکنیم. بهعبارتی، ما همزمان با انجام کارهای دیگر، از موبایل خود استفاده میکنیم. پس، این احتمال وجود دارد که در وضعیت سخت دیداری یا در میان عوامل مختلف حواسپرتی، به گوشی خود رجوع کنیم.
احساس و رفتار: درنهایت، با نگرشها و رفتارها و اولویتهای متفاوتی از دستگاههای تلفنهمراه خود استفاده میکنیم. تحقیقات آکادمی Foolproof در سال ۲۰۱۲ نشان میداد دستگاههای موبایل به ما حس جدیدی از آزادی و کنترل دادهاند. درعینحال، برخی از کاربران وابستگی زیادی به گوشی خود دارند. نکتهی مهم این است که گوشیهای موبایل، اساسا انتظارات کاربر را تغییر دادهاند و طراحان کاربرمحور نمیتوانند با تکیهبر راهکارهای سنّتی، تجربهی مناسبی به مخاطبان عرضه کنند.
۱. جریان کاربری واضح و منسجم
«تلاشی را کاهش دهید که کاربران باید برای رسیدن به هدف مدنظرشان انجام دهند.»
کاربران معمولا میخواهند ازطریق اپلیکیشن موبایل، عملکرد اصلی را انجام دهند. شما باید روی اهداف مهم کاربران تمرکز و همهی موانع را از سر راه آنها حذف کنید:
وظایف بزرگتر را به بخشهای کوچکتر و معنادار تبدیل کنید: اقدامات روی صفحه را اولویتبندی کنید. اقدام اصلی را پررنگ کنید که مستقیم به هدف کاربر مرتبط است و تمام اقدامات ثانویه را پنهان کنید.
کارها را آفلود کنید: بهدنبال کارهایی باشید که مستلزم تلاش کاربر هستند؛ مانند خواندن متن و واردکردن دادهها و تصمیمگیری. سپس، راههای جایگزینی برای آنها بیابید. میتوانید از عکس بهجای متن یابهجای درخواست تایپ از دادههای قبلی کاربر استفاده کنید؟ میتوانید با استفاده از اطلاعات موجود، حالت پیشفرض هوشمندی تنظیم کنید؟
امکان وقفه را فراهم کنید: کاربران در زمان حرکت نیز از دستگاه موبایل استفاده میکنند. به کاربران اجازه دهید تا هر مرحلهای که پیش رفتهاند، آن را ذخیره کنند و بعدا دوباره با اپلیکیشن وارد تعامل شوند.
از وقفههای بیدلیل اجتناب کنید: نباید در میانهی کار کاربران، برنامه را قطع کنید و از آنها بخواهید اگر بهتازگی برنامه را دانلود کردهاند، به شما امتیاز دهند. درعوض، منتظر بمانید تا ثابت شود کاربران بهتکرار از اپلیکیشن شما استفاده میکنند. دراینصورت، آنها بهاحتمال بیشتری برنامه را ارزیابی و بازخورد آگاهانهتری ارائه میکنند.
روی اهداف کاربر متمرکز شوید: وظایف پیچیده را به فعالیتهای کوچکتر تقسیم کنید. این وظایف کوچکتر ممکن است اهداف کاربر را بهتر برآورده کنند. به اپلیکیشنهای تاکسیرانی مانند lyft نگاه کنید. لیفت میداند هدف کاربر سوارشدن به تاکسی و رسیدن به مقصد است. این اپلیکیشن کاربران را با حجم زیاد اطلاعات خسته نمیکند. موقعیت فعلی کاربر براساس مکانیاب جغرافیایی بهطور خودکار تشخیص داده میشود و تنها کاری که او باید انجام دهد، انتخاب مقصد است.
از دیوارهای ورود به سیستم اجتناب کنید: لاگینوالها (Login Walls) صفحاتی هستند که از کاربر میخواهند برای ادامهی فرایند کاری، به سیستم وارد شود یا ثبتنام کند. دیوار ورودی معمولا زمانی نمایش داده میشود که برنامه اولینبار راهاندازی شده یا صفحهی وب اولینبار دردسترس قرار گرفته است. بهیاد داشته باشید وادارکردن کاربران به ثبتنام باعث میشود بیش از ۸۵ درصد از آنها محصول را رها کنند. در تصویر زیر، مشاهده میکنید کاربران ساوندکلود برای دسترسی به محتوا باید به حساب کاربریشان وارد شوند.
از بارگذاری بیشازحد اطلاعات اجتناب کنید: برترام گراس، استاد علوم سیاسی کالج هانتر، اصطلاح اضافهبار اطلاعات (Information Overload) را اینگونه تعریف میکند:
بارگذاری بیشازحد اطلاعات زمانی رخ میدهد که حجم ورودی سیستم از پردازش آن بیشتر باشد. تصمیمگیرندگان از ظرفیت پردازش شناختی نسبتا محدودی برخوردار هستند. درنتیجه، وقتی بارگذاری بیشازحد اطلاعات رخ میدهد، این احتمال وجود دارد که کیفیت تصمیمها کاهش یابد.
حجم فراوان اطلاعات مشکلی جدی است که کاربران را از تصمیمگیری یا عملکردن بازمیدارد؛ زیرا آنها احساس میکنند باید اطلاعات بسیار زیادی تحلیل کنند. راههای سادهای برای بهحداقلرساندن اضافهبار اطلاعات وجود دارد. یکی از شیوههای رایج تقسیمکردن است که نمونهی آن را در فرم پرداختی کارت اعتباری مشاهده میکنید. قانون معروفی که در اینجا استفاده میشود، این است که در یک زمان حداکثر بین ۵ تا ۷ کادر ورودی (Input) را نمایش دهید و بعدا درصورت لزوم، اطلاعات بیشتری درخواست کنید.
۲. رابط کاربری نامرئی
«محتوا را به رابط تبدیل کنید.»
محتوا در اکثر اپلیکیشنها ارزشمند است. صرفنظر از اینکه با فید اجتماعی سروکار داریم یا بهروزرسانی اخبار و فهرست وظایف یا آیتمی فنیتر مانند داشبورد سیستم، درهرحال مردم بهخاطر محتوا در برنامهی شما حضور دارند. بههمیندلیل هم باید روی محتوا متمرکز شوید و عناصر دیگری را حذف کنید که از وظایف کاربر پشتیبانی نمیکنند. با این فرض که کاربران توجه و دقت محدودی دارند، بازهم باید بهسرعت به محتوای مدنظرشان هدایت شوند.
نقشهها: نقشهی گوگل بهترین مثالی است که همهی طراحان باید آن را بهیاد بسپارند. گوگل برای طراحی مجدد نقشههای خود تمامی پنلها و دکمههای غیرضروری را حذف و اعلام کرد نقشه رابط کاربری است.
کارتها: الگوی دیگری که میتواند بهعنوان رابط استفاده شود، طراحی Card-Style است. کارتها کانال بسیار خوبی برای نمایش محتوای اجراشدنی هستند؛ زیرا اجازه میدهند محتوا بهطور طبیعی ظاهر شود. همانطورکه در تصویر زیر مشاهده میکنید، Flipboard نمونهی مناسبی از الگوی تبدیل کارت به رابط محسوب میشود. Flipboard مجلهای شخصی است که محتوا را از فید اخبار و شبکههای رسانههای اجتماعی جمعآوری میکند و به کاربر امکان میدهد داستانها را کشف و بهاشتراک بگذارد.
۳. اتاق تنفس
«از فضای سفید استفاده کنید و توجه کاربر را به سمت محتوای مهم هدایت کنید.»
فضای سفید (فضای منفی)، فضای خالی بین عناصر طراحی است که اغلب اوقات نادیده گرفته میشود. گرچه برخی از طراحان معتقدند فضای سفید بهنوعی هدردادن فضای ارزشمند است، در UX موبایل، عنصری کاملا ضروری بهشمار میرود. بهگفتهی یان چیچولد، فضای سفید باید عنصری فعال شناخته شود، نه پسزمینهای منفعل.
حذف شلوغیها: عناصر مختلف و غیرضروری باعث میشوند اطلاعات بیشازحد رابط کاربری را شلوغ کند. هر دکمه یا تصویر یا متن اضافه و زائد، صفحهی نمایش را پیچیدهتر میکند.
در طراحی UX موبایل، باید هر آنچه را حذف کنید که مطلقا ضروری نیست؛ زیرا کاهش عناصر به درک بهتر کاربر منجر میشود. به این قاعده توجه کنید: هر صفحهای که برای اپلیکیشن طراحی میکنید، باید از عملی واحد پشتیبانی کند و این عمل حتما باید ارزشی را برای کاربر ایجاد کند. دراینصورت، اپلیکیشن شما آموزشپذیر و کاربردپذیر خواهد بود و بعدها درصورت نیاز، بخشهای دیگر را راحتتر به آن اضافه میکنید.
اولویتبندی محتوا: فضای سفید نهتنها به قابلیت خواندهشدن و اولویتبندی محتوا کمک میکند؛ بلکه طرح و ترکیب بصری را نیز ارتقا میدهد. بهعبارتِدیگر، فضای سفید UI را سادهسازی میکند و UX را بهبود میدهد.
۴. تسهیل ناوبری
«ناوبری باید الهامبخش کاربران باشد و آنها را به تعامل و ارتباط با محتوایی ترغیب کند که ارائه میدهید.»
حرکت و جابهجایی کاربران باید یکی از اولویتهای مهم هر اپلیکیشن باشد. ناوبری موبایل نیز باید کشف و دسترسپذیر باشد و فضای کمی اشغال کند. بااینحال، ساخت ناوبری دسترسپذیر در موبایل بهدلیل محدودیتهای صفحهنمایش کوچک و نیاز به اولویتبندی محتوا، همیشه مشکلساز است. وقتی میخواهید سیستم ناوبری را برای اپلیکیشن تلفنهمراه طراحی کنید، قواعد زیر را بهیاد داشته باشید:
کاربران خود را بشناسید: ناوبری باید نیازهای اکثر کاربران برنامهی شما را برآورده کند. هر گروه هدف نوع خاصی از تعامل با اپلیکیشن را مطلوب میدانند. از این انتظارات بهنفع خودتان استفاده کنید.
گزینههای ناوبری را اولویتبندی کنید: کارهای کاربران را در سطوح مختلف (اولویت زیاد و متوسط و کم ) اولویتبندی کنید. اصل و پایهی طراحی را برمبنای مسیرهایی تنظیم کنید که در UI از اولویت بیشتری برخوردار هستند و بهتکرار بهکار میروند. با استفاده از این مسیرها ناوبری برنامه را تعریف کنید.
ناوبری باید مشاهدهشدنی باشد: همانطورکه جیکوب نیلسن میگوید، شناسایی یا تشخیص هر چیزی راحتتر از بهیادآوردن آن است. آنچه کاربران باید بهخاطر بسپارند، بهحداقل برسانید و کارها و وظیفهها و فرایندها را مشاهدهپذیر کنید. ناوبری باید «همیشه» دردسترس باشد، نهفقط زمانیکه پیشبینی میکنیم کاربر به آن نیاز دارد.
بهرهگیری از ارتباطات بصری: آیکونها و سایر عناصر گرافیکی باید به کاربران کمک کنند تا گزینههای منو را درک کنند. بهعنوان مثال، به آیکون سبد خرید بهعنوان شناسهای برای بررسی یا مشاهده آیتمها فکر کنید. کاربران مجبور نیستند به این موضوع فکر کنند که برای خرید باید چگونه در برنامه حرکت کنند. خود آیکون آنها را بهسمت اقدام مناسب هدایت میکند.
مکان فعلی کاربر را نشان دهید: «من الان کجا هستم؟» این مهمترین سؤال کاربران است که ناوبری مؤثر، پیش از هر چیز به آن پاسخ میدهد. مشخصنبودن مکان فعلی کاربر، یکی از مشکلات رایج اغلب اپلیکیشنها است.
تعامل با عناصر ناوبری را ساده کنید: گزینههای منو باید بهاندازهی کافی بزرگ باشند تا ضربهزدن یا لمس آنها بهراحتی امکانپذیر شود. آیتمها و اقلام بسیار کوچک یا نزدیک بههم به ناامیدی و دلسردی کاربران موبایل منجر میشوند.
میزان تعامل و حفظ کاربر را اندازهگیری کنید: «تعامل» مهمترین موضوعی است که برای محصول خود میخواهید. اگر میخواهید محصول موفق و درآمدزایی داشته باشید، مطمئن شوید میزان موفقیت برنامه در حفظ کاربران را در طول زمان بررسی و اندازهگیری میکنید.
الگوهای ناوبری UI میانبری هستند که ما را به کاربردپذیری عالی میرسانند. درادامه، برخی از آنها را بررسی میکنیم:
Toggle Menu: اغلب طراحان بهمنظور سادهسازی رابط کاربری، مخصوصا روی صفحهنمایش کوچک، به کنترلهای منو تکیه میکنند. مهمترین مشکلی که با آن مواجهایم، این است که پنهانسازی بخشهای مهم برنامه پشت این منوها به کاربردپذیری آسیب میزند. ناوبری پنهان تعاملات و سرعت جستوجو را کاهش میدهد و کاربران را گیج میکند. زمانیکه گزینههای منو را بهشیوهای طراحی میکنیم که بیشتر مشاهدهپذیر هستند، تعاملات و رضایت کاربران را افزایش میدهیم.
Tab Bar: نوارهای تب و نوارهای ناوبری از تعداد گزینههای ناوبری معدود و همسازی بسیاری با اپلیکیشنهای موبایل برخوردار هستند. این الگو در هر دو سیستمعامل iOS و Android الگوی مقبول و پذیرفتهشدهای است. تبها یا زبانهها همهی گزینههای ناوبری به جلو را نمایش میدهند و کاربر سریعا با یک اشاره یا ضربه، از نمایی به نمای دیگری میرود. اتخاذ برچسب را برای گزینههای ناوبری توصیه میکنیم: هرگز ناوبری را به بازی حدس و پیشبینی تبدیل نکنید.
Segmented Control: اگر در اپلیکیشن فقط چند مقصد وجود دارد، میتوانید از کنترلهای جداگانه استفاده کنید. در این مدل نیز، تمامی گزینهها همزمان مشاهدهشدنی هستند و با لمس ساده میتوان به آنها دسترسی داشت.
ناوبری Full-Screen: گرچه ناوبری تمامصفحه با آنچه دربارهی صرفهجویی در صفحهنمایش گفتیم متناقض بهنظر میرسد، گاهی انتخاب مناسبی برای اپلیکیشن شما است. در این الگو، یک صفحه (معمولا صفحهی اصلی) تمام گزینههای ناوبری را فهرست میکند. اگرچه نمیتوانید هر محتوایی را نمایش دهید، الگوی ناوبری تمامصفحه اهداف سادهسازی و یکپارچگی را بهخوبی برآورده میکند. زمانیکه کاربر تصمیم گرفت به کدام بخش برود، میتوانید فضای کل صفحه را به محتوا اختصاص دهید. این نوع ناوبری بیشترین کارایی را در وبسایتها و اپلیکیشنهایی دارد که کاربران دقیقا روی تکمیل کاری بسیار خاص تمرکز میکنند (مثل بررسی پرواز) یا جاییکه آنها در هر جلسه، خودشان را به شاخهای از سلسلهمراتب ناوبری محدود میکنند (مثل وقتی که مردم به سرویس یا محصولی خاص علاقهمندند).
این نوع ناوبری برای زمانی مناسب است که تنظیمات درخت سلسلهمراتب دارید. برای مثال، زمانیکه منویی با ۷ گزینهی اولیه دارید و هر گزینه شامل چندین لایه با زیرشاخههای دیگری است.
۵. اجرای عملیات با یک دست
«طراحی خود را با اسکرینهای بزرگ سازگار کنید.»
اغلب مردم به یکی از این سه شیوه گوشی خود را در دست میگیرند:
نکتهی درخورتوجه این است که بهمرورزمان صفحهنمایش گوشیها بزرگتر شده و این امر دسترسپذیری آنها را تا حدودی کاهش داده است. مطمئن شوید اپلیکیشنتان بهراحتی و کاملا در صفحهنمایش بزرگ کاربردی است (ترجیحا با یک دست). به دو تصویر زیر توجه کنید:
منطقهی سبز برای اقدامات و ناوبری معمول: در منوی اصلی کنترلهای بهتکرار استفادهشونده و آیتمهای اقدامات متداول را در منطقهی سبز جای دهید؛ زیرا بهراحتی با انگشت شست لمسشدنی است.
منطقهی قرمز برای اقدامات ریسکپذیر: اقداماتی مانند پاککردن یا حذفکردن را در ناحیهی قرمز قرار دهید که دسترسی به آن سختتر است؛ زیرا میخواهید کاربران بهطور تصادفی این عناصر را لمس کنند.
۶. طرح و ظاهر سرعت
«کاربران نباید برای مشاهدهی محتوا منتظر بمانند.»
درحالیکه پاسخدهی فوری ایدهآل همهی طراحان و کاربران است، گاهی اپلیکیشن شما نمیتواند راهبردهای استاندارد سرعت را برآورده کند. پاسخدهی آهسته به هر دلیلی که رخ بدهد، مثل اتصال بد اینترنت یا طولانیبودن عملیات اجرایی که نمونهی آن را در نصب بهروزرسانی سیستمعامل میبینیم، بازهم برنامهی شما باید تا حدممکن سریع و واکنشپذیر طراحی شود.
اسکلت صفحهنمایش: به مردم اجازه دهید بفهمند باید مدتی منتظر بمانند. اجرای این کار با استفاده از نشانگر بارگیری یا اندیکاتور پیشرفت امکانپذیر میشود؛ اما گزینهی بهتر، اسکلت صفحهنمایش (Skeleton Screens) است. اسکلت صفحهنمایش درواقع، صفحهای بدون محتوا است که قالب کلی طراحی شما را نشان میدهد و محتوا بهمرور در آن ظاهر میشود. کاربران با مشاهدهی اسکلت صفحهنمایش، روی پیشرفت واقعی متمرکز میشوند و آنچه را پیشبینی میکنند که بهزودی اتفاق میافتد. طرحبندی صفحهنمایش این احساس را القا میکند که همهچیز بهسرعت درحالاجرا است.
حواسپرتی بصری: صحنهای که کاربران در «مدت انتظار» مشاهده میکنند، بههمان اندازهی سرعت بارگذاری اهمیت دارد. بهعبارتِدیگر، اگر کاربران در زمان انتظار به موضوع جالبی نگاه کنند، توجه کمتری به «منتظرماندن» خود میکنند. بنابراین، برای اطمینان از اینکه کاربران در مدت انتظار خسته نمیشوند، تصویر یا برنامهای نمایش دهید که حواس آنها را از زمان پرت کند.
۷. زمانبندی مناسب برای پوشنوتیفیکیشن
«پیش از آنکه پیامی ارسال کنید، دوباره فکر کنید.»
هرروز میلیاردها کاربر با اعلانهای بیفایدهای بمباران میشوند که توجه آنها را از کارهای اصلی روزمره منحرف میکند. ۷۱ درصد از پاسخدهندگان به یکی از نظرسنجیهای اظهار کرده بودند که اعلانهای آزاردهنده را دلیل قانعکنندهای برای حذف اپلیکیشن میدانند. اگر میخواهید اعلانهای برنامه را کاربرمحور طراحی کنید، ۴ نکته را بهیاد داشته باشید:
در تلفنهمراه، تمامی پیامها دیده میشوند: رایجترین اشتباهی که ممکن است در ارسال پوشنوتیفیکیشنها مرتکب شوید، اشتباهی است که بیش از همه به برنامهی خودتان آسیب میزند: ارسال اعلانهای زیادی که کاربران نمیتوانند آنها را کنترل کنند. کاربران را با پیامهای اجباری خسته نکنید؛ زیرا نهایتا آنها اپلیکیشن شما را حذف میکنند.
نکتهی مهم این است که شخصیسازی اعلانها باعث میشود کاربران از پیامهای شما لذت ببرند.
زمانبندی: بهینهسازی اعلانها صرفا به متن پیام شما بستگی ندارد؛ بلکه زمان ارسال اعلانها نیز بسیار مهم است. پوشنوتیفیکیشنها را در ساعات نامعمول ارسال نکنید. بین ساعت ۱۲ شب تا ۶ صبح ممکن است کاربر را بهخاطر اعلان از خواب بیدار کنید. البته، کاربران همیشه میتوانند اعلانها را غیرفعال کنند؛ اما این بهترین راهکاری نیست که پیش روی آنها قرار میدهید.
تنوعبخشیدن به پیامها: مؤثرترین استراتژی برای ارسال پیام در موبایل، استفاده از انواع پیامهای مختلف است: پوشنوتیفیکیشنها، ایمیل، اعلانهای داخل برنامه و بهروزرسانی فید اخبار. البته، پیامهای متنوع در هماهنگی با یکدیگر باید هدف اصلی شما، یعنی ارائهی تجربهای عالی به کاربران را دنبال کنند.
درپایان، راهکارهای طراحی برای موبایل را مرور میکنیم:
نظرات