Cómo lucen los sitios web a través de los ojos de los lectores

Fernando Maciá

Escrito por Fernando Maciá

La tecnología eyetracking estudia cómo se ve un sitio Web.¿Es efectivo el diseño de la página de inicio? ¿Están los avisos publicitarios ubicados donde puedan ser vistos por la audiencia? son algunas de las preguntas que responden este estudio

Los sitios web de noticias han estado con nosotros por cerca de una década, y los editores y diseñadores aún luchan con muchas preguntas no respondidas: ¿Es efectivo el diseño de la página de inicio? ¿Qué efecto tienen los ‘blurbs’ (párrafo que sigue al título en la página de inicio) comparados con los titulares? ¿Cuándo es apropiado utilizar recursos multimedia? ¿Están los avisos publicitarios ubicados donde puedan ser vistos por la audiencia?

La investigación del Eyetrack III presentada por el Poynter Institute, el Estlow Center for Journalism & New Media y la firma Eyetools podría ayudar a responder estas y más preguntas. Una investigación de ‘seguimiento’ o ‘rastreo’ de ojo (traducción libre de ‘eyetracking’) no suministrará LA respuesta a esas preguntas. Pero combinados con otras medidas ya usadas por los administradores de los sitios web de noticias -pruebas de usabilidad, sesiones de grupo (‘focus group’), análisis de registros (log analysis)-, los hallazgos de Eyetrack III podrían suministrar alguna guía para mejorar dichos sitios.

En el Eyetrack III observamos 46 personas por una hora mientras sus ojos seguían sitios web noticiosos creados específicamente para las pruebas. No eran sitios Web del mundo real, sin embargo los artículos que seleccionamos eran historias reales con fotografías reales (con la excepción de los cables internacionales que presentaban las noticias de última hora en vivo, la mayoría de los artículos eran reales, pero los seleccionamos de forma tal que incluso si eran un poco viejos los sujetos de prueba podrían disfrutar leyéndolos).

En este artículo suministraremos un vistazo a los que observamos. Usted puede navegar en los hallazgos y observaciones detalladas del Eyetrack III en este sitio -use la navegación superior e izquierda de esta página- en cualquier momento. Si usted no sabe qué es el ‘seguimiento’ o ‘rastreo’ de ojo (‘eyetracking’), oriéntese leyendo las preguntas y respuestas frecuentes del Eyetrack III.

Además, un rápido comentario sobre lo que es y no es este estudio: es un estudio preeliminar con 46 personas, realizado en San Francisco. No es una exploración exhaustiva que podamos extrapolar a una población más grande. Es una mezcla de ‘hallazgos’ basados en variables controladas, y ‘observaciones’ en las cuales no se realizó un control exhaustivo de las pruebas. Los investigadores ampliaron temas sin profundizar -cubriendo mucho terreno en términos de diseño de sitios web y factores multimedia-. Esperamos que el ‘Eyetrack III’ no sea visto como el fin en sí mismo, sino como el comienzo de una conversación que beneficiará a la industria noticiosa.

En el núcleo: el diseño de la página de inicio

Mientras evaluaron los movimientos de ojo de nuestros participantes a través de varios diseños de páginas de inicio noticiosas, los investigadores del ‘Eyetrack III’ notaron un patrón común: los ojos primero se fijaban con más frecuencia en la parte superior izquierda de la página, luego se quedaban en esa área antes de ir de izquierda a derecha. Sólo después de leer con atención la porción superior de la página por algún tiempo hicieron que sus ojos exploraran más abajo.Dependiendo del diseño de la página, claro, este patrón puede variar.

La imagen superior es una representación simplista del patrón más común de movimiento de ojo que notamos a través de múltiples diseños de páginas de inicio.

Ahora también consideremos otra observación del Eyetrack: los titulares dominantes atraen la atención con más frecuencia cuando se ingresa a la página -especialmente cuando están en la parte superior izquierda, y con más frecuencia (pero no siempre) cuando están en la parte superior derecha. Las fotografías, contrario a lo que podría esperarse (y contrario a los hallazgos de la investigación de rastreo o seguimiento de ojo de periódicos impresos de 1990), no son típicamente el punto de entrada a la página de inicio. El texto domina las pantallas de PC -tanto en orden en que es visto como en el tiempo gastado en él-.

Una rápida revisión de 25 sitios noticiosos grandes, revela que 20 de ellos ubican la imagen dominante de la página de inicio en la parte superior izquierda (la mayoría de los sitios tienen un diseño de página consistente día a día; no varían con frecuencia los diseños, como lo harían los periódicos impresos).

Observamos que en las páginas de inicio noticiosas, los instintos de los lectores los llevan a mirar primero la bandera/logo y los titulares principales en la parte superior izquierda. La gráfica inferior muestra las zonas de importancia que formulamos de los datos del Eyetrack. Aunque cada sitio es diferente, usted podría mirar en su propio sitio y ver qué contenido tiene en cuáles zonas.

¿Desea que la gente lea, no escanee? Considere la tipografía pequeña

Los investigadores del Eyetrack III descubrieron algo importante cuando evaluaron los titulares y el tamaño de la tipografía en las páginas de inicio: tipografías más pequeñas motivan el comportamiento de visión enfocada (esto es, leer las palabras), mientras que las tipografías más grandes promueven el escaneo. En general, nuestras pruebas encontraron que la gente gasta más tiempo enfocada en la tipografía pequeña que en la grande. Tipografía más grande resultó en más escaneo de la página -menos palabras en general sobre las cuales enfocarse- mientras la gente buscaba alrededor palabras o frases que capturaran su atención.

Este fue especialmente el caso cuando miramos el tamaño de los titulares en las páginas de inicio. Los titulares más largos animan el escaneo más que los pequeños.

(Nota: No estamos sugiriendo que se apresure a reducir el tamaño de la fuente sobre la pantalla. Primero debería asegurarse de que la gente pueda leer el tamaño de la fuente que usted usa).

El comportamiento de la gente fue particularmente interesante cuando se usaban titulares y ‘blurbs’ (el párrafo que le sigue al título) en las páginas de inicio. Los participantes en las pruebas del Eyetrack III tendían a ver tanto el titular como el ‘blurb’ cuando el primero estaba en negrita y en el mismo tamaño que el segundo, y ambos en el mismo renglón.

Con el titular más largo que el ‘blurb’ y en una línea separada, la gente tendía a ver los titulares y saltar los ‘blurbs’; escaneaban los titulares a través de la página más que el grupo que miraba los titulares más pequeños.

Los investigadores creen que es el contraste en el tamaño de la tipografía lo que da cuenta de este comportamiento, así como el tamaño de la tipografía mismo. Cuando el titular es más grande que el texto de su respectivo ‘blurb’, puede ser percibido como elemento más importante en el bloque titular-blurb -así que la gente parece decidir que ver el titular es suficiente y salta el ‘blurb’-.

Subrayar los titulares desanimó a los participantes en las pruebas a leer los ‘blurbs’ en la página de inicio

Esto puede estar relacionado con un fenómeno que notamos a través de las pruebas: las rupturas visuales -como una línea o regla- desaniman a la gente a mirar los ítems más allá de la ruptura, como un ‘blurb’ (esto también afecta la publicidad, a lo que nos referiremos más adelante).

Cuando miramos los sitios noticiosos, encontramos que la vasta mayoría de ellos (22 de 25) usan ‘blurbs’ para acompañar los titulares en sus páginas de inicio. Son raros los que usan solo titulares: CNN.com, NYPost.com y ProJo.com. En términos del tamaño del titular, observamos una división equilibrada entre quienes usan un tamaño de tipografía más grande y quienes usan uno más pequeño.

Encontramos que 12 de los 22 sitios noticiosos que usan ‘blurbs’ en sus páginas de inicio ponen líneas bajo sus titulares.

La vista parcial de los titulares y los ‘blurbs’ es más común

Encontramos que cuando la gente mira los ‘blurbs’ bajo los titulares en las páginas de inicio noticiosas, con frecuencia mira solo el tercio izquierdo de ellos. En otras palabras, la mayoría de gente mira solo el primer par de palabras -y solo sigue leyendo si es animada por ellas-.

Con una lista de titulares en una página de inicio, podemos ver dónde miró la gente y, de nuevo, lo más frecuente es el lado izquierdo de los titulares.

Las personas típicamente escanean hacia abajo una lista de titulares, y con frecuencia no los ven completamente. Si las primeras palabras las animan, tienen la tendencia a continuar. En promedio, un titular tiene menos de un segundo de la atención de los visitantes.

Para los titulares -especialmente los más largos- parecería que el primer par de palabras necesitaran ser verdaderas cautivadoras de la atención si usted desea captar los ojos.

Lo mismo vale para los ‘blurbs’ -quizás incluso más-. Nuestros hallazgos acerca de los ‘blurbs’ sugieren que no solo deberían conservarse cortos, sino que el primer par de palabras necesita capturar la atención del visitante.

En los 25 sitios de noticias que revisamos hay una considerable variedad de ‘blurbs’. La longitud promedio del ‘blurb’ varía de un mínimo de 10 palabras a un máximo de 25, con la mayoría de los sitios alrededor de 17.

¿Qué crea ‘puntos calientes’?

En el Eyetrack III, probamos varios diseños de página de inicio, observando a dónde miraba la gente en ella. Como usted podría esperar, las partes más bajas de la página -especialmente, las áreas donde tiene que hacer desplazamiento vertical para ver- reciben modesta observación. Pero eso no significa que usted no pueda conseguir que la gente mire el contenido que está abajo al hacer desplazamiento vertical de la página.

En un par de nuestras páginas de inicio probadas, encontramos ‘puntos calientes’ para algunas historias. Quizás porque nuestras pruebas fueron hechas en San Francisco, surgieron temas de investigación como el de una historia sobre el sitio ‘Craig’s List’ (una comunidad online local popular desde su concepción, en 1995). El titular para esa historia tenía un excesivo número de fijaciones de ojo comparado con el contenido que la rodeaba, aunque estaba por debajo de la primera pantalla visible de la página. Observamos un similarmente alto número de fijaciones de ojo en un titular del fabricante de ropa FCUK, que estaba ubicado muy abajo en la página con una larga lista de titulares y ‘blurbs’.

Creemos que esto significa buenas noticias para aquellos sitios con páginas de inicio que se extienden más allá de la pantalla visible inicial. El Eyetrack encontró que la gente típicamente mira más allá de la primera pantalla. Lo que ocurre, sin embargo, es que sus ojos típicamente escanean las porciones más bajas de la página buscando algo que capture su atención. Sus ojos pueden fijarse en un titular interesante o palabra que se destaque, pero no en otro contenido. De nuevo, esto señala la necesidad de escribir titulares atractivos.

¿Dónde está la navegación?

Mientras probábamos varios diseños de páginas de inicio, variamos la ubicación de un elemento de navegación: arriba (bajo la bandera -flag- o logo), columna izquierda y columna derecha.

La navegación ubicada en la parte superior de la página de inicio se desempeñó mejor -esto es, fue vista por el mayor porcentaje de sujetos de prueba y mirada por la más larga duración-. En un sondeo de los 25 sitios noticiosos más importantes, encontramos que 11 usaban navegación en la posición superior. Los otros 14 usaban navegación en la izquierda. Siete de los 25 sitios sondeados usaban elementos de navegación a la izquierda y parte superior. Ninguno de los 25 sitios que sondeamos usaba navegación al lado derecho. No es común, pero usted puede encontrar navegación derecha en el mundo de los sitios noticiosos.

Podría sorprenderlo saber que en nuestras pruebas observamos mejor uso (más fijaciones de ojo y miradas de más larga duración) con navegación en la columna derecha que con la izquierda. Aunque en esto podría haber jugado el factor novedad -la gente no está acostumbrada a ver navegación al lado derecho- podría indicar que no hay razón para no colocar la navegación en esta posición de la página y usar la columna izquierda para contenido editorial o avisos publicitarios.

¿Qué dice la investigación sobre el diseño del artículo, el estilo de escritura?

Los resultados de Eyetrack III sugieren varias características de la escritura y diseño de un artículo que pueden afectar el comportamiento de la mirada de los lectores.

Por ejemplo, tomemos la longitud promedio del párrafo. La mayoría de sitios noticiosos publican artículos con párrafos de longitud media -entre 40 y 50 palabras, o dos o tres frases-. En un sondeo de los 25 sitios principales, sin embargo, encontramos siete que rutinariamente editaban los artículos para hacer más cortos los párrafos -con frecuencia solo una frase por párrafo-.

Los párrafos más cortos se desempeñaron mejor que los más largos en la investigación del Eyetrack III. Nuestros datos revelaron que historias con párrafos cortos recibían el doble de atención visual que aquellos con párrafos más largos. El formato de párrafos largos parece desestimular su observación.

La mayoría de las páginas de artículos de los sitios web noticiosos presentaban historias en una simple columna de texto, pero un puñado de sitios -como IHT.com y TheHerald.co.uk- imitan el diseño del periódico y presentaban artículos en dos o tres columnas adyacentes. ¿Es esto tan legible como el formato tradicional (para web) de una columna?

Los resultados del Eyetrack III mostraron que el formato estándar de una columna se desempeñaba mejor en términos del número de fijaciones de ojo -en otras palabras, la gente miraba más-. Sin embargo, hay que tener en cuenta que los hábitos podrían variar estos resultados. Ya que la mayoría de gente está acostumbrada a los artículos web a una columna, la sorpresa de ver texto en tres columnas podría haber afectado su comportamiento visual.

¿Qué sobre las fotos en las páginas de los artículos? Lo podría sorprender que nuestros sujetos de prueba típicamente miraron los elementos de texto antes que sus ojos aterrizaran en una foto acompañante, justo como en las páginas de inicio. Como notamos antes, el comportamiento inverso (primero las fotos) fue observado en los estudios previos de seguimiento de ojo para medios impresos.

Finalmente, existe el uso de descripciones resumidas -sumarios- (titulares extendidos de la longitud de un párrafo) que llevan a los artículos. Estas fueron populares con nuestros participantes. Cuando nuestros sujetos de prueba encontraron una historia con un párrafo de introducción en negrita, el 95 de ellos lo miraron todo o parte de él.

Cuando la gente vio el párrafo introductorio entre 5 y 10 segundos -como fue normalmente el caso- su comportamiento promedio de lectura del resto del artículo fue aproximadamente el mismo que cuando veían artículos sin un párrafo de sumario. El párrafo de sumario no hacía la diferencia en términos de cuánto era consumida la historia.

Solo el 20 por ciento de los sitios web noticiosos líderes usan regularmente párrafos de sumario con sus artículos.

Publicidad

El Eyetrack III evaluó una variedad de ubicaciones de publicidad y formatos a través de varias páginas de inicio y páginas a nivel de artículo.

Lo primero que nosotros notamos es que la gente con frecuencia ignora los avisos, pero que la ubicación importa. Cuando de verdad se quedan mirando un aviso es solo durante 0,5 o 1,5 segundos. La buena ubicación y el formato correcto pueden mejorar estas cifras.

Encontramos que los avisos en las porciones superior e izquierda de una página de inicio recibían más fijaciones de ojo. Los avisos al lado derecho no lo hacían tan bien, y los avisos en la parte inferior de la página eran vistos, típicamente, por solo un pequeño porcentaje de la gente.

La estrecha proximidad al contenido editorial popular realmente ayudó a que los avisos fueran vistos. Notamos que cuando un aviso era separado de los temas editoriales, ya fuera por un espacio o una línea, el aviso recibía menos fijaciones de ojo que cuando no había tal barrera. A los avisos cercanos a los titulares de la parte superior de la página les fue bien. Un banner publicitario sobre la bandera (flag) de la página de inicio no atrajo tantas fijaciones de ojo como un aviso que estaba debajo de ella y sobre el contenido editorial.

Los avisos de texto fueron vistos más atentamente, de todos los tipos que evaluamos. En nuestras páginas de prueba, los avisos de texto consiguieron un tiempo de duración promedio de ojo de cerca de 7 segundos; el mejor aviso desplegado (traducción libre de display add, originalmente conocidos como ‘banners’) logró solo 1,6 segundos, en promedio.

El tamaño importa. Avisos más grandes tuvieron una mejor oportunidad de ser vistos. Los pequeños avisos en el lado derecho de las páginas de inicio típicamente fueron vistos solo por solo un tercio de nuestros sujetos de prueba; el resto nunca posó sus ojos sobre ellos. En las páginas interiores de los artículos, los avisos de ‘media página’ (‘half-page’ ads) fueron los más intensamente vistos por nuestros sujetos. Sin embargo, ellos fueron vistos solo un 38 por ciento del tiempo; la mayoría de la gente nunca los miró. Los avisos de artículos que más se vieron fueron aquellos insertados en el texto. Los avisos ‘Skyscraper’ (verticales delgados en la columna izquierda o derecha) estuvieron en tercer lugar.

Revisando los 25 sitios noticiosos líderes, descubrimos que hay una preponderancia de pequeños ‘banners’ en las páginas de inicio. Y es excesivamente común encontrar avisos en la columna derecha de las páginas de inicio noticiosas. Alrededor de la mitad de los 25 sitos que revisamos avisos insertan avisos en el texto del artículo.

En línea, las imágenes más grandes retienen más el ojo que las pequeñas

Las páginas de inicio noticiosas típicamente usan plantillas, muchas de los cuales emplean un tamaño predeterminado para la imagen principal. Sin embargo, el valor de usar un diseño manejado por plantillas puede (y debería) ser debatido, lo que aprendimos acerca del tamaño de las fotos en el Eyetrack III puede ser útil para aquellos que dudan en qué tamaño de espacio dejar para las imágenes.

Aunque aprendimos que la mayoría de los participantes no miraban las imágenes primero, también observamos que ellas recibían un significativo número de fijaciones de ojo. Aprendimos que a mayor tamaño de la imagen, la gente se tomaba más tiempo para mirarla.

Una de nuestras páginas de prueba tenía una estampilla con una foto judicial que fue vista por el 10 por ciento de nuestros participantes. Compare eso con una foto de tamaño promedio (cerca de 230 píxeles de ancho y de alto) que atrajo la atención de aproximadamente un 70 por ciento.

Encontramos que aquellas imágenes que están casi a 210 por 230 píxeles eran vistas por más de la mitad de nuestros sujetos de prueba. Nuestra investigación también demostró que caras claras y limpias en imágenes atraen más fijaciones de ojo sobre las páginas de inicio.

Las páginas de artículos interiores parecen tener el mismo comportamiento. De nuevo, encontramos que entre más grande la imagen, más usuarios fueron arrastrados hacia ella.

En la revisión de los 25 sitios web noticiosos, encontramos que alrededor del 20 por ciento rutinariamente usa pequeñas imágenes en su páginas de inicio. Cuatro de cinco sitios rutinariamente ubican su foto principal de la página de inicio arriba a la izquierda.

Y he aquí un interesante bocado de la investigación: notamos que la gente con frecuencia da clic en las fotos -aunque en nuestras páginas de prueba no los llevó a ningún lado (y, realmente, dar clic sobre una foto no produce ningún resultado en muchos sitios de noticias reales)-.

Textos para hechos; gráficas multimedia para los conceptos no familiares

En total, observamos que era más probable que los participantes recordaran correctamente hechos, nombres y lugares cuando eran presentados con la información en formato texto. Sin embargo, la información conceptual, no familiar, era más exactamente recordada cuando los participantes la recibían en un formato gráfico multimedia.

Entonces, ¿qué significa esto? Aunque en términos generales observamos un pequeño, aunque no significativo estadísticamente, incremento en la recordación de historias de texto, deberíamos notar que la mayoría de preguntas de recordación fueron sobre hechos, nombres y lugares. La información de historias sobre procesos o procedimientos parecía ser comprendida bien cuando era presentada usando animación y texto. Probamos una animación paso a paso para apoyar esta idea.

También observamos que la mayoría de los participantes iba a solo dos formas de medios a la vez. Por ejemplo, en una de nuestras situaciones de prueba se presentó con audio, fotografías, y subtítulos escritos. Observamos que ellos dirigieron su atención al audio y las imágenes. La información importante en los pie de fotos no fue leída por muchos.

La conclusión es que los mejores periodistas que trabajan en ambientes multimedia saben cómo hacer buenas elecciones sobre la presentación de la información. Como se demuestra en esta investigación, alguna información es mejor desplegada por el uso de escritura buena y descriptiva. Otra información es mejor explicada gráficamente.

Guillermo Franco fue el traducotr del artículo del ingles al español. Es editor de eltiempo.com, de la Casa Editorial El Tiempo, en Colombia.

Elizabeth Carr de EyeTools, suministró asistencia en la investigación para este artículo.

Fernando Maciá
Autor: Fernando Maciá
Fundador y director general de Human Level y SEO experto. Director del Máster en SEO SEM Profesional de KSchool y autor de libros sobre posicionamiento, marketing digital y redes sociales en Anaya Multimedia.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *