ทฤษฎี UI

UI ที่ให้อำนาจการควบคุมและการให้อภัย

2

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

การกระทำ (action) ที่เกิดขึ้นบนหน้าเว็บที่ปฏิสัมพันธ์ผ่านทาง UI ต้องเกิดขึ้นจากความเต็มใจของยูสเซอร์ ไม่ใช่เกิดจากความจำยอมนะครับ เราต้องออกแบบ UI ที่ทำให้ยูสเซอร์เกิดความรู้สึกว่าเค้ากำลังมีอำนาจในการควบคุมทุกอย่างในหน้าเว็บ (control) แม้กระทั่งทำอะไรผิดพลาดไป ก็สามารถแก้ไขหรือกลับไปสถานะก่อนหน้าได้เสมอ พูดอีกนัยหนึ่งก็คือ UI ต้องพร้อมให้อภัยยูสเซอร์เสมอ (forgiveness) มาดูตัวอย่างกันครับ

cf-01

ในหน้า feed ของ facebook เมื่อเราโพสต์อะไรลงไป แล้วเผอิญนึกขึ้นมาได้ว่าลืมใส่ข้อความอะไรบางอย่างลงไป เราสามารถทำการแก้ไขได้โดยการเลือกที่ปุ่มลูกศรที่อยู่ทางด้านขวาบนของโพสต์ จากนั้นก็เลือกเมนู ‘แก้ไข’ นี่เป็นหนึ่งอำนาจที่ facebook ให้กับยูสเซอร์ครับ เพื่อกลับยังสภาพก่อนหน้าตอนกำลังจะกดยืนยันที่จะโพสต์ ยังมีอีกหลายอำนาจที่ยูสเซอร์สามารถทำได้กับโพสต์นี้ เช่น แสดงโพสต์ไว้บนสุดตลอด, เปลี่ยนวันที่ที่โพสต์, หรือจะลบโพสต์นี้ทิ้งไปเลยก็ได้ (UI ให้อภัยที่โพสต์ผิดไปไง)

cf-02

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

cf-04

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

cf-05

บทความที่เราลบในคราวแรกนั้น ก็จะย้ายไปอยู่ในแท็บ “ถังขยะ (trash)” (จะไม่ปรากฏให้เห็นหากไม่มีไฟล์ที่เราลบ) ถ้าหากเราอยากนำกลับมาใหม่ ก็แค่เอาเมาส์ไปวางที่บทความแล้วเลือกเมนู “Restore” หรือถ้ามั่นใจว่าจะลบจริงๆ ก็เลือก “Delete Permanently” แต่คราวนี้เราจะไม่สามารถเอาบทความกลับคืนมาได้แล้ว เพราะ wordpress ให้อภัยไปครั้งหนึ่งซึ่งก็เพียงพอแล้วครับ

เรื่องของคำพูดที่ใช้ก็เช่นกันครับ

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

  • แบบ a จะให้ความรู้สึกกลางๆ บอกว่าปุ่มนี้ทำอะไร
  • แบบ b จะให้ความรู้สึกว่าเราออกคำสั่งให้ยูสเซอร์กระทำ
  • แบบ c จะเป็นการสื่อสารว่า ปุ่มนี้เรายกให้ยูสเซอร์แล้วนะ มันเป็นของเค้าแล้ว จะทำอะไรก็ได้ตามใจเลย

แบบ c จึงเป็นการเลือกใช้คำที่เหมาะสมที่สุดในการทำให้ยูสเซอร์เกิดความรู้สึกได้อำนาจในการควบคุม

ตัวอย่างใกล้ตัวอีกที่เราคุ้นเคยกันดีก็คือ การเปิดหน้าลิงค์ที่ยูสเซอร์เลือก ซึ่งมีอยู่ 2 แบบหลัก คือ

  • เปิดหน้าลิงค์โดยแสดงเนื้อหาที่แท็บเดิม
  • เปิดหน้าลิงค์โดยแสดงเนื้อหาที่แท็บใหม่

อย่างของ sanook.com ผมว่าทำไม่ถูกต้องครับ

cf-06

กรณีหนึ่ง ผมสนใจอยากดูรายละเอียดของบทความนี้ จึงคลิกที่ลิงค์หรือรูปภาพ

cf-07

แต่สิ่งที่ Sanook ทำคือ เปิดแท็บใหม่เพื่อแสดงเนื้อหานี้ แทนที่จะแสดงเนื้อหาที่แท็บเดิม เพราะหากผมเปลี่ยนใจหรืออ่านบทความเสร็จแล้ว ผมสามารถใช้ปุ่ม back หรือกดปุ่ม back space เพื่อกลับไปยังหน้าเดิมและจุดเดิมได้ทันที

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

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

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

ผมเลยมองว่า คนออกแบบ UI หรือทำงานด้านดีไซน์ต้องเป็นคนที่เข้าใจคนเยอะพอสมควร ยอมให้อภัยและเอาใจใส่ทุกคนในทุกรายละเอียดจริงๆ ครับ ^^

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

อย่าทำให้ฉันคิดมากนะจ๊ะเธอ (Don’t Make Me Think) ตอนที่ 3/3

Previous article

แบงค์เมกา design ใหม่!

Next article

You may also like

2 comments

  1. ขอบคุณเนื้อหาดีๆครับ

    ในตอนท้ายเห็นมีเนื้อหาของ Sanook.com ขึ้นอยู่ ซึ่งโดยความเป็นจริงการ การกด _Blank ขึ้นหรือไม่นั้น ทาง Designer ของ Sanook ได้มีการพิจารณาเพื่อความเหมาะสมดังนี้ครับ

    1. กรณี กดลิงค์ ที่เปิดเว็บไซต์ใน Channel (Sub Domain) ใหม่ จะให้เปิดแบบ _blank ครับ
    2. กรณี กดลิงค์ ที่เปิดเว็บไซต์ใน Channel เดิม จะให้เปิดแบบปกติครับ

    เนื่องจาก Sanook.com มีโครงสร้างเป็นเว็บไซต์ที่มีหลาย Subdomain (มากๆ) จึงต้องการแยกเวลา User กดแต่ละ Subdomain ให้แยกออกจากกันครับ ไม่งั้นจะเกิดความสับสนเวลากดไปลิงค์ต่างๆ ที่ส่งผลให้หน้า Interface / Index แตกต่างกันครับ ^ ^

    1. ขอบคุณมากครับที่ช่วยเพิ่มเติมเนื้อหาให้ครับ เบื้องหลังเป็นเช่นนี้นี่เอง ^^

Leave a reply

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