اگر میخواین «اعتبارسنجی فیلدهای متنی - input validation» محصولتون رو دیزاین کنید، به این چک لیست به نگاه بندازین.
مواردی که در ادامه خواهم گفت در نهایت هم به تجربه‌ی بهتر کاربرها منجر میشه و هم به اینکه برنامه‌نویس‌ها بتونن کد جامع‌تر و تمیزتری داشته باشن.
اول لیست تمام خطاهایی که ممکنه برای مقادیر اینپوت‌های محصولتون به‌وجود بیاد رو بنویسید. مثلا:
حالا این موارد رو برای اون‌ها در نظر بگیرید:
۱- یکپارچگی بین جملات رو از لحاظ لحن و جمله‌بندی حفظ کنید.
مثلا ❌ برای خطای min ننویسید «رمزعبور باید حداقل ۱۰ کاراکتر داشته باشه»، در صورتی که برای خطای max نوشته بودید «وارد کردن بیشتر از ۲۰ حرف برای رمزعبور مجاز نیست».
۲- تا جایی که می‌تونید متن خطاتون رو واضح بنویسید که کاربر متوجه بشه مشکل کجاست.
مثلا زمانی که کاربر کاراکترهای غیرمجازی رو وارد می‌کنه، ننویسید «❌ نام کاربری صحیح نیست»، بلکه بنویسید «✅ نام کاربری فقط میتونه شامل حروف انگلیسی باشه»
البته این مورد برای همه‌جا صدق نمی‌کنه. برای مثال خطای «❌ شماره موبایل فقط میتونه شامل اعداد باشه» موضوع خیلی بدیهی‌ای هست و خطای «✅ شماره موبایل صحیح نیست» انتخاب بهتری میتونه باشه.
۳- حواستون باشه در هیچ‌یک از خطاها به کاربر نگید که کاری رو اشتباه داده. بلکه غیر مستقیم بگید که اشتباهی رخ داده.
برای مثال ننویسید «❌ رمزعبورت رو اشتباه وارد کردی»، بلکه بنویسید «✅ رمز عبور صحیح نیست».
باید مشخص کنید که اعتبارسنجی‌ها با چه ترتیبی چک شوند. به طور کلی باید اول required بودن چک شود -> بعد pattern -> بعد min -> بعد max.
برای مثال اگر شماره موبایل باید ۱۱ کاراکتر داشته باشه و فقط شامل اعداد باشه، در صورتی که کاربر کاراکتر «*» رو وارد کنه اول باید patternها (شامل اعداد بودن) چک شوند بعد min/max (۱۱ کاراکتر).
همچنین نمایش چند خطا با هم نیز اشتباه است:
مشخص کنید که هر اعتبارسنجی چه موقعی انجام شود. که معمولا یکی از ۴ حالت زیره:
۱- به محض اینکه کاربر کاراکتری رو در اینپوت وارد کرد.
۲- بعد از یک مکث کوتاهی بعد از اینکه کاربر کاراکتر/کاراکترهایی رو در اینپوت وارد کرد. (مثلا بعد از ۲ ثانیه تایپ نکردن)
در اینجور موارد نباید مثل مورد اول به محض اینکه کاربر کاراکتر اول رو وارد کرد بهش خطا نشون بدیم بلکه باید صبر کنیم که تایپ کردنش تموم بشه و بعد اگر مشکلی داشت خطا رو نشون بدیم. تابحال این تجربه رو داشتم که در حال تایپ کردن اسمم با سرعت معقولی بودم و محصول درجا بهم خطا نشون داده که حداقل کاراکتر مثلا ۵تاست. خب بابا صبر کن دارم تایپ می‌کنم!
۳- بعد از اینکه focus از روی اینپوت برداشته شد.
۴- بعد از کلیک روی دکمه‌ی enter یا submit فرم.
حواستون باشه به محض اینکه دلیل نمایش خطا برطرف شد، اینپوت هم از حالت خطا به حالت عادی برگرده. به عنوان کاربر خیلی تجربه‌ی بدی داره که همه چیز رو اصلاح کرده باشی ولی همچنان خطا ببینی.
در بعضی موارد باید تصمیم بگیرید که آیا به نمایش خطا نیاز هست یا نه؟
یعنی می‌تونیم ۲ رویکرد داشته باشیم: ۱- کاربر اشتباهی انجام میده و خطای متناسب با اون رو می‌بینه. ۲- کاربر از اول نمیتونه کاراکتر اشتباهی رو وارد کنه.
مثلا برای اینپوتی که میتونه حداکثر ۳۰ کاراکتر داشته باشه، ۱- اجازه بدیم کاراکتر ۳۱ام رو وارد کنه و بهش خطا نشون بدیم. ۲- نگذاریم که بتونه بیشتر از ۳۰ کاراکتر وارد اینپوت کنه.
سعی کنید این قانون رو به طور یکپارچه برای همه‌ی اینپوت‌های محصولتون رعایت کنید.
وقتی پایین اینپوت خطایی اضافه میشه، نباید جایگاه المان‌های پایینش رو تغییر بده.
برای اینکه این اتفاق نیفته، در کامپوننت اینپوت‌هاتون فضای خالی‌ای رو در نظر بگیرید، که وقتی خطایی رخ میده فقط اون فضا رو پر کنه.
در مواجه با space می‌تونید رویکردهای زیر رو داشته باشین:
۱- با فشردن space، کاراکتری در اینپوت وارد نشه.
۲- کاراکتر space در اینپوت وارد بشه، ولی برای اعتبارسنجی‌ها در نظر گرفته نشه و بعد از تایید همه‌ی spaceها حذف بشه.
۳- کاراکتر space در اینپوت وارد بشه، ولی بعد از تایید فقط spaceهای اول و آخر حذف بشه.
۴- کاراکتر space در اینپوت وارد بشه و براش خطا نشون بدیم.
این مورد برای جاهای مهمی مثل تعیین رمزعبور میتونه مهم باشه که شما به طور واضحی به کاربر بگید که نمیتونه از space استفاده کنه.
۵- کاراکتر space وارد بشه، ولی در اینپوت تبدیل به کاراکتر دیگری (مثل underline) بشه.
در بعضی از اینپوت‌ها، رفتن به خط بعدی مجازه (مثل بیوگرافی که قسمتی از متن میتونه در خطوط بعدی نوشته بشه)
ولی در اینپوت‌هایی که نمی‌تونن خط بعد داشته باشن (مثل شماره موبایل، نام کاربری یا اسم) در صورتی که کاربر از کاراکتر enter استفاده کرد می‌تونیم طبق یکی از مواردی که در قسمت space نوشتم رفتار کنیم.
برای اینپوت‌هایی که فقط برای اعداد هستند، کیبرد اعداد رو نشون بدید. در غیر اینصورت کیبرد حروف و اعداد.
عملکرد اکشن اصلی کیبرد رو حتما در نظر بگیرید (منظورم دکمه‌ی آبی در عکس پایینه) یعنی مشخص کنید که می‌خواهید این دکمه برای هر اینپوت کدام‌یک از موارد زیر را انجام دهد:
(این مورد خیلی به validation ربطی نداشت ولی چون دیدم تو خیلی از اپلیکیشن‌های ایرانی مثل اسنپ‌فود، دیجی‌کالا، علی‌بابا و ... رعایت نشده اینجا اضافش کردم)
پیشنهادم برای ساختار بهتر دیزاینتون در فیگما اینه که همه‌ی خطاها رو در قالب یک کامپوننت داشته باشید. اینطوری اگر بخواید در آینده استایل و رایتینگشون رو تغییر بدید کارتون راحت‌تر میشه. همچنین به حفظ یکپارچگی در طرح‌هاتون کمک می‌کنه.
برای ساختار کامپوننت ErrorMessage حواستون باشه که تکست «مقادیر متغیر» رو از تکست «جملات ثابت» جدا کنید. اینطوری در صورتی که بعد از اتمام دیزاین بخواید رایتینگ جملات ثابت رو تغییر بدید، در همه‌ی طرح‌هاتون اعمال میشه (به علت override نشدن).
مثلا در جمله‌ی «نام آیتم صحیح نیست»، «نام آیتم» متغیر و «صحیح نیست» ثابت هستند.
در آخر ممنونم که تا اینجا همراه من بودین. امیدوارم که این مطلب براتون مفید بوده باشه. ممنون میشم با لایک‌هاتون ازم حمایت کنید. همچنین اگر مورد دیگه‌ای هست که اینجا ذکر نشده یا هر سوال و پیشنهادی که دارید رو در قسمت کامنت‌ها بنویسید.
