همانطور که می‌دانید، تمامی برنامه‌های کاربردی در پلتفرم‌های مختلف حداقل یک فرم همراه با فیلد متنی (Text field) برای ورود اطلاعات توسط کاربر دارند. بنابراین طراحی و پیاده‌سازی مناسب این المان برای این‌که قابل فهم و دسترس‌پذیر باشد، دارای اهمیت است.
اطلاعات این نوشته برای طراحان، توسعه‌دهندگان یا مدیران وب‌سایت می‌تواند مفید باشد.
از این اطلاعات می‌توانید به‌عنوان راهنمایی برای افزایش دسترس‌پذیری فیلدهای متنی وب‌سایت یا برنامه‌کاربردی تا سطح AAA استاندارد WCAG 2.0 استفاده کنید.
در این نوشته ضمن معرفی فیلد متنی، طراحی این المان را برای افزایش خوانایی، دسترس‌پذیری و کارایی آن بررسی می‌کنیم.
فیلد متنی یکی از کنترلگر ورودی است که به کاربر اجازه ورود اطلاعات را می‌دهد. تقریباً در تمامی برنامه‌های کاربردی برروی تمامی پلتفرم‌ها، حداقل یک فیلد ورودی وجود دارد. به‌طور مثال صفحه موتور جستجوگر گوگل شامل یک فیلد متنی است که شما عبارت موردنظر خود را در آن نوشته و دکمه جستجو را فشار می‌دهید.
هر فیلد متنی از ۶ جز زیر تشکیل شده‌است:
۱- محل درج اطلاعات (Container)
۲- آیکون پایانی (Trailing icon) – اختیاری
۳- متن Placeholder – اطلاعات ورودی کاربر جایگزین این متن می‌شود.
۴- متن راهنما (Helper text)/متن خطا (Error text) – اختیاری
۵- برچسب
۶- آیکون پیشرو (Leading icon) – اختیاری
در ابتدای امر بسیار مهم است که فیلد متنی به شکل استاندارد خود طراحی شود. بسیاری از طراحان فیلدها را به‌گونه‌ای طراحی می‌کنند که شبیه دکمه یا سایر المان‌های رابط کاربری می‌شود. شکل ظاهری یک المان، شیوه تعامل کاربر با آن را مشخص می‌کند.
علاوه بر این، قالب Container و شکل طراحی فیلدهای متنی، وجود یا عدم وجود حاشیه (Border) و انحنا در آن (لبه‌های تیز یا انحنادار به‌عبارت دیگر Squared یا Rounded) و موارد این چنین به سبک طراحی محصول یا برنامه کاربردی شما وابسته است.
آیکون پیشرو به‌عنوان یک بخش اختیاری در طراحی فیلد متنی تلقی می‌شود. با این حال در برخی حالت‌ها تجربه بهتری برای کاربر ایجاد می‌کند و به او کمک می‌کند تا محتوای مناسب درج برای آن فیلد را درک کند (شاید بدون نگاه به برچسب فیلد).
به‌طور کلی دو روش برای قرارگیری برچسب مرتبط با فیلد متنی وجود دارد. روش اول (Top-aligned) در بالا و سمت راست (برای زبان‌های راست به چپ) یا بالا سمت چپ (برای زبان‌های چپ به راست) قرار می‌گیرد.
در روش دوم (Floating) برچسب درون فیلد متنی قرار می‌گیرد و در زمان تعامل کاربر با آن، به بالای فیلد جابجا می‌شود.
هر دو روش به‌لحاظ تجربه کاربر مناسب است. بنابراین هر کدام که با سبک طراحی محصول یا برنامه کاربردی شما همگام است را انتخاب کنید. لازم به ذکر است که پیش‌تر برچسب‌ها را کنار فیلد ورودی قرار می‌دادند. این روش چندان توصیه نمی‌شود. زیرا چشم کاربر در هنگام تعامل با فرم به‌صورت زیگ‌زاگی برچسب و فیلد مرتبط با آن را دنبال می‌کند که می‌تواند اذیت‌کننده باشد. حتی در برخی فرم‌های طولانی ممکن است کاربر نتواند ارتباطی میان برچسب و فیلد آن ایجاد کند.
برچسب‌ها برای راهنمایی کاربران نیستند. برچسب‌ها بایستی کوتاه و گویا باشند و تمام واژه‌های آن دیده شوند. بنابراین در برچسب‌های خود از یک یا دو کلمه استفاده کنید تا کاربر به‌سرعت متوجه آن شود. در صورتی که به توضیح اضافی نیاز دارید، از متن کمکی (Helper text) استفاده کنید.
به‌طور کلی فیلد متنی را بایستی به‌گونه‌ای طراحی کنید که کاربر متوجه نوع ورودی آن شود. استفاده از یک برچسب مشخص، خوانا و قابل فهم به این موضوع کمک شایانی می‌کند. البته موارد استثنائی وجود دارند که کاربر از طریق آیکون موجود در فیلد متوجه نوع ورودی آن می‌شود. به‌طور مثال در سیستم عامل Android و iOS، فیلد ورودی زیر با آیکون ذره‌بین نشان‌دهنده جستجو است و کاربر با اولین نگاه متوجه عملکرد آن می‌شود.
انتخاب متن مناسب برای Placeholder در آگاهی‌رسانی و شیوه تعامل کاربر با فیلد متنی بسیار مهم است. به‌طور مثال اگر از کاربر درخواست ثبت نام استان دارید، از نام استان به‌عنوان متن Placeholder استفاده نکنید. زیرا ممکن است کاربر را به اشتباه بیاندازد. از طرفی تضاد رنگی آن بایستی با ورودی اصلی متفاوت و کم‌رنگ‌تر باشد تا کاربر متوجه شود اطلاعاتی از پیش در داخل فیلد نوشته نشده‌است.
با این حال، بر اساس مطالعاتی که توسط NNGroup به‌لحاظ دسترس‌پذیری برروی Placeholder شده‌است، بسیاری از نرم‌افزارهای دسترس‌پذیری که برروی مرورگرهای وب وجود دارند، علی‌رغم پیشرفت‌هایی که داشتند، تعامل قابل قبولی با Placeholder ندارند و می‌توانند سه مشکل مهم زیر را ایجاد کنند:
۱- رنگ خاکستری روشن که به‌صورت پیش‌فرض برای متن Placeholder استفاده می‌شود، تضاد رنگی کمی نسبت به پس‌زمینه خود دارد. امکان خواندن چنین متنی برای کاربرانی که مشکلات بینایی دارند سخت است.
۲- در بسیاری از طراحی‌ها متن Placeholder پنهان می‌شود و عبارت ورودی جایگزین آن می‌شود. بنابراین بایستی کاربر به‌خاطر داشته باشد که چه فیلدی را تکمیل می‌کند. در حالت ممکن است کاربران متوجه نشوند که این فیلد قابل انتخاب است و بایستی مقداری داخل آن درج کند. زیرا متنی را در حال حاضر درون فیلد می‌بیند. هم‌چنین زمانی که متن Placeholder ناپدید نمی‌شود، کاربر بایستی آن را حذف کند که تلاشی را از سمت او می‌طلبد. این موارد برای کاربرانی که اختلالات حرکتی یا شناختی دارند، مشکلاتی را به‌همراه دارد.
۳- بسیاری از صفحه‌خوان‌ها نمی‌توانند متن Placeholder را بخوانند. بنابراین افرادی که مشکلات بینایی دارند، ممکن است متوجه این متن نشوند.
بنابراین توصیه می‌شود برای کاربردپذیری و دسترس‌پذیری بهتر، متن Placeholder را خارج فیلد متنی انتقال دهید یا از شیوه‌های مدرن که در زمان تعامل کاربر با فیلد، متن Placeholder را به بالا یا گوشه فیلد متنی منتقل می‌کنند (مانند Google یا Twitter)، استفاده نمایید.
داده ورودی به فیلدهای متنی در شکل‌های مختلف هستند. توصیه می‌شود تا جای ممکن فیلدهای متنی به‌صورت سازگار با شیوه ورود اطلاعات توسط کاربر طراحی شوند. با این حال همیشه چنین چیزی امکان‌پذیر نیست. به‌طور مثال، فیلد ورودی شماره تلفن می‌تواند با علامت «+»، پیش‌شماره کشور، پیش‌شماره استان یا بدون این موارد طراحی شود. در این حالت با ارائه قالب مشخص برای ورودی می‌توانید کاربر را راهنمایی کنید.
پیشوند و پسوند برای زمانی است که ورودی فیلد متنی بیان‌گر کمیت از یک واحد باشد. به‌طور مثال برای مبلغ پول از نماد ارزها یا برای ارتفاع از واحدهای اندازه‌گیری آن‌ها استفاده می‌شود.
توصیه می‌شود تا اندازه فیلد متنی بر اساس اندازه ورودی آن تنظیم شود تا علاوه بر خوانایی، کاربر به‌راحتی با آن تعامل داشته باشد. بنابراین اندازه فیلد به‌گونه‌ای بایستی باشد تا مقدار ورودی احتمالی آن نمایش داده شود.
استفاده از این آیکون امکان تعامل بهتر با فیلد متنی را به کاربر می‌دهد. به‌طور مثال اگر از علامت «ضربدر» استفاده کنید که معنای حذف/پاک‌کردن را دارد، کاربر می‌تواند به راحتی محتوای داخل فیلد را در کم‌ترین زمان ممکن پاک کند. به‌خصوص در موبایل و تبلت که پاک‌کردن محتوا سخت‌تر از دسکتاپ است.
در حالتی که کاربر اطلاعات نادرستی را وارد فیلد می‌کند بهتر است از آیکون خطا (Error) یا در زمان درج اطلاعات درست از آیکون تایید (Check) استفاده کرد. این مورد به‌دلیل افزایش دسترس‌پذیری از اهمیت بالایی برخوردار است. زیرا کاربرانی که به‌لحاظ بینایی مشکل دارند، امکان تشخیص رنگ برای ایشان مشکل است. بنابراین از آیکون موجود می‌توانند به وضعیت پیش‌آمده پی ببرند. در خصوص نمایش خطا دو نکته بایستی رعایت شود:
۱- تا زمان وجود خطا، پیام مربوط به آن بایستی حفظ شود.
۲- پیام خطا بایستی راهنمای کاربر باشد تا به شیوه مناسب بتواند آن را اصلاح کند. تنها بیان وجود خطا قابل قبول نیست.
هم‌چنین زمانی که می‌خواهید از کاربر رمز عبور دریافت کنید، بهتر است امکان بازبینی رمزعبور درج‌شده را به او بدهید.
علاوه بر این، اگر امکان درج/جستجو اطلاعات بر اساس صدا یا تصویر (برای افزایش دسترس‌پذیری) را به کاربر می‌دهید، بایستی از آیکون مخصوص به آن استفاده نمایید.
برای هر فیلد متنی بایستی وضعیت‌های مناسبی از نظر بصری برای Focused ،Disabled ،Error و ... مشخص شود تا زمانی که انتخاب، لمس یا برروی آن کلیک می‌شود تغییر وضعیت محسوسی مانند تغییر رنگ، اضافه‌شدن سایه در اطراف و ... اتفاق بیفتد.
اطلاعات کمکی باید در زمان ضرورت برای راهنمایی بیشتر کاربر استفاده شود. به‌طور مثال برای توضیح شیوه استفاده از شماره موبایل یا انتخاب نام کاربری و رمز عبور مناسب. توصیه می‌شود توضیحات شما بیشتر از ۱۰۰ کلمه نباشد.
توصیه می‌شود تا در دستگاه‌های لمسی در زمان استفاده از فیلدهای متنی، صفحه کلید متناسب با آن فیلد باز شود.
