راهکار های طراحی فرم برای وب سایت

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

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

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

10 خطای طراحی فرم سایت و روش های آسان برای رفع آن ها

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

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

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

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

1. طراحی فرم های طولانی سایت

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

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

با حذف این فرم ورود، شرکت با افزایش درآمد 12 میلیون تومانی روبرو شد. بهترین چیز درباره آنچه Expedia کشف کرد این بود که رشته مورد نظر برای خرید اصلاً مورد نیاز نبود، حتی اجباری هم نبود. اما آنجا بود و کاربران از آن استقبال نکردند.

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

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

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

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

همچنین بهتر است یک نوار پیشرفت قرار دهید تا به کاربران نشان دهد که در چه مرحله ای قرار دارند و چقدر پیشرفت کرده اند.

2. فیلد های ورودی با نظم نامناسب

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

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

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

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

3. فیلد های ورودی مبهم

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

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

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

4. عدم رسیدگی یا validation

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

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

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

5. ترکیب شدن کنترل های ورودی

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

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

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

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

6. فیلد تمرکزی وجود ندارد

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

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

7. کاربران باید تمام کار های سنگین را انجام دهند

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

گزارشی در مورد تبدیل فرم در سال 2015 منتشر کرد. در این گزارش کمپانی Formstack دریافتند که به سادگی با اجرای تکمیل خودکار فرم، تبدیل به 189٪ رسیده است. بسیاری از ویژگی های رایجی که می توانید در آن ها تکمیل خودکار را قرار دهید، شامل مواردی مانند آدرس ایمیل، نام یا شماره تلفن است. تکمیل خودکار در طراحی فرم سایت نیز بدون خطر نیست. امنیت و ایمنی داده ها دو نگرانی عمده هستند بنابراین قطعاً این کار را باید درست انجام دهید.

8. خطا های نا شناخته

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

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

9. طراحی دکمه نا مرتب

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

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

دکمه اصلی تمایل به کنترل برای ارسال اطلاعات یا انجام یک کار است، در حالی که دکمه ثانویه مربوط به پشتیبانی است. فرم ورود به سیستم را برای هر پلتفرمی در نظر بگیرید. “ارسال” و “لغو” را خواهید دید. جدا از میکروکپی، برای جلوگیری از سردرگمی و ناامیدی کاربران، هر دو دکمه به تمایز بصری نیاز دارند.

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

10. کپی سریع

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

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

Jessica Enders

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

منبع: justinmind.com