กลับไปหน้า Design
ทริคDesign

UX ของตารางข้อมูล

ตารางที่อ่านเร็ว: ตัวเลขชิดขวา หัวตรึง เส้นจางพอดี และไฮไลต์เฉพาะจุดที่ต้องเห็น.

เริ่มอ่านตรงนี้ก่อน

อธิบายแบบง่าย

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

ระดับ

เหมาะกับคนที่เริ่มลงมือทำแล้ว

ใช้เมื่อไหร่

ตารางในรายงานหรือแอปถูกบ่นว่า "ดูแล้วลายตา หาไม่เจอ"

อ่านแล้วทำอะไรต่อ

จัดตัวเลขชิดขวา ใส่ conditional formatting เฉพาะคอลัมน์ variance แถวอื่นปล่อยสะอาด — ผู้ใช้เห็นจุดผิดปกติใน 3 วินาที

เห็นภาพ: ทริคนี้เป็นยังไง

ลายตา

ตัวเลขกึ่งกลาง หลักไม่ตรง เส้นหนาทุกช่อง ระบายสีทุกคอลัมน์ หัวตารางเลื่อนหาย

อ่านเร็ว

ตัวเลขชิดขวา หลักตรงกัน เส้นแนวนอนจางๆ พอ ไฮไลต์เฉพาะ variance หัวตารางตรึงไว้

ตารางลายตา เทียบกับตารางที่จัดตามกฎ — ข้อมูลเดียวกันแต่อ่านเร็วต่างกันมาก

ใช้ตอนไหน?

  • ตารางในรายงานหรือแอปถูกบ่นว่า "ดูแล้วลายตา หาไม่เจอ"
  • ผู้ใช้ต้องเทียบตัวเลขระหว่างแถว เช่น ยอดขายต่อสาขา
  • ตารางยาวจนเลื่อนแล้วลืมว่าคอลัมน์ไหนคืออะไร

ความหมาย

data table UX คือชุดวิธีจัดตารางข้อมูลให้กวาดตาเร็วและเทียบค่าง่าย — จัดตำแหน่งตามชนิดข้อมูล (ตัวเลขชิดขวาเพื่อเทียบหลัก ข้อความชิดซ้าย) ตรึงหัวตาราง ลดเส้นรบกวน และวางเครื่องมือเรียง/กรองไว้ตรงหัวคอลัมน์ที่คนคาดหวัง ใช้ได้ทั้งใน Excel, Power BI table visual และหน้าจอแอป

กฎจัดตารางที่ใช้ได้ทุกเครื่องมือ

หลักคือลดสิ่งรบกวนและจัดให้สายตาเทียบค่าได้เอง

1. ตัวเลขชิดขวา + ทศนิยมเท่ากัน -> เทียบหลักได้ทันที
2. ข้อความชิดซ้าย / วันที่รูปแบบเดียวกันทั้งคอลัมน์
3. ตรึงหัวตาราง (freeze) เมื่อเกิน 1 จอ
4. เส้นแนวนอนจางๆ พอ — ตัดเส้นแนวตั้งทิ้งได้เกือบเสมอ
5. ไฮไลต์เฉพาะแถว/ค่าที่ต้องการให้เห็น ไม่ระบายทุกอย่าง

ตัวอย่างการใช้

ตารางยอดขายใน Power BI

จัดตัวเลขชิดขวา ใส่ conditional formatting เฉพาะคอลัมน์ variance แถวอื่นปล่อยสะอาด — ผู้ใช้เห็นจุดผิดปกติใน 3 วินาที