پست تنها



تجربه کاربری در بکارگیری از Label ها در فرم های ورود اطلاعات

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

.

Label یا برچسب را یک بار دیگر تعریف کنیم!!!

این کنترل فیلد های ورودی شما را برچسب می زنند و کاربرها را در مورد ثبت اطلاعاتی که برای یک فیلد ورودی معین باید وارد نمایند آگاه می سازند.

ایده ی قرار دادن Label در بالای کنترل های ورود اطلاعات

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

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

 

البته برای فرم هایی با تعداد بالای ۵  فیلد این روش در نرم افزارهای ویندوز اپلکیشن پیشنهاد نمی شود اما در وب برای فرم های با فیلدهای بالا نیز پیشنهاد می گردد.
مثلا این فرم ورود اطلاعات در Hotmail را ببینید چقدر زیبا طراحی شده است:

 

یک فرم زیبا که در HotMail طراحی شده است

 

ایده ی قرار دادن Label هم راستا در سمت راست کنترل های ورود اطلاعات

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

برچسب ها در سمت راست در فرم های کوتاه مناسب هستند

 

کاربران هنگام کار با فرم ها ابتدا کنترل های ورود اطلاعات را می بینند یا label ها را؟

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

کاربران هنگام کار با فرم ها ابتدا چه چیزی را میبینند؟

 

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

 

نقاطی که کاربر بیشتر به آنها نگاه کرده است

 

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

 

متن لیبل ها باید فشرده و کوتاه باشد

Placeholder ها به جای label ها

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

مثال اول:

متن راهنما درون کنترل وجود دارد

 

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

این فرم ایرادی نیز دارد مثلا کاربری که سریعا به کنترل ورود اطلاعات نگاه می کند شاید حوصله خواندن متن درون تکست باکس ها را نداشته باشد که در این شرایط سریعا به برچسب یا Label نگاه خواهد کرد و همانطور که در تصویر می بینید برچسب فاصله زیادی تا کنترل دارد و اگر فرم به شکل زیر تغییر پیدا کند می توانید به طراحی صحیح تری دست پیدا نمائید:

 

تغییر محل لیبل ها برای کسانی که ممکن است حوصله خواندن توضیحات درون کنترل ها را ندارند

در فرم فوق دقت داشته باشید که چشم کاربر مسافت کمتری را طی خواهد کرد تا برچسب “نام شما” را ببیند.

چشم کاربر مسافت کمتری را طی خواهد کرد تا برچسب “نام شما” را ببیند

البته اگر بخواهیم ایراد بیشتری هم بگیریم متن عناوین می باشند و پیشنهاد می کنم از کلمات رایج استفاده کنید مثلا “نام شما” به “نام:”  و “آدرس ایمیل شما” به “ایمیل” و “پیغام شما” به “متن پیام” تغییر کند.

مثال دوم:

استفاده از Placeholder به تنهایی

 

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

 

مثال اول gmail:

طراحی یک فرم ورود اطلاعات کوتاه در جی میل

 

مثال دوم یاهو:

یک فرم ورود اطلاعات کوتاه در یاهو

 

البته یاهو برای ثبت نام کاربران نیز از روش فوق استفاده نموده ولی gmail اینکار را نکرده و قضاوت و مقایسه را به عهده شما می گذاریم:

 

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

 

نحوه ی تراز بودنlabel  ها نسبت به کنترل های ورود اطلاعات چگونه باشد؟

چنانچه از برچسب در سمت راست  فرم استفاده کنید، اطمینان حاصل کنید که متن برچسب ها با یکدیگر به ردیف بوده و از سمت چب نسب به یکدیگر تراز باشند.  این کار اسکن کردن صفحه را ساده می کند:

نحوه چیدمان

در صورت رعایت این موارد کاربران شما احساس می کنند نرم افزار شما تجاری و حرفه ای است و می توانید فاصله زیادی با رقبای  خود پیدا کنید

منتظر مقالات بعدی مرتبط با این موضوع باشید .

نظرات شما برای مقالات بعدی به ما کمک خواهد کرد.

نظرات

  • زهیر صفری
    مرداد ۱۵, ۱۳۹۶

    سلام به دوستان برنامه نویس که با استفاده از دانش خود دنیای اطراف را برای دو ستان خود اسآن می کنند
    مقالات و ویدئو های شما بسیار عالی است با تشکر از شما از زحمات بی منت شما
    همیشه سربلند و پیروز باشید

    • کد تجاری
      مرداد ۱۵, ۱۳۹۶

      ممنونم دوست من ، ممنون از انرژی مثبتی که به ما می دید.

دیدگاهتان را بنویسید

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