← ทำไมตาถึงอ่านกราฟนี้ได้เร็วกว่า
LEVEL 3 · ระดับสูง
ตาเดินยังไงบนหน้าเดียว
สิบบทแรกพูดถึงการเข้ารหัสค่าหนึ่งชุดด้วยช่องทางหนึ่งช่อง ตั้งแต่บทนี้ไปโจทย์เปลี่ยน — บนหน้ากระดาษจริงมีของหลายชิ้นอยู่พร้อมกัน และสายตาจะจัดกลุ่มมันให้เสร็จก่อนที่คุณจะได้พูดอะไรสักคำ
คำถามของบทนี้จึงไม่ใช่ "จะเข้ารหัสยังไง" อีกต่อไป แต่เป็น "ใครเป็นคนตัดสินว่าอะไรอยู่พวกเดียวกัน"
11.1 ระยะห่างพูดแทนคุณ ไม่ว่าคุณจะตั้งใจหรือไม่
สองแถวนี้มีของแปดชิ้นเท่ากัน ไม่มีตัวเลขไหนต่างกันเลย แต่แถวบนคุณเห็นเป็นสี่กลุ่มทันทีโดยไม่มีเส้น ไม่มีกรอบ ไม่มีสีมาช่วย ส่วนแถวล่างเห็นเป็นแปดชิ้นที่ไม่เกี่ยวอะไรกัน
สิ่งเดียวที่เปลี่ยนคือระยะห่าง — ซึ่ง คุณเป็นคนกำหนดทุกครั้งที่วางของลงบนสไลด์
ทุกครั้งที่คุณวางของสองชิ้นไว้ใกล้กัน คุณกำลังบอกคนอ่านว่ามันเป็นพวกเดียวกัน
นี่คือเหตุผลที่คำอธิบายสัญลักษณ์ในบทที่ 2 ถึงแพ้การติดป้ายใต้แท่ง ไม่ใช่แค่เพราะต้องกวาดสายตาไปกลับ แต่เพราะระยะห่างกำลังบอกว่าป้ายไม่ได้เป็นพวกเดียวกับแท่ง ทั้งที่มันคือของชิ้นเดียวกัน
11.2 กฎการจับกลุ่มที่ตาใช้
ความใกล้เป็นตัวที่แรงที่สุด แต่ไม่ใช่ตัวเดียว หลักการจัดกลุ่มของสายตาถูกรวบรวมไว้ตั้งแต่ต้นศตวรรษที่ 20 โดยกลุ่มนักจิตวิทยาสาย Gestalt และที่ใช้ได้จริงในงานกราฟมีอยู่ห้าข้อ
| กฎ | ตาจะจับเป็นพวกเดียวกันเมื่อ | ใช้ทำอะไรได้ |
|---|---|---|
| ความใกล้ | อยู่ใกล้กันกว่าของอื่น | จัดกลุ่มโดยไม่ต้องวาดอะไรเพิ่มเลย |
| ความคล้าย | หน้าตาเหมือนกัน (สี ขนาด รูปทรง) | โยงของที่อยู่คนละที่ให้เป็นชุดเดียว |
| การล้อมกรอบ | อยู่ในกรอบหรือแถบสีเดียวกัน | แรงที่สุด แต่กินหมึกมากที่สุดด้วย |
| ความต่อเนื่อง | เรียงตัวอยู่บนแนวเดียวกัน | ทำให้ตาไหลไปตามเส้นแนวโน้ม |
| การเคลื่อนไหวร่วม | ขยับไปทางเดียวกัน | ใช้ได้เฉพาะบนจอ ไม่ใช่บนกระดาษ |
สังเกตว่าสามข้อแรกเรียงจากถูกที่สุดไปแพงที่สุด ความใกล้ไม่กินหมึกเลยสักหยด ความคล้ายกินช่องทางหนึ่งช่อง ส่วนการล้อมกรอบกินทั้งหมึกและช่องทาง
บทที่ 7 บอกให้ลบหมึกที่ไม่บอกอะไร บทนี้บอกว่าลบยังไงไม่ให้เสียการจัดกลุ่ม — คำตอบคือแทนที่กรอบด้วยระยะห่าง ซึ่งให้ผลเหมือนกันโดยไม่เสียหมึกสักหยด
11.3 ลองขยับระยะห่างเอง
"""ความใกล้ตัดสินการจับกลุ่ม — ข้อมูลชุดเดิม เปลี่ยนแค่ระยะห่าง แล้วกลุ่มที่ตาเห็นเปลี่ยนตาม"""
LABELS = ["ก", "ข", "ค", "ง", "จ", "ฉ", "ช", "ซ"]
def layout(gap_in, gap_between):
"""วาง 8 จุดเป็น 4 คู่ · gap_in = ระยะในคู่ · gap_between = ระยะระหว่างคู่"""
xs, x = [], 0.0
for i in range(len(LABELS)):
xs.append(x)
x += gap_in if i % 2 == 0 else gap_between
return xs
def clusters(xs, threshold):
"""จับกลุ่มแบบ single-linkage: ห่างกันไม่เกิน threshold = กลุ่มเดียวกัน"""
groups, cur = [], [0]
for i in range(1, len(xs)):
if xs[i] - xs[i - 1] <= threshold:
cur.append(i)
else:
groups.append(cur)
cur = [i]
groups.append(cur)
return groups
def show(name, gap_in, gap_between, threshold):
xs = layout(gap_in, gap_between)
gs = clusters(xs, threshold)
print(f"=== {name} ===")
print(f" ระยะในคู่ {gap_in} px · ระหว่างคู่ {gap_between} px · เกณฑ์สายตา {threshold} px")
print(f" ตำแหน่ง: {[round(v) for v in xs]}")
print(f" ตาเห็นเป็น {len(gs)} กลุ่ม: "
+ " | ".join("".join(LABELS[i] for i in g) for g in gs))
return xs
show("จัดชิดเป็นคู่", 26, 74, 40)
print()
show("จัดห่างเท่ากันหมด", 50, 50, 40)
print()
print("ข้อมูลเหมือนกันทั้งสองแบบ — 8 รายการชุดเดิม ไม่มีตัวเลขไหนเปลี่ยน")
print("สิ่งที่เปลี่ยนคือระยะห่าง ซึ่งคนทำภาพเป็นคนกำหนด และตาจับกลุ่มตามนั้นทันที")ผลรันจริง
=== จัดชิดเป็นคู่ ===
ระยะในคู่ 26 px · ระหว่างคู่ 74 px · เกณฑ์สายตา 40 px
ตำแหน่ง: [0, 26, 100, 126, 200, 226, 300, 326]
ตาเห็นเป็น 4 กลุ่ม: กข | คง | จฉ | ชซ
=== จัดห่างเท่ากันหมด ===
ระยะในคู่ 50 px · ระหว่างคู่ 50 px · เกณฑ์สายตา 40 px
ตำแหน่ง: [0, 50, 100, 150, 200, 250, 300, 350]
ตาเห็นเป็น 8 กลุ่ม: ก | ข | ค | ง | จ | ฉ | ช | ซ
ข้อมูลเหมือนกันทั้งสองแบบ — 8 รายการชุดเดิม ไม่มีตัวเลขไหนเปลี่ยน
สิ่งที่เปลี่ยนคือระยะห่าง ซึ่งคนทำภาพเป็นคนกำหนด และตาจับกลุ่มตามนั้นทันที⚠️ ค่า threshold ในสคริปต์เป็นแบบจำลองของเกณฑ์สายตา ไม่ใช่ค่าที่วัดจากคน ของจริงขึ้นกับขนาดภาพและระยะมอง สิ่งที่สคริปต์นี้พิสูจน์ได้จริงคือ ความสัมพันธ์ — พอสัดส่วนระยะเปลี่ยน จำนวนกลุ่มเปลี่ยนตามแบบไม่ต่อเนื่อง ไม่ใช่ค่อย ๆ เปลี่ยน
11.4 ภาพชุดชนะภาพเดียวที่ยัดทุกอย่าง
พอรู้ว่าตาจับกลุ่มด้วยความใกล้ ทางออกของ "ข้อมูลเยอะเกินกราฟเดียว" ก็เปลี่ยนไป
วิธีที่คนทำกันคือยัดทุกเส้นลงกราฟเดียว แล้วแยกด้วยสี ซึ่งพังสองชั้นพร้อมกัน — บทที่ 2 บอกว่าเกินสองสามสีก็เลิกเด้ง และบทที่ 5 บอกว่าสีอยู่ขั้นล่างสุดของบันได
ทางที่ตรงกับกลไกมากกว่าคือ แยกเป็นภาพเล็กหลายภาพที่ใช้แกนเดียวกัน วางเรียงกัน แต่ละภาพมีเส้นเดียว ผลคือการเทียบข้ามภาพกลายเป็นการเทียบ ตำแหน่งบนแกนคนละตัว ซึ่งเป็นขั้นที่สองของบันได แทนที่จะเป็นการแยกสีซึ่งอยู่ขั้นล่างสุด
ขึ้นจากขั้น 7 ไปขั้น 2 ของบันได โดยไม่ได้เปลี่ยนข้อมูลเลยสักตัว — เงื่อนไขเดียวคือทุกภาพต้องใช้แกนเดียวกันเป๊ะ ไม่งั้นการเทียบข้ามภาพจะโกหกทันที ด้วยกลไกเดียวกับบทที่ 9