หลักการออกแบบตำแหน่ง(Location Design)

หลกั การออกแบบตาแหน่ง(LOCATION DESIGN) How to : 1. Download HP Reveal App 2. Scan QR Code with Line or search “CHANTAMON” 3. Scan picture Create by chantamon boonchananon

หลกั การออกแบบตาแหน่ง(LocationDesign) คอื ? การพจิ ารณตาแหน่งในการจดั วางขอ้ มลู และสารสนเทศท่ีสอดคลอ้ งกบั พฤตกิ รรมหรอื ประสบการณผ์ ูใ้ ช้ โดยท่มี นุษยจ์ ะมกี ารสงั เกตอุ ย่างรวดเรว็ เพอ่ื จาแนกลกั ษณะของตาแหน่งและสดั สว่ นของการจดั วางขอ้ มลู บนหนา้ เวบ็ ไซต์ หรอื ท่เี รยี กว่าโครงร่าง(Layout) ก่อนการเคลอ่ื นไหวสายตาเพอ่ื อ่านหรอื หาขอ้ มลู ทต่ี อ้ งการ ดงั นน้ั การออกแบบเวบ็ ไซตท์ ม่ี ีประสทิ ธภิ าพผูอ้ อกแบบเวบ็ ไซตจ์ งึ มคี วามจาเป็นทจ่ี ะตอ้ งทราบพ้นื ทท่ี ่ีมนุษยจ์ ะใหค้ วามสนใจ (Areas of interest: AOI) แสดงแผนภาพกเู ทนแบรก์ (Gutenberg Diagram)

แกนเู ทวนคแดิ บทรไ่ี ก์ ด(จ้ GาuกtenแbผergนDภiaาgพram)สามารถนาไปอธบิ ายลกั ษณะพฤตกิ รรมการอ่านของมนุษยไ์ ดอ้ กี หลายลกั ษณะ ดงั น้ี1.การอ่านแบบโครงร่าง Z (Z-Layout) หรือ การอ่านตามรูปแบบ S กลับด้าน (Reverse S pattern) เป็นพฤติกรรมการอ่านแบบท่วั ไปของมนุษย์ มลี ักษณะการเคล่ือนไหวสายตาจากซ้ายไปทางขวาในแถบบรรทดั แรก จากน้ันในแถบบรรทดั ท่สี องกจ็ ะเร่ิมเคล่ือนไหวสายตาจากซ้ายไปขวาเช่นเดียวกนั โดยเคล่ือนไหวสายตาในลักษณะน้ีไปเร่ือย 12 34 แสดงทศิ ทางการอ่านแบบโครงร่าง Z (Z-Layout)

2. การอ่านแบบโครงร่างซิกแซก็ (Zig-Zag reading pattern)มีลักษณะท่ขี ยายต่อจากการอ่านแบบโครงร่าง Z (Z-Layout) โดยการอ่านแบบโครงร่างซิกแซก็ จะเกดิ กบั หน้าเวบ็ ไซตท์ ่เี น้นการแสดงผล ข้อความและมีลักษณะโครงร่างเวบ็ แนวด่งิ (Vertical orientation) หรืออาจเรียกการอ่านลักษณะน้ีว่า การอ่านแบบเชิงกระดาษ (Paper-basedreading pattern) 1 2 3 4 5 6 7 8แสดงทศิ ทางการอ่านแบบโครงร่างซิกแซก็ (

3. การอ่านแบบโครงร่างแนวราบ (เป็นลักษณะการอ่านหน้าเวบ็ ไซต์ท่เี กดิบ่อยคร้ังในเวบ็ ไซต์หน้าแรก ( ท่แี สดงโครงร่างท้งั หมดภายในหน้าจอเดียว รวมถงึ เวบ็ ไซตท์ ่แี สดงโครงร่างในหน้าแรกและใช้พ้ืนท่เี กอื บเตม็ หน้าจอ 1 2แสดงโครงร่างแนวราบ (

การอ่านแบบโครงร่างแนวราบยงั มลี ักษณะสอดคล้องกบั พ้ืนท่สี ามเหล่ียมทอง (GoldenTriangle Pattern) โดยพ้ืนท่สี ามเหล่ียมทองเป็นพ้ืนท่ที ่ผี ู้ใช้ทุกคนจะต้องเหน็ บนเวบ็ เพจ ซ่ึงพ้ืนท่ีดงั กล่าวเหมาะสาหรับการนาเสนอข้อมูลท่สี าคัญของเวบ็ ไซต์ได้ 12 3 แสดงพ้นื ทส่ี ามเหลย่ี มทอง (

4. การอ่านแบบโครงร่าง F (F-based viewingpattern) แรกเร่ิมการอ่านแบบโครงร่าง F ได้มาจากการศึกษาการเคล่ือนไหวดวงตาท่ถี ูกค้นพบโดย จาคอปเนลเซน (Jakob Nielsen) ซ่ีงแสดงให้เหน็ ว่าผู้ใช้มีลักษณะการอ่านเวบ็ ไซต์คล้ายรปู ร่างของตัวอกั ษร F(F-shaped pattern) โดยจาคอป เนลเซน ได้จาแนกส่วนประกอบของโครงร่าง F ไว้ดงั น้ี(Jakob, 2006) 4.1 โครงสร้างการอ่านเชิงแนวนอน(Horizontal movement) ผู้ใช้จะเร่ิมอ่านจากส่วนด้านบนซ้าย (Upper left) เป็นบริเวณท่ผี ู้ใช้ส่วนใหญ่จะทราบว่าเป็นบริเวณท่มี ขี ้อมูลท่สี าคัญและมีส่วนของการน าทาง (Navigation) และเคล่ือนไหวดวงตาอ่านเร่ือย ตามบรรทดั แรก (F’s top bar)

4.2 โครงสร้างการอ่านเชิงแนวนอนลาดบั ท่ีสอง (Second horizontal movement) เป็นการอ่านในบรรทดั ถัด ไป (F's lower bar) ซ่ึงการอ่านในบรรทดัถัดมาน้ันจะเร่ิมอ่านไม่จบบรรทดั ผู้ใช้จะเร่ิมใช้เวลากบับรรทดั ถดั ไปน้อยลงไปเร่ือย 4.3 โครงสร้างการอ่านแนวด่ิง (Verticalmovement) เป็นลักษณะการอ่านช่วงสดุ ท้ายเกดิหลังจากมีการใช้เวลาอ่านในบรรทดั F’s lower barลดลง ซ่ึงผู้ใช้จะเปล่ียนลักษณะการอ่านจากแนวนอนเป็นแนวด่ิงมากข้นึ เร่ือย ซ่ึงอาจเรียกว่าการอ่านแนวก้าน F (F's stem)

แสดงภาพของจาคอป เนลเซน ( 111111 1แสดงตวั อย่างการอ่านแบบโครงร่าง