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

También te podría interesar:

WordPress no es la panacea

La semana pasada te conté acerca de tres proyectos poco convencionales que he creado con WordPress. Con ese antecedente cualquiera podría pensar que WordPress es tan genial que sirve para cualquier cosa, pero no es así… o tal vez sí. Según explicó Matt Mullenweg, en su revisión anual del 2015, WordPress nació como una plataforma […]

Seguir leyendo...

No hay un diseño correcto

Si tengo que ir desde mi casa al centro de Santiago hay prácticamente una cantidad infinita de posibilidades. Podría ir en auto, podría tomar el metro o un bus, podría incluso ir caminando o en bicicleta, también existe la posibilidad de ir en un helicóptero, un avión, un monopatín o un skateboard y, por cada […]

Seguir leyendo...

Por qué WordPress

Desde que lancé el curso Dominando WordPress he recibido varias preguntas como: ¿Por qué WordPress? ¿Es mejor que Joomla? ¿Qué tiene WordPress que otros CMS no tengan? así que en este artículo, voy a comentarte algunas de las bondades de WordPress que me han convertido en un verdadero fanático. Desde el punto de vista del […]

Seguir leyendo...

Hay 6 opiniones

  1. Hola Francisco,
    Me encanta el nuevo enfoque de tu plataforma, más enfocado al diseño. Estupendo!! Te sigo de cerca y esperando las novedades que vas a ofrecer.

    Un abrazo.

    Débora.

  2. Hola gracias de verdad tus concejos me han servido de ayuda gracias a ti pude graduarme de verda lamento no tener los dolares para pagar todos tus cursos que se que mejorarian mas mi comprension de la creacion de mejores paginas web esperoen algun momento el que mejore economicamente en mi pais venezuela ya estoy afiliado a tu conexion espero ver mas contenido pronto saludos

Y tú ¿Qué opinas?

Puede que no te responda, pero ten por seguro que leeré tu comentario. Por si acaso, tu email no se mostrará ;)

Recibe más artículos como este cada semana

Únete a los 8.158 suscriptores y recibe cada miércoles nuevo contenido sobre diseño, sitios web y creatividad.

¡Ya estamos casi! revisa tu bandeja de entrada para verificar tu email por favor.
Uy! Parece que algo salió mal procesando tu solicitud. Recaraga la página e inténtalo de nuevo.

Ya me suscribí antes, no me muestres esto.