สรุปสั้น ๆ (TL;DR)
- wireframe แสดงเฉพาะโครงสร้าง (ลำดับเนื้อหา ปุ่ม ฟอร์ม) เป็นกล่องสีเทา mockup เพิ่มสีและฟอนต์ของแบรนด์ ส่วน prototype เพิ่มการกดใช้งานได้
- low-fidelity wireframe (กระดาษ ไวท์บอร์ด Balsamiq) เหมาะกับการทดสอบไอเดียช่วงแรก ส่วน high-fidelity ใช้ระยะ grid และข้อความจริงเพื่อส่งต่อให้นักออกแบบและนักพัฒนา
- หัวข้อที่วางใน wireframe จะกลายเป็นแท็ก H1-H3 ของหน้า และ sitemap ที่กำหนดไว้บอกว่าหน้าสำคัญอยู่ห่างจากหน้าแรกกี่คลิก ทั้งสองเรื่องมีผลกับ SEO
- conversion rate = จำนวน conversion หารด้วยผู้เข้าชม ตัวอย่างสมมติ: กรอกฟอร์ม 50 ครั้งจากผู้เข้าชม 2,000 คน คือ 2.5% เพิ่มจาก 2% ที่ 40 ครั้ง
wireframe คือ แบบร่างโครงสร้างของหน้าเว็บหรือหน้าแอปที่วางตำแหน่งเนื้อหา เมนู ปุ่ม และฟอร์ม ด้วยกล่องสีเทาและข้อความตัวอย่าง โดยยังไม่ใส่สี ฟอนต์ หรือรูปจริง หน้าที่ของมันคือตอบให้ได้ก่อนว่าหน้านี้มีอะไรบ้าง เรียงลำดับอย่างไร และผู้ใช้ต้องทำอะไรต่อ ก่อนที่ทีมจะเสียเวลาไปกับงานดีไซน์และงานเขียนโค้ด
ถ้าเทียบกับการสร้างบ้าน wireframe ก็คือแปลนพื้นที่บอกว่าห้องนอนอยู่ตรงไหน ประตูเปิดทางไหน ส่วนการเลือกสีผนังและเฟอร์นิเจอร์เป็นงานขั้นถัดไป บทความนี้อธิบายความหมายของ wireframe ความต่างจาก mockup และ prototype ระดับความละเอียด ขั้นตอนทำ wireframe สำหรับเว็บไซต์และ landing page เครื่องมือที่นิยมใช้ และกลไกที่ทำให้ wireframe ส่งผลต่อ SEO และ conversion
wireframe คืออะไร และมีองค์ประกอบอะไรบ้าง
wireframe คือเอกสารภาพที่ใช้ตกลงเรื่องโครงสร้างหน้าให้ตรงกันระหว่างเจ้าของธุรกิจ นักการตลาด นักออกแบบ และนักพัฒนา ทุกคนดูภาพเดียวกันแล้วเห็นว่าหัวข้อหลักอยู่ด้านบน ปุ่มสั่งซื้ออยู่ใต้ราคา และฟอร์มติดต่ออยู่ท้ายหน้า การตกลงเรื่องเหล่านี้ตั้งแต่ตอนที่ยังเป็นกล่องสีเทาใช้เวลาน้อยกว่าการแก้หน้าเว็บที่ออกแบบเสร็จแล้วหลายเท่า
องค์ประกอบที่พบใน wireframe เกือบทุกแบบมีดังนี้
- ส่วนหัวและเมนูนำทาง บอกว่ามีเมนูกี่รายการ ชื่ออะไร และบนมือถือจะยุบเป็นปุ่มแฮมเบอร์เกอร์หรือไม่
- ลำดับชั้นของเนื้อหา หัวข้อใหญ่ หัวข้อย่อย และย่อหน้า เรียงจากสิ่งที่ผู้ใช้ต้องรู้ก่อนไปหาสิ่งที่รู้ทีหลัง
- พื้นที่รูปภาพและวิดีโอ แสดงเป็นกล่องมีเครื่องหมายกากบาท พร้อมโน้ตว่าควรเป็นรูปอะไร
- ปุ่ม call to action ตำแหน่งและข้อความบนปุ่ม เช่น "ขอใบเสนอราคา" หรือ "แอดไลน์"
- ฟอร์มและช่องกรอกข้อมูล จำนวนช่อง ช่องไหนบังคับกรอก และข้อความแจ้งเตือนเมื่อกรอกผิด
- ส่วนท้ายหน้า ที่อยู่ ลิงก์นโยบาย และลิงก์ไปหน้าสำคัญอื่น
สิ่งที่ wireframe ตั้งใจไม่ใส่คือสีแบรนด์ ฟอนต์จริง และภาพถ่าย เหตุผลคือเมื่อมีสีและรูป คนที่ดูจะเริ่มวิจารณ์ความสวยแทนที่จะดูว่าโครงสร้างใช้งานได้หรือไม่ การตัดสิ่งเหล่านี้ออกบังคับให้การประชุมคุยกันเรื่องลำดับเนื้อหาและเส้นทางของผู้ใช้เท่านั้น
wireframe ต่างจาก mockup และ prototype อย่างไร
สามคำนี้ถูกใช้สลับกันบ่อย แต่เป็นงานคนละขั้น wireframe ตอบว่า "มีอะไรและอยู่ตรงไหน" mockup ตอบว่า "หน้าตาจริงจะเป็นอย่างไร" ส่วน prototype ตอบว่า "เมื่อกดแล้วจะเกิดอะไรขึ้น" ทั้งสามขั้นมักทำต่อกันตามลำดับ และแต่ละขั้นใช้เวลาและต้นทุนมากขึ้นตามความละเอียด
| ประเภท | สิ่งที่แสดง | ใช้ตัดสินใจเรื่อง |
|---|---|---|
| Wireframe | โครงสร้าง ลำดับเนื้อหา ตำแหน่งปุ่มและฟอร์ม เป็นกล่องสีเทา | หน้านี้มีอะไร เรียงอย่างไร ผู้ใช้ไปต่อทางไหน |
| Mockup | ภาพนิ่งที่มีสี ฟอนต์ รูป และข้อความจริงตามแบรนด์ | หน้าตา อารมณ์ของแบรนด์ ความอ่านง่ายของตัวอักษร |
| Prototype | ไฟล์ที่กดได้ มีการเปลี่ยนหน้า เมนูเปิดปิด ฟอร์มตอบสนอง | การใช้งานจริง ทดสอบกับผู้ใช้ก่อนเขียนโค้ด |
| หน้าเว็บจริง | โค้ดที่ทำงานบนเซิร์ฟเวอร์ เชื่อมระบบหลังบ้าน | ความเร็ว การติดตามผล และผลลัพธ์ทางธุรกิจ |
ความผิดพลาดที่เกิดบ่อยคือข้ามจากไอเดียไปทำ mockup เลย แล้วค่อยมาพบตอนดูภาพสวยว่าลืมส่วนแสดงรีวิว หรือฟอร์มยาวเกินไป การแก้ตอนนั้นหมายถึงต้องแก้ดีไซน์หลายหน้าให้สอดคล้องกัน ขณะที่ถ้าพบใน wireframe การแก้คือย้ายกล่องไม่กี่กล่อง
ในโปรเจกต์เล็ก ทีมอาจรวม wireframe กับ prototype เข้าด้วยกัน คือทำ wireframe ที่กดลิงก์ระหว่างหน้าได้ เรียกกันว่า clickable wireframe วิธีนี้ช่วยทดสอบเส้นทางการใช้งานได้เร็วโดยยังไม่ต้องลงรายละเอียดดีไซน์
low-fidelity vs high-fidelity wireframe ต่างกันอย่างไร
fidelity หมายถึงระดับความเหมือนจริงของแบบร่าง wireframe จึงแบ่งได้เป็นสองระดับหลัก และเลือกใช้ตามช่วงของโปรเจกต์
low-fidelity wireframe
low-fidelity คือแบบร่างหยาบ อาจวาดด้วยปากกาบนกระดาษ บนไวท์บอร์ด หรือใช้กล่องสี่เหลี่ยมในโปรแกรมแบบไม่สนใจขนาดจริง ข้อความใช้เส้นขีดแทนตัวอักษร จุดเด่นคือทำเร็ว ทิ้งได้ไม่เสียดาย และเหมาะกับช่วงระดมไอเดีย เช่น ลองวาดหน้าแรกสามแบบภายในชั่วโมงเดียวแล้วเลือกแบบที่ลำดับเนื้อหาชัดที่สุด
high-fidelity wireframe
high-fidelity คือ wireframe ที่ใช้ขนาดและระยะห่างใกล้เคียงของจริง วางบน grid ของหน้าจอจริง ใช้หัวข้อและข้อความจริงหรือใกล้เคียงของจริง แต่ยังคงเป็นโทนขาวดำ เหมาะกับช่วงที่โครงสร้างนิ่งแล้วและต้องส่งต่อให้นักออกแบบหรือนักพัฒนา เพราะตอบคำถามเชิงเทคนิคได้ เช่น ตารางราคามีกี่คอลัมน์ บนมือถือเรียงกันอย่างไร
หลักคิดง่าย ๆ คือ ยิ่งยังไม่แน่ใจในโครงสร้าง ยิ่งควรอยู่ที่ low-fidelity นานขึ้น การทำ high-fidelity เร็วเกินไปทำให้ทีมผูกพันกับแบบที่ยังไม่ได้ทดสอบ และลังเลที่จะรื้อ
ขั้นตอนทำ wireframe สำหรับเว็บไซต์และ landing page
ขั้นตอนด้านล่างใช้ได้ทั้งเว็บไซต์หลายหน้าและ landing page หน้าเดียว ต่างกันแค่ขอบเขต
- กำหนดเป้าหมายของหน้า เขียนให้ได้หนึ่งประโยคว่าหน้านี้ต้องการให้ผู้ใช้ทำอะไร เช่น "กรอกฟอร์มขอใบเสนอราคา" หรือ "แอดไลน์เพื่อสอบถามสินค้า" ถ้าเขียนไม่ได้ในประโยคเดียว หน้านั้นอาจกำลังพยายามทำหลายอย่างเกินไป
- รู้จักผู้ใช้และคำถามของเขา รวบรวมคำถามที่ลูกค้าถามบ่อยจากแชต อีเมล หรือทีมขาย และดูคำค้นที่คนใช้หาเรื่องนี้ใน Google คำถามเหล่านี้จะกลายเป็นหัวข้อบนหน้า
- ทำโครงสร้างเว็บ (sitemap) ก่อน สำหรับเว็บหลายหน้า ให้วาดผังว่ามีหน้าอะไรบ้าง หน้าไหนเป็นลูกของหน้าไหน ขั้นนี้กำหนดเมนูและ URL ในภายหลัง
- เรียงเนื้อหาตามลำดับที่ผู้ใช้ต้องการ เขียนรายการส่วนต่าง ๆ จากบนลงล่าง เช่น หัวข้อหลักพร้อมคำสัญญา ปัญหาที่ลูกค้าเจอ วิธีแก้ ผลงานหรือรีวิว ราคา คำถามที่พบบ่อย และปุ่มปิดท้าย
- วาด low-fidelity บนมือถือก่อน หน้าจอมือถือแคบ บังคับให้เลือกว่าอะไรสำคัญที่สุด แล้วค่อยขยายเป็นเวอร์ชันเดสก์ท็อป
- ใส่ข้อความจริงให้เร็วที่สุด ข้อความตัวอย่างแบบ lorem ipsum ซ่อนปัญหาเรื่องความยาว หัวข้อภาษาไทยมักยาวกว่าที่คิด และตัดบรรทัดต่างจากภาษาอังกฤษ
- ทดสอบกับคนที่ไม่ได้อยู่ในโปรเจกต์ ให้คนสามถึงห้าคนดู wireframe แล้วถามว่าหน้านี้ขายอะไร และถ้าสนใจจะกดตรงไหน ถ้าตอบไม่ได้ภายในไม่กี่วินาที โครงสร้างยังไม่ชัด
- ปรับเป็น high-fidelity แล้วส่งต่อ ใส่โน้ตกำกับ เช่น ปุ่มนี้ลิงก์ไปไหน ฟอร์มส่งข้อมูลไปที่ใด และช่องไหนบังคับกรอก
สำหรับ landing page ที่รับทราฟฟิกจากโฆษณา ให้เพิ่มอีกหนึ่งขั้น คือเทียบข้อความในโฆษณากับหัวข้อบนสุดของ wireframe ถ้าโฆษณาพูดเรื่องส่วนลด แต่หัวข้อหน้าพูดเรื่องประวัติบริษัท ผู้ใช้จะรู้สึกว่ามาผิดที่ ความสอดคล้องนี้วางได้ตั้งแต่ขั้น wireframe
เครื่องมือที่ใช้ทำ wireframe
เครื่องมือไม่ได้ทำให้ wireframe ดีขึ้นเอง แต่ช่วยให้ทำงานร่วมกันง่ายขึ้น เลือกตามขนาดทีมและขั้นของงาน
- กระดาษ ปากกา และไวท์บอร์ด เร็วที่สุดสำหรับ low-fidelity และเหมาะกับการประชุมระดมความคิด ถ่ายรูปเก็บไว้ได้ทันที
- Figma ทำงานบนเบราว์เซอร์ หลายคนแก้ไฟล์เดียวกันได้พร้อมกัน ทำได้ตั้งแต่ wireframe ไปจนถึง prototype ที่กดได้ และมีชุด wireframe kit ให้เลือกใช้
- Balsamiq ออกแบบมาเพื่อ low-fidelity โดยเฉพาะ หน้าตาเหมือนภาพวาดมือ ทำให้ทุกคนเข้าใจตรงกันว่านี่ยังเป็นแบบร่าง
- Whimsical หรือ Miro เหมาะกับการทำ sitemap และ user flow ควบคู่กับ wireframe บนกระดานเดียว
- Sketch หรือ Adobe XD ทีมที่ใช้งานอยู่แล้วก็ทำ wireframe ได้เช่นกัน
ข้อควรระวังคือการใช้ UI kit ที่สวยเกินไปตั้งแต่ขั้น wireframe เพราะจะดึงความสนใจไปที่หน้าตาเหมือนกับการข้ามไปทำ mockup ก่อนเวลา
wireframe ช่วย SEO อย่างไร
wireframe ไม่ได้เป็นสัญญาณที่ Google อ่านได้โดยตรง แต่โครงสร้างที่ตกลงใน wireframe จะกลายเป็นโครงสร้าง HTML ของหน้า และส่วนนี้มีผลกับ SEO จริง กลไกหลักมีดังนี้
ลำดับหัวข้อกลายเป็น heading ของหน้า
เมื่อ wireframe กำหนดว่าหัวข้อหลักคืออะไร และหัวข้อย่อยมีอะไรบ้าง นักพัฒนาจะแปลงเป็นแท็ก H1 H2 H3 ตามนั้น ถ้าหัวข้อใน wireframe ตรงกับคำถามที่คนค้นหา หน้าก็จะมีโครงสร้างที่ตอบคำค้นได้ชัด ถ้า wireframe วางหัวข้อเป็นคำสวย ๆ ที่ไม่มีใครค้น หน้าก็จะขาดสัญญาณนี้ไป
ความลึกของโครงสร้างเว็บและลิงก์ภายใน
sitemap และเมนูที่วางใน wireframe กำหนดว่าหน้าสำคัญอยู่ห่างจากหน้าแรกกี่คลิก หน้าที่อยู่ลึกมากและมีลิงก์เข้าน้อยมักถูกเก็บข้อมูลและจัดอันดับยากกว่า การวางลิงก์ภายในไว้ใน wireframe เช่น ส่วนบริการที่เกี่ยวข้องท้ายหน้า ช่วยให้ทั้งผู้ใช้และบอตเดินทางถึงหน้าสำคัญได้
เนื้อหาที่มองเห็นได้และความเร็วของหน้า
ถ้า wireframe ซ่อนข้อมูลสำคัญไว้ในแท็บหรือสไลด์ที่ต้องกดก่อน หรือวางแบนเนอร์ภาพใหญ่หลายชิ้นไว้ด้านบน ก็มีผลกับความเร็วในการแสดงผลและค่า Core Web Vitals เช่น LCP และ CLS การกำหนดขนาดพื้นที่รูปตั้งแต่ใน wireframe ช่วยลดการกระโดดของเลย์เอาต์ระหว่างโหลด
ส่วน FAQ และข้อมูลที่ใส่ structured data ได้
การวางส่วนคำถามที่พบบ่อย รีวิว หรือตารางราคาไว้ใน wireframe ตั้งแต่ต้น ทำให้นักพัฒนาเตรียม schema markup ได้ตรงกับเนื้อหาจริงบนหน้า
wireframe ช่วยเพิ่ม conversion อย่างไร
conversion rate คือสัดส่วนผู้เข้าชมที่ทำสิ่งที่หน้าต้องการ เช่น กรอกฟอร์ม หรือกดสั่งซื้อ wireframe มีผลกับตัวเลขนี้ผ่านกลไกที่ตรวจสอบได้
- ลำดับข้อมูลตรงกับขั้นการตัดสินใจ ผู้ใช้ต้องเข้าใจว่าสินค้าคืออะไรก่อน แล้วจึงเชื่อ แล้วจึงดูราคา ถ้า wireframe วางราคาไว้ก่อนเหตุผล หรือวางฟอร์มก่อนที่ผู้ใช้จะเข้าใจข้อเสนอ ก็จะมีคนออกจากหน้ามากขึ้น
- จำนวนและตำแหน่งปุ่ม wireframe บังคับให้ตัดสินว่าหน้ามีเป้าหมายหลักกี่อย่าง ถ้ามีปุ่มหลายสีหลายข้อความแข่งกัน ผู้ใช้จะลังเล
- ความยาวฟอร์ม ทุกช่องที่เพิ่มคือแรงเสียดทานเพิ่มหนึ่งจุด การนับช่องใน wireframe แล้วถามว่าช่องไหนจำเป็นจริง ช่วยลดการทิ้งฟอร์มกลางทาง
- การออกแบบให้มือถือก่อน ปุ่มต้องกดด้วยนิ้วโป้งได้ และไม่ถูกบังด้วยป๊อปอัปหรือแถบแชต ปัญหาเหล่านี้เห็นได้ใน wireframe มือถือก่อนจะเป็นโค้ด
- พร้อมสำหรับการทดสอบ A/B เมื่อมี wireframe สองแบบ ทีมสามารถเลือกทดสอบทีละตัวแปร เช่น ตำแหน่งรีวิว เพื่อวัดผลกับผู้ใช้จริงได้
ตัวอย่างสมมติ: landing page ที่มีผู้เข้าชม 2,000 คนต่อเดือนและมีคนกรอกฟอร์ม 40 คน มี conversion rate 2% ถ้าการปรับโครงสร้างทำให้กรอกฟอร์มเพิ่มเป็น 50 คนโดยทราฟฟิกเท่าเดิม conversion rate จะเป็น 2.5% ตัวเลขนี้ใช้เพื่อแสดงวิธีคำนวณเท่านั้น ผลจริงขึ้นกับสินค้า ทราฟฟิก และข้อเสนอ
ข้อผิดพลาดที่พบบ่อยเวลาทำ wireframe
- เริ่มจากหน้าตาแทนเป้าหมาย ทำ wireframe โดยยังไม่ตกลงว่าหน้านี้มีเป้าหมายอะไร ทำให้ถกเถียงกันไม่จบ
- ใช้ lorem ipsum ทั้งหน้า พอใส่ข้อความภาษาไทยจริง หัวข้อยาวเป็นสามบรรทัด ปุ่มล้น และเลย์เอาต์พัง
- ทำแค่เวอร์ชันเดสก์ท็อป แล้วปล่อยให้นักพัฒนาเดาเองว่าบนมือถือจะเรียงอย่างไร
- ไม่ใส่สถานะต่าง ๆ เช่น หน้าผลการค้นหาที่ไม่มีผลลัพธ์ ฟอร์มที่ส่งไม่สำเร็จ หรือตะกร้าว่าง
- ไม่มีคนนอกโปรเจกต์ทดสอบ ทีมที่ทำงานกับโปรเจกต์มานานจะเข้าใจทุกอย่าง จึงมองไม่เห็นจุดที่ผู้ใช้ใหม่สับสน
wireframe ในบริบทตลาดไทย
เว็บไซต์และ landing page ที่ทำสำหรับผู้ใช้ในไทยมีรายละเอียดที่ควรใส่ไว้ใน wireframe ตั้งแต่แรก ข้อแรกคือช่องทางติดต่อ ผู้ใช้ไทยจำนวนมากคุ้นกับการทักแชตมากกว่ากรอกฟอร์ม wireframe จึงควรกำหนดให้ชัดว่าปุ่ม LINE ปุ่มโทร และฟอร์ม อยู่ตรงไหน และปุ่มไหนเป็นปุ่มหลัก ข้อที่สองคือภาษา เว็บสองภาษาต้องเผื่อพื้นที่ให้ข้อความไทยและอังกฤษที่ยาวไม่เท่ากัน และวางปุ่มสลับภาษาไว้ในตำแหน่งที่หาง่าย ข้อที่สามคือการชำระเงินและการจัดส่งสำหรับร้านออนไลน์ ควรวางข้อมูลเรื่องพร้อมเพย์ การเก็บเงินปลายทาง และระยะเวลาจัดส่งไว้ในจุดที่ผู้ใช้มองเห็นก่อนตัดสินใจ ไม่ใช่ซ่อนไว้ในหน้านโยบาย
อีกเรื่องหนึ่งคือการตัดคำภาษาไทย ภาษาไทยไม่มีช่องว่างระหว่างคำ ทำให้การตัดบรรทัดบนหน้าจอแคบอาจตัดกลางคำ การใส่ข้อความจริงใน wireframe มือถือช่วยให้เห็นปัญหานี้ก่อนและปรับความยาวหัวข้อได้
คำถามที่พบบ่อยเกี่ยวกับ wireframe
wireframe คือ ขั้นตอนที่จำเป็นทุกโปรเจกต์หรือไม่
ไม่จำเป็นต้องทำแบบละเอียดทุกโปรเจกต์ แต่ควรมีอย่างน้อยแบบร่างหยาบก่อนเริ่มดีไซน์ แม้แต่ landing page หน้าเดียว การวาดลำดับส่วนต่าง ๆ บนกระดาษสิบนาทีก็ช่วยให้ทีมตกลงเป้าหมายและลำดับเนื้อหาได้ก่อนลงแรงออกแบบ
ใครควรเป็นคนทำ wireframe
ส่วนใหญ่นักออกแบบ UX หรือนักออกแบบเว็บเป็นคนทำ แต่ข้อมูลที่ใส่ต้องมาจากหลายฝ่าย เจ้าของธุรกิจรู้ข้อเสนอ ทีมขายรู้คำถามของลูกค้า นักการตลาดรู้คำค้นและแหล่งทราฟฟิก และนักพัฒนารู้ข้อจำกัดทางเทคนิค
wireframe กับ sitemap ต่างกันอย่างไร
sitemap แสดงว่าเว็บมีหน้าอะไรบ้างและเชื่อมกันอย่างไร ส่วน wireframe แสดงว่าภายในแต่ละหน้ามีอะไรและเรียงอย่างไร โดยปกติทำ sitemap ก่อน แล้วจึงทำ wireframe ของหน้าสำคัญแต่ละหน้า
ทำ wireframe ใช้เวลานานแค่ไหน
ระยะเวลาขึ้นกับจำนวนหน้าและรอบการแก้ไข landing page หน้าเดียวแบบหยาบอาจเสร็จในไม่กี่ชั่วโมง ส่วนเว็บไซต์หลายสิบหน้าที่ต้องทำ high-fidelity และผ่านการทดสอบกับผู้ใช้อาจใช้หลายสัปดาห์
สรุปและขั้นต่อไป
wireframe เป็นขั้นที่ถูกที่สุดในการแก้ปัญหาโครงสร้าง ลำดับเนื้อหา และเส้นทางของผู้ใช้ ก่อนที่ปัญหาเหล่านั้นจะไปอยู่ในดีไซน์และโค้ด ถ้ากำลังวางแผนเว็บไซต์ใหม่ ดูรายละเอียดบริการ ออกแบบเว็บไซต์ หรือถ้าต้องการหน้าเดียวสำหรับแคมเปญโฆษณา ดูบริการ ออกแบบ landing page สำหรับธุรกิจที่ต้องการระบบเฉพาะทาง มีบริการ พัฒนาเว็บไซต์แบบกำหนดเอง และสำหรับร้านค้าออนไลน์ มีบริการ ออกแบบเว็บไซต์อีคอมเมิร์ซ ซึ่งเริ่มจากการวางโครงสร้างหน้าก่อนออกแบบเช่นกัน
