Histogram Slider

Histogram เป็นกราฟแท่งที่พล็อตต่อเนื่องเพื่อบอกจำนวนในแต่ละค่าของแนวแกน X การนำเอา Slider มาใช้กับกราฟ Histogram ก็เพื่อจำกัดช่วงที่เราต้องการเรียกข้อมูล ถ้าผู้ใช้งาน Photoshop จะพบเห็นบ่อยๆ เมื่อเรียกฟังก์ชัน Levels

ตัวอย่างการใช้ Histogram กับ Slider เพื่อบ่งบอกปริมาณข้อมูลในแต่ละช่วง

แนวคิดนี้ไปใช้กับตัวกรองราคาแบบ Slider ได้เป็นอย่างดีเลยครับ การที่มีกราฟ Histogram เพิ่มเข้ามา จะช่วยให้เรารู้ว่าแต่ละช่วงราคามีปริมาณข้อมูลมาน้อยแค่ไหน ลองดูตัวอย่างเว็บ Airbnb.com กับ Kayak.com ดูครับ ที่เอา UI นี้ไปใช้งาน

เว็บ Airbnb ที่เอา Histogram Slider ไปใช้ในการจำกัดช่วงราคาที่ต้องหาโรงแรม

เว็บ Kayak.com ใช้ Histogram กับ Slider เพื่อบ่งบอกช่วงเวลาที่สัมพันธ์กับราคา

UI เช่นนี้จะทำให้เราเห็นภาพโดยรวมของข้อมูลว่าจำนวนรายการไหนมีเยอะน้อยเพียงใดในแต่ละช่วง (ราคา, เวลา)ข้อมูลที่เรากำลังสนใจอยู่ ทำให้การค้นหาสะดวกต่อความคาดหวังของยูสเซอร์มากขึ้น