Interesting site where you can upload a photo or an image of your website and the heatsite will display how people view your photo or site

link

แต่การทำ Eye-tracking นั้น ต้องมีเครื่องมือต่างหาก
ซึ่งบางทีเป็นการลงทุนที่ไม่คุ้มค่านัก

Feng-GUI Lab Research ได้คิดค้น web application ที่คำนวณตาม Algorithm ที่กำหนด
เพื่อทำนายแนวโน้มการมองหน้าเว็บของผู้ใช้
และแสดงผลออกมาในรูปแบบของ Heatmap ซึ่งเข้าใจได้ง่าย

เราสามารถเลือกรูปภาพเพื่ออัพโหลด หรือใส่ URL เพื่อให้มันคำนวณ Heatmap ออกมาก็ได้

(คลิกที่รูปเพื่อดูรูปเต็ม)

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

ซึ่งเมื่อเทียบเทคโนโลยีระหว่าง Eye&Mouse-tracking, LG2 Top, และ Feng-GUI แล้ว
ก็จะเห็นได้ว่า Feng-GUI จะแสดงผลชัดเจนกว่า ในขณะที่ Eye&Mouse Tracking ให้ความละเอียดมากกว่า

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

ป.ล.
Feng-Gui ยังมี Add-on สำหรับ Firefox โดยเฉพาะ เพื่อความสะดวกในการทำ Heatmap บ่อยๆด้วย

อ้างอิง
http://www.feng-gui.com/

Well, how about generating a heat map to figure that out? :D Oh, why not, it's a free and handy tool!

Feng-gui creates a heat map of a blog/site or image almost in an instant. Even no registration is required!

Designers, Photographers, Web Developers, Creatives !

Find out how people view your website or image and which areas are getting most of the attention.

(excerpt from Feng-gui)

Look at the examples below to acquaint yourself with the concept. The first image is a web snap of the official homepage of Tintin and the next one is the web snap of the heat map of that homepage.

The way people look

• The ViewFinder Heatmap service creates a Saliency attention heatmap.

  The salience map creation is based upon neuro-science studies of visual Attention, Perception and Cognition of humans.
  Or in English:What people are looking at?

• It captures a snapshot image of the requested website and generates a visual attention heatmap.
• Heatmap - from dark blue through green to red, describing the temperature heat of the image heated by human eyes.

(excerpt from Feng-gui)

You might like to read the Feng-gui FAQ for information on what you can find with Viewfinder heatmap, as well as, answers to some additional questions.

You could also check out the Feng-gui Lab Gallery page for some more cool stuff. I love all these cool tools and I will surely use them whenever the need arises! Right now I am too happy with the heat map thing!

Smart Thumbnails Crop and resize an image creates a thumbnail that includes most of the attention.
ViewFinder in videos Automatic prediction of human attention in videos.
Segmentation Objects detection and segmentation. building blocks of dynamic symmetry.

(excerpt from Feng-gui)

Last but not the least, check out the Feng-gui viewfinder tools page to learn about Feng-gui's Firefox extension and other bookmarklets. As for me, I have it up and running in my Firefox already! :D

© copyright Tue Nov 06 21:48:35 MST 2007 - All Rights Reserved 

***

Tell a friend!

Parte de las investigaciones se han centrado en aspectos psicológicos y en los procesos neurológicos complejos que entran en acción cuando nuestros ojos son expuestos a las imágenes.

Al articular en una expresión matemática, el proceso humano de la visión, se pudieron realizar simulaciones tecnológicas de la visión artificial que fueron ejecutadas a través de la tecnología robótica."

Parece ser que éste es el método utilizado por una página web, Feng Gui, en la que simulan la manera en que la gente presta atención visual, informándonos de las zonas qué más llaman la atención así como de aquellas que son ignoradas por el ojo humano. Estos son los resultados de los análisis de las diferentes pantallas que he introducido:

• Pantalla del blog con la anterior cabecera, sin foto

Según este análisis el máximo foco de atención estaba en la parte de arriba, en la que no había ninguna información.

• Pantalla del blog con la actual cabecera (foto del agua)

Con la nueva caratula parece que hemos distribuído algo mejor la atención... 

• Pantalla de la web

En este caso, me parece curioso que el máximo foco de atención esté en la parte de arriba, cuando mi impresión personal es que el anuncio del blog llama demasiado la atención (las estadísticas y el análisis de tráfico de la web así me lo confirman).

Me encanta que se utilice el Feng Shui como reclamo publiciario y, en este caso el guiño que le dedican en su publicidad es fantástico:

"Feng Gui - Feng Shui for graphic user interfaces"

Aunque supongo que se trata de una curiosidad que puede ayudarnos en los diseños... Para acceder a la página, os facilito el enlace Feng Gui

Maru Canales

Artículos relacionados:

• Practicando Feng Shui 
• Cuando aplicar Feng Shui
• Relación de artículos publicados en este blog