วันอาทิตย์, พฤศจิกายน 02, 2551

การเลือกรูปแบบของฟอร์มในโปรแกรม

ช่วงแรกขอการออกแบบ application ผมมองการออกแบบฟอร์มเป็นเรื่องเล็กมากๆ ยิ่งในยุกต์ของเว็บที่ฟอร์มไม่ได้มีข้อมูลให้กรอกมากมายนัก ยิ่งไม่มีปัญหา แต่ล่าสุดผมออกแบบ Online ERP ซึ่งใช้ฟอร์มกันอลังการ งานนี้เลยต้องศึกษาข้อดีข้อเสียของฟอร์มแต่ละแบบกันนิดหน่อย ผลจากการทดลองได้ออกมาสามแบบ classic ดังนี้ครับ แบบที่หนึ่ง ตัวหนังสือกับกล่องข้อความเป็นบรรทัดเดียวกัน แบบนี้ช่วยประหยัดเนื้อที่แนวตั้งได้ ทำให้ผู้ใช้ scroll น้อยลง หรือบางทีสามารถเห็นทั้งฟอร์มได้ในหน้าเดียว ข้อเสียคือปัญหาเรื่องความยาว เราจะกะความยาวยากเพราะหากมี label ตัวใดตัวหนึ่งมันจำเป็นต้องยาว จะทำให้ทั้งฟอร์มต้องยาวไปหมด ซึ่งทำให้ label ที่สั้นๆ อยู่หางจากกล่องข้อความมาก สร้างความลำบากให้ผู้ใช้ต้องเล็งเอาเอง หากยาวมากๆ บางทีถึงขนาดต้องเอาหน้าต่างอื่นมาทาบ เพื่อให้รู้ว่าเป็น label ของกล่องไหน แบบที่สองเหมือนแบบแรก คือตัวหนังสือกับกล่องข้อความเป็นบรรทัดเดียวกัน แต่ตัวหนังสือชิดขวาหมด จะเห็นว่าแบบที่สองเข้ามาแก้ปัญหาเรื่องระยะห่างระหว่ากล่องข้อความ กับ label โดยแลกกับความเป็นระเบียบเรียบร้อยในฟอร์ม โดยเฉพาะอย่างยิ่งในเมืองไทย ที่คนอ่านหนังสือจากซ้ายไปขวา เราจะเห็นอะไรๆ ชิดซ้ายไปหมดมาตั้งแต่เด็ก พอเห็นฟอร์มแบบนี้จะรู้สึกว่ามันไม่เป็นระเบียบทันที แบบสุดท้ายคือให้ตัวหนังสืออยู่บนกล่องข้อความ ให้ตัวหนังสือชิดซ้าย แบบนี้ช่วยประหยัดเนื้อที่แนวกว้าง แก้ปัญหาความยาวของ label และช่วยผู้ใช้ในการกรอกให้ตรงฟอร์ม เพราะเรียงจากบนลงล่าง ถ้าเราไม่สนใจว่าฟอร์มของเราจะยาวมาก จนต้อง scroll ลงมาหลายหน้า ฟอร์มนี้ก็เหมาะทีเดียวครับ (ค่า default ของ wufoo.com ใช้แบบนี้) บทความนี้ไม่สามารถสรุปได้ว่าฟอร์มแบบไหนดีที่สุด แต่อยากตั้งข้อสังเกตุให้กับคนที่กำลังออกแบบ Application ให้พิจารณาข้อดีข้อเสีย เพื่อหาฟอร์มที่เหมาะกับโปรแกรมของตนมากที่สุด สำหรับบางท่านอาจจะใช้โครงนี้เป็นต้นแบบความคิด แล้วเสริมแนวทางของตนเองลงไป เช่น OSX ใช้ฟอร์มแบบที่สอง แต่แก้ปัญหาความไม่เป็นระเบียบโดยทำให้ทั้งฟอร์มอยู่ตรงกลางก่อน แล้วค่อยจัดให้ตำแหน่งระหว่างตัวหนังสือกับกล่องข้อความตรงกัน ช่วยลดความรู้สึกว่าต้องชิดขวาออกไป (อันนี้ดูได้ใน HIG ของ Apple) **รู้สึกว่า Firefox ยังไม่ยอมทำตาม HIG นะเนี่ย เอาเข้าจริงเวลาเราออกแบบ Application จะมีปัจจัยอื่นอีกมากมาย ที่บีบให้เราต้องออกแบบไปในทางอื่น แต่ผมคิดว่าถ้าเรามีหลักไว้ยึดจะทำให้เราออกแบบได้เร็ว และประยุกต์ได้ง่าย เอาเข้าจริงในโปรแกรม Online ERP ของผมก็ไม่ได้ใช้สามฟอร์มนี้ แต่ใช้หลักการของทั้งสามแบบแน่นอน
blog comments powered by Disqus