۱۵ نکته برای طراحی ux بهتر فرم ها در وب یا App

اشتباهات رایج در طراحی فرم ها و چگونگی رفع آنها

0
145
ایجاد ux بهتر برای طراحی بهتر فرم ها در وب یا App

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

۱- فرم ها بهتر است یک ستونه باشند

فرم های بهتر است یک ستونه باشند
ستون های چندگانه موجب می شود حواس کاربران پرت شود.

۲- Label ها بالای هر Text Input باشند نه مقابل آن ها

Label ها بالای هر Text Input باشند
کاربران inputهایی که برچسب آن ها بالا باشد را بهتر از آن هایی که در روبرو باشند تکمیل می کنند، در ضمن در موبایل این مورد خیلی بهتر نمایش داده می شود.

 

۳- هر input را با Label آن گروه بندی کنید

Label و input ها را در کنار هم قرار دهید و اطمینان حاصل کنید که بین زمینه ها به اندازه کافی فاصله وجود دارد، بنابراین کاربران آن ها را با input بالایی یا پایینی اشتباه نمی گیرند.

 

۴- برای کلمات انگلیسی به طور کامل از حروف بزرگ استفاده نکنید

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

۵- در لیست Drop Down تعداد گزینه ها اگر کمتر از ۶ عدد بودند همه آن ها را نشان دهید

تعداد گزینه ها اگر بیشتر از 6 عدد بودند همه آنها را نشان دهید
قرار دادن گزینه ها در Drop Down نیاز به دو کلیک دارد و گزینه ها را پنهان می کند. اگر بیش از ۵ گزینه وجود داشته باشد، از یک Drop Down استفاده کنید. اگر بیش از ۲۵ گزینه وجود دارد، جستجوی متنی را در داخل لیست کشویی قرار دهید.

۶- از استفاده Placeholder به جای Label اجتناب کنید

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

 

۷- Checkbox ها و Radio Button ها را به صورت ستونی در زیر هم قرار دهید نه در یک سطر

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

 

۸- Call To Action ها را دقیق توصیف کنید

Call To Action ها را دقیق توصیف کنید
یک Call To Action باید دقیقا گویای این باشد که بعد از آن کاربر چه عملی را انجام دهد.

 

۹- به طور دقیق و واضح Erorr ها را در زیر input ها نشان دهید

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

۱۰- استفاده از اعتبارسنجی inline پس از اینکه کاربر فیلد را پر می کند (مگر اینکه در طی فرآیند به آن ها کمک کند)

استفاده از اعتبارسنجی inline پس از اینکه کاربر فیلد را پر می کند (مگر اینکه در طی فرایند به آنها کمک کند)
از اعتبارسنجی inline هنگامی که کاربر تایپ می کند استفاده نکنید، مگر اینکه به او کمک کند، مانند زمانی که در مورد ایجاد یک رمز عبور، نام کاربری یا پیام با تعداد کاراکتر وی را راهنمایی می کنید.

 

۱۱- محتوای پیام های متنی کمکی (Helper Text) را مخفی نکنید

محتوای پیام های متنی کمکی را مخفی نکنید.
محتوای پیام های متنی (Helper Text) را هرکجا که امکان دارد نمایش دهید، برای اینکه فرم شما شلوغ نشود می توانید متن کمکی را وقتی کاربر روی input فوکوس می کند در زیر یا بالای input نمایش دهید.

 

۱۲- دکمه ها را اولویت بندی کنید و آن هایی که مهم تر هستند را متمایز کنید

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

 

۱۳- طول فیلدهای input را به اندازه کافی در نظر بگیرید

طول فیلدهای input را به اندازه کافی در نظر بگیرید.
طول فیلد input گویای طول پاسخ است، این مورد را برای فیلدهای دارای تعداد مشخصی از کاراکترها مثل شماره تلفن، کد پستی و غیره استفاده کنید.

 

۱۴- برای فیلد های ضروری بهتر است به جای کاراکتر (*) از کلمه “ضروری” استفاده کنید

برای فیلد های ضروری بهتر است به جای * از کلمه "ضروری" استفاده کنید
همه کاربران نمی دانند که کاراکتر (*) معنی ضروری بودن را می دهد، در مواقعی که تعداد فیلدهای ضروری کمتر از فیلدهای اختیاری است بهتر است از کلمه “ضروری” به جای کاراکتر (*) استفاده شود و برای بقیه فیلدهای ضروری چیزی نوشته نشود، همچنین این کار باعث می شود که فرم های خلوت تری داشته باشید.

 

۱۵- اطلاعات مربوط به هم را گروه بندی کنید

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

 

از خودتان سوال کنید!

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

ورود اطلاعات به طور فزاینده ای در حال اتوماتیک شدن است. به عنوان مثال، دستگاه های موبایل و پوشیدنی مقدار زیادی از اطلاعات را بدون آگاهی کاربر جمع آوری می کنند. فکر می کنم راه های دیگری نیز برای دریافت اطلاعات می توانید استفاده کنید از قبیل مکالمه، SMS، ایمیل، صدا، OCR، مکان یابی، اثر انگشت، بیومتریک و … .

حتما بخوانید:  کمپ تابستانی برنامه نویسی، شهریور و مهر ۹۶

کاربران را سرگرم کنید

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

افزودن دیدگاه