รูปแบบการออกแบบที่น่าผิดหวัง: ตัวกรองที่ใช้งานไม่ได้

ตัวกรองมีอยู่ ทุก ที่ แม้ว่าเรามักจะคิดว่าตัวกรองเหล่านี้ปรากฏขึ้นเมื่อจองเที่ยวบินหรือซื้อของออนไลน์ ตัวกรองมักถูกใช้ในทุกอินเทอร์เฟซที่มีจุดข้อมูลมากกว่าหนึ่งจุด

ไม่จำเป็นว่าต้องเป็นข้อมูลจำนวนมหาศาลเท่านั้นที่เข้าใจได้ยาก ความซับซ้อนและการขาดความสม่ำเสมอ ของข้อมูลที่มักนำมาซึ่งจำเป็นต้องมีการกรอง — เช่น สถานการณ์ทั่วไปในตารางข้อมูล แดชบอร์ดขององค์กร การติดตามวัคซีน และการลงทะเบียนบันทึกสาธารณะ

การออกแบบสำหรับพื้นที่ที่สะดวกสบาย

ในฐานะลูกค้า เราใช้ตัวกรองเพื่อลดชุดตัวเลือกจำนวนมากให้เหลือตัวเลือกที่จัดการได้มากขึ้นและมีความเกี่ยวข้องสูง บางทีอาจมีสลิปการชำระเงินเพียงไม่กี่โหลแทนที่จะเป็นหลายพัน หรือเพียงแค่เสื้อเบลาส์เพียงไม่กี่ตัวแทนที่จะเป็นทั้งคอลเลกชัน

เรามีคุณลักษณะเฉพาะที่น่าสนใจ ความ ตั้งใจ เฉพาะ ที่เราจำเป็นต้องสื่อสารกับอินเทอร์เฟซ เราทำได้โดยแบ่งความตั้งใจออกเป็นชุดคุณลักษณะที่มีให้ ความตั้งใจนั้นอาจค่อนข้างเฉพาะเจาะจงหรือค่อนข้างทั่วไป แต่ในทั้งสองกรณี การออกแบบควร ลดเวลา ที่ลูกค้าต้องการจากสถานะเริ่มต้น (เมื่อไม่ได้เลือกตัวกรอง) ไปจนถึงสถานะสุดท้าย (เมื่อตัวกรองทั้งหมดใช้สำเร็จ)

นั่นเป็นเพียงส่วนหนึ่งของเรื่องราวเท่านั้น การใช้ตัวกรองที่เกี่ยวข้องเป็นส่วนที่ง่าย แต่การแสดงผลลัพธ์ที่เกี่ยวข้อง อย่างเพียงพอ นั้นยากกว่าเล็กน้อย อันที่จริงแล้ว สำหรับทุกอินเทอร์เฟซและสำหรับทุกความตั้งใจ เรามี ช่วงที่สะดวกสบาย โดยเฉพาะ นั่นคือตัวเลือกจำนวนที่ต้องการซึ่งเราคิดว่าเราสามารถจัดการได้อย่างง่ายดาย

ตัวเลือกต่างๆ นี้ไม่จำเป็นต้องพอดีกับหน้าจอเดียว หรือแสดงในหน้าเดียว หรือจำกัดให้อยู่ในรายการโปรดเล็กๆ ที่เราจำได้ง่าย มันสามารถเป็นอะไรก็ได้ตั้งแต่ หลายสิบถึงหลายร้อยรายการที่ กระจัดกระจายอยู่ในหลายหน้า

ส่วนที่สำคัญคือช่วงนี้เป็นไปตามความคาดหวังของเราที่:

• เรากำลังพิจารณาตัวเลือกที่มีความเกี่ยวข้องสูง
• เราสามารถเข้าใจสิ่งที่เรากำลังสำรวจได้อย่างง่ายดาย
• เราสามารถมองเห็นความแตกต่างระหว่างตัวเลือกทั้งหมดและ
• เราสามารถดำเนินการทุกอย่างภายในระยะเวลาที่เหมาะสมและคาดการณ์ได้

ต่างจาก sorting ซึ่งเพียงแค่ จัดเรียง ผลลัพธ์ใหม่ตามแอตทริบิวต์ที่ต้องการ ( ขอบเขตที่นุ่มนวล ) ตัวกรองจะแสดง ขอบเขตที่ยากเสมอ พวกเขาจำกัดขอบเขตของผลลัพธ์อย่างเคร่งครัด ตัวกรองและผู้ใช้ที่เหมาะสมไม่เพียงพอในการถ่ายภาพในระยะที่สบาย ตัวกรองและผู้ใช้จำนวนมากเกินไปจบลงด้วยผลลัพธ์ที่เป็นศูนย์และละทิ้งไซต์โดยสิ้นเชิง

ช่วงที่สะดวกสบาย แตกต่างกันไป ในแต่ละผลิตภัณฑ์ ตัวชี้นำที่มันอยู่สามารถอนุมานได้จากความแตกต่างของตัวเลือกจริง ๆ ในการทดสอบการใช้งาน เราพบว่าผู้คนไม่มีปัญหาในการสำรวจยานพาหนะ 20-30 ชนิด รองเท้าผ้าใบ 40-50 ชนิด ดอกไม้ 70-80 ช่อดอกไม้ หรือแม้แต่การแบ่งหน้าผ่าน 100-200 สลิปการชำระเงิน แต่พวกเขารู้สึกท่วมท้นอย่างเต็มที่เมื่อสำรวจความคมชัด 15 แบบหรือแบตเตอรี่ AAA ตามหลักการทั่วไป ดูเหมือนว่ายิ่งตัวเลือก ต่างกัน มากเท่าไร เราก็ยิ่งรู้สึกสบายใจกับชุดตัวเลือกที่ใหญ่ขึ้นเล็กน้อยเท่านั้น

คำถามสุดท้ายคือจะค้นหาเครื่องชั่งที่ละเอียดอ่อนได้อย่างไร เมื่ออินเทอร์เฟซของเราช่วยให้ผู้ใช้ได้รับผลลัพธ์ ที่เพียงพอ อย่างรวดเร็ว คำตอบหนึ่งสำหรับคำถามนั้นอยู่ในสิ่งที่ฟังดูชัดเจนอย่างยิ่ง: ขจัดสิ่งกีดขวาง บนถนนของผู้ใช้ไปสู่ช่วงที่สะดวกสบายนั้น เขียนได้ง่ายกว่าทำเสร็จ — โดยเฉพาะอย่างยิ่งเมื่อคุณมีตัวกรองหลายสิบหรือหลายร้อยตัวที่ต้องสามารถเข้าถึงได้บนมือถือ บนเดสก์ท็อป และทุกที่ในระหว่างนั้น

ความซับซ้อนของการกรอง

เมื่อมองแวบแรก การกรองดูเหมือนจะไม่ใช่ความพยายามที่ซับซ้อนเป็นพิเศษ แน่นอน เราสามารถมีการอภิปรายยาวเกี่ยวกับองค์ประกอบของแบบฟอร์มที่เหมาะสมสำหรับตัวกรองประเภทต่างๆ เช่น การเติมข้อความอัตโนมัติ วิทยุ การสลับ การเลือกดรอปดาวน์ แถบเลื่อน และปุ่ม เป็นต้น แต่โดยพื้นฐานแล้ว องค์ประกอบแบบฟอร์มทั้งหมดเป็นเพียงพื้นฐาน อินพุตใช่ไหม

ปรากฏว่ามีประสบการณ์ค่อนข้างน้อยที่ทำให้การออกแบบตัวกรอง ค่อนข้างยาก :

• ตัวกรองสามารถมีได้ หลายรสชาติ และรูปทรง สำหรับราคา การให้คะแนน สี วันที่ เวลา ขนาด ยี่ห้อ ความจุ คุณลักษณะ ระดับประสบการณ์ ช่วงอายุ อาการ สถานะผลิตภัณฑ์ ฯลฯ
• ตัวกรองมักจะ มีจำนวนมาก และจำเป็นต้องแสดงผ่านหน้าจอต่างๆ
• ตัวกรองมักมี สถานะ ต่างกัน (เลือกแล้ว ไม่ได้เลือก ปิดใช้งาน)
• ตัวกรองมักต้องการ ค่าดีฟอลต์ที่สมเหตุสมผล และต้องจำข้อมูลที่ผู้ใช้ป้อน
• ตัวกรองสามารถ พึ่งพาซึ่งกันและกัน ได้ และการพึ่งพาเหล่านี้จำเป็นต้องชัดเจน
• ตัวกรองอาจ ตรวจสอบได้ยาก เช่น เมื่อผู้ใช้สามารถพิมพ์ข้อมูลที่ซับซ้อนได้ เช่น เวลาหรือวันที่
• ตัวกรองต้องสนับสนุนและแสดงข้อความแสดง ข้อผิดพลาดที่ มีความหมาย
• และอื่น ๆ อีกมากมาย

ตัวกรองไม่เคยมีอยู่ด้วยตัวเอง ไม่ทางใดก็ทางหนึ่ง สิ่งเหล่านี้เชื่อมโยงกับผลลัพธ์ที่พวกเขาดำเนินการอยู่เสมอ การเชื่อมต่อนี้มักจะทำให้ตัวกรองและผลลัพธ์การจับคู่ค่อนข้าง ซิงโครนั ส เนื่องจากส่วนหลังขึ้นอยู่กับความเร็วที่ UI ลงทะเบียนอินพุต และเวลาที่ใช้ในการดำเนินการให้สำเร็จ

ในตอนนี้ การจัดการกับความสลับซับซ้อนของความท้าทายแต่ละอย่างไม่ใช่เรื่องยากเลย แต่ปัญหาบางอย่างก็น่าหงุดหงิดมากกว่าปัญหาอื่นๆ เล็กน้อย ทำให้ประสบการณ์โดยรวมเจ็บปวดและน่ารำคาญ และทำให้เกิดการละทิ้งสูงและอัตราตีกลับสูง ลองสำรวจบางส่วนที่สำคัญ

หลีกเลี่ยงบานหน้าต่างที่เลื่อนได้เล็ก ๆ

หลังจากเซสชันการใช้งานเพียงไม่กี่เซสชันกับลูกค้าที่พยายามใช้ตัวกรองในอุปกรณ์ของตนเอง เราอาจสังเกตเห็น ความผิดหวังทั่วไปที่ เกิดขึ้นซ้ำแล้วซ้ำอีก รูปแบบที่น่ารำคาญที่สุดรูปแบบหนึ่งมาจากส่วนตัวกรองที่มีความยาวซึ่งมีตัวเลือกมากมาย ตัวเลือกเหล่านี้มักจะซ่อนอยู่ในบานหน้าต่างแบบเลื่อนได้ขนาดเล็ก โดยแสดงตัวเลือกครั้งละ 3-4 ตัวเลือก และต้องเลื่อนในแนวตั้งเพื่อเรียกดูตัวเลือกต่างๆ

ส่วนเหล่านี้มักทำให้ลูกค้าเลื่อนในแนวตั้ง ช้า แม่นยำ พร้อมโฟกัสและความแม่นยำสูงสุด เมื่อใช้บนอุปกรณ์เคลื่อนที่ ตัวกรองบางตัวจะเปิดใช้งานโดยไม่ได้ตั้งใจ กระตุ้นให้ลูกค้ามีสมาธิมากขึ้น ตัวอย่างคลาสสิกของรูปแบบนี้คือตัวกรอง "แบรนด์" ซึ่งมักมีตัวเลือกนับร้อย จัดเรียงตามความนิยมหรือตามตัวอักษร

อีกทางเลือกหนึ่งคือแสดงตัวเลือกได้มากถึง 7–10 ตัวต่อครั้งพร้อมกับหีบเพลงที่จะขยายและแสดงตัวเลือกทั้งหมดเมื่อแตะ/คลิก ตัวเลือกเหล่านี้ไม่จำเป็นต้องแสดงเต็มความสูง แต่สามารถอยู่ใน บานหน้าต่างที่เลื่อนได้ขนาดใหญ่กว่า แต่ไม่ควรเปิดใช้งานโดยเลื่อนผ่านบานหน้าต่าง

ยังเป็นความคิดที่ดีที่จะเสริมตัวกรองด้วยการเติมข้อความอัตโนมัติในการค้นหาและมุมมองตามตัวอักษร หากตัวเลือกยอดนิยมบางตัวถูกเน้นที่ด้านบน ตัวอย่างที่ดีคือ Rozetka.ua ผู้ค้าปลีกอีคอมเมิร์ซจากยูเครน (ดูด้านบน)

ให้การป้อนข้อความสำรองสำหรับตัวเลื่อนเสมอ

เมื่อใดก็ตามที่ผู้ใช้สามารถกำหนดค่าที่ หลากหลาย ไม่ว่าจะเป็นช่วงราคาในร้านค้าปลีก ระยะเวลาสูงสุดของการเดินทางโดยรถไฟ หรือความคุ้มครองขั้นต่ำ/สูงสุดสำหรับแผนประกัน เราอาจจะใช้ ตัวเลื่อน บางประเภท แถบเลื่อนทั้งหมดมีสิ่งหนึ่งที่เหมือนกัน: แถบเลื่อนเหล่านี้ยอดเยี่ยมเมื่อเราต้องการกระตุ้นให้ลูกค้าสำรวจตัวเลือกมากมายอย่างรวดเร็ว แต่จะค่อนข้างน่าผิดหวังเมื่อผู้ใช้มีสิ่งที่เฉพาะเจาะจงในใจ และด้วยเหตุนี้จึงต้องแม่นยำกว่านี้อีกเล็กน้อย

ลองนึกถึงความหงุดหงิดที่เรามักจะต้องเจอเมื่อขึ้นราคาเล็กน้อย จาก 200 ดอลลาร์เป็น 215 ดอลลาร์ หรือเพิ่มอีกชั่วโมงระหว่างเที่ยวบิน การใช้ตัวเลื่อนเป็นเรื่องยากเพราะต้องใช้ความแม่นยำอย่างเหลือเชื่อ ซึ่งมักก่อให้เกิดข้อผิดพลาดและทำให้เกิดความหงุดหงิด

เราได้อธิบายวิธีออกแบบตัวเลื่อนที่สมบูรณ์แบบอย่างละเอียดแล้ว แต่คุณสมบัติที่สำคัญที่สุดที่ตัวเลื่อนทุกตัวต้องการก็คือการรองรับ ความเร็ว ในการโต้ตอบที่แตกต่างกัน อันที่จริง มีปฏิสัมพันธ์ทั่วไปสองสามประเภท:

• เมื่อลูกค้าต้องการสำรวจตัวเลือกมากมายอย่างรวดเร็ว ตัวเลื่อนที่ดีพร้อมแทร็กและนิ้วหัวแม่มือก็ใช้งานได้ดี
• เมื่อลูกค้าต้องการความแม่นยำในการสำรวจมากขึ้น เราสามารถช่วยได้โดย การเพิ่ม steppers (+/-) สำหรับการข้ามไปข้างหน้าและข้างหลังแบบละเอียด
• เมื่อลูกค้ามีค่าที่แน่นอนในใจ เราก็สามารถช่วยได้ด้วยการ ป้อนข้อความ สำหรับค่าต่ำสุด/สูงสุด เพื่อให้ผู้ใช้สามารถพิมพ์ค่าได้โดยตรงโดยไม่ต้องใช้ตัวเลื่อน
• ในกรณีเหล่านี้ทั้งหมด โซลูชันจะต้องสามารถเข้าถึงได้และสนับสนุนการโต้ตอบด้วยคีย์บอร์ดเท่านั้น

ดูตัวอย่างของ Lloydsbank ด้านล่าง เครื่องคำนวณสินเชื่อส่วนบุคคลรองรับการโต้ตอบทุกประเภทอย่างสวยงาม นอกจากนี้ ให้สังเกตลักษณะการโฟกัสเมื่อเปิดใช้งานนิ้วหัวแม่มือ และช่วงที่แสดงด้านล่างแถบเลื่อนอัตราดอกเบี้ยที่ด้านบนเพื่อระบุว่าลูกค้ากำลังนำทางไปที่ใด อัตราดอกเบี้ยเปลี่ยนแปลงขึ้นอยู่กับจำนวนเงินที่ลูกค้าต้องการกู้ยืม

อีกตัวอย่างที่น่าสนใจของตัวเลื่อนที่ออกแบบมาอย่างดีมาจาก Sofasizer ของ Made.com ซึ่งช่วยให้คุณกรองโซฟาตามขนาดที่ต้องการได้ แทนที่จะใช้ชุดช่องป้อนข้อมูล Made.com เลือกใช้อินเทอร์เฟซแบบภาพที่มีไอคอน "ปรับขนาด" คุณสามารถลากจุดจับเพื่อปรับขนาด หรือคุณสามารถพิมพ์ค่าที่แน่นอนในช่องป้อนข้อมูลความสูงและความกว้าง

ไม่เลื่อนผู้ใช้อัตโนมัติในอินพุตเดียว

คุณเคยไปที่นั่นมาก่อน บางทีคุณอาจมุ่งหน้าไปที่ร้านค้าปลีกด้วยความตื่นตาตื่นใจ คลิกลิงก์หมวดหมู่ที่ถูกต้องทั้งหมด ปัดไปทางซ้ายและขวาผ่านการนำทางย่อย และมองเข้าไปในแล็ปท็อปเครื่องใหม่ที่เป็นประกายซึ่งตอนนี้คุณพร้อมที่จะทำสำเร็จแล้วในที่สุด สิ่งที่รอคุณอยู่ต่อไปอาจไม่ใช่ประสบการณ์ที่คุณหวังว่าจะได้ตามใจตัวเอง ดูตัวอย่างด้านล่าง คุณมองเห็นสิ่งที่ดูเหมือนจะเกิดขึ้นหรือไม่?

ในตัวอย่างนี้จาก Dell.com เมื่อคุณเลือกคุณลักษณะแล็ปท็อปของคุณ จะมีการลงทะเบียนเพียงอินพุตเดียวในแต่ละครั้ง หากคุณเลือกหลายตัวเลือกอย่างรวดเร็ว ระบบจะใช้เฉพาะอินพุตสุดท้ายเท่านั้น และเมื่อ มี การลงทะเบียนข้อมูลเข้า หน้าจะรีเฟรช โดยส่งลูกค้าไปที่ด้านบนสุดของแถบด้านข้างการกรอง ซึ่งหมายความว่ายิ่งคุณต้องการใช้ตัวกรองมากขึ้น และโดยปกตินำทางจากบนลงล่าง คุณยิ่งต้องเลื่อนลงไปเรื่อยๆ เพื่อค้นหาตัวกรองที่เหมาะสม

สาเหตุที่การใช้งานนี้เป็นเรื่องธรรมดาไม่ใช่เพราะเราต้องการเลื่อนลูกค้าไปที่ด้านบนสุดของพื้นที่ ตัวกรอง โดยอัตโนมัติ แต่เป็นเพราะเราต้องการผลักดันพวกเขาไปยัง ด้านบนสุดของผลลัพธ์ผลิตภัณฑ์ โดยใช้ตัวกรอง การติดอยู่ตรงกลางรายการจะไม่เป็นประโยชน์อย่างยิ่งเมื่อคุณใช้ตัวกรองใหม่ และที่จริงแล้ว การแสดงด้านบนสุดของผลลัพธ์นั้นดีกว่าทุกครั้งที่อัปเดตตัวกรอง แต่ไม่ได้หมายความว่าเราจำเป็นต้องเลื่อนตัวกรองอัตโนมัติเช่นกัน

ที่จริงแล้ว แม้ว่าคุณจะต้องการระบุคุณลักษณะเพียง 6-10 อย่างด้วยวิธีนี้ คุณจะต้องเริ่มการ ต่อสู้แบบดุดันเพื่อต่อต้านการเลื่อนอัตโนมัติ โดย มีเพียงตัวกรองเดียวที่ลงทะเบียนในแต่ละครั้ง คุณ สามารถ แตะหรือคลิกตัวกรองหลายตัวพร้อมกันได้ แต่ในกรณีนี้ น่าเสียดายที่ UI จะไม่ตอบสนองตามที่คาดไว้ ประสบการณ์โดยรวมค่อนข้างน่าผิดหวังและสับสน เนื่องจากเว็บไซต์รู้สึกช้า และต้องใช้ความพยายามมากขึ้นเรื่อยๆ ในการกรองต่อไป ไม่ใช่ตัวอย่างที่ดีที่สุดในการลดเวลาจากสถานะเริ่มต้นเป็นสถานะสุดท้าย

วิธีหนึ่งในการแก้ไขปัญหาเหล่านี้คือการ ลบการเลื่อนอัตโนมัติสำหรับตัวกรองทั้งหมด และหาวิธีที่ดีกว่าในการระบุว่าสามารถป้อนข้อมูลได้ครั้งละหนึ่งรายการเท่านั้น ตัวอย่างเช่น เราสามารถตรึงอินเทอร์เฟซทั้งหมดและปิดใช้งานอินพุตใดๆ จนกว่าข้อมูลใหม่จะกลับมาจากเซิร์ฟเวอร์ จากนั้นเราต้องรอให้มีการฉีดผลลัพธ์ใหม่เข้าไปใน DOM จากนั้นจึงให้ UI กลับมา แม้ว่าจะชัดเจนกว่าโซลูชันก่อนหน้านี้เล็กน้อย แต่กลับกลายเป็นว่ามีปัญหาในตัวเอง

ไม่เคยหยุด UI บนอินพุตเดียว

ทุกครั้งที่เราตรึง UI ไว้ในอินพุตเดียว เราจะพยายามทำให้ลูกค้าของเราแสดงเจตจำนงช้าลง อันที่จริง เราทำให้มันยุ่งยากขึ้นเล็กน้อยสำหรับพวกเขาในการระบุสิ่งที่พวกเขาสนใจ โดยจัดลำดับความสำคัญของการแสดงผลลัพธ์มากกว่าอินพุต ดูเหมือนว่าจะจัดลำดับความสำคัญผิด ลองมาดูตัวอย่างด้านล่างกัน

ที่ Sears.com ทุกครั้งที่ทำการเลือก ไม่เพียงแต่ UI จะถูกบล็อกอย่างสมบูรณ์เท่านั้น ผู้ใช้จะถูกผลักไปที่ด้านบนของหน้าด้วย ตัวกรองที่มีหีบเพลงอยู่ด้วย (เช่น "ดูเพิ่มเติม" ใน "แบรนด์") เป็นเรื่องที่น่าหงุดหงิดเป็นพิเศษ ในทุกตัวกรองใหม่ ผู้ใช้ต้องเลื่อนลงและเปิดหีบเพลงเพื่อค้นหาแอตทริบิวต์เฉพาะที่ต้องการเลือก Walmart (ดูตัวอย่างด้านล่าง) เป็นไปตามรูปแบบเดียวกัน

ในกรณีเหล่านี้ เราจำเป็นต้องพึ่งพา JavaScript เพื่อสลับไปมาระหว่างสถานะการหยุดนิ่งและสถานะการทำงานอย่างน่าเชื่อถือ แม้ว่าข้อมูลจะไม่กลับมาจากเซิร์ฟเวอร์ หรือกลับมาช้า หรืออยู่ในรูปแบบที่ไม่ถูกต้อง นั่นเป็นข้อสันนิษฐานที่ค่อนข้างเปราะบางที่จะพึ่งพา

แน่นอนว่าเราไม่รู้ว่าผู้ใช้ป้อนข้อมูล เสร็จแล้ว เมื่อใด แต่มีเหตุผลเพียงเพื่อให้แน่ใจว่าในระหว่างการโต้ตอบกับตัวกรอง ทั้งหมด ลูกค้า ไม่ต้องรอให้อินเทอร์เฟซตอบกลับ ทีนี้ ถ้าเราดูสามตัวอย่างข้างต้นให้ละเอียดยิ่งขึ้น เราจะสังเกตเห็นความคล้ายคลึงกันอย่างหนึ่ง พวกเขา ทั้งหมด ใช้ตัวกรองทั้งหมดโดยอัตโนมัติตามการเลือก ปิดใช้งานการเลือกเพิ่มเติมใดๆ จนกว่าหน้าผลลัพธ์ใหม่จะกลับมา

อย่างไรก็ตาม เป็นเรื่องปกติที่ลูกค้าจะ เพิ่มตัวกรองหลายตัวอย่างรวดเร็ว บางครั้งอยู่ในหมวดหมู่เดียวกัน พฤติกรรมของ UI ไม่สนับสนุนเจตนานี้เป็นอย่างดี

แล้วเรามีทางเลือกอื่นไหม? ทางเลือกที่ชัดเจนคือการมอบการตัดสินใจให้กับผู้ใช้ว่าควรอัปเดตผลลัพธ์เมื่อใด นั่นอาจหมายถึงการเพิ่ม ปุ่ม "ใช้" และกระตุ้นให้ลูกค้าเลือกตัวกรองทั้งหมดก่อนที่จะเห็นผลลัพธ์ ใดๆ แต่ไม่จำเป็นต้องเป็นทางเลือกเดียว ที่จริงแล้ว เราสามารถทำได้ทั้งสองอย่าง: ดูผลลัพธ์ที่เป็นปัจจุบันขณะโต้ตอบกับตัวกรองโดยไม่ชักช้า เราแค่ต้องย้ายจากการแสดงผลลัพธ์แบบซิงโครนัสไปเป็นแบบอะซิงโครนัส

แสดงผลแบบอะซิงโครนัสเสมอ

เราได้กล่าวไปแล้วว่าตัวกรองและผลการจับคู่มักจะค่อนข้างซิงโครไนซ์ อย่างไรก็ตาม เราสามารถ แบ่งส่วนต่างๆ ของ UI และแสดงผลทั้งสองส่วนแยกกันแบบอะซิงโครนัสได้ ในกรณีดังกล่าว ในทุกอินพุตของตัวกรอง ผลลัพธ์ที่ตรงกันสามารถอัปเดตแบบอะซิงโครนัสได้ ในขณะที่ตัวกรองยังคงเข้าถึงได้เสมอและอยู่ที่เดิม ทุกๆ อินพุตตัวกรองใหม่ ผู้ใช้จะเห็นการสตรีมเนื้อหาใหม่เข้ามาอย่างรวดเร็ว

ตัวอย่าง BestBuy ด้านบนแสดงรูปแบบดังกล่าวในการดำเนินการ ขณะที่เราเลือกตัวกรองในแถบด้านข้างทางซ้าย ตัวกรองจะถูกนำไปใช้ในพื้นหลังในขณะที่เราสามารถเลือกตัวกรองได้มากขึ้นเรื่อยๆ หากเราเลือกที่จะทำเช่นนั้น รายการผลิตภัณฑ์ได้รับการอัปเดตแบบอะซิงโครนัส: จะไม่มีสถานะปิดใช้งานเนื่องจากเนื้อหาใหม่จะถูกเติมลงในรายการผลลัพธ์ที่ตรงกันทุกครั้งที่ข้อมูลได้รับกลับมาจากเซิร์ฟเวอร์

เราสามารถทำให้ชัดเจนขึ้นอีกเล็กน้อยโดยแสดงให้เห็นว่ามีการโหลดผลิตภัณฑ์ใหม่เข้ามาในขณะที่มีการใช้ตัวกรองใหม่ ตัวอย่างที่ดีคือ Coolblue โดยมี UI การกรองแถบด้านข้างแบบอะซิงโครนัสปรากฏทางด้านซ้ายมือ

ควรเน้นที่จุดนี้ว่าทุกข้อมูลป้อนเข้าในพื้นที่ตัวกรองต้องมีการลงทะเบียน จากนั้นจึงนำไปใช้กับรายการผลิตภัณฑ์ เราสังเกตเห็นว่าสำหรับลูกค้าจำนวนมากนั้นเป็นพฤติกรรมที่คาดหวัง เว้นแต่คุณจะเก็บปุ่ม "ใช้" แบบลอยตัวไว้ใกล้กับพื้นที่ตัวกรอง

หลีกเลี่ยงการเลื่อนเค้าโครงบนตัวกรองอินพุต

ตราบใดที่อินเทอร์เฟซไม่ได้ปิดกั้นการป้อนข้อมูล แน่นอนว่าลูกค้าคาดหวังว่าจะสามารถตั้งค่าตัวกรองได้ทีละจำนวน อย่างไรก็ตาม ขึ้นอยู่กับตำแหน่งของตัวกรอง ในบางครั้งอาจพบ การเปลี่ยนเลย์เอาต์โดยไม่ได้ตั้งใจ ดังนั้นพวกเขาจึงต้องปรับทิศทางตัวเองบนหน้าอีกครั้ง เลื่อนขึ้นและลงเพื่อค้นหาตำแหน่งที่เหลือ จากนั้นดำเนินการป้อนข้อมูลถัดไป ดูตัวอย่างด้านล่าง ดูเหมือนว่าจะมีปัญหาอะไรใน VictoriaPlum (แสดงด้านล่าง)

ทุกครั้งที่ผู้ใช้โต้ตอบกับตัวกรอง เมื่อมีรายการผลิตภัณฑ์ใหม่เข้ามา จะมีการเปลี่ยนแปลงเล็กน้อยในพื้นที่การกรอง มักมีสาเหตุสามประการที่เกิดขึ้น:

• ในทุกอินพุตตัวกรอง ส่วนตัวกรองที่ขยายโดยลูกค้าจะยุบโดยอัตโนมัติ
• ตัวกรองที่มีอยู่ก่อนหน้านี้จะใช้งานไม่ได้และถูกซ่อน ทำให้ความสูงของพื้นที่การกรองลดลง
• ภาพรวมของตัวกรองที่ใช้อยู่เหนือพื้นที่ตัวกรอง ดังนั้นเมื่อตัวกรองใหม่มีขนาดโตขึ้น ตัวกรองจะดันตัวกรองลงเช่นกัน

เพื่อหลีกเลี่ยงปัญหาแรก เราจำเป็นต้อง รักษาสถานะของหีบเพลง และเปิดไว้ แม้ว่าผู้ใช้จะตั้งค่าตัวกรองใหม่หรือรีเฟรชหน้าก็ตาม เรายังต้องเก็บการตั้งค่าการกรองไว้เมื่อมีการรีเฟรชหรือการนำทาง อันที่จริง เราเห็นลูกค้าคาดหวังว่าตัวกรองจะ ยังคงถูกนำไปใช้ แม้ว่าพวกเขาจะกลับไปที่หมวดหมู่หรือหน้าก่อนหน้า (เช่น ด้วยปุ่ม "ย้อนกลับ")

สำหรับปัญหาที่สอง หากไม่มีตัวกรองอีกต่อไป แทนที่จะซ่อนโดยอัตโนมัติ เราสามารถปิดใช้งานได้ แต่ยัง อธิบายด้วยว่าเหตุใดจึงปิดใช้งาน (คำแนะนำที่เป็นมิตรอาจช่วยได้) และสิ่งที่ต้องทำเพื่อเปิดใช้งานอีกครั้ง . เรายังสามารถเพิ่มตัวเลือกเพื่อ "ซ่อนตัวเลือกที่ไม่พร้อมใช้งานทั้งหมด" ได้อีกด้วย

สุดท้าย เราอาจต้องพิจารณาตำแหน่งของตัวกรองที่ใช้เหนือพื้นที่ตัวกรองใหม่ มีตัวเลือกไม่มากนักที่สามารถมีชีวิตอยู่ได้ และตัวเลือกที่ดีกว่าน่าจะเป็นพื้นที่ที่อยู่เหนือการกรองผลลัพธ์

แสดงตัวกรองเหนือผลลัพธ์

เพื่อหลีกเลี่ยงการเปลี่ยนเลย์เอาต์ทั้งหมด เราสามารถแสดงตัวกรองที่ใช้ อยู่เหนือผลลัพธ์ของผลิตภัณฑ์ ซึ่งจะทำให้พื้นที่การกรองมีเสถียรภาพและคาดการณ์ได้ในระหว่างการโต้ตอบกับผู้ใช้ทั้งหมด อันที่จริงไม่จำเป็นต้องมองเห็นได้ตลอดเวลา ในตัวอย่างด้านล่าง Crate & Barrel ช่วยให้ลูกค้าสามารถซ่อนและแสดงตัวกรองตามต้องการ ในขณะที่ตัวกรองที่ใช้จะเพิ่มไปยังพื้นที่เฉพาะด้านบนผลิตภัณฑ์ โปรดทราบว่ามีตัวเลือกในการล้างตัวกรองทั้งหมดด้วย (หน้าผลิตภัณฑ์มีการเปลี่ยนแปลงตั้งแต่บันทึกวิดีโอ)

อีกทางเลือกหนึ่งคือเปลี่ยนส่วนตัวกรองทั้งหมดเป็นภาพซ้อนทับ และแสดงส่วนเหล่านี้เมื่อแตะ/คลิกเหนือผลลัพธ์ ที่จริงแล้ว คุณสามารถใช้ ตัวกรองแบบลอย ได้ ดังนั้นในขณะที่ลูกค้าเลื่อนหน้าลงมา ตัวกรองจะยังสามารถเข้าถึงได้ตลอดเวลา

ตัวอย่างของรูปแบบนี้คือ Adidas (ดูภาพด้านล่าง) แถบตัวกรองเป็นแบบถาวร แม้ว่าผู้ใช้จะเลื่อนหน้าลง ตัวกรองซ้อนทับ จะไม่ปิดโดยอัตโนมัติ — จำเป็นต้องมีการป้อนข้อมูลของผู้ใช้ และมอบการควบคุมให้กับผู้ใช้อีกครั้ง อย่างไรก็ตาม ระบบจะปิดโดยอัตโนมัติเมื่อเลือกตัวกรองใดตัวกรองหนึ่งแล้ว หากผู้ใช้ต้องการเลือกตัวกรองหลายตัว จะต้องเปิดกลุ่มตัวกรองเดิมซ้ำแล้วซ้ำอีก การรักษาตัวกรองให้คงอยู่อาจเป็นความคิดที่ดีกว่า ยังคงผลลัพธ์: ไม่มีการเปลี่ยนเลย์เอาต์ ไม่มีการเลื่อนที่น่าหงุดหงิดในทางเดินแคบๆ และตัวกรองต่างๆ ที่เข้าถึงได้เสมอ

ไม่ต้องบอกว่าการแสดงตัวกรองเหนือผลลัพธ์ จะ ดีกว่าโดยค่าเริ่มต้นเสมอ ใน Asos ทุกอินพุตตัวกรองจะทำให้การข้ามไปที่ด้านบนของหน้า ดังนั้นลูกค้าต้องเลื่อนลงมาด้วยตนเองเพื่อกรองต่อ แทนที่จะแสดงซ้ำทั้งหน้า การแสดงพื้นที่ตัวกรองและรายการผลิตภัณฑ์ใหม่แยกจากกันจะเหมาะสมกว่า

โดยทั่วไปแล้ว สองตัวเลือกแรก (Crate & Barrel และ Adidas) ดูเหมือนจะทำงานได้ดีมาก และพวกเขาเหลือพื้นที่สำหรับแสดงผลิตภัณฑ์มากขึ้น ในขณะที่หลีกเลี่ยงปัญหาทั้งหมดที่เรากล่าวถึงก่อนหน้านี้ นั่นเป็นรูปแบบที่ค่อนข้างน่าเชื่อถือที่จะใช้เมื่อเราต้องการหลีกเลี่ยงสิ่งกีดขวางบนถนนหรือความสับสน แต่เรายังสามารถทำอะไรได้อีกเล็กน้อย เช่น ด้วยปุ่ม "ใช้" ที่ดี

แสดงจำนวนผลลัพธ์บนปุ่ม “สมัคร”

เกือบจะรู้สึกค่อนข้างจะเก่าไปหน่อยที่มีปุ่ม "ใช้" สำหรับตัวกรองในช่วงเวลาที่เราคุ้นเคยกับการโต้ตอบที่ราบรื่นและราบรื่น การเฟดอิน และแอนิเมชั่นตามกำหนดเวลา อย่างไรก็ตาม หากเราต้องการผลักดันลูกค้าไปสู่ช่วงที่สะดวกสบาย แทบไม่มีวิธีใดที่จะดีไปกว่า การแสดงจำนวนผลลัพธ์โดยเร็วที่สุด

Ikea มีตัวกรองที่ด้านบนของผลลัพธ์ บางครั้งฟิลเตอร์จะปรากฏในโอเวอร์เลย์แบบเลื่อนลง และบางครั้งปรากฏเป็นเม็ดยาด้านล่างฟิลเตอร์ แต่โดยส่วนใหญ่ ซึ่งแตกต่างจากตัวอย่างก่อนหน้านี้ เมื่อเลือกตัวกรอง ตัวกรองจะแสดง แถบด้านข้าง mega-filter-overlay ทางด้านขวาพร้อมตัวเลือกการกรองที่มีอยู่ทั้งหมดซึ่งจัดกลุ่มไว้ที่นั่น ขณะที่ลูกค้ากำลังดำเนินการผ่านตัวกรอง รายการผลิตภัณฑ์จะได้รับการอัปเดตในเบื้องหลังแบบอะซิงโครนัส ที่สำคัญกว่านั้น ให้สังเกตปุ่ม "ใช้" ซึ่งป้ายกำกับจะเปลี่ยนไปตามอินพุต

ทุกครั้งที่ป้อนตัวกรอง คำขอใหม่จะถูกส่งไปยังเซิร์ฟเวอร์ ดึงจำนวนผลลัพธ์ แล้วแสดงหมายเลขนั้นใน UI นั่นเป็นวิธีที่ยอดเยี่ยมในการทำให้ผู้ใช้เข้าใจได้ชัดเจนว่าตนอยู่ไกลหรือใกล้แค่ไหนไปยังระยะที่สบาย

อีกตัวอย่างหนึ่งคือ Galaxus.ch (ดูด้านล่าง) ผู้ค้าปลีกอีคอมเมิร์ซของสวิสที่ให้ประสบการณ์ชั้นหนึ่งในการกรอง ตัวกรองจะแสดงอยู่เหนือผลลัพธ์ของผลิตภัณฑ์ ตัวกรองซ้อนทับปรากฏขึ้นเมื่อแตะ/คลิก ไม่มีการชะลอตัว เวลาตอบสนองที่รวดเร็ว และการผสานรวมฟิลเตอร์ที่ใช้งานได้ดีเข้ากับพื้นที่ตัวกรอง ตัวอย่างอ้างอิงที่ดี ซึ่งควรค่าแก่การพิจารณาเมื่อออกแบบตัวกรองชนิดใดก็ได้

โดยทั่วไป การมี ปุ่ม "ใช้" พร้อมกับการอัปเดตพื้นที่เนื้อหาแบบเรียลไทม์ดูเหมือนจะทำงานได้ดีที่สุด มันรวมเอาสิ่งที่ดีที่สุดของทั้งสองวิธีเข้าด้วยกัน: แสดงผลทันทีเมื่อมาถึงในขณะที่ยังคงเข้าถึงตัวกรองได้ตลอดเวลา

หลีกเลี่ยงการแบ่งหน้าจอบนมือถือ

ปัญหาที่เราได้สำรวจในบทความใช้กับหน้าจอขนาดใหญ่และขนาดเล็กเท่าๆ กัน อย่างไรก็ตาม ในหน้าจอขนาดเล็ก และโดยเฉพาะอย่างยิ่งในการเชื่อมต่อที่ช้า ปัญหาเหล่านี้จะยิ่งมีความสำคัญมากขึ้นไปอีก โดยส่วนใหญ่ อินเทอร์เฟซมักจะบล็อก UI ทั้งหมด บนอินพุตตัวกรองเดียว ทำให้เกิดความล่าช้าอย่างมากสำหรับลูกค้าที่ต้องเดินทาง (เช่น Crutchfield, Walgreens) ในทางกลับกัน เป็นเรื่องปกติที่จะแบ่งหน้าจอเพื่อแสดงการซ้อนทับตัวกรอง ในขณะที่ยังคงแสดงรายการผลิตภัณฑ์ที่อัปเดตในพื้นหลัง (เช่น Nordstrom)

อย่างไรก็ตาม โดยทั่วไปแล้ว อาจเป็นความคิดที่ดีกว่าที่จะทดสอบว่าการ ซ้อนทับแบบเต็มหน้า สำหรับตัวกรองจะทำงานได้ดีกว่าหรือไม่ ให้พื้นที่มากขึ้นในการทดสอบด้วยมุมมองแบบหลายคอลัมน์ หรือแม้กระทั่งแสดงพื้นที่ที่กวาดนิ้วได้เพื่อเลือกตัวกรองโดยไม่ต้องย้ายระหว่างหน้าต่างๆ อันที่จริง การใช้หีบเพลงที่สามารถยุบและขยายได้ แทนที่จะนำผู้ใช้ไปยังหน้าแยกอาจเป็นความคิดที่ดี — คล้ายกับที่เราได้พูดถึงกับ mega-dropdowns

ไม่เหมือนบนเดสก์ท็อป การมีปุ่ม "ใช้" ในตัวอย่างทั้งหมดนี้มีความสำคัญ และคุณสามารถทำให้มันมีประโยชน์มากขึ้นเล็กน้อยโดยการเพิ่มจำนวนผลิตภัณฑ์เป็นป้ายกำกับบนปุ่ม และทำให้ปุ่มติดหนึบอยู่ที่ด้านล่างขณะที่ผู้ใช้เลื่อนลง .

รายการตรวจสอบการออกแบบการกรอง

ตามปกติแล้ว นี่คือสิ่งที่ควรคำนึงถึงเมื่อออกแบบตัวกรองใดๆ — ผู้ช่วยเล็กน้อยเพื่อหลีกเลี่ยงการพลาดรายละเอียดที่สำคัญก่อนที่จะไปพูดคุยกับนักออกแบบและนักพัฒนาของคุณ คุณสามารถค้นหารายการตรวจสอบรูปแบบการออกแบบอินเทอร์เฟซอัจฉริยะ เต็ม รูปแบบได้ที่ Smashing Magazine ของคุณอย่างแท้จริงเช่นกัน

1. เราสามารถหลีกเลี่ยงไอคอนตัวกรองและแสดงตัวกรองตามที่เป็นอยู่ได้หรือไม่?
2. ถ้าไม่ ไอคอนใดที่เราเลือกเพื่อระบุการกรอง
3. ไอคอน + ช่องว่างภายในมีขนาดใหญ่พอสำหรับการแตะอย่างสบายหรือไม่
4. เราใส่ไอคอนที่ด้านบน ด้านล่าง หรือลอย (มือถือ/เดสก์ท็อป)?
5. จะเกิดอะไรขึ้นเมื่อผู้ใช้คลิก/แตะที่ไอคอน
6. ไอคอนจะเปลี่ยนไปอย่างไรเมื่อแตะ/คลิก
7. เราจะมีแอนิเมชั่นหรือการเปลี่ยนแปลงเมื่อคลิกหรือไม่?
8. ตัวกรองจะปรากฏเป็นแบบเต็มหน้า/ซ้อนทับบางส่วนหรือเลื่อนเข้าหรือไม่
9. เราสามารถหลีกเลี่ยงการกรองแถบด้านข้างที่มักจะช้าได้หรือไม่
10. เราเปิดเผยตัวกรองยอดนิยมหรือที่เกี่ยวข้องโดยค่าเริ่มต้นหรือไม่
11. เราแสดงจำนวนผลลัพธ์ที่คาดหวังสำหรับแต่ละตัวกรองหรือไม่
12. เราสามารถใช้เครื่องรูดแนวนอนเพื่อย้ายไปมาระหว่างตัวกรองได้หรือไม่?
13. เราสามารถหลีกเลี่ยงการดรอปดาวน์และใช้เฉพาะปุ่ม/ชิป + สลับได้หรือไม่
14. สำหรับตัวกรองที่ซับซ้อน เรามีการค้นหาภายในตัวกรองหรือไม่
15. เราใช้ไอคอนเพื่ออธิบายความแตกต่างระหว่างตัวกรองต่างๆ หรือไม่
16. เราใช้องค์ประกอบที่เหมาะสมสำหรับตัวกรอง เช่น ตัวเลื่อน ปุ่ม ตัวสลับหรือไม่
17. ใช้ตัวกรองโดยอัตโนมัติ (ใช่ สำหรับสไลด์อิน) หรือไม่
18. ใช้ตัวกรองด้วยตนเองในการยืนยัน (“ใช้”) (ใช่ สำหรับการซ้อนทับ) หรือไม่
19. เราจะสื่อสารตัวกรองที่เลือกไว้แล้วได้อย่างไร
20. ตัวกรองที่เลือกสามารถปรากฏเป็นยาเม็ด ชิป หรือแท็กที่ถอดออกได้หรือไม่
21. เราแนะนำตัวกรองที่เกี่ยวข้องตามการเลือกหรือไม่
22. เราติดตามความไม่ลงรอยกันระหว่างตัวกรองที่เลือกหรือไม่?
23. ข้อความแสดงข้อผิดพลาดหรือคำเตือนปรากฏใน UI อย่างไร
24. เราอนุญาตให้ลูกค้ารีเซ็ตตัวกรองทั้งหมดอย่างรวดเร็วในครั้งเดียวหรือไม่
25. ตัวกรอง (หรือปุ่มตัวกรอง) ลอยอยู่บนการเลื่อนบนมือถือ/เดสก์ท็อปหรือไม่
26. ผู้ใช้สามารถแตะจุดเดียวกันเพื่อเปิด/ปิดตัวกรองได้หรือไม่

ห่อ

บ่อยครั้งที่ประสบการณ์การกรองบนเว็บใช้งานไม่ได้และน่าหงุดหงิด ทำให้ลูกค้าเข้าถึงผลลัพธ์ที่เกี่ยวข้องได้อย่างสะดวกสบาย โดยไม่จำเป็น เมื่อออกแบบตัวกรองถัดไป ให้พิจารณาปัญหาทั่วไปบางประการที่คุณอาจต้องการหลีกเลี่ยง และหวังว่าจะหลีกเลี่ยงความยุ่งยากทั้งหมดที่เกิดจากการใช้งานที่เสียหายและไม่สามารถเข้าถึงได้

• ออกแบบสำหรับตัวเลือกที่สะดวกสบาย สำหรับกรณีที่ลูกค้าต้องการเพิ่มตัวกรองหลายตัวอย่างรวดเร็ว ทีละตัว
• สำหรับกลุ่มตัวกรองที่มีความยาว ให้ หลีกเลี่ยงบานหน้าต่างที่เลื่อนได้เล็กๆ และแสดงตัวเลือกได้มากถึง 7–10 ตัวเลือกในแต่ละครั้งพร้อมกับหีบเพลงที่จะขยายและแสดงตัวเลือกทั้งหมดเมื่อแตะ/คลิก เพิ่มการเติมข้อความค้นหาอัตโนมัติและมุมมองตามตัวอักษรด้วย
• เพิ่ม ช่องสเต็ป (+/-) และป้อนข้อความ เสมอเมื่อใช้ตัวเลื่อน
• ลูกค้ามักต้องการตั้งค่าตัวกรองประเภทเดียวกันจำนวนหนึ่ง ไม่เลื่อนผู้ใช้โดยอัตโนมัติในอินพุตเดียว และอย่ายุบกลุ่มตัวกรองโดยอัตโนมัติ
• ไม่เคยหยุด UI ในอินพุตเดียว และไม่เคยทำให้ลูกค้าของคุณรอให้อินเทอร์เฟซตอบสนองเมื่อตั้งค่าตัวกรอง
• อัปเดตตัวกรองเสมอและแสดงผล แบบอะซิงโครนัส เพื่อให้ในทุกอินพุตตัวกรอง ผลลัพธ์ที่ตรงกันสามารถอัปเดตแบบอะซิงโครนัสได้ ในขณะที่ตัวกรองยังคงเข้าถึงได้เสมอและอยู่ที่เดิม
• หลีกเลี่ยงการเปลี่ยนเล ย์เอาต์ของอินพุตตัวกรองเสมอ และพิจารณาแสดงตัวกรองเหนือผลลัพธ์
• บนมือถือ ปุ่ม "สมัคร" อาจติดอยู่ที่ด้านล่างของหน้าจอ อัพเดท จำนวนสินค้า และแสดงบนปุ่ม

บทความของ The Series

หากคุณพบว่าบทความนี้มีประโยชน์ ต่อไปนี้คือภาพรวมของบทความที่คล้ายคลึงกันที่เราได้เผยแพร่ในช่วงหลายปีที่ผ่านมา และบทความอื่นๆ ที่กำลังจะตามมาสำหรับคุณ

• หีบเพลงที่สมบูรณ์แบบ
• ตัวปรับแต่งการตอบสนองที่สมบูรณ์แบบ
• เครื่องมือเลือกวันเกิดที่สมบูรณ์แบบ
• เครื่องมือเลือกวันที่และเวลาที่สมบูรณ์แบบ
• สุดยอด Mega-Dropdown
• การเปรียบเทียบคุณสมบัติที่สมบูรณ์แบบ
• ตัวเลื่อนที่สมบูรณ์แบบ
• หนังสือรูปแบบการออกแบบแบบฟอร์มโดย Adam Silver เผยแพร่บน SmashingMag
• สมัครรับจดหมายข่าวทางอีเมลของเราเพื่อไม่ให้พลาดข่าวสารต่อไป