Thursday, November 30, 2006

การ Design Form สำหรับ Web Application

การ Design Form สำหรับ Web Application ที่ดี จะช่วยให้ User เข้าใจถึงโครงสร้างของกลุ่มข้อมูล การจัดหมวดหมู่ ความเชื่อมโยงกันของแต่ละ Field มีจุดที่น่าสนใจไล่สายตา ทำให้ User สามารถเรียนรู้ Step ในการกรอก Input ได้ด้วยตนเอง

ในการ Design Form นั้นควรคำนึงถึงเรื่องหลัก ๆ ดังนี้
  1. การจัดวาง Layout ของ Field ต่าง ๆ ใน Form และ Label เช่น เรียงแนวตั้ง แนวนอน ชิดซ้ายขวา
  2. การใช้ Visual Element ต่าง ๆ ประกอบ เพื่อให้ดูง่ายขึ้น เช่น สีพื้น กล่อง Panel Font เส้นขอบ เส้นแบ่ง
  3. Action ที่จะทำกับ Form ได้ เช่น ปุ่มหลัก (Submit, Save) ปุ่มรอง (Cancel, Reset) หรือ Link ต่าง ๆ
ดังรูปตัวอย่าง จากบทความด้านล่าง

  1. Web Application Form Design
  2. Web Application Form Design Expanded

ตัวอย่างในการวาง Layout แบบต่าง ๆ

  1. แบบตามใจ Programmer
  2. แบบแนวตั้ง
  3. แบบหลาย Column
  4. แนวนอน
  5. แบบกำหนดระยะ Margin
  6. แบบใช้ Fieldset

No comments: