ดังนั้นความแตกต่างระหว่าง Combobox, Multiselect, Listbox และ Dropdown คืออะไร? แม้ว่าส่วนประกอบ UI เหล่านี้ทั้งหมดอาจดูคล้ายกัน แต่ก็มีจุดประสงค์ที่แตกต่างกัน ตัวเลือกมักจะขึ้นอยู่กับจำนวนตัวเลือกที่มีและการมองเห็น มาดูกันว่าพวกเขาแตกต่างกันอย่างไร มีวัตถุประสงค์อะไร และจะเลือกสิ่งที่ถูกต้องได้อย่างไร เพื่อหลีกเลี่ยงความเข้าใจผิดและความคาดหวังที่ไม่ถูกต้องไปพร้อมกัน
รูปแบบรายการทั้งหมดไม่เหมือนกัน ส่วนประกอบ UI ทั้งหมดที่เน้นไว้ข้างต้นมีสิ่งหนึ่งที่เหมือนกันทุกประการ นั่นคือ รองรับการโต้ตอบของผู้ใช้กับรายการ อย่างไรก็ตาม พวกเขาทำแตกต่างออกไปเล็กน้อย มาดูกันทีละเรื่อง:
ดรอปดาวน์ → รายการจะถูกซ่อนไว้จนกว่าจะถูกทริกเกอร์ Combobox → พิมพ์เพื่อกรอง + เลือก 1 ตัวเลือก เลือกหลายรายการ → พิมพ์เพื่อกรอง + เลือกหลายตัวเลือก กล่องรายการ → ตัวเลือกรายการทั้งหมดมองเห็นได้ตามค่าเริ่มต้น (+ เลื่อน) กล่องรายการคู่ → ย้ายรายการระหว่าง 2 กล่องรายการ
กล่าวอีกนัยหนึ่ง Combobox จะรวมช่องป้อนข้อความเข้ากับรายการแบบเลื่อนลง เพื่อให้ผู้ใช้สามารถพิมพ์เพื่อกรองและเลือกตัวเลือกเดียวได้ ด้วย Multiselect ผู้ใช้สามารถเลือกตัวเลือกได้มากมาย (มักแสดงเป็นเม็ดหรือมันฝรั่งทอด) กล่องรายการจะแสดงตัวเลือกรายการทั้งหมดที่มองเห็นได้ตามค่าเริ่มต้น โดยมักจะมีการเลื่อน จะมีประโยชน์เมื่อผู้ใช้ต้องการเห็นตัวเลือกที่มีทั้งหมดทันที กล่องรายการคู่ (หรือที่เรียกว่ารายการถ่ายโอน) คือรูปแบบหนึ่งของกล่องรายการที่ช่วยให้ผู้ใช้สามารถย้ายรายการระหว่างสองกล่องรายการ (ซ้าย ↔ ขวา) โดยทั่วไปสำหรับการเลือกจำนวนมาก อย่าซ่อนตัวเลือกที่ใช้บ่อย ตามที่กล่าวไว้ข้างต้น การเลือกองค์ประกอบ UI ที่เหมาะสมจะขึ้นอยู่กับ 2 ปัจจัย ได้แก่ จำนวนตัวเลือกรายการที่พร้อมใช้งาน และตัวเลือกทั้งหมดเหล่านี้จำเป็นต้องมองเห็นโดยค่าเริ่มต้นหรือไม่ รายการทั้งหมดอาจมีโครงสร้างแบบต้นไม้ การซ้อน และการเลือกกลุ่มด้วยเช่นกัน
มีหลักการหนึ่งที่ฉันติดตามมานานหลายปีสำหรับองค์ประกอบ UI ใดๆ นั่นคือ อย่าซ่อนตัวเลือกที่ใช้บ่อย หากผู้ใช้พึ่งพาการเลือกเฉพาะบ่อยครั้ง การซ่อนตัวเลือกนั้นก็มีประโยชน์น้อยมาก เราอาจเลือกไว้ล่วงหน้าก็ได้ หรือ (หากมีตัวเลือกที่ใช้บ่อยเพียง 2-3 ตัวเลือก) ให้แสดงเป็นชิปหรือปุ่ม จากนั้นแสดงรายการที่เหลือของการโต้ตอบ โดยทั่วไป เป็นความคิดที่ดีที่จะแสดงตัวเลือกยอดนิยมเสมอ แม้ว่าอาจทำให้ UI ยุ่งเหยิงก็ตาม วิธีการเลือกอันไหน? ไม่ใช่ทุกรายการที่ต้องการวิธีการเลือกที่ซับซ้อน สำหรับรายการที่มีน้อยกว่า 5 รายการ ปุ่มตัวเลือกหรือช่องทำเครื่องหมายธรรมดาจะทำงานได้ดีที่สุด แต่หากผู้ใช้จำเป็นต้องเลือกจากรายการตัวเลือกจำนวนมาก (เช่น 200+ รายการ) Combobox + การเลือกหลายรายการจะมีประโยชน์เนื่องจากการกรองที่รวดเร็วกว่า (เช่น การเลือกประเทศ)
กล่องรายการมีประโยชน์เมื่อผู้คนต้องการเข้าถึงตัวเลือกมากมายในคราวเดียว โดยเฉพาะอย่างยิ่งหากพวกเขาจำเป็นต้องเลือกตัวเลือกมากมายจากรายการนั้นเช่นกัน สิ่งเหล่านี้อาจมีประโยชน์สำหรับตัวกรองที่ใช้บ่อย
กล่องรายการคู่มักถูกมองข้ามและละเลย แต่จะมีประโยชน์มากสำหรับงานที่ซับซ้อน เช่น การเลือกจำนวนมาก หรือการมอบหมายบทบาท งาน ความรับผิดชอบ เป็นองค์ประกอบ UI เดียวที่อนุญาตให้ผู้ใช้ตรวจสอบรายการตัวเลือกทั้งหมดเคียงข้างกับรายการแหล่งที่มาก่อนดำเนินการ (หรือที่เรียกว่า "รายการโอน") อันที่จริง กล่องรายการคู่มักจะเร็วกว่า แม่นยำกว่า และเข้าถึงได้ง่ายกว่าการลากและวาง ข้อควรพิจารณาในการใช้งาน หมายเหตุสำคัญประการหนึ่งที่ควรทราบก็คือ รายการทุกประเภทจำเป็นต้องรองรับการนำทางด้วยแป้นพิมพ์ (เช่น ปุ่มลูกศร ↑/↓) เพื่อการเข้าถึง บางคนมักจะใช้คีย์บอร์ดในการเลือกตัวเลือกเมื่อเริ่มพิมพ์
นอกเหนือจากนั้น:
สำหรับรายการที่มีตัวเลือก 7+ รายการ ให้พิจารณาเพิ่มฟังก์ชัน "เลือกทั้งหมด" และ "ล้างทั้งหมด" เพื่อปรับปรุงการโต้ตอบของผู้ใช้ สำหรับรายการที่มีความยาวด้วยคอมโบบ็อกซ์ ให้แสดงตัวเลือกทั้งหมดแก่ผู้ใช้เมื่อคลิก/แตะ ไม่เช่นนั้นตัวเลือกเหล่านั้นอาจไม่เคยเห็นเลย สิ่งสำคัญที่สุด อย่าแสดงองค์ประกอบที่ไม่โต้ตอบเป็นปุ่มเพื่อหลีกเลี่ยงความสับสน และอย่าแสดงองค์ประกอบแบบโต้ตอบเป็นป้ายกำกับแบบคงที่
สรุป: ไม่ใช่ทุกอย่างจะเป็นแบบเลื่อนลง ชื่อมีความสำคัญ โดยทั่วไปรายการตัวเลือกแนวตั้งจะอธิบายว่าเป็น "ดรอปดาวน์" แต่บ่อยครั้งที่รายการตัวเลือกนั้นกว้างเกินไปที่จะมีความหมาย “ดรอปดาวน์” บอกเป็นนัยว่ารายการถูกซ่อนไว้ตามค่าเริ่มต้น “เลือกหลายรายการ” หมายถึงการเลือกหลายรายการ (ช่องทำเครื่องหมาย) ภายในรายการ “Combobox” หมายถึงการป้อนข้อความ และ “Listbox” เป็นเพียงรายการของรายการที่เลือกได้ซึ่งมองเห็นได้ตลอดเวลา เป้าหมายไม่สอดคล้องกับคำจำกัดความข้างต้นเพื่อประโยชน์ในการนี้ แต่แทนที่จะปรับความตั้งใจ ให้พูดภาษาเดียวกันเมื่อตัดสินใจ ออกแบบ สร้าง และใช้ส่วนประกอบ UI เหล่านี้ มันควรจะทำงานเพื่อทุกคน ไม่ว่าจะเป็นนักออกแบบ วิศวกร และผู้ใช้ ตราบใดที่ป้ายกำกับแบบคงที่ไม่ดูเหมือนปุ่มแบบโต้ตอบ และปุ่มตัวเลือกจะไม่ทำหน้าที่เหมือนช่องทำเครื่องหมาย พบกับ “รูปแบบการออกแบบสำหรับอินเทอร์เฟซ AI” พบกับรูปแบบการออกแบบสำหรับอินเทอร์เฟซ AI หลักสูตรวิดีโอใหม่ของ Vitaly พร้อมตัวอย่างเชิงปฏิบัติจากผลิตภัณฑ์ในชีวิตจริง พร้อมการฝึกอบรม UX แบบสดที่กำลังจะเกิดขึ้นเร็วๆ นี้ ข้ามไปที่การแสดงตัวอย่างฟรี พบกับรูปแบบการออกแบบสำหรับอินเทอร์เฟซ AI หลักสูตรวิดีโอของ Vitaly เกี่ยวกับการออกแบบอินเทอร์เฟซและ UX
วิดีโอ + การฝึกอบรม UX วิดีโอเท่านั้นการฝึกอบรมวิดีโอ + UX$ 450.00 $ 799.00
รับวิดีโอ + การฝึกอบรม UX บทเรียนวิดีโอ 30 บทเรียน (10 ชม.) + การฝึกอบรม UX แบบสด รับประกันคืนเงิน 100 วันเฉพาะวิดีโอ$ 275.00$ 395.00
รับหลักสูตรวิดีโอบทเรียนวิดีโอ 30 บทเรียน (10 ชม.) อัปเดตทุกปี มีให้ในรูปแบบ UX Bundle พร้อมหลักสูตรวิดีโอ 3 หลักสูตร
ทรัพยากรที่เป็นประโยชน์
เติมข้อความอัตโนมัติ: แนวทาง UX โดย Vitaly Friedman Combobox โดย eBay 👍 Combobox โดย Elastic Combobox โดย เอลิซา Combobox โดย MongoDB 👍 Combobox โดย Visa 👍 Combobox โดย Watson (Docplanner) Combobox โดยวิกิมีเดีย Combobox โดย Zendesk เลือกหลายรายการ (เอกสารการออกแบบ MongoDB Combobox) โดย MongoDB 👍 การค้นหาแบบเลือกหลายรายการโดย Wikimedia กล่องคำสั่งผสมแบบเลือกได้หลายรายการ โดย Vaadin เลือกได้หลายรายการโดย Visa ถ่ายโอน (ตัวอย่างกล่องรายการ) โดย Ant Design กล่องรายการโดย Hopper กล่องรายการโดย Vaadin กล่องรายการโดย Visa ตัวเลือกรายการคู่โดย Red Hat (PatternFly) กล่องรายการคู่ โดย Salesforce (Lighting Design System) รายการโอน โดย Mantine กล่องรายการคู่โดย Dashlite ป้ายกับยากับชิปกับแท็ก โดย Vitaly Friedman กล่องรายการกับรายการแบบเลื่อนลง โดย Anna Kaley (NN/g)
