The System Labเรียน → แบ่งปัน → พิสูจน์Learn → Share → Prove
แกลเลอรีGallery

This page is written in Thai. An English translation is planned.

TSL · The System Lab┊ Design of Everyday Things┊ ┊บทเรียนLesson 03 ┊ ┊0% ┊
Design of Everyday Things · บทเรียนที่Lesson 03

Signifiers, Affordances, Discoverability

foundation · ~45 นาที

แหล่งข้อมูล: _wiki/semantic/affordances.md, _wiki/semantic/signifiers.md, _wiki/semantic/six-fundamental-principles.md, _wiki/episodic/norman-doors.md, raw/source-notes.md

1. THE BIG IDEA

Affordance คือสิ่งที่เป็นไปได้ระหว่าง object กับ agent; signifier คือสิ่งที่ผู้ใช้รับรู้ว่า "ทำตรงไหน/อย่างไร" Design ที่ดีไม่ได้หวังให้ความเป็นไปได้ซ่อนอยู่ในวัตถุ แต่ทำให้ action ที่ถูกต้องค้นพบได้ผ่าน signifier, constraints, mapping, feedback และ conceptual model

2. FIRST PRINCIPLES BREAKDOWN

Principle: Affordance เป็น relationship ไม่ใช่ property

มันคือความสัมพันธ์ระหว่างคุณสมบัติของสิ่งของกับความสามารถของผู้ใช้ ถ้าเก้าอี้หนักเกินกว่าคนหนึ่งจะยก สำหรับคนนั้น affordance ของการยกไม่มีอยู่

ถ้าละเลย: จะออกแบบโดยคิดว่า "ปุ่มมีอยู่แล้ว คนควรรู้" ทั้งที่ผู้ใช้บางกลุ่มอาจไม่เห็น ไม่เข้าใจ หรือทำไม่ได้

Principle: Signifier ต้อง perceivable

Signifier คือ mark, sound, indicator หรือ cue ที่สื่อว่าควรทำอะไรตรงไหน

ถ้าละเลย: action อาจเป็นไปได้ แต่ผู้ใช้ไม่ค้นพบ เช่น ประตูที่ต้องผลักตรง unsupported edge แต่ไม่มี clue ให้รู้

Principle: Discoverability = action possibilities + where/how

ผู้ใช้ต้องรู้ทั้งว่าทำอะไรได้และทำอย่างไร ไม่ใช่แค่มี function อยู่ในระบบ

ถ้าละเลย: ระบบมี capability แต่เหมือนถูกซ่อน ผู้ใช้ต้องลองผิดลองถูกหรือพึ่งป้ายชั่วคราว

3. THE MENTAL MODEL

โมเดลที่ควรจำ:

affordance = possible action
perceived affordance = possible action the user can detect
signifier = perceivable cue that tells where/how to act
discoverability = user can find possible actions and understand them

จุดสับสนหลัก: คนมักเรียก handle, button, icon ทุกอย่างว่า affordance ทั้งที่ในภาษา Norman หลายอย่างทำหน้าที่เป็น signifier มากกว่า โดยเฉพาะใน digital interface ที่หน้าจอสัมผัส "afford" การแตะเกือบทุกที่ จึงต้องใช้ signifier เพื่อบอกว่าแตะตรงไหน

4. WORKED EXAMPLE

กรณี Norman doors:

  1. ประตูกระจกมี affordance ทางกายภาพ: ผลักได้/ดึงได้/หมุนได้บางทิศ
  2. แต่ designer ซ่อน hardware, hinges, pillars เพื่อความสวย
  3. ผู้ใช้จึงไม่เห็น signifier ว่าควรผลักด้านไหน
  4. ผู้ใช้ผลักฝั่ง hinge แล้วประตูไม่เปิด
  5. ปัญหาไม่ใช่ผู้ใช้โง่ แต่ system image ไม่บอก behavior ที่เหมาะสม
  6. วิธีแก้ไม่จำเป็นต้องทำป้ายใหญ่: ใส่ vertical plate ฝั่ง push หรือทำ supporting pillars ให้มองเห็น เพื่อให้เป็น natural signifier

5. COMMON MISTAKES

Mistake 1: คิดว่า affordance ต้องมองเห็นเสมอ

ทำไมคนพลาด: ในการพูดทั่วไปมักใช้ affordance หมายถึง cue ที่มองเห็น

ความเข้าใจที่ถูก: affordance อาจมีอยู่แม้มองไม่เห็น ถ้ามองไม่เห็นจึงต้องมี signifier

Mistake 2: ใช้ label แทน design

ทำไมคนพลาด: ป้าย "push/pull" แก้เร็วและราคาถูก

ความเข้าใจที่ถูก: สำหรับ object ง่ายอย่างประตู ถ้าต้องติดป้ายเพื่อใช้งานพื้นฐาน นั่นมักเป็นสัญญาณว่า design สื่อสารไม่ดี

Mistake 3: มอง signifier เป็นของตกแต่ง

ทำไมคนพลาด: เห็น signifier เป็น text/icon/visual detail

ความเข้าใจที่ถูก: signifier คือ behavior communication ถ้ามันผิดหรือไม่ชัด ผู้ใช้จะสร้าง action ผิด

6. CONNECT TO OTHER TOPICS

Depends on: six fundamental principles

Enables: Gulf of Execution เพราะผู้ใช้รู้ว่าจะทำอะไรได้

Often confused with: affordances vs signifiers

How to tell apart: ถ้าถามว่า "ทำได้ไหม" คือ affordance; ถ้าถามว่า "ผู้ใช้รู้ไหมว่าทำตรงไหน" คือ signifier

7. SELF-TEST

Surface: นิยาม affordance และ signifier อย่างละหนึ่งประโยค

Strong answer: Affordance คือ relationship ที่ทำให้ action เป็นไปได้; signifier คือ cue ที่สื่อว่าควร action ที่ไหน/อย่างไร

Understanding: ทำไมหน้าจอ touchscreen ทำให้คำว่า affordance สับสน

Strong answer: เพราะหน้าจอแตะได้แทบทุกจุด จึงมี affordance กว้างมาก แต่ผู้ใช้ยังไม่รู้ว่า action ที่มีความหมายอยู่ตรงไหน ต้องพึ่ง signifier

Mastery: เลือกประตูหรือ interface หนึ่งชิ้น แล้วระบุ affordance, signifier, และ discoverability failure

Strong answer: แยก possible action ออกจาก perceivable cue ได้ และบอกได้ว่า failure อยู่ที่ไม่มี cue, cue misleading, หรือ cue ไม่ตรงกับ action

8. KEY QUOTES FROM SOURCE

  • "Affordances determine what actions are possible."
  • "Signifiers communicate where the action should take place."
  • "We need both."

9. TL;DR

  • Affordance = ทำอะไรได้; signifier = รู้ว่าทำตรงไหน/อย่างไร
  • ถ้า action เป็นไปได้แต่ค้นไม่เจอ design ยังไม่สำเร็จ
  • ประตูที่ต้องติดป้ายคือบทเรียนใหญ่ของ discoverability failure