فرم ها یکی از مهم ترین اجزای طراحی محصول در وب یا اپلیکیشن برای دریافت اطلاعات از کاربران هستند و بسیار مهم است که فرم ها یکنواخت و خسته کننده باشند و استفاده از آنها پیچیده نباشد. رعایت این امر همچنین به بهبود تجربه کاربری سایت یا برنامه (product ux) کمک می کند. در این مقاله، نکاتی را بیان می‌کنم که برای بهبود ux سایت یا برنامه‌ها بسیار مفید هستند، اما به یاد داشته باشید که اینها دستورالعمل‌های کلی هستند و برای هر قاعده‌ای استثنا وجود دارد.
۱- فرم ها بهتر است یک ستونه باشند
فرم های بهتر است یک ستونه باشند
ستون های چندگانه موجب می شود حواس کاربران پرت شود.
۲- Label ها بالای هر Text Input باشند نه مقابل آن ها
کاربران inputهایی که برچسب آن ها بالا باشد را بهتر از آن هایی که در روبرو باشند تکمیل می کنند، در ضمن در موبایل این مورد خیلی بهتر نمایش داده می شود.
۳- هر input را با Label آن گروه بندی کنید
Label و input ها را در کنار هم قرار دهید و اطمینان حاصل کنید که بین زمینه ها به اندازه کافی فاصله وجود دارد، بنابراین کاربران آن ها را با input بالایی یا پایینی اشتباه نمی گیرند.
۴- برای کلمات انگلیسی به طور کامل از حروف بزرگ استفاده نکنید
خواندن حروف بزرگ سختر از حروف کوچک است.
۵- در لیست Drop Down تعداد گزینه ها اگر کمتر از ۶ عدد بودند همه آن ها را نشان دهید
همچنین بخوانید : آموزش طراحی تجربه‌ی کاربری (UX)
۶- از استفاده Placeholder به جای Label اجتناب کنید
شاید فکر کنید که با این کار در استفاده از فضا صرفه جویی کردید، ولی این کار قطعا به خوانایی فرم شما آسیب می زند.
۷- Checkbox ها و Radio Button ها را به صورت ستونی در زیر هم قرار دهید نه در یک سطر
قرار دادن Checkbox ها و Radio Button ها در یک ستون زیر هم خوانایی بیشتری برای فرم ایجاد می کند و پر کردن آن نیز برای کاربر راحت تر است چون دقیقا متوجه می شود که کدام گزینه را باید کلیک کند.
۸- Call To Action ها را دقیق توصیف کنید
یک Call To Action باید دقیقا گویای این باشد که بعد از آن کاربر چه عملی را انجام دهد.
۹- به طور دقیق و واضح Erorr ها را در زیر input ها نشان دهید
جایی که خطا اتفاق افتاده را دقیق به کاربر نشان دهید (نه در بالا و یا زیر فرم!) و دلیل آن را واضح بنویسید. اگر فرم ناقص پر شده است قبل از اینکه کاربر درخواست را به سرور ارسال کند بهتر است به صورت فرانت اندی پیغام خطا را نشان دهید(مثلا اگر نام کاربری وارد شده، قبلا ثبت شده این مورد را به کاربر گوشزد کنید و دکمه sign up را غیرفعال کنید).
۱۰- استفاده از اعتبارسنجی inline پس از اینکه کاربر فیلد را پر می کند (مگر اینکه در طی فرآیند به آن ها کمک کند)
از اعتبارسنجی inline هنگامی که کاربر تایپ می کند استفاده نکنید، مگر اینکه به او کمک کند، مانند زمانی که در مورد ایجاد یک رمز عبور، نام کاربری یا پیام با تعداد کاراکتر وی را راهنمایی می کنید.
۱۱- محتوای پیام های متنی کمکی (Helper Text) را مخفی نکنید
محتوای پیام های متنی (Helper Text) را هرکجا که امکان دارد نمایش دهید، برای اینکه فرم شما شلوغ نشود می توانید متن کمکی را وقتی کاربر روی input فوکوس می کند در زیر یا بالای input نمایش دهید.
۱۲- دکمه ها را اولویت بندی کنید و آن هایی که مهم تر هستند را متمایز کنید
متمایز کردن دکمه هایی که کاربر باید برای مرحله بعدی روی آن کلیک کند، این مزیت را دارد که کاربر کمتر درگیر خواندن متن دکمه ها می شود، مثلا این مورد جا افتاده است که دکمه سبز رنگ یعنی مرحله بعد و دکمه قرمز رنگ یعنی کنسل.
۱۳- طول فیلدهای input را به اندازه کافی در نظر بگیرید
طول فیلد input گویای طول پاسخ است، این مورد را برای فیلدهای دارای تعداد مشخصی از کاراکترها مثل شماره تلفن، کد پستی و غیره استفاده کنید.
همچنین بخوانید: ۱۱ ابزار و برنامه توسعه رایگان مایکروسافت .
۱۴- برای فیلد های ضروری بهتر است به جای کاراکتر (*) از کلمه “ضروری” استفاده کنید
همه کاربران نمی دانند که کاراکتر (*) معنی ضروری بودن را می دهد، در مواقعی که تعداد فیلدهای ضروری کمتر از فیلدهای اختیاری است بهتر است از کلمه “ضروری” به جای کاراکتر (*) استفاده شود و برای بقیه فیلدهای ضروری چیزی نوشته نشود، همچنین این کار باعث می شود که فرم های خلوت تری داشته باشید.
۱۵- اطلاعات مربوط به هم را گروه بندی کنید
بهتر است به جای اینکه یک فرم طولانی و خسته کننده داشته باشیم، فیلدها را گروه بندی کنیم، با این کار کاربر بهتر فرم را پر می کند و در هنگام تکمیل آن احساس بهتری دارد چون فرم های شلوغ و دسته بندی نشده باعث سردرگمی کاربر می شود.
از خودتان سوال کنید!
فیلدهای اختیاری را حذف کنید و به روش های دیگر برای جمع آوری داده ها فکر کنید. همیشه از خود بپرسید که آیا این سوال می تواند به تعویق بیفتد و یا کاملا حذف شود.
ورود اطلاعات به طور فزاینده ای در حال اتوماتیک شدن است. به عنوان مثال، دستگاه های موبایل و پوشیدنی مقدار زیادی از اطلاعات را بدون آگاهی کاربر جمع آوری می کنند. فکر می کنم راه های دیگری نیز برای دریافت اطلاعات می توانید استفاده کنید از قبیل مکالمه، SMS، ایمیل، صدا، OCR، مکان یابی، اثر انگشت، بیومتریک و … .
کاربران را سرگرم کنید
زندگی کوتاه است. هیچ کس از تکمیل فرم استقبال گرم نمی کند. با کاربران مکالمه کنید، آنها را بخندانید و به تدریج درگیرشان کنید. انتظارش را نداشتید؟ نقش طراح این است که رضایت کاربر را در هنگام تکمیل فرم ها بالاتر ببرید، اگر این اتفاق بیفتد میزان تمایل به تکمیل فرم افزایش خواهد یافت. فقط مطمئن شوید که قوانینی که در بالا ذکر شده را نقض نکنید.
فیس بوک 15 ساله شد!
