Beləliklə, Combobox, multiselect, listbox və dropdown arasında fərq nədir? Bütün bu UI komponentləri oxşar görünsə də, fərqli məqsədlərə xidmət edir. Seçim çox vaxt mövcud variantların sayına və onların görünməsinə bağlıdır. Gəlin onların necə fərqləndiyini, hansı məqsədə xidmət etdiyini və düzgün olanı necə seçmək lazım olduğunu görək - yol boyu anlaşılmazlıqlardan və yanlış gözləntilərdən qaçın.
Bütün Siyahı Nümunələri Eyni Deyil Yuxarıda vurğulanan bütün UI komponentlərinin tam olaraq bir ümumi cəhəti var: onlar istifadəçilərin siyahılarla qarşılıqlı əlaqəsini dəstəkləyir. Ancaq bunu bir az fərqli şəkildə edirlər. Gəlin hər birinə bir-bir nəzər salaq:
Açılan menyu → siyahı işə salınana qədər gizlədilir. Combobox → filtrləmək üçün yazın + 1 seçim seçin. Multiseç → filtrləmək üçün yazın + bir çox variant seçin. Siyahı qutusu → defolt olaraq görünən bütün siyahı seçimləri (+ sürüşdürün). İkili siyahı qutusu → elementləri 2 siyahı qutusu arasında köçürün.
Başqa sözlə, Combobox mətn daxiletmə sahəsini açılan siyahı ilə birləşdirir, beləliklə istifadəçilər filtrləmək və tək seçim seçmək üçün yaza bilərlər. Multiselect ilə istifadəçilər bir çox variant seçə bilər (çox vaxt həb və ya çip kimi göstərilir). Siyahı qutuları defolt olaraq görünən bütün siyahı seçimlərini, çox vaxt sürüşdürmə ilə göstərir. İstifadəçilərin bütün mövcud seçimləri dərhal görməsi lazım olduqda faydalıdır. Dual listbox (həmçinin transfer siyahısı adlanır) istifadəçilərə adətən toplu seçim üçün iki siyahı qutusu (sol ↔ sağ) arasında elementləri köçürməyə imkan verən siyahı qutusunun variasiyasıdır. Tez-tez istifadə olunan seçimləri heç vaxt gizlətməyin Yuxarıda qeyd edildiyi kimi, düzgün UI komponentinin seçimi 2 amildən asılıdır: neçə siyahı variantının mövcudluğu və bütün bu seçimlərin standart olaraq görünməsi lazımdırsa. Bütün siyahılarda ağac strukturları, yuvalama və qrup seçimi də ola bilər.
Hər hansı bir UI komponenti üçün illərdir əməl etdiyim bir prinsip var: tez-tez istifadə olunan variantları heç vaxt gizlətməyin. İstifadəçilər tez-tez müəyyən bir seçimə etibar edirlərsə, onu onlardan gizlətməyin çox az dəyəri var. Biz ya onu əvvəlcədən seçilmiş edə bilərik, ya da (yalnız 2-3 tez-tez istifadə olunan seçim varsa) onları çiplər və ya düymələr kimi göstərə və sonra siyahının qalan hissəsini qarşılıqlı əlaqədə göstərə bilərik. Ümumiyyətlə, UI-ni qarışdıra bilsə belə, həmişə populyar variantları göstərmək yaxşı fikirdir. Hansını necə seçmək olar? Hər siyahının kompleks seçim metoduna ehtiyacı yoxdur. 5-dən az elementi olan siyahılar üçün sadə radio düymələri və ya onay qutuları adətən ən yaxşı işləyir. Lakin istifadəçilər geniş seçim siyahısından (məsələn, 200-dən çox element) seçmək lazımdırsa, daha sürətli filtrləmə (məsələn, ölkə seçimi) səbəbindən combobox + multiselect faydalıdır.
Siyahı qutuları insanların eyni anda bir çox seçimə daxil olmaları lazım olduqda, xüsusən də həmin siyahıdan bir çox variant seçmək lazım olduqda faydalıdır. Onlar tez-tez istifadə olunan filtrlər üçün faydalı ola bilər.
İkili siyahı qutusu tez-tez nəzərdən qaçır və nəzərə alınmır. Lakin bu, mürəkkəb tapşırıqlar üçün çox faydalı ola bilər, məsələn, toplu seçim və ya rolların, tapşırıqların, məsuliyyətlərin təyin edilməsi. Bu, istifadəçilərə etməzdən əvvəl tam seçim siyahısını mənbə siyahısı ilə yan-yana nəzərdən keçirməyə imkan verən yeganə UI komponentidir (həmçinin “Transfer siyahısı” adlanır). Əslində, ikili siyahı qutusu tez-tez sürüklə və buraxdan daha sürətli, daha dəqiq və daha əlçatandır. İstifadəyə dair mülahizələr Yadda saxlamaq lazım olan vacib qeyd odur ki, bütün siyahı növləri əlçatanlıq üçün klaviatura naviqasiyasını (məsələn, ↑/↓ ox düymələri) dəstəkləməlidir. Bəzi insanlar yazmağa başladıqdan sonra variantları seçmək üçün demək olar ki, həmişə klaviaturaya etibar edəcəklər.
Bundan əlavə:
7+ variantı olan siyahılar üçün istifadəçinin qarşılıqlı əlaqəsini asanlaşdırmaq üçün “Hamısını Seç” və “Hamısını Sil” funksiyalarını əlavə etməyi düşünün. Combobox olan uzun siyahılar üçün bütün seçimləri klik/klik vasitəsilə istifadəçilərə göstərin, əks halda onlar heç vaxt görünməyəcək, Ən əsası, qarışıqlığın qarşısını almaq üçün qeyri-interaktiv elementləri düymələr kimi göstərməyin və interaktiv elementləri statik etiketlər kimi göstərməyin.
Nəticə: Hər şey açılan siyahı deyil Adlar önəmlidir. Seçimlərin şaquli siyahısı adətən "açılan siyahı" kimi təsvir olunur, lakin çox vaxt mənalı olmaq üçün bir qədər ümumi olur. "Açılır" siyahının standart olaraq gizlədildiyinə işarə edir. “Multiselect” siyahı daxilində çoxseçimi (onay qutusu) nəzərdə tutur. “Combobox” mətn daxil etməyi nəzərdə tutur. Və "Siyahı qutusu" sadəcə olaraq hər zaman görünən seçilə bilən elementlərin siyahısıdır. Məqsəd onun xatirinə yuxarıdakı təriflərə uyğun olmaq deyil. Ancaq daha çox niyyətləri uyğunlaşdırmaq üçün - bu UI komponentləri üzərində qərar verərkən, dizayn edərkən, tikərkən və sonra istifadə edərkən eyni dildə danışın. üçün işləməlidirhər kəs - dizaynerlər, mühəndislər və son istifadəçilər - statik etiketlər interaktiv düymələrə bənzəməyən və radio düymələri onay qutuları kimi fəaliyyət göstərmədiyi müddətcə. "AI interfeysləri üçün dizayn nümunələri" ilə tanış olun Vitalinin real həyat məhsullarından praktik nümunələri ilə yeni video kursu olan AI İnterfeysləri üçün Dizayn Nümunələri ilə tanış olun – tezliklə canlı UX təlimi keçiriləcək. Pulsuz önizləməyə keçin. AI interfeysləri üçün dizayn nümunələri ilə tanış olun, Vitalinin interfeys dizaynı və UX üzrə video kursu.
Video + UX TəlimiYalnızVideoVideo + UX Təlimi$ 450,00 $ 799,00
Video + UX Təlimi 30 video dərsi (10 saat) + Canlı UX Təlimi əldə edin. 100 gün pulun geri qaytarılması zəmanəti. Yalnız video$ 275.00$ 395.00
Video kursunu əldə edin 30 video dərs (10 saat). İllik yenilənir. Həmçinin 3 video kursu olan UX Paketi kimi mövcuddur.
Faydalı Resurslar
Avtomatik tamamlama: UX Təlimatları, Vitali Fridman tərəfindən Combobox, eBay tərəfindən 👍 Combobox, Elastic tərəfindən Combobox, Elisa tərəfindən Combobox, MongoDB tərəfindən 👍 Combobox, Visa ilə 👍 Combobox, Watson tərəfindən (Docplanner) Combobox, Wikimedia tərəfindən Combobox, Zendesk tərəfindən Multiselect (MongoDB Combobox Design Sənədləri), MongoDB tərəfindən 👍 Multiselect Axtarış, Wikimedia Çox seçimli Combo Box, Vaadin tərəfindən Multiselect, Visa ilə Köçürmə (Listbox nümunəsi), Ant Design tərəfindən Listbox, Hopper tərəfindən Siyahı qutusu, Vaadin tərəfindən Listbox, Visa İkili Siyahı Seçici, Red Hat (PatternFly) tərəfindən Salesforce tərəfindən Dual Listbox (Lightning Design System) Transfer siyahısı, Mantine tərəfindən Dashlite tərəfindən Dual Listbox Nişanlar və həblər, çiplər və teqlər, Vitali Fridman tərəfindən Siyahı qutuları və açılan siyahılar, Anna Kaley (NN/g)
