فیلد متنی (Text field)؛ نکات مرتبط با طراحی آن

مقدمه

همانطور که می‌دانید، تمامی برنامه‌های کاربردی در پلتفرم‌های مختلف حداقل یک فرم همراه با فیلد متنی (Text field) برای ورود اطلاعات توسط کاربر دارند. بنابراین طراحی و پیاده‌سازی مناسب این المان برای این‌که قابل فهم و دسترس‌پذیر باشد، دارای اهمیت است.

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

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

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

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

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

فیلد متنی چیست؟

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

ساختار یک فیلد متنی
ساختار یک فیلد متنی

هر فیلد متنی از ۶ جز زیر تشکیل شده‌است:

۱- محل درج اطلاعات (Container)

۲- آیکون پایانی (Trailing icon) – اختیاری

۳- متن Placeholder – اطلاعات ورودی کاربر جایگزین این متن می‌شود.

۴- متن راهنما (Helper text)/متن خطا (Error text) – اختیاری

۵- برچسب

۶- آیکون پیشرو (Leading icon) – اختیاری

طراحی ظاهری و خوانایی

ظاهر مناسب

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

فیلد متنی شبیه دکمه (Button)
فیلد متنی شبیه دکمه (Button)

علاوه بر این، قالب Container و شکل طراحی فیلدهای متنی، وجود یا عدم وجود حاشیه (Border) و انحنا در آن (لبه‌های تیز یا انحنادار به‌عبارت دیگر Squared یا Rounded) و موارد این چنین به سبک طراحی محصول یا برنامه کاربردی شما وابسته است.

استفاده از آیکون پیشرو

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

آیکون پیشرو در فیلد متنی
آیکون پیشرو در فیلد متنی

موقعیت مناسب برچسب

به‌طور کلی دو روش برای قرارگیری برچسب مرتبط با فیلد متنی وجود دارد. روش اول (Top-aligned) در بالا و سمت راست (برای زبان‌های راست به چپ) یا بالا سمت چپ (برای زبان‌های چپ به راست) قرار می‌گیرد.

در حالت (Top-aligned) برچسب‌ها از ابتدا در بالای فیلد متنی قرار می‌گیرد.
در حالت (Top-aligned) برچسب‌ها از ابتدا در بالای فیلد متنی قرار می‌گیرد.

در روش دوم (Floating) برچسب درون فیلد متنی قرار می‌گیرد و در زمان تعامل کاربر با آن، به بالای فیلد جابجا می‌شود.

جابجایی برچسب به بالای فیلد متنی در زمان تعامل با المان
جابجایی برچسب به بالای فیلد متنی در زمان تعامل با المان

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

برچسب متنی کوتاه

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

طراحی جدید فرم ثبت نام آمازون (درست)
طراحی جدید فرم ثبت نام آمازون (درست)
طراحی قدیم فرم ثبت نام آمازون (نادرست)
طراحی قدیم فرم ثبت نام آمازون (نادرست)

برچسب متنی خوانا

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

نمونه یک فیلد جستجو با آیکون مناسب در سیستم عامل اندروید
نمونه یک فیلد جستجو با آیکون مناسب در سیستم عامل اندروید
نمونه یک فیلد جستجو با آیکون مناسب و امکان ثبت اطلاعات با صدا در سیستم عامل iOS
نمونه یک فیلد جستجو با آیکون مناسب و امکان ثبت اطلاعات با صدا در سیستم عامل iOS

متن Placeholder

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

استفاده مناسب از Placeholder (درست)
استفاده مناسب از Placeholder (درست)
استفاده نامناسب از Placeholder (نادرست)
استفاده نامناسب از Placeholder (نادرست)

با این حال، بر اساس مطالعاتی که توسط NNGroup به‌لحاظ دسترس‌پذیری برروی Placeholder شده‌است، بسیاری از نرم‌افزارهای دسترس‌پذیری که برروی مرورگرهای وب وجود دارند، علی‌رغم پیشرفت‌هایی که داشتند، تعامل قابل قبولی با Placeholder ندارند و می‌توانند سه مشکل مهم زیر را ایجاد کنند:

۱- رنگ خاکستری روشن که به‌صورت پیش‌فرض برای متن Placeholder استفاده می‌شود، تضاد رنگی کمی نسبت به پس‌زمینه خود دارد. امکان خواندن چنین متنی برای کاربرانی که مشکلات بینایی دارند سخت است.

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

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

بنابراین توصیه‌ می‌شود برای کاربردپذیری و دسترس‌پذیری بهتر، متن Placeholder را خارج فیلد متنی انتقال دهید یا از شیوه‌های مدرن که در زمان تعامل کاربر با فیلد، متن Placeholder را به بالا یا گوشه فیلد متنی منتقل می‌کنند (مانند Google یا Twitter)، استفاده نمایید.

راهنمای درج اطلاعات

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

شماره موبایل به‌صورت خودکار در قالب مشخص‌شده تنظیم می‌شود. بنابراین کاربر برای ورود اطلاعات دچار سرگردمی نمی‌شود.
شماره موبایل به‌صورت خودکار در قالب مشخص‌شده تنظیم می‌شود. بنابراین کاربر برای ورود اطلاعات دچار سرگردمی نمی‌شود.


مشخص‌نمودن قالب ورودی با Placeholder. مشکل اصلی این روش پنهان‌شدن قالب با ورود اولین کاراکتر توسط کاربر است.
مشخص‌نمودن قالب ورودی با Placeholder. مشکل اصلی این روش پنهان‌شدن قالب با ورود اولین کاراکتر توسط کاربر است.

پیشوند و پسوند

پیشوند و پسوند برای زمانی است که ورودی فیلد متنی بیان‌گر کمیت از یک واحد باشد. به‌طور مثال برای مبلغ پول از نماد ارزها یا برای ارتفاع از واحدهای اندازه‌گیری آن‌ها استفاده می‌شود.

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

اندازه مناسب فیلد

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

اندازه مناسب فیلد متنی برای کدپستی (درست)
اندازه مناسب فیلد متنی برای کدپستی (درست)
اندازه نامناسب فیلد متنی برای کدپستی (نادرست)
اندازه نامناسب فیلد متنی برای کدپستی (نادرست)


آیکون پایانی

استفاده از این آیکون امکان تعامل بهتر با فیلد متنی را به کاربر می‌دهد. به‌طور مثال اگر از علامت «ضربدر» استفاده کنید که معنای حذف/پاک‌کردن را دارد، کاربر می‌تواند به راحتی محتوای داخل فیلد را در کم‌ترین زمان ممکن پاک کند. به‌خصوص در موبایل و تبلت که پاک‌کردن محتوا سخت‌تر از دسکتاپ است.

امکان حذف متن ورودی به‌کمک آیکون پایانی «ضربدر»
امکان حذف متن ورودی به‌کمک آیکون پایانی «ضربدر»

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

۱- تا زمان وجود خطا، پیام مربوط به آن بایستی حفظ شود.

۲- پیام خطا بایستی راهنمای کاربر باشد تا به شیوه مناسب بتواند آن را اصلاح کند. تنها بیان وجود خطا قابل قبول نیست.

نمایش متفاوت وجود خطا یا درج درست اطلاعات با رنگ‌ها و آیکون‌های پایانی مناسب
نمایش متفاوت وجود خطا یا درج درست اطلاعات با رنگ‌ها و آیکون‌های پایانی مناسب

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

قراردادن آیکون پایانی مناسب برای نمایش رمز عبور واردشده توسط کاربر
قراردادن آیکون پایانی مناسب برای نمایش رمز عبور واردشده توسط کاربر

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

 درج/جستجو اطلاعات بر اساس صدا یا تصویر در نوار جستجوی گوگل
درج/جستجو اطلاعات بر اساس صدا یا تصویر در نوار جستجوی گوگل

وضعیت‌های مختلف فیلد متنی

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

نمایش وضعیت Focused برای فیلد متنی با رنگ متفاوت
نمایش وضعیت Focused برای فیلد متنی با رنگ متفاوت

اطلاعات کمکی

اطلاعات کمکی باید در زمان ضرورت برای راهنمایی بیشتر کاربر استفاده شود. به‌طور مثال برای توضیح شیوه استفاده از شماره موبایل یا انتخاب نام کاربری و رمز عبور مناسب. توصیه می‌شود توضیحات شما بیشتر از ۱۰۰ کلمه نباشد.

نمایش اطلاعات کمکی در زیر فیلد متنی برای راهنمایی بهتر کاربر
نمایش اطلاعات کمکی در زیر فیلد متنی برای راهنمایی بهتر کاربر

انتخاب صفحه کلید بر اساس نوع ورودی (مناسب موبایل و تبلت)

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

صفحه کلید عددی برای شماره تلفن
صفحه کلید عددی برای شماره تلفن
صفحه کلید حرفی و عددی برای پست الکترونیک
صفحه کلید حرفی و عددی برای پست الکترونیک