“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 เข้าให้เเล้ว
Affordance คืออะไร?
Affordance เป็นความสัมพันธ์ระหว่างผู้ใช้งานกับวัตถุ เกิดขึ้นเมื่อผู้ใช้งานเห็นลักษณะของวัตถุแล้วรับรู้ว่า “สามารถมีปฏิสัมพันธ์ทางกายภาพ (Physically Action) กับวัตถุนั้นอย่างไรบ้าง” เช่น เวลาที่เราเห็นด้ามจับประตู เราก็จะรู้ได้ทันทีว่าต้องหมุนด้ามจับเพื่อเปิด การรับรู้ว่า “หมุนเพื่อเปิดได้” คือ Affordance ของประตู
- ปุ่ม: รับรู้ว่า “กดได้”
- สวิตซ์: รับรู้ว่า “เปิดปิดได้”
- ปุ่มวิทยุ: รับรู้ว่า “หมุนได้”
Affordance ไม่ใช่ Feature – Feature เป็นเหมือนเป้าหมายปลายทางของการออกแบบ ตอนที่เราออกแบบประตูให้มี Feauture เปิดได้ แต่ถ้าคนไม่สามารถรับรู้ว่าว่า “ประตูเปิดได้” ก็จะไม่เกิด Affordance
นิยามของ Affordance (แบบจริงจัง)
James Gibson
Gibson บอกว่า “Affordance” คือ การที่ผู้ใช้งานใช้ประสบการณ์ของตัวเองในการรับข้อมูลจากลักษณะของวัตถุ และรู้ความเป็นไปได้ทั้งหมดว่าสามารถทำอะไรกับวัตถุนั้นได้บ้าง ถ้าคนไม่มีประสบการณ์กับข้อมูล หรือสิ่งแวดล้อมไม่ได้ให้ข้อมูลเพียงพอก็จะไม่เกิด Affordance
จากรูป Affordance ของท่อหมายถึง รับรู้ “กลิ้งได้”, “ยืนด้านบนได้”, “เข้าไปอยู่ด้านในได้”, “ซ่อนตัวเองอยู่ด้านในได้”
Don Norman
Norman ให้นิยามต่างจาก Gibson ตรงที่ Norman ให้ความสำคัญกับ “การรับรู้” หรือการตีความอ้างอิงจากลักษณะของวัตถุที่เห็นได้ชัดเจน (Signify) เท่านั้น
Norman แยก Affordance ออกเป็น 2 มิติ คือ
- Actual Affordance: ลักษณะจริง ๆ ของวัตถุนั้น เช่น เป็นตัวหนังสือ สีฟ้า ขีดเส้นใต้
- Perceived Affordance: การรับรู้ที่เกิดจากการตีความ ซึ่งอาจจะไม่จริงก็ได้ เช่น เราคิดว่า ตัวหนังสือขีดเส้นใต้น่าจะคลิกได้ (เพราะที่ผ่านมาเราเรียนรู้มาแบบนั้น) แต่พอลองคลิกจริง ๆ แล้วดันไม่ใช่ link เป็นแค่ตัวหนังสือธรรมดา
พอมิติทั้ง 2 มิติรวมกันก็จะเกิด Affordance ของ link = รับรู้ว่า “คลิกได้”
คำจำกัดความของ Affordance ไม่ได้ใช้แค่กับวัตถุใหญ่ ๆ อย่างประตูอย่างเดียว แต่รวมไปถึงการออกแบบหน้าจอ UI ด้วย การรับรู้ของเราไม่ได้เป็นความจริงทุกครั้ง ตอนเราเห็น UI แล้วเราเข้าใจผิดว่ามันกดได้ เป็นเพราะเกิด Affordance แบบผิด ๆ นั่นเอง
นิยามของ Gibson ต่างจาก Norman ยังไง?
- Gibson ให้ความสำคัญกับความสามารถในการับข้อมูลจากวัตถุของ “ผู้ใช้งาน” ตามนิยามของ Gibson ถ้าคนรับข้อมูลว่า “นี่คือประตู” ก็ถือว่าเกิด Affordance ได้แล้ว ทั้ง ๆ ที่ยังอาจจะไม่รู้ว่าว่าวิธีไหนจากความเป็นไปได้ทั้งหมด คือวิธีที่ถูกต้องในการเปิดประตู
- ส่วน Norman ให้ความสำคัญกับการตีความ (Perception) โดยต้องอ้างอิง Affordance จากลักษณะบางอย่างของวัตถุก่อน แค่บอกว่า “นี่คือประตู” อย่างเดียวไม่พอ ต้องเห็นด้ามจับก่อนถึงจะเริ่มตีความว่า ด้ามจับ = “ดึงเพื่อเปิดได้”
Affordance ขึ้นอยู่กับอะไรบ้าง?
- ความสามารถในการรับข้อมูล ของ User: เช่น คนสามารถรับรู้ว่าประตู “เปิดได้” แต่สำหรับสุนัขอาจรับรู้ว่าประตู “เดินผ่านไม่ได้”
- ความครบถ้วนของข้อมูล: ตอนนั้นข้อมูลถูกซ่อนอยู่รึป่าว หรือได้รับข้อมูลครบรึป่าว
- การตีความ: ตามประสบการณ์ ความรู้ ภูมิหลัง วัฒนธรรม
“ข้อมูล” เป็นส่วนสำคัญที่ทำให้เกิด Affordance ถ้าเราจัดการข้อมูลที่คนได้รับจาก UI ได้ดีแล้ว Affordance ก็จะเกิดขึ้นอย่างถูกต้อง สุดท้ายแล้วจะทำให้ UI ของเราเข้าใจง่าย
วิธีปรับ UI ให้ Intuitive โดยใช้ Affordance
การออกแบบให้ UI ยังไงให้ Intuitive คือ ทำให้ User เข้าใจถูกต้องว่า อะไรทำได้ อะไรทำไม่ได้ เป้าหมายของการออกแบบ UI ที่เข้าใจง่าย คือ หลีกเลี่ยงไม่ให้เกิด Affordance ที่เราไม่ต้องการ
Affordance ที่เราไม่ต้องการให้เกิดขึ้น:
- Hidden Affordance: User ไม่รู้ว่าทำแบบนี้ได้
- False Affordance: User คิดว่าทำแบบนี้ได้ แต่จริง ๆ แล้วทำไม่ได้
วิธีการทำให้เกิด Affordance ที่ถูกต้อง คือ ทำให้ UI มีลักษณะที่ให้ข้อมูล (Signify) ที่ถูกต้องกับ User
Signify คืออะไร?
คือ ลักษณะของวัตถุสิ่งที่ให้ “ข้อมูล” กับผู้ใช้งาน เช่น Signify ของประตู คือ ด้ามจับประตู
ลองทายกันดูว่า แต่ละแบบ Affordance คืออะไร?
สาเหตุอย่างหนึ่งที่คนไม่เข้าใจ UI ของเรา คือ ตอนออกแบบเราลืมใส่ Signify หรือว่า Signify ที่มีอยู่ตอนนี้ยังชัดเจนไม่พอ ทำให้เกิด Hidden Affordance “User ไม่รู้ว่าทำแบบนี้ได้”
ตัวอย่าง UI ที่คนลืมใส่ Signify บ่อย ๆ:
- Button ลืมใส่ State > คนไม่แน่ใจว่าคลิกได้
- Link ลืมใส่สี > คนคิดว่าเป็นตัวหนังสือธรรมดา
- Banner ลืมใส่ CTA > คนคิดว่าเป็นรูปเฉย ๆ
วิธีการป้องกัน Hidden Affordance คือ ปรับ Signify ให้ชัดเจนขึ้น
Anti-Affordance
คือ การเอา Signify ออกไปเพื่อทำให้วัตถุดูเหมือนใช้งานไม่ได้ การทำ Anti-Affordance ช่วยป้องกัน False Affordance “User คิดว่าทำแบบนี้ได้ แต่จริง ๆ แล้วทำไม่ได้” หรืออาจเอาไปใช้ตอนที่เราไม่ต้องการให้ User ใช้ UI นั้น
วิธีการป้องกัน False Affordance คือ การทำ Anti-Affordance
การใช้ตารางเป็นตัวช่วย scan UI อย่างหนึ่งว่า Affordance โดยรวมของ Web/App เราเป็นยังไงบ้าง ข้อมูลและงานวิจัยต่าง ๆ ที่อ้างอิงในบทความ อ้างอิงจากปีข้อมูลนั้น ๆ หากมีข้อมูลที่ใหม่กว่าและต้องการให้ทางเว็บไซต์อัพเดทบทความ สามารถ Request ให้แก้ไขบทความให้มีความถูกต้องและเป็นปัจจุบันมากขึ้น 1. กด Like Facebook page BetterUXUI 2. สมัครและอ่านบทความทางอีเมลเช็ค Affordance ด้วยตาราง
Takeaway
*Disclaimer: บทความนี้อ้างอิงจากนิยามของ Norman เป็นหลัก
BetterUXUI.com ให้ความสำคัญกับความถูกต้องของข้อมูล
ไม่พลาดบทความใหม่ๆ จาก BetterUXUI.com