نکات مرتبط با دسترس‌پذیری و تعامل کاربر در فیلد متنی (Text field)

توجه!

نوشته پیش‌رو ادامه مقاله قبلی با عنوان «فیلد متنی (Text field)؛ نکات مرتبط با طراحی آن» است. در این نوشته دو مبحث دسترس‌پذیری و تعامل کاربر را مورد بررسی قرار می‌دهیم.

این نوشته مناسب چه افرادی است؟

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

اطلاعات این نوشته مطابق چه استانداردی است؟

از این اطلاعات می‌توانید به‌عنوان راهنمایی برای افزایش دسترس‌پذیری فیلدهای متنی وب‌سایت یا برنامه‌کاربردی تا سطح AAA استاندارد WCAG 2.0 استفاده کنید.

دسترس‌پذیری

استفاده از حروف بزرگ ممنوع!

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

اندازه قلم

اندازه قلم بایستی به مقداری باشد که خوانایی متن حفظ شود. مقدار ۱۶px اندازه مناسبی برای متن حساب می‌شود. البته این مقدار بسته به نوع تایپ‌فیس، زبان موردنظر و پلتفرمی که برروی آن المان نمایش داده می‌شود، می‌تواند متفاوت باشد.

رنگ برچسب

توصیه می‌شود تا رنگ برچسب از پالت رنگی برنامه کاربردی باشد. علاوه بر این بایستی تضاد رنگ (Contrast) کافی با پس‌زمینه خود داشته باشد. به‌طور کلی W3C توصیه می‌کند تا برای متن از نسبت‌های زیر به‌منظور ایجاد تضاد رنگ مناسب استفاده شود:

• برای متن کوچک بایستی حداقل نسبت تضاد رنگی ۴/۵ به ۱ (4.5:1) با پس‌زمینه وجود داشته باشد.
• برای متن بزرگ بایستی حداقل نسبت تضاد رنگی ۳ به ۱ (3:1) با پس‌زمینه وجود داشته باشد (اندازه 14pt Bold یا 18pt Regular یا بزرگ‌تر).

اختصاص فضای مناسب برای دستگاه‌های لمسی

با توجه به این‌که بیشتر کاربران امروزی از دستگاه‌های لمسی مانند موبایل یا تبلت استفاده می‌کنند، توصیه می‌شود تا برای راحتی کاربر فاصله المان‌ها به‌اندازه‌ای باشد که حین تعامل به‌راحتی قابل انتخاب باشند. بهتر است محدوده لمسی (Touch target) ۴۸px برای فاصله میان المان‌ها درنظر گرفته تا المان موردنظر به‌درستی انتخاب شود. هم‌چنین اندازه ارتفاعی فیلدهای ورودی بهتر است بین ۳۲px تا ۴۰px طراحی شود تا به‌راحتی امکان انتخاب آن‌ها با انگشت وجود داشته باشد.

طراحی فیلدهای ورودی Keyboard-friendly

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

W3C Design Pattern for Keyboard Interaction

تعامل کاربر

بهره‌گیری از پیش‌فرض‌های هوشمند

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

تکمیل و پیشنهاد خودکار اطلاعات

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