การวาง Layout แบบ Z และ F

ในการออกแบบ Layout ของเว็บเพจ มีรูปแบบที่เป็นที่พูดถึงกันบ่อยๆ อยู่ 2 แบบ เราจะมารู้จักกับรูปแบบทั้ง 2 กันครับ

ทำไมต้องรู้เรื่องวิธีการวาง Layout

โดยหลักการแล้ว การวาง Layout มันไม่ได้มีกฎกติกาอะไรที่แบบว่า ต้อง 1–2–3 ห้าม 1–2–3 อยู่แล้ว เราจะวาง Layout กันมั่วๆ ก็สามารถทำได้ แต่ก็จะมีกลุ่มคนที่มีอยากหารูปแบบที่จะสร้างผลลัพธ์ที่ดีที่สุด แทนที่จะวางกันมั่วๆ ตามมีตามเกิด

โดยหลักการพื้นฐานสำคัญที่ใช้ก็คือ เราต้องจัดของให้สอดคล้องกับพฤติกรรมหรือการใช้งานของผู้ใช้ของเรา และเอาข้อมูลที่สำคัญที่สุดวางไว้ที่จุดที่เขาสามารถสังเกตเห็นได้ดีที่สุด เพื่อที่จะทำให้ผู้เข้ามาจะทำ Call-to-Action ต่อไป

Z-Pattern

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

ตัวอย่างนี้ จะเอา Logo เป็นตำแหน่งที่เห็นได้ชัดในตำแหน่งแรก จากนั้นไปที่ Menu ในตำแหน่งที่สอง และ ข้อมูลเป็นตำแหน่งที่สาม และ Call-to-Action ในตำแหน่งที่ 4

CR: https://webdesign.tutsplus.com/articles/understanding-the-z-layout-in-web-design--webdesign-28

อย่างไรก็ตามก็ไม่ได้มีความจำเป็นที่จะต้องเป็นรูปตัว Z อย่างชัดเจน อาจจะเอียงๆ สักหน่อยก็สามารถทำได้ เช่น รูปแบบข้างล่างจะมีการยกตัวขึ้นในตอนจบเพื่อมาหา ปุ่ม Get Start ซึ่งเป็น Call-to-Action

ข้อควรระวัง จากที่บอกว่า รูปแบบ Pattern นี้มาจากพฤติกรรมของคน ถ้าไปอยู่ในสังคมที่อ่านจากขวาไปซ้าย Pattern ก็จะเปลี่ยนทิศไปนั่นเอง

และ Z-Pattern นั้นจะไม่เหมาะกับ ข้อมูลที่มีความหนาแน่นสูง ถ้าต้องการใช้กับข้อมูลที่มีความหนาแน่นสูง ลองพิจารณา F-Pattern ดูครับ

F-Pattern

F-pattern มีที่มาจากการจับ Heatmap ในการอ่านเอกสาร แล้วพบว่า คนจะอ่านจากซ้ายไปขวา แล้วขึ้นบรรทัดใหม่ไปเรื่อยๆ แต่เมื่อแถวมันยาวขึ้น คนจะไม่อ่านไปจนจบบรรทัด ทำให้ ความกว้างของ heatmap ลดลง เหมือนเป็นตัว F นั่นเอง

https://www.dummies.com/programming/big-data/big-data-visualization/data-visualization-common-visual-patterns/

ดังนั้นคำแนะนำของ Pattern นี้คือ ถ้ามีอะไรสำคัญๆ แล้วต้องให้ผู้ใช้อ่าน ให้เอา content มาอยู่ในช่วงแรกๆ ขณะที่ content ท้ายๆ ก็อย่ายาวเกินไป ไม่งั้นจะไม่อยู่ใน Attention ได้

ข้อควรระวังในการใช้ Pattern ทั้ง Z และ F

แม้ว่า Pattern ทั้ง 2 แบบจะมีการพูดถึงอย่างกว้างขวาง แต่ก็ไม่แนะนำให้ใช้แบบเดี่ยวๆ ทั้งนี้ เพราะ Pattern ทั้งสองมีที่มาใน context ที่ ตัวอักษรเป็น Text ไม่ได้มีความแตกต่างกันทางขนาดของตัวอักษร หรือการเน้นตัวหนา

และที่สำคัญ ตาของคนเราจะพุ่งไปยัง content ที่ใหญ่ สีฉูดฉาด และมี contrast สูงก่อนเสมอ ถ้ามี content ที่มีลักษณะแบบนี้ Pattern ต่างๆ ก็จะไม่ช่วยอะไร

ซึ่งการเน้นผ่านตัวอักษร ในทางกลับกัน ก็สามารถเอามาช่วยเน้น หรือเพิ่มการวิ่งตามเส้นของ Pattern ได้เช่นเดียวกัน เช่น การทำ Title ใหญ่ๆ ที่มุมซ้ายบน แล้วทำปุ่มสีสันสดใสที่ด้านล่าง