کوتاه در مورد طراحی Finger-Friendly

حتی اگه در فرآیند طراحی تجربه و رابط کاربی (UI/UX)، طراحی برای معلولین در اولویت شرکت نیست، احتمالا با استفاده از این مقاله بتونین مدیر محصول رو قانع کنین که طراحی Finger-Friendly و توجه به دسترس‌پذیری (Accessibility) نه تنها برای افراد با معلولیت حرکتی بلکه برای تمامی کاربران خوشاینده.

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

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

تصویر تابلوی آفرینش میکل آنژ در حالی که یک موبایل در دست گرفته

این موضوع فقط محدود به خانم‌ها نمی‌شه. در حقیقت بر اساس تحقیقی، متوسط عرض ناخن انگشت اشاره اشاره بین ۱۶ تا ۲۰ میلیمتر (۴۵ تا ۵۷ پیکسل) است و بنا به ویکیپدیا متوسط اندازه عرض انگشت شست ۲۵ میلیمتر (۷۲ پیکسل) است.

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

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

۱. زمانی که نیازه تغییر حالت دکمه رو به کاربر اطلاع بدیم چون زیر انگشته دیده نمی‌شه که با Visibility of system status ارزیابی اکتشافی در تضاده.

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

از طرفی با توجه به Fitt’s Law هر چه دکمه کوچیکتر باشه زمان رسیدن به دکمه طولانی‌تر می‌شه.

علاوه بر اینها، به احتمال زیاد می‌دونین که در ۴۹ درصد مواقع داریم از یک دست برای کار کردن با اپلیکیشن استفاده می‌کنیم پس بهتره که قسمت‌های قابل کلکیک رو Thumb-Friendly طراحی کنیم، اما موضوع اینجاست که به دلیل محدود بودن فضای صفحه‌ی موبایل عملا نمی‌شه ۷۲ پیکسل رو به عنوان حداقل اندازه دکمه در نظر گرفت. به علاوه که کاربر می‌تونه از کنار انگشت شصت استفاده کنه برای لمس کردن دکمه استفاده کنه.

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

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

توی اندروید با کدهای android:minWidth و android:minHeight می‌تونیم برای این موضوع استفاده کنیم.

https://www.youtube.com/watch?v=WRhAV0cnMyY

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

یه مشکلی که در بزرگ کردن محدوده‌ی تاچ Toggle button ها داشتیم این بود که وقتی یه المان دیگه روش می‌انداختیم با چنین خطای دسترس‌پذیری مواجه شدیم. در حین تحقیق برای نوشتن این مقاله متوجه شدم که باید برای بزرگ کردن منطقه قابل لمس دکمه‌ها در اندروید از TouchDelegate استفاده کنیم که به این مشکل بر نخوردیم.

فرضیه‌ی من

در این بین خودم به یه فرضیه‌ای رسیدم که دوست دارم نظر شما رو در موردش بدونم.

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

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

راستی تو وبینار طراحی UI/UX پلیر پخش فیلم قراره در مورد Touch Targets هم حرف بزنم. اونجا می‌بینمتون.