کنترلهای انتخابی در UI/UX به کاربر امکان میدهند تا یک یا چند گزینه را انتخاب کند. انتخاب صحیح و مناسب این کنترلها، باعث میشود کاربر به راحتی، سریع و با اطمینان موارد مورد نیاز خود را انتخاب کند. برای طراحی آنها باید اصول خاصی را رعایت کرد. بسیاری از این کنترلهای انتخابی مدت زیادی است که در رابطهای کاربری وجود دارند و باید طبق انتظارات کاربران از آنها استفاده شود. همچنین، موارد انتخابشده در کنترل انتخابی باید از نظر بصری برجستهتر از موارد انتخابنشده باشند.
در ادامه، چند نمونه از رایجترین کنترلهای انتخابی را بررسی میکنیم:
این دسته شامل چکباکس (Checkbox) میباشد. چکباکس به کاربر اجازه میدهد یک یا چند گزینه را همزمان انتخاب کند. چکباکسها معمولاً به شکل مربعهای کوچک طراحی میشوند.
برای طراحی چکباکسها، باید اصول زیر را رعایت کنید:
تمایز بصری: حالتهای انتخابشده، انتخابنشده و نامشخص را با استفاده از رنگ، شکل و آیکون به وضوح نشان دهید.
ترازبندی: چکباکسها و برچسبهای آنها را به صورت منظم و همتراز قرار دهید تا خوانایی و دسترسی آسانتر شود.
برچسبگذاری: متن برچسبها را کوتاه، واضح و مرتبط با گزینه انتخاب کنید.
قابلیت استفاده: اطمینان حاصل کنید که چکباکسها به راحتی قابل کلیک یا لمس هستند و با کیبورد نیز قابل دسترسیاند.
کادرهای انتخاب میتوانند در حالتهای انتخابشده، انتخابنشده یا نامشخص باشند. همچنین، کادرهای انتخاب دارای حالتهای فعال، غیرفعال، شناور، متمرکز و فشرده هستند.
این کنترل از نوع Single-Select است. طراحی دکمههای رادیویی به کاربران اجازه میدهد تا از بین مجموعهای از گزینهها، یک گزینه را انتخاب کنند. این دکمهها معمولاً به صورت دایرههای کوچکی نمایش داده میشوند که هنگام انتخاب، پر میشوند. اگر کاربر گزینه متفاوتی را انتخاب کند، انتخاب قبلی به طور خودکار پاک میشود و اطمینان حاصل میشود که در هر زمان فقط یک انتخاب فعال است. آنها برای موقعیتهایی ایدهآل هستند که چند گزینه دارید و کاربر باید یک انتخاب واحد انجام دهد.مثال رایج: انتخاب جنسیت (مرد، زن، دیگر).
این کنترل برای تغییر حالت بین دو وضعیت متقابل (مثلاً فعال/غیرفعال) استفاده میشود. سوییچ به کاربران اجازه میدهد تا وضعیت یک آیتم را روشن یا خاموش کنند. حالت فعال («روشن») معمولاً دارای یک رنگ پسزمینه است، در حالی که حالت غیرفعال («خاموش») معمولاً با یک رنگ پسزمینه خاکستری نشان داده میشود.
سوییچها اجزای رابط کاربری بسیار متنوعی هستند و عموماً برای کاربران قابل درکاند. مثالهای رایج:
فعال یا غیرفعال کردن حالت تاریک (Dark Mode)
فعال یا غیرفعال کردن یک ویژگی (Feature)
تغییر تنظیمات (Setting)
در یک سیستم مدیریت فایل، هر فایل ممکن است یک منوی کشویی داشته باشد که اقداماتی مانند «تغییر نام»، «حذف»، «دانلود» یا «اشتراکگذاری» را ارائه میدهد. این رویکرد رابط کاربری را تمیز نگه میدارد و در عین حال دسترسی سریع به عملکردهای ضروری را مستقیماً در چارچوب موردی که بر آن تأثیر میگذارند، فراهم میکند. این رویکرد محلی، گردش کار را ساده کرده و با ارائه تنها اقدامات مرتبط با وظیفه فعلی کاربران، کارایی را بهبود میبخشد.
برای وبسایتهای پیچیده با محتوای زیاد، منوهای کشویی تو در تو به کمک میآیند. وبسایتی را تصور کنید که دارای دستههای مختلف محصول است و هر کدام دارای زیرشاخهها و زیرشاخههای فرعی هستند. با استفاده از منوهای کشویی تو در تو، میتوان یک سازماندهی سلسلهمراتبی ایجاد کرد که پیدا کردن آن محصول خاص را بسیار آسان میکند.
