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

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

چیزهای زیادی وجود دارد که می تواند اشتباه باشد.

برای ساختن فرم تماس کامل 5 قوانینی دارد

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

کنجکاو هستید که این قوانین چیست؟ پس به خواندن ادامه دهید.

قانون شماره 1: بر هم ترازی تمرکز کنید

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

ممکن است شکلی مانند این را در وب سایت BrainTraffic مشاهده کنید و فکر کنید: هومم ... اما آیا تکمیل آن کمی طولانی نیست؟

در form.png پر کنید

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

اگر شما می خواهید خود را اشکال مخاطبین استاندارد تراز را برآورده می کنند، کاری که باید انجام دهید در اینجا آمده است:

  • تراز چپ همه برچسب ها ، قسمتهای فرم و دکمه اصلی فراخوان برای عمل.
  • هرگز زمینه های مرتبط را به صورت افقی تراز نکنید. می توانید فرم را به صورت منطقی ساختار دهید ، اما هر س orال یا فیلد باید به صورت عمودی انباشته شود.
  • هر فیلد با سوالات چند گزینه ای (با کمتر از شش گزینه) باید در یک لیست عمودی از نقاط یا کادرهای چک نمایش داده شود ، نه در یک منوی کشویی.

قانون 2: همه زمینه های مربوطه را وارد کنید

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

مایکل آگارد ، بهینه ساز ارشد تبدیل برای Unbounce ، این کار را کرد ارائه در سال 2015 که به این موضوع پرداخته است. او و تیمش می خواستند بدانند که اگر این فرم تماس را کوتاه کنند چه اتفاقی می افتد:

مثال از فرم تماس court.png

همانطور که می بینید ، آنها زمینه های غیر ضروری خود را حذف کردند تا روند پر کردن فرم ساده شود. با این حال ، پس از پایان آزمایش ، آنها 14٪ کاهش در تبدیل را با فرم کوتاه تر پیدا کردند.

قانون # 3: زمینه ها را ساده کنید

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

در اینجا چند تکنیک که باید بدانید:

تسطیح
برای کاربران دسک تاپ و کسانی که دارای مشکلات دسترسی هستند ، مطمئن شوید که فرم تماس شما امکان تنظیم منطقی برگه را دارد.

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

زمینه های قالب بندی html.png

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

قانون # 4: از همه خارج شوید

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

بگذارید توضیح دهم: شما یک فرم تماس دارید که کاملاً ساده به نظر می رسد. کاربران شما بر اساس آنچه برچسب ها پیشنهاد می کند آن را پر می کنند و آنها روی دکمه ارسال کلیک می کنند. سپس این پیام قرمز وحشتناک را دریافت می کنند: "شما این کار را درست انجام ندادید! برگردید ، فرم را تصحیح کنید و دوباره ارسال کنید! " 

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

  • تمرکز خود را در این زمینه (به ویژه در تلفن همراه) ارائه دهید تا کاربران دقیقاً بدانند که فرم را از کجا پر می کنند.
  • اگر از ماسک های ورودی برای قالب بندی خودکار زمینه ها استفاده نمی کنید ، تمام الزامات قالب بندی را یادداشت کنید.
  • صریحاً مشخص کنید که فیلد "اختیاری" است (از کلمه استفاده کنید ، نه از ستاره قرمز).
  • به کاربران این گزینه را بدهید تا قسمت رمز عبور را هنگام ورود به آن نشان داده یا پنهان کنند.
  • به محض اینکه کاربر در یک زمینه مشغول شد ، پیام خطا را نمایش می دهد. برای انجام آن تا پایان صبر نکنید.

فرم wordpress.png خطا

قانون # 5: مشاوره را پنهان نکنید

متن صفحه به صورت تماس با این قرار است:

زمینه با tips.png

ببینید چگونه Target برچسب ها را در این زمینه قرار می دهد؟ در برخی از فرم های تماس ، این برچسب ها / نشانه ها به سادگی با کلیک کاربر بر روی یک قسمت از بین می روند. هدف این کار کمی متفاوت عمل می کند و برچسب را به بالای قسمت زمینه منتقل می کند (به "آدرس ایمیل" مراجعه کنید).

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

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

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

این برای این نکات است که امیدوارم آنها به شما کمک کنند فرم های ارتباطی بهتری ایجاد کنید.