ทฤษฎี UI UI ที่ให้อำนาจการควบคุมและการให้อภัย By uiblogaziner November 2, 20144264 views ShareTweet 2 ไม่มีใครที่ไหนอยากจะถูกปกครองหรืออยู่ภายใต้การบังคับที่ไม่อนุญาตให้เราทำตามความต้องการของเราได้อย่างอิสระเสรี และดูเหมือนว่าการออกแบบ UI ก็ไม่ได้ต่างกับเรื่องนี้สักเท่าไรนัก การกระทำ (action) ที่เกิดขึ้นบนหน้าเว็บที่ปฏิสัมพันธ์ผ่านทาง UI ต้องเกิดขึ้นจากความเต็มใจของยูสเซอร์ ไม่ใช่เกิดจากความจำยอมนะครับ เราต้องออกแบบ UI ที่ทำให้ยูสเซอร์เกิดความรู้สึกว่าเค้ากำลังมีอำนาจในการควบคุมทุกอย่างในหน้าเว็บ (control) แม้กระทั่งทำอะไรผิดพลาดไป ก็สามารถแก้ไขหรือกลับไปสถานะก่อนหน้าได้เสมอ พูดอีกนัยหนึ่งก็คือ UI ต้องพร้อมให้อภัยยูสเซอร์เสมอ (forgiveness) มาดูตัวอย่างกันครับ ในหน้า feed ของ facebook เมื่อเราโพสต์อะไรลงไป แล้วเผอิญนึกขึ้นมาได้ว่าลืมใส่ข้อความอะไรบางอย่างลงไป เราสามารถทำการแก้ไขได้โดยการเลือกที่ปุ่มลูกศรที่อยู่ทางด้านขวาบนของโพสต์ จากนั้นก็เลือกเมนู ‘แก้ไข’ นี่เป็นหนึ่งอำนาจที่ facebook ให้กับยูสเซอร์ครับ เพื่อกลับยังสภาพก่อนหน้าตอนกำลังจะกดยืนยันที่จะโพสต์ ยังมีอีกหลายอำนาจที่ยูสเซอร์สามารถทำได้กับโพสต์นี้ เช่น แสดงโพสต์ไว้บนสุดตลอด, เปลี่ยนวันที่ที่โพสต์, หรือจะลบโพสต์นี้ทิ้งไปเลยก็ได้ (UI ให้อภัยที่โพสต์ผิดไปไง) หรือจะเป็นเรื่องของความเป็นส่วนตัวของข้อมูล facebook เค้าก็จัดมาเต็มเลยครับ เพราะถูกด่ามาเยอะเรื่องประเด็นนี้ ซึ่งเราจะเลือกระดับได้ว่าโพสต์ของเราเปิดเผยมากน้อยแค่ไหน ใครสามารถดูได้บ้าง เป็นต้น มาดูอีกตัวอย่างครับเรื่องการให้อภัย สำหรับ wordpress เราจะไม่สามารถลบบทความทิ้งไปได้เลยในครั้งแรก แต่จะเป็นการย้ายที่เก็บบทความไปในถังขยะชั่วคราวแทนครับ ซึ่งผมก็เห็นด้วยว่าไม่มีจำเป็นต้องลบบทความทิ้งไปจริงๆ เลยในคราวแรก เพราะบางทีเราอาจเปลี่ยนใจได้ตลอดเวลาที่จะเอาบทความที่เคยลบไปแล้วกลับคืนมา บทความที่เราลบในคราวแรกนั้น ก็จะย้ายไปอยู่ในแท็บ “ถังขยะ (trash)” (จะไม่ปรากฏให้เห็นหากไม่มีไฟล์ที่เราลบ) ถ้าหากเราอยากนำกลับมาใหม่ ก็แค่เอาเมาส์ไปวางที่บทความแล้วเลือกเมนู “Restore” หรือถ้ามั่นใจว่าจะลบจริงๆ ก็เลือก “Delete Permanently” แต่คราวนี้เราจะไม่สามารถเอาบทความกลับคืนมาได้แล้ว เพราะ wordpress ให้อภัยไปครั้งหนึ่งซึ่งก็เพียงพอแล้วครับ เรื่องของคำพูดที่ใช้ก็เช่นกันครับ เราควรเลือกใช้คำพูดที่ยูสเซอร์รู้สึกว่าเค้าเป็นเจ้าของสิ่งนั้นนะ และเกิดความเข้าใจว่า เค้าสามารถควบคุมมันได้ (ก็ชั้นเป็นเจ้าของนี่) ตัวอย่างปุ่มด้านบนที่ผมแสดงให้เห็น แบบ a จะให้ความรู้สึกกลางๆ บอกว่าปุ่มนี้ทำอะไร แบบ b จะให้ความรู้สึกว่าเราออกคำสั่งให้ยูสเซอร์กระทำ แบบ c จะเป็นการสื่อสารว่า ปุ่มนี้เรายกให้ยูสเซอร์แล้วนะ มันเป็นของเค้าแล้ว จะทำอะไรก็ได้ตามใจเลย แบบ c จึงเป็นการเลือกใช้คำที่เหมาะสมที่สุดในการทำให้ยูสเซอร์เกิดความรู้สึกได้อำนาจในการควบคุม ตัวอย่างใกล้ตัวอีกที่เราคุ้นเคยกันดีก็คือ การเปิดหน้าลิงค์ที่ยูสเซอร์เลือก ซึ่งมีอยู่ 2 แบบหลัก คือ เปิดหน้าลิงค์โดยแสดงเนื้อหาที่แท็บเดิม เปิดหน้าลิงค์โดยแสดงเนื้อหาที่แท็บใหม่ อย่างของ sanook.com ผมว่าทำไม่ถูกต้องครับ กรณีหนึ่ง ผมสนใจอยากดูรายละเอียดของบทความนี้ จึงคลิกที่ลิงค์หรือรูปภาพ แต่สิ่งที่ Sanook ทำคือ เปิดแท็บใหม่เพื่อแสดงเนื้อหานี้ แทนที่จะแสดงเนื้อหาที่แท็บเดิม เพราะหากผมเปลี่ยนใจหรืออ่านบทความเสร็จแล้ว ผมสามารถใช้ปุ่ม back หรือกดปุ่ม back space เพื่อกลับไปยังหน้าเดิมและจุดเดิมได้ทันที หากเปิดแท็บใหม่ทุกครั้งที่คลิกลิงค์ จะทำให้เรามีหลายแท็บจนงงแล้วหลงได้ครับว่าจะกลับไปหน้าที่แล้วได้ยังไง ต้องอย่าลืมนะครับว่าสมัยนี้ยูสเซอร์เค้าไม่เปิดแค่แท็บเดียวเพื่อดูเว็บๆ เดียวแล้ว ดูทีหลายสิบแท็บหลายสิบเว็บ แล้วนี่ถ้าเล่นเปิดแท็บใหม่ทุกครั้ง คงงงไม่ใช่น้อย ตัวอย่างนี้คือ Sanook ไม่ให้อภัยยูสเซอร์ เพราะบางทียูสเซอร์เค้าอาจจะเผลอเลือกผิดหรืออ่านดูสักพักแล้วไม่น่าสนใจ ก็ไม่สามารถกลับไปสถานะก่อนได้ทันที่ ต้องมาเลือกปิดแท็บ แล้วยังต้องมองหาแท็บต้นทางอีก แต่ก็ไม่ใช่ว่าทุกครั้งต้องแสดงเนื้อหาที่แท็บเดิมตลอดนะครับ ต้องดูจุดประสงค์การใช้งานของยูสเซอร์ว่าควรเปิดแท็บใหม่หรือไม่ครับ ไว้ผมจะมาเล่าให้ฟังในประเด็นนี้ น่าสนใจมากครับ ผมเลยมองว่า คนออกแบบ UI หรือทำงานด้านดีไซน์ต้องเป็นคนที่เข้าใจคนเยอะพอสมควร ยอมให้อภัยและเอาใจใส่ทุกคนในทุกรายละเอียดจริงๆ ครับ ^^