Consejos de diseño web para facilitar la lectura rápida de tu página

Vivimos en una era muy dinámica. No tenemos tiempo para nada, ni siquiera para leer nuestros blogs preferidos. ¿Crees que exageramos? Tómate un segundo para pensar de qué manera lees la información en Internet, especialmente en las redes sociales. O en cómo leerás este artículo ( sí, sabemos que lo leerás por encima).

Teniendo en cuenta este fenómeno de lectura rápida en internet, es lógico plantearse cómo crear una página web para lograr que los lectores disminuyan el ritmo y absorban todos los contenidos de tu web. Para entender cómo lograr este objetivo, salgamos de la red por un momento para analizar una brillante campaña publicitaria que está haciendo que los peatones detengan la marcha.

En algunas ciudades de los Estados Unidos aparecieron carteles gigantes con llamativos colores que anunciaban el lanzamiento de una barra nutritiva llamada RXBAR. Diseñados por Wieden + Kennedy, estos anuncios son de todo menos sutiles. Cada póster presentaba una foto del producto con un texto de tamaño exagerado que describía el anuncio en sí; bien con la palabra “COMIDA” o con un texto que versaba ”Un póster de RXBAR apenas perceptible en Times Square". Lo que llama la atención de esta campaña es que desafía la forma en que estamos acostumbrados a consumir el contenido comercial (normalmente miramos las vallas publicitarias de pasada), usando trucos publicitarios a los que no estamos acostumbrados. La combinación de legibilidad y novedad hizo que las personas se detuvieran y prestaran más atención.

Volviendo al mundo virtual, ese el el efecto que querrás causar en los visitantes de tu página web. Pero, ¿cómo lograr que tu audiencia absorba realmente el mensaje que intentas comunicar a través de tu web? Transmitir tus ideas requiere el uso de una gran variedad de técnicas de diseño que guíen a esos “indefensos” visitantes a través de tu página y señalándoles los puntos de referencia más importantes. En este artículo te explicaremos qué es exactamente la lectura rápida o por encima, cómo afecta la experiencia del usuario en tu página y cómo puedes usar el diseño web para ayudar a los lectores a retener la información incluso cuando están haciendo una lectura por encima del contenido.

¿Qué es la lectura rápida?

Años atrás, cuando la red estaba en pañales (ahí por 1997), Jakob Nielsen, del Grupo Nielsen Norman, llegó a una conclusión fundamental sobre cómo la lectura en Internet: “Nadie lee”. Un 79% de los usuarios que encuestó afirmabas sólo echar un vistazo de pasada al contenido digital (sin detenerse realmente a leerlo).

Internet ha cambiado mucho desde entonces.Pero la forma en que leemos el material digital no ha cambiado apenas. En realidad, hemos perdido aún más la capacidad de concentrarnos y leer el contenido palabra por palabra. En vez de eso, adoptamos una práctica de lectura llamada "skimming" o “lectura rápida” (técnica de lectura donde sólo se da una ojeada al texto).

Quizás este concepto te recuerde tus días de escuela cuando tratabas de pasar las páginas del libro que te obligaban a leer. Lo que ocurre con la información digital no es tan diferente a aquello. La lectura rápida se refiere a la forma que utilizamos para desplazarnos rápidamente por el contenido de una página web, buscando palabras clave específicas y enfocándonos solo en los elementos que más llaman nuestra atención.

Se ha investigado mucho acerca de por qué esta forma de navegar es tan frecuente entre los usuarios de Internet. La profesora Maryanne Wolf, tiene la teoría de que la gran cantidad de tiempo que pasamos online (casi 6 horas al día para el adulto promedio - 8 horas en México) está alterando la neurología de nuestros cerebros. La especialista argumenta que nos estamos alejando cada vez más de la experiencia de la lectura de material impreso, que requiere más tiempo para procesar. En lo que se refiere a Internet, la investigadora asegura que nos hemos acostumbrado a los fragmentos de contenido y a un diseño visual avanzado que crea jerarquías organizativas para ahorrarle ese trabajo a nuestro cerebro.

Esto realmente es un desafío para todo el que tenga una página web y quiera que su mensaje llegue al público. Por suerte, comprendemos cada vez mejor el modo en que las personas interactúan con el contenido web. Por ejemplo, sabemos que inconscientemente empleamos ciertas estrategias de lectura, como buscar palabras clave y avanzar rápidamente cuando perdemos la concentración en medio de un mar de texto. Por otra parte, los estudios de seguimiento ocular demuestran que los visitantes de una página web tienden a leer en forma de Z (para páginas web basados en contenido visual) y con un patrón de F (para páginas web basadas ​​en texto). A continuación te mostraremos cómo aplicar cada una de estas técnicas en tu diseño web para que puedas logres que más personas lean tu contenido.

Diseño del patrón Z

Este es un estilo especialmente apropiado para páginas con muchos componentes visuales y también para las llamadas Landing Pages (o páginas de aterrizaje), que tienen poco texto pero sí gran cantidad de elementos como botones, formularios y cuadros explicativos. Si este es tu caso, sigue leyendo para descubrir cómo puedes transformar todo tu contenido en una gran Z.

La idea es que,alguien que entra en tu página pueda trazar visualmente una letra Z empezando desde la esquina superior izquierda y terminando en la esquina inferior derecha. Pero, antes crear este patrón, primero debes determinar qué información tendrás que incluir. Para tomar esa decisión, ponte en el lugar de tus visitantes en el momento en que llegan a tu página.

• ¿A qué partes de tu página quieres que se dirijan los ojos de los usuarios?

• De los elementos que acaba de enumerar, ¿cuál es el orden de importancia? ¿Cuál debería aparecer primero, segundo, tercero y así sucesivamente?

• ¿Cuál es la acción final a la que los estás guiando en la página? ¿Qué quieres que hagan cuando lleguen al final de la Z? Comprar un producto, registrarse, etc. Sea lo que sea, anota tu objetivo concreto.

Una vez que hayas respondido estas tres preguntas, puedes comenzar a poner en marcha el diseño Z.

Parte superior del patrón Z: la primera línea horizontal se aplica justo donde se encuentra el encabezado de tu página web. Ya que los ojos de los lectores gravitarán primero de forma natural hacia la esquina izquierda, ese es un lugar perfecto para plasmar allí tu gran logotipo. ¿Todavía no tienes uno? El Creador de Logos de Wix está aquí para ayudarte con eso. Solo responde algunas preguntas sobre tu negocio y su apariencia general y recibirás un logotipo profesional y personalizado en segundos que podrás descargar y usar en todas tus piezas de marketing. Esta es una gran forma de dar la bienvenida inmediata a los visitantes y reforzar la identidad de tu marca.

Con tu logotipo puesto allí como insignia, puedes moverte hacia la derecha. Piensa en qué más es clave para que los visitantes sepan de inmediato de qué se trata tu emprendimiento. ¿Tu eslogan? ¿Enlaces a tus redes sociales donde tu presencia es mayor? ¿Una breve declaración de principios?

Ese panel superior podría ser también el espacio donde poner tu menú. No importa si tienes un formato clásico de varias páginas o una página web de desplazamiento largo, la clave es mantener esta información esencial al alcance de los visitantes para simplificarles la experiencia de usuario. Eso sí, con una página de inicio más corta e independiente quizás puedas saltarte el tema del menú. De otro modo, esta acción es crucial para una mejor navegación.

En general, los usuarios esperan encontrar opciones de navegación accesibles en la parte superior de la página. Si entraron a tu página con una intención determinada, como comprar alguna de tus geniales fotografías, probablemente se van a desplazar de forma rápida desde la parte superior para buscar un enlace a tu galería o tienda online. Arma un inventario de todo el contenido de tu página web y luego divídelo en varias categorías como testimonios, una página “Quiénes somos”, una sección de preguntas frecuentes, una tienda para mostrar tus productos, una página con detalles de contacto y cualquier otra sección que creas relevante para tu negocio.

Parte diagonal del patrón Z: esta línea en ángulo, que viaja a través de la página desde la esquina superior derecha hasta la esquina inferior izquierda, funciona como, digamos, un tobogán en la plaza. La misma tiene como misión transportar rápidamente a los usuarios desde donde terminaron de poner el ojo (en el panel superior) hasta la parte en la que deseas que retomen su desplazamiento (la parte inferior de la página). De esta manera, todo lo que pongas en ese espacio tiene que llamar la atención del lector. Sólo así tus usuarios mantendrán el interés el tiempo suficiente para completar la acción que identificaste antes como tu objetivo final cuando lleguen al final de la Z.

Hay una manera segura de conseguir esto: incorpora un elemento visual en tu página, como un buen fondo de video, una galería interactiva o elementos de animación llamativos. A su manera, cualquiera de estas piezas te permite mostrar -en vez de decir- de qué la va tu negocio. Si tienes una tienda de cafés, un fondo interactivo que muestra los granos recién molidos transmite mucho sobre quién eres y qué haces. Al margen de la pieza que elijas para esta sección diagonal, el objetivo aquí es mover al espectador a lo largo de la página.

Parte inferior del patrón Z: comienza la cuenta regresiva, el avión está a punto de despegar con rumbo a tu elemento de acción. Este último panel horizontal del patrón es crucial. Cualquier información que coloques aquí debe tener la doble misión de responder a cualquier pregunta restante que pueda tener un visitante antes de estar dispuesto a confiar en ti y tu marca (y construir fidelidad). Aquí es donde aumenta -o disminuye- el entusiasmo sobre lo que ofreces. Algunas ideas para esta etapa es la inclusión de pequeños recuadros con texto breves que enumeren los beneficios de tu producto, citas extraídas de testimonios positivos o unas pocas frases sobre la historia de su negocio.

Si ya has completado el recorrido de acuerdo con las directivas del patrón Z con información convincente e interesante, te felicitamos. Es probable que los usuarios hallan llegado al final de los textos que les presentaste. Ahora es el momento de aplicar tu llamada a la acción (CTA) y que la misma sea efectiva. Esta CTA puede tener muchas formas: les puede pedir a tus visitantes que se suscriban a tu lista de correo, que compren tus productos, descarguen algún informe, reserven un turno y más. Lo que plantees allí tiene que ser coherente con los objetivos de tu negocio.

Sea cual fuere la CTA que elijas, es muy importante la manera que escojas para hacer la llamada a la acción. Para ello, usa efectos de diseño, como un color intenso que contraste con el resto de la página, un botón o una fuente de acento para resaltar tu CTA. Si estás estancado sobre cómo abordar esta tarea de la forma más eficaz, echa un vistazo a esta completa guía de CTA que convierten a los clientes. Y también a estas ideas para la mejor convivencia de fuentes y un desglose de cómo aplicar los principios de diseño a tu página web (especialmente la segunda opción). Has trabajado mucho para llegar hasta aquí. Echar todo a perder ahora sería un crimen, ¿verdad?

A pesar de haber llegado al final de la cuestión, no te obligues a detenerte solamente en el patrón Z. Si tienes en mente múltiples secciones para tu página -o una serie de CTA que quieres publicar, simplemente reinicie el patrón al final de la primera letra. Para mantener al visitante concentrado durante todo el proceso, fíjate cómo pueden ayudarte los efectos de desplazamiento de paralaje para dar vida a tu página y hacer que los usuarios se emocionen y sigan avanzando.

Diseño del patrón F

Si ya tienes un blog activo o algunas de tus páginas giran en torno a muchos y variados textos, este es el patrón ideal para ti. Imagina que alguien le asignó la letra F a tu página. Las áreas que se incluyen a lo largo de sus líneas son los lugares donde deberás insertar toda la información y las frases más importantes. Aquí es crucial convertir en lectores más comprometidos a los que se desplazan de forma compulsiva. Para ello, tienes que llamar su atención dondequiera que sus ojos se muevan de forma natural. Te mostramos algunos principios para tener en cuenta cuando trabajes la estructuración de tu página:

Líneas horizontales del patrón F: aquí es clave crear un título convincente y encabezados para explicar clara y rápidamente lo tu audiencia puede esperar encontrar en la página y por qué vale la pena quedarse. La parte superior de la F es en general donde seguro esperarías encontrar tu título e imagen destacada. La segunda línea cae en el rango de lo que sería un subtítulo, pero este, en realidad vendrá más adelante en el texto. Además de despertar el interés de los lectores, la creación de títulos H1 y H3 (encabezados) puede impulsar y mucho el SEO de tu página web porque tus textos serán más fáciles de encontrar a través del índice de búsqueda de Google.

Este tipo de estructura le da más importancia a las dos primeras áreas de texto de la página. Y esto se debe a que se ubican justo en el rango en el que un visitante aún está desplazándose de izquierda a derecha.

Asegúrate de enganchar a tu audiencia antes de que llegue al final del párrafo. Con títulos atractivos para tus artículos o algo intrigante que llame la atención.

¿Recuerdas cómo usaste cada parte del patrón Z para que un visitante viajara hasta llegar a la llamada a la acción al final de la página? Bien, aquí, los dos primeros planos horizontales de la F son usados para conseguir un objetivo parecido: convencer al lector de que esta es una página o un artículo que quieren -y deben- seguir leyendo hasta el final.

Línea vertical del patrón F: después de desplazarse a través de la sección horizontal superior de tu página, el visitante va a gravitar de forma vertical hacia abajo y se mantendrá en el lado izquierdo. Tu trabajo aquí es completar ese espacio con características interesantes para resaltar lo que creas conveniente. Esta acción animará a los lectores a disminuir la veloz marcha de exploración y seguir leyendo hasta el final de la oración.

Aquí te pasamos algunas estrategias que puedes usar para que eso ocurra:

• Poner en primer plano las palabras clave en párrafos, encabezados y puntos de enumeración: no permitas que los usuarios lleguen hasta el final de la oración para averiguar lo que quieres decirles. Un ejemplo: "Recetas veganas para probar en casa" es una frase que podría verse afectada con la siguiente; "Prueba estas recetas en casa para tener una buena cocina vegana". La segunda opción apuesta a un nivel muy alto y es improbable que el usuario llegue al final de la frase para saber qué le estás queriendo decir. No es un riesgo que te recomendamos tomar. Incluso temerarios como nosotros no lo haríamos jamás.

• Formatear elementos: empapa tu contenido con elementos de estilo como citas, imágenes destacadas o listas numeradas. Estas variables alivian la lectura de la página y además ofrecen puntos de referencia fáciles de ser hallados por los ojos que recién aterrizan en la página. Otro paso simple que puedes añadir es usar números -si son relevantes- en lugar de escribir el número con letras. El contraste con las letras del alfabeto servirá como otra forma de dividir el texto y llamar la atención.

Principios generales para recordar en el parón F: nuestra paciencia y atención para leer online se reduce a oraciones cortas. Para entender por qué, solo piensa en el límite de caracteres que Twitter permite o cómo te sientes cuando alguien publica una nota en Facebook. Ten en cuenta este principio cuando escribas y mantén accesible la información (que sea simple de comprender). Nunca es bueno hacer que tus usuarios trabajen demás para tratar de entender lo que quieres decir o que retrocedan para entender el mensaje.

De todos modos, comprendemos que esto no siempre es tan sencillo. Pero no por eso debes amedrentarte. No siempre tienes que disminuir la calidad de tus ideas para vender. Sólo tienes que crear estrategias alternativas para construir tu mensaje sin tener que abrumar a tus ansiosos visitantes. Si tienes una idea más compleja, vincula la información con enlaces a otros artículos o publicaciones que hayas escrito antes o acompaña el párrafo con imágenes o infografías para ayudar a aumentar la comprensión. De veras, tus visitantes te regalarán cientos de emojis de aprobación.

Bien, ya has configurado el contenido de tu página en forma de Z o F. Ahora, lo que debes hacer es utilizar alguna herramienta para probar la legibilidad y evaluar la claridad de tu contenido escrito. Luego pide opinión sobre tu página web a amigos, familiares o colegas de confianza. Si es posible, pídeles que anoten qué elementos llaman su atención de forma inmediata y compara esa lista con tu plan original para ver si coincide con lo que tú querías resaltar con el diseño de tu web. Finalmente, ajusta la página según te parezca -en base a las conclusiones- y busca la alineación perfecta.

Convierte a los usuarios en lectores comprometidos. ¡Aplica estos patrones de diseño a tu página web!

Publicado por Equipo Wix