Es hora de hablar sobre el diseño de la primera pantalla. La primera pantalla es el primer vistazo que un usuario ingresa a su sitio web. Es todo lo que está por encima del desplazamiento, ya sea que el usuario acceda a un sitio web desde un escritorio, tableta o dispositivo móvil.
La información que incluyes en esta? Primera pantalla? Es la clave para el éxito del sitio web. El diseño puede atraer y mantener a los usuarios haciendo clic, o forzarlos a navegar fuera de la página. ¿Qué debe estar en la pantalla antes de que los usuarios comiencen a desplazarse? Vamos a ver.
1. Crea una primera pantalla distinta
Comienza con una primera impresión. Su sitio web debe crear uno con impacto.
Vaya a lo grande con una imagen visual, un video o una ilustración, para atraer al público de inmediato. La imagen debe ser algo que la gente no pueda dejar de mirar. Y debe ser totalmente tuyo y diferente a cualquier otro sitio web.
Combine esas imágenes con unas pocas palabras clave para decirles a los usuarios por qué están allí y lo que su sitio tiene para ofrecer. (Esta es su mejor oportunidad de vender el beneficio de hacer clic en su sitio).
Esto es lo que une todo: la primera pantalla debe encajar con precisión en esa primera pantalla. El contenido se debe escalar de manera sensible al dispositivo para que la imagen completa y todas las copias asociadas sean claramente visibles sin un solo desplazamiento.
2. La navegación debe ser intuitiva
Atrás han quedado los días en los que la navegación debe ejecutar el alto de la página en una barra lateral o en la parte superior de la pantalla. Los estilos de navegación ocultos y emergentes se han vuelto tan populares (gracias en parte a los dispositivos móviles) que es aceptable para todos los diseños de sitios web.
Pero no escondas la navegación o hazla difícil de usar. Nos guste o no, el menú de navegación estilo hamburguesa se ha convertido en el uso más dominante para la navegación oculta. Los usuarios han aprendido a trabajar con él y pueden encontrar cosas en las páginas con facilidad.
Asegúrese de colocar su ícono apilado en una ubicación que sea fácil de encontrar (puede hacerlo más grande que un ícono típico) y asegúrese de que la navegación sea completamente funcional con ese clic. Lo anterior, hace un gran trabajo con un ícono de menú de hamburguesa prominente que se expande a una lista de opciones de menú en pantalla completa. Y lo mejor de todo, los usuarios no tienen que adivinar cómo usarlo.
3. Crear un punto focal
Cuando está trabajando en un solo lienzo, como la primera pantalla, es importante crear un solo foco o mensaje. Los usuarios han llegado a su sitio, intencionalmente o por casualidad, y necesitan saber de qué se trata.
Un solo concepto visual puede ayudar a los usuarios a crear esa idea de qué y quién eres. Esto se puede lograr con imágenes o texto de diferentes maneras.
Mientras que los estilos complejos pueden funcionar, comience por pensar simple. El minimalismo es una forma moderna y eficiente de ayudar a transmitir información.
4. Escribir Copia con Propósito
Piense en la primera pantalla como la portada de un libro, no en la primera página de una novela.
Debe incluir una copia suficiente para ayudar a los usuarios a participar. Un encabezado simple y un pequeño bloque de copia suelen ser suficientes para hacer esto. Aunque las palabras son pocas, este puede ser un proceso que requiere mucho trabajo. Escribir una copia clara y concisa puede ser un desafío.
Piense en los objetivos de su sitio como una guía. ¿Por qué hay usuarios aquí? ¿Qué quieres que hagan? Usa la copia para crear esa conexión y comienza a contar tu historia. Recuerde vender el beneficio de su sitio al usuario.
5. Da a los usuarios algo que hacer
Si bien los sitios web ofrecen distintas experiencias visuales, también deben proporcionar una razón para que los usuarios se queden. Tu primera pantalla debe dar a los usuarios algo que hacer.
Las acciones pueden incluir:
- Rellenar un formulario, como proporcionar una dirección de correo electrónico
- Jugando un juego
- Compartir en las redes sociales.
- Navegando a través de artículos para la venta
- Comentar o participar con el contenido.
- Ver una película o presentación de diapositivas
Su primera pantalla no solo debe incluir una de estas acciones, sino que también debe quedar perfectamente claro qué es la acción y qué debe hacer el usuario. El diseño debe atraerlos lo suficiente como para que se sientan obligados a hacerlo.
El sitio web de la película The Big Short, más arriba, ofrece a los usuarios muchas cosas que hacer. Los videoclips son suficientes para hacer que te interese la película, y hay un botón para ver el tráiler. ¿Interesado en esta historia real? Hay un botón para conocer a los expertos. ¿Ya lo has visto y quieres compartir tus pensamientos? Hay botones de redes sociales. Hay muchas formas de interactuar con el sitio desde el principio.
6. Hacer espacio para la marca
Un sitio web no va a hacer mucho bien si no sabes a quién pertenece. La primera pantalla debe incluir al menos un logotipo o conexión a la marca detrás del sitio.
Una marca o nombre de empresa crea legitimidad y credibilidad. Hace que el sitio parezca más "real". (Esto es especialmente importante para los sitios que incluyen cualquier tipo de transacciones financieras o personales, para que los usuarios sepan quién está obteniendo su información).
Las marcas más grandes pueden salirse con la marca más pequeña en sus primeras pantallas porque es probable que muchas personas ya las conozcan. (¿Quién sabe que no reconocería los arcos dorados que simbolizan a McDonald's?) Para marcas más pequeñas, mostrar claramente un logotipo y un estilo es importante para crear una identidad con la que los usuarios puedan asociarse y confiar.
7. Minimizar las distracciones
No le dé a los usuarios demasiado para mirar o tratar en esa primera pantalla. Debe ser simple, racionalizado y enfocado.
Si tiene mucho contenido, sepárelo en varias pantallas. (Esto puede promover la participación y evitar una estructura de sitios desordenados o desorganizados).
Melanie DaVeid hace un gran trabajo con una estética simple que te hace interesarte en su otro trabajo. Con simples toques de animación, color y letras hermosas, la primera pantalla crea una sensación, enfoque y curso de acción distintos para los usuarios.
Conclusión
Mientras que el pergamino vuelve a estar de moda, la forma en que lo diseñamos ha cambiado. Los mejores diseños de sitio utilizan un diseño sensible y funciones de desplazamiento (como el paralaje) para crear una experiencia basada en la pantalla para los usuarios.
Y la primera pantalla es la más importante. Asegúrese de crear una imagen visual interesante, legible y distinta para atraer a los usuarios a su sitio.