بهترین تکنیک‌ها برای طراحی فرم

گردآوری و تالیف : ارسطو عباسی
تاریخ انتشار : 08 بهمن 1396
دسته بندی ها : طراحی وب

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

یک فرم در حقیقت سندی الکترونیکی است که به صورت ساختاری شامل یکسری ورودی‌های مربوط به همدیگر می‌شوند.

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

بعضی وقت ها ممکن است تاثیرات ناشی از تغییر یک پیغام ساده از دکمه CTA باشد. Jared M. Spool مقاله با نام The $300 Million Button نوشته که در آن از دکمه‌ای صحبت می‌کند که باعث شد یک تجارت یک وبسایت با موضوع تجارت الکترونیکی ۳۰۰ میلیون دلار افزایش پیدا کند.

در بخشی از مقاله می‌گوید :

«تعداد خریداران وبسایت 45 درصد افزایش پیدا کرد. نتیجه خریدهای بیشتر در ماه اول ۱۵ میلیون دلار بود. برای اولین سال، ۳۰۰ میلیون دلار افزایش در انجام بود.»

کاربران معمولا به سه دلیل فرم‌ها را ترک می‌کنند :

  • با خطاهایی از ورودی‌های مختلف روبرو می‌شوند. «مثلا، فیلد‌های ناسازگار»
  • آن ها نمی‌خواهند ثبت نام کنند.
  • آن ها نمی‌خواهند اطلاعات نالازم را بدهند.

۱۰ قاعده طلایی

۱. آن را کوتاه نگه دار

حذف کردن فیلدهای نالازم وقت بسیاری می‌خواهد اما این کار نرخ مبادلات را به شدت افزایش می‌دهد.

۲. برچسب‌ها و فیلد‌های مرتبط را گروه‌بندی کنید

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

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

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

۳. نمایش فیلد‌ها در یک ستون جداگانه

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

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

‘Option A’  و  ‘Option B’

اگر شما دو گزینه A و B داشته باشید، کدام مورد را انتخاب می کنید؟

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

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

۴. از نوبت دهی منطقی استفاده کنید

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

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

این درست به همین دلیل است که وبسایت های معروفی مانند فیسبوک و آمازون از یک قالب برای فرم ثبت‌نام‌شان استفاده می کنند:

۵. اجتناب کردن از متن داخل ورودی ها

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

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

۶. فیلدها را با نوع و اندازه مقدار ورودی مطابقت دهید

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

۷. بین فرم های انتخابی و اجباری تمایز قائل شوید

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

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

۸. هر ورودی یا قالب بندی ضروری را توضیح دهید

اینکه به کاربر بگویید چه داده ای باید در این جا وارد کند بسیار مهم است. این کار باعث می شود که تعداد خطاها کمتر شود و در نهایت زمان پر کردن آن ها نیز کمتر می شود.

۹. از دکمه های «تمییز کردن» و «Reset» خودداری کنید

خوشبختانه این یک رویکرد مرسوم و محبوب در وبسایت ها نیست اما شما می توانید آن را هم اکنون نیز در برخی از وبسایت ها مشاهده کنید.

۱۰. خطاهای درست و مشخص را نمایش دهید

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

در پایان

باید نهایت سعی خود را بکنید تا فرم ها را قابل استفاده نمایید. با خواندن و انتشار این مقاله مطمئنا هم خودتان و هم دوستان‌تان به سوالاتی دست پیدا خواهید کرد.

منبع

مقالات پیشنهادی

30 نمونه wireframe زیبا و آماده برای طراحی وب و تلفن همراه

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

چگونه برنده جایزه طراحی وب شویم - برترین جوایز وب برای بهترین طراحان وب

اگر شما یک آژانس طراحی وب راه اندازی کرده اید، برنده شدن در جایزه ای مرتبط با کار شما، راهی مناسب جهت تشویق مشتریان و در نتیجه، دستیابی به مخاطبان بیش...

۱۰ مورد از بهترین ابزارهای طراحی وب مهر-آبان ۹۷

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

7 نکته برای طراحی بهتر فرم‌های تماس (همراه با مثال)

برای بهتر کردن فرم‌های تماس باما اولین نکته‌ای که باید در نظر داشته باشید، استفاده‌پذیری است. هدف یک فرم کاملا واضح است: شما می‌خواهید که از کاربران ی...