วันศุกร์, กรกฎาคม 09, 2553

ออกแบบ alert box

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

ยกตัวอย่างเช่น alert box ของโปรแกรม Thunderbird


รูปแสดง alert box ตอนกด offline

เหตุการณ์ในรูปเกิดขึ้นเมื่อผมไปสั่ง Thunderbird ทำงาน Offline แต่โปรแกรมมีงาน download ค้างอยู่ มันจึงถามขึ้นมาว่า "จะรอให้ download เสร็จก่อนมั้ย ค่อย Offline" ปัญหาเกิดขึ้นทันทีครับ เพราะเมื่อทราบว่ามีการ download อยู่ ผมก็ไม่ต้องการให้มัน Offline และต้องการยกเลิกการ Offline แทน แต่มันไม่มีปุ่ม Cancel ให้

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

เช่นในกรณีของผม เมื่อผมทราบว่ามีการ download อยู่ค้างอยู่ผมจะไม่สั่ง offline เพื่อให้ web ทำงานเร็วขึ้น แต่จะตัดสินใจไปเล่นกับหมาแทนแล้วเปิดคอมพิวเตอร์ทิ้งไว้

ดังนั้นเราควรให้โอกาสผู้ใช้ในการยกเลิกสิ่งที่กำลังทำอยู่ด้วย

สำหรับการออกแบบในกรณีของ alert box กล่องนี้ อาจจะใช้วิธีเพิ่มปุ่ม cancel เข้าไป เช่น


รูปแสดงการใส่ cancel เข้าไปใน alert box 

ดูตัวอย่างจาก dialog ของโปรแกรม textedit



มี alert box เกิดขึ้นเมื่อปิดโปรแกรมโดยไม่ได้ save

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

"คุณตัดสินใจไม่บันทึกใช่หรือไม่" แล้วให้เลือก "ใช่" หรือ "ไม่ใช่" เราต้องใช้ความคิดนิดหน่อย

แต่ถ้าเป็น

"คุณตัดสินใจไม่บันทึกใช่หรือไม่" แล้วให้เลือก "บันทึก" หรือ "ไม่บันทึก" อันนี้น่าจะใช้สมองน้อยกว่า

ดังนั้นเราลองเปลี่ยนปุ่มเป็นกริยาดู


เปลี่ยนปุ่มเป็นคำกริยา


ตาม HIG ของ Apple บอกว่าข้อความใน alert box ควรมีให้น้อยที่สุดเท่าที่จะทำได้เพราะกลัวว่าคนจะไม่อ่าน ผมมีหลักการง่ายๆ ที่เคยไปฟังจาก WWDC 2005 เค้าบอกว่าสิ่งที่ต้องมีใน alert box คือ

"ปัญหาหรือสิ่งที่เกิดขึ้น + ผลลัพทธ์ของปัญหา + ทางแก้ปัญหา"

ถ้ามีสองบรรทัด บรรทัดแรกให้เป็นข้อความที่ต้องการบอก (Message text) ส่วนบรรทัดที่สองเป็นคำขยาย (Informative text) หลังจากอ่าน HIG แล้วผมลองเปลี่ยนตาม HIG ของ Apple ดู



รูปหลังจากเปลี่ยนคำถาม

อันดับแรกผมตัดข้อความ "Download Message" ซึ่งไม่จำเป็นออก  สองคือเพิ่มคำขยายผลของคำถามเข้าไป และ สุดท้ายคือเพิ่ม icon ของโปรแกรมเข้าไปใน icon ของ alert ด้วย ก็ได้แต่หวังว่า version ต่อไปของ Thunderbird จะเพิ่ม Cancel เข้าไป :)

สำหรับ OSX จะประมาณนี้ หากสนใจเรื่องการเขียนข้อความใน Dialog ให้ลองอ่านใน HIG ของ Apple เพิ่มเติม แต่สำหรับ OS อื่นอาจจะมีวิธีการแบบของตัวเอง เราก็ควรจะเขียนโปรแกรมตามประสบการณ์ของ OS นั้นๆ ครับ ผู้ใช้จะได้ไม่รู้สึกแปลก

แนะนำให้ลองอ่าน HIG ของ Gnome,  KDE และ Windows ดูครับ

เพิ่มเติม 1

อีกหนึ่งตัวอย่างจาก chrome ที่ใช้วิธีใส่ข้อความยาวๆ บนปุ่ม และลดเหลือทางเลือกแค่สองทาง