iUXUI Journey VI — Searching UI Design
ไม่น่าเชื่อว่าช่องค้นหาที่ใช้อยู่ทุกวัน มันจะถูกคิดมาขนาดนี้ ง่ายๆ แต่ไม่ง่ายนะ
บทความนี้สรุปจากต้นฉบับ เกี่ยวกับ ช่องค้นหาแบบต่างๆ เพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งาน ที่สะดวกขึ้นเรื่อยๆ (ต้นฉบับ #1 #2)
AUTO-…
อย่างแรกเลย auto-focus เปิดหน้ามาปุ๊บ เคอร์เซอร์มารอที่ช่องค้น ให้เราพิมพ์ได้เลย พอเริ่มพิมพ์ก็มี auto-complete แสดงคำค้นใกล้เคียงมาให้เลือกอีก
และอย่างกรณีของหน้าเวป longdo dict กรณีที่เราค้นหาคำศัพท์ไปแล้ว เคอร์เซอร์จะ auto-select ให้ เพื่อลบคำเก่า แล้วให้เราพิมพ์คำใหม่ต่อได้เลย
FIRST, SECOND, …
ส่วนนี้เป็นเรื่องการวางลำดับ ของสิ่งที่ผู้ใช้จะเลือก เช่น ให้ใส่คำค้นก่อน ค่อยเลือกประเภทหมวดหมู่ ว่าต้องการเป็นลิงค์, รูปภาพ หรือวิดีโอ
หรือการให้ระบุสถานที่พัก ค่อยเลือกช่วงวันที่
หรือการให้ระบุสินค้าก่อน ค่อยเลือกช่วงราคา
What I want …
อีกเรื่องคือการใช้ข้อความตรง label หรือไม่ก็ place holder ในช่องค้นหา ควรเป็นคำที่ผู้ใช้อ่านเข้าใจว่าต้องการให้ตอบอะไร
มีแบบเรียงเป็นประโยคคล้ายๆ คำพูด หรือจะแสดงตัวอย่างคำตอบที่ควรพิมพ์ก็ได้
Calendar Picker
ส่วนตัวชอบอันนี้เลย เพราะมีบ้างที่เราต้องสร้าง input ที่เป็นตัวเลือก calendar แบบ start date — end date เคสที่เขายกมา คือจะทำอย่างไรให้ผู้ใช้คลิกกับกระบวนการนี้ให้น้อยที่สุด ให้เวลาคิด 300 milliseconds 😝😝😝
เฉลยเลย ทำ calendar ติดกัน
คลิกที่ช่องไหนก็ได้ 1 จึก (ช่อง start date หรือ end date) แล้วเปิด calendar ที่เป็นปฏิทินติดกันขึ้นมา default วันที่ start date เป็น current date
ให้เลือกวันที่ start date คลิกอีก 1 จึก (ไม่รวมคลิกเลื่อนปฏิทินหาวันที่นะ ^^) จากนั้นก็เลื่อน ปฏิทินของ end date ให้มากกว่า start date ไว้
แล้วผู้ใช้ก็คลิกเลือกวันที่ end date อีก 1 จึก
ทั้งหมด ผู้ใช้คลิก 3 ครั้ง
👏👏👏👏
พี่คิดเยอะ กันขนาดนี้เลยหรือนี่ ไม่น่าเชื่อว่า จากดีขึ้น มันยังมีที่ดีกว่าได้อีก นับถือๆ