ขั้นตอนการออกแบบ Wireframe

​การออกแบบ Wireframe เป็นส่วนสำคัญของกระบวนการออกแบบในหลาย ๆ แขนง โดยทั่วไปแล้วนักออกแบบจะทำการออกแบบ Wireframe ให้เสร็จสมบูรณ์ โดยจะควบรวมการออกแบบทั้งโครงสร้างของข้อมูล Layout การจัดวาง สัดส่วนต่าง ๆ การจัดวาง Key navigation รวมไปถึงเส้นทางการใช้งานของระบบทั้งหมด

ยิ่งนักออกแบบเตรียมงานให้เสร็จในระหว่างขั้นตอนการทำ Wireframe มากเท่าไร ก็จะยิ่งทำให้การออกแบบ Prototype และ UI ใช้เวลาน้อยลงและมีความเที่ยงตรงสูงขึ้นอีกด้วย ดังนั้น Wireframe จึงช่วยทำให้กระบวนการออกแบบผิดพลาดน้อยลงอย่างเห็นได้ชัด และเข้าใจภาพรวมได้เร็วขึ้น

https://dribbble.com/shots/16627806--Dogma-Greyscale-design

Wireframe คืออะไร

Wireframe คือการออกแบบโครงสร้าง Digital Product และระบบการควบคุมการใช้งานบน Platform ต่าง ๆ หรือเว็บไซต์ ซึ่ง Wireframe จะประกอบไปด้วยรูปร่าง วงกลม สี่เหลี่ยม สี่เหลี่ยม สามเหลี่ยม ฯลฯ เพื่อแสดงองค์ประกอบ UI และข้อความ โดยเฉพาะข้อความที่มีความสำคัญ เช่น คำกระตุ้นการตัดสินใจ (Call to action), หัวข้อในหน้าต่าง ๆ, ราคา หรือคำแนะนำการใช้งานและข้อมูลสำคัญ

Wireframe ต้องตอบโจทย์การออกแบบ UI ที่สำคัญได้ทั้ง 4 ข้อ

• ต้องมีองค์ประกอบของ UI และเนื้อหาที่จำเป็น เพื่อให้ตรงตามเป้าหมายทางธุรกิจและความต้องการของผู้ใช้งานได้อย่างเหมาะสม

• จัดเรียงและจัดลำดับความสำคัญของการเข้าถึงเนื้อหาต่าง ๆ อย่างเหมาะสม

• ความสม่ำเสมอของ Layout ที่ใช้ในการออกแบบ

• รูปแบบการใช้งานเมนูต่าง ๆ และ Call to action หลัก

https://dribbble.com/shots/2190064-Creative-South-16-Wireframe

Wireframe เป็นกระบวนการนำแนวคิดการออกแบบซ้ำไปมาหลาย ๆ ครั้ง เพื่อทดสอบแนวคิดและแนวทางในการใช้งาน จนเกิด Usability ที่ดีโดยใช้ UI ที่เรียบง่าย การออกแบบขั้นพื้นฐานเหล่านี้จะช่วยให้นักออกแบบมองเห็นและแก้ไขปัญหา เพื่อทำให้ผู้ใช้งานมีประสบการณ์ที่ดีกับผลิตภัณฑ์ของเรา ก่อนที่จะลงมือออกแบบ UI และ Prototype ที่มีความถูกต้องและเที่ยงตรง ซึ่งจะช่วยลดการใช้เวลาและทรัพยากรในการทำงานระยะยาวได้

Wireframe และ Mockup แตกต่างกันอย่างไร?

https://pixetic.com/blog/wireframe-mockup-prototype-difference/

โดยทั่วไปแล้วการออกแบบ Wireframe จะไม่มีการลงสี ตกแต่งภาพประกอบ หรือการใช้ Graphic ที่มีรายละเอียดสูง โดยจะสามารถเรียกการออกแบบลักษณะนี้ว่า Low-fidelity designs
Mockup คือการออกแบบแบบ High-fidelity designs ซึ่งจะเป็นการทำให้งานออกแบบที่ออกมามีความคล้ายคลึงกับตัวงานจริงมากที่สุดเพื่อเป็นตัวอย่าง แต่จะไม่ออกแบบทั้งหมดในครั้งเดียว โดยมากจะออกแบบเพียงแค่แสดงถึงทิศทางหรือรูปแบบที่ผลิตภัณฑ์นั้นจะถูกพัฒนาขึ้นมา

เหตุใดนักออกแบบจึงสร้าง Wireframe

การออกแบบ Wireframe เป็นส่วนสำคัญในกระบวนการออกแบบ เพราะการออกแบบ Wireframe จะบังคับให้นักออกแบบและผู้ที่เกี่ยวข้องสามารถให้ความสนใจไปที่การใช้งานและความต้องการของผู้ใช้งาน โดยไม่ถูกรบกวนด้วยการดูความสวยงาม สี ขนาด สไตล์และเนื้อหาอื่น ๆ ที่ยังไม่จำเป็น

ขั้นตอนการทำ Wireframe สามารถลดเวลาในการออกแบบผลิตภัณฑ์ที่จะส่งมอบให้กับผู้ใช้งานได้อย่างมาก และหลีกเลี่ยงข้อผิดพลาดในการออกแบบที่อาจจะก่อให้เกิดค่าใช้จ่ายตามมา และทำให้ตัดสินใจทิศทางในการออกแบบได้ดีมากขึ้น 

มีโครงสร้างข้อมูลที่ดีและการเข้าถึงที่ง่าย

การออกแบบ Wireframe ยังมีความสำคัญต่อการออกแบบเมนูให้กับผู้ใช้งานเพื่อใช้ไปยังหน้าต่าง ๆ ของเว็บไซต์ และวางโครงสร้างของข้อมูลเพื่อให้ผู้ใช้งานค้นหาและเข้าถึงข้อมูลที่เขาต้องการได้ง่ายขึ้น

https://dribbble.com/shots/14292029-mega-menu/attachments/5946534?mode=media

วิธีสร้าง Wireframe

1. สรุปผล UX Research

นักออกแบบควรที่จะสรุปข้อมูลที่ได้มาจากการทำ UX Research เพื่อใช้เป็นข้อมูลประกอบและแนวทางที่จะออกแบบ Wireframe โดยแบ่งตามหัวข้อตามนี้

• User persona กำหนดกลุ่มผู้ใช้งานที่จะมาใช้ผลิตภัณฑ์ของคุณ
• User journey map เป็นการกำหนดเส้นทางและเป้าหมายให้กับผู้ใช้งานว่าเขาต้องการอะไรและเขาต้องทำอะไรเพื่อไปให้ถึงเป้าหมาย
• Sitemap or information architecture ออกแบบโครงสร้างและจัดกลุ่มข้อมูลให้เป็นระเบียบ กำหนดว่าเว็บไซต์ของเราจะมีกี่หน้าและประกอบไปด้วยเนื้อหาอะไรบ้าง
• Business goals เข้าใจเป้าหมายธุรกิจว่าสิ่งที่เราต้องการคืออะไร เพื่อใช้เป็นข้อมูลในการออกแบบ Features ต่าง ๆ ที่จำเป็นต้องมีเพื่อให้บรรลุเป้าหมายทางธุรกิจ

2. กำหนด User flow ในการออกแบบ

User flow คือการออกแบบ Flow chart ให้เข้าใจ Flow หรือเส้นทางการใช้งานแบบง่าย ๆ เพื่อให้เรามีแนวทางในการออกแบบว่า ผู้ใช้งานควรจะต้องผ่านขั้นตอนอะไรบ้างก่อนที่จะไปยังจุดหมายต่าง ๆ บนเว็บไซต์

https://dribbble.com/shots/14333732-scase-ux

กระบวนการนี้มีเป้าหมายเพื่อให้นักออกแบบมีแผนที่ที่กำหนดไว้อย่างชัดเจนว่าผู้ใช้งานจะต้องมี Touchpoint ตรงไหนบนเว็บไซต์ของเราบ้าง เราควรจะออกแบบหน้าจอเพื่อรองรับกรณีต่าง ๆ ไว้ที่ Action ไหนบ้าง

3. ออกแบบ Wireframe

ในปัจจุบันนี้ Wireframe จากที่เป็นเพียงแค่การออกแบบคร่าว ๆ โดยไม่ต้องคำนึงถึงสัดส่วนและความเรียบร้อยมากนัก นักออกแบบเริ่มที่จะนิยมทำ Wireframe ให้เป็นการออกแบบที่ดูจริงจังมากขึ้น สามารถคลิกได้ ใช้เนื้อหาจริง และใช้ไอคอนง่าย ๆ ผสมกับการลงสีจุดสำคัญ และข้อความต่าง ๆ  ที่ใกล้เคียงกับงานออกแบบจริงมากขึ้นตามลำดับ แต่ยังอยู่บนพื้นฐานเดิมคือ การทำ Wireframe ออกมาแบบรวดเร็ว เพื่อทดสอบดูว่าระบบทำงานยังไง และอุดรอยรั่วให้ได้มากที่สุด

Wireframe สามารถแบ่งเป็น 3 ประเภทหลัก ๆ ซึ่งต่างกันที่ตัวรายละเอียดที่ใส่เข้าไปในการ คือ 

• Low-fidelity Wireframes: วาดมือได้ เห็นภาพหรือไอเดียคร่าว ๆ
• Mid-fidelity Wireframes: มีการวางตำแหน่งฟีเจอร์ Input ข้อความต่าง ๆ และ Layout ที่เรียบร้อย 
• High-fidelity Wireframes: เน้นทุกรายละเอียด ทำให้คลิกได้ เกือบเหมือนของจริง

อ่านเพิ่มเติมได้ที่ https://sennalabs.com/blog/What-are-wireframes

ซึ่งปกติแล้วการออกแบบ Wireframe จะเริ่มจากการทำ Low-fidelity เพื่อนำเสนอไอเดียคร่าว ๆ ก่อน จึงค่อยออกแบบเป็น Mid-fidelity โดยออกแบบเพิ่มเติมขึ้นมาจากของเดิมและสามารถนำไปทำ Usability test ได้ ไปจนถึงการออกแบบ UI ในขั้นสุดท้าย

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