ฉันทมน 028

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

วตั ถปุ ระสงค์• เพอ่ื ตอ้ งการใชใ้ นการศึกษาใหก้ บั การเรยี นและในการทา ความเขา้ ใจดว้ ยARมากข้ึน โดยจะเนน้ การโชวใ์ น ออกแบบต่างๆในเน้ือหากบั การสอนต่างๆ• ใชใ้ นการเรยี นรูก้ บั นวฒั กรรมแนวใหม่ในการใชง้ าน

สารบญั หนา้ 1หลักการออกแบบตาแหน่ง 2แนวคดิ ท่ไี ด้จากแผนภาพกูเทนแบร์ก 2 3 2.1 การอ่านแบบโครงร่างZ 4 2.2 การอ่านแบบโครงร่างซิกแซก๊ 6 2.3 การอ่านแบบโครงร่างแนวราบ 6 2.4 การอ่านโครงร่างF 7 2.4.1 โครงสร้างการอ่านเชิงแนวนอน 7 2.4.2 โครงสร้างการอ่านเชิงแนวนอนลาดับท่สี อง 2.4.3 โครงสร้างการอ่านแนวด่ิง

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

แนวคดิ ท่ไี ด้จากแผนภาพกเู ทนแบร์ก(Gutenberg Diagram)สามารถนาไปอธบิ ายลักษณะพฤตกิ รรมการอ่านของมนุษยไ์ ด้อกี หลายลักษณะ ดังน้ี 1.การอ่านแบบโครงร่าง Z (Z-Layout) หรือ การอ่านตามรูปแบบ S กลับด้าน (Reverse S pattern) เป็นพฤตกิ รรมการอ่านแบบท่วั ไปของ มนุษย์ มีลักษณะการเคล่ือนไหวสายตาจากซ้าย ไปทางขวาในแถบบรรทดั แรก จากน้ันในแถบ บรรทดั ท่สี องกจ็ ะเร่ิมเคล่ือนไหวสายตาจากซ้าย ไปขวาเช่นเดียวกนั โดยเคล่ือนไหวสายตาใน ลักษณะน้ ีไปเร่ือยๆ1234 แสดงทศิ ทางการอ่านแบบโครงร่าง Z (Z-Layout) 2

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

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

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

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

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

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

แบบทดสอบทา้ ยบท

References• http://www.teacher.ssru.ac.th/nutth apat_ke/