วิธีนำสายตาผู้ใช้ไปยังเว็บไซต์

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

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

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

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

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

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

หนังสือยอดเยี่ยมที่สามารถช่วยคุณได้ในเรื่องนี้คือRocket Surgery Made Easy ของ Steve Krug

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

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

แหล่งข้อมูลการติดตามสายตาเพิ่มเติม:

• การติดตามตา: วิธีที่ดีที่สุดในการทดสอบการใช้งานแอปที่หลากหลาย
• แนวทางการออกแบบฟอร์มบนเว็บ: การศึกษาแบบเจาะลึก
• การศึกษาการติดตามดวงตาเผยให้เห็นถึง 12 กลยุทธ์เว็บไซต์
• คำถาม StackOverflow เกี่ยวกับการตั้งค่าตัวติดตามตาของคุณเองด้วยเว็บแคม

บริการติดตามดวงตา:

• GazeHawk
• SimpleUsability
• UserCentric
• UserVision

นี่คือเคล็ดลับด่วน: รวมภาพของบุคคลที่มองหรือชี้ไปที่วัตถุเป้าหมายของคุณ (เช่นผลิตภัณฑ์ปุ่มสมัครสมาชิก) นี่คือตัวอย่างจากโฆษณา แต่ฉันเคยเห็นชั้นเชิงเดียวกันบนหน้าเว็บ:

(ที่มา: http://www.grokdotcom.com/2007/10/04/how-a-pretty-face-can-push-visitors-away/ )

ฉันสามารถนึกถึงสองวิธีง่าย ๆ ในการนำผู้ใช้ไปยังเว็บไซต์:

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