User Experience Design Department of Computer Engineering and Multimedia Supachate Innet

Step Design Process Step 1: Requirements Gathering Understanding the user and what her goals are. What are the current practices This step can also be thought of as understanding the problem space – what is hindering the completion of the task, how can the task or process be improved

Step Design Process Step 2: Design Alternatives Once you understand the users, their goals, and their current practices, you are able to take this data and develop various design options that will improve the user experience

Step Design Process Step 3: Prototyping Techniques for modelling the novel designs before a final version is produced Step 4: Evaluation A set of techniques for ascertaining that your design meets the needs of the users

Fundamentals to Good Design Affordance Signifiers Feedback

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

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

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

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

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

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

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

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

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

ตัวอย่าง Affordance

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

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

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

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

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

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

ตัวอย่าง Anti-Affordance

ตัวอย่าง Anti-Affordance

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

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

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

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

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