طراحی فرم و فیلد های متنی – کامپوننت های رابط کاربری

قوانین ساده UX-UI (برای طراحی فرم و فیلد) که به شما کمک می کند فرم هایی را طراحی کنید که کاربران دوست دارند آنها را پُر کنند.

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

تاریخچه فیلد ها و فرم ها ui DESIGN

آناتومی فیلد های متنی – TextBox

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

آناتومی تکست فیلد

عناصر کلیدی یک فیلد متنی

1. Container – محل ورود اطلاعات و تعامل با کاربر
2. Input text – محل وارد کردن متن
3. Label Text – محلی که به کاربر می گوییم چه اطلاعاتی را در فیلد وارد کند.
4. Placeholder text – شرح یا نمونه ای از اطلاعاتی که قصد داریم کاربر وارد کند. (پس از وارد کردن اطلاعات توسط کاربر این قسمت حذف می شود.)
5. Helper or Validation text(optional) – متن کمکی یا اعتبار سنجی (اختیاری است)
6. Leading icon(optional) – ایکونی که نوع ورودی مورد نیاز ما را تعیین می کند. (اختیاری است)
7. Trailing icon(optional) – کنترل اضافی برای متن وارد شده، مانند پاک کردن، پنهان کردن/نمایش و غیره (اختیاری است)

انواع فیلد های متنی

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

انواع و نوع های مختلف تکست باکس

(ما به طور خاص در مورد نوع های دیگر ورودی  مانند چک باکس ها و دکمه های رادیویی صحبت نمی کنیم زیرا در ادامه این سری به آنها خواهیم پرداخت).

از نوع ورودی مناسب برای جمع آوری داده استفاده کنید.

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

فیلدهای متنی باید ظاهر خود را بر اساس تعاملات حالت و کاربر تغییر دهند

این کار را می توان با ارائه نشانه های بصری که وضعیت فیلد متنی را به اشتراک می گذارد، انجام داد. فیلدهای متن ورودی می‌توانند یکی از حالت‌های زیر را داشته باشند:

• Inactive – وقتی از فیلد استفاده نمی کنیم،
• Hover – وقتی موس روی آن قرار میگیرد.
• Disabled – غیرفعال
• Focused –  متمرکز،
• Validation – اعتبارسنجی
• Error –  خطا.

همه حالت ها باید به وضوح از یکدیگر متمایز شوند و در ظاهر و کاربرد کل فرم ها یکسان باشند. بهتر است بهترین شیوه‌ها را دنبال کنید تا مدل‌های ذهنی کاربر را به چالش نکشید. (استاندارد ها را دنبال کنید.)

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

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

ورودی زیر خطی که با دستورالعمل‌های اصلی طراحی متریال رایج شده است، بهترین گزینه نیست. قبلاً بر اساس مطالعه بزرگ Evolution of Material Design تجدید نظر شده بود که به شما توصیه می کنم بررسی کنید. جالب توجه است که همین مطالعه نشان داد که کاربران ورودی هایی با گوشه های گرد را ترجیح می دهند.

تراز کردن متن؛ سمت چپ فیلد متنی

این روش برای زمانی که داده های درخواست شده برای کاربران ناآشنا باشد، انتخاب خوبی است.

مزایا: لیبل ها ها به راحتی مقیاس پذیر و واکنشگرا خواهند بود، استفاده خوب از فضای عمودی

معایب: فاصله زیاد و متغیر بین برچسب ها و ورودی های مربوطه باعث افزایش زمان تکمیل می شود.

برای مطالعه مقاله کامل وارد لینک زیر شوید.