นักการตลาดมักคิดถึงการออกแบบเว็บไซต์ในแง่มุมของการเปลี่ยนแปลงผู้เข้าชมให้เป็นลูกค้ากันเท่านั้น แต่ไม่ได้มองในเรื่องของประสบการณ์ของผู้ใช้งานว่าจะเป็นอย่างไร การรู้จักและเข้าใจมุมมองของผู้ใช้งาน (UX) จะเป็นหนึ่งวิธีที่จะมาเชื่อมโยงช่องว่างและรับประกันได้การแปรเปลี่ยนผู้เข้าชมให้เป็นลูกค้าได้จริง ผ่านกระบวนการที่เรียกว่า Wireframe กระบวนการออกแบบและสร้างโครงสร้างของเว็บไซต์ใหม่
การทำ Wireframe จะช่วยให้คุณทดสอบการจัดวางหน้าเว็บ ประเมินการใช้งาน เพื่อดูว่าเว็บไซต์ทำงานได้ดีพอไหม คุณสามารถมุ่งเน้นไปในด้านประสบการณ์ผู้ใช้ (UX) เป็นหลัก หรือเป็นส่วนย่อย (ที่เชื่อมต่อกันได้) และหาข้อผิดพลาดที่อาจเกิดขึ้นจนกลายเป็นอุปสรรคต่อการเปลี่ยนผู้เข้าชมเป็นลูกค้าได้อย่างตรงจุด
ซึ่งในบทความครั้งนี้จะพูดถึงกระบวนการสร้าง Wireframe สำหรับเว็บไซต์อย่างละเอียด ไม่ว่าจะเป็นประเภทที่คุณสามารถออกแบบและใช้งานได้ และวิธีออกแบบง่าย ๆ สำหรับโปรเจกต์เว็บไซต์ใหม่ของคุณ
Wireframe Website คืออะไร?
Wireframe Website เป็นกระบวนการนำข้อมูลและเนื้อหาทั้งหมดในเว็บไซต์มาจัดวางในโครงสร้างหรือแผนผังที่กำหนดไว้ก่อน เพื่อประเมินว่าหน้าตาของเว็บไซต์ที่จะออกแบบจะเป็นอย่างไร ก่อนที่ทีมพัฒนาเว็บไซต์จะเริ่มลงมือทำงานจริง หากมองมุมกลับกัน Wireframe ก็เปรียบเสมือนแผนผัง, โครงสร้างพื้นฐาน, แม่พิมพ์ หรือแบบตัวอย่างเบื้องต้นของหน้าเว็บไซต์นั่นเอง
การออกแบบ Wireframe จะแบ่งเป็น 2 วิธีหลักคือ ผ่านหน้ากระดาษหรือแพลตฟอร์มดิจิทัล โดยสิ่งที่จะถูกนำมาจัดวางในออกแบบจะมีทั้ง ข้อความ, หัวข้อ, รูปภาพ, ปุ่ม CTA (Call-To-Action), การใช้สีสัน, รูปแบบตัวอักษร, ฟังก์ชันการทำงาน, ฟีเจอร์ที่จำเป็น และตำแหน่งขององค์ประกอบภาพรวม
แต่โดยส่วนมากแล้ว Wireframe Website มักถูกใช้เพื่อกำหนดรูปแบบการออกแบบเว็บไซต์ใหม่ โดยเน้นไปที่ฟังก์ชันของเว็บไซต์เป็นสิ่งแรก ก่อนองค์ประกอบใด ๆ (เนื้อหา / สี) โครงสร้างและคุณสมบัติต่าง ๆ ของเว็บไซต์ เช่น เมนูและปุ่มจะถูกวางแผนไว้เป็นอันดับแรก เพื่อประเมินประสบการณ์โดยตรงของผู้ใช้งาน
นอกจากนี้ Wireframe ยังมีส่วนช่วยสำคัญให้สมาชิกหรือทีมงานในโปรเจกต์ออกแบบเว็บไซต์ ได้เห็นว่าทุกอย่างถูกจัดวางไว้ที่ใด และอย่างไร เมื่อทุกคนที่ทำงานเกี่ยวข้องกับโปรเจกต์เว็บไซต์นี้มาเห็น ไม่ว่าจะเป็น ทีมออกแบบ, ทีมพัฒนาเว็บไซต์, ผู้จัดการหรือลูกค้า จะล้วนแล้วแต่ได้รับการมองเห็นภาพรวมของเว็บไซต์ที่ตรงกัน ที่ส่งผลให้ขั้นตอนทำงานเป็นไปได้อย่างราบรื่นและเข้าใจตรงกัน
ทำไมถึงควรออกแบบ Wireframe Website
มีหลากหลายเหตุผลเหลือเกินว่าทำไมคุณถึงควรต้องออกแบบ Wireframe ของเว็บไซต์ แต่เหตุผลที่สำคัญที่สุดคือ มันช่วยให้คุณสามารถระบุและปรับแต่งฟังก์ชันการทำงานให้ดูใช้งานได้ง่าย ความสะดวกสบายของเว็บไซต์เพื่อทำให้ผู้ใช้งานรู้สึกประทับใจ และได้รับประสบการณ์การใช้งานที่ดีอีกด้วย
นอกจากนี้มันยังเป็นส่วนช่วยสำคัญที่จะทำให้ทีมออกแบบ และทีมพัฒนาเว็บไซต์ของคุณทำงานร่วมกันได้ดี ผ่านการเห็นภาพรวมของเว็บไซต์ พร้อมรวบรวมข้อเสนอแนะ หรือความคิดเห็นจากลูกค้าก่อนที่กระบวนการออกแบบเว็บไซต์จะดำเนินไปไกลเกินกว่าจะแก้ไขได้
วิธีออกแบบ Wireframe Website แบบง่าย ๆ
การออกแบบ Wireframe Website อาจดูเป็นงานที่ยากและซับซ้อน แต่ในความเป็นจริงแล้วมีวิธีการที่ง่ายและชัดเจนสำหรับผู้เริ่มต้นใหม่ โดยวิธีการที่เราจะแนะนำ เป็นวิธีที่เรียบง่ายและมีประสิทธิภาพในการออกแบบหน้าเว็บไซต์
1. กำหนดเป้าหมายของเว็บไซต์
บางเว็บไซต์ที่ถูกออกแบบมาอาจจะต้องการดึงดูดผู้เข้าชมเว็บไซต์ให้ได้มากที่สุดเท่าที่เป็นไปได้ แต่ในการออกแบบเว็บไซต์จริง ๆ คุณควรคิดให้ถี่ถ้วนกว่านี้เกี่ยวกับสิ่งที่ต้องการให้ผู้เข้าชมเห็น หรือสิ่งที่ต้องการจากผู้เข้าชม ยกตัวอย่างเช่น คุณต้องการให้ผู้เข้าชมสิ้นสุดการเข้าชมด้วยการกดซื้อสินค้าหรือไม่? หรือต้องการให้พวกเขาดาวน์โหลดแอปพลิเคชันบนหน้าเว็บ?
ไม่ว่าจะเป็นเป้าหมายใดก็ตาม การกำหนดและทำความเข้าใจกับทีมงานออกแบบเว็บไซต์เป็นสิ่งสำคัญที่ขาดไม่ได้ ที่จะทำให้ขั้นตอนต่อไปเป็นไปอย่างราบรื่นจนกว่าเว็บไซต์จะจัดทำและแสดงผลจริง
2. ทำความเข้าใจมุมมองของผู้ใช้งาน
Wireframe ช่วยให้คุณสามารถระบุและประเมินประสบการณ์ของผู้ใช้งานได้ เพื่อให้ทุกคนในทีมออกแบบเข้าใจว่าผู้เข้าชมโต้ตอบกับแต่ละหน้าเว็บอย่างไร ในระหว่างขั้นตอนนี้ คุณควรร่างและออกแบบหน้าเว็บในแต่ละจุดเพื่อดึงดูดให้ผู้เข้าชมเข้าถึงหน้าแรกของเว็บไซต์ด้วยกัน และกำหนดองค์ประกอบจุดบนหน้าแรกของเว็บไซต์เพื่อสร้างเส้นทางไปยังหน้าเว็บอื่นให้กับผู้ใช้งาน
3. กำหนดขนาดของหน้าเว็บไซต์
การออกแบบหน้าเว็บไซต์จะต้องมีขนาดที่แตกต่างกันไปขึ้นอยู่กับขนาดหน้าจอที่สร้างขึ้นมาสำหรับ อุปกรณ์มือถือ (Mobile), แท็บเล็ต (Tablet) และหน้าจอคอมพิวเตอร์ (Desktop) ไม่เพียงแค่นั้น ขนาดหน้าจอคอมพิวเตอร์ยังสามารถปรับเปลี่ยนขยายขึ้นหรือย่อลงได้อีกด้วย เพื่อให้ได้การวัดขนาดที่แม่นยำที่สุดสำหรับการออกแบบเว็บไซต์ของคุณ ควรใช้หน่วยวัดขนาดด้วยพิกเซล (Pixel) ที่ไม่ใช่นิ้วหรือจุด และนี่คือขนาดมาตรฐานสำหรับแต่ละประเภทหน้าจอ
- Size for mobile screen
1080px wide (กว้าง) x 1920x long (ยาว) - Size for a tablet screen
8”Tablet – 800 px wide (กว้าง) x 1280px long (ยาว)
10” Tablet – 1200px wide (กว้าง) x 1900px long (ยาว) - Size for a desktop screen
768px wide (กว้าง) x 1366px long (ยาว)
4. เริ่มวางแผนออกแบบเว็บไซต์
ตอนนี้ถึงขั้นตอนวางแผนออกแบบเว็บไซต์แบบจริงจังแล้ว ถ้าหากคุณจะออกแบบโดยใช้ปากและกระดาษจริง เราขอแนะนำให้ใช้กระดาษจุดหรือกระดาษตารางเพื่อให้สิ่งต่าง ๆ อยู่ในแนวเดียวกัน ด้วยสิ่งนี้จะช่วยให้คุณทำสำเนาเป็นเวอร์ชันดิจิทัลได้ง่ายด้วยเช่นกัน
แต่หากคุณออกแบบผ่านแพลตฟอร์มดิจิทัล หรือโปรแกรม ให้เลือกเครื่องมือที่เหมาะสมที่สุดสำหรับความต้องการในการออกแบบ โดยเครื่องมือที่แนะนำจะมี Sketch, Figma, Adobe Photoshop, Adobd XD และ InVision
5. ตั้ง Conversion points
หลังจากที่คุณออกแบบหน้าเว็บไซต์เสร็จแล้ว ก็ถึงเวลาแล้วที่จะตัดสินใจว่าให้ผู้เข้าชมกดเข้าชมแต่ละหน้าเว็บไซต์อย่างไร แม้คุณจะกำหนดขั้นตอนคร่าว ๆ ไปแล้วในขั้นตอนที่ 2 แต่ไม่ได้หมายความว่าผู้ใช้งานจะกดเข้าชมตามที่กำหนดไว้ ในขั้นตอนนี้คุณต้องตัดสินใจว่าปุ่ม ลิงก์ รูปภาพ หรือองค์ประกอบอื่น ๆ บนหน้าจอจะนำทางผู้เข้าชมไปยังหน้าเว็บที่เป็นเป้าหมายสุดท้ายที่ได้ตั้งไว้ในขั้นตอนที่ 1
6. ลบสิ่งที่ซ้ำซ้อนออกไป
การออกแบบหน้าเว็บไซต์เป็นเรื่องยากเลยทีเดียว เพราะมันเป็นกระบวนการที่ต้องทำซ้ำไปซ้ำมา เพื่อให้ได้แบบหน้าเว็บไซต์ที่ดีที่สุด ในระหว่างขั้นตอนการออกแบบหน้าเว็บ คุณอาจจะเห็นบางหน้าเว็บนั้นมีสิ่งที่ซ้ำซ้อน และสามารถลดเป็นหน้าเว็บเดียวได้ เพื่อลดจำนวนการคลิกสำหรับผู้ใช้งาน และให้ได้หน้าเว็บไซต์ที่ดีที่สุดเพียงหนึ่งเดียว
7. รับความคิดเห็นจาก Wireframe
เมื่อถึงจุดนี้เว็บไซต์ของคุณคงผ่านการทดสอบมาหลายรอบ ได้รับการแก้ไขมาหลายครั้งก่อนที่จะเปิดใช้งานจริง และการขอความคิดเห็นเกี่ยวกับหน้าเว็บไซต์ที่ออกแบบนับเป็นความคิดที่ดีเลยทีเดียว ลองให้กลุ่มคนที่คุณรู้จักและไว้ใจได้ดูและออกความคิดเห็นเกี่ยวกับหน้าเว็บไซต์ที่ออกแบบดูสิ การได้รับข้อมูลเหล่านี้มาจะช่วยป้องกันไม่ให้แก่นกลางสำคัญของ UX หายไป
ด้วยการทำตามวิธีการที่ทางเราแนะนำ แค่นี้การออกแบบเว็บไซต์ของคุณก็จะได้ Wireframe ที่ดีที่สุด ในวิธีการที่เรียบง่ายและมีประสิทธิภาพแล้ว
ตัวอย่าง Wireframe ที่พบเห็นได้บ่อย
ก่อนที่จะไปดูตัวอย่าง Wireframe ที่พบเห็นได้การออกแบบหน้าเว็บไซต์ การรู้จักระดับของการออกแบบก็เป็นส่วนสำคัญเช่นกัน การออกแบบหน้าเว็บไซต์จะแบ่งออกเป็น 3 ระดับตามความละเอียดของการออกแบบและการจัดวาง การแสดงผลให้เห็นภาพรวมของหน้าเว็บไซต์
- Low-Fidelity Wireframes
แบบร่างหน้าเว็บแบบเรียบ ๆ ง่าย ๆ ซึ่งจะแสดงผลให้เห็นแค่องค์ประกอบของหน้าเว็บแบบคร่าว ๆ เท่านั้น - Mid-Fidelity Wireframes
การออกแบบหน้าเว็บแบบนี้จะเห็นภาพชัดขึ้นมากกว่าระดับ Low ซึ่งเหมาะกับการนำไปพูดคุยกับทีมงานเว็บไซต์ - High-Fidelity Wireframes
รูปแบบการออกแบบหน้าเว็บไซต์ที่เกือบจะสมบูรณ์ที่สุด มีการจัดวางภาพ และใส่ข้อมูลทุกอย่างลงไปเรียบร้อย เสมือนว่าได้หน้าเว็บไซต์จริง ซึ่งเหมาะแก่การนำไปเสนอให้กับทางลูกค้า และทีมพัฒนาเว็บไซต์เพื่อลงมือทำจริง
เมื่อเข้าใจถึงระดับการออกแบบหน้าเว็บไซต์ไปแล้ว ทีนี้มาลองดูรูปแบบตัวอย่างการออกแบบ Wireframe กันเลยดีกว่า
1. Mobile Website
รูปแบบการออกแบบหน้าเว็บไซต์ที่เน้นการตอบสนองที่ดีบนอุปกรณ์พกพาอย่างมือถือเป็นหลัก และยังเป็นแนวทางที่สำคัญสำหรับการออกแบบเว็บไซต์ทั่วไปด้วยเช่นกัน เพราะในปัจจุบันจำนวนผู้ใช้งานผ่านมือถือมีจำนวนมาก การสร้างโครงร่างสำหรับเว็บไซต์เวอร์ชันมือถือ จะทำให้ผู้ใช้งานได้รับประสบการณ์ที่ดีเลยทีเดียว
2. Interactive Website
รูปแบบการออกแบบหน้าเว็บไซต์ที่เน้นการโต้ตอบ หรือที่เรียกว่า CTA (Call-To-Action) เช่น แบบฟอร์มกรอกข้อมูล, เมนูแบบ Dropdown การออกแบบหน้าเว็บไซต์รูปแบบนี้จะเน้นการแสดงให้เห็นว่าผู้ใช้งานโต้ตอบกับเว็บไซต์ของคุณอย่างไร เช่น การคลิกหรือการเลื่อนหน้าจอ
3. Interactive Mockup
Mockup เป็นการนำโครงร่างหน้าเว็บที่ออกแบบมาเพิ่มอีกขั้น โดยการเพิ่มรายละเอียดทางภาพและการออกแบบให้มากขึ้น ไม่เพียงแค่เน้นโครงสร้างพื้นฐาน แต่ยังใส่องค์ทางภาพ เช่น สี และตัวอักษรลงไปด้วย หรือจะเรียกว่าเป็นระดับ High-Fidelity ก็ได้
บทสรุป Wireframe การปรับปรุงกระบวนการออกแบบหน้าเว็บไซต์
Wireframe เป็นเครื่องมือเบื้องต้นที่ใช้ในการวางแผนและปรับปรุงกระบวนการออกแบบหน้าเว็บไซต์ และยังเป็นการสร้างโครงสร้างพื้นฐานของเว็บไซต์โดยแสดงตำแหน่งองค์ประกอบต่าง ๆ บนหน้าเว็บ เช่น ข้อความ, รูปภาพ, ปุ่ม และเมนู ความสำคัญของมันเลยคือการช่วยให้ทีมออกแบบและทีมพัฒนาสามารถเห็นภาพรวมของหน้าเว็บไซต์ได้ก่อนที่จะเริ่มลงมือทำจริง จึงเพิ่มโอกาสในการวางแผนและปรับปรุงการทำงานเว็บไซต์ได้อย่างมีประสิทธิภาพนั่นเอง
ดังนั้นจึงกล่าวได้ว่า Wireframe เป็นเครื่องมือสำคัญในการพัฒนาเว็บไซต์ที่มีประสิทธิภาพและสร้างการตอบสนองต่อความต้องการของผู้ใช้งาน (UX) ได้เป็นอย่างดีก่อนนำไปแสดงผลใช้งานจริง
