โพสก่อนหน้านี้ผมเคยเกริ่นถึงเรื่องของ Gutenberg Diagram ในโพสนี้ผมจะมาอธิบายรายละเอียดว่า Gutenberg Diagram คืออะไร และมีประโยชน์ในงาน Usability Engineering อย่างไรบ้าง
อันที่จริง Gutenberg Diagram เป็นหลักจิตวิทยาง่ายๆ ของมนุษย์ (เผ่าพันธ์ที่อ่านจากซ้ายไปขวา) ที่ถูกฝึกสอนให้มีการอ่านในรูปแบบซ้ายไปขวาและบนลงล่างจนฝังลึกไปเป็นสัญชาติญาณ
ในแวบแรกที่มองหน้าจอ มนุษย์จำพวกนี้จะ “โฟกัส” จุดสนใจของสายตาที่มุมบนซ้ายของหน้าจอเป็นอันดับแรก และจะไล่สายตาจากจุดดังกล่าวเป็นเส้นทแยงมุมไปที่มุมล่างขวาของเลย์เอาท์ ภาพด้านล่างเป็นแผนผัง Gutenberg โดยภาพซ้ายเป็นแผนผังสำหรับคนอ่านจากซ้ายไปขวา ส่วนภาพขวาสำหรับพวกขวาไปซ้าย (ญี่ปุ่น, จีน)
- ภาพที่ 1: เป็น Gutenberg Diagram สำหรับคนที่อ่านหนังสือจากซ้ายไปขวา
- ภาพที่ 2 คือ Gutenberg Diagram สำหรับคนที่อ่านหนังสือจากขวาไปซ้าย
จุดบนซ้ายที่เป็นจุดที่เด่นที่สุดตามทฤษฏีของ Gutenberg เราเรียกกันว่าจุด POA (Primary Optical Area) จุดล่างขวาที่เป็นจุดสิ้นสุดของสายตา เรียกกันว่าจุด TA (Terminal Area) ข้อมูลที่อยู่ในเส้นทางของสายตาระหว่าง POA ไปยัง TAจะซึมเข้าสู่หัวสมองของผู้อ่านได้มากกว่าส่วนที่เหลือ ซึ่งก็คือมุมบนขวาและล่างซ้าย ซึ่งเราเรียกกันว่าจุดอับ (Fallow Area) และระหว่างสอง Fallow Area นี้ มุมบนขวาจะได้รับ Attention จากผู้อ่านมากกว่ามุมล่างซ้าย ถ้าหากปัจจัยขององค์ประกอบอื่นๆ (สี, lead graphics, ขนาดตัวอักษร) เท่ากัน
พอเห็นพฤติกรรมทางจิตวิทยาของผู้อ่านเป็นแบบนี้แล้วเราจึงมีแนวทางการออกแบบที่สอดคล้องกับพฤติกรรมดังกล่าว โดยเราสามารถแบ่งพื้นที่ของหน้าจอออกเป็นสี่ส่วน (4 Quadrants) และให้น้ำหนักการออกแบบของแต่ละส่วนหนักเบาให้สอดคล้องกับทฤษฏี Gutenberg
เช่น…
- ควรจะวางโลโก้/จุดสนใจ ไว้ ณ จุดบนซ้าย เพื่อดึงความสนใจของผู้อ่านในการจดจำแบรนด์ให้ได้มากที่สุด
- จุด TA เป็นตำแหน่งที่สามารถปิดการขายได้อย่างมีประสิทธิภาพ (ติดต่อเรา, ดาวน์โหลดเดโม, โทรสั่งซื้อวันนี้)
- ตำแหน่งล่างซ้ายในหน้าเว็บเพจ ถือเป็นจุดอับที่สะดุดตาคนน้อยที่สุดตามหลักของ Gutenberg เมื่อรู้อย่างนี้เราต้องระวังการจัดวางคอนเทนต์ให้ดี Goal ที่สำคัญของเพจไม่ควรไปอยู่ในมุมล่างซ้ายถ้าไม่จำเป็น
- หากต้องการเน้นเนื้อหาที่ส่วน Follow Area ต้องสร้างความโดดเด่นด้วยองค์ประกอบอื่นๆ เช่นการเล่นสีที่แตกต่าง การใช้ตัวอักษร หรือ Movement ของกราฟฟิคที่น่าสนใจ
เรามาดูตัวอย่างเว็บเพจที่ออกแบบตามหลัก Gutenberg ดูบ้าง ลองสังเกตตำแหน่งโลโก้ รวมไปถึงการวางตำแหน่งGoal หลักๆ ของเว็บไซต์นะครับ
แต้ท้ายที่สุดผมคงต้องบอกว่า Gutenberg Diagram ไม่ใช่สูตรสำเร็จของการจัดวางองค์ประกอบเว็บไซต์ สิ่งที่เราจะได้เรียนรู้จาก Gutenberg ก็คือแนวคิดตามจิตวิทยาของมนุษย์ และแนวทางพื้นทางในการสร้าง Attention กับเว็บไซต์ เช่น หากองค์ประกอบต่างๆ บังคับให้ข้อมูลส่วนสำคัญของเราไปอยู่ที่ Fallow Area ก็ควรจะสร้างจุดเด่นอื่นที่ฉีกหนีองค์ประกอบต่างๆ เพื่อทำให้องค์ประกอบดังกล่าวมีความโดดเด่นและดึง Attention ของสายตาผู้อ่านได้ดีกว่าเดิม
นอกจากนี้สิ่งที่เราต้องเรียนรู้คือความเป็นจริงที่ว่า การอ่านหนังสือนั้นสายตาของเราจะเริ่มสนใจ ณ จุด POA ก่อนเสมอ แต่เว็บไซต์ไม่ใช่หนังสือ ดังนั้นในบางกรณีการจัดองค์ประกอบของเว็บไซต์ที่ขัดกับ Gutenberg Diagram กลับมีประสิทธิภาพ นั่นเนื่องมาจากว่า สมองของผู้เข้าชมไม่ได้ตีความหน้าจอดังกล่าวเป็นหน้าหนังสือ แต่อาจเป็นโปสเตอร์ หรือบิลบอร์ด ซึ่งจะทำให้ POA เปลี่ยนไปเป็นกึ่งกลางภาพโดยอัตโนมัติ
ใครไม่เชื่อใน Gutenberg Diagram เราสามารถทำการทดลองได้โดยการใช้เครื่องมืออย่าง Google Website Optimizer เพื่อวัด Attention ของผู้เข้าชมได้ โดยการออกแบบเลย์เอาท์เว็บไซต์สองประเภทและทดสอบกับผู้เข้าชมจริง ว่าสอดคล้องกับทฤษฏีของ Getenberg หรือไม่ (สิ่งที่ทีมงานของเราเคยทดสอบก็คือ การวางไอคอน “สมัครสมาชิก” ไว้ณ ตำแหน่ง Fallow Area นั้นทำให้มียอดสมาชิกน้อยกว่าตำแหน่ง TA ถึงประมาณ 300%)
ปิดท้ายกันด้วยข้อมูลเพิ่มเติมว่า ทฤษฏีของ Gutenberg จะเหมาะสมและมีประสิทธิภาพสูงสุดกับเว็บไซต์ที่มีอาการInformation Overflow นั่นก็คือ ข้อมูลท่วมจนไม่รู้ว่าอันไหนเด่นอันไหนด้อยไปกว่ากัน ส่วนในกรณีเว็บไซต์ที่มีข้อมูลไม่มาก เราอาจจะมองไม่เห็นศักยภาพของทฤษฏี Gutenberg อย่างชัดเจนนัก
เครดิต : http://apricotion.org/
บทความเกี่ยวกับ Usability Engineering ทั้งหมดครับ
