معرفی فرم ها در طراحی رابط کاربری

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

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

برچسب‌ها رو بالای ورودی‌ها قرار بدین

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

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

جریان خوندن طبیعی رو حفظ کنین

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

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

از گروه‌بندی منطقی ورودی استفاده کنین

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

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

فضای کافی بین عناصر اضافه کنین

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

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

فضای کافی دکمه فراهم کنین

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

از نشانگرهای پیشرفت برای تشویق کاربرا استفاده کنین

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

از یه برچسب عمل اصلی متنی استفاده کنین

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

همزمان، خودتون رو جای کاربر بذارین و جمله زیر رو تموم کنین تا برچسب‌های توصیفی‌تری پیدا کنین — «من می‌خوام…». پاسخ شما به این، که می‌تونه شامل اصطلاحاتی مثل «ثبت‌نام» یا «دانلود» باشه، به شما کمک می‌کنه اصطلاحات برچسب مناسب رو پیدا کنین.

دکمه عمل اصلی رو برجسته کنین

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

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

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