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

آفلاین
user-avatar
ارسطو عباسی
13 خرداد 1398, خواندن در 7 دقیقه

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

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

در زیر می‌توانید با ۷ نکته در این رابطه آشنا شوید:

۱. در یک ستون بودن

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

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

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

۲. گروه بندی منطقی محتوا

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

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

۳. قرار دادن برچسب‌های محتوایی در بالای فرم

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

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

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

۴. سوالات زیادی نپرسید

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

همواره مطمئن باشید که فرم‌های تان را تا جای ممکن کوتاه نگه می‌دارید. در چنین فرم‌هایی می‌شود بیشترین تعداد مشارکت را دید.

۵. دکمه ارسال را واضح طراحی بکنید

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

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

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

۶. از نوع‌های ورودی مناسب استفاده بکنید

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

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

۷. داده‌ها را تا جای ممکن اعتبارسنجی بکنید

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

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

براساس یک آمار از Bymard Institue بیش از ۶۰ درصد فرم‌های امروزی در دنیای وب از اعتبارسنجی استفاده می‌کنند. شما نیز باید بخشی از این مقدار باشید.

در پایان

دو شکل محبوب از فرم‌ها که معمولا در بیشتر وبسایت‌ها دیده می‌شود، فرم ثبت‌نام/ورود و فرم تماس با ما است. مطمئن شوید که همواره فرم‌های‌تان بدرستی از نظر عملکرد کار می‌کند و بعد از آن سراغ دسترسی‌پذیری و میزان استفاده‌پذیری آن ها بروید. 

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

منبع

چه امتیازی به این مقاله می دید؟
خیلی بد
بد
متوسط
خوب
عالی

دیدگاه‌ها و پرسش‌ها

برای ارسال دیدگاه لازم است، ابتدا وارد سایت شوید.

در حال دریافت نظرات از سرور، لطفا منتظر بمانید

در حال دریافت نظرات از سرور، لطفا منتظر بمانید

آفلاین
user-avatar
ارسطو عباسی @arastoo
برنامه‌نویس و مدیر بخش تولید محتوا وبسایت راکت - وبلاگ شخصی: https://arastoo.dev
دنبال کردن

گفتگو‌ برنامه نویسان

بخشی برای حل مشکلات برنامه‌نویسی و مباحث پیرامون آن وارد شو