طراحی ux با استفاده از فرم اعتبار سنجی

در این مقاله توضیح می دهیم، که چگونه طراحی ux، از مهم ترین اجزای وب و برنامه های کاربردی تلفن همراه می باشد. آموزش‌های گام‌به‌گام، و مثال‌هایی از مهم‌ترین خدمات در دنیای واقعی، به شما در فعالیت‌های روزمره  شما کمک خواهد کرد. عبارت “اعتبار سنجی” ممکن است به کمی شفاف‌سازی نیاز داشته باشد، در صورتی که اطلاعات ارایه‌شده توسط یک کاربر درست باشد، اعتبار فرم یک فرآیند تکنیکی محسوب می شود. اشکال یا نکات نشان می‌دهد، که کاربر خطایی مرتکب شده‌است، یا اطمینان می‌دهد که داده‌های ارایه‌شده صحیح هستند. برای مثال، اگر یک کاربر اطلاعاتی مانند آدرس پست الکترونیکی وارد فیلد کند، فرم باید چک شود که متن ارایه‌شده در فرمت مناسب باشد، ( user@example.com ) و همچنین آدرس ایمیل موجود قبلا ثبت نشده باشد.

form-validation

به طور کلی ۲ نوع اعتبار سنجی وجود دارد:

  1. پس از ارائه اعتبارسنجی، هنگامی که کاربر تمام داده‌ها را فراهم می‌کند، و فرم را ارائه می‌کند. معمولاً با زدن دکمه اطلاعات به سرور نیز فرستاده می‌شود، و اعتبارسنجی می‌شوند. پاسخ سیستم به کامپیوتر کاربر برگردانده می‌شود و به عنوان یک پیام تایید مجسم می‌شود (همه چیز خوب پیش می‌رود! ) یا ممکن است،مجموعه‌ای از پیام‌های خطا به کامپیوتر کاربر باز گرداند.
  2. اعتبار سنجی درون خطی، پیغام اعتبار سنجی فورا  بعد از این که  کاربر داده ها را در فیلد مورد نظر وارد می کند، برای تشکیل فرم ها، نشان داده می‌شود. معمولا اطلاعات در کنار فیلدها نشان داده می شود، و کاربر را تشویق می کند تا اقدام فوری انجام دهد.

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

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

  • ثبت نام/ ورود به سایت
  • انواع خرید و فروش در سبد خرید
  • فرم خبرنامه

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

اجتناب از سردرگمی

به طور کلی چهار عنصر مهم هستند که اعتبار فرم خوب شامل موارد زیر است:

  • زمان مناسب برای اطلاع دادن درباره مشکلات / موفقیت ها
  • محل مناسب برای پیغام‌های اعتبار سنجی
  • رنگ مناسب
  • زبان واضح و روان

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

زمان مناسب

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

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

twiter form validation

محل مناسب

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

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

right place

رنگ مناسب

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

زبان واضح و روان

در نهایت زبان که می تواند سخت ترین قسمت فرم اعتبار سنجی باشد، یک فرم اعتبار سنجی باید به طور واضح موارد زیر را بیان کند:

  • چه اتفاقی افتاد؟
  • مرحله بعدی که کاربر باید در آن موفق باشد، چیست؟

وهمچنین، همیشه باید از استفاده از اصطلاحات فنی اجتناب کرد. قوانین بسیار ساده است، اما نادیده گرفتن آن ها نیز می تواند ساده باشد. یک خطای معمول ممکن است بیان کند، که “ایمیل نامعتبر است ” بدون اینکه به کاربر بگوید چرا نامعتبر است. این موضوع نه تنها باعث سردرگمی کاربران نیز می شود، بلکه ریسک خطرناکی برایذ کسب و کار شما نیز دارد. البته، باز هم توییتر نمونه‌ای از کاربرد زبان واضح و روان است. وقتی آن‌ها می‌گویند که آدرس ایمیل تان خوب است، از یک پیام تایید برای گفتن “ما ایمیل شما را دریافت می‌کنیم” استفاده می‌کنند. اگر ایمیل قبلاً ثبت شده‌ باشد، آن‌ها گزینه ورود به سیستم را به شما می‌دهند و یا گذرواژه شما را بازیابی می‌کنند. و اگر شما برای ایجاد یک گذرواژه امن کامل مدیریت کنید، Twitter به شما رمز عبور کامل را خواهد گفت. 

twiter language

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

0 دیدگاه برای “طراحی ux با استفاده از فرم اعتبار سنجی”

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*