Para diseñar una web, independientemente del sector, tenemos que estructurar la información ordenadamente. Lo más importante se situará en primer lugar, por lo que debemos seleccionar, ya que no todo estará en la página de inicio. Lo estructuraremos de forma que el usuario viaje de lo más general, hasta lo más concreto.
Como nos vamos a ocupar del sector de la automoción, vamos a focalizarnos en estructuras y colores que funcionen bien para este sector.
Con esto quiero decir que aplicar todos los consejos de este artículo a una web de un restaurante (por ejemplo) es posible que no resulte tan efectivo, ya que cada sector tiene su propio imaginario y lenguaje.
Aquí podéis encontrar algunas claves a tener en cuenta para diseñar una web de automoción:
Antes de empezar a diseñar: Sintetiza
No cabe todo lo que quieres decir, bueno, si cabe, pero si pones todo eso que estás pensando, solo lo va a leer tu familia. Esos desconocidos que quieres que pasen a ser clientes, verán un montón de información, les dará pereza leer y se irán a otra web.
Como no queremos que eso pase, vamos a resumir textos, pero también vamos a evitar imágenes de más, ya que éstas también recargan el conjunto y, si nos pasamos, el resultado final se “ensucia” hasta el punto de no percibir nada.
Tengamos en cuenta que la sobreinformación es igual de dañina que la falta de información, así que cojamos papel y boli, y establezcamos una lista de informaciones que queramos incluir, ordenadas de forma prioritaria.
Una vez tenemos nuestra lista, empezaremos con el diseño de nuestra web corporativa.
El diseño de la home page
La Home page es nuestro escaparate, nuestra cara, de ella depende la primera impresión de un usuario nuevo (y desconocido, porque si de nuevo es un miembro de tu familia ya te conoce desde que llevabas pañales, así que se llevaría una 4815162342º impresión, y ya no vale como 1º impresión)
¡Oh Dios mío! ¡Qué responsabilidad! ¿Qué voy a hacer ahora? ¿Qué pongo en mi home?
¡Que no cunda el pánico! Esto es más sencillo de lo que parece: en una home tiene que estar el equivalente a “Hola, me llamo Petunia Sánchez, vendo coches preciosos y de gran calidad, soy de confianza y te compensa comprarme a mí en vez de a otro (sonrisa)”
Imagino que os habréis quedado igual que si lo hubiera escrito en chino (si sabéis leer chino, en klingon), pero dadme una oportunidad más y seguid leyendo para que pueda aclararlo todo:
“Hola me llamo Petunia Sánchez” es el logotipo. Tiene que estar en un lugar destacado para que al entrar en la web quede claro quién eres.
El usuario desconocido que quieres convertir en cliente va a buscar esa información en la parte superior de tu web, así que es bueno que la encuentre ahí para no desconcertarle.
Una recomendación (que puedes hacer caso o no, por eso es una recomendación y no una imposición) es que no te pases de grande ni de pequeño.
Si lo pones muy grande te va a quitar espacio para poder poner otras cosas importantes que se vean en el “primer vistazo” (a demás es un poco raro, es como si vas por la calle gritando ¡¡HOLA SOY PETUNIA SÁNCHEZ, HACEDME CASO!!)
Si lo pones muy pequeño, se va a interpretar como algo poco importante. Algo que no es necesario pararse a mirar.... Esto generaría situaciones como “Había un coche fantástico en una web azul... pero no me acuerdo del nombre” (Bueno eso también puede pasar si tienes un nombre complicado y no te conocen fuera de casa, pero eso es un tema para otro día... Y que quede claro: la solución sigue sin parecerse a gritar por la calle y que te hagan caso, y más a una estrategia de marketing que incluya “branding”)
“Vendo coches preciosos y de gran calidad” Es la información que vamos a encontrar en el slide principal. En él veremos los productos que vendes, con algo de información a modo de titular (los detalles van en el detalle del producto). Imágenes publicitarias que estén maquetadas con buen gusto y respeten la imagen corporativa de tu empresa.
Si el slide no tiene un aspecto profesional es como si nos intenta vender un coche Gil Gunderson (El vendedor “pringao” de los Simpson, que no vende un colín porque no hay nadie que se fie de él)
“Soy de confianza” equivale a los sellos de confianza online que tienes, ya que tienes una web segura y te has ganado esos sellos. Además en tu web se informa de la política de privacidad y de las normas de tu empresa que los clientes pueden querer saber en el apartado correspondiente (Que no es la home, en la home está el sello, y si hay formularios de contacto hay un link a la página donde se explican esas políticas y normativas)
“Te compensa comprarme a mí en vez de a otro sitio” Este es el apartado para desplegar tus encantos y desvelar tu valor añadido (eso que tú crees que te diferencia del resto, lo fácil que es comprarte a ti, promociones especiales, un apartado para tentar a los usuarios a ir a probar un coche, lo satisfechos que van a quedar si te compran porque hay opiniones de gente que te ha comprado y está contenta, etc...)
“Sonrisa” Tu web tiene que ser amigable y sencilla de entender de un solo vistazo. Pero no solo la Home ¡Toda la web!
Elementos comunes a todas las páginas:
Tú, con tu experiencia vendiendo coches, tienes información muy útil de los hábitos de compra de las personas que buscan tus coches, y puedes aprovechar esa información para aplicarla a tu web, facilitar la experiencia de usuario y fomentar tus ventas. ¿Te gusta cómo suena pero necesitas un ejemplo? ¡Pues estás de suerte, porque me encanta poner ejemplos!
Imagina que Petunia Sánchez lleva 20 años vendiendo coches en su concesionario, su empresa ya tiene un bagaje, así que ha crecido mucho desde que la abrió, pero no se había decidido a hacer una web. Ahora se ha dado cuenta de que hoy en día una web es vital para hacerse ver: si no estás online prácticamente no existes.
Petunia sabe que sus clientes llegan con cierta idea de lo que quieren, y les gusta comparar los coches que tienen alguna característica común, o que son totalmente diferentes. La mayoría quiere ver los pros y los contras de cada uno. Un coche es una inversión “seria”, generalmente no es algo que la gente cambie al mes, y ella sabe que la compra de un coche lleva una labor de investigación muy importante.
También sabe que si un desconocido entra por la puerta de su concesionario, y es ella quien le informa y acompaña en esa labor de investigación, consigue cierta empatía y “conecta” con ese desconocido, tiene muchísimas posibilidades de convertirlo en un cliente.
Petunia sabe cómo hacerlo offline pero ¿Cómo hacer eso online?
Podría introducir un comparador de coches, pero que no sea demasiado apabullante: es decir, un comparador sencillo, amigable, con un sistema de iconos reconocibles y un desplegable que contenga la información específica (es un ejemplo, hay millones de soluciones de diseño para este tipo de propuestas, y la cuestión es ver cuál es la que más se ajusta a tu proyecto)
Definitivamente “Sonrisa” va a estar presente en toda la web, ya que tu experiencia va a estar presente en todo tu sitio, que va a ser 100% personalizado.
Cada bloque contiene una información de forma lógica y ordenada, y la lógica y el orden son fáciles de entender, si un desconocido entiende tu web, y además le gusta, tienes una web amigable sonriente como un vendedor exitoso que genera confianza.
Otro punto a tener en cuenta, y que estará presente en todo el sitio web (menos en las landing pages, que ya hemos comentado en este otro artículo) es el menú de navegación.
Es como el índice de tu catálogo. Los desconocidos pueden acceder a cualquier página de tu sitio web, para avanzar en el orden que quieran y buscar una información que habían visto antes para compararla con otra que estaban leyendo en ese momento.
Al echar un vistazo al menú cualquiera puede hacerse una idea bastante precisa de lo que ofrece tu sitio web.
Es muy importante que todo esté estructurado de forma clara, evitar repeticiones innecesarias, y juntar la información en bloques que tengan puntos en común.
Si tienes dudas de como estructurar esta información, puedes escribir todos los apartados en tarjetas y hacer un test con diferentes personas, pidiendo que las junten en bloques. Así verás qué estructura es la más común y puedes aprovecharla.
Además este ejercicio te servirá para saber todas las páginas que vas a tener que diseñar, así que será muy útil.
Una vez tengamos la estructura más o menos clara, vamos a pasar a los elementos que van a transmitir directamente al cerebro, sin pasar por el procesamiento del lenguaje: el color, los iconos, las imágenes, etc...
La elección de los colores de la web ha de hacerse con sumo cuidado, porque cada color transmite o fomenta diferentes emociones. Hay todo un mundo en la psicología del color, pero ahora solo vamos a centrarnos en los colores que nos van bien para automoción (si te interesa la psicología del color, mencionamos algo más en éste artículo)
A más de uno esto le parecerá una chorrada, pero está demostrado que el color es una de las partes más importantes a la hora de tomar una decisión de compra (Si sigues en una actitud escéptica, te invito a que lo compruebes y alucines con las cifras)
Lo primero que tenemos que saber es si eres un concesionario de una marca específica, o multimarca. Porque si Petunia Sánchez vende coche exclusivamente “Moyota”, su imagen corporativa va a estar vinculada a la de “Moyota”, esto genera una continuidad visual que es muy importante para establecer relaciones directas entre la marca y el concesionario oficial.
Si Petunia Sánchez vende varias marcas, su identidad visual será propia, y su web tendrá todos los logotipos de las marcas que vende en algún lugar (los usuarios van a buscar esa información cerca del footer, es decir, cerca del final de tu página, así que para seguir sin desconcertarles, es bueno que encuentren esa información ahí)
Si buceamos en las webs de diferentes marcas, podemos ver que la mayoría usa diferentes tonalidades de gris, esto es porque el gris es un tono neutro, pero que a la vez transmite elegancia, cierto lujo, y está muy en contacto con la tecnología. Si este color fuese una persona no sería “tu colega” sería un señor respetable al que le hablamos de usted.
Y siempre se combina con otro color, y con blanco o negro. ¿Por qué ocurre esto? Os preguntareis, si el señor respetable es justo lo que quiero para mi web....
Esto se hace así porque si no acompañamos el gris con otros colores, este es aburrido, no llama la atención, incluso puede dar sensación de pobre o sucio, y nuestro señor respetable pasa a ser una persona marginada del sistema que produce incomodidad, o simplemente alguien que ni vemos.
El negro es la ausencia de color, es como un final, tiene un toque de “oscuridad” secreto, un enigma, tiene el atractivo de lo prohibido, es elegante como una pantera, y hermoso como la noche, pero oscuro, y la oscuridad oculta cosas, y eso no es tan positivo, así que algunos toques de negro están bien, nos atraen los enigmas, la elegancia, pero no nos pasemos, o espantaremos a los clientes potenciales (porque como dice Melisandre de “Game of Thrones” “la noche es oscura y alberga horrores”).
Si el negro fuese un color sería una mujer enigmática, muy elegante y hermosa, y con una mirada intrigante, y si nos pasamos con su aplicación, la mujer pasaría de tener una mirada intrigante a tener los ojos inquietantemente abiertos y la mirada fija en ti.
El negro es fantástico para crear contrastes, para los textos, o para separar bloques. Incluso podemos usarlo para los “call to action” siempre que sean elementos que contrasten mucho. Si lo combinamos con blanco y gris, transmitimos objetividad.
El blanco es luz, se relaciona con la verdad, la limpieza y la pureza, que son elementos que nos gustan mucho, pero si todo es blanco, va a pasarnos como con el gris, va a ser aburrido y no nos van a hacer ni caso...
El azul es un color que se repite mucho en las webs de las marcas, y esto es porque el azul es un color que transmite confianza, estabilidad, inteligencia y experiencia
La mayoría introduce algunos detalles en rojo, que despiertan la pasión y la impulsividad, pero que al ser tan vibrante no podemos utilizarlo en exceso o se nos irían las emociones de las manos.
El granate también sería un color válido, pero los tonos fríos funcionan mejor relacionados con la maquinaria, los cálidos son más humanos (son más recomendables para webs de servicios, o de comida)
Algunos utilizan el naranja, que aporta espontaneidad y es un color que se asocia con la comunicación y la alegría. Usar este color en algunos elementos puede suponer un toque refrescante, pero tengamos en cuenta que es un color muy vibrante, y si ponemos demasiado, puede ser muy cansado para el ojo humano, y abrumar al desconocido que queremos convertir en cliente, que ante tanto estímulo, muy probablemente decidirá abandonar nuestra web.
Una vez empecemos a poner nuestra web en marcha, siempre vamos a medir como funciona, los clicks que tiene cada apartado, la cantidad de visitas, y la tasa de conversión de todos los bloques y toda la estrategia de márketing.
Si queremos cambiar cosas, es mejor introducir los cambios uno a uno y volver a medir, así sabremos los cambios que han sido efectivos.
Sobre todo no podemos olvidar que el mundo cambia a una velocidad vertiginosa, y nosotros cambiamos con él, al igual que nuestra forma de percibir las cosas, y nuestra web tiene que estar al día, así que nunca dejemos de medir y mejorar.
No hay una fórmula mágica e invariable para que tu web funcione, pero con estos consejos puedes empezar a ponerla en marcha, y después ir cambiando poco a poco. Quién sabe, a lo mejor descubres que a tu proyecto le va muy bien introducir elementos en verde (que se asocia a la naturaleza, al cuidado del medio ambiente), o en morado (asociado a la feminidad, lujo, realeza, espiritualidad), o en colores de los que no he escrito porque no están directamente relacionados con el sector de la automoción.
Los iconos personalizados enriquecerán mucho tu web, a demás de ayudarte a mantener cierta continuidad visual que el usuario disfrutará.
La tipografía es un elemento muy importante, tanto como las imágenes, el color y el orden.
Tiene que ser clara, fácil de leer y relacionada con tu imagen corporativa. Por ejemplo Petunia Sánchez vende “Moyotas”, su web blanca, con las tipografías en negro, etiquetas en azul y call to action en naranja. Una web muy limpia, luminosa y ordenada, y el logotipo de “Moyota” es redondeado y muy claro.
Por mucho que Petunia le gusten las tipografías angulosas.... debería elegir una clara y redondeada, porque es lo que está pidiendo a gritos su web.
Si nos confundimos de tipografía introducimos un elemento discordante en nuestra imagen: como llevar dos zapatos de diferente modelo y color: queda raro.
Sobre todo no te alejes de tu imagen corporativa, trata de mantener tu web limpia y ordenada, no menosprecies los espacios en blanco (son necesarios para que el ojo pueda dirigirse a lo importante) y sobre todo trata de que el resultado final sea algo con lo que te sientas identificado. ¡Y no te olvides de llevar los dos zapatos del mismo par! O al menos... que se parezcan.