فهرست مطالب
از سردرگمی به تبدیل: 8 راه برای بهبود طراحی فرم وب‌سایت شما
مدتی پیش، ما مقاله‌ای درباره ویژگی‌های طراحی خوب وب‌سایت منتشر کردیم. این مقاله به بررسی کیفیت‌های برتر طراحی وب‌سایت پرداخت و خواندن آن را به شدت توصیه می‌کنیم. اما اگر به دنبال یک خلاصه از آن هستید، اینجا را بخوانید:
استرس را از کاربران خود دور کنید!
کاهش استرس و سردرگمی کاربران در حین جستجو در یک وب‌سایت، کلید نگه‌داشتن آن‌ها برای مدت طولانی‌تر و متقاعد کردنشان به انجام کاری است که شما درخواست کرده‌اید. استرس ناشی از وب‌سایت می‌تواند به روش‌های مختلفی بروز کند و مقاله قبلی ما به بسیاری از آن عوامل اشاره کرد: رنگ‌های متضاد، تعداد زیاد فراخوانی به عمل، ناوبری پیچیده و بیشتر از این‌ها. اما این لیست جامع نبوده و امروز به یکی از حوزه‌های دیگری که ممکن است بر نرخ‌های پایین حفظ کاربران تاثیر بگذارد می‌پردازیم: فرم‌های شما.
فرم‌های وب‌سایت می‌توانند برای امور مختلفی مورد استفاده قرار گیرند! ایجاد یک حساب کاربری، ثبت‌نام برای خبرنامه، یا ساخت یک لیست پخش موسیقی دلخواه برای خود و حیوان خانگی‌تان. چه این امور اصلی باشند و چه فرعی، در وب‌سایت شما احتمالاً حداقل یک فرم وجود دارد. اما صرف وجود فرم، به هیچ وجه به این معنا نیست که کاربران آن را پر خواهند کرد، و این موضوع به خودی خود تمام هدف را زیر سوال می‌برد، آیا نه؟
اگر فرم شما استرس‌آور، گیج‌کننده، غیر شهودی یا حتی کسل‌کننده باشد، احتمال اینکه کاربر شما برای تکمیل آن باقی بماند به شدت کاهش می‌یابد. بیایید به 8 راهی بپردازیم که می‌توانید طراحی فرم وب‌سایت خود را به گونه‌ای تغییر دهید که به نفع شما عمل کند:
1. فرم را کوتاه و مختصر نگه‌دارید
هر چه فرم شما طولانی‌تر باشد، شانس اینکه کاربران برای تکمیل آن باقی بمانند کمتر می‌شود. در این نمودار از الواس، مشاهده می‌کنید که نرخ تبدیل فرم به سرعت با افزایش تعداد فیلدهای آن کاهش می‌یابد:
هر بار که یک فیلد جدید به فرم خود اضافه می‌کنید، از خود بپرسید:
- آیا این فیلد ضروری است؟
- آیا این فرم بهترین نقطه برای جمع‌آوری این اطلاعات است؟
اگر پاسخ شما به هر یک از این سوالات منفی است، ممکن است آن فیلد نباید در فرم شما وجود داشته باشد. مشکلات فرم‌های طولانی، به‌ویژه برای کاربران موبایل که سهم بیشتری از ترافیک وب را به خود اختصاص می‌دهند، بسیار جدی است. کسانی وجود دارند که با اشتیاق تمام از طریق یک فرم بسیار طولانی عبور کنند! اما آیا آن‌ها بخش عمده مخاطبان هدف شما هستند؟ چند نفر دیگر با دیدن آن لیست طولانی از وب‌سایت شما خارج می‌شوند؟
اگر نرخ تبدیل برای شما از پر کردن دقیق تمام فیلدها مهم‌تر است، پس فیلدهای غیرضروری را در طراحی فرم وب‌سایت خود فدای افزایش نرخ تبدیل کنید.
2. اگر نمی‌توانید آن را کوتاه کنید، قابل هضم کنید
گاهی اوقات، شما نمی‌توانید فرم خود را به 7 فیلد یا کمتر کاهش دهید. شاید این یک برنامه خاص باشد یا روند ثبت‌نامی پیچیده. در چنین شرایطی، چه می‌توانیم انجام دهیم تا پر کردن آن برای کاربران کمتر استرس‌زا باشد؟
این‌جاست که چند ترفند کارا برای پر کردن فرم به کمک می‌آید!
- منطق شرطی: آیا برخی فیلدها به پر کردن دیگر فیلدها نیاز دارند؟ آیا کاربر باید یک دکمه رادیویی خاص را انتخاب کند تا فیلدهای بعدی به نمایش درآیند؟ آن فیلدها را پنهان کنید و فقط زمانی که آن دکمه انتخاب شد، آن‌ها را نمایش دهید! کاربرانی که فیلد برای آن‌ها بی‌معنا است، نیاز به دانستن وجود آن ندارند.
- فرم‌های چند مرحله‌ای: این روش به ویژه برای فرم‌های بزرگ که پر کردن آن‌ها شبیه به پر کردن یک درخواست تحصیلی است، بسیار کارآمد است. آیا می‌توانید آن‌ها را به بخش‌های کوچک‌تر تقسیم کنید؟ این کار را انجام دهید و هر بخش را در یک صفحه مجزا قرار دهید. تقسیم این فرم‌ها به قسمت‌های قابل هضم، به تسهیل در پر کردن آن‌ها کمک می‌کند و محتوای فرم را کمتر گیج‌کننده می‌کند. یکی از نمونه‌های موردعلاقه من، چنین صفحاتی است که در برنامه SHIP (خدمات و مسکن در استان) وجود دارد. فرم بسیار بزرگی دارد، اما در صفحات مجزا، احساس بسیار قابل مدیریتی به کاربر می‌دهد. علاوه بر این، یک نوار پیشرفت در بالای فیلدها وجود دارد که به کاربران اطلاع می‌دهد در چه مرحله‌ای از روند قرار دارند.
زمان تخمینی برای تکمیل: اطلاع‌رسانی به کاربران درباره مدت زمانی که باید برای فرم شما صرف کنند، به آن‌ها در اتخاذ تصمیمات هوشمند کمک خواهد کرد. این همچنین به کاهش نرخ رها کردن فرم کمک می‌کند؛ چراکه کاربران قبل از تکمیل فرم آن را ترک نمی‌کنند. بازگشت به فرم درخواست SHIP، می‌توانید زمان تخمینی برای تکمیل را در بالای فرم مشاهده کنید: 30 دقیقه!
(بله، این طولانی است!) تطبیق طراحی فرم وب‌سایت شما به گونه‌ای که به کاربران اطلاع دهد که پر کردن فرم زمان‌بر است، ممکن است نامحسوس به نظر برسد، اما این انتخاب به مراتب بهتر از این است که کاربر شما در نیمه راه فرم از زمان خود خسته شود و با ناامیدی خارج شود و هرگز برنگردد.
(اگر فرم شما آنقدر طولانی است، همچنین پیشنهاد خوبی است که به کاربران راهی برای ذخیره پیشرفت خود بدهید و سپس بعداً برگردند.)
فرم‌های بهینه‌شده زمانی مؤثرتر هستند که با صفحات فرود بهینه‌شده برای تبدیل‌ها که بر اساس نیت کاربران طراحی شده‌اند، ترکیب شوند.
3. از پرکردن خودکار (به‌درستی) استفاده کنید
گاهی اوقات می‌توانید به کاربران این امکان را بدهید که فیلدهای فرم را به راحتی پر کنند. فرم‌های تماس، فرم‌های صفحات فرود و حتی ثبت‌نام برای خبرنامه معمولاً دارای فیلدهای مشابهی چون نام، ایمیل، شماره‌تلفن و سایر موارد هستند. اگر فرم شما این فیلدها را داراست، اجازه دهید که پرکردن خودکار مرورگر این کار را برای کاربر انجام دهد.
فقط مطمئن شوید که پرکردن خودکار اطلاعاتی را دریافت می‌کند که شما انتظار دارید. اگر انتظار دارید یک کد پستی دریافت کنید اما پرکردن خودکار به جای آن نام کشور را اضافه کند، حالا کاربر شما باید اطلاعات نادرست را حذف کند و سپس فیلد را به درستی پر کند!
4. اجازه دهید فرمت‌های متعدد وجود داشته باشد.
5. استفاده از بازخورد خطای شهودی
کاربران ممکن است به طور اشتباه فرم شما را پر کنند. این مشکل به ویژه در فرم‌های طولانی بیشتر مشاهده می‌شود، اما حتی در فرم‌های کوتاه نیز امکان دارد که کاربر یکی از فیلدهای ضروری را فراموش کند. وقتی کاربری به اشتباه فرم را پر می‌کند، بسیار مهم است که به طور واضح به او بگویید اشکال کجاست. پیام‌های خطای دقیق که در بالای فرم و همچنین پایین آن نمایش داده می‌شوند، همراه با هایلایت کردن فیلد اشتباه و اسکرول به سمت آن، همگی ابزارهایی هستند که می‌توانند کاربر را به راحتی به بخش‌های نیازمند اصلاح هدایت کنند.
6. نگهداری برچسب‌ها واضح (حتی پس از ورود اطلاعات!)
ما هم در این زمینه مقصر هستیم. استفاده از مکان‌نماها (placeholders) به جای برچسب‌ها داخل فیلدها برای حفظ تمیزی طراحی فرم‌های وب، بسیار وسوسه‌انگیز است!
اما مشکل زمانی آغاز می‌شود که کاربران شروع به پر کردن فیلدها می‌کنند. اگر برچسب قابل مشاهده نباشد، علامت مشخصی وجود نخواهد داشت که نشان دهد آن فیلد چه اطلاعاتی را طلب می‌کند. شما ممکن است به این فکر کنید که کاربر به راحتی می‌تواند آنچه را که 5 ثانیه پیش وارد کرده به یاد آورد، اما اگر گزینه پر شدن خودکار (autofill) فعال باشد، چه؟ در این صورت، آن فیلدها اکنون پر شده‌اند و کاربران مجبورند یا متن داخل آن را پاک کنند تا متوجه شوند که آن فیلد برای چه بوده، یا صرفا امیدوار باشند که پر شدن خودکار به درستی انجام شده باشد.
اگر همچنان می‌خواهید از برچسب‌ها به عنوان مکان‌نما در داخل فیلدهای فرم استفاده کنید، ایده خوبی است که هنگامی که فیلد پر می‌شود، آن‌ها را با برچسب‌های واقعی جایگزین کنید. این یک اصل کلیدی در طراحی فرم‌های متریال (material form design) است.
7. استفاده از نوع فیلد مناسب برای کار
در صورتی که تعداد گزینه‌ها محدود است، استفاده از یک فیلد انتخابی (select field) یا دکمه‌های رادیویی (radio buttons) می‌تواند مؤثر باشد. اگر گزینه‌ها در یک دامنه قرار دارند، بهتر است از یک اسلایدر (slider) بهره ببرید. از ورودی‌های متنی (text inputs) برای فیلدهایی که واقعاً نیاز نیست، اجتناب کنید تا وقت و تلاش کاربران را صرفه‌جویی کنید. به‌ویژه اینکه کاربران موبایل شما از این نکته قدردانی خواهند کرد!
8. به کاربران دلیلی برای تکمیل فرم بدهید!
در هر بخشی از وب‌سایت شما، یک سؤال اساسی وجود دارد: «چه چیزی برای من وجود دارد؟»
گاهی پاسخ به این سؤال ساده است. شاید کاربران فرم را پر کنند تا به یک منبع خاص دسترسی پیدا کنند یا به مشاوره رایگان دست یابند. اما اگر جواب این پرسش به راحتی قابل درک نباشد، کاربران ممکن است تصمیم بگیرند که اصلاً زحمت پر کردن فرم شما را به خود ندهند.
این مشکل به ویژه در فرم‌های بازبینی بیشتر نمود پیدا می‌کند. طراحی فرم وب‌سایت خود را طوری پیاده‌سازی کنید که به وضوح مشخص کند کاربران در عوض وقتی که صرف می‌کنند، چه چیزی به دست خواهند آورد. شاید شما بتوانید یک کوپن 5% تخفیف اضافه برای آن‌هایی که وقت می‌گذارند و یک بازبینی پر می‌کنند، ارائه دهید؟
جمع‌بندی
با رعایت این نکات در طراحی فرم وب‌سایت خود، می‌توانید نرخ تبدیل (conversion rates) خود را افزایش دهید و استرس و سردرگمی‌ای که ممکن است کاربران شما هنگام پر کردن فرم احساس کنند را کاهش دهید. هرچه تجربه کاربری بهتر و لذت‌بخش‌تر باشد، برای همه افراد درگیر مفیدتر خواهد بود!
درباره نویسنده
من یک طراح و برنامه‌نویس با نگرش «می‌توانم» و نگرشی موسیقایی برای هر حالتی هستم. طراحی خوب شبیه به موسیقی است: احساسات مردم را به حرکت درمی‌آورد. اگر در ابتدا موفق نشدید، دوباره با صدای متفاوتی تلاش کنید.
بیشتر بخوانید
بیشتر پست‌ها توسط جولی نوشته شده‌اند.
پست قبلی
10 ویژگی برتر یک طراحی وب‌سایت خوب
پست بعدی
چگونه بهترین شرکت طراحی وب‌سایت را انتخاب کنیم و از تله‌ها اجتناب کنیم
پرسش‌های متداول
چگونه می‌توان طراحی فرم وب‌سایت را بهبود داد؟
با استفاده از ترفندهای مختلف مانند کاهش تعداد فیلدها، استفاده از منطق شرطی و فرم‌های چند مرحله‌ای.
چرا طراحی فرم وب‌سایت مهم است؟
چون فرم‌ها بخش مهمی از تجربه کاربری هستند و می‌توانند تأثیر زیادی بر نرخ تبدیل داشته باشند.
چگونه می‌توان نرخ رها کردن فرم را کاهش داد؟
با ارائه زمان تخمینی برای تکمیل و استفاده از پرکردن خودکار.
منبع: ankitdesigns.com