ทฤษฎี UIเรื่องเด๊นเด่น

6 หลักการเพื่อออกแบบทุกสิ่งบนโลกนี้ ตอนที่ 1: Affordance (ล่อให้กระทำ)

4

don-norman

หนังสือ The Design of Everything Things โดย Don Norman กูรูด้าน UX

หากใครอยากหาหนังสือเกี่ยวกับดีไซน์ดีๆ ซักเล่ม หรืออยากหาตำราเพื่อยึดเป็นสรณะแล้วล่ะก็ ผมไม่ลังเลที่จะแนะนำหนังสือ ‘The Design of Everyday Things’ ของ Don Norman (ดอน นอร์แมน) ให้หาซื้อและตั้งบูชาไว้ที่บ้านเลยครับ

ในหนังสือเล่มนี้ Don Norman, ผู้เชี่ยวชาญการออกแบบโดยคิดและใส่ใจผู้ใช้เป็นศูนย์กลาง (User-Centered Design), จะอธิบายหลักการออกแบบที่ดีเพื่อใช้เป็นแนวทางในการออกแบบทุกสิ่งทุกอย่างในโลกนี้ได้หมดเลย แน่นอนว่า สามารถนำเอามาประยุกต์ใช้กับการออกแบบ UI ได้ด้วยเหมือนกันครับ

กฎการออกแบบที่ Don Norman สรุปออกมา มีทั้งหมด 6 ข้อด้วยกัน ได้แก่

  1. Affordance (ล่อให้กระทำ)
  2. Visibility (ทำให้ชัดเจน)
  3. Mapping (ทำให้เข้าคู่)
  4. Constraints (กรอบบังคับ)
  5. Feedback (มีอะไรให้บอกกลับ)
  6. Conceptual Model (แนวคิดการใช้งาน)

1. Affordance (ล่อให้กระทำ)

Afford ถ้าแปลตามตัว คือ ‘สามารถหาได้’ Don Norman ใช้คำนี้ในความหมายว่า การที่วัตถุที่ออกแบบสามารถเรียกร้องหาการกระทำของผู้กระทำ (หรือ Agent**) ต่อตัววัตถุเองได้ถูกต้อง หรืออธิบายด้วยคำง่ายๆ คือ การกระทำอะไรที่ควรทำเพื่อใช้วัตถุนั้นๆ (What action should be taken place?)

** ความหมายของผู้กระทำ หรือ Agent ในที่นี่ หมายถึง สิ่งใดก็ตามที่ลงมือกระทำต่อวัตถุ ดังนั้นมันจึงหมายรวมถึงคนและสัตว์ด้วย หากย่อยลงไปอีก สำหรับคน ก็ต้องดูว่าคืออวัยวะส่วนใดที่เป็น Agent เช่น มือ, นิ้วมือ, เท้า เป็นต้น 

การกระทำที่เราสามารถกระทำต่อวัตถุได้ เช่น การวาง, การกด, การดึง, การผลัก, การสอด, การหมุน ฯลฯ การกระทำเหล่านี้จะถูกล่อให้กระทำด้วยลักษณะและคุณสมบัติของวัตถุ (Attribute) ที่ออกแบบมาอย่างตั้งใจและไม่ตั้งใจ

 

ตัวอย่าง Affordance

 

affordance-sample-01

โต๊ะมี Affordance คือการวาง

ยกตัวอย่างเช่น โต๊ะ ด้วยลักษณะที่เป็นพื้นเรียบขนานกับพื้น ทำให้โต๊ะเป็นวัตถุที่ล่อการกระทำ คือ ‘การวาง’

 

affordance-sample-02

ที่เปิดประตูรถมี Affordance คือ การสอด

ช่องว่างใต้ที่เปิดประตูรถ ก็ล่อให้เราเอามือสอดเข้าไป

 

affordance-sample-03

ตัวกดน้ำชักโครกมี Affordance คือ การกด , หมุน

แง่งหรือก้านที่ยื่นออกมาจากฐานจุดหมุน ก็ล่อการกระทำคือ การผลัก (ด้วยนิ้ว) หรือกดหมุน

 

affordance-sample-04

กระดิ่งมี Affordance คือ การกด

กระดิ่งหน้าบ้าน ก็มีลักษณะเป็นปุ่ม ล่อการกระทำคือ การกด

 

affordance-sample-05

ตัวเปิดประตูแบบก้านมี Affordance คือ การกดหมุน

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

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

 

affordance-sample-06

ประตูแบบมีที่จับมี Affordance คือ การสอดจับของมือเพื่อดึง โดยมี Signifier เป็นป้ายบอกให้ดึง

ถ้าเป็นประตูตัวเปิดที่มีช่องว่างที่ล่อให้เอามือเข้าไปสอดและจับแบบรูปด้านบน ก็จะเป็นประตูที่มี Affordance คือ การดึง พร้อมกับตัวให้สัญญาณการกระทำ (Signifier**) ที่เขียนว่า Pull

** Signifier หรือ สัญญาณบ่งบอกจุดการกระทำ คือ ป้ายหรือสื่อสัญญาณที่บ่งบอกสถานที่หรือบริเวณที่การกระทำควรทำ (Where action should be taken place?) เช่น ป้ายบอกให้ดึง ก็จะติดบริเวณใกล้ๆ กับที่จับประตู แต่ไม่ได้บอกว่าให้ดึงอย่างไร สิ่งที่บอกว่าดึงอย่างไร คือหน้าที่ของ Affordance ว่าเชิญชวนให้กระทำในลักษณะไหน (What action should be taken place?)

 

affordance-sample-07

ประตูที่มีการออกแบบ Affordance ที่ไม่เหมาะสม

ประตูที่ล่อให้ผลักนี่ ถ้าใช้เป็นที่จับแบบนี้  เป็นไปได้ว่าประตูนี้มีการใช้ Affordance ที่ผิด หรือ เป็น ‘Norman Door’ ครับ อ้าวแล้วประตูที่เชิญชวนให้ผลักควรจะใช้ Affordance แบบไหนดีล่ะ?

 

affordance-sample-08

ประตูที่มีแผ่นเรียบมี Affordance คือการวางมือ โดยมี Signifier บอกให้ ผลัก

ก็ทำเป็นแผ่นเรียบที่ล่อให้เอาฝ่ามือไปแนบเท่านั้นเองครับ แล้วก็มี Signifier ติดบอกบนแผ่นหน่อยว่า ผลักนะ

 

affordance-sample-09

การออกแบบประตูให้มี Affordance ที่เหมาะสม

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

 

affordance-sample-10

ประตูอัตโนมัติมี Affordance คือ การหยุด (ชั่วคราว)

แม้แต่ประตูอัตโนมัติก็มี Affordance นะครับ ลองคิดดูว่าประตูแบบนี้อยากล่อหรือเชิญชวนเราให้ทำอะไร… เนื่องจากประตูไม่มีทั้งที่จับและแผ่นเรียบทาบมือ ทำให้เราหยุดงงงวยไปแป๊ปนึง ซึ่งการกระทำที่ว่าก็คือ การหยุดยืนนิ่งชั่วครู่ โดยมี Signifier ช่วยบอกหน่อยว่าเป็น บานเลื่อนอัตโนมัติ (Signifier ไม่ได้บอกว่าให้หยุดยืน เพียงแค่บอกว่าตรงนี้คือ ประตูอัตโนมัติ เท่านั้น)

 

stock-photo-push-sign-on-glass-opened-door-416186185

ประตูอัตโมมัติที่ญี่ปุ่นที่ต้องกดเพื่อเปิด

ส่วนถ้าใครเคยไปญี่ปุ่น บางครั้งก็อาจเจอประตูแบบภาพด้านบน ซึ่งเป็นประตูที่ต้องให้กดก่อนมันถึงจะเปิดให้เรา ซึ่งผมว่า Affordance ที่เชิญชวนให้กดนี่ ดูยังไม่ค่อยชัดเจนเท่าไรนัก เพราะบางทีก็เผลอนึกว่าเป็นประตูแบบเลื่อนนะ ^^!

 

affordance-sample-11

ประตูหนีไฟมี Affordance คือ การผลัก

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

 

affordance-sample-12

ประตูบานเลื่อนมี Affordance คือการเกี่ยว

ประตูบานเลื่อนก็สามารถทำเป็น Affordance ที่ล่อให้นิ้วจิ้มเข้าในร่อง

 

affordance-sample-13

ประตูบานเลื่อนแบบมีตัวจับแนวเดียวกับบานประตู

หรือจะทำให้เปิดง่ายหน่อย ก็ทำเป็นที่จับในแนวขนานกับบานประตู เพื่อล่อให้สอดนิ้วเข้ามาแล้ว เลื่อนไปในแนวของที่จับ

นี่แค่เรื่องประตูเองนะ แต่สามารถครอบคลุมเรื่อง Affordance ได้เกือบทุกตัวอย่างการกระทำเลย

 

Anti-Affordance (ล่อไม่ให้กระทำ)

anti-affordance-sample-01

ราวบันได้ที่มี Affordance คือ การวาง

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

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

 

anti-affordance-sample-02

ที่กั้นแบบหลอก มี Affordance คือ การหยุด

หรือเราอยากออกแบบที่กั้นทางรถ แต่สำหรับรถของเราเองสามารถผ่านได้ ก็ทาสีให้ดูเหมือนเหล็กกั้น เพื่อสร้าง Anti-Affordance คือการไม่เชิญชวนให้ผ่าน ด้วยคุณสมบัติของวัตถุที่ทำหลอก

 

Affordance และ Signifier สำหรับ UI
 affordance-sample-15

การเปลี่ยน Cursor ของเมาส์เป็นรูปมือ เมื่อเอาไปวางบนไอคอนคน เพื่อเป็น Signifier บอกตำแหน่งการกระทำ

สำหรับบนโลกดิจิตอลอย่างหน้าจอ Desktop ส่วนใหญ่จะพึ่งพา Signifier มากกว่า Affordance เพราะ Affordance ถูกจำกัดอยู่แค่การใช้เมาส์คลิกและลากเท่านั้น แต่จะให้คลิก (ซ้าย/ขวา/ดับเบิ้ลคลิก) หรือลากบริเวณไหน เราจะไม่รู้ ซึ่งอันนี้เป็นบทบาทของ Signifier ครับ

ตัวอย่างเช่น เวลาเราเอาเมาส์ไปวางบนตุ๊กตาของ Google Maps เมาส์ Cursor ของเราจะเปลี่ยนเป็นรูปมือ แล้วตัวตุ๊กตาก็มีการเคลื่อนไหวเหมือนอยากออกไปข้างนอก บ่งบอกว่าตัวไอคอนนี้สามารถคลิกแล้วลากไปข้างนอกได้นะ ส่วนเรื่องการคลิกนั้นเราจะสังเกตได้ว่าไอคอนตุ๊กตาอยู่บนคอนโทรลที่มีลักษณะคล้ายๆ ปุ่ม ซึ่งเป็นตัวเชิญให้เราคลิกนั่นเอง รู้ได้ไม่ยาก

 

affordance-sample-16

ปุ่มมี Affordance คือ การกด และ Sigifier ที่เป็น Feed แสดงไม่ครบ เพือบ่งบอกให้เลื่อนต่อ

ส่วนบนมือถือ Affordance ก็จะเป็นการกระทำพวก เลื่อน, กด, ซูม เป็นหลัก ถ้าเป็นพวก Feed บน Facebook ก็จะมี Signifier ที่บ่งบอกว่ายังมีข้อมูลด้านล่างเรื่อยๆ อีก ส่วนปุ่มก็จะใช้แสงและเงาเพื่อทำเป็น Affordance ที่ล่อให้กด

affordance-sample-18

Textbox มี Affordance คือ การพิมพ์

ตัวฟอร์มอย่างเช่น Textbox ก็มีเลเบลช่วยเป็น Signifier ให้ว่า ใกล้ๆ นี้จะสามารถพิมพ์ข้อความได้นะ ซึ่งเป็น Affordance ของ Textbox

 

affordance-sample-17

กรอบย่อขยาย มี Affordance คือ การคลิกลาก ที่ตำแหน่งตรงเมาส์ cursor มีการเปลี่ยนแปลง

ในขณะพวก UI ที่ทำหน้าที่ย่อขยาย ก็จะมี Affordance ที่เป็นลักษณะกรอบ เชิญชวนให้เอาเมาส์คลิกลากตามทิศทางตรงบริเวณที่่มี Signifier บ่งชี้ด้วยเมาส์ cursor แบบต่างๆ ตัวอย่างด้านบนคือ กรอบเวลา crop รูป เมื่อเราเอาเมาส์ไปวางบริเวณมุมกรอบ เมาส์ก็จะเปลี่ยนเป็นลูกศรที่มีหัวทั้งสองด้านแบบทแยงมุม (Signifier) เพื่อบ่งบอกให้เราคลิกลากกรอบตรงมุมในแนวทแยง

นี่คือตัวอย่างเล็กๆ น้อยๆ ของ Affordance และ Signifier บนคอมพิวเตอร์และบนมือถือครับ


ทบทวนเล็กน้อย

ในหัวข้อนี้ ผมได้ชี้ให้เห็นว่าการออกแบบสิ่งของจำเป็นต้องคิดเรื่อง Affordance ว่าเราต้องการเชิญชวนผู้ใช้ (Agent) กระทำอะไร โดยใช้ Signifier (สื่อป้ายสัญญาณ) บอกว่า การกระทำนั้นควรทำที่บริเวณไหน ซึ่งคือใจความหลักของหัวข้อนี่เลยครับ อย่าสับสันระหว่าง 2 คำนี้นะครับ

ตอนหน้าเป็นเรื่อง Visibility (การทำให้เด่นชัด) ติดตามอ่านต่อ อย่าได้พลาดนะครับ  」( ̄▽ ̄」)

———————————–

ปล. หนังสือ The Design of Everyday Things สามารถหาซื้อได้ที่ร้านหนังสือ Kinokuniya นะครับ เป็นเวอร์ชันภาษาอังกฤษล่ะ

uiblogaziner
สวัสดีครับ ผมชื่อฟริ้นครับ รักและชอบงาน Graphic Design เอามากๆ เลย พอได้เริ่มทำงานเป็น UI Designer แล้ว ยิ่งสนุกขึ้นอีกแยะ งานออกแบบที่ใช้ความรู้สึกและเหตุผลเป็นอะไรที่สุดยอดจริงๆ ครับ

รีวิวเว็บ AirCheck24 (เว็บร้านแอร์ออนไลน์)

Previous article

คิดให้ปังดังทั่วโลกแบบนักเรียนสแตนฟอร์ด ตอนที่ 1: อะไรก็เป็นไปได้ ถ้าคิดเป็น

Next article

You may also like

4 comments

  1. รอติดตามอ่านนะครับ

    1. ขอบคุณมากครับ

    2. ขอบคุณครับ ^^

  2. รอติดตามบทต่อไปอยู่นะครับ

Leave a reply

Your email address will not be published. Required fields are marked *