ความหนาแน่นของข้อมูลใน B2B SaaS: การออกแบบแดชบอร์ดสำหรับผู้ใช้ระดับสูงและมือใหม่
วิธีการออกแบบแดชบอร์ดและตาราง B2B ที่หนาแน่นซึ่งผู้เชี่ยวชาญสามารถสแกนได้อย่างรวดเร็วโดยไม่ต้องมีผู้ใช้ใหม่มากเกินไป: โหมดความหนาแน่น ลำดับชั้น การเปิดเผยข้อมูลแบบก้าวหน้า
หลัก Takeaway
อินเทอร์เฟซที่หนาแน่นไม่ใช่ปัญหา พวกที่ไม่เป็นระเบียบคือ ผู้เชี่ยวชาญต้องการข้อมูลเพิ่มเติมต่อหน้าจอ ดังนั้นให้แสดงลำดับชั้นที่ชัดเจน การจัดตำแหน่งที่สอดคล้องกัน และแผนภูมิที่ใช้ตำแหน่งและความยาว ปกป้องมือใหม่ด้วยค่าเริ่มต้นที่สมเหตุสมผลและการเปิดเผยข้อมูลแบบก้าวหน้า และให้ผู้คนเลือกระดับความหนาแน่นได้ เช่นเดียวกับระบบการออกแบบ เช่น Carbon ที่ทำกับตาราง
ความหนาแน่นเป็นคุณลักษณะสำหรับผู้เชี่ยวชาญ
คนที่ใช้เครื่องมือ B2B ตลอดทั้งวัน เช่น นักวิเคราะห์ ตัวแทนฝ่ายสนับสนุน และผู้ปฏิบัติงาน มักจะต้องการดูเพิ่มเติมในคราวเดียว เนื่องจากการเลื่อนและสลับแท็บทำให้เสียเวลา การทำให้ทุกอย่างกว้างขวางเพื่อภาพหน้าจอที่สะอาดตาอาจทำให้งานช้าลงได้ เป้าหมายคือข้อมูลที่มีความหนาแน่นแต่สแกนได้ง่าย
ให้คนเลือกความหนาแน่น
ขณะนี้ระบบการออกแบบสร้างความหนาแน่นให้กับส่วนประกอบต่างๆ ตัวอย่างเช่น ตารางข้อมูล Carbon ของ IBM มีความสูงห้าแถว ตั้งแต่ขนาดเล็กพิเศษ (24px) สำหรับเลย์เอาต์ที่มีความหนาแน่นสูง ไปจนถึงขนาดใหญ่พิเศษ (64px) เพื่อให้สแกนได้ง่ายขึ้น โดยมีขนาดกลาง (40px) เป็นค่าเริ่มต้น
- เสนอการตั้งค่าความหนาแน่นสองหรือสามแบบ โดยจดจำไว้ต่อผู้ใช้
- เปลี่ยนระยะห่างและความสูงของแถว ไม่ใช่ขนาดตัวอักษรหรือคอนทราสต์
- รักษาเป้าหมายการสัมผัสให้ใหญ่เพียงพอบนอุปกรณ์สัมผัสโดยไม่คำนึงถึงความหนาแน่น
ลำดับชั้นทำให้สามารถอ่านความหนาแน่นได้
Nielsen Norman Group กำหนดแดชบอร์ดว่าเป็นการแสดงภาพที่ให้ข้อมูลโดยสรุปที่ผู้คนสามารถดำเนินการได้อย่างรวดเร็ว และแนะนำการเข้ารหัสปริมาณที่มีความยาวและตำแหน่ง 2D ซึ่งผู้คนจะอ่านได้เร็วที่สุด ในทางปฏิบัติ: วางตัวเลขสองสามตัวที่ขับเคลื่อนการตัดสินใจไว้ด้านบน จัดทุกอย่างให้เป็นตาราง ใช้สีสำหรับความหมายเท่านั้น (สถานะ การแจ้งเตือน) และจัดตัวเลขให้ชิดขวาเพื่อให้สามารถเปรียบเทียบได้
ปกป้องมือใหม่โดยไม่ทำให้ผู้เชี่ยวชาญช้าลง
การเปิดเผยข้อมูลแบบก้าวหน้าทำให้ตัวเลือกขั้นสูงพร้อมใช้งานแต่ก็ไม่สามารถทำได้ เริ่มต้นผู้ใช้ใหม่ด้วยมุมมองเริ่มต้นที่เน้น ปล่อยให้พวกเขาเพิ่มคอลัมน์ ตัวกรอง และวิดเจ็ตตามที่พวกเขาต้องการ และบันทึกมุมมองเพื่อให้ผู้เชี่ยวชาญสามารถกลับสู่การตั้งค่าที่หนาแน่นได้ทันที
การเคลื่อนไหวในอินเทอร์เฟซที่หนาแน่น
ในหน้าจอที่มีข้อมูลจำนวนมาก การเคลื่อนไหวควรอธิบายการเปลี่ยนแปลง ไม่ใช่การตกแต่ง: เน้นค่าที่เพิ่งอัปเดต ทำให้แถวเคลื่อนไหวในตำแหน่งที่จัดเรียงใหม่ หรือแสดงการเปลี่ยนแปลงของแผนภูมิเพื่อให้ผู้คนสามารถติดตามสิ่งที่เคลื่อนไหวได้ ทำให้มันสั้นและหลีกเลี่ยงแอนิเมชั่นต่อเนื่องที่แข่งขันกับข้อมูล
คีย์ Principles ที่ต้องจำ
- ผู้เชี่ยวชาญจะได้รับประโยชน์จากหน้าจอที่หนาแน่น ความระส่ำระสายคือปัญหาที่แท้จริง
- เสนอการตั้งค่าความหนาแน่นโดยการเปลี่ยนระยะห่าง ไม่ใช่ขนาดประเภทหรือความคมชัด
- ใช้ความยาวและตำแหน่งสำหรับตัวเลข สีเพื่อความหมายเท่านั้น
- การเปิดเผยข้อมูลแบบก้าวหน้าช่วยปกป้องสามเณร
- ใช้การเคลื่อนไหวเพื่ออธิบายการเปลี่ยนแปลงของข้อมูล ไม่ใช่เพื่อการตกแต่ง
คำถามที่พบบ่อย
แหล่งที่มา
- Data table usage — ระบบการออกแบบคาร์บอน (IBM)
- Dashboards: Making Charts and Graphs Easier to Understand — Nielsen Norman Group
- Progressive Disclosure — Nielsen Norman Group