اعتبارسنجی فرم و معیارهای آن

1398/03/22
در این بلاگ معیارهای یک اعتبارسنجی موفق و تاثیرات آن روی کسب و کار بررسی می‌شود.  
Form validation یا اعتبارسنجی فرم به فرآیند بررسی صحت اطلاعات وارد شده توسط کاربر در فرم گفته می‌شود. در این فرآیند اگر هنگام پر کردن فیلدهای فرم، خطایی صورت گیرد، به کاربر اطلاع داده می‌شود. برای مثال اگر فیلد ایمیل در فرم وجود داشته باشد، بررسی می‌شود که ورودی کاربر حتما در فرمت ایمیل باشد، یا اینکه قبلا با آن ایمیل ثبت نامی صورت نگرفته باشد. 

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

اهمیت اعتبارسنجی فرم

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

در اکثر موارد اعتبارسنجی فرم‌ها مثل بدترین فروشندگان عمل می‌کنند. فرم‌هایی با خطاهایی مثل "Database error!" یا "Wrong e-mail!"، معمولا منجر به بالا رفتن نرخ ریزش و کم شدن تعداد کاربران سایت خواهند شد.
ارتباط ضعیف منجر به نتایج ضعیف در کسب و کار خواهد شد. تحقیقات نشان داده است که استفاده از فرم‌های با اعتبارسنجی برخط و با طراحی خوب می‌تواند تاثیر بسیار زیادی در نتیجه داشته باشد:
  • 22% افزایش موفقیت
  • 22% کاهش خطا
  • 31% افزایش رضایت
  • 42% کاهش زمان مورد نیاز برای پر کردن فرم
طبق این نتایج اهمیت داشتن اعتبارسنجی مناسب در فرم‌ها بسیار زیاد است و تاثیر زیادی در کسب و کار خواهد داشت. بنابراین نباید نادیده گرفته شود.

معیارهای اعتبارسنجی مناسب

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

زمان مناسب

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

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

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

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

1.PNG


مکان مناسب

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

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

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

2.PNG

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

3.PNG

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

4.PNG

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

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

رنگ مناسب

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

به نمونه‌های زیر توجه کنید. پیام‌های موفقیت در فرم توئیتر با رنگ سبز و یک تیک کوچک کنار پیام ظاهر شده‌اند که برای کاربر بسیار شفاف است.

همچنین به فیلد رمز عبور توجه کنید که امنیت بالای آن با رنگ سبز تایید شده است.
 
5.PNG

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

6.PNG

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

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

زبان گویا

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

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

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

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

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

7.PNG
 
User Avatar
نویسنده :
امتیاز شما :

دیدگاه کاربران



ارسال پیام



 Security code