23Feb, 2024
Language blog :
Thai
Share blog : 
23 February, 2024
Thai

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

By

8 mins read
ขั้นตอนการออกแบบ 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 ในขั้นสุดท้าย

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

Written by
Ya Piya
Ya Piya

Subscribe to follow product news, latest in technology, solutions, and updates

- More than 120,000 people/day visit to read our blogs

Other articles for you

13
July, 2024
UX for Psychology - Loss Aversion (ความกลัวการสูญเสีย)
13 July, 2024
UX for Psychology - Loss Aversion (ความกลัวการสูญเสีย)
หลายคนคงเคยเจอเหตุการต่างๆ บนโลกดิจิทัลที่สามารถนำพาเราไปเสียเงินหรือสมัครใช้บริการได้ง่าย ๆ ทั้งที่ไม่รู้ตัว ลองมาดูกันว่า พวกเขาเหล่านั้น ใช้วิธีหลอกล่อนักชอปอย่างเรากันอย่างไรบ้าง พื้นฐานของคนทั่วไปนั้นไม่อยากที่จะสูญเสียอะไรไป แม้แต่สิ่งที่อาจจะไม่จำเป็น เราอาจจะพบการทำการตลาดในเชิงนี้ได้บ่อย ๆ ทั้ง ๆ ที่เราไม่รู้ตัว และอาจจะไม่จำเป็นต้องซื้อแต่โดนกระตุ้นด้วยข้อมูลที่เรารับมาแบบงง ๆ เช่น Flash sale 40% สินค้าที่มีจำนวนจำกัด นั้นจะน่าสนใจมากกว่าการเดินเจอสินค้าเดียวกันในห้างที่ลดราคา 40% เช่นเดียวกัน ข้อความบนเว็บช็อปปิ้งที่ส่งมาหาคุณว่าสินค้าที่คุณเคยสนใจกำลังลดราคาอยู่ อย่าพลาดโอกาสที่จะซื้อตอนนี้ มักกระตุ้นความต้องการซื้อของเราได้เป็นอย่างดี เพราะเรากลัวที่จะเสียโอกาสดี

By

3 mins read
Thai
13
July, 2024
ทำไม Google Fonts ถึงเป็นทางเลือกที่ดีในการออกแบบเว็บไซต์
13 July, 2024
ทำไม Google Fonts ถึงเป็นทางเลือกที่ดีในการออกแบบเว็บไซต์
แต่ก่อน เวลาที่เว็บไซต์ถูกดีไซน์ด้วยฟอนต์แปลก ๆ หรือมีเอกลักษณ์เฉพาะตัว จะทำให้ผู้ใช้งานบางคนมองไม่เห็น เพราะในเครื่องของผู้ใช้งานไม่มีฟอนต์นั้น ระบบก็จะเลือกเอาฟอนต์อื่นในเครื่องขึ้นมาแสดงผล เห็นเป็นฟอนต์อื่นไป ทำให้ดีไซเนอร์ต้องแก้ปัญหาด้วยการทำรูปแล้วเอามาแปะในเว็บไซต์แทน หรือแม้ว่าจะแสดงผลตามที่ถูกออกแบบมา ความเร็วก็อาจเป็นปัญหาในการโหลดและเข้าถึง เพราะฟอนต์ถูกโหลดจากเซิร์ฟเวอร์ แต่สมัยนี้ไม่มีใครใจเย็นพอที่จะรออะไรนานๆ เพราะจากรายงานระบุว่า 40% ของคนที่เข้าเว็บไซต์ จะออกหรือปิดทันทีถ้ามีการโหลดนานกว่า 3 วินาที โดยเฉพาะนักช็อปออนไลน์เกือบครึ่งที่พร้อมจะหันหลังให้อีคอมเมิร์ซเว็บไซต์ที่โหลดช้ากว่า 2 วินาที และ 79% บอกว่ามีโอกาสที่จะไม่ใช้บริการอีก Google Fonts คืออะไร? (กันแน่) หลายคนคงรู้จัก Google Fonts แต่วันนี้เราจะพามาทำความรู้จักให้มากขึ้น

By

4 mins read
Thai
13
July, 2024
How SennaLabs helped S&P Food transform their online e-commerce business
13 July, 2024
How SennaLabs helped S&P Food transform their online e-commerce business
S&P Food’s yearly revenues were 435 mils $USD. 10% of the revenue was from online sales. The board of directors felt that online sales should account for more. The digital

By

4 mins read
English

Let’s build digital products that are
simply awesome !

We will get back to you within 24 hours!Go to contact us
Please tell us your ideas.
- Senna Labsmake it happy
Contact ball
Contact us bg 2
Contact us bg 4
Contact us bg 1
Ball leftBall rightBall leftBall right
Sennalabs gray logo28/11 Soi Ruamrudee, Lumphini, Pathumwan, Bangkok 10330+66 62 389 4599hello@sennalabs.com© 2022 Senna Labs Co., Ltd.All rights reserved.