¿Pensando en rediseñar su sitio web? Un rediseño puede ser un gran éxito – o puede fallar miserablemente.
La mejor manera de asegurar el éxito de un proyecto de diseño web de empresa es planificarlo debidamente sin olvidarse de pensar en los objetivos de su diseño.
Como profesionales de marketing a menudo nos vemos implicados en la batalla entre el diseño centrado en el usuario y el diseño web centrado en la conversión. Ambos se relacionan entre si, pero hay una diferencia fundamental, que es el foco de este articulo. La diferencia es la conversión.
La conversión en términos de usabilidad podría ser la finalización con éxito de una serie de tareas (un conjunto de micro-conversiones) en el flujo de una inscripción o proceso de carrito de la compra, o la serie de pasos a seguir en una tarea de uso del producto.
Para los responsables del marketing online, la conversión significa convencer a un visitante a hacer una cosa y sólo una cosa. No realizar una de muchas cosas, no llevarla a cabo en menos de siete segundos, no navegar con éxito a partir de un punto a otro – simplemente completar un objetivo único el negocio.
En otras palabras, se trata de persuasión.
Diseño Centrado Conversión vs Diseño Centrado en el Usuario
Diseño web Centrado en Conversión (DCC)
El DCC es una disciplina dirigida específicamente a diseñar experiencias que permitan alcanzar un único objetivo de negocio. Se busca orientar al visitante hacia la conclusión de una acción específica, utilizando el diseño persuasivo y desencadenantes psicológicos como dispositivos para aumentar las conversiones.
Las páginas de aterrizaje son un ejemplo típico de DCC. Una página de aterrizaje es una página independiente de la navegación de su web que utiliza un diseño tienda online congruente – trabajar hacia un solo propósito colectivo – para llevar a sus visitantes hacia una meta, ya sea la recopilación de datos personales o educarlos acerca de su producto / servicio antes de pasar el testigo a la siguiente fase de su embudo de conversión.
Normalmente se utiliza para el marketing promocional, llevando a una página de aterrizaje a un usuario que han hecho clic en un enlace de correo electrónico, un banner o un anuncio de pago por clic (SEM) y convencerlos de convertir en esa página en ese momento aquí y ahora, en oposición a la exploración autoguiada en el sitio web.
La eficacia de una página de aterrizaje en comparación con una página web, utiliza el principio de “menos es más”, que se puede ilustrar comparando el número de enlaces (fugas) en cada tipo de página. Menos enlaces es el escenario óptimo para una página de alta conversión.
Un ejemplo del mundo real de la psicología del menos es más proviene de un experimento realizado en un supermercado en el año 2000. Un estante de degustación de mermelada fue erigido para permitir que los compradores prueben los diferentes sabores de mermelada disponibles para su compra. La prueba comparó el impacto de la variación del número de opciones de entre 24 y 6.
En el caso de los 24 sabores, el tres por ciento de los que probó las muestras fue a comprar la mermelada, en comparación con el 30 por ciento de tasa de compra cuando sólo tenía la opción entre 6 sabores disponibles. Esto demuestra un fenómeno conocido como la parálisis del análisis, donde demasiadas opciones en realidad se traducen en la ausencia de resolución hecha.
Diseño web centrado en el usuario (DCU)
El UCD está más centrado en la usabilidad de un sitio web o en los detalles/características de un producto. El flujo típico de una tienda online sería un buen ejemplo de esto. En el proceso de compra de una tienda online, debe ser tan fácil como sea posible conseguir avanzar a través de una serie de pasos. Aquí, la atención se centra en los objetivos del usuario. La prioridad está hacer su experiencia a través del proceso tan simple como sea posible.
La distinción importante respecto al CCD es el deseo de conseguir que el usuario logre SU objetivo, en lugar de los suyos.
Proceso de tienda online centrado en el usuario
Principios del Diseño Centrado Conversión
¿Cómo convencer a un visitante a completar su objetivo de conversión mediante el diseño? Hay una serie de elementos de diseño que llevan la atención de un visitante hacia el área deseada de la interacción. Ciertos dispositivos psicológicos también pueden fomentar la participación.
DISEÑO
1. La encapsulación: es una técnica clásica utilizada para “secuestrar” los ojos de sus visitantes y crear un efecto de visión de túnel. Piense en ella como la creación de una ventana en la página de destino donde su llamado a la acción (CTA) es la vista. túnel. Este ejemplo utiliza elementos de contraste y señales direccionales.
2. Contraste y el color: El uso de contraste es un concepto bastante simple que se aplica en todo el espectro de color, pero se ve más fácilmente en monocromo. En este ejemplo conceptual, el color es tan abrumadora que no puedes dejar de mirarlo. Ver más detalles en el artículo sobre conversión web de cómo destacar las cosas importantes.
3. señales direccionales: las señales direccionales son indicadores visuales que señalan el area de atención. Ayudan a guiar a los visitantes hacia lo que quiere que hagan. Tipos de señal direccional incluyen: flechas, caminos y el impacto direccional de la línea de visión. En este ejemplo, el poder de la sugestión se muestra en pleno efecto, ya que el bebé recibe mucha atención, pero el área que está mirando recibe mucho más:
4. El espacio en blanco: El espacio en blanco es un área de vacío que rodea un área de importancia. La razón por la que decimos espacio en blanco es que el color del espacio no es importante.
El objetivo es utilizar un posicionamiento espacial sencillo para permitir que su llamada a la acción (CTA) destaque de lo que la rodea y darle a su ojo sólo una cosa que centrarse.
PSICOLOGÍA
5. La urgencia y la escasez: los motivadores psicológicos más comunes son el uso de urgencia (tiempo limitado) y la escasez (oferta limitada). Son conceptos simples que pueden ser aplicados en un número de maneras. Comprar ahora. No se lo pierda. Estamos acostumbrados a ver estas frases. Las declaraciones de urgencia se utilizan para obligarnos a tomar una decisión de compra de inmediato. Para utilizar el concepto de escasez, tiene que convencer a alguien que tienen que comprar ahora mismo, antes de agotar las existencias. Esto aumenta el temor de quedar excluidos de la oportunidad deseada.
6. Pruebe antes de comprar: Uno de los ejemplos del mundo real más común de ‘probar antes de comprar “, es cuando las personas prueban furtivamente una uva de un racimo en el supermercado. Puede aprender de este ejemplo permitiendo a sus visitantes degustar sus mercancías, sin temor a la recriminación. Si es posible, de a sus visitantes una vista previa de lo que está vendiendo. Por ejemplo, regalando un libro electrónico a cambio de los datos personales, proporcionar el capítulo 1 en formato PDF gratuitamente. Amazon muestra un ejemplo clásico de este principio permitiéndole leer una parte del libro.
7. Prueba social: la prueba social es creado por las acciones de un grupo en particular y puede mejorar en gran medida el factor “yo también”. El principal beneficio es la credibilidad.
¿Cómo? Mostrando por ejemplo el número “me gusta” sociales, registrados a un webinar, o descargas de un libro electrónico hasta la fecha, es posible aprovechar unos segundos más de atención a impresionar a su visitante. Los testimonios también pueden ser un factor importante en la creación de un sentido de confianza. Dicho esto, los testimonios pueden obstaculizar las tasas de conversión si se usan incorrectamente.
Con un conocimiento global del diseño centrado conversión, puede empezar a ajustar y probar sus páginas de destino para las conversiones máximas.
Diseño web: Caso práctico de conversión web
Todos sabemos que un gran diseño web y las conversiones van mano a mano, pero ¿que conecta ambas cosas?
Lo que muchos no entienden es que su sitio web es más una “experiencia de usuario” que un folleto corporativo: las personas interactúan con su sitio, mientras navegan por él, así que hacerlo gráficamente atractivo no debería ser su única preocupación.
Afortunadamente, hay muchos estudios sobre el seguimiento ocular que revelan la forma en que los clientes realmente ven su sitio web.
En este artículo vamos a centrarnos en uno de los aspectos importantes en la conversión web: destacar las cosas importantes.
Todo el mundo aprecia un diseño web que mezcla los colores correctos y textura sutiles, pero ¿Qué debería destacar en el diseño de un sitio web?
De acuerdo con múltiples investigaciones lo que debería destacar son sus llamadas a la acción: las cosas que están “aisladas” de los demás llaman la atención en primer lugar.
¿Cuál es el mejor color para las conversiones?
¿Verde? ¿Rojo? ¿Naranja?
La respuesta es: el mejor color es el color que se destaca del resto de su diseño. ¿Sorprendido o decepcionado por la respuesta? Lo que se destaca consigue recordarse, lo que se mezcla con sus colores base es ignorado.
Un diseño web ha de tener 2 colores: pasivos y activos.
Los colores pasivos son los de su diseño base (típicamente lo de su logo que aplica a elementos general del diseño). Los colores activos son los que destacan: los colores de sus llamados a la acción y que por tanto deben ser distintos (más visibles) que sus colores pasivos.
Pasos a seguir para elegir el mejor color para las conversiones:
1 – Primero tiene que ver cuáles son sus colores base y su tonalidad. (ver apartado abajo sobre Teoría del color)
2 – Después, necesita para encontrar un color que destaca entre estos colores. Esto se convertirá en el color de la acción. Por ejemplo si utiliza una combinación de colores blanco y verde neutral para la mayoría de su sitio web, puede ir por el naranja para su llamada a la acción. Mint hace esto:
3 – IMPORTANTE: Asegúrese de utilizar el “color de la acción” sólo para las acciones para evitar confundir a sus visitantes.
Una de las cosas más difíciles de hacer en el diseño de un sitio web es llegar a un buen esquema de color y aplicarlo de una manera elegante.
La buena noticia es que la teoría del color y las buenas combinaciones tienen una base en matemáticas, así que con un poco de conocimiento, y las fórmulas adecuadas, puede estar absolutamente seguro de que sus colores coincidirán y no tiene que preocuparse acerca de si sus clientes le preguntan si eso es lo que su sitio web va a llevar.
Diseño web y Teoría del color
Veamos 3 simples relaciones de color y algunos consejos que debe saber y puede usar de inmediato.
Colores Análogo – son los colores que tienen tonos a juego. Son más difíciles de usar bien porque pueden dominar a los demás si se usan demasiado, pero ya que tienden a ser vibrante puede tener un sitio web rico en color e interesante.
Colores Monocromáticos – Hay un enfoque en un solo color, pero la intensidad y luminosidad varía. Este esquema de color es normalmente el más fácil y seguro de utilizar. Puede muy rara vez ir mal en la aplicación de este esquema de color.
Colores Complementarios – Dos colores opuestos el uno del otro en la rueda de color. Esta combinación de colores es el término medio entre monocromático y análogos. Da más variedad visual, pero no es tan difícil de implementar.
Uniendo todas las piezas
Una vez haya elegido su combinación de colores veamos cómo adaptarlos a un sitio web. Primero necesita identificar los tres colores de su paleta.
- color de fondo: Este color es el más utilizado y establece el tono general y la sensación del sitio web.
- color base: Este color se utiliza para romper el fondo y es típicamente el barítono, el hijo del medio, ni aburrido ni llamativo, pero el pegamento que mantiene todo junto.
- Color acento: Este color es el que menos se utiliza, pero le da al sitio su personalidad. A menos que esté usando un esquema de color monocromático, su color acento tendrá un marcado contraste con sus colores de fondo y base. Suele ser el color más audaz.
A continuación algunos ejemplos utilizando una paletas de colores. Estas no son, obviamente, las únicas maneras en que se puede hacer, pero debe tener una buena idea de lo que estás buscando.
Ejemplo Análogo
Ejemplo complementario
Ejemplo monocromático
5 Tácticas de diseño de conversión que deberías usar
Las optimizaciones para la conversión que realizas en tu sitio web son mucho más valiosas que las que haces en cualquier campaña de marketing individual.
¿Por qué? Por una razón simple: todas las campañas de marketing que realizas deberían (con el tiempo) llevar a su sitio web!. Una mejora del 10% en la tasa de rebote de una página de destino en su web significa un 10% más de ingresos en todas las campañas: PPC, SEO (tráfico orgánico), y social media (el boca–a-boca).
Esta debería ser una buen razón para eliminar los obstáculos a la conversión en tus páginas de entrada y páginas de destino – esos ajustes de diseño y pruebas de conversión que mejorarán el retorno de tus campañas!
Veamos algunas formas de obtener el diseño adecuado para altas conversiones (con respaldado de investigación, no evidencia anecdótica).
1. Imágenes en Sliders o Carruseles
Los sliders o carruseles pueden afectar negativamente tus tasas de conversión y no siempre recomendamos su uso.
El resultado de numerosos estudios demuestran que los sliders o carruseles afectan los esfuerzos de adquisición de clientes, ya que fallan en llevar a cabo una tarea muy importante en su página principal: que la gente sepa de lo que trata su sitio.
A modo de ejemplo, cuando la Universidad de Notre Dame probó un slider en su página web, sólo la primera imagen recibía cualquier acción, e incluso esa imagen tenía una tasa de clics baja sobre las visitas a la página: aproximadamente el 1% de los visitantes hicieron clic en un elemento de la 1era imagen.
… así que el 1% de los visitantes interactuaron con algo que generalmente ocupa la mitad superior de la página!!
Casi la totalidad de las pruebas realizadas indican que pocos interactúan con los carruseles y muchos comentan que se ven como anuncios.
Una prueba llevada a cabo por el Grupo de Nielsen los resultados mostraron que los usuarios no estaban recibiendo el mensaje principal de carrusel, y eran susceptibles en pensar que eran anuncios y los encontraron molestos y confusos.
El resultado: di “NO” a los banners y carruseles giratorios. Si aun no estás convencido, he aquí más razones:
Razón # 1: Ojo humano reacciona al movimiento (y se perderá lo importante)
Nuestros cerebros tienen 3 capas, la parte más antigua es la que compartimos incluso con reptiles. Esta parte se preocupa por la supervivencia y un cambio repentino puede ser interpretado como una amenaza. Por lo tanto ojo humano reacciona al movimiento – incluyendo constantes movimientos deslizantes de imagenes y carruseles.
A menos que el slider de imágenes sea la única cosa en tu sitio web (mala idea), no es una buena cosa. Le quita la atención a todo lo demás – las cosas que realmente importan. Al igual que tu propuesta de valor. El contenido de tu sitio. Productos…
Razón # 2 : Demasiados mensajes es igual a ningún mensaje
La mayoría de la gente ni siquiera presta atención a los sliders o banners, pero incluso aquellos que si prestan atención a menudo no captan realmente los mensajes.
Un usuario accede a tu sitio. Ve un mensaje en el banner – y empieza a leerlo. “Este otoño le ofrecemos… ” y se ha ido! A menudo, los sliders son tan rápidos que las personas ni siquiera son capaces de terminar su lectura (incluso si quieren).
Centrarse en un solo mensaje y acción principales es siempre mucho más eficaz
Razón # 3 : la ceguera a los Banners
Se ven como anuncios y la gente simplemente pasa de ellos. El usuario necesita tener el control.
Los carruseles a menudo tienen una mala usabilidad – se mueven demasiado rápido, tienen iconos de navegación demasiado pequeños (si los hay !) y a menudo se mueven automáticamente, incluso si el usuario desea navegar por su contenido manualmente. Una de las reglas fundamentales del diseño es que los usuarios deben tener el control.
Muchos sitios de comercio electrónico utilizan ofertas que rotan en un slider – posiblemente no porque lo han testeado sino por que “sí XX lo tiene, nosotros también deberíamos hacerlo”.
Si la primera oferta que la gente ve no les gusta (= relevancia), ¿entonces qué? ¿y si no les gusta ninguna de las tres?
En este caso el banner tiene más funcionalidad: al tocar las flechas deslizantes, la rotación automática se detiene. No sólo eso, sino que cuando vuelve al sitio en un momento posterior, se abre la diapositiva que quería ver.
Aun asi, recomendaría en su lugar tener una oferta única, estática.
2. La importancia del “cierre” en las ventas online
Una forma para mejorar tu proceso de captación y tus tasas de retención de clientes, es alterar el proceso de post-venta para centrarse en la máxima satisfacción del consumidor.
Una manera fácil de hacer esto es primero reconocer que los seres humanos tienen una tendencia natural a buscar el cierre.
Esto se aplica incluso a cuando estamos de compras online. Según un estudio reciente de la revista Journal of Consumer Research, se puede aumentar la satisfacción del cliente con cada compra si crea un sentido claro de cierre una vez que la venta ya está hecha.
¿Esto que significa? El estudio destaca que para las ventas online debe tener “señales visuales” claras y visibles para indicar que la venta está hecha.
Asegúrese de que todas las secciones de su sitio web que puede ser “terminadas” o “completadas” (una compra, formularios de contacto, etc). Es decir que tengan una pantalla de seguimiento que crea un sentido de cierre.
3. Los resúmenes importan en tu blog corporativo
Si practicas el marketing de contenidos y por tanto tienes un blog de empresa, un estudio reveló que tener resúmenes en lugar del contenido completo de los postes hace que la gente lea más de su contenido:
Los resúmenes permiten a las personas encontrar lo que les gusta mientras que una entrada completa en la página de inicio del blog es obligar a la gente a desplazarse hacia abajo o navegar en el blog.
¿Cómo escribir resúmenes que mantengan a la gente en su página blog?
En primer lugar, recordar la regla de oro al escribir introducciones: párrafos cortos son leídos, los párrafos largos se recorren rápidamente y los párrafos muy largos son omitidos.
Cumplida esta regla de oro, pon en práctica estas técnicas de redacción probadas para mantener a los lectores enganchados:
- Asegúrate de que tu resumen responde a la pregunta más importante de tu lector: “¿Qué hay en el resumen para mí?“
- Crea un espacio de información. ¿Qué van a aprender? Díselo antes.
- Entusiasma a la gente! Es mejor desencadenar emociones fuertes desde el principio, y luego entrar en el contenido detallado una vez que tengas a la gente enganchada.
- Usa una imagen cautivadora – las imágenes atraen a los ojos.
4. Haz un uso inteligente de la ley de Fitt
En el mundo de la usabilidad web, la ley de Fitt es muy importante, pero al parecer intimidante a primera vista:
La ley de Fitts es un modelo de movimiento humano utilizado principalmente en la interacción y la ergonomía persona–ordenador que predice que el tiempo requerido para moverse rápidamente a un área de destino es una función de la distancia al obejtivo y el tamaño del objetivo.
No te dejes intimidar, puedes utilizar algunas lecciones fundamentales de la ley de Fitt para mejorar la facilidad de uso de tu web sin entrar en las complicaciones del modelo.
En esencia, la ley de Fitt tiene que ver con la comprensión de la jerarquía visual en la interacción persona-ordenador. Por ejemplo, sabes que es común agrupar los elementos juntos cuando están relacionados, ya que hace que sean más fáciles de usar.
También tendría sentido dar más “peso” (a través de las diferencias de tamaño o de color) a los botones muy importante que se usan mucho. Algunos diseños pueden dar la impresión equivocada al dar accidentalmente demasiado “peso” a los elementos que realmente no importan.
Veamos un ejemplo de un estudio que examinó la página de inicio de un servicio de reparación de camiones con un mapa de calor (el heatmap):
Como puedes ver, la ley de Fitt está en acción aquí: el elemento más grande y accesible (la insignia “SIN CARGOS ‘) fue acaparando una gran cantidad de clics.
Esto es lo que sucedió luego cuando se rediseñó el sitio para dar más peso a un elemento que era realmente importante para aumentar las ventas: el número de teléfono contacto de la empresa!
Al darle al llamado a la acción principal un lugar más importante en la jerarquía visual – por estar en un lugar más prominente en la pantalla, por tener más peso visual, y por tener un color diferente – más espectadores se centraron en la zona y las conversiones aumentaron.
Puede parecer un cambio pequeño, pero dado que los problemas de diseño, la mala definición de la navegación y sitios web confusos son la principal fuente de pérdida de ventas y reclamaciones de los clientes en el mundo online, sería inteligente para probar cómo la ley de Fitt se aplica a su sitio!
5. El uso de precios “inútiles”
Esto se refiere a la táctica “clásica” de mostrar los precios anteriores antes del descuento que aparentemente es inútil (ya que los clientes no tendrán que pagar esos precios), pero ayuda a los consumidores a tomar decisiones en la evaluación del producto.
Una prueba de seguimiento ocular examinó los patrones de visión de los clientes de un batido.
La primera prueba, sin indicar el precio anterior (antes del descuento) se veía así:
Como era de esperar, el precio de venta y el producto en sí capta la mayor parte de la atención. Teniendo en cuenta esto, si se añadiera el precio anterior, la mayoría de la gente lo ignoraría, ¿no?
Falso. He aquí los resultados de la prueba después de que el precio anterior se añadió (en el círculo):
Lo que esto nos muestra es que las personas si prestan atención a los precios de sin descuento al evaluar si el precio de venta es un buen negocio.
¿Pero que impacto tiene? ¿Cómo afectó a las conversiones ?
Después de seleccionar el producto de su elección, se le pregunto a los consumidores si su compra fue una buena relación calidad-precio en una escala de 1 a 5, donde 1 es la mejor relación calidad precio.
Los consumidores que sólo vieron el precio promocional dieron una puntuación media de 2,4 . Los consumidores que vieron el precio promocional junto al precio inicial dieron una puntuación de 1,7 a pesar de comprar el mismo producto!
Básicamente, los seres humanos son bastante malos en la evaluación de precios sin claves contextuales, y nos resulta mucho más fácil tomar decisiones cuando tenemos algo en que basarlas.
En pocas palabras, mostrar el precio rebajado junto al original incrementará la satisfacción de compra global. Merece la pena probar.