რა განსხვავებაა კომბობოქსს, მრავალარჩევანს, სიას და ჩამოსაშლელს შორის? მიუხედავად იმისა, რომ ყველა ეს UI კომპონენტი შეიძლება გამოიყურებოდეს მსგავსი, ისინი ემსახურებიან სხვადასხვა მიზნებს. არჩევანი ხშირად დამოკიდებულია ხელმისაწვდომი ვარიანტების რაოდენობაზე და მათ ხილვადობაზე. ვნახოთ, როგორ განსხვავდებიან ისინი, რა მიზანს ემსახურებიან და როგორ ავირჩიოთ სწორი - თავიდან აიცილოთ გაუგებრობები და არასწორი მოლოდინები გზაზე.
სიის ყველა ნიმუში ერთნაირი არ არის ყველა ზემოთ მონიშნულ UI კომპონენტს აქვს ზუსტად ერთი საერთო: ისინი მხარს უჭერენ მომხმარებლების ურთიერთქმედებას სიებთან. თუმცა, ისინი ამას ოდნავ განსხვავებულად აკეთებენ. მოდით გადავხედოთ თითოეულს, სათითაოდ:
ჩამოსაშლელი → სია იმალება, სანამ ის არ გააქტიურდება. Combobox → ჩაწერეთ გასაფილტრად + აირჩიეთ 1 ვარიანტი. Multiselect → აკრიფეთ გასაფილტრად + აირჩიეთ მრავალი ვარიანტი. სიის ყუთი → სიის ყველა ვარიანტი ნაგულისხმევად ჩანს (+ გადახვევა). ორმაგი სიის ყუთი → გადაიტანეთ ელემენტები 2 სიის ველს შორის.
სხვა სიტყვებით რომ ვთქვათ, Combobox აერთიანებს ტექსტის შეყვანის ველს ჩამოსაშლელ სიას, ასე რომ მომხმარებლებს შეუძლიათ აკრიფონ ფილტრი და აირჩიონ ერთი ვარიანტი. Multiselect-ით მომხმარებლებს შეუძლიათ აირჩიონ მრავალი ვარიანტი (ხშირად ნაჩვენებია აბების ან ჩიპების სახით). სიის ველები აჩვენებს სიის ყველა პარამეტრს, რომელიც ჩანს ნაგულისხმევად, ხშირად გადახვევით. ეს სასარგებლოა, როდესაც მომხმარებლებს დაუყოვნებლივ უნდა ნახონ ყველა ხელმისაწვდომი არჩევანი. Dual listbox (ასევე უწოდებენ გადარიცხვის სიას) არის სიის ველის ვარიაცია, რომელიც საშუალებას აძლევს მომხმარებლებს გადაიტანონ ელემენტები ორ სიას შორის (მარცხნივ ↔ მარჯვნივ), როგორც წესი, ნაყარი შერჩევისთვის. არასოდეს დამალოთ ხშირად გამოყენებული პარამეტრები როგორც ზემოთ აღინიშნა, სწორი UI კომპონენტის არჩევანი დამოკიდებულია 2 ფაქტორზე: სიის რამდენი ვარიანტია ხელმისაწვდომი და თუ ყველა ეს ვარიანტი უნდა იყოს ხილული ნაგულისხმევად. ყველა სიას შეიძლება ჰქონდეს ხის სტრუქტურები, ბუდე და ჯგუფის შერჩევაც.
არსებობს ერთი პრინციპი, რომელსაც მე წლების განმავლობაში მივყვები ნებისმიერი UI კომპონენტისთვის: არასოდეს დამალოთ ხშირად გამოყენებული ვარიანტები. თუ მომხმარებლები ხშირად ეყრდნობიან კონკრეტულ არჩევანს, ძალიან მცირეა მათი დამალვა. ჩვენ შეგვიძლია ის წინასწარ შერჩეული გავხადოთ, ან (თუ არის მხოლოდ 2-3 ხშირად გამოყენებული ვარიანტი) ვაჩვენოთ ისინი ჩიპების ან ღილაკების სახით, შემდეგ კი ვაჩვენოთ დანარჩენი სია ინტერაქციისას. ზოგადად, კარგი იდეაა ყოველთვის აჩვენოთ პოპულარული ვარიანტები – მაშინაც კი, თუ ამან შესაძლოა აჭედოს ინტერფეისი. როგორ ავირჩიოთ რომელი? ყველა სიას არ სჭირდება შერჩევის რთული მეთოდი. 5-ზე ნაკლები ელემენტის მქონე სიებისთვის, მარტივი რადიო ღილაკები ან მოსანიშნი ველები ჩვეულებრივ საუკეთესოდ მუშაობს. მაგრამ თუ მომხმარებლებს სჭირდებათ არჩევანის გაკეთება დიდი სიიდან (მაგ., 200+ ელემენტი), Combobox + Multiselect სასარგებლოა უფრო სწრაფი ფილტრაციის გამო (მაგ. ქვეყნის შერჩევა).
სიის ველები სასარგებლოა, როდესაც ადამიანებს სჭირდებათ ერთდროულად წვდომა მრავალ ვარიანტზე, განსაკუთრებით თუ მათ უნდა აირჩიონ მრავალი ვარიანტი ამ სიიდან. ისინი შეიძლება სასარგებლო იყოს ხშირად გამოყენებული ფილტრებისთვის.
Dual listbox ხშირად შეუმჩნეველი და იგნორირებულია. მაგრამ ეს შეიძლება იყოს ძალიან გამოსადეგი რთული ამოცანებისთვის, მაგალითად, ნაყარი შერჩევა, ან როლების, ამოცანების, პასუხისმგებლობების მინიჭება. ეს არის ერთადერთი UI კომპონენტი, რომელიც მომხმარებლებს საშუალებას აძლევს გადახედონ თავიანთი სრული შერჩევის სიას გვერდიგვერდ წყაროს სიაში ჩადენამდე (ასევე უწოდებენ "გადაცემის სიას"). სინამდვილეში, dual listbox ხშირად უფრო სწრაფი, ზუსტი და უფრო ხელმისაწვდომია, ვიდრე გადააადგილება. გამოყენებადობის მოსაზრებები გასათვალისწინებელია ერთი მნიშვნელოვანი შენიშვნა, რომ სიის ყველა ტიპს სჭირდება კლავიატურის ნავიგაციის მხარდაჭერა (მაგ. ↑/↓ ისრიანი ღილაკები) ხელმისაწვდომობისთვის. ზოგიერთი ადამიანი თითქმის ყოველთვის ეყრდნობა კლავიატურას ვარიანტების ასარჩევად, როგორც კი აკრეფა დაიწყებს.
ამის მიღმა:
7+ ვარიანტის მქონე სიებისთვის განიხილეთ ფუნქციების „Select All“ და „Clear All“-ის დამატება მომხმარებლის ინტერაქციის გასამარტივებლად. კომბობოქსით გრძელი სიებისთვის, გამოავლინეთ მომხმარებლებისთვის ყველა ვარიანტი დაწკაპუნებით/შეხებით, რადგან სხვაგვარად ისინი ვერასოდეს ჩანდნენ, რაც მთავარია, არ აჩვენოთ არაინტერაქტიული ელემენტები ღილაკებად, რათა თავიდან აიცილოთ დაბნეულობა — და ნუ აჩვენოთ ინტერაქტიული ელემენტები სტატიკური ეტიკეტების სახით.
შეფუთვა: ყველაფერი არ არის ჩამოსაშლელი სახელებს აქვს მნიშვნელობა. ვარიანტების ვერტიკალური სია, როგორც წესი, აღწერილია, როგორც "ჩამოშლილი" - მაგრამ ხშირად ეს ცოტა მეტისმეტად ზოგადია იმისთვის, რომ მნიშვნელოვანი იყოს. "Dropdown" მიანიშნებს, რომ სია ნაგულისხმევად დამალულია. "მრავალარჩევა" გულისხმობს მრავალ არჩევანს (მონიშვნის ველს) სიაში. "Combobox" გულისხმობს ტექსტის შეყვანას. და "Listbox" უბრალოდ არჩევადი ნივთების სიაა, რომელიც ყოველთვის ჩანს. მიზანი არ არის შეესაბამებოდეს ზემოთ მოცემულ განმარტებებს ამის გულისთვის. უფრო მეტიც, მიზნების გასწორების მიზნით - ისაუბრეთ იმავე ენაზე, როდესაც გადაწყვეტთ გადაწყვეტილების მიღებას, დიზაინს, აშენებთ და შემდეგ იყენებთ ამ ინტერფეისის კომპონენტებს. ამისთვის უნდა იმუშაოსყველა - დიზაინერები, ინჟინრები და საბოლოო მომხმარებლები - მანამ, სანამ სტატიკური ეტიკეტები არ ჰგავს ინტერაქტიულ ღილაკებს და რადიო ღილაკები არ მოქმედებენ როგორც საკონტროლო ველები. გაიცანით „დიზაინის ნიმუშები AI ინტერფეისებისთვის“ შეხვდით დიზაინის შაბლონებს ხელოვნური ინტელექტის ინტერფეისებისთვის, ვიტალის ახალი ვიდეო კურსი, პრაქტიკული მაგალითებით რეალური პროდუქტებიდან - ცოცხალი UX ტრენინგი მალე გაიმართება. გადადით უფასო გადახედვაზე. შეხვდით დიზაინის შაბლონებს AI ინტერფეისებისთვის, ვიტალის ვიდეო კურსი ინტერფეისის დიზაინსა და UX-ზე.
ვიდეო + UX ტრენინგი მხოლოდვიდეოვიდეო + UX ტრენინგი $450.00 799.00$
მიიღეთ ვიდეო + UX Training30 ვიდეო გაკვეთილები (10 სთ) + Live UX ტრენინგი. 100 დღიანი თანხის დაბრუნების გარანტია. მხოლოდ ვიდეო $ 275,00$ 395,00$
მიიღეთ ვიდეო კურსი 30 ვიდეო გაკვეთილი (10 სთ). ახლდება ყოველწლიურად. ასევე ხელმისაწვდომია UX პაკეტის სახით 3 ვიდეო კურსით.
სასარგებლო რესურსები
ავტომატური დასრულება: UX სახელმძღვანელო, ვიტალი ფრიდმანის მიერ Combobox, eBay-ის მიერ 👍 Combobox, Elastic-ის მიერ Combobox, ელისას მიერ Combobox, MongoDB-ის მიერ 👍 Combobox, Visa-ით 👍 Combobox, უოტსონის (Docplanner) Combobox, ვიკიმედიის მიერ Combobox, Zendesk-ის მიერ Multiselect (MongoDB Combobox Design Docs), MongoDB-ის მიერ 👍 მრავალარჩევითი ძიება, ვიკიმედიის მიერ მრავალჯერადი არჩევის Combo Box, მიერ Vaadin Multiselect, Visa-ით ტრანსფერი (Listbox მაგალითი), Ant Design-ის მიერ Listbox, ჰოპერის მიერ სია ყუთი, ვაადინის მიერ Listbox, Visa-ით ორმაგი სიის ამომრჩევი, Red Hat (PatternFly) Dual Listbox, Salesforce-ის მიერ (Lightning Design System) ტრანსფერების სია, მანტინის მიერ Dual Listbox, Dashlite-ის მიერ სამკერდე ნიშნები აბების წინააღმდეგ ჩიფსების წინააღმდეგ ტეგების წინააღმდეგ, ვიტალი ფრიდმანი სიის ყუთები ჩამოსაშლელი სიების წინააღმდეგ, ანა კეილი (NN/g)
