Cómo diseñar contenido legible para la web

Diseñar contenido es más que simplemente hacer que algo se vea genial. Tienes que crear un diseño que la gente realmente lea, y ayudarles a interactuar con el contenido. A veces, es más fácil decirlo que hacerlo.

La gente generalmente tiene un período de atención corto, y no debe esperar que digieran cada palabra en la pantalla. Pero puede usar ciertas técnicas y elementos de diseño para ayudar a los usuarios a leer lo más posible.

Establecer jerarquía con tamaño y escala

El diseño legible comienza con múltiples niveles de texto. Establecer una jerarquía de pensamientos ayudará a los usuarios a moverse a través del texto.

Los tamaños más grandes son una señal visual que les dice a los usuarios que lean primero cierta cosa porque es lo más importante. Los ojos de la mayoría de los usuarios se moverán naturalmente de elementos más grandes a los más pequeños, creando un flujo visual agradable.

Los ojos de la mayoría de los usuarios se moverán naturalmente de elementos más grandes a los más pequeños, creando un flujo visual agradable.

Aproveche al máximo las etiquetas H2, H3 y H4 en el diseño y cree una escala coherente para los subtítulos que se pueden usar para dividir grandes bloques de texto.

La creación de una escala con ubicaciones y tamaños de texto coherentes hace que sea aún más fácil para los usuarios navegar por el texto. Esto es cierto tanto para el contenido de formato largo como para el contenido corto en las páginas de inicio, como Narrativa, arriba.

Observe cómo la página de inicio tiene cuatro niveles distintos de texto en el área del héroe. Hay un gran titular en color, con un fragmento corto arriba. Luego, el contenido del cuerpo tiene un estilo con una línea en negrita adicional para enfatizar. La mayoría de los usuarios verán las palabras en este orden: título, texto en negrita, texto del cuerpo, fragmento de título debido a los pesos, el tamaño y la escala de las letras.

Elegir tipos de letra legibles

Si bien un tipo de letra divertido o un script elaborado puede ser muy divertido de diseñar, no siempre es la mejor opción para el usuario final.

Los tipos de letra legibles son los más propensos a leer.

Este es el por qué:

  • Los tipos de letra altamente legibles son más fáciles de escanear.
  • Las formas de letras son fáciles de ver en diferentes tamaños.
  • Las letras no se ejecutan juntas o crean espacios o formas incómodas.
  • Estos tipos de letra son de uso común y fácil para los usuarios. (Incluso los tipos de letra que son similares, pero no de la misma familia, son familiares para la mayoría de los usuarios).

Las características de un tipo de letra legible incluyen:

  • Peso estándar - no demasiado grueso o delgado
  • Altura x común - no demasiado corta o alta
  • Más formas de letras redondeadas - para que la? O? tiene una forma circular
  • Ligero o sin inclinación
  • Cartas que no están muy cerca o muy separadas.

Al observar esas características, puede ver que casi cualquier categoría de tipo probablemente incluye una opción legible. No tienes que apegarte únicamente a serifs o sans serifs; una mezcla de otros tipos de letra es realmente buena. Solo asegúrese de probar nuestras palabras que planea usar en ese tipo de letra para asegurarse de que sean fáciles de leer.

Contenido de la pila para las personas que escanean

El apilamiento de contenido vuelve a la jerarquía. Pero con un elemento adicional: piense en elementos de texto y no de texto al apilar contenido.

Si el usuario ve un bloque de texto y una imagen en la pantalla, la imagen es casi siempre lo primero que llama su atención, por lo que es importante apilar elementos de una manera que los ayude a moverse a través de ellos desde la imagen hasta texto.

Alzheimers New Zealand, arriba, utiliza el apilamiento para que los usuarios accedan al título principal. Observe cómo el texto se coloca en el centro de la imagen con tres personas. Tu ojo va a las caras primero, pero luego cae al círculo sutilmente animado con texto dentro. Luego, los ojos se mueven al bloque de texto más pequeño y secundario.

Y aquí está la cosa: todo esto sucedió tan rápidamente cuando vio la imagen por primera vez, que tal vez ni siquiera lo haya pensado. La mayoría de los usuarios escanean la pantalla completa de la misma manera cuando deciden si interactuar con el contenido o no.

Play Up Visuals

Realice visualizaciones visuales integrándolas con otros elementos para un diseño más envolvente.

¿Realmente quieres asegurarte de que los usuarios vean tu contenido? Integrar texto y elementos visuales de manera significativa. Cree una imagen de héroe que utilice una interesante combinación visual, inusual de colores o una combinación de animación y letras para que los usuarios se detengan.

El error que los diseñadores cometen a veces es separar cada elemento en su propia caja o espacio. Realice visualizaciones visuales integrándolas con otros elementos para un diseño más envolvente.

Los diseños de Octavo, arriba, tienen una página de inicio en la que no puedes evitar que te atraigan. Para empezar, hay una vaca de aspecto muy divertido en un fondo de colores brillantes. El texto es una parte muy importante de la imagen. (En realidad, toca los cuernos de la vaca en la parte superior). Esta combinación de imágenes y texto atrae a los usuarios al contenido, lo que los hace querer más.

Mantenga las líneas (y pensamientos) cortas

Al planificar el diseño, piensa en ráfagas cortas. Cada página o pantalla debe centrarse en un solo pensamiento y en bloques de texto simples y fáciles de leer.

Estructure y organice pensamientos para los usuarios de una manera que fomente la lectura:

  • Use párrafos de una a tres oraciones
  • Incorporar listas con viñetas
  • Usa subtítulos para dividir grandes bloques de texto.
  • Incluir enlaces para la interactividad.
  • Puntos clave resaltados o en negrita
  • Editar toda la copia para mayor claridad y brevedad.

Crear un punto focal

Cada diseño debe tener un punto focal. El punto focal es la parte del diseño que casi todos los usuarios verán primero. A menudo, es muy visual o presenta un marcado contraste con otros elementos en la pantalla.

El punto focal debe establecer de qué se trata el diseño y por qué los usuarios deberían preocuparse.

En el ejemplo anterior, Abingworth utiliza una mancha rosa brillante como punto focal. Llama la atención debido al color y la curiosidad (¿qué es?) Y porque contrasta con el espacio blanco y abierto en el otro lado de la pantalla.

El punto focal del diseño debe ser su mejor imagen, ilustración o animación y estar relacionado con los mensajes clave. El punto focal debe establecer de qué se trata el diseño y por qué los usuarios deberían preocuparse. Debido a que este es el primer lugar donde los usuarios buscarán, establece el tono de cómo (y si) interactuarán con el diseño.

Conclusión

Crear contenido que los usuarios realmente lean es más que solo texto en la pantalla. Es una combinación de elementos visuales y de escritura que atrae a los usuarios, les ayuda a vislumbrar de qué se trata el diseño y luego deciden seguir interactuando con él.

Si bien parece mucho, todo esto sucede en cuestión de milisegundos. Hay investigaciones que indican que la mayoría de los usuarios tienen la capacidad de atención de un pez dorado (8 segundos): aproveche al máximo ese tiempo con contenido fácil de leer.