معرفی کنترل کننده های انتخاب در رابط کاربری

کنترل‌های انتخاب (Selection controls) یه بخش اساسی از طراحی فرم هستن. اونا پر کردن فرم‌ها رو آسون‌تر می‌کنن و داده‌های جمع‌آوری شده رو استاندارد می‌کنن. فرم‌های کارآمد و قابل استفاده، نرخ تبدیل (conversion rates) رو بهبود می‌بخشن و از منصرف شدن کاربرها از تعامل با محصولتون جلوگیری می‌کنن.

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

کنترل چند انتخابی (Multiselect control)

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

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

یه نکته‌ی حرفه‌ای! اگه چند گزینه چک‌باکس مرتبط دارین، در نظر داشته باشین که دکمه‌های انتخاب/لغو انتخاب همه رو قرار بدین.

آیکون چک‌باکس

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

حالت نامشخص (Indeterminate state)

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

کنترل تک انتخابی (Single-select control)

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

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

یه نکته‌ی حرفه‌ای! هرگز از دکمه‌های رادیویی برای دستوراتی که باید بلافاصله اعمال بشن استفاده نکنین.

آیکون دکمه‌ی رادیویی

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

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

شکل آیکون

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

اندازه برچسب

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

برچسب‌ها باید کنشی باشن

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

حاشیه‌های برچسب

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

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

دستورات برچسب

برچسب‌ها یه عملکرد اصلی دارن — اینکه کاربرها رو از فکر کردن نجات بدن. این یعنی برای شما حیاتیه که از استفاده از دستورات برچسب مبهم و احتمالاً گیج‌کننده اجتناب کنین. برچسب‌هاتون رو با یه کلمه‌ی کلیدی (اغلب یه فعل) شروع کنین و هر عبارت یا سؤال اضافی رو حذف کنین.

برچسب‌ها باید کوتاه و سرراست باشن، و در مورد سوییچ‌ها، باید نشون بدن وقتی سوییچ روشن میشه چی اتفاق میفته. می‌تونین با خوندن برچسب با صدای بلند و اضافه کردن “روشن/خاموش” بررسی کنین که منطقی هست یا نه.

تراز چک‌باکس

ورودی‌هاتون رو تو یه ستون واحد به سمت چپ صفحه تراز کنین. چرا؟ دو دلیل وجود داره:

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

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

تراز سوییچ ضامن موبایل

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

سوییچ ضامن (Toggle switch)

سوییچ‌های ضامن کنترل‌های انتخابی هستن که فقط دو گزینه‌ی متقابلاً منحصر به فرد (معمولاً “روشن” یا “خاموش”) رو ارائه میدن و همیشه یه مقدار پیش‌فرض دارن.

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

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