ورودی یا اینپوت چیست؟ نکات استفاده در طراحی رابط کاربری

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

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

ورودی تک خطی (Single-line input)

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

ورودی چند خطی (Multi-line Input)

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

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

ناحیه متن (Text area)

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

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

ورودی رمز عبور (Password input)

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

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

ورودی جستجو (Search input)

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

ورودی‌های جستجو معمولاً با یه آیکون ذره‌بین نشون داده می‌شن، اغلب با یه نگه‌دارنده یا برچسب شناور همراه هستن. قرار دادن آیکون ذره‌بین قبل از نگه‌دارنده به سرعت بخشیدن به تشخیص و راهنمایی مؤثرتر کاربرا کمک می‌کنه.

نگه‌دارنده (Placeholder)

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

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

ورودی تقویم (Calendar input)

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

هر وقت کاربراتون نیاز دارن یه تاریخ وارد کنن، قرار ملاقات تنظیم کنن، بلیط هواپیما رزرو کنن، بلیط فیلم بخرن و غیره، استفاده از یه ورودی تقویم به طور خاص انجام این کار رو آسون‌تر می‌کنه. ورودی‌های تقویم باید از maskها و placeholderها برای نشون دادن فرمت تاریخی که باید وارد بشه، استفاده کنن.

ورودی انتخاب (Select input)

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

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

ورودی عمل (Action input)

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

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

ورودی اجباری (Required input)

ورودی‌های اجباری بیشتر با یه ستاره یا با کلمه «الزامی» نشون داده می‌شن. اطلاع دادن به کاربرا که کدوم ورودی‌ها اجباری هستن و کدوم رو می‌تونن رد کنن، پر کردن فرم رو به یه فرآیند روان‌تر و سریع‌تر تبدیل می‌کنه.

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

ماسک ورودی (Input mask)

یه مطالعه توسط Baymard نشون می‌ده که ۸۹٪ از کاربرا تمایل دارن ورودی‌های عددی رو به چند روش مختلف وارد کنن، حتی اگه placeholder مثال قالب‌بندی رو نشون بده.

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

نکات استفاده در طراحی رابط کاربری

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

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

فضای داخلی کافی برای اسکن‌پذیری فراهم کنین

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

فضای کافی بین ورودی‌ها اضافه کنین

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

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

از شلوغی اجتناب کنین و فضای کافی بین عناصر اضافه کنین

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

از استایل استاندارد ورودی برای تشخیص سریع‌تر استفاده کنین

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

آزمایش با شعاع گوشه و رنگ‌های مختلف برای ورودی‌هاتون به طور کلی خوبه، اما مراقب باشین که زیاده‌روی نکنین. به استایل سنتی ورودی پایبند باشین و فراموش نکنین که متن و پس‌زمینه باید حداقل الزامات کنتراست رنگ ۴.۵:۱ رو برآورده کنن.

برچسب‌های مفید ارائه بدین

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

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

مطمئن بشین که خواندن برچسب‌ها آسون‌تره

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

یه حالت برچسب رو انتخاب کنین که خوندنش آسون‌تر باشه

حالت برچسب برای خوانایی مهمه. دو گزینه رایج برای انتخاب وجود داره:

• حالت جمله (Sentence case): هر کلمه با یه حرف کوچک شروع می‌شه به جز اسامی خاص و اولین کلمه یه جمله. این برای متن طولانی و عبارات کوتاه مثل عناوین یا برچسب‌ها خوب کار می‌کنه. نوشتن و خوندنش هم مخصوصاً برای محتوای طولانی آسون‌تره.
• حالت عنوان (Title case): حرف اول هر کلمه اصلی بزرگ نوشته می‌شه، در حالی که بقیه حروف کوچیک هستن. این برجستگی بیشتری به متن می‌ده و می‌تونه برای عناصر رابط کاربری مثل عناوین هشدار، آیتم‌های منو و برچسب‌ها مناسب باشه، اما ممکنه بهترین انتخاب برای متن‌های طولانی نباشه.

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

متن ورودی رو خوانا نگه دارین

اندازه متن ورودی و همچنین اندازه نگه‌دارنده باید به راحتی خونده بشه. هیچ اندازه “درست” واحدی برای ورودی‌های متن وجود نداره، اما ۱۶ پیکسل نقطه شروع خوبیه. اگه صفحه پر از متن دارین می‌تونه بزرگتر باشه یا اگه یه صفحه پر از تعامل طراحی می‌کنین، می‌تونه کمی کوچکتر باشه. نکته‌ی حرفه‌ای! به یاد داشته باشین که خوانایی فونت‌های مختلف حتی تو اندازه فونت دقیقاً یکسان می‌تونه متفاوت باشه.

متن کمکی مختصر اما معنادار ارائه بدین

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

به یاد داشته باشین که کاربرا تو وب مطالعه نمی‌کنن، مخصوصاً وقتی صحبت از متن‌های کوتاه باشه که قرار

متن کمکی مختصر اما معنادار ارائه بدین

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

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

نگه‌دارنده‌های آموزنده ارائه بدین

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

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