การเริ่มต้นออกแบบ interface ที่ดีควรจะเริ่มต้นจากการทำ wireframe เสียก่อน ว่าแต่ wireframe มันคืออะไรล่ะ?
Wireframing คือการออกแบบโครงสร้างของสินค้า (ถ้าเป็นทำเว็บก็คือการออกแบบโครงร่างหน้าเว็บ) โดย wireframe นั้นจะประกอบไปด้วยส่วนประกอบต่างๆ ในหน้าเว็บเท่านั้น จะไม่มีการลง detail เรื่อง design แต่อย่างใด คือจะไม่พูดว่าตรงนี้สีแดง ตรงนี้สีเขียว แต่จะว่ากันด้วยเรื่องว่า ในหน้าเว็บนี้จะประกอบไปด้วยอะไรบ้าง และจะวางมันไว้ตรงไหน
…
นี่คือตัวอย่างของ wireframe ซึ่งสิ่งนี้เป็นสิ่งที่ต้องทำให้เสร็จก่อนที่จะให้เหล่าทีม designers เริ่มทำงาน
ดูอีกตัวอย่างครับ
…
…
อันนี้เป็นตัวอย่างอีกอันของ wireframe สำหรับทำร้านขายเพลง
การทำ wireframe ก็คือการวาง layout ของหน้าเว็บก่อนเอาไปเริ่ม design จริงๆ นั่นเอง การทำ wifeframe ที่ดี ต้องทำออกมาแล้วคนในทีมดูรู้เรื่อง อย่างภาพด้านบนนี่จะเห็นว่าการใช้ปุ่มและคอนโทรลต่างๆ เข้าใจง่ายมาก คือมองปุ้บก็รู้ว่า อ้อ นี่คือ TextBox นะ มีไว้สำหรับให้ผู้ใช้พิมพ์ข้อมูล, อันนี้คือช่องเอาไว้ใส่รูปนะ เป็นต้น
…
การทำ wireframe มีประโยชน์หลักๆ 2 ประการคือ
- ช่วยให้เราเห็นภาพองค์ประกอบทั้งหมดในเว็บว่ามีอะไรบ้าง, ขาดตกบกพร่องอะไรรึเปล่า, วางตำแหน่งดีหรือยัง ก่อนที่จะเริ่มทำจริง
- ทำให้ผู้ร่วมงานของเราเข้าใจความต้องการ (requirement) ของเราได้ง่ายและชัดเจนขึ้น
สำหรับ tools ที่ใช้ทำ wireframe มีเยอะมากครับ ที่ฮิตใช้กันเยอะๆ ก็คือ Microsoft Visio นั่นเอง