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

میدان ورودی (Input Fields) چیست؟

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

هر میدان ورودی یک پرسش است که کاربر باید جوابش را بنویسد. و هر پرسش، یک بهانه برای رفتن.

تعریف

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

و صورت‌بندی منبع این است: میدان ورودی «به کاربر ابزاری می‌دهد تا پاسخ‌های استانداردنشده وارد کند.»

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

و کلمهٔ «استانداردنشده» تفکیک‌کنندهٔ اصلی است. هرچه پاسخ قابل استاندارد شدن باشد، میدان ورودی ابزار اشتباهی است.

یعنی «کشور» را نباید در میدان ورودی پرسید — انتخاب‌گر می‌خواهد. و «چه مشکلی داشتید؟» را نمی‌شود جز با میدان ورودی پرسید.

کارکرد اصلی

و کارکرد بنیادی‌اش ممکن‌کردن عاملیت کاربر است.

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

و منبع این را پرورش‌دهندهٔ درگیری و احترام به یکتایی کاربر می‌داند.

و همین‌جا یک تنش هست که در کل این حوزه حل نمی‌شود: آزادی کاربر با دقت داده در تضاد است.

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

پنج گام اجرایی

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

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

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

چهار: برچسب‌گذاری روشن. برچسب توصیفی را بلافاصله کنار میدان مربوطه و با فاصلهٔ مناسب بگذارید.

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

و گام دوم بیشترین اثر را دارد و کمترین توجه را می‌گیرد.

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

و اگر این دو با انتظار واقعی شما نخوانند، پاسخ‌هایی می‌گیرید که به کارتان نمی‌آید.

سه عامل تعیین‌کننده

• - کنتراست رنگ — از نامرئی‌شدن میدان و اشتباه‌گرفتن ناحیهٔ تعاملی با ناحیهٔ ثابت جلوگیری می‌کند.
• - اندازهٔ میدان — دامنهٔ پاسخ مورد انتظار را می‌رساند و از اصطکاک پیمایش جلوگیری می‌کند.
• - و چیدمان فضایی — نسبت برچسب به میدان را روشن می‌کند و بار شناختی را کم.

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

دام‌ها

و پیاده‌سازی ضعیف — تفکیک رنگی ناکافی، اندازهٔ ناهمگون، یا چیدمان شلوغ — کلافگی می‌سازد.

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

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

یعنی هزینهٔ عاطفی‌اش با هیچ‌کدام از دام‌های دیگر قابل مقایسه نیست.

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

این بخش افزودهٔ من است، چون منبع «برچسب‌گذاری روشن» را می‌گوید و نمی‌گوید سه چیز متفاوت‌اند که مدام با هم اشتباه گرفته می‌شوند.

برچسب می‌گوید این میدان چیست. و همیشه باید دیده شود، حتی وقتی کاربر شروع به تایپ کرد.

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

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

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

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

و مشکل سوم که کمتر گفته می‌شود: وقتی خطا می‌گیرد و می‌خواهد اصلاح کند، هیچ راهنمایی روی صفحه نمانده.

اعتبارسنجی: کِی و چطور

و این بخش هم افزودهٔ من است، چون دام اصلیِ منبع — پیام خطای بی‌مسیر — در واقع مسئلهٔ اعتبارسنجی است، نه مسئلهٔ خطا.

پیش از تایپ: قاعده را بگویید. «حداقل ۸ نویسه» را از اول نشان دهید، نه بعد از رد شدن.

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

بعد از ترک میدان: بهترین لحظه برای اعتبارسنجی همین است. کاربر کارش را با آن میدان تمام کرده و هنوز در ذهنش هست.

بعد از ارسال: اگر چیزی مانده، مکان‌نما را به اولین میدان مشکل‌دار ببرید و خطا را کنار خودِ میدان بگذارید — نه فقط بالای فرم.

و یک قاعدهٔ کلی: هرچه اعتبارسنجی دیرتر بیاید، اصلاحش گران‌تر است.

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

دسترس‌پذیری

و چهار چیز، بیشترین بازده را دارند.

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

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

سه: ناحیهٔ لمس باید بزرگ باشد. و برچسب هم باید قابل کلیک باشد، چون سطح هدف را چند برابر می‌کند.

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

کمترین تعداد میدان

و آخرین افزودهٔ من، مهم‌ترین است: بهترین طراحی میدان ورودی، نبودنش است.

و هر میدان را با سه پرسش بسنجید.

یک: می‌شود این را حدس زد؟ کشور از شمارهٔ تلفن، شهر از کد پستی، و نام از حساب متصل قابل استخراج‌اند.

دو: می‌شود این را بعداً پرسید؟ هر چیزی که برای انجام همین کار لازم نیست، متعلق به همین فرم نیست.

سه: اگر این را نپرسیم چه می‌شود؟ و اگر پاسخ «هیچی، فقط در گزارش‌ها نداریمش» است، آن میدان را بردارید.

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

در بافت فارسی

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

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

دو: کاربر ایرانی عدد فارسی تایپ می‌کند. و بسیاری از فرم‌ها آن را نامعتبر می‌شمارند.

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

سه: نیم‌فاصله و «ی» عربی، تطبیق متن را می‌شکنند. «علی‌رضا» و «علیرضا» و «عليرضا» سه رشتهٔ متفاوت‌اند و یک نام.

و همان قاعدهٔ قالب بخشنده اینجا هم جواب می‌دهد: ورودی را نرمال کنید و بعد مقایسه کنید.

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

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

جمع‌بندی

• - میدان ورودی به کاربر امکان می‌دهد پاسخ استانداردنشده وارد کند — در پرداخت، تماس و ثبت‌نام
• - و هرچه پاسخ قابل استاندارد شدن باشد، میدان ورودی ابزار اشتباهی است
• - کارکردش ممکن‌کردن عاملیت کاربر است — اما آزادی کاربر با دقت داده در تضاد است
• - پنج گام: شناسایی ورودی لازم · سنجش حجم · انتخاب راهبردی رنگ · برچسب روشن · بازخورد بصری
• - و اندازهٔ میدان خودش یک دستور است: یک‌سطری می‌گوید کوتاه بنویس، چهارسطری می‌گوید توضیح بده
• - سه عامل: کنتراست رنگ · اندازهٔ میدان · چیدمان فضایی — و هر سه دربارهٔ فهمیدن پیش از تایپ‌کردن‌اند
• - بدترین دام: پیام خطا بدون بردن کاربر به میدان مشکل‌دار — چون در لحظهٔ شکست او اتفاق می‌افتد
• - برچسب می‌گوید این چیست و همیشه دیده می‌شود · جای‌نگهدار نمونه است و محو می‌شود · راهنما قاعده است و پیش از خطا می‌آید
• - اعتبارسنجی: قاعده پیش از تایپ · سکوت در حین تایپ · سنجش بعد از ترک میدان · و مکان‌نما به اولین خطا بعد از ارسال
• - دسترس‌پذیری: برچسب متصل · رنگ تنها حامل معنا نباشد · ناحیهٔ لمس بزرگ · و خطای متنیِ کارگو
• - بهترین طراحی میدان، نبودنش است: می‌شود حدس زد؟ · می‌شود بعداً پرسید؟ · اگر نپرسیم چه می‌شود؟
• - و در فارسی: جهت را در سطح میدان تعیین کنید · عدد فارسی را بی‌صدا تبدیل کنید · ورودی را نرمال کنید · و نشانی را یک میدان آزاد بگذارید