۱- عنوان فیلدها همیشه نمایان باشد

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

وقتی فضا برای نمایش عنوان دارید پس آن را نمایش دهید

مخصوصا در فرم های طولانی کاربران می خواهند مقادیری را که وارد کرده اند بررسی کنند ولی وقتی عنوان فیلد را نمی بینند طبیعتا نمی توانند به صورت کامل و آسان این کار را انجام دهند

۲- فونت به اندازه کافی بزرگ باشد

فونت های شما باید به اندازه کافی بزرگ باشند تا خوانایی داشته باشند . من پیشنهاد می کنم حداقل از سایز ۱۴ پیکسل برای بدنه استفاده کنید . ۱۶ پیکسل برای بسیاری از فونت های مناسب است . سایز فونت کمی به دستگاهی که قرار است سایت را نمایش دهد (موبایل ، دسکتاپ و …) و نیز مقدار عناصر دیگری که در صفحه موجود هستند بستگی دارند . اگر دودل هستید ، بزرگ تر کنید بهتر است تا کوچکتر .

یکی از فواید دیگر سایز بزرگ این است که اگر سایز را در حدود ۱۶ پیکسل در نظر بگیرید موقعی که روی فیلد در iOS تپ کنید زوم نمی کند چون دیگر لازم نیست

۳- بین عناصر فاصله مناسب را قرار دهید

این روزها احتمال اینکه کسی بخواهد با موبایل فرم شما را پر کند زیاد است . Apple همواره توصیه می کند ۴۴px فضا بین دکمه ها قرار دهیم زیرا تقریبا به اندازه نوک انگشت کاربر است . اگرچه فکر کنم اگر در مورد این ۴۴px سرسختی کنید در آخر با صفحه ای پر از فیلدها مواجه خواهید شد که برای اپلیکیشن های معمول وب زیاد به نظر می رسد . من پیشنهاد می کنم ارتفاع ورودی های فرم یا همان فیلد ها را بین ۳۲px تا ۴۰px قرار دهید .

ارتفاع پیش فرض فیلدهای متنی در Bootstrap3 همان ۳۲px است ولی سعی کنید از این کوچکتر نباشد تا به راحتی قابل Tap کردن در موبایل باشد .

۴- طول فیلد را نسبت به نوع ورودی آن تعیین کنید

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

این جمله پیچیده را ساده تر کنم برای مثال وقتی یک فیلد برای گرفتن کد پستی می گذارید لازم نیست طول آن را ۱۰۰% قرار دهید . در مورد کمترین طول کاراکترهای کد پستی فکر کنید (در بلژیک ۴ ، در هلند تقریبا ۶ و در ایران ۱۰ رقمی ) ، سپس طول فیلد را نسبت به آن تعیین کنید .پیش طولانی ترین مقدار ممکن یعنی MM00000000 باید در فیلد شما جا شود هم با فونت اصلی و پیش فرض طراحی شما و هم با فونت جانشین و ثانویه .

در ذهن داشته باشید که در linux فونت پیش فرض sans-serif معمولا عریض تر است و این ایجاب می کند که فرم خود را با یک فونت عریض مثل Verdana تست کنید مخصوصا اگر یک فونت فشرده را برای استفاده انتخاب کرده اید.در وب هرگز نمی توانید واقعا بدانید کاربر چگونه طراحی شما را خواهد دید

۵- Checkbox و Radio button ها را سفارشی نکنید

اغلب اوقات چک باکس ها و رادیو های زیبایی را دیده ام که ناقض قوانین طراحی تعاملی هستند . در گذشته radio و checkbox ها توسط یک کتابخانه جاوااسکریپت سفارشی سازی می شدند ولی جدیدا با استفاده از SVG و CSS می توان این کار را کرد .

اما ، سفارشی کردن ظاهر فیلدها اغلب به ناقص شدن امکان مرور فرم با استفاده از صفحه کلید می شود .حدود ۹۰% از فرم هایی با فیلدهای سفارشی شده که من تست کردم قابلیتی برای Focus در نظر نگرفته بودند و مرور آنها با صفحه کلید بسیار سخت و دشوار بود .

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

منظورم از ارزش افزوده سفارشی کردن فیلد ها صرفا به خاظر زیبایی آن هاست.

ویجت هایی شبیه Select 2 یا DatePicker ها می توانند ارزش افزوده را برای فرم به ارمغان بیاورند چون فیلدهای پیش فرض مرورگر قابلیت هایی مثل آن ندارند

۶- نمایش خطاها هم در بالای فرم و هر کنار فیلد

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

۷- مشخص کنید که دقیقا کدام ضروری است و کدام اختیاری

این یکی واضح به نظر می رسد اما غالبا در فرم ها مشخص نیست که پر کردن کدام فیلد ضروری است و کدام فیلد اختیاری است .

استفاده از کارکتر ستاره * در انتهای عنوان فیلد یکی از واضح ترین روش ها برای مشخص کردن این موضوع است . همچنین آن را داخل یک عنصر html قرار می دهم تا برای screen reader ها نیز مشخص شود که این فیلد ضروری است.

این روش همچنین کمک می کند فیلدهای ضروری و غیر ضروری را در کنار هم قرار دهیم تا به ساختار فرم آسیب نرسد .

۸- چیزی را که لازم نیست مخفی کنید

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

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

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

۹- فیلدها را به حداقل برسانید

در مورد مواردی که ضروری نیستند نپرسید . وارد کردن داده به فرم ها یک فعالیت سخت و طاقت فرسا برای کاربران است و نه یک کار لذت بخش و سرگرم کننده (برای اکثر مردم همینطور است) .

داده هایی را که نیاز ندارید از کاربر نپرسید و یک توضیح روشن در صفحه قرار دهید که داده های کاربر برای چه مواردی استفاده خواهند شد .

۱۰- روشن کنید داده را در چه فرمتی می خواهید

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

بهترین اقدام این است که کاربر را آزاد بگذارید هر نوع داده ای می خواهد وارد کند و بعد شما آن را به نوع دلخواه تبدیل و ذخیره کنید . مثلا اگر کاربر بلژیک را به عنوان کشور انتخاب کرده باشد و شماره تلفن ۰۴۹۵ ۲۰ ۱۲ ۱۲ را وارد کرده باشد می توانید فرض کنید که این شماره موبایل کاربر است .

اما همیشه ممکن نیست که کاربر را برای ورود فیلدها آزاد بگذارید . دومین روش خوب این است که در زیر فیلد مشخص کنید دقیقا چه نوع داده ای را کاربر باید در فیلد وارد کند مثلا : “شماره تلفن خود را با این فرمت وارد کنید : +XX 000 000 000 . XX همان کد کشور شماست” .

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

بسیاری از فرم ها این روزها به محض خروج از فیلد شروع به اعتبارسنجی (Validation) آن می کنند . اعتبارسنجی فیلدها قبل از زدن دکمه submit فکر خوبیه اما باید به کاربر زمان بدید تا خطاهاش رو تصحیح کنه . اغلب اوقات یک خطا به صورت من پرتاب میشه در حالی کاملا می دونم مقداری که وارد کردم نیاز به تکمیل شدن داره ولی این فرصت رو به من نمیده .بدتر از اون گاهی اوقات اعتبارسنجی فیلد درست زمانی اتفاق می افته که من در حال تایپ داخل فیلد هستم . بدیهی هست که “[email protected]” آدرس ایمیل صحیحی نیست ولی چرا زمانی که در حال تایپ ایمیل صحیح ام هستم باید این خطا رو نشون بده ؟

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

منبع