miércoles, 21 de octubre de 2015

Patrones de lectura para una mejor experiencia de usuario

Este artículo es una contribución de Luiggi Santa María CEO de Staff Creativa - Agencia Digital en Lima, Perú. Luiggi posee más de 10 años de experiencia desarrollando soluciones web y móviles para empresas de diferentes rubros. Consulta sus servicios en el sitio web de Staff Creativa o síguelos en FacebookTwitterGoogle+ o Youtube.


El diseño de páginas web es tanto una ciencia como un arte. Aparte de considerar la composición visual, un diseñador web necesita tomar en cuenta el color, composición, tamaño y elementos que deberían 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 antaño, los diseñadores web necesitan producir algo que sea estéticamente 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 envía la señal al cerebro de que se ha experimentado algo. No importa cuán obvio o sutil sea un movimiento, el ojo capta esos matices hasta un cierto punto de interés.

Estos puntos de interés dependen de las personas, pero existen tendencias definidas que las personas siguen y estas incluyen la forma cómo leen las páginas web.

Dos tipos de patrones de lectura

El patrón F

Este patrón puede ser encontrado en páginas web cargadas de textos, como páginas web de noticias. Este patrón requiere que los usuarios lean verticalmente, escaneando la página en la izquierda hacia abajo para buscar puntos de interés.

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

Un estudio realizado por la consultora estadounidense de UX y UI, que incluyó a 232 usuarios, observó cómo funciona el patrón F y su impacto en el diseño de páginas web. Este estudio demostró que no leen todo necesariamente, a excepción de los dos primeros párrafos. Por lo tanto, estos párrafos deben contener un anzuelo: palabras clave.

Para hacer que el patrón F funcione a tu favor, utiliza palabras clave atractivas en tus subencabezados e inicios de párrafos. También se recomienda usar viñetas.

Este patrón funciona mejor cuando quieres añadir llamadas a la acción o anuncios sin cargar tu contenido.


El patrón Z

Este patrón se usa en páginas web que no están centradas en el contenido. En este patrón, 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 patrón Z funciona para cualquier tipo de página web porque tiene todos los elementos necesarios, como branding y llamadas a la acción. Sin embargo, funciona mejor en una página web sencilla donde la llamada a la acción es el centro de atención.

Si tratas de usar este patrón en una página web cargada de texto, no cumplirá su función. Por otro lado, puede generar una buena organización en una página web con un diseño sencillo. Cuando usas un patrón Z, toma nota de los siguientes puntos de interés y elementos que necesitas incluir.
  • Punto 1: Tu diseño de logo.
  • Punto 2: Una colorida llamada a la acción secundaria.
  • Centro de página: Un slider destacado con imágenes para distinguir la parte superior de la inferior de la página. También servirá para ayudar a los usuarios a navegar en el patrón Z.
  • Punto 3: Íconos que preparen a tus lectores para la llamada a la acción final.
  • Punto 4: Tú llamada a la acción.

Conclusión

Al comprender cómo funciona la vista, podrás predecir cómo tus usuarios verán tu contenido y, así, crearás un diseño UI que mejora la experiencia de usuario.
Autor

Artículo cortesía de Luiggi Santa María CEO de Staff Creativa - Agencia Digital en Lima, Perú

Luiggi tiene más de 10 años de experiencia desarrollando soluciones web y móviles para empresas de diferentes rubros. Consulta sus servicios en el sitio web de Staff Creativa o síguelos en FacebookTwitterGoogle+ o Youtube.

¿Y qué opinas tú?

¿Estas involucrado en el desarrollo o gestión de una web de ventas en línea o comercio electrónico?, ¿Que técnicas sueles aplicar para incrementar tus ventas en línea?. Te invitamos a dejarnos comentarios en este post (puedes firmar tu comentario con la dirección de tu web si así lo deseas).

¿Te ha gustado este artículo?, entonces suscríbete a nuestra lista de correos?


Suscríbete a la lista de correo electrónico:


Vía FeedBurner, se abrirá una nueva ventana

También puedes seguirnos vía Twitter, Facebook o Linkedin:

  

Otros artículos

5 consejos de desarrollo web para incrementar tus ventas en línea

4 consejos básicos para el diseño de una página web móvil

> Por qué tu aplicación para móviles necesita una página web

> Desarrollo de software para móviles en 5 fases

> 9 Habilidades que Necesitan Aprender los Desarrolladores para Móviles

No hay comentarios :

Publicar un comentario

Pmoinformatica.com," La Oficina de Proyectos de Informática ", es un participante en el Programa de Servicios de Amazon Associates LLC, un programa de publicidad de afiliación diseñado para proporcionar un medio para que sitios web puedan ganar honorarios por la publicidad y enlaces a amazon.com y amazon.es.