Noticias y consejos sobre Marketing Online

Diseño web: por qué las webs sencillas son científicamente mejores

Publicado por Eric Lehoucq

Encuéntrame en:

7/12/13 20:48

diseño webEn un estudio realizado por Google, los investigadores encontraron que no sólo los usuarios juzgan un sitios web por su apariencia en una fracción de segundos (entre 1/50o - 1/20o de segundo), pero también que los sitios web visualmente "complejos" son calificados como menos atractivos que los simples

Además, los sitios "altamente prototípicos" - aquellos con diseños web comúnmente asociados con los sitios de su categoría - con un diseño visual simple fueron calificados como los más atractivos en todos los ámbitos.

En otras palabras, el estudio encontró que cuanto más simple el diseño web, mejor.

Pero ¿por qué?

En este artículo, vamos a examinar por qué cosas como la fluidez cognitiva y la teoría del procesamiento de la información visual pueden jugar un papel crítico en la simplificación de su diseño web y cómo un diseño web más simple podría conducir a más conversiones.

Veremos algunos estudios de casos de sitios que simplificaron su diseño, y cómo mejoraron su tasa de conversión, y daremos algunos consejos para simplificar tu propio diseño web.

¿Qué es un sitio web Prototípico?

Si dijera "muebles" qué imagen aparece en tu mente? Si eres como el 95% de la gente, se piensa en una silla. Si le pregunto qué color representa "chico", piensa "azul", chica = rosa, coche = sedán, ave = petirrojo, etc…

Prototipicalidad (si es que existe la palabra) es la imagen mental básica de tu cerebro crea para categorizar todo aquello con lo que interactúas. Desde muebles hasta sitios web, tu cerebro se ha creado una plantilla de cómo las cosas deben verse y sentirse.

Online, la prototipicalidad se divide en categorías más pequeñas. Tienes una imagen mental diferente, pero específica para las redes sociales, sitios de comercio electrónico, y los blogs - y si alguna de esas páginas web está perdiendo algo de su imagen mental, rechazas el sitio en niveles conscientes y subconscientes.

Si dijera "tienda de ropa de moda en línea para 20 y tantos", se podría imaginar algo como esto:

diseno tienda online

Este diseño sigue el de una "tienda de ropa online" prototipo. No es que carezca de originalidad sino que se está respondiendo a sus expectativas básicas de lo que debe ser un sitio de comercio electrónico de ropa, con un concepto de diseño web de tienda online de ropa clásico:

diseno web comercio electronico

¿Qué es la fluidez cognitiva?

La idea básica detrás de la fluidez cognitiva es que el cerebro prefiere pensar en las cosas que son fáciles de pensar.

Es por eso que prefiere visitar sitios donde instintivamente sabe donde están los distintos contenidos y sabes qué acciones se supone que debes tomar.

"La fluidez guía nuestro pensamiento en situaciones donde no sabemos que está en funcionamiento, y nos afecta en cualquier situación en la que sopesamos información." - Uxmatters.com

La fluidez cognitiva es parte de otra área del comportamiento conocido como “mero efecto de la exposición”, que básicamente establece que las más veces que está expuesto a un estímulo, más se prefiere.

Las reglas son las mismas en internet. Es "familiar" para que los blogs tener un elemento de opt-in en la barra lateral derecha, o que los sitios de comercio electrónico tengan una gran imagen de alta resolución con un titular que atraiga la atención y el logotipo de la empresa en la parte superior izquierda de la pantalla.

Si sus visitantes están condicionadas a ciertas características (el estándar para una categoría particular de sitio) desviarse de este podría inconscientemente ponerle en la categoría de "sitios menos atractivos".

Aquí hay un puñado de sitios de comercio electrónico. ¿Nota alguna similitud?

diseno web madrid

Nota: no tome lo que estamos diciendo como una excusa para hacer lo que todos los demás están haciendo.

Es importante saber cuáles son las opciones de diseño prototípico de un sitio en su categoría, pero es más importante encontrar la evidencia que apoya esas opciones de diseño.

Muchos diseñadores web hacen malas elecciones. Por ejemplo, muchos sitios de comercio electrónico utilizan sliders automáticas para mostrar imágenes de productos, pero estudio tras estudio está demostrado que esto afecta las conversiones.

¿Qué sucede cuando se cumplan con las expectativas básicas?

En las tres imágenes de arriba, todo lo que esperaría de un sitio de comercio electrónico esta donde se supone que debe ser. Incluso si nunca ha estado en el sitio, hay una "credibilidad" inherente al diseño.

Con un alto nivel de fluidez, un sitio será lo suficientemente familiar para que los visitantes no tengan que hacer un esfuerzo mental en entender el sitio y en su lugar puedan centrarse en por qué están en su sitio en primer lugar (para informarse, comprar,…).

Cuando la experiencia nos es fluida, se siente inmediatamente. Veamos del caso de Skinnyties.com, que no parece un sitio de comercio electrónico hasta el rediseño de su web.

diseno web empresas resized 600

Realizaron algunos cambios claves que resultaron en grandes beneficios:

  • Sigue el diseño de comercio electrónico prototípico
  • Mucho más "abierta", con espacios en blanco.
  • Las imágenes muestran un único producto con imágenes de alta resolución y de colores contrastantes.

Los resultados del rediseño son asombrosos sólo 2 semanas después de la puesta en marcha:

  • Incremento de ventas de todo tipo de dispositivos: 42%
  • Incremento de ventas de dispositivos móviles: 377%
  • Incremento de tasa de conversión de todo tipo de dispositivos: 13%
  • Incremento de tasa de conversión de dispositivos móviles: 72%
  • Disminución de tasa de rebote: 23%

El rediseño en sí mismo, no es nada innovador. Se juega exactamente en las expectativas de lo que debe ser una tienda online de ropa moderna. Es "abierto", responsive y tiene un lenguaje de diseño coherente en todas las páginas de productos.

Pero cuando se contrasta con el antiguo sitio, es muy claro que la falta de estos elementos no facilita a los compradores realizar compras en el sitio.

¿Qué tiene que ver el procesamiento de la Información visual con la complejidad de un sitio web?

En un estudio conjunto de la Universidad de Harvard, la Universidad de Michigan y la Universidad de Colorado, los investigadores encontraron fuertes correlaciones matemáticas de "estética" entre diferentes grupos demográficos.

La conclusión de este estudio fue que mientras más visualmente complejo es un sitio web, más bajo es el atractivo visual.

¿Por qué lo simple es científicamente más fácil de procesar?

La razón por la que los sitios web visualmente menos "complejos" se consideran más atractivos es en parte porque los sitios web de baja complejidad, no requieren que los ojos y el cerebro trabajen para decodificarlos, almacenar y procesar la información.

Básicamente, su retina convierte la información visual en impulsos eléctricos. Esos impulsos se enrutan a través de las células foto-receptoras adecuadas para transmitir la información de color y luz al cerebro.

Cuanto más color y variaciones luz en la página (complejidad visual) más trabajo tiene que hacer el ojo para enviar información al cerebro.

Cada elemento comunica información importante

Por eso es importante a la hora de diseñar un sitio web recordar cada elemento – tipografía, logotipo, y selección de colores – que comunica información sobre su marca.

Cuando estos elementos no hacen su trabajo, a menudo se intenta compensar añadiendo copia y / o imágenes innecesarias, lo que añade complejidad visual a la página web.

La optimización de una página web para el procesamiento de la información visual - simplificar el viaje de la información desde el ojo hasta el cerebro – trata acerca de comunicar tanto como sea posible en el menor número de elementos posibles.

La “memoria activa” y el Santo Grial de la Conversión

Toda esta simplicidad lleva a lo que sucede una vez que la información visual encuentra su camino hacia el cerebro.

El cerebro adulto promedio es capaz de almacenar entre 5 y 9 "trozos" de información en el corto plazo, la memoria activa.

La memoria activa es la parte del cerebro que almacena y procesa la información en el curso de unos pocos segundos de forma temporal. Es lo que le permite enfocar la atención, resistir las distracciones, y lo más importante, orienta la toma de decisiones.

Todo lo que hemos dicho hasta ahora tiene que ver con reducir la cantidad de "ruido" que hace su camino hacia la memoria activa.

En sitio web de baja complejidad, los 5-9 "trozos" que la memoria activa intenta procesar son cosas como garantías, descripciones de productos, precios u ofertas. Cuando la memoria activa puede mantenerse concentrada en solucionar un problema (como comprar unos zapatos), tratara de resolver el problema lo antes posible (realizar la compra).

Las desviaciones causan la retirada

Cuando se desvía de las expectativas de una persona - el precio era más alto de lo esperado, el esquema de color estaba apagado, el sitio no carga con suficiente rapidez, las fotos no tenían suficiente resolución - la memoria activa procesa esos "trozos" discordantes en lugar de lo que importa.

Eso es debido a que la memoria activa llama a la memoria de largo plazo para utilizar lo que ya sabe para llevar a cabo la tarea. Cuando la memoria de largo plazo no puede ayudar en el tratamiento de la información, el flujo se rompe y la memoria activa se desconecta y sigue adelante.

Es por eso que es necesario comprender el nivel de expectativas de sus visitantes - no sólo para los sitios de su categoría, sino a los sitios web en general: si desea "hackear" su memoria activa con el diseño.

Los blogs que leen, los sitios en que compran, su edad, sexo y ubicación física, toda alusión a cómo afectará su nivel de familiaridad en la primera impresión.

Conclusión

Si el visitante a su sitio web no puede confiar en su experiencia previa, no están pensando en lo innovador que es su sitio. Se quedaran pensando por qué las cosas no están donde se supone que deberían estar. Este no es el mejor estado de ánimo si quieres que compren en tu web.

 

Optimiza tu web para generar más leads INFORME GRATUITO CON 7 CLAVES DE CONVERSIÓN
¿Le ha gustado lo que ha leído?  Haga clic aquí para suscribirse a este blog
G+

Temas: conversion web, diseño web, diseño sitio web, diseño web de conversíon, diseño web empresas