10 قانون کاربردپذیری فرم‌ها در موبایل
10 قانون کاربردپذیری فرم‌ها در موبایل

کاربران با اهداف خاص از موبایل استفاده می‌کنند. وجود فرم‌ها اغلب یکی از موانعی است که بین کاربر و هدف او قرار می‌گیرند.

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

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

قانون شماره 1: پرسش‌ها منطقی و ضروری را ابتدا بپرسید.

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

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

 

قانون شماره 3: تعداد فیلدهای ورودی برای تایپ کاربر را به حداقل برسانید.

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

    ارتفاع مشخص

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

 

     موقعیت جغرافیایی

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

    فهرست کشویی

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

    دکمه رادیویی

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

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

 

    حداقل و حداکثر 

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

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

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

قانون شماره 4: اندازه مناسب انتخاب کنید.

با توجه به متفاوت بودن اطلاعات کاربر در هر فیلدی باید به این نکته توجه داشته باشید که اندازه فیلد مورد نظر مناسب است یا خیر. مطمئن شوید اندازه فیلد برای ورود اطلاعات به اندازه کافی طولانی باشد .

قانون شماره 5: از برچسب‌‌ها استفاده کنید.

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

    نوشتن برچسب داخل باکس روش مناسبی نیست.

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

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

    برچسب در سمت راست و سمت چپ فیلد

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

    برچسب در بالای فیلد

برچسب باید در بالای فیلد ورودی اطلاعات باشد تا کاربر به راحتی توانایی دیدن آن را داشته باشد. این روش کمک می‌کند فضای ورودی اطلاعات بیشتر شود تا کاربر بتواند اطلاعات کافی را با فونت 16 پیکسل به صورت خوانا وارد کند. قرار دادن برچسب در بالای هر فیلد قطعاً باعث طولانی شدن فرم می‌شود که این مورد هم قابل حل است.
برچسب متحرک

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

یکی از نکاتی که شاید بسیار کم اهمیت باشد اخطار ها هستند. وجود اخطار‌ها در حین ورود اطلاعات نکته‌ای بسیار بسیار مهم است که باید حتماً به آن توجه شود.

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

تصور کنید کاربر می‌خواهد شماره تماس خود را در فرمی وارد کند و صفحه کلید موبایل بر روی قسمت حروف تنظیم شده است. چه اتفاقی می‌افتد؟ کاربر ابتدا باید تنظیمات صفحه کلید را بر روی عدد تنظیم کند و بعد اطلاعات را وارد کند. قطعاٌ مدت زمانی صرف تغییر حالت صفحه کلید خواهد شد.

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

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

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

 

قانون شماره 8: اطلاعات مفید در پس زمینه ارائه کنید.

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

 

قانون شماره 9: از فیلد‌های استاندارد استفاده کنید.

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

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

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

  • logo-samandehi
  • logo-nezam-senfi
  • samane-tadarokat-electronic
  • logo-bakutel
  • انجمن صنفی کارفرمایی فروشگاه های اینترنتی شهر تهران
  • شورای عالی انفورماتیک کشور
  • اتحادیه صنف فناوران رایانه تهران
  • etehadieMajazi