منبع: بنیاد طراحی تعامل (IxDF) · بازنویسی آزاد: سپنتا پویا · ترجمه: ۶ شهریور ۱۴۰۵ · زمان مطالعه: حدود ۱۰ دقیقه

طراحی تجربهٔ کاربری موبایل (Mobile UX Design) چیست؟

💡 این متن «بازنویسی آزاد» است: ایده‌ها و مفاهیم مطلب اصلی با نگارش کاملاً مستقل فارسی و مثال‌های تازه بازگو شده‌اند و ترجمهٔ کلمه‌به‌کلمه نیست. بخش‌های افزودهٔ مترجم در جعبهٔ منبع مشخص شده‌اند.

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

تعریف

طراحی تجربهٔ کاربری موبایل، ساختنِ رابط برای دستگاه‌های دستی و پوشیدنی است — با تمرکز بر دسترس‌پذیری و کارآمدی، تا تعامل‌هایی که در حال حرکت رخ می‌دهند بهینه شوند.

تفاوت بنیادی با دسکتاپ، اندازهٔ صفحه نیست. شرایط استفاده است.

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

کاربر موبایل سه محدودیت تقریباً همیشگی دارد: حوصلهٔ کوتاه‌تر، حواس‌پرتیِ مکرر، و سیگنال و باتریِ بی‌ثبات.

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

خواستهٔ چنین کاربری یک جمله بیشتر نیست: نتیجهٔ سریع، با کمترین تلاش.

سه ذهنیت کاربر موبایل

جاش کلارک کاربر موبایل را در سه حالت ذهنی توصیف می‌کند. این سه، سه نوع «کاربر» نیستند؛ سه وضعیت‌اند که یک نفر در یک روز از هر سه عبور می‌کند.

• - ۱. ریزکار: انفجارهای کوتاه و شدید فعالیت. کاربر یک چیز مشخص می‌خواهد و می‌رود.
• - ۲. آگاهی از مکان: چیزی که به موقعیت فعلی گره خورده — نزدیک‌ترین، در دسترس‌ترین، همین‌جا.
• - ۳. بی‌حوصلگی: ورق‌زدن بی‌هدف برای گذراندن وقت، بدون هدف روشن.

هر سه ذهنیت یک چیز مشترک دارند: هیچ‌کدام «نشستن پشت میز» نیست.

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

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

چهار اصل

یک: محتوا را کمینه کنید. زمان بارگذاری صفحه را زیر ۳ ثانیه نگه دارید. حدود ۹۴٪ کاربران دستگاه را عمودی نگه می‌دارند، پس فضای عمودی سرمایهٔ اصلی شماست.

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

دو: ناوبری را ساده کنید. هدف لمس را دست‌کم ۳۰ در ۳۰ پیکسل، یا ۷ تا ۱۰ میلی‌متر، بگیرید. با آشکارسازی تدریجی جلوی سرریز اطلاعات را بگیرید.

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

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

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

چهار: تداوم را حفظ کنید. محتوا باید روی همهٔ دستگاه‌ها یکسان بماند، جابه‌جایی میان موبایل و دسکتاپ روان باشد، و پیشرفت کاربر میان بسترها دنبال شود.

چند راهنمای دیگر هم در همین چارچوب جا می‌گیرند.

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

دو چارچوب هم پشت این فهرست ایستاده‌اند. پیتر مورویل تجربه را با هفت وجه می‌سنجد: مفید، کاربردپذیر، یافتنی، معتبر، خواستنی، دسترس‌پذیر، و ارزشمند. و سند «احترام به تمرکز» مایکروسافت پنج راهنما برای فوریت اعلان‌ها و کنترل کاربر بر آن‌ها می‌دهد.

دسترسِ شست، و چرا اندازه بدون جا کافی نیست

این بخش افزودهٔ من است. دلیلش این است که «۷ تا ۱۰ میلی‌متر» یک اندازه است، نه یک مکان — و روی موبایل، مکان نصفِ ماجراست.

یک گوشیِ امروزی حدود ۷ در ۱۵ سانتی‌متر است. وقتی آن را یک‌دستی می‌گیرید، پاشنهٔ شست تقریباً روی گوشهٔ پایینی دستگاه می‌نشیند و همان‌جا می‌ماند.

پس هر نقطهٔ صفحه با یک عدد توصیف می‌شود: فاصله‌اش تا پاشنهٔ شست. اگر طول قوس راحت شست را حدود ۴٫۵ سانتی‌متر و بیشینهٔ کشش را حدود ۷ سانتی‌متر بگیریم، صفحه به سه ناحیه تقسیم می‌شود.

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

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

یک دکمهٔ ۱۰ میلی‌متری در گوشهٔ بالا سمت مخالف، هنوز یک دکمهٔ گران است. یک دکمهٔ ۷ میلی‌متری در نوار پایین، ارزان است.

این همان چیزی است که قانون فیتس صورت‌بندی می‌کند: زمان رسیدن، هم به اندازهٔ هدف بستگی دارد و هم به فاصله تا آن.

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

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

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

یعنی این تحلیل یک تضمین نیست، یک پیش‌فرضِ محافظه‌کارانه است. طراحی برای بدترین حالتِ گرفتن، در بهترین حالت هم کار می‌کند.

نمودار دوم همین را در مقیاس واقعی می‌کشد، چون خواندن «۷ میلی‌متر» چیزی دربارهٔ بزرگ‌بودن یا کوچک‌بودنش نمی‌گوید. دیدنش کنار سطح تماس نوک انگشت، می‌گوید.

وقتی دو راهنما با هم می‌جنگند

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

تضاد اول: بالای صفحه در برابر پایین صفحه. یک راهنما می‌گوید کارهای پرتکرار را بالای صفحه بگذارید. تحلیل دسترسِ شست می‌گوید پایین صفحه ارزان‌ترین جای صفحه است.

هر دو درست‌اند، چون دربارهٔ دو کار متفاوت حرف می‌زنند. بالا برای دیده‌شدن است، پایین برای زده‌شدن.

راه‌حل عملی، تفکیک نقش است: عنوان، وضعیت و جهت‌یابی بالا بمانند؛ دکمهٔ کنش اصلی پایین بنشیند. اگر یک عنصر هم باید دیده شود و هم زده شود، پایین ببریدش — دیدن ارزان‌تر از رسیدن است.

تضاد دوم: کمینه‌کردن اسکرول در برابر فضای عمودی. اگر ۹۴٪ کاربران دستگاه را عمودی نگه می‌دارند، صفحه‌ها بلند می‌شوند. بلندشدن صفحه یعنی اسکرول بیشتر.

اینجا هم تضاد ظاهری است. مسئله طول اسکرول نیست، یک‌جهته‌بودنش است. اسکرول عمودیِ طولانی هزینهٔ کمی دارد؛ اسکرول افقیِ کوتاه هزینهٔ زیادی.

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

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

نکتهٔ مشترک هر سه تضاد یکی است: این‌ها قاعده نیستند، مبادله‌اند. قاعده را حفظ می‌کنید؛ مبادله را باید هر بار برای صفحهٔ خودتان حل کنید.

در بافت فارسی

یک: جهت اشاره‌ها هم برمی‌گردد، نه فقط چیدمان. در رابط راست‌به‌چپ، «بازگشت» یعنی کشیدن از لبهٔ راست، و کاروسل باید از راست به چپ پیش برود.

خطای رایج، وارونه‌کردن چیدمان و آیکون‌ها بدون وارونه‌کردن اشاره‌هاست. نتیجه‌اش رابطی است که ظاهرش فارسی است و رفتارش انگلیسی — و کاربر نمی‌فهمد چرا حس ناجوری دارد. طراحی واکنش‌گرا این لایه را برایتان حل نمی‌کند.

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

راهکار عملی، بالابردن ارتفاع خط است تا حدود ۱٫۸ برابر اندازهٔ متن. کمتر از این، سطرها روی موبایل به هم می‌چسبند و چشم خط را گم می‌کند. جزئیات بیشترش در تایپوگرافی آمده.

سه: صفحه‌کلید عددی، ارقام فارسی را نمی‌شناسد. کاربر ایرانی شمارهٔ موبایل را گاهی با ۰۹۱۲ و گاهی با 0912 می‌نویسد، و اغلب هم انتخابش با او نیست — صفحه‌کلید تصمیم می‌گیرد.

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

چهار: پهنای باند یک فرض نیست، یک متغیر است. بودجهٔ ۳ ثانیه‌ای روی شبکهٔ کند یا سهمیهٔ محدود، خیلی زودتر از چیزی که فکر می‌کنید تمام می‌شود.

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

نکتهٔ مشترک هر چهار مورد یکی است: در همهٔ آن‌ها، پیش‌فرضِ انگلیسیِ ابزار است که هزینه می‌سازد. راست‌به‌چپ یک ویژگی چیدمانی نیست؛ یک بافت کامل استفاده است.

جمع‌بندی

• - طراحی تجربهٔ کاربری موبایل: ساختن رابط برای دستگاه‌های دستی و پوشیدنی، با تمرکز بر دسترس‌پذیری و کارآمدی
• - بافت استفاده: حوصلهٔ کوتاه‌تر · حواس‌پرتی مکرر · سیگنال و باتری بی‌ثبات · استفاده هم‌زمان با راه‌رفتن
• - سه ذهنیت: ریزکار · آگاهی از مکان · ورق‌زدن از بی‌حوصلگی
• - اصل اول، کمینه‌کردن محتوا: بارگذاری زیر ۳ ثانیه · فضای عمودی · متن دست‌کم ۱۱ پوینت · الگوی کارتی
• - اصل دوم، ساده‌کردن ناوبری: هدف لمس ۳۰ در ۳۰ پیکسل یا ۷ تا ۱۰ میلی‌متر · آشکارسازی تدریجی · یک کنش اصلی در هر صفحه
• - اصل سوم، محدودکردن ورودی: فیلد کمتر · پیش‌پرکردن · ورودی صوتی · ورود ماندگار · جستجوی برجسته · صفحهٔ اسکلتی
• - اصل چهارم، تداوم: محتوای یکسان · جابه‌جایی روان میان دستگاه‌ها · دنبال‌کردن پیشرفت کاربر
• - دسترسِ شست: اندازهٔ هدف خطا را کم می‌کند و جای هدف، تلاش رسیدن را
• - سه ناحیهٔ صفحه: راحت · با کشش · دور از دسترس — و با دستِ غالب آینه می‌شوند
• - سه مبادله: بالا برای دیده‌شدن و پایین برای زده‌شدن · یک‌جهته‌بودن مهم‌تر از کوتاهی اسکرول · پنهان‌کردنِ آنچه اکثریت لازم ندارند
• - در فارسی: اشاره‌ها هم راست‌به‌چپ می‌شوند · ارتفاع خط حدود ۱٫۸ برابر · فرم هر دو شکل رقم را بپذیرد · و پهنای باند یک متغیر است، نه یک فرض