En el último artículo te hablé sobre cómo diseñar una efectiva página de inicio para la web de tu negocio. Uno de los puntos importantes de ese artículo era sobre la primera impresión de la página de inicio de tu sitio web.
La primera impresión es lo primero que ve y siente el usuario al visitar tu sitio web.
Hay que tener en cuenta que no sólo influye la distribución, los colores, el contenido, la tipografía, o sea lo visual, sino también las sensaciones que este primer pantallazo le genera.
La primera impresión es un mix entre lo que tu sitio web denota y connota.
Este primer pantallazo también se denomina Above the Fold y es determinante para ver si el usuario se queda o se va.
Anteriormente te he contado que a una persona le lleva alrededor de 50 milisegundos (esto es 0.05 segundos) en crear una primera opinión sobre el sitio y definir si se queda o se va.
Esto quiere decir que el usuario hace juicios rápidos basándose solamente en el diseño.
Otro estudio de la universidad de Missouri de Ciencia y Tecnología indica que el 94% de las cosas que influyen en la primera impresión del usuario están relacionadas con el diseño.
Este 94% son: El logo, la imagen, la barra principal, la identidad visual, la estructura, la simetría, el balance, el espacio y el look and feel de tu marca.
Si aún tienes dudas te comparto un ejemplo de un rediseño web que he hecho. Aquí puedes observar el antes y el después, y la importancia de la primera impresión:
Hoy quisiera profundizar un poco en la primera impresión, qué elementos son importantes y qué beneficios tiene un buen diseño web.
La primera impresión: El diseño importa
Si te nombran en algún medio, en otro blog, si haces guest posting o un amigo le recomienda a otro tu negocio, lo primero que harán será ir a tu sitio web.
Éste es la carta de presentación de tu negocio en internet y puede que sea la única chance que tengas de atraer al visitante.
Si la primera impresión de tu sitio web da la sensación de un sitio antiguo y no se adapta a teléfonos móviles, las personas juzgarán también de esa manera a tu negocio.
Google en su estudio de primeras impresiones, además de corroborar que las personas tardan menos de un segundo en crear las primeras impresiones, destaca que los usuarios de internet aman los diseños simples y más cuando le resulta familiar.
Las personas tienen en sus mentes como un sitio debería ser. Si te alejas mucho de esos patrones es un riesgo para tu negocio y puede que estes perdiendo potenciales clientes.
Seguramente hayas escuchado la famosa y trillada frase: Menos es Más. Si bien es una de mis lemas favoritos para el diseño y la vida en general tiene una trampa ya que hacer que algo luzca simple no es sencillo.
Lo que sí es importante es que trates mantener el diseño de la primera impresión simple y no sobrecargarlo con todo lo que tienes.
Las personas sólo notan cuando algo está mal diseñado, ya sea porque no es funcional o no luce agradable para sus ojos.
Por eso mismo el diseño, el buen diseño juega un papel muy importante en las primeras impresiones de tu sitio web.
La confianza y la credibilidad que las personas tengan de tu negocio dependerá de si tu servicio/producto es bueno o malo, la experiencia de compra que tengan y gran parte será por primera impresión que tengan al llegar a tu sitio web.
Un estudio de Standford demostró que el 75% de los clientes crean juicios en la credibilidad de las empresas basándose en el diseño de su sitio.
Teniendo un diseño web con una impactante primera impresión hará que tus potenciales clientes quieran saber más de tu negocio, crearán excelentes juicios y la tasa de rebote de tu sitio web se reducirá considerablemente.
Cuanto mejor sea el diseño de tu sitio web, mejor será la primera impresión. Por lo tanto los usuarios permanecerán más tiempo en tu sitio web.
Los 5 elementos fundamentales para una buena primera impresión
Hay 5 errores que debes evitar en la home page de tu sitio web.
Para mejorar la primera impresión de tu sitio web, captar la atención de tu potencial cliente y aumentar las conversiones, el primer pantallazo de la parte superior o above the fold debe tener:
- Logotipo
- Menú de Navegación
- Imagen
- Mensaje
- Llamada a la acción o Call to Action
1. Logo
Un logotipo profesional, simple y memorable dará una muy buena primera impresión. El logo es una síntesis de tu negocio, por lo tanto no es necesario poner todo lo que encuentres.
Mientras más simple sea el logo de tu negocio, más memorable será para los visitantes.
Si bien un logotipo profesional hará que las personas tengan una buena impresión en los primeros segundos, según un estudio el usuario necesita entre 5 y 7 impresiones para que sea reconocido por el mismo.
Para tratar de reducir este tiempo, un logo simple que sea recordado fácilmente, funcionará mucho mejor que uno complejo.
Si querés ver cómo mejorar el logotipo de tu negocio, en este artículo te cuento ¿Cómo diseñar un buen logotipo para tu negocio? Tips y consejos para tu identidad visual.
Otro punto a tener en cuenta, es que no es necesario poner el logo de tu negocio bien grande. He visto sitios webs en donde el logotipo ocupa más de 1/3 de la pantalla y luego se vuelve a repetir en el título principal.
Este es un gran error ya que estás desperdiciando el primer contacto con tu potencial cliente.
Algo a tener en cuenta es que si ponés tu logo grande la primera impresión dirá que tu negocio es grotezco, rudo e informal.En cambio si el logotipo es chiquito, va a transmitir elegancia y profesionalismo.
2. Menú de navegación
Las personas están acostumbradas a que el menú principal esté arriba y los botones o etiquetas sean fáciles de comprender y el mensaje sea claro.
Con mensajes claros me refiero a que el usuario está acostumbrado a etiquetas simples: Sobre mí, servicios, contacto, etc.
Los visitantes no van a entender si pones etiquetas creativas o diferentes. Otra vez vuelve el concepto de Menos es Más. Lo que te aconsejo es que lo mantengas simple y no quieras inventar algo que puede perjudicar a tu negocio.
Mantén las etiquetas de los botones lo más cortos y concisos posibles.
Un menú principal es claro cuándo sé a dónde me va a llevar ese botón. No es claro cuando no lo sé. Por lo tanto si las personas no entienden a dónde lo va a llevar el botón, no van a clickear.
Te doy algunos ejemplos:
Ejemplo de una barrra de navegación clara: Sobre mi – Servicios – Blog – Cursos – Recursos gratuitos – Portfolio – Contacto – reserva una sesión –
Ejemplo de una barra de navegación poco clara: ¿Quien soy? – Conóceme mejor . Lee mi blog – Cómo puedo ayudarte – Escríbeme – Compra mis libros
Por otro lado no es recomendable poner más de 8 etiquetas en el menú prinicipal ya que va a quedar muy sobrecargado y poco atractivo. Mantenlo simple.
3. Imagen
“Una imagen vale más que mil palabras” dice el famoso proverbio chino.
Si bien el contenido es muy importante para poder conectar con tus potenciales clientes, una cara de tu rostro o tuya es muy positivo.
Mostrar una imagen tuya va a valer aún más que una imagen de stock, o de empresarios trabajando, ya que le estarás comunicando al usuario que eres humano, real, de carne y hueso, además de simpático.
Esto ayuda a que te conozcan mejor y aumentará la confianza y la credibilidad en el visitante.
Estudios de mercado comprueban que una imagen tuya aumentará considerablemente las conversiones en tu sitio web.
Si no sabés cómo luce una buena imagen para tu sitio web o quieres realizar una sesión de fotos para el rediseño, te recomiendo un artículo que escribí en el cuál comparto 7 consejos para la sesión de fotos de tu sitio web.
4. Mensaje
La primera impresión de tu sitio web debe responder rápidamente a las siguientes preguntas:
- ¿Quién eres?
- ¿Qué haces?
- ¿Por qué debería importarle al visitante? ¿Qué beneficio le trae?
Es muy importante que el mensaje sea claro y le muestre al usuario una razón de por qué debería prestar atención a lo que haces u ofreces y el beneficio que le va a traer.
Una buena idea es llevar el copy o mensaje de tu web a una conversación real. De esta manera puedes comprobar si tu mensaje es claro o no.
Un ejemplo:
A: Hola Beto, un gusto conocerte. ¿A que te dedicas?
B: Tengo un negocio en donde ofrezco soluciones integrales 360º para que nuestros clientes puedan maximizar sus ventas.
A: ??
Ejemplos de mensajes claros:
5. Llamada a la acción o Call to action
La llamada a la acción en la parte superior del sitio es clave para convertir más visitas en clientes, aunque muchos sitios deciden no ponerlo.
Si aún no tienes un llamado a la acción en la parte superior o en tu home page te recomiendo que lo pongas y con un mensaje claro.
Es decir que el llamado a la acción debe indicarle al usuario qué va a pasar si clickean allí.
Te doy un ejemplo:
Si me quedo encerrado en mi casa, lo primero que voy a hacer es buscar en google el sitio web de un cerrajero. Una vez dentro, (del sitio no de mi casa porque ya lo estoy) lo que voy a querer hacer es contactarlo rápidamente para que pueda ayudarme.
Su sitio web debería tener un botón en la parte superior con un mensaje claro para que yo pueda solicitar su servicio. De esta manera me estaría facilitando mi búsqueda y yo tendré una experiencia de usuario positiva.
Trata de que el mensaje del llamado a la acción sea en contexto con el título y evita poner palabras vagas como: Info, Ver más, etc.
Otros factores importantes para una positiva primera impresión
1. La velocidad de carga del sitio web
Hoy en día la eficacia de un buen diseño web, se traduce en un factor que es el tiempo. Cuando buscas algo en internet, lo que quieres es la solución rápidamente.
Volviendo al ejemplo anterior del cerrajero, si el sitio web tarda mucho en cargar es muy probable que vuelva para atrás y entre a otro sitio.
El 47 % de los usuarios de internet espera que el sitio web cargue en menos de 2 segundos promedio.
Que tu sitio web cargue rápido es muy positivo para la primera impresión que los usuarios puedan tener de tu negocio.
La primera medida a solucionar en un sitio de carga lenta es saber si tu sitio web está alojado en un hosting de calidad. En este artículo te explico un poco más sobre este tema: Hosting y Dominio: Antes de comenzar una web.
Otro de los problemas más comunes en la carga lenta de tu sitio web se debe a la utilización de grandes archivos de imágenes.
Usar imágenes grandes, atractivas y de mucha resolución para dar una primera impresión positiva está muy bien, pero puede quitar efectividad al sitio si no están optimizadas.
Además de perjudicar la velocidad de carga de tu sitio también puede repercutir en el SEO.
En un mundo en el que el tiempo es muy valioso, que aparezca este icono de carga no es nada positivo para tu negocio y dará una mala primera impresión:
Puedes verificar la velocidad de carga de tu sitio web a través de Pingdom o a través de la herramienta gratuita de Google Speed Insights. De esta manera podrás ver cuáles son los inconvenientes que tiene tu sitio actualmente.
Por otro lado te recomiendo la herramienta Tinypng.com para que puedas optimizar tus imágenes y reducir considerablemente el tamaño de las mismas.
2. Sitio web responsive
Un sitio web responsive estará optimizado tanto para smarthpones, tablets y ordenadores.
Si tu sitio web se ve bien en tu computadora pero no se ve bien en Smarthpones, los usuarios tendrán una mala primera impresión sobre tu negocio.
Los sitios webs que no son responsives da la sensación de que no están actualizados y de que tienen un diseño obsoleto, porque no puede brindarle una buena experiencia al visitante.
Esto puede significar que estés ahuyentando potenciales clientes.
Un estudio proyecta que para finales del 2019 los dispositivos móviles comprenderán el 63% del uso global de internet.
Por lo tanto, tener un sitio web optimizado para móviles te ayudará a retener más clientes y a mejorar la experiencia de usuario.
3 Webs que dan una buena primera impresión y por qué funcionan.
Ya te he contado las claves para generar una buena impresión con tu sitio web y convertir más visitas en clientes.
Te comparto 3 buenos ejemplos de sitios webs que funcionan muy bien:
1.Upwork
Upwork es una plataforma online que sirve para contratar freelancers de cualquier parte del mundo, o buscar trabajo de forma remota.
Si bien el diseño fue cambiando a lo largo de los años, creo que siempre fueron muy claro con los objetivos y con sus mensajes.
En la primera impresión se puede apreciar un título descriptivo que dice: Contrata Freelancers. Haz que las cosas sucedan.
Este conecta muy bien con personas que están buscando crear o hacer crecer sus proyectos y necesitan ayuda de un freelancer con habilidades o una agencia profesional.
El llamado a la acción es simple, contrasta bien con el color del fondo y el mensaje Get Started (Empieza) es muy claro.
A la derecha se puede ver a una chica joven que trabaja como freelance, está contenta y feliz con su trabajo de escritora desde el lugar que ella quiera.
La primera impresión del sitio web es muy positiva y tiene una identidad muy cuidada. Puedes ver que mantiene una paleta de colores hasta en la fotografía y da la sensación de confianza y simpleza.
2. Duolingo
Duolingo es una gran herramienta/app que sirve para aprender cualquier idioma de manera sencilla.
Lo interesante de Duolingo es que el aprendizaje no es denso, sino que es muy interactivo y divertido. Uno siente que realmente está jugando.
Es por eso que la página de inicio de su sitio web me gusta mucho y creo que funciona muy bien. Transmite esa sensación de juego tanto a nivel gráfico como en su tipografía amistosa.
La primera impresión es simple y muestra un planeta en modo gráfico, haciendo referencia a aprender cualquier idioma y el mensaje es claro: Aprende un idioma gratis y diviértete.
El botón Empieza indica lo que va a suceder después y toda la paleta de colores está en armonía con su identidad de marca y hace que todos los elementos se mantengan unidos bajo una misma idea.
Me gusta que la primera impresión sea simple y minimalista sin perder el toque lúdico y el objetivo principal.
3. Droplr
Droplr es una herramienta fantástica que se instala como extensión en Chrome y sirve para capturar rápidamente cualquier tipo de imagen para poder compartirla.
Me gusta el minimalismo y cómo tiene una identidad bien marcada, tanto en tipografía y color.
El mensaje principal es claro: Captura y explica tus ideas. Debajo se puede apreciar un listado de 4 beneficios y un llamado a la acción con un campo para completar con el email.
Esto ayuda a tener una buena experiencia para el visitante.
La imagen de la derecha, en realidad es una animación o video de cómo funciona la herramienta de manera simple y sencilla. Debajo se puede apreciar unos logos que transmiten credibilidad y autoridad.
La primera impresión es muy buena, ya que puede contar de que trata la herramienta y el hecho de que tenga una animación ayuda a que el visitante entienda rápidamente los beneficios que va a obtener.
Conclusión
Si sigues los consejos de este artículo para lograr una buena primera impresión y tienes un sitio web que es atractivo, funcional y fácil de navegar es muy probable que retengas y atraigas a los visitantes.
Si no tienes una buena primera impresión en tu sitio web es muy probable que estés espantando potenciales clientes y eso no es algo bueno para tu negocio.
