hand lthand lthand lthand lthand lthand lt
26Mar, 2021
Language blog :
Thai
Share blog : 
26 March, 2021
Thai

เจาะลึก UX Process #4 Wireframe Design

By

5 mins read
เจาะลึก UX Process #4 Wireframe Design

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

Wireframe Design

(Image: medium.com)

Wireframe คือการออกแบบภาพรวมแบบรวดเร็วก่อนที่จะดีไซน์ เพื่อให้ทุกคนที่เกี่ยวข้องเห็นและเข้าใจว่า แต่ละหน้า(page) ที่จะต้องพัฒนาออกมานั้น มีเค้าโครงแบบไหน มีข้อมูลอะไรบ้าง และทำงานอย่างไร ทำให้นักออกแบบสามารถออกแบบระบบที่ซับซ้อนได้เร็วขึ้น เห็นภาพรวมจุดบกพร่องมากขึ้น และใช้สื่อสารกับทีมได้เร็วกว่าการออกแบบของจริงแล้วทำการรีวิวทีหลัง ซึ่งอาจจะช้าและแก้ไขได้ยากกว่า

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

Wireframe

(Image: dribbble.com)

จะเห็นได้ว่าตัวอย่างการออกแบบ wireframe ที่ค่อนข้างที่จะจริงจังนี้ดูใกล้เคียงกับการดีไซน์มาก ซึ่งจริง ๆ แล้วนักออกแบบที่มีความเชี่ยวชาญอาจจะเริ่มออกแบบในลักษณะนี้เลย หรือบางคนอาจจะเริ่มจากแบบหยาบ ๆ ก่อน (low fidelity) แล้วค่อยพัฒนาเป็นแบบที่ใกล้เคียงกับของจริงมากยิ่งขึ้น (High fidelity)

sennalabs-blog-banner

เรามีเหตุผลอะไรที่ต้องออกแบบ  High fidelity Wireframe กันนะ ?

เนื่องจากปัจจุบันการออกแบบเว็บไซต์ (Website) หรือ แอปพลิเคชัน (Application) นั้น ต้องคำนึงถึง User Experience มากขึ้น ดังนั้น การออกแบบ Wireframe จึงออกแบบเพื่อคำนึงถึงผู้ใช้งาน และสามารถนำไปทดสอบกับผู้ใช้งานได้ด้วย ซึ่งแน่นอนว่าหากเรานำ Low Fidelity Wireframe ไปทดสอบกับผู้ใช้งานแล้ว ผู้ทดสอบอาจจะไม่สามารถใช้และเข้าใจ wireframe นั้น ๆ ได้ทุกคนแน่นอน

iMac

(Image: pexels.com)

นอกจากนี้ในทาง UX นั้นยังให้ความสำคัญกับ Call to action และ Emotional ของ User ด้วย ดังนั้น การลงสี และการใช้ภาพ จึงมีความสำคัญมากเมื่อเรานำ  Wireframe ไปทดสอบกับผู้ใช้งาน (สามารถติดตามบทความการทำ Usability test ได้ในครั้งต่อไป)

สิ่งที่นักออกแบบควรคำนึงถึงเพื่อรองรับการทำงาน Design ต่อไป

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

(Image: unsplash.com)

1. ใช้สื่อสารรายละเอียดและการทำงานของหน้านั้น ๆ ได้

ซึ่งเป็นจุดประสงค์หลักของการออกแบบ wireframe อยู่แล้ว เมื่อออกแบบมาต้องตอบโจทย์การใช้งานและแก้ปัญหาในโปรเจกต์นั้นได้จริง และทุกคนสามารถเข้าใจได้

(Image: dribbble.com)

2. ควรมีมากกว่า 1 Design

เพื่อเป็นทางเลือกในการใช้งานและยืนยันว่าการออกแบบนั้น เป็นการออกแบบที่น่าจะเหมาะสมกับการใช้งานในหน้านี้ที่สุด ซึ่งในกรณีนี้ อาจจะไม่ต้องทำทุก ๆ หน้าให้มีหลายแบบก็ได้ หากการออกแบบนั้นไม่ได้ซับซ้อน หรือทุกคนยอมรับการออกแบบนั้นได้โดยง่าย

(Image: dribbble.com)

3.  ควรคำนึงถึงสัดส่วน และขนาดต่าง ๆ ตามความเป็นจริงในการออกแบบ

เนื่องจากการออกแบบสัดส่วนและขนาดขององค์ประกอบต่าง ๆ บน Wireframe อย่างเป็นระบบ จะส่งผลกระทบในการออกแบบจริงเป็นอย่างมาก หลายคนจึงนิยมใช้ Grid และ design system เข้ามาใช้ในการออกแบบ Wireframe ไว้ก่อนตั้งแต่แรก แต่อาจจะยังไม่ลงรายละเอียด UI มากนัก 

อีกทั้ง การคำนึงถึงสัดส่วนการแสดงผลหน้าจอระหว่างการใช้งานและ Device ต่าง ๆ ก็ยังมีความสำคัญโดยตรงกับการออกแบบการใช้งานอีกด้วย

เมื่อเราออกแบบ wireframe แล้วก่อนที่จะนำไปทดสอบ ก็คือการทำแบบจำลอง (prototype) เพื่อที่จะนำไปทดสอบการใช้งานจริงได้ราบรื่น หากเราออกแบบโดยคำนึงถึงองค์ประกอบเหล่านี้ การทำงานต่อจากนี้หรือการปรับแก้ต่าง ๆ ก็จะง่ายขึ้น เป็นระบบมากขึ้น และยังสามารถนำ Prototype เพื่อใช้ในการสื่อสารการใช้งาน Flow ของระบบได้อีกด้วย

Written by
Senna Labs
Senna Labs

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

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

By

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

By

4 mins read
Thai
16
April, 2024
How SennaLabs helped S&P Food transform their online e-commerce business
16 April, 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.