طراحی محصول گرافیک گرافیک رابط کاربری هنرهای تجسمی

طراحی فرم چگونه به طراحی بهتر تجربه کاربری (UX) کمک می‌کند

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

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

فرم‌هایی که در چند ستون طراحی شوند، برای حرکت عمودی چشم کاربر مزاحمت ایجاد می‌کنند.

1001boom-1-xhzxetnauwoaejmlpbp0bw

برچسب‌ها (labels) باید بالای اجزای فرم قرار بگیرند

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

طراحی فرم برای طراحی بهتر محصولات دیجیتال

همچنین، جایگیری برچسب‌ها در بالای اجزای فرم، در موبایل هم بهتر به نمایش در خواهد آمد.

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

برچسب‌ها و فیلد ورودی‌شان را کنار هم قرار دهید

برچسب و فیلد ورودی مربوط به آن را نزدیک به هم قرار دهید و مطمئن شوید که بین فیلدها فاصله کافی تدارک دیده شده باشد، تا کاربرها گیج نشوند.

1001boom-1-obwyjb54ncwy3sopfm2weg

از کلمات انگلیسی که با حروف بزرگ تایپ شده‌اند بپرهیزید

اگر فرم انگلیسی طراخی می‌کنید از بزرگ نوشتن تمام حروف خودداری کنید. این کار، خواندن و پوییدن را دشوارتر می‌کند.

1001boom-1-w6nzof5pzsha6fowu3ytrw

اگر کمتر از ۶ گزینه انتخابی دارید، همه گزینه‌ها را نشان دهید

جای دادن گزینه‌ها در یک منوی پایین افتادنی، نیاز به دریافت ۲ کلیک از ناحیه کاربر دارد، از طرفی گزینه‌ها هم از دیده پنهانند.

1001boom-1-lj0jhtq5_k1u23fl9xtnma

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

از جایبان (placeholder) به جای برچسب (label) استفاده نکنید

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

1001boom-1-xvunjwhtqhj3wl8apj9lhq

چک‌باکس‌ها و دکمه‌های رادیویی را زیر یکدیگر قرار دهید

چیدن چک باکس‌ها (گزینه‌های چند انتخابی) و دکمه‌های رادیویی (گزینه‌های تک انتخابی) در زیر یکدیگر، کمک خواهد کرد تا سریع‌تر پوییده شوند.

1001boom-1-vlqtezp8orh24fooksepbq

فراخوان‌ها (CTAs) را توصیفی کنید

یک فراخوان، باید معنی و مفهوم داشته و مقصودش مشخص باشد.

1001boom-1-x5pd-ip-z4mf5tqznju2yw

خطاها را درون فرم مشخص نمایید

به کاربرتان نشان دهید که کجای فرم و به چه علتی خطا رخ داده است.

1001boom-1-xeju91mpulublefgbiqvhw

پس از تکمیل هر فیلد توسط کاربر اعتبارسنجی انجام دهید

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

1001boom-1-ivqg8ovqojtjx1tl6ymr0w

متن‌های کمکی اصل کاری را مخفی نکنید

آنجا که امکانپذیر است، متن‌های کمکی اصل کاری را در معرض دید قرار دهید و متون پیچیده و مفصل‌تر را در کنار فیلد، هنگامی که روی فیلد کلیک شده است نمایان کنید.

1001boom-1-ba2spvjzq7a9blbnfcqslg

اقدامات اصلی را از فرعی‌ها مشخص کنید

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

1001boom-1-pvvs04by3rytnfdirjpbda

از طول فیلد بهره ببرید

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

1001boom-1-3rojyzcj68dm7badrowuxg

علامت * را نادیده بگیرید، در عوض فیلدهای اختیاری را مشخص کنید

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

1001boom-1-rinfovaxtchvaq29n-6ipq

اطلاعات مرتبط را دسته بندی کنید

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

1001boom-1-nmemiuw7csu9uvtb9bibtg

چه چیز و چرا بپرسیم؟

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

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

به آن جذابیت ببخشید

زندگی کوتاه است، و هیچکس دوست ندارد فرم پر کند! پس خودمانی و بامزه باشید و کاربرها را کم‌کم درگیر کنید. کارهای دور از انتظار انجام دهید.

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

در نهایت یادتان نرود که قوانینی که در بالا به آنها اشاره شد را نباید در روند طراحی فرم نادیده بگیرید.

14

نظر بدهید

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

[انصراف]