UX Terminology: "Affordance" คืออะไร? – ออกแบบ UI ยังไงให้ Intuitive

UX Terminology: "Affordance" คืออะไร? – ออกแบบ UI ยังไงให้ Intuitive

Share:

1+

“Good designs are intuitive” – งานออกแบบที่ดี คือ งานที่สามารถสื่อสารได้ด้วยตัวของมันเอง UI Design ก็เหมือนกับเรื่องตลก ถ้าต้องอธิบายว่ามันตลกยังไง นั่นก็แปลว่ามันไม่เวิร์กละ ปรากฎการณ์ที่คนเข้าใจ หรือไม่เข้าใจว่างานออกแบบของเราต้องการสื่ออะไร อธิบายได้ด้วย UX Terminology: “Affordance”

Norman Door

Don Norman (ศาสตราจารย์ Cognitive science) ผู้เขียนหนังสือ “The Design of Everyday Things” ได้อธิบายปรากฎการณ์ Affordance จากบานประตู

“Norman Door” คือ ประตูธรรมดาที่คนเปิดผิดด้านบ่อย ๆ ไม่แน่ใจว่าตัวเองต้อง “ผลัก” หรือต้อง “ดึง” เพื่อเปิดกันแน่ ถ้าใครเคยพลาดเปิดประตูผิดด้าน แสดงว่าตัวเองเจอ Norman Door เข้าให้เเล้ว

ประตูที่ออกแบบมาไม่ดี ต้องมีป้ายบอกให้คนรู้ว่าต้อง "ดึง" หรือ "ผลัก" (Credit: Robert W Williams)
ประตูที่ออกแบบมาไม่ดี ต้องมีป้ายบอกให้คนรู้ว่าต้อง “ดึง” หรือ “ผลัก” (Credit: Robert W Williams)

Affordance คืออะไร?

Affordance เป็นความสัมพันธ์ระหว่างผู้ใช้งานกับวัตถุ เกิดขึ้นเมื่อผู้ใช้งานเห็นลักษณะของวัตถุแล้วรับรู้ว่า “สามารถมีปฏิสัมพันธ์ทางกายภาพ (Physically Action) กับวัตถุนั้นอย่างไรบ้าง” เช่น เวลาที่เราเห็นด้ามจับประตู เราก็จะรู้ได้ทันทีว่าต้องหมุนด้ามจับเพื่อเปิด การรับรู้ว่า “หมุนเพื่อเปิดได้” คือ Affordance ของประตู

Credit: Adrien Olczak
Credit: Adrien Olczak
  • ปุ่ม: รับรู้ว่า “กดได้”
  • สวิตซ์: รับรู้ว่า “เปิดปิดได้”
  • ปุ่มวิทยุ: รับรู้ว่า “หมุนได้”

Affordance ไม่ใช่ Feature – Feature เป็นเหมือนเป้าหมายปลายทางของการออกแบบ ตอนที่เราออกแบบประตูให้มี Feauture เปิดได้ แต่ถ้าคนไม่สามารถรับรู้ว่าว่า “ประตูเปิดได้” ก็จะไม่เกิด Affordance

นิยามของ Affordance (แบบจริงจัง)

James Gibson

Gibson บอกว่า “Affordance” คือ การที่ผู้ใช้งานใช้ประสบการณ์ของตัวเองในการรับข้อมูลจากลักษณะของวัตถุ และรู้ความเป็นไปได้ทั้งหมดว่าสามารถทำอะไรกับวัตถุนั้นได้บ้าง ถ้าคนไม่มีประสบการณ์กับข้อมูล หรือสิ่งแวดล้อมไม่ได้ให้ข้อมูลเพียงพอก็จะไม่เกิด Affordance

Affordance ตามนิยามของ Gibson จะนับความเป็็นไปได้ทั้งหมดที่คน ๆ รับรู้ 
จากรูป Affordance ของท่อหมายถึง รับรู้ "กลิ้งได้", "ยืนด้านบนได้", "เข้าไปอยู่ด้านในได้", "ซ่อนตัวเองอยู่ด้านในได้"
Affordance ตามนิยามของ Gibson จะนับความเป็นไปได้ทั้งหมดที่คน ๆ รับรู้
จากรูป Affordance ของท่อหมายถึง รับรู้ “กลิ้งได้”, “ยืนด้านบนได้”, “เข้าไปอยู่ด้านในได้”, “ซ่อนตัวเองอยู่ด้านในได้”

Don Norman

Norman ให้นิยามต่างจาก Gibson ตรงที่ Norman ให้ความสำคัญกับ “การรับรู้” หรือการตีความอ้างอิงจากลักษณะของวัตถุที่เห็นได้ชัดเจน (Signify) เท่านั้น

Affordance ตามนิยามของ Norman จะอ้างอิงจาก Signify (ป้าย) แล้วค่อยตีความ จากรูป Affordance ของท่อหมายถึง "ลอดได้" อย่างเดียว
Affordance ตามนิยามของ Norman จะอ้างอิงจาก Signify (ป้าย) แล้วค่อยตีความ จากรูป Affordance ของท่อหมายถึง “ลอดได้” อย่างเดียว

Norman แยก Affordance ออกเป็น 2 มิติ คือ

  1. Actual Affordance: ลักษณะจริง ๆ ของวัตถุนั้น เช่น เป็นตัวหนังสือ สีฟ้า ขีดเส้นใต้
  2. Perceived Affordance: การรับรู้ที่เกิดจากการตีความ ซึ่งอาจจะไม่จริงก็ได้ เช่น เราคิดว่า ตัวหนังสือขีดเส้นใต้น่าจะคลิกได้ (เพราะที่ผ่านมาเราเรียนรู้มาแบบนั้น) แต่พอลองคลิกจริง ๆ แล้วดันไม่ใช่ link เป็นแค่ตัวหนังสือธรรมดา
Affordance = Information + Perception
Affordance = Information + Perception

พอมิติทั้ง 2 มิติรวมกันก็จะเกิด Affordance ของ link = รับรู้ว่า “คลิกได้”

คำจำกัดความของ Affordance ไม่ได้ใช้แค่กับวัตถุใหญ่ ๆ อย่างประตูอย่างเดียว แต่รวมไปถึงการออกแบบหน้าจอ UI ด้วย การรับรู้ของเราไม่ได้เป็นความจริงทุกครั้ง ตอนเราเห็น UI แล้วเราเข้าใจผิดว่ามันกดได้ เป็นเพราะเกิด Affordance แบบผิด ๆ นั่นเอง

นิยามของ Gibson ต่างจาก Norman ยังไง?

  • Gibson ให้ความสำคัญกับความสามารถในการับข้อมูลจากวัตถุของ “ผู้ใช้งาน” ตามนิยามของ Gibson ถ้าคนรับข้อมูลว่า “นี่คือประตู” ก็ถือว่าเกิด Affordance ได้แล้ว ทั้ง ๆ ที่ยังอาจจะไม่รู้ว่าว่าวิธีไหนจากความเป็นไปได้ทั้งหมด คือวิธีที่ถูกต้องในการเปิดประตู
  • ส่วน Norman ให้ความสำคัญกับการตีความ (Perception) โดยต้องอ้างอิง Affordance จากลักษณะบางอย่างของวัตถุก่อน แค่บอกว่า “นี่คือประตู” อย่างเดียวไม่พอ ต้องเห็นด้ามจับก่อนถึงจะเริ่มตีความว่า ด้ามจับ = “ดึงเพื่อเปิดได้”

Affordance ขึ้นอยู่กับอะไรบ้าง?

  1. ความสามารถในการรับข้อมูล ของ User: เช่น คนสามารถรับรู้ว่าประตู “เปิดได้” แต่สำหรับสุนัขอาจรับรู้ว่าประตู “เดินผ่านไม่ได้”
  2. ความครบถ้วนของข้อมูล: ตอนนั้นข้อมูลถูกซ่อนอยู่รึป่าว หรือได้รับข้อมูลครบรึป่าว
  3. การตีความ: ตามประสบการณ์ ความรู้ ภูมิหลัง วัฒนธรรม
คนสามารถรับรู้ว่าประตู "เปิดได้" แต่สำหรับสุนัข อาจรับรู้ว่าประตู คือ "เดินผ่านไม่ได้"
คนสามารถรับรู้ว่าประตู “เปิดได้” แต่สำหรับสุนัข อาจรับรู้ว่าประตู คือ “เดินผ่านไม่ได้”
ในบางครั้ง Affordance เกิดขึ้นแต่ถูกซ่อนอยู่ เพราะคนไม่ได้รับข้อมูลเพียงพอ
ในบางครั้ง Affordance เกิดขึ้นแต่ถูกซ่อนอยู่ เพราะคนไม่ได้รับข้อมูลเพียงพอ
ประสบการณ์ ความรู้ ภูมิหลัง วัฒนธรรม ทำให้คนตีความสิ่งเดียวกันไม่เหมือนกัน
ประสบการณ์ ความรู้ ภูมิหลัง วัฒนธรรม ทำให้คนตีความสิ่งเดียวกันไม่เหมือนกัน

“ข้อมูล” เป็นส่วนสำคัญที่ทำให้เกิด Affordance ถ้าเราจัดการข้อมูลที่คนได้รับจาก UI ได้ดีแล้ว Affordance ก็จะเกิดขึ้นอย่างถูกต้อง สุดท้ายแล้วจะทำให้ UI ของเราเข้าใจง่าย

วิธีปรับ UI ให้ Intuitive โดยใช้ Affordance

การออกแบบให้ UI ยังไงให้ Intuitive คือ ทำให้ User เข้าใจถูกต้องว่า อะไรทำได้ อะไรทำไม่ได้ เป้าหมายของการออกแบบ UI ที่เข้าใจง่าย คือ หลีกเลี่ยงไม่ให้เกิด Affordance ที่เราไม่ต้องการ

Affordance ที่เราไม่ต้องการให้เกิดขึ้น:

  1. Hidden Affordance: User ไม่รู้ว่าทำแบบนี้ได้
  2. False Affordance: User คิดว่าทำแบบนี้ได้ แต่จริง ๆ แล้วทำไม่ได้
Affordance ที่เราไม่ต้องการให้เกิดขึ้น คือ Hidden Affordance และ False Affordance
Affordance ที่เราไม่ต้องการให้เกิดขึ้น คือ Hidden Affordance และ False Affordance

วิธีการทำให้เกิด Affordance ที่ถูกต้อง คือ ทำให้ UI มีลักษณะที่ให้ข้อมูล (Signify) ที่ถูกต้องกับ User

Signify คืออะไร?

คือ ลักษณะของวัตถุสิ่งที่ให้ “ข้อมูล” กับผู้ใช้งาน เช่น Signify ของประตู คือ ด้ามจับประตู

Signify ของประตู คือ ด้ามจับประตู
Signify ของประตู คือ ด้ามจับประตู ด้ามจับแบบต่าง ๆ ก็จะให้ Affordance ที่ต่างกัน
ลองทายกันดูว่า แต่ละแบบ Affordance คืออะไร?
Signify ของปุ่มคือ "ตัวหนังสือ border และเปลี่ยน State ตอนเอาเม้าส์ชี้"
Signify ของปุ่มคือ “ตัวหนังสือ border และเปลี่ยน State ตอนเอาเม้าส์ชี้”
Input มี Cursor กระพริบ เป็็น Siginfy ที่ทำให้เรารับรู้ว่า "พิมพ์ข้อความในกล่องได้" (Source)
Input มี Cursor กระพริบ เป็็น Siginfy ที่ทำให้เรารับรู้ว่า “พิมพ์ข้อความในกล่องได้” (Source)
Signify ของ Volume Control คือ ตัว Dragger ที่ทำให้เรารับรู้ว่า “ลากได้” (Credit: Magic Chen)

สาเหตุอย่างหนึ่งที่คนไม่เข้าใจ UI ของเรา คือ ตอนออกแบบเราลืมใส่ Signify หรือว่า Signify ที่มีอยู่ตอนนี้ยังชัดเจนไม่พอ ทำให้เกิด Hidden Affordance “User ไม่รู้ว่าทำแบบนี้ได้”

ตัวอย่าง UI ที่คนลืมใส่ Signify บ่อย ๆ:

  • Button ลืมใส่ State > คนไม่แน่ใจว่าคลิกได้
  • Link ลืมใส่สี > คนคิดว่าเป็นตัวหนังสือธรรมดา
  • Banner ลืมใส่ CTA > คนคิดว่าเป็นรูปเฉย ๆ
iOS13  เพิ่ม Signify แก้ปัญหา Hidden Affordance ทำให้ User รู้ว่า ถ้า swipe down จะ "ปิด modal ได้"
iOS13 เพิ่ม Signify แก้ปัญหา Hidden Affordance ทำให้ User รู้ว่า ถ้า swipe down จะ “ปิด modal ได้”

วิธีการป้องกัน Hidden Affordance คือ ปรับ Signify ให้ชัดเจนขึ้น

Anti-Affordance

คือ การเอา Signify ออกไปเพื่อทำให้วัตถุดูเหมือนใช้งานไม่ได้ การทำ Anti-Affordance ช่วยป้องกัน False Affordance “User คิดว่าทำแบบนี้ได้ แต่จริง ๆ แล้วทำไม่ได้” หรืออาจเอาไปใช้ตอนที่เราไม่ต้องการให้ User ใช้ UI นั้น

เอาด้ามซ้อมออก ทำให้ "ถือไม่ได้" (The Uncomfortable)
เอาด้ามซ้อมออก ทำให้ “ถือไม่ได้” (The Uncomfortable)
ไม่อยากให้คนกด Cancel เลยเอา border ออกจากปุ่ม ทำให้เหมือน "คลิกไม่ได้" (Source)
ไม่อยากให้คนกด Cancel เลยเอา border ออกจากปุ่ม ทำให้เหมือน “คลิกไม่ได้” (Source)
ไม่อยากให้คนกด Unsubscibe เลยเอาเส้นใต้ออกจาก link ทำให้ดูเหมือนกดไม่ได้ (Source)
ไม่อยากให้คนกด Unsubscibe เลยเอาเส้นใต้ออกจาก link ทำให้ดูเหมือนกดไม่ได้ (Source)

วิธีการป้องกัน False Affordance คือ การทำ Anti-Affordance

เช็ค Affordance ด้วยตาราง

การใช้ตารางเป็นตัวช่วย scan UI อย่างหนึ่งว่า Affordance โดยรวมของ Web/App เราเป็นยังไงบ้าง

ตัวอย่างตาราง Affordance (Credit: Lisa Given)
ตัวอย่างตาราง Affordance (Credit: Lisa Given)

Takeaway

  1. Affordance เป็นความสัมพันธ์ระหว่างผู้ใช้งานกับวัตถุ เกิดขึ้นเมื่อผู้ใช้งานเห็นลักษณะของวัตถุแล้วรับรู้ว่า “สามารถมีปฏิสัมพันธ์ทางกายภาพ (Physically Action) กับวัตถุนั้นอย่างไรบ้าง”
  2. การออกแบบให้ UI ให้ Intuitive ทำได้โดยการจัดการกับ Signify ของ UI เพื่อให้ User เข้าใจถูกต้องว่าอะไรทำได้ อะไรทำไม่ได้
  3. Hiden Affordance คือ User ไม่รู้ว่าทำแบบนี้ได้ แก้ไขโดยการเพิ่ม Signify
  4. False Affordance คือ User คิดว่าทำแบบนี้ได้ แต่จริง ๆ แล้วทำไม่ได้ แก้ไขโดยการทำ Anti-Affordance

  • References
  • https://www.interaction-design.org/literature/topics/affordances
  • https://uxdesign.cc/affordance-in-user-interface-design-3b4b0b361143#
  • https://www.interaction-design.org/literature/book/the-encyclopedia-of-human-computer-interaction-2nd-ed/affordances
  • https://graphicsinterface.org/wp-content/uploads/gi2000-24.pdf
  • https://uxdesign.cc/what-is-an-affordance-6b60f2de79f2
  • http://johnnyholland.org/2010/04/perceived-affordances-and-designing-for-task-flow/

*Disclaimer: บทความนี้อ้างอิงจากนิยามของ Norman เป็นหลัก

BetterUXUI.com ให้ความสำคัญกับความถูกต้องของข้อมูล

ข้อมูลและงานวิจัยต่าง ๆ ที่อ้างอิงในบทความ อ้างอิงจากปีข้อมูลนั้น ๆ หากมีข้อมูลที่ใหม่กว่าและต้องการให้ทางเว็บไซต์อัพเดทบทความ สามารถ Request ให้แก้ไขบทความให้มีความถูกต้องและเป็นปัจจุบันมากขึ้น


ไม่พลาดบทความใหม่ๆ จาก BetterUXUI.com

1. กด Like Facebook page BetterUXUI

2. สมัครและอ่านบทความทางอีเมล

1+

Share:
Back to Top