วันพฤหัสบดี, มกราคม 01, 2552

ความหมายของปุ่มในตำแหน่งที่ต่างกัน

สวัสดีปีใหม่ครับ ขอให้ทุกคนมีความสุขในการออกแบบ Application ตลอดปี 2009 นะครับ ก่อนวันหยุดยาวปีใหม่ผมบังเอิญต้อง Update Host ให้กับ User ของ Mysql ผ่าน Mysql-Admin ทำให้เจอบางอย่างน่าสนใจเข้า



ผม Add New Host ให้กับ User คนหนึ่งในระบบ หลังจากที่ผมเห็น Host ปรากฏอยู่ใต้ชื่อ User ก็สบายใจปิดโปรแกรมไป แต่กลายเป็นว่า User คนนั้นยังไม่ได้รับสิทธิ์ มาตรวจสอบอีกทีกลายเป็นว่าต้องกดปุ่ม Apply ก่อน รูปด้านบนแสดงตำแหน่งของปุ่ม Apply ของ Mysql Admin Version Widows บังเอิญว่าลืมภาพ Version Linux ไว้ที่ office ขอเอาที่หาได้บน google มาแสดงไปก่อนนะครับ ปัญหาของปุ่ม Apply ใน Version Linux และ Windows คือมันสื่อความหมายไม่ครอบคลุมพื้นที่ด้านซ้ายมือ ดังนั้นผู้ใช้อย่างผม จึงเข้าใจไปเองว่าไม่ต้องกด Apply ก็ได้ ดังรูปด้านล่าง



พื้นที่ที่ผู้ใช้รู้สึกจะเป็นกรอบสีแดง ส่วนพื้นที่การ Apply จริง คือกรอบสีเขียวทางขวามือ ทางแก้มีหลายวิธีแต่สิ่งที่น่าสนใจกว่าคือ จริงๆ แล้วมีทฤษฏีให้เราใช้อ้างอิงหรือเปล่า เนื่องจากหาไม่เจอผมเลยคิดสูตรส่วนตัวขึ้นมา ผมแบ่งปุ่มออกเป็น 3 ประเภทตามจุดประสงค์ในการใช้งาน

1. ปุ่มสำหรับการเลือก (select button) ซึ่งมักแสดงในลักษณะ tab
2. ปุ่มสั่งงาน (action button) มักแสดงเป็น icon
3. ปุ่มเสร็จสิ้นการทำงาน (done button) ส่วนมากใช้คำว่า OK, Apple หรือ Save เป็นต้น

ผมตั้งสมติฐานว่าคนส่วนใหญ่มอง GUI จากบนลงล่าง ซ้ายไปขวา ตามการอ่านหนังสือ จากนั้นลองวาดรูปดู



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



ปุ่มประเภท Action ผู้ใช้จะต้องเลือก Object ในโปรแกรมก่อน จากนั้นจึงเลือก Active ที่จะทำกับ Object นั้น เช่น Copy หรือ Delete เป็นต้น ผมคิดว่าปุ่ม Action จะอยู่ด้านไหนก็ได้ เนื่องจากผู้ใช้ยังวนเวียนอยู่ในโปรแกรมอีกหลายรอบ จึงไม่จำเป็นต้องเรียงจากซ้ายไปขวา แต่อย่างไรก็ตาม ผมมองว่าตำแหน่งของ Action ในหนึ่งโปรแกรมควรอยู่ด้านเดียวกัน ถ้าอยู่ทั่วไปหมด อาจทำให้ผู้ใช้หาไม่เจอ



ปุ่มสุดท้าย คือปุ่ม Done ซึ่งเป็นปุ่มต้นเรื่องของเรา ผมเอาปุ่มนี้ไว้ด้านล่างสุด จะชิดซ้าย ขวา หรือกลาง ก็ได้ แล้วแต่สถานการณ์ แต่จะไม่เอาไว้ซ้ายมือของกล่อง เพราะไม่เป็นที่นิยม และทำให้เกิดช่องว่างเหนือปุ่มดูขัดตามาก ผมมองว่าพื้นที่ที่ปุ่ม Done จะกินความหมายไป จะต้องอยู่เหนือตัวมัน ไม่อยู่ระดับเดียวกัน หรืออยู่ใต้ปุ่ม กลับมาดู MySql Admin ปัญหาของปุ่ม Apply ได้ถูกแก้แล้วใน Version Mac OS X



ใน version นี้กล่องด้านซ้ายมือถูกยกขึ้นทำให้ปุ่ม Apply มีความหมายกว้างขึ้น กินพื้นที่ไปถึงรายชื่อผู้ใช้ด้วย ตามจุดประสงค์ของมัน แต่ก็ยังขัดๆ อยู่นิดหน่อย ถึงแม้ว่ากล่องจะอยู่เหนื่อปุ่ม Apple แต่มีองค์ประกอบของกล่องรายชื่อผู้ใช้ยาวลงมาระดับเดียวกับปุ่ม Apply ทางที่ดีน่าจะยกปุ่ม Add User, Delete User, Add Host, Delete Host และปุ่ม Refresh ขึ้นไปอยู่ในกล่องด้านบนด้วยเลย คล้ายปุ่ม + - ของ Preference Network ในรูปข้างล่าง



ต้องปรับกันอีกเล็กน้อย ไม่รู้ว่า MySQL GUI Tools เขียนด้วย Swing, QT หรือ GTK ได้แต่หวังว่า lib ที่เค้าเลือกใช้จะรองรับ

1 ความคิดเห็น:

  1. ไม่ระบุชื่อ2:12 ก่อนเที่ยง

    ขอบคุณครับ

    เข้ามา blog นี้ได้ ความรู้เรื่อง ui เยอะมากครับ

    ตอบลบ