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


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



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

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




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

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



تجربه کاربری



البته برای فرم هایی با تعداد بالای ۵  فیلد این روش در نرم افزارهای ویندوز اپلکیشن پیشنهاد نمی شود اما در وب برای فرم های با فیلدهای بالا نیز پیشنهاد می گردد.

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



تجربه کاربری 




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

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



تجربه کاربری




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



تجربه کاربری





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



تجربه کاربری



در صورتی که از این مقاله راضی هستید این مقااله را نیز ازدست ندهید “۶ اصل مهم برای طراحی یک برنامه خوب”




Placeholder ها به جای label ها:

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



مثال اول:


تجربه کاربری


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

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



تجربه کاربری



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

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



مثال دوم:



تجربه کاربری


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



مثال اول gmail:

تجربه کاربری



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


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



تجربه کاربری




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

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



تجربه کاربری



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





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

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



در صورتی که از این مقاله راضی هستید این مقااله را نیز ازدست ندهید :  “نکات کلیدی برای طراحی فرم های اصلی”





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

مطالب مرتبط

2 نظر

  1. زهیر صفری

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

    پاسخ

نظر بدهید

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

دانلود رایگان
فایل ویدئویی خاطرات نرم افزارهای 14 سال قبل استاد مدحج + پروژه عظیم کدهای سایت کد تجاری
دانلود رایگان
فایل صوتی راز کیفیت محصولات اپل با شی گرا
دانلود رایگان
مالکیت فکری نرم افزار در داخل تیم تولید و خارج از آن
دانلود رایگان
نگاه شی گرا با استفاده از مکانیزم طبیعی ذهن در تولید نرم افزار
دانلود رایگان
گزارش سازی با linqtosql و stimulsoft
در حال بروزرسانی سایت هستیم بابت اینکه جهت انجام تغییرات صبور هستید سپاسگزاریم
دانلود رایگان
مالکیت فکری نرم افزار در داخل تیم تولید و خارج از آن