วันเสาร์, ธันวาคม 13, 2551

BAD for Better Application Design ตอนที่ 5

ไม่ได้เขียนมาพักใหญ่ เนื่องจากต้องเร่งส่งงาน ตอนนี้ส่งเรียบร้อยไประดับหนึ่ง จึงมีเวลาเอาสิ่งที่อยากเขียนมาเขียนซะที วันนี้อยากพูดถึงเว็บไซต์ gotoknow.com ครับ เว็บนี้ผมเข้ามาอ่านประจำแต่พึ่งมีโอกาสได้เขียน comment เมื่อไม่กี่วันมานี้เอง พอเริ่มใช้ฟอร์มใส่ comment ทำให้สัมผัสได้ถึงปัญหา แต่ยังไม่รู้ว่าปัญหาอะไรเลยลองวิเคราะห์ดู ผมพบว่าฟอร์มนี้ประกอบด้วยสี่ส่วน 1. ส่วนระบุตัวตนของคน comment 2. ส่วนของข้อความที่จะ comment 3. ส่วนยืนยันว่าผู้ถามเป็นคน 4. ปุ่มกดเพื่อบันทึก หรือยกเลิก พอแยกเป็นช่องๆ ทำให้เห็นว่ากลุ่มแรกระบบ label เป็นแบบซ้ายไปขวาหมด แต่กล่องที่สองและสาม ไม่ได้เป็นแบบเดียวกัน สีเขียวของผมคือเส้นสายตาที่คาดว่าผู้ใช้จะมองตามนี้ label อันที่ 1 กับ 2 อยู่ในที่ตาม concept ครับ ถึงแม้คำว่าชื่อจะอยู่ห้างจากตัว text box ทำให้เล็งยาก แต่เป็นหัวแถวเลยไม่มีปัญหา label อันที่ 3 จะเหมือนโดนสับขาหลอก เพราะมี label แต่ไม่มีช่องให้กรอก คาดว่าผู้พัฒนามองเป็นอีก attribute หนึ่ง และไม่อยากเอามาไว้ใต้ email เพราะจะทำให้ดูเป็นตัวขยายชุด email ไปซะ อีกปัญหาของ label 3 คือมันอยู่ใกล้กับข้อความมากเกินไปทำให้ดูเป็นประโยคเดียวกัน สูญเสียความเป็น label ไป label อันที่ 4 กับ 5 พยายามอยู่ตรงกับกล่องข้อความ แต่ผมมองว่า label ควรอยู่บนสุดของกล่องนั้นๆ เพราะจะทำให้ผู้ใช้ไล่อ่านได้ง่ายขึ้น คือจากซ้ายไปขวา จากบนลงล่าง ไม่ขึ้นๆ ลงๆ ปัญหาต่อจาก label คือที่อยู่ของปุ่มบันทึก เนื่องจากฟอร์มของเราเป็นแบบชิดซ้้าย ดังนั้นการที่ปุ่ม "บันทึก" กับ "ยกเลิก" จะอยู่ทางด้านขวามือต้องมีเหตุผลหนักมากๆ ถึงจะเลื่อนไปอยู่ทางขวามือได้ เช่น เป็นฟอร์มแบบต่อเนื่อง ต้องการสื่อว่ากดแล้วมีฟอร์มต่อไป ให้กดเพื่อไปทางขวา และในหน้าถัดไปจะมีปุ่ม Back เพื่อกลับมาทางซ้าย หรืออาจเอาไว้ทางขวาเพราะถูกบังคับด้วยขนาดของหน้าจอ เป็นต้น ปัญหาต่อมาคือ ขนาดของคำว่า "ยกเลิก" ผมเข้าใจว่าผู้พัฒนาทำให้เป็น link แทนที่จะเป็นปุ่มเหมือนคำว่า "บันทึก" เพราะต้องการให้คำว่า "บันทึก" เด่นกว่า น่ากดกว่า ชัดเจนกว่า ไว้จำเป็นจริงๆ ค่อยมามองปุ่มยกเลิก แต่ใน safari ผมเห็นคำว่า "ยกเลิก" ตัวใหญ่กว่าคำว่า "บันทึก" ซะงั้น ผมลองจัดใหม่ เพื่อแก้ปัญหาข้างต้น ให้ label มาอยู่ตรงกลาง เพื่อให้ดูง่ายกว่าต้องกรอกที่ช่องไหน แล้วก็เปลี่ยน "IP แอตเดรส" จาก label มาเป็นข้อความ พร้อมเพิ่มคำเพื่อสื่อความหมายว่าเป็น ip ของผู้ส่ง comment และให้อ่านเป็นประโยคไปในตัว ปรับ label ของข้อความ และรหัสสุ่มมาชิดด้านบน ใช้แถบสีช่วยเพื่อให้คำว่าข้อความไม่ดูลอยๆ มากนัก แต่ไม่อยากให้คำว่า "เรียกใช้ตัวจัดการข้อความ" มาอยู่ด้านหน้า เพราะกล่องข้อความควรเด่นกว่า จากนั้นจัดขนาดของกล่องให้แต่ละบรรทัดเท่ากัน ปรับขนาดของ text box ยาวเท่ากัน ช่องระหัสสุ่ม ขยายให้กล่องกรอกระหัสสุมมีขนาดกับตัวรูปภาพจะได้ดูเป็นชุดมากขึ้น พร้อมคำอธิบายและรูปประกอบ หากสงสัยเพิ่มเติมให้กด link "เหตุผล" ผมคิดไปเองว่า gotoknow มีคนที่ไม่ใช่นัก it อยู่มาก เลยอยากให้ความสำคัญตรงส่วนนี้เยอะหน่อย สุดท้ายก็ปรับขนาดของปุ่มบันทึกให้ใหญ่ขึ้น ลดขนาดของคำว่ายกเลิกลง ได้ผลมาแบบนี้ครับ หากเห็นหรือไม่เห็นด้วย ฝากส่งให้ทาง gotoknow ด้วยนะครับ ของดีต้องช่วยกันสนับสนุน
blog comments powered by Disqus