RSS

Como se lee el contenido en web

Por vuarnet | 19 de April, 2006.  

Usabilidad

Actualización
________________________________________
Excelente aportación a este mismo estudio, por parte de Torres Burriel:
________________________________________

Cómo leen los usuarios en la web.

Según el último Alertbox de Jakob Nielsen, publicado el día de hoy 17 de abril, afirma que los usuarios a menudo leen el contenido de un sitio web en un patrón que se asemeja al de una F mayúscula, es decir; dos líneas horizontales y una vertical.

Para este Eyetracking, se grabaron a 232 usuarios que vieron miles de páginas web, encontrando que el comportamiento principal de lectura se mantenía muy constante en diversos sitios y tareas. Este patrón dominante se parece a una F y tiene los siguientes tres componentes:

* Los usuarios primero leyeron en un movimiento horizontal, generalmente a través de la parte superior del área del contenido, este elemento inicial forma la barra superior de la F.

* Enseguida, los usuarios bajan un poco y después leen en un segundo movimiento horizontal que cubre una área más corta que el movimiento anterior. Este elemento forma la barra más inferior y más corta de la F.

* Finalmente, los usuarios exploran el lado izquierdo del contenido en un movimiento vertical. Algunas veces, este escaneo más lento y sistemático aparece como una línea sólida en el heatmap (mapa de calor) del eyetracking. Otras veces, los usuarios se mueven rápidamente, creando un heatmap menos definido. Este último elemento es el que forma la barra vertical de la F.

Como es natural, los patrones de exploración de los usuarios no siempre abracan estas tres partes. Los usuarios leerán a veces a través de una tercera parte de contenido, haciendo que el patrón se asemeje más a una E que a una F.

F reading pattern eyetrack
Heatmaps de tres sitios web. Las áreas dónde los usuarios más vistas estan coloreadas en rojo, las áreas amarillas indican pocas vistas, seguidas de las áreas menos vistas que son las azules . Las áreas grises fueron irrelevantes


Otras veces leerán solamente de arriba abajo, haciendo que el patrón parezca una L invertida (con la barra transversal arriba). Sin embargo la mayoría de los patrones se asemejaron a una áspera F, con algunas variaciones entre la distancia de las barras superior e inferior.

Los mapas de arriba muestran como la gente ve tres tipos diferentes de páginas:

* Un artículo en la sección “About Us” de un sitio corporativo (izquierda).
* Una página de producto en un sitio de e-commerce (centro).
* Una página con resultados de un motor de búsqueda (derecha)

Si centramos la atención en las áreas rojas *las más vistas* los tres heatmaps presentan el patrón de la F. Por supuesto con algunas diferencias. Este patrón de la F, más que tener una forma definida, se muestra más como una forma áspera.

Implicaciones del patrón F

Para Nielsen, las implicaciones del patrón F, son muy claras y muestran la importancia de seguir las pautas para escribir para el web en lugar de tomar contenido para impresos:

* Los usuarios no leerán tu texto a fondo y palabra por palabra. Es raro que lean exhaustivamente, salvo en casos muy particulares. Si, definitivamente alguien leerá más, pero la mayoría no lo hará.

* Los dos primeros párrafos deben contener la información más importante. Hay cierta esperanza de que los usuarios lean este material, aunque leerán más del primer párrafo que el segundo.

* Comienza con subtítulos, párrafos y balazos con información y palabras que conduzcan a los usuarios a explorar abajo del lado izquierdo del contenido, en la parte final de la base de la F. Hay que considerar que los usuarios leerán la tercera palabra en una línea mucho menos que las dos primeras.

En fin, supongo que estos resultados obtenidos por Nielsen, podrán ser de alguna utilidad cuando pensemos dónde y como poner información relevante.


Comparte este artículo en Viadeo

Categorías: Usabilidad

.

10 Comentarios en este post

  1. Juwe Says:

    Este tema ayudará a complementar mi tesina. Gracias por el dato Vuarnet.

    Saludos.

  2. stan Says:

    interesante, por cierto, quise imprimir el articulo y aparece el blog completo en vez de solamente mandar imprimir el articulo, no tendras alguna solucion para eso :(

  3. stan Says:

    interesante, por cierto, quise imprimir el articulo y aparece el blog completo en vez de solamente mandar imprimir el articulo, no tendras alguna solucion para eso :(

  4. Fabrizio Says:

    Creo que tal vez se deba a la educacion de los lectores, normalmente aparece el título del articulo en letras grandes y de gran impacto (primera linea horizontal) luego el nombre del autor en letras más pequeñas (Segunda línea horizontal) y la linea vertical es el vistazo a ver qué tiempo invetitremos en leer el texto.

  5. boca del pozo Says:

    de verdad no tenia idea de que asi es como mis visitantes leen la pagina, soy hincha de Emelec y la mayoria de los lectores visitan solo el homepage y no el foro, ahora gracias a este mapa les pondre en una zona visible los botones para que lean tambien el foro, gracias de verdad por compartir esta info y sigan adelante con tan excelente website

  6. MaN Says:

    Mas o menos tenia una idea de como se leia en las webs, donde trabajo, desarrollo un CRM, ya me decian mas o menos como tenia que ir el contenido. Pero un no habia visto ningún estudio parecido. Lo que está claro es que abajo a la derecha no lee ni dios, habrá que poner ahi las cosas importantes para comprobar si la gente está atenta, jeje.

    Saludos!!

  7. kTzAR Says:

    Estaría genial ver el eyetracking de una persona árabe (recordemos, de derecha a izquierda) en una página con sentido occidental.

  8. Héctor Muñoz Huerta Says:

    Muy interesante, y un buen argumento para desmenuzar la información… no sólo en la web, también en los impresos.

    Yo creo que un texto también es mas legible mientras más logra interesar al lector en abordarlo.

  9. mmadrigal Says:

    Gracias a tí, por escribirlo. ;D.

  10. ALVARO Says:

    QUIERO SABER COMO ASER Q MI HTML Sandbox SE EXTIENDA DE ANCHURA EN MI SPACES.COM ESCRIBANME A MI MSN ALVARO_88_69@HOTMAIL.COM GRACIAS POR LEERLO CHAO::::

2 Trackbacks para este Post

  1. meneame.net Says:

    Cómo se lee el contenido en el Web

    Los últimos resultados de eyetracking, ¿qué recorrido sigue el ojo humano al leer/revisar una página web?

  2. Egoblogs Says:

    Patron de lectura de contenidos web

    El ultimo Alertbox de Jacob Nielsen explica cual es el patron de lectura de contenidos web de los usuarios mediante un experimento de seguimiento ocular. Este es el heatmap en cuestion, que se asemeja a la letra F:

    Los usuarios primero leyeron en un m…

Escribe un comentario



Advertise Here

SITIOS DE INTERÉS

Foro de diseo grfico
Advertise Here Infranetworking
Sponsors
Breves
  • Retro, temáticos, artísticos y más. 25 diferentes temas que puedes usar para tu web. [LINK]

  • 60 diferentes tutoriales y recursos que te guiarán en la creación de logos. [LINK]

  • Desde hace algún tiempo está a nuestra disposición una nueva herramienta de Google: “Buzz”, si quieres añadir tu time line o dar a tus lectores la opción de poner en su buzz tu entrada, esta es una buena lista de plugins que puedes usar. [LINK]

  • Si tienes twitter, facebook, cuenta de youtube, digg, LinkedIn, Stumbleupon, y otras redes sociales, seguramente leer este artículo te vendrá bien para mantenerlas organizadas y actualizadas. [LINK]

  • Una serie de trabajos que, a través de Photoshop, crean esta imágen urbana que es el Graffiti. [LINK]

  • El portal Mobile Business Briefing’s realizó un compilado con las mejores notas sobre tecnología que publicaron en el 2009. Algunas muy sonadas y otras curiosidades de la red. [LINK]

  • Porque todo mundo quiere ganar algo de dinero con su blog, 10 formas de hacerlo de manera sencilla desde tu blog con WordPress. [LINK]

Stuff

¿Dondé estoy?

Isopixel: Por una cultura del diseño. De México, D. F. para el mundo y desde Septiembre del 2001 acercando a los internautas hispanos lo que marca referencia en diseño, herramientas y recursos, aplicaciones web, ilustraciones y logotipos, usabilidad y tendencias audiovisuales.

Conoce nuestra Red Isopixel One.

Recomendamos