UI Design — After Search

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

Search and Filter

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

Groups with Tabs

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

“แสดงลูกค้าที่มีอายุมากกว่า 50 ปี” … ถ้าผลลัพธ์ที่ได้จากการค้นครั้งนี้พบว่า

  • ลูกค้าที่มีอายุมากกว่า 50 ปีและแอคทีฟ = 0 คน
  • ลูกค้าที่มีอายุมากกว่า 50 ปีและอินแอคทีฟ = 2 คน
  • ลูกค้าที่มีอายุมากกว่า 50 ปีและซัสเพ้นท์ = 0 คน
  • ลูกค้าที่มีอายุมากกว่า 50 ปีและสแปม = 0 คน
  • ลูกค้าที่มีอายุมากกว่า 50 ปี ทั้งหมด= 2 คน

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

Confusing Message

ทางแก้? … มีเยอะแยะมากมายแต่ด้วยเวลาที่จำกัด (อีกแล้ว ฮ่าๆ) ผมและเพื่อนเลือกที่จะสลับตำแหน่งแทบครับ เอา “ทั้งหมด” ขึ้นมาเป็นแทบแรกเพราะถ้ามีข้อมูลผู้ใช้จะเห็นข้อมูลที่ค้นหาเจอในแทบแรกเลย และถ้าไม่มีข้อมูล ข้อความที่ว่า “ไม่มีข้อมูล” จะเชื่อถือได้ 100%

New Tab Arrangement to Reduce Confusion

ไม่มีอะไรมากครับ … ปัญหาเล็กๆน้อยๆที่ไม่คาดคิดว่าจะเจอจนได้ลองใช้งานเองจริงๆ บวกกับทางแก้ง่ายๆที่เหมาะสมกับเวลาที่มี :)


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

Inthentic On Facebook | Inthentic On Twitter | Inthentic On Instagram

Like what you read? Give Piyorot a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.