همه چیز درباره فرم های رابط کاربری

مقدمه

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

فرم‌ها دقیقاً چی هستند؟

فرم‌ها مجموعه‌ای از فیلدها و دکمه‌ها هستند که به کاربر اجازه می‌دهند اطلاعات وارد کند. سیستم هم بر اساس آن اطلاعات یک کار انجام می‌دهد. مثل:

عضویت در سایت

خرید محصول

ارسال پیام

رزرو بلیت

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

فرم‌ها چه اجزایی دارند؟

Text Input وارد کردن متن‌های کوتاه مثل نام

Password Input مخفی کردن رمز هنگام تایپ

Email / Number Input کنترل نوع داده ورودی

Textarea نوشتن متن‌های طولانی‌تر

Radio Button انتخاب تنها یک گزینه

Checkbox انتخاب چند گزینه همزمان

Dropdown لیست بازشونده برای انتخاب یک مورد

Switch روشن و خاموش کردن یک حالت

File Upload بارگذاری تصویر یا فایل

Button ارسال یا ریست کردن اطلاعات

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

چطور یک فرم خوب طراحی کنیم؟

برای این که کاربر سختی نکشد، بهتر است این نکات را رعایت کنیم:

1*متن لیبل‌ها کوتاه و واضح

2*قراردادن توضیح یا Placeholder در صورت لزوم

3*نمایش پیام خطا دقیق و قابل فهم

4*مرتب کردن فیلدهای مرتبط در کنار هم

5*مشخص کردن فیلدهای ضروری

6*دکمه ارسال واضح و قابل توجه باشد

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

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

1/حالت عادی

2/حالت فوکوس (در حال تایپ)

3/حالت خطا

4/حالت تکمیل شده

این کار باعث می‌شود ظاهر فرم حرفه‌ای و واقعی‌تر شود.

نتیجه

فرم‌ها در ظاهر ساده هستند اما به شدت روی تجربه کاربری تأثیر می‌گذارند. پس بهتر است وقت کافی برای طراحی آن‌ها بگذاریم و به جزئیات دقت کنیم.