بهترین روش های طراحی فرم در رابط کاربری

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

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

فیلدهای غیرضروری رو حذف کنین

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

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

سوالات کاربرا رو پیش‌بینی کنین و متن کمکی ارائه بدین

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

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

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

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

قانون شهودی نیلسن در مورد دیده شدن وضعیت سیستم بیان می‌کنه که یه سیستم خوب باید کاربرا رو از اتفاقاتی که در حال رخ دادنه مطلع کنه و بازخورد فوری در مورد تعاملشون با رابط (مثل کلیک یا لمس) ارائه بده.

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

دکمه‌ها رو برای لمس آسون کنین

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

حداقل مساحت هدف لمسی ۱x۱ سانتی‌متر (تقریباً ۳۸ پیکسل) هست. این فضا حتی وقتی کاربرا در حال حرکت یا نگه داشتن تلفن و تایپ با یه دست هستن، جایی برای خطا باقی می‌ذاره. داشتن عرض دکمه یکسان با ورودی‌های فرم یه مسئله سلیقه‌ایه، اما طراحی رو متعادل‌تر و سازگارتر می‌کنه.

فیلدهای اجباری و اختیاری رو نشون بدین

طبق گفته گروه نیلسن-نورمن، علامت‌گذاری هر دو ورودی اجباری و اختیاری، تکمیل فرم رو کمی آسون‌تر می‌کنه.

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

ورودی‌ها باید به راحتی قابل لمس باشن

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

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

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

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

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

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

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

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

از آیکون‌ها برای راهنمایی بصری استفاده کنین

آیکون‌ها می‌تونن برای راهنمایی بصری سریع، مخصوصاً تو فرم‌هایی که کاربرا ممکنه اطلاعات خاصی رو ندونن، مثل کد CVV/CVC روی کارت اعتباری، شهودی‌تر از متن باشن. راهنماهای ابزار می‌تونن مفید باشن اما به یه عمل اضافی ماوس نیاز دارن و ممکنه به راحتی تو دستگاه‌های موبایل کار نکنن. استفاده از یه آیکون — یه گرافیک از یه کارت اعتباری که محل کد رو نشون می‌ده، برای مثال — می‌تونه بلافاصله چیزی که لازمه رو روشن کنه. اگه همچنان احتمال سردرگمی بین مخاطبان شما وجود داره، جفت کردن آیکون با یه راهنمای ابزار رو برای توضیح بیشتر در نظر بگیرین. نکته‌ی حرفه‌ای! اطلاعاتی که برای تکمیل کار حیاتی هستن (مثل الزامات رمز عبور) رو تو راهنماهای ابزار قرار ندین.

به استایل ورودی سنتی پایبند باشین

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

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

انتخاب‌کننده‌های تاریخ مناسب رو برای نیازهای کاربرا انتخاب کنین

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

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

تعداد اقدامات کاربر رو کاهش بدین

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