Patrones de lectura para una mejor experiencia de usuario.

Este artculo es una contribucin de Luiggi Santa Mara CEO de Staff Creativa - Agencia Digital
en Lima, Per. Luiggi posee ms de 10 aos de experiencia desarrollando soluciones web y
mviles para empresas de diferentes rubros. Consulta sus servicios en el sitio web de Staff
Creativa o sguelos en Facebook, Twitter, Google+ o Youtube.

El diseo de pginas web es tanto una ciencia como un arte. Aparte de considerar la composicin
visual, un diseador web necesita tomar en cuenta el color, composicin, tamao y los elementos
que deberan ser dejados de lado.

Existen dos tipos de patrones de lectura predominantes para aquellos que leemos de izquierda a
derecha. Ambos patrones son importantes porque, al igual que los grandes artistas de antao, los
diseadores web necesitan producir algo que sea estticamente cautivador y, al mismo tiempo, til.
Se deben lograr estos dos objetivos para crear una buena interfaz de usuario.

Cuando hablamos de interfaz de usuario, o UI, el sentido de la vista juega un papel importante
porque este enva la seal al cerebro de que se ha experimentado algo. No importa cun obvio o
sutil sea un movimiento, el ojo capta esos matices hasta un cierto punto de inters.

Estos puntos de inters dependen de las personas, pero existen tendencias definidas que las
personas siguen y estas incluyen la forma cmo leen las pginas web.

Dos tipos de patrones de lectura.

El patrn F.
Este patrn puede ser encontrado en pginas web cargadas de textos, como pginas web de
noticias. Este patrn requiere que los usuarios lean verticalmente, escaneando la pgina en la
izquierda hacia abajo para buscar puntos de inters.

Una vez que encuentran algo importante, empiezan a leer verticalmente, formando un patrn que
luce como la letra F.

Un estudio realizado por la consultora estadounidense de UX y UI, que incluy a 232 usuarios,
observ cmo funciona el patrn F y su impacto en el diseo de pginas web. Este estudio
demostr que no leen todo necesariamente, a excepcin de los dos primeros prrafos. Por lo tanto,
estos prrafos deben contener un anzuelo: palabras clave.

Para hacer que el patrn F funcione a tu favor, utiliza palabras clave atractivas en tus
subencabezados e inicios de prrafos. Tambin se recomienda usar vietas.

Este patrn funciona mejor cuando quieres aadir llamadas a la accin o anuncios sin cargar tu
contenido.

El patrn Z.
Este patrn se usa en pginas web que no estn centradas en el contenido. En este patrn, los
usuarios empiezan a leer desde la parte superior izquierda y la escanean horizontalmente hacia la
derecha. Luego, los ojos escanean desde la parte superior derecha hacia la inferior izquierda y
observan la parte inferior de izquierda a derecha.

El patrn Z funciona para cualquier tipo de pgina web porque tiene todos los elementos
necesarios, como branding y llamadas a la accin. Sin embargo, funciona mejor en una pgina
web sencilla donde la llamada a la accin es el centro de atencin.
Si tratas de usar este patrn en una pgina web cargada de texto, no cumplir su funcin. Por otro
lado, puede generar una buena organizacin en una pgina web con un diseo sencillo. Cuando
usas un patrn Z, toma nota de los siguientes puntos de inters y elementos que necesitas incluir.
Punto 1: Tu diseo de logo.
Punto 2: Una colorida llamada a la accin secundaria.
Centro de pgina: Un slider destacado con imgenes para distinguir la parte superior de
la inferior de la pgina. Tambin servir para ayudar a los usuarios a navegar en el patrn Z.
Punto 3: conos que preparen a tus lectores para la llamada a la accin final.
Punto 4: T llamada a la accin.

Conclusin
Al comprender cmo funciona la vista, podrs predecir cmo tus usuarios vern tu contenido y, as,
crears un diseo UI que mejora la experiencia de usuario.
Autor
Artculo cortesa de Luiggi Santa Mara CEO de Staff Creativa - Agencia Digital en Lima, Per

Luiggi tiene ms de 10 aos de experiencia desarrollando soluciones web y mviles para empresas
de diferentes rubros. Consulta sus servicios en el sitio web de Staff Creativa o sguelos
en Facebook, Twitter, Google+ o Youtube.
PATRONES DE LECTURA.

Eye track
Nov 17

Estudios han analizado cmo se comporta el ojo humano en una

pgina. El eye track es otro una herramienta fundamental en el diseo de proyectos web,
pues evala el recorrido que hace el ojo frente a la pantalla, generando un patrn de uso.

Utilizando un sensor de temperatura, las reas rojas sealan donde mayor tiempo se detiene
el ojo y en cul punto de la pantalla, mientras que las ms claras, donde menos tiempo le
dedica el usuario a la lectura.
Las investigaciones abarcan a un nmero significativo de personas, que permiten arrojar
resultados sobre patrones de lectura en internet. Los medios se han guiado de esos patrones
para organizar, jerarquizar sus contenidos.
 Los colores clidos indican mayor tiempo de lectura

Patrones de lectura. Se ha establecido que existe patrones de lectura tipo F, E o L sobre la

pantalla. El cuadrante superior izquierdo recibe mayor atencin, para luego desplazar la
mirada hacia la izquierda y abajo. Los usuarios tienden a hacer un barrido por la pantalla.
El primer estudio de este estilo fue realizado por del Poynter Institute, en 1990
(www.poynter.org). Arroj algunos resultados: los lectores de impresos entraron a travs de
imgenes, mientras que los usuarios habituales del sitio de internet (lectores en lnea)
entraron a travs de textos y titulares. Se estableci as unas diferencias segn los tipos de
lectores.
Los usuarios preferan en ese entonces las fotos que aparecen por separado en un link
exclusivo. Ello explicara el aumento de la galera de fotos separadas, sin interrupciones de
la narracin.

S se lee. En 2003 se hizo otro estudio y algunos de los resultados afirman que los usuarios
entran por el texto, por el titular, no por la foto como se pensaba hasta entonces. Los textos
de prrafos cortos se leen ms que los largos. Los usuarios van evolucionando en su
comportamiento en la medida en la que interactan con la web.
En 2007, los resultados indican que los lectores hacen escaneos rpidos porque son
impacientes, pero a la vez son ms metdicos cuando les interesa una historia, lo que rompe
otro mito: que el hbito de la lectura se ha perdido. La gente s lee y lo hace en internet,
entonces hay que evaluar cul es el estilo del medio para ver cmo se escribe: si corto o
largo. Las fotografas juegan un papel importante, sobre todo las de gran tamao.

Puntos de entrada. Mario Garca, asesor del Poynter Institute recomienda a partir del Eye
track 2007: ofrecer en el diseo herramientas de navegacin que le permitan al usuario
elegir, no imponer, y que las lecturas secundarias sean en cajas separadas, textos
destacados, puntos adicionales de entrada como hipervnculos.
Garca, con cuatro dcadas como periodista visual, da algunos importantes datos para
establecer el centro de impacto visual con fotos de gran tamao:
https://youtu.be/w1vrUXS_DDY
Cmo es la lectura en pantalla?.
Markus Steen | 26/06/2013
Escuchar

Cada vez es ms comn utilizar nuevos medios para leer noticias. En

papel y en pantalla no se lee igual y es fundamental saber qu aspectos
diferencian a ambos medios para poder optimizar los contenidos de
forma adecuada a cada soporte. En internet, la extensin y jerarquizacin
de los contenidos es clave. Como indican los profesores Ramn
Salaverria y Francisco Sancho (Diseo periodstico en internet, 2006), el
lector de nuevos medios quiere que el profesional de la informacin le
ayude a discernir lo esencial de lo secundario y hasta de lo desechable.
Patrn en F.
Uno de los trabajos ms relevantes sobre la manera en que leen los
lectores es el realizado por Jakob Nielsen. El experto en usabilidad
seala en sus estudios de eyetracking que la mirada dibuja un patrn de
lectura que tiene forma de F cuando se lee en internet. Es decir, no se lee
linealmente, sino que primero se hace una lectura horizontal en la parte
superior de la pantalla; a continuacin, la mirada efecta un segundo
movimiento horizontal, ms corto, en la zona inmediatamente inferior y,
por ltimo, se visualiza la parte izquierda de la pgina.
Este patrn de lectura en F permite concluir que, delante de la pantalla, se
escanea el texto en lugar de leerlo con detenimiento palabra por palabra.
Trasladado a una noticia, cuando se carga una pgina web en la pantalla
la mirada se dirige al titular y a la parte izquierda del cuerpo de la
informacin: si las primeras palabras de cada lnea de texto no resultan
importantes o interesantes se contina explorando el resto del texto
informativo hasta dar con algo ms interesante.

Punto de entrada.
El texto es el punto de entrada de la pgina web para los lectores. El
bloque visual es lo que primero atrae la mirada del usuario, y no las
fotografas, como ocurre en el caso de los medios impresos.
La informacin textual tiene tambin un componente navegacional muy
importante. De acuerdo con los estudios de The Poynter Institute, los
mens de navegacin y los sumarios sirven de gua y orientan la lectura.
Esto es lo que los autores del estudio denominan dispositivos
direccionales, a partir de los cuales el usuario toma la decisin de ir de
un bloque informativo a otro.

Profundidad.
Sobre la extensin de los textos hay diferentes opiniones al respecto.
Expertos como Mario R. Garca sostienen que, si el texto es bueno, los
lectores lo devorarn prrafo tras prrafo hasta el final. Otros, como
recoge Guillermo Franco en Escribir para la web, sugieren limitar el
nmero de palabras por pantallazo. Es el caso de Crawford Kilian,
autor de Writing for the web, que propone segmentos de informacin
que no tengan ms de 100 palabras. Jakob Nielsen,
cuyas investigaciones sealan que los lectores solo leen el 20 % del
contenido expuesto en la pantalla, propone aplicar una regla: no escribir
ms del 50 % de lo que se hubiera escrito en la versin en papel.
Al margen de clculos, parece claro que los lectores tienen un tiempo
limitado para resolver sus necesidades informativas de forma eficaz. La
presentacin de la pgina debe permitir una navegacin fluida en la que
el lector pueda localizar la informacin de inters que est buscando en
el menor tiempo posible. Titulares, palabras clave, ladillos y cualquier
otro bloque de informacin que resuma el contenido del texto facilitan
este cometido.