Cómo hacer que sus diseños sean escaneables (y por qué debería hacerlo)

How Users Read Online de Jacob Nielsen cumple 25 años esta semana, y una mirada a la investigación de seguimiento ocular le dirá que sus observaciones clave siguen siendo relevantes hoy en día.

En pocas palabras, los usuarios no leen una página web; lo escanean en busca de palabras y oraciones sueltas.

Un patrón típico que se muestra en los informes de seguimiento ocular es que los usuarios vean rápidamente una página desplazándose hacia abajo. Luego presione el botón Atrás y aumente su tasa de rebote, o desplácese hacia arriba y vuelva a participar en el contenido.

Incluso cuando el contenido, el volumen y la calidad cumplen con todos los requisitos del usuario y este decide quedarse en tu sitio, todavía no lee; escanean; un escaneo un poco más profundo, pero sigue siendo un escaneo.

Como resultado, es importante diseñar sitios web para que sean fáciles de rastrear, ya sea un rastreo de una fracción de segundo para decidir si su página vale el tiempo de un lector, o un segundo o tercer escaneo.

Borrar el Propósito de la Página Inmediatamente

Cada página debe tener un objetivo principal. En la mayoría de los casos, este objetivo se materializa en una CTA (llamada a la acción).

La buena noticia es que si su SEO (optimización de motores de búsqueda) va según lo planeado, su objetivo (es decir, vender algo) y el objetivo de su usuario (es decir, comprar algo) coincidirán. Al aclarar el propósito de la página, puede mostrarle al usuario que sus objetivos son los mismos.

Puedes experimentar si ya eres una empresa conocida y el usuario sabe qué esperar. Pero si es nuevo en el mercado o tiene un perfil más bajo, debe ajustarse a los patrones de diseño establecidos. Esto significa que SaaS debe verse como SaaS, la tienda debe verse como una tienda y el blog debe verse como un blog.

Incluir tu CTA en la parte superior de la página, lo que, en el contexto de la web, significa que el usuario no tiene que interactuar para verlo. Esto facilita la navegación del usuario y le comunica claramente lo que está ofreciendo.

La página de inicio de la Webflow Conf 2022 del próximo mes aclara el contenido de la página con un claro llamado a la acción en la parte superior de la página.

Usar jerarquía visual

El efecto von Restorff dice que cuanto más se destaca algo, más probable es que lo notemos y lo recordemos.

Las jerarquías visuales son excelentes para guiar al usuario a través del contenido. HTML tiene niveles de encabezado h1-h7, aunque solo h1-h4 en realidad se usan ampliamente, lo que le brinda múltiples niveles de encabezados que pueden ser rastreados por diferentes lectores escaneando a diferentes velocidades.

Por ejemplo, sabemos que los subtítulos no son efectivos si el usuario está leyendo diligentemente la página de arriba a abajo, pero son excelentes para captar la atención de los lectores fugitivos.

Amnistía utiliza una jerarquía muy simple, el único cambio en el subtítulo es el aumento de peso. Pero esto es suficiente para captar la atención del usuario.

También puedes crear jerarquías visuales con otras formas de contraste; el peso y el color se utilizan a menudo además del tamaño. Para la accesibilidad y el diseño inclusivo, tiene sentido combinar indicadores visuales al crear una jerarquía; por ejemplo, los encabezados suelen ser más grandes, más audaces y de colores.

Usar espacio negativo

Imagina a una persona de pie en medio de una multitud. Pongamos que llevan un jersey de rayas rojas y blancas y un gorro rojo y blanco con pompones, bastante peculiar. Pero si hay cientos de otros personajes a su alrededor, pueden ser difíciles de detectar.

Ahora imagina a la misma persona, vestida igual, parada sola. ¿Cuánto tardarás en notarlos? Incluso sin un traje a rayas, no es tan difícil.

Los elementos individuales no solo son más fáciles de detectar, sino también llamativos porque el espacio negativo (a veces llamado espacio en blanco) a su alrededor crea contraste.

Cuando se utiliza el espacio negativo, la clave es dar a los elementos suficiente espacio para respirar y llamar la atención sin darles demasiado espacio para que no se separen del resto del contenido.

En su sitio, Moheim utiliza espacios en blanco para resaltar los elementos de la interfaz de usuario al agrupar contenido relacionado.

Usar patrones F

Los usuarios escanean la página utilizando el patrón F o el patrón Z.

Debido a que los usuarios ven su página de manera predecible, podemos usar diseños que estén en línea con esta tendencia.

Los diseñadores conocen los patrones F y Z desde hace algún tiempo y, dado que han estado en uso durante tanto tiempo, pueden cumplirse por sí mismos y los usuarios están capacitados para escanear la página de esta manera. Sin embargo, ambos patrones son similares a cómo los ojos se mueven de una línea a otra en los sistemas de escritura horizontales.

Sea cual sea el motivo, al colocar contenido clave a lo largo de estas rutas, aumenta las posibilidades de captar la atención del usuario.

Kamil Bartsentevich utiliza un diseño hermoso y natural que también sigue la plantilla F clásica.

Incluir imágenes con caras

Las imágenes son una excelente manera de transmitir los valores de la marca y hacer que su sitio se vea atractivo. Pero cuando se trata de captar la atención de un usuario que ve tu diseño, las mejores imágenes incluyen rostros.

Por ejemplo, un testimonio con una imagen de un cliente atraerá más atención que un testimonio de solo texto.

La conferencia Awwwards utiliza una computadora animada con una cara para llamar la atención. Y grandes imágenes de oradores haciendo contacto visual.

Es casi seguro que esto se deba al condicionamiento social; vemos una cara e interactuamos con ella para entender si representa una amenaza o no. La mayoría de nosotros recurrimos naturalmente a las expresiones emocionales para comprender las situaciones, y la distinción entre una persona real y una imagen aún no ha penetrado en nuestra programación mental.

No necesitas usar fotos. Las ilustraciones están bien. Lo principal es que la imagen debe tener una cara. Por eso las ilustraciones de los personajes funcionan tan bien.

Copiar diseño de impresión

El diseño impreso es varios siglos más antiguo que la web, y muchas aplicaciones impresas, desde periódicos hasta anuncios, han desarrollado elementos de diseño para captar la atención de los lectores que escanean el diseño.

Destacan los subtítulos, las listas, las comillas y las comillas. Los párrafos introductorios en letra grande o incluso en cursiva llevan a los usuarios al texto. Los párrafos más cortos animan a los usuarios a seguir leyendo.

Las reglas horizontales utilizadas para delimitar secciones de texto actúan como un descanso para los ojos que viajan a través del contenido con impulso. Esta es una buena manera de atrapar a un lector de escaneo que está perdiendo interés.

Puede usar una regla horizontal o dividir el diseño con barras de colores que separan secciones de contenido.

Omono usa barras horizontales para resaltar diferentes secciones de contenido.

Masa, no peso

A menudo discutimos que los elementos de diseño tienen peso; font-weight – peso del trazo.

Pero es más útil pensar que los elementos de diseño tienen masa; la masa crea gravedad, atrayendo la mirada del usuario hacia ella.

El truco consiste en diseñar elementos con suficiente masa para captar la atención del usuario en un escaneo rápido sin obligar al usuario a cambiar la forma en que interactúa con su contenido.

Imagen destacada a través de Pexels.

Previous post Los 9 mejores programas de afiliados para principiantes (cualquier nicho)
Next post Cómo ocultar Me gusta en Instagram: una guía

Deja una respuesta