El encabezado de un sitio web suele ser lo primero que ve un usuario. ¡Puede hacer o deshacer la experiencia del usuario, su marca y mucho más!
Para ayudar a retener a los usuarios y mantenerlos en movimiento a través del diseño, debe crear un encabezado de sitio web que cautive. Y no solo en la página de inicio. En cada página del diseño. (Recuerda, un número significativo de usuarios no va primero a tu página de inicio). Así es como lo haces.
1. Utilice una imagen impresionante
Una gran imagen siempre hace una primera impresión estelar. ¿Optas por una foto, un video, una animación o algún otro arte? elemento, cada encabezado debe llevar con imágenes que los usuarios querrán mirar.
La imagen del encabezado es más que una imagen bonita. Es la puerta de acceso a todo el contenido de esa página, y tal vez incluso contenido más profundo en el diseño.
Una imagen por sí sola es un gran punto de partida, pero hay que vincularla con otros elementos para aprovechar al máximo el contenido. Otros elementos que pueden aparecer en un encabezado incluyen:
- Texto o titular
- Logo o identificador de marca
- Botón o llamada a la acción
- Elementos de navegacion
- Buscar
Opte por imágenes nítidas, de alta resolución y que proporcionen mucho contraste para otros elementos como texto o botones. A la gente le encanta ver caras, así que considere mostrarles a las personas que usan o interactúan con su producto o servicio si es posible. ¿Quieres mostrar tu último proyecto de cartera? Utilice una plantilla de maqueta para hacerlo más interesante y atractivo.
2. Incorporar elementos de navegación.
No hay ninguna razón para pensar en el encabezado y la navegación como elementos separados; A menudo forman parte del mismo concepto visual. Ya sea que te guste una navegación de menú completo o algo que salga de un icono de hamburguesa, los elementos de navegación deben formar parte del plan de diseño del encabezado.
Y mientras piensa en el encabezado y la navegación, considere también un patrón de navegación pegajoso. Incluso si los usuarios se alejan del encabezado principal, que puede ser tan pequeño como una barra de navegación o tan grande como una pantalla completa, pueden desplazarse rápidamente por el diseño del sitio.
Los elementos de navegación en el encabezado harán algo más que usted no podría esperar. Debido a que estos son a menudo pequeños trozos de texto o iconos, puede ayudar a establecer una jerarquía dentro del encabezado, mostrando a los usuarios cómo interactuar con el diseño.
3. Crear mensajes diferenciados
No basta con poner una gran imagen en el encabezado. ¿Qué dice?
Considere cómo el mensaje del encabezado se comunica a los usuarios.
- ¿Les dice qué hacer o qué esperar del contenido de la página?
- ¿Todos los elementos comunican mensajes únicos y unificados que sean fáciles de entender?
- ¿Permite a los usuarios saber qué acción tomar en la página o dónde hacer clic a continuación?
Asegúrese de combinar varios elementos para crear un efecto general con un solo mensaje.
4. Trate de tipografía de gran tamaño
La tipografía de gran tamaño es una excelente manera de agregar énfasis a un encabezado. Incluso si las palabras son identificadores de ubicación simples, usar letras en negrita puede ayudar a atraer la atención hacia la parte superior de la pantalla antes de que el usuario comience a leer otra información.
Si bien las ubicaciones de tipografía pueden variar, intente mantener dos ubicaciones básicas para tipografía en el encabezado.
- Opción de página de inicio con más tipografía o letras más dramáticas o de diferente tipo que en otras páginas.
- Opción de todas las demás páginas con un marco de tipo simple que sea consistente en todas las páginas interiores.
5. Considera los patrones de lectura
La lectura en los sitios web tiende a seguir tres patrones diferentes de movimientos oculares, según una investigación realizada por Nielsen Norman Group. Y todos esos patrones de lectura luego se ajustan para dar cuenta de la tarea en la que se enfoca el usuario en el momento de la lectura, que en términos simples es una agrupación de partes relacionadas en el flujo visual.
Ambos estudios sobre cómo los usuarios miran y digieren el contenido son importantes porque pueden ayudarlo a comprender cómo y dónde colocar los elementos en el diseño y, en particular, en el encabezado.
Inicialmente, piensa en los patrones básicos:
- Patrón F: los usuarios leen en la parte superior, luego en la mitad de la página y, finalmente, verticalmente en el lado izquierdo en forma de F.
- Diagrama de Gutenberg: hay cuatro zonas activas para leer, comenzando con dos paradas horizontales en la parte superior de izquierda a derecha, luego de la parte superior derecha a la parte inferior izquierda y en la parte inferior. (Forma una forma z).
- Patrón Z: el ojo se mueve hacia adelante y hacia atrás de izquierda a derecha y hacia atrás desde la parte superior a la parte inferior del diseño, formando múltiples patrones z.
Coloque los elementos, especialmente los elementos clave, en las zonas más cálidas de los patrones de lectura comunes para la mayor probabilidad de interacción del usuario. Luego piense en dónde es más probable que el usuario mire a continuación: para una acción relacionada con el contenido recién digerido.
6. Incluir un elemento pulsable
¿Es su imagen de cabecera de sitio web interactiva? ¿Incluye elementos cliqueables (o intercambiables) para fomentar el compromiso del usuario?
Un encabezado puede ser la ubicación perfecta para un botón de llamada a la acción o una acción simple como un formulario de recopilación de direcciones de correo electrónico. No exagere con los elementos para hacer clic porque puede quitar el mensaje general, pero un elemento simple de una acción puede ser efectivo en esta área del diseño.
¿No está seguro de qué elemento debe incluir el encabezado? Considere una acción deseada que sea consistente en todo el diseño con un botón que siempre está disponible (como la navegación). Un botón de carrito de compras, acceso a la información de la cuenta o un botón de contacto con nosotros son excelentes opciones a considerar.
7. Usa capas simples
¿Cómo se juntan todos los elementos mencionados anteriormente (o grupos pequeños de ellos juntos) en el encabezado? El truco es la simple estratificación. El mejor encabezado, un encabezado que cautiva a los usuarios, parece simple. Sigue las reglas de la teoría del diseño y utiliza un elemento dominante para atraer a los usuarios y apoyar las técnicas de diseño para ayudarles a alcanzar objetivos viables.
Acodar objetos es una forma de lograr esto.
Las capas simples no solo lo ayudarán a crear espacios distintos para cada elemento, sino que también brindarán un enfoque visual para el usuario. Sabrán dónde comenzar con el diseño y qué elementos merecen su atención y qué elementos se pueden hojear.
No siempre sucede con éxito con un primer intento tampoco. Las revisiones y pruebas múltiples a menudo son necesarias para crear un grupo de elementos que trabajen juntos de manera efectiva y sorprendan a los usuarios en la parte superior de una página.
Conclusión
Si bien la creación de un encabezado de página de inicio es algo que a menudo se encuentra a la vanguardia del proceso de diseño, el trabajo en los encabezados de las páginas interiores a menudo se pierde en el proceso. El contenido en? Dentro? Las páginas pueden ser tan importantes como la página de inicio, ya que muchos usuarios llegarán al diseño de su sitio web gracias a la búsqueda, no escribiendo una URL y siguiendo los enlaces de navegación como lo prevé el equipo de diseño.
Piense en los dos tipos de encabezados de forma independiente y en conjunto para lograr una armonía de diseño, unidad y una imagen que cautive a los usuarios cuando llegan a la página.