چک لیست طراحی فرم های احراز هویت یعنی تمام مواردی که یک طراحی UI ,UX در هنگام طراحی این فرم هباید رعایت کند تا یک خروجی بهینه و با کارایی بالا تحویل دهد.
فرم های احراز هویت شامل؛ فرم ثبت نام، فرم ورود به سیستم، فرم بازیابی رمز ورود و فرم تایید کد ارسال شده به موبایل یا ایمیل که جزو مهمترین اجزای هر وب‌سایت یا اپلیکیشن هستند که به طور مستقیم بر تجربه کاربری (UX) تاثیر می‌گذارند.
در واقع بسیار از ویژگی های یک سایت یا اپلیکیشن که تجربه کاربری مثبتی خلق می‌کنند، بدون فرآیند احراز هویت کاربران قابل اجرا و در دسترس نخواهند بود.
از سویی کاربران به دنبال فرآیندی ساده ،امن و سریع برای ایجاد و ورود به حساب کاربری و بازیابی اطلاعات خود هستند. در این مقاله سعی داریم با استفاده از تجارب واقعی، چک لیست طراحی فرم های احراز هویت از مرحله نیاز سنجی تا انتها را به طور جامع بررسی کنیم.
چک لیست طراحی فرم های احراز هویت
مرحله اول: مذاکره با کارفرما و نیازسنجی
اولین و البته مهمترین مورد در چک لیست طراحی فرم های احراز هویت، مذاکره با کارفرما و شفاف‌سازی نیازها و اهداف پروژه است.
در این مرحله، به عنوان یک طراح باید دقیقا بدانیم که کارفرما چه ویژگی‌هایی را برای فرم های احراز هویت نیاز دارد تا بعدا به چالش برنخوریم . سوالات کلیدی که باید مطرح شود عبارتند از:
– امنیت فرآیند احراز هویت تا چه اندازه مهم است؟ آیا در فرآیند احراز هویت نیاز به تایید دومرحله ای یا کد کپچا می باشد
– سادگی و راحتی فرآیندهای احراز هویت چقدر اهمیت دارد؟ چه اطلاعاتی برای ثبت نام اولیه کاربر نیاز است؟ برای امنیت ورود از رمز عبور استفاده شود یا رمز یکبار مصرف یا ترکیب هر دو؟
– آیا کپچای پیچیده لازم است یا ساده؟ کد کپچا از همان نخست در فرم وجود داشته باشد یا بعد از چند بار تلاش ناموفق نمایش داده شود؟
– کاربران از چه طریقی هویت خود را تایید کنند؟ ایمیل، پیامک، اپلیکیشن های تایید هویت، تایید هویت توسط وب سرویس های سوم شخص (مثل لینکدین، گوگل و غیره…) یا ترکیبی از این موارد.
فرآیند بازیابی رمز عبور چگونه باشد؟ بازیابی از طریق لینک زمان دار باشد یا از طریق ارسال کد توسط پیامک و ایمیل
در این مرحل و قبل از شروع طراحی، باید به تجزیه و تحلیل رقبا و بهترین شیوه‌ها در طراحی فرم‌های مشابه پرداخته شود. با این کار، میتوان علاوه بر استفاده از تجارب دیگران از خطاهای گذشته نیز پرهیز نمود و بهترین تجربه کاربری را برای مخاطبان فراهم کرد.
مرحله دوم: طراحی UX برای فرم‌های ورود و بازیابی رمز
طراحی آسان و کاربرپسند
طبق اصل تسلر هر سیستمی داریا مقدار ثابتی پیچیدگی است که فرآیند احراز هویت نیز از این قانون مستثنی نیست . پس قدم بعدی در طراحی فرم های ثبت‌نام و ورود به حساب کاربری ساده سازی و افزایش شفافیت در روال طراحی است.
کاربران باید بتوانند در کوتاه‌ترین زمان ممکن فرایند بازیابی رمز یا ورود به حساب کاربری را تکمیل کنند. در همین راستا، توصیه می شود از الگو های طراحی مرسوم استفاده کنید. استفاده از این الگوهای طراحی استاندارد (Design patterns) می‌تواند روند طراحی را سریعتر، کاربرپسندتر و کارآمدتر کند. برخی از الگوهای برای فرم‌های احراز هویت عبارتند از:
- تعداد فیلدها را به حداقل برسانید و فرم ها را به صورت مینیمال طراحی کنید. برای مثال اگر سیستم احراز هویت شما هم بر مبنای ایمیل است هم شماره موبایل یا هر مولفه‌ی دیگری. بهتر است همه را توسط یک فیلد از کاربر بگیرید (الگوی طراحی Input Group) و صحت سنجی آن را در پشت پرده انجام دهید.
- رهنمایی واضح و مشخص برای هر فیلد در نظر بگیرید. برای مثال ” ایمیل خود را وارد کنید” ، ” شماره موبایل مثلا09123456789″ شماره موبایل خود را بدون صفر اول وارد کنید”.
- ارایه پیام های خطا برای هر فیلد به صورت مجزا و مشخص کردن فیلدی که خطا در آن اتفاق افتاده (الگوی طراحی Inline Validation). برای مثال هنگامی که کاربر تعداد رقم هایی که وارد کرده بیشتر یا کمتر از مقدار واقعی است پیمامی مانند: “تعداد رقم ها وارد شده صحیح نیست” و برای ارسال شماره با فرمت اشتباه پیام: “فرمت وارد شده صحیح نیست” به کاربر نمایش داده شود اینگونه کاربر سریعتر پی به اشتباه خود خواهد برد و به احتمال قوی در دومین تلاش خود موفق می شود.
- بهتر است به جای استفاده از دو فیلد برای اطمینان از اینکه کاربر رمز ورود خود را به درستی وارد میکند. با استفاده از الگوی Password Visibility Toggle یک فیلد طراحی کنید که کاربر بتواند رمز عبور خود را مشاهده کند.
- در هنگام تایپ رمز ورود کاربر را از حالتهای صفحه کلید مطلع کنید. برای مثال هنگامی که Caps Lock فعال است و یا وقتی صفحه کلید در وضعیت زبان فارسی یا هر زبان غیر انگلیسی است، با پیامی کوچک در نزدیکی کادر ورودی رمز ورود، کاربر را مطلع کنید.
- بهتر است از کد تایید و رمز عبور یکبار مصرف در فرآیندهای احراز هویت استفاده کنید. پس از انجام احراز هویت و هنگام ورود کاربر از او بخواهید که یک رمز قوی برای دسترسی به اطلاعات خود ایجاد کند. همچنین بهتر است اگر نیاز دارید که از کپچا استفاده کنید. بعد از تعداد مشخصی تلاش ناموفق (مثلا پس از سه بار تلاش نا موفق) استفاده از آن را الزام کنید.
- توجه داشته باشید ارسال کد تایید از طریق ایمیل تقریبا رایگان است در حالی که برای ارسال کد از طریق پیامک می بایست سرویس ارسال پیامک خریداری و از APIهای آن استفاده کنید.
- دقت کنید حتما فرم ها در تمام صفحات نمایش به درستی در معرض دید کاربر قرار گیرد. در صفحات موبایل باید این نکته را در نظر بگیرید که نیمه پایینی صفحه نمایش در اختیار صفحه کلید مجازی موبایل خواهد بود. بنابراین با لحاظ این نکته، فرم های خود را پایین صفحه قرار ندهید و مراقب باشید که با فعال و غیر فعال شده صفحه کلید مجازی در موبایل فرم ها بالا و پایین نپرند.
- گزینه پذیرش شرایط و قوانین را که در اکثر فرم های ثبت نام وجود دارد به حالت تیک خورد قرار دهید .
مرحله سوم: اعتبارسنجی اصولی
طبق اصل پوستل در طراحی فرم‌ها باید به کاربران آزادی عمل داد، این آزادی عمل، احتمال بروز خطا را بالا می برد. برای مدیریت خطاها باید قبل از ارسال اطلاعات فرم به سمت سرور، درستی ورودی ها را از هر لحاظ بررسی کرد. به این کار اعتبار سنجی فرم گفته می شود که عملی کاملا مرسوم است. برای اعتبار سنجی فرم ها دو راهکار در پیش رو داریم اول. خودمان ابزاراعتبار سنجی را ایجاد کنیم که این کار نیاز به دانش JavaScript دارد . برتری آن حجم کد کمتر و نعدم نیاز به متابخانه های اضافی است. راهکار دوم استفاده از ابزارهای اعتبار سنجی است که نیاز داره به مستندات اون ابزرا آشنا باشید. برتری این روش زمان پیاده سازی کمتر است.
ابزارهای اعتبارسنجی
ابزارهای مختلفی برای اعتبارسنجی داده‌ها و افزایش امنیت فرم‌ها وجود دارد مانند validate.js ، js-form-validator و یا just-validate
مرحله چهارم : طراحی UI
ساختار بصری و تعاملات
در طراحی UI برای فرم‌ها، استفاده از رنگ‌ها، تایپوگرافی و فاصله‌گذاری مناسب می‌تواند تجربه کاربری را بهبود بخشد. برخی از نکات کلیدی در طراحی UI عبارتند از:
– فضای سفید: در طراحی فرم ها فضای سفید یا به اصطلاح نفس خور برای المان‌های فرم در نظر بگیرید این فاصله نه چندان زیاد باشد که کاربر هنگام جابه جایی بین فیلدها به زحمت بیافتد و نه چندان کم که باعث شلوغی زیاد فرم شود. معمولا هر فیلد فرم یک برچسب دارد و یک فضای سفید برای نشان دادن پیام ها مختلف که باید آنها را نیز در نظر گرفت
رنگ ها : رنگ‌ها به تناهیی بار مهنایی دارند امروزه اغلب کاربران می دانند که اگر پیامی با رنگ قرمز نمایش داده شود یعنی خطایی رخ داده و اگر با رنگ سبز نمایش داده شود یعنی عملیات موفقیت آمیز بوده. این موارد را باید در طراحی در نظر بگیرید و یا با الگوی بازخورد سریع “Instance valdate” بلافاصله پس از تکمیل هر فیلد به کاربر باز خورد بدهیم و یا به روش بازخورد تنبل! “Lazy validate” پس از فشردن دگمه ارسال توسط کاربر به او بازخورد بدهیم.
– آیکونها و علائم بصری: آیکون‌های شناخته‌شده مانند قفل برای رمز عبور، ایمیل برای فیلد ایمیل و یا موبایل برای فیلدی موبایل می‌تواند تا حدودی اصطکاک فکری کاربر را کاهش داده و به کاربر کمک کنند تا سریعتر نوع فیلدها را شناسایی کند.
– بهینه‌سازی فرم‌ها برای موبایل: در نظر گرفتن طراحی موبایلی برای کاربران گوشی‌های همراه بسیار مهم است این نکته را در نظر بگیرید یکی از پارامترهای مهم گوگل برای ایندکس شده و گرفتن رتبه های بالا در نتایج جستجو بهینه سازی محتوا برای نمایش در گوشی ها و اسکرین های کوچک است.
مرحله پنجم: طراحی پروتوتایپ
این مرحله همان جایی است که با استفاده از داده های جمع آوری شده از چک لیست طراحی فرم های احراز هویت، یک پروتوتایپ را به کمک یکی از ابزارهای فیگما، ادوبیXD یا اسکچ طراحی میکنیم تا کارفرما یک دید اولیه از آنچه که قرار است انجام شود، داشته باشد. پس از این مرحله وارد مرحله اجرا می‌شویم که در حقیقت کد نویسی فرآیندها و فرم ها است که توسط CSS، HTML و جاوا اسکریپت انجام می‌شود.
مرحله ششم: پیاده سازی و تست فرم‌های طراحی شده
تولید کد و پیاده‌سازی
پس از طراحی UX و UI، نوبت به تولید کد می‌رسد. این مرحله همون مرحله دست به آچار شدنه. شما به عنوان یک توسعه دهنده فرانت اند در این مرحله با استفاده از پروتایپ طراحی شده شروع به کد نویسی می‌کنید.
اگر این پروتوتایپ به درستی طراحی شده باشه شما با کمترین چالش حین کد نویسی روبرو می‌شید. بنابراین قبل از دست به کد شدن مطمئن شوید که همه جوانب رو بررسی کردید و تمام موارد مربوط به چک لیست طراحی فرم های احراز هویت را در نظر گرفتید. نکات مهم که در این مرحله لازم است بدانید؛
- انتخاب درست نوع فیلد: حتما می دانید که با کمک ویژگی type میتوان نوع هر فیلد را مشخص نمود. این ویژگی برای کابران موبایل بیشتر نمود پیدا میکند چرا که نوع صفحه کلید بسته به همین ویژگی تغییر میکند. مثلا اگر در فرم خود کد کپچا از نوع عددی دارید می توانید ویژگی type رو بر روی number تنظیم کنید با این عمل کاربر وقتی روی فیلد مربوطه فوکوس می کند، صفحه کلید عددی در دسترسش قرار می گیرد. این نکته تاثیر زیادی روی تجربه کاربر دارد.
- به یا دداشته باشید هرگز کاربران را بدون ارایه اطلاعات لازم و داده های ارزشمند وادار به ثبت نام و یا احراز هویت نکنید. کاربران باید با دسترسی به اطلاعت مفید خودشان به این نتیجه برسند که دسترسی به منابع بیشتر یا استفاده از تمامی امکانات موجود در سامانه ارزش طی کردن فرآیند احراز هویت را دارد.
جمع بندی
طراحی فرم‌های بازیابی رمز و ورود کد تایید، به دلیل ارتباط مستقیم با امنیت و تجربه کاربری، از اهمیت بالایی برخوردار است. به همین دلیل لازم است یک چک لیست طراحی فرم های احراز هویت داشته باشیم و آن را با دانسته ها و تجربیاتی که در طول پروژه های مختلف کسب میکنیم کاملتر کنیم تا با رعایت موارد این چک لیست و انجام تست‌های کاربری، بتوانیم فرم‌هایی بسازیم که هم از نظر کاربری و هم از نظر امنیتی بهینه باشند.
