7 اصل مهم در طراحی رابط کاربری موبایل

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

برای اطلاعات بیش‌تر می‌توانید مقالات طراحی رابط کاربری در 5 مرحله، اصول تایپوگرافی در طراحی رابط کاربری و نقش رابط کاربری در برندینگ را مطالعه کنید.

مهم‌ترین اصول در طراحی رابط کاربری موبایل

طراحی رابط کاربری موبایل (UI Mobile) فرایندی است که در آن المان‌های بصری و تعاملی یک اپلیکیشن یا وب‌سایت موبایل خلق و چیده می‌شوند تا کاربر به آسانی و لذت‌بخشانه به اهداف خود برسد. در ادامه به بررسی مهم‌ترین اصول در یک طراحی رابط کاربری موبایل می‌پردازیم.

اصل شماره ۱: تلاش برای مینیمالیسم

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

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

همانطور که آنتوان دو سنت اگزوپری می‌گوید: "کمال زمانی به دست نمی‌آید که دیگر چیزی برای اضافه کردن نباشد، بلکه زمانی است که دیگر چیزی برای حذف کردن باقی نمانده باشد."

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

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

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

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

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

یادگیری از  Instapaper

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

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

علاوه بر این، این برنامه با یک طراحی تمیز و تک رنگ [مونوکروم] ارائه شده است.

یادگیری از   Behance

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

اصل شماره ۲: قرار دادن مهم‌ترین عناصر نزدیک به پایین یا مرکز

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

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

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

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

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

یادگیری از Audible

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

یادگیری از فیت‌بیت

می‌توان گفت، عملکرد اصلی برنامه‌ی فیت‌بیت ارائه‌ی اطلاعات به کاربر است. این اطلاعات در صفحه‌ی اصلی برنامه قرار دارند و به راحتی در دسترس کاربر هستند.

اصل شماره ۳: کاهش نیاز به تایپ کردن

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

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

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

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

1. هر فیلد ورودی که قابل پر کردن خودکار است را به طور خودکار پر کنید.

2. هنگامی که کاربر شروع به تایپ کردن یا وارد کردن یک عبارت جستجو می‌کند، پیشنهادات هوشمند ارائه دهید.

3. به کاربران اجازه دهید دسته‌ها را انتخاب کنند یا گزینه‌های خود را به روش‌های دیگری فیلتر کنند.

4. به جای نیاز به اینکه کاربر تاریخ را بنویسد، از ابزار انتخاب تاریخ استفاده کنید.

این فقط چند نمونه‌ی واضح است. به محض اینکه عادت کنید از خود بپرسید: «آیا می‌توان این کار را با تایپ کمتر کاربر حل کرد؟» موارد بسیار بیشتری از آن‌ها را کشف خواهید کرد.

یادگیری از ایونت‌برایت

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

اصل شماره ۴: افزایش اندازه ناحیه‌ی لمسی  (Tap Target)

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

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

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

توصیه‌های اپل و اندروید را دنبال کنید. آن‌ها به ترتیب، اندازه‌ی حداقل ۴۴ در ۴۴ pt و ۴۸ در ۴۸ پیکسل مستقل از دستگاه (dp) را برای ناحیه‌ی لمسی پیشنهاد می‌کنند.

واضح‌ترین راه برای دستیابی به این امر، افزایش اندازه‌ی کنترل‌های رابط کاربری (UI) شماست. علاوه بر این، سعی کنید مقداری فضای خالی اضافی (Whitespace) در اطراف عناصر خود اضافه کنید تا نه تنها خطر ضربه اشتباه را کاهش دهید، بلکه یک رابط کاربری مینیمالیستی‌تر نیز ایجاد کنید.

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

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

با رعایت نکات بالا، شما به جای جبران خطا بر روی پیشگیری از خطا تمرکز می‌کنید. با این حال، هرگز نمی‌توانید اشتباهات لمسی را به طور کامل حذف کنید. با در نظر گرفتن این موضوع، مطمئن شوید که در صورت عدم اصابت به هدف، اتفاق فاجعه‌باری رخ نمی‌دهد. شاید بهتر باشد در جایگاه دکمه‌ی «حذف همه» با یک کلیک را که درست در کنار دکمه‌ی فراخوان به کنش (CTA) قرار دارد، تجدید نظر کنید.

یادگیری از  Meetup

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

اصل شماره ۵: اولویت دادن به خوانایی

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

مهم‌ترین توصیه‌ی این بخش برای دستگاه‌های موبایل، اندازه‌ی ۱۶ نقطه‌ای فونت است. استفاده از فونت‌های کوچک‌تر، خوانایی را برای حداقل بخشی از کاربران شما به خطر خواهد انداخت.

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

باید اعتراف کنم که من هم مانند بسیاری دیگر، عاشق فونت‌های نازک به رنگ #A9A9A9 روی پس‌زمینه‌ی سفید هستم و مطمئنا در Dribbble بازخورد و لایک‌های زیادی دریافت می‌کند. اما اگر هدف شما تجربه‌ی کاربری (UX) عالی است، فقط در یک اتاق با نورپردازی مناسب، خوانایی را در اولویت قرار ندهید، و همچنین با ترجیحات زیبایی‌شناختی خودتان پیش نروید، بلکه باید تمام شرایط محیطی را در نظر بگیرید.

یادگیری از Medium.com

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

برای یادگیری در زمینه‌ی وب‌سایت‌ها، Medium.com را بررسی کنید.

اصل شماره ۶: بازخورد فوری (و خوب!) ارائه دهید

با نزدیک شدنِ نسلِ پنجمِ اینترنت (5G)، به زودی شاید دیگر نیازی نباشد که طراحی را با در نظر گرفتنِ اتصالاتِ ضعیفِ اینترنتِ موبایل انجام دهیم. با این حال، تا آن زمان، انتظار نداشته باشید که کاربرانِ موبایل شما از اتصالاتِ اینترنتیِ پایدار و پر سرعت برخوردار باشند و وضعیتِ بارگذاریِ (صفحات) را نادیده نگیرید.

احتمالاً هر یک از کاربرانِ موبایل شما، در یک برهه‌ی زمانی، مجبور به انتظار برای بارگذاریِ (صفحات) خواهند شد، به ویژه اگر از طریقِ اتصالِ سلولار (اینترنت همراه) متصل باشند. «انتظار» واژه‌ای نسبی است و ما به ندرت آن را بر حسبِ میلی‌ثانیه اندازه‌گیری می‌کنیم. اما در طراحیِ تجربه‌ی کاربری (UX) این کار را انجام می‌دهیم.

کاربران شما متوجه تأخیرِ بیش از ۳۰۰ میلی‌ثانیه خواهند شد و اگر این تأخیر از ۱۰۰۰ میلی‌ثانیه فراتر رود، به احتمال زیاد شروع به برقراریِ ارتباط ذهنی با کار دیگری می‌کنند. اگر نمی‌توانید آنچه کاربر انتخاب کرده است را در این بازه زمانی بارگذاری کنید، حداقل باید به آن‌ها نشان دهید که در حال کار کردن روی آن هستید.

یادگیری از  Duolingo

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

اصل شماره ۷: امکان بازیابی آسان از خطا را فراهم کنید

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

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

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

یادگیری از  Google Sheets

ابزارهایی مانند Word، Excel و PowerPoint مایکروسافت و معادل‌های گوگل، شاید اولین چیزهایی باشند که به هنگام فکر کردن به قابلیت "بازگشت" به ذهن خطور می‌آیند. توجه کنید که این قابلیت یکی از معدود کنترل‌هایی است که در نوار منوی بالای اپلیکیشن Google Sheets به طور همیشگی در دسترس قرار دارد و بر اهمیت آن دلالت می‌کند.

یادگیری از  Airmail

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

اقدامی که روی لیست ایمیل‌ها در Airmail انجام می‌شود، توسط جهت و طول حرکت انگشت (swipe) تعیین می‌شود و به طور لحظه‌ای اجرا می‌شود. این قابلیت برای کاربران حرفه‌ای که می‌توانند سرعت کار خود را بالا ببرند، عالی است. اما بر اساس تجربه، مستعد خطا نیز می‌باشد.

دکمه‌ی "بازگشت به صندوق ورودی" (Undo move to bin) زمانی که حذف یکی از اقدامات کشیدن انگشت به سمت چپ است، بسیار کاربردی خواهد بود. دکمه‌ی بازگشت مشابهی برای سایر اقدامات، از جمله ارسال ایمیل نیز نشان داده می‌شود. همچنین در برنامه‌های دیگری که امکان حذف، بایگانی یا علامت‌گذاری یک آیتم از لیست وجود دارد، این قابلیت رایج است. Asana نمونه‌ی عالی از مورد آخر است.

نکات کلیدی طراحی رابط کاربری موبایل

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

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

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

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

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