ไวร์เฟรม (Wireframe)

ไวร์เฟรมกับแบบร่างดีไซน์ต่างกันอย่างไร

ไวร์เฟรมคือขั้นตอนกำหนดว่า “จะวางอะไรไว้ตรงไหน” ส่วนแบบร่างดีไซน์คือขั้นตอนกำหนดว่า “จะให้ออกมาหน้าตาแบบไหน” ไวร์เฟรมมีแค่กล่องสีเทากับตำแหน่งข้อความ ส่วนแบบร่างดีไซน์จะมีสี · รูปภาพ · ฟอนต์

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

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

บางบริษัทไม่มีขั้นตอนไวร์เฟรมแยก กรณีนี้แบบร่างดีไซน์แรกจะทำหน้าที่เป็นไวร์เฟรมไปด้วย เมื่อได้รับแบบร่างแรก จึงควรตรวจลำดับก่อนดูสี

ไวร์เฟรมมีอะไรบ้าง

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

ขั้นตอนการจองหรือสั่งซื้อที่ต่อกันหลายหน้าจอ วาดลูกศรไว้ระหว่างหน้าจอด้วยก็ดี ภาพที่วาดหน้าจอกับลำดับขั้นตอนไว้ด้วยกันแบบนี้บางครั้งเรียกว่า “ไวร์โฟลว์ (Wireflow)”

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

ไวร์เฟรมมีประโยชน์แม้กับแลนดิ้งเพจหน้าเดียวแบบเลื่อนดู เพราะแม้มีหน้าเดียว ลำดับจากบนลงล่างก็คือเส้นทางที่ลูกค้าเดินไป

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

วาดไวร์เฟรมเองได้อย่างไร

แค่กระดาษแผ่นเดียวกับปากกา ก็ร่างได้ภายใน 30 นาที ถ้ากำหนดลำดับไว้แล้ว การปรึกษาครั้งแรกกับผู้รับทำเว็บไซต์จะสั้นลงมาก

ไม่จำเป็นต้องวาดสวย ผู้รับทำเว็บไซต์ไม่ได้ดูฝีมือวาด แต่จะอ่านว่า “อะไรขึ้นก่อน” และ “อะไรต้องมี” ถ้าถนัดคอมพิวเตอร์ จะวางกล่องสี่เหลี่ยมในโปรแกรมทำสไลด์ก็ได้ หรือวาดบนกระดาษแล้วถ่ายรูปก็พอ

1. 01เขียนคำถาม 5 ข้อที่ลูกค้าถามบ่อยที่สุดทางโทรศัพท์หรือข้อความ
2. 02ทำรายการหน้าที่จะใส่คำตอบเหล่านั้น ร้านเล็กหลายครั้งหน้าเดียวก็พอ
3. 03วาดสี่เหลี่ยมแนวตั้งยาว ๆ ขนาดหน้าจอมือถือ แล้วใส่คำตอบเป็นกล่องเรียงจากบนตามลำดับความสำคัญ
4. 04กำหนดการกระทำสุดท้ายของลูกค้า (จอง · โทร · นำทาง) แล้ววาดกล่องปุ่ม
5. 05แคปหน้าจอเว็บไซต์ร้านอื่นที่ชอบ แล้วเขียนแปะไว้ว่า “ชอบลำดับของส่วนนี้”
6. 06ถ่ายรูปภาพที่วาดส่งให้ผู้รับทำเว็บไซต์ แล้วตรวจด้วยกันว่ามีข้อมูลไหนขาดไปไหม

ลำดับหน้าจอแรกต่างกันอย่างไรในแต่ละธุรกิจ

ลำดับหน้าจอแรกขึ้นอยู่กับ “สิ่งที่ลูกค้าอยากรู้เป็นอย่างแรกเมื่อเข้ามา” มากกว่าประเภทธุรกิจ แม้เป็นร้านทำผมเหมือนกัน ร้านที่ลูกค้าจองล่วงหน้าเยอะกับร้านที่ลูกค้าแวะเข้ามาเยอะก็มีลำดับต่างกัน

ตัวอย่างด้านล่างเป็นแค่จุดเริ่มต้น ในความเป็นจริงให้ปรับตามคำถามที่ร้านได้รับบ่อยที่สุด

ถ้าจัดลำดับไม่ถูก ลองจดสายโทรศัพท์ที่โทรเข้าร้านดูสัก 1 สัปดาห์ ถ้าถาม “เปิดถึงกี่โมง” มากที่สุด ก็ยกเวลาเปิดทำการขึ้นไว้ใกล้หน้าจอแรก ถ้าถาม “มีที่จอดรถไหม” มาก ก็ยกข้อมูลที่จอดรถขึ้นไป

• ร้านทำผม: รูปทรงผมเด่น → แนะนำช่างผม → ราคาแยกตามบริการ → ปุ่มจอง → ที่ตั้ง · ที่จอดรถ
• ร้านงานฝีมือ: รูปผลงานเด่น → ประเภทคลาสและตาราง → ค่าเรียน → ปุ่มสมัคร → รีวิวผู้เรียน
• ร้านอาหาร: รูปเมนูเด่น → เวลาเปิด · วันหยุด → เมนู → สอบถามการจองแบบกลุ่ม → แผนที่
• พิลาทิส · โยคะ: รูปบรรยากาศคลาส → ประเภทคลาส → ตารางเรียน → สมัครทดลองเรียน → แนะนำครูผู้สอน

ต้องดูไวร์เฟรมหน้าจอมือถือแยกต่างหากไหม

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

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

ในไวร์เฟรมมือถือ ให้ดูว่าปุ่มจอง · โทรอยู่ในตำแหน่งที่นิ้วโป้งกดได้สะดวกไหม และราคาไม่ได้อยู่ลึกจนต้องเลื่อนลงนานเกินไปใช่ไหม

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

ความผิดพลาดที่พบบ่อยในขั้นตอนไวร์เฟรมมีอะไรบ้าง

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

อีกเรื่องคือยกเนื้อหาที่อยากใส่ทั้งหมดขึ้นไปไว้ที่หน้าจอแรก หน้าจอแรกเป็นที่ที่ลูกค้าตัดสินว่า “มาถูกที่ไหม” ยิ่งลดข้อมูลให้เหลือ 3–4 อย่าง กลับยิ่งอ่านง่าย

กลับกัน การแบ่งหน้าย่อยเกินไปก็เป็นความผิดพลาดที่พบบ่อย สำหรับร้านเล็ก ถ้าข้อมูลกระจายอยู่หลายหน้า ลูกค้ามักกดไปมาระหว่างเมนูแล้วออกไป หลายครั้งการรวมไว้หน้าเดียวแล้ววางปุ่มทางลัดไว้ด้านบนจะดีกว่า

ในขั้นตอนไวร์เฟรม ควรถามบริษัทรับทำเว็บไซต์อะไรบ้าง

ถ้าถาม 4 เรื่องด้านล่างนี้ก่อนเซ็นสัญญาหรือในการประชุมครั้งแรก จำนวนครั้งการแก้ไขและระยะเวลาจะชัดเจนขึ้น

• มีขั้นตอนไวร์เฟรมแยกหรือไม่ หรือข้ามไปทำแบบร่างดีไซน์เลย
• การแก้ไขในขั้นตอนไวร์เฟรมนับรวมในจำนวนครั้งการแก้ไขทั้งหมดหรือไม่
• จะแสดงการจัดวางบนหน้าจอมือถือให้ดูด้วยหรือไม่
• ถ้าสลับลำดับหลังยืนยันไวร์เฟรมแล้ว จะจัดการอย่างไร