Diseño, Tutoriales | 1 de agosto de 2018

5 Tips para diseñar la primera impresión de un sitio web

Cuando hablo de la primera impresión me refiero a aquello que el visitante de tu sitio web ve inmediatamente al cargarlo, sin la necesidad de desplazarse hacia abajo.

En ingles se le suele llamar a esto Above The Fold o Antes Del Pliegue.

¿Y por qué este nombre? Te preguntarás.

Esto viene desde mucho antes de la internet y se originó en el diseño de periódicos. Los diarios habitualmente se ponían en una pila y se doblaban a la mitad por una cuestión de espacio. De este modo los diseñadores y periodistas tenían la misión de capturar la atención de los lectores y convencerles de comprar el periódico solo con la información de la mitad superior de la portada. La información que estaba sobre el pliegue.

En nuestro caso, como diseñadores web, el pliegue se ha transformado en scroll, por lo tanto el trabajo está en diseñar el homepage de nuestros sitios web, de tal modo que lo que se ve antes del desplazamiento, sea suficiente para permitir al visitante:

  1. Saber si está en el sitio correcto
  2. Decidir si seguirá navegando en el sitio o retirarse de él

En el fondo lo que queremos es que las personas correctas se queden en el sitio y aquellas que no son parte del publico objetivo se retiren.

Para conseguir esto lo que debemos evitar es presentar una imagen poco clara o confusa sobre el sitio web, ya que eso dejará a los visitantes dudosos y probablemente decidan no quedarse.

Entonces la pregunta es ¿Qué podemos hacer desde el punto de vista del diseño para proyectar una buena impresión tan pronto como cargue el sitio?

Aquí tienes 5 tips que te pueden servir:

1. Presenta una propuesta de valor

Básicamente debes decirle al visitante de forma directa y concisa qué es lo que el sitio web tiene para ofrecerle.

Si miramos el sitio de invision, una plataforma que permite a diseñadores crear prototipos y compartirlos, veremos que dice ”Diseña mejor, más rápido y en conjunto”.

Este es un excelente ejemplo de cómo, en pocas palabras puedes decirle a tu visitante “estamos aquí para ayudarte a conseguir X objetivo”.

2. Identifica a la persona a quien te diriges

Lo ideal es que cuando un visitante llegue al sitio pueda discernir de inmediato si este sitio es para él o ella o no.

Si miramos el sitio de slack veremos que dice “Donde tu trabajo fluye.”. Es un poco vago, pero suficientemente potente para captar tu atención y decirte que ofrecen ayudarte a que tu trabajo sea más fluido.

Si lo sumamos al párrafo que sigue a ese título y la imagen destacada veremos que explican muy claramente a qué tipo de profesionales apuntan y que su principal factor diferenciador es la confianza.

Entonces si trabajas en equipo, necesitas comunicarte y das valor a la confianza, estás en el sitio correcto, si no eres libre de retirarte.

3. Muestra el estilo de la marca sin miedo

Hay marcas transgresoras, marcas conservadoras, marcas elegantes, etcétera, etcétera.

Por lo general el estilo y personalidad de una marca no se expresan de modo verbal, sino más bien a través del lenguaje del diseño y las imágenes.

Usa el diseño que rodea y complementa el mensaje principal para expresar el estilo de la marca.

Si miramos el sitio de Wom, una empresa de telefonía móvil, veremos que en términos de contenido básicamente dicen que tienen planes convenientes, pero por los colores y el diseño, entendemos que nos hablan de un modo amigable y juvenil.

Mientras que si miramos a Entel, veremos que el contenido es más o menos similar, pero el diseño nos dice que es una marca un poco más tradicional, formal y no tan emocional.

4. Jerarquiza y enfócate en una sola idea

No quieras poner toda la página antes del scroll, vas a terminar dando la impresión de estar desesperado y querer decir todo al mismo tiempo.

Has conocido a esas personas que hablan super rápido, no hacen pausas, te dicen cinco cosas a la vez y te hace sentir incómodo por no poder llevarle el ritmo, así se siente cuando quieres que todo el diseño esté antes del scroll.

Escoge un producto, una idea, una propuesta de valor y enfócate en ella. Ya tendrás tiempo para cambiarla en el futuro si no te funciona bien.

Sony, con todos sus productos, elige destacar solo uno.

5. Define un paso siguiente

Supongamos que la persona ideal llegó al sitio, vio tu propuesta de valor y se interesó, además le gustó el estilo de la marca… ¿Ahora qué?

Es importante que le digas a esa persona qué es lo que esperas que haga a continuación.

Invítale a registrarse, a suscribirte, a ver tu producto destacado, a cotizar, a contratarte, a ver tu portafolio o lo que sea que quieras que haga y hazlo tan fácil como sea posible.

Lo que menos quieres es que el visitante ideal llegue al sitio y se vaya porque no supo qué hacer a continuación.

Asana deja muy claro que quiere que hagas click en «Comenzar».

Y bueno, espero que estos tips te ayuden a diseñar mejores paginas de inicio, con un contenido antes del scroll bien estructurado, que permita conectar de mejor manera con aquellos que forman parte de tu público objetivo.

¿Tienes algún tip adicional que te gustaría agregar a la lista? Déjalo en un comentario debajo de este video.

Te mando un abrazo y no vemos en la próxima.
@FranciscoAMK