Diseño Web Emocional: consejos y ejemplos

  • Por
Por qué es importante la estética en todos tus proyectos web.
 
Hoy en día, el diseño emocional es una muy poderosa herramienta en manos de los diseñadores web profesionales. Sólo hay que ver la tendencia de algunas webs modernas de usar elementos complejos y su manera de usarlos, focalizando el elemento emocional en vez de buscar otros usos más técnicos.

Hasta hace poco, los desarrolladores sentían tanta pasión con respecto a la estructura interna de la web, que dejaban de lado la apariencia visual de éstas, provocando que resultaran ser insulsas a ojos del internauta. Don Norman con su libro “Emotional Design” dio el primer paso al descubrirnos el enorme potencial de la emoción en el diseño web.

Si le apetece al lector echar una ojeada a las principales ideas de Norman, vea este vídeo. En este libro Norman describe por qué “las cosas atractivas son más efectivas”. Si la Web causa emociones positivas, ganará rápidamente la confianza de los usuarios. Hay tres niveles de diseño emocional. Vamos a hablar sobre ellos:

Percepción intuitiva (apariencia)

Los diseños que se caracterizan por su suavidad o por sus curvas causan una sensación positiva en la consciencia de los humanos, mientras que las texturas ásperas y las formas angulosas causan miedo y sospecha. Las emociones intuitivas aparecen una vez que se relacionan con la mente y con su subconsciente. Por eso hay un montón de diseñadores web intentando afectar a la intuición de los usuarios causando sensaciones positivas.

Este portafolio de freelancer sólo causa emociones positivas.

Un pingüino que se siente un poco solo.


 

Simpatía hacia el usuario (usabilidad)

Si quieres ver más información sobre los principios de la usabilidad, puede encontrarlos en este artículo. La base de la usabilidad es fabricar una web tan simple como sea posible. Para que estos principios funcionen, debes crear la sensación de que el usuario controla la web mediante las acciones que realiza.

Un ejemplo perfecto de una web con buena usabilidad.


 

Contemplación (memoria)

Cuando miras un objeto por primera vez, lo intentas asociar siempre con objetos familiares que ya hayas visto antes. La contemplación es un proceso de pensamiento sobre los actos realizados. Por ejemplo, en la web “Fantasy-cartography” encontrarás similitudes con un mapamundi y con el acto de viajar.

Aquí tenemos un mapa colocado en la cara de una chica. Es una idea bastante creativa. El color amarillo tiene un impacto positivo en los visitantes.

Los sitios visualmente atractivos contribuyen al pensamiento creativo y otros procesos mentales en la mente del ser humano. Si el diseño es realmente bueno se consigue que los tres niveles trabajen juntos. Si tienes éxito combinando los tres niveles fabricarás un diseño verdaderamente portentoso, el cual contendría:

  • Atractivo (impacto en la percepción de los usuarios)
  • Eficiencia (te aseguras de que los visitantes encuentren la información que buscan)
  • Placer estético
 

Memorable (buena impresión y memoria).

Un ejemplo más es la web Bagigia, que tiene un simple pero memorable diseño.

Implementación de la idea

Como norma, todas las webs incluyen unos cuantos elementos que impactan en las emociones de los usuarios. Algunos elementos son obvios, como las formas, los colores, los gradientes cromáticos, el contraste, etc. Pero vamos a centrarnos en los objetos menos obvios.

Humor

El humor es una de las más efectivas maneras de comunicación entre las personas. Las bromas y las sonrisas pueden ayudar a evitar confusiones y a fomentar el confort en la conversación. Sin embargo, una persona se reirá, pero otra no lo hará. Depende de lo específico de tu proyecto web y de la audiencia que lea tu contenido.

El divertido portfolio de Martz

Reconocimiento

Una persona está siempre buscando una conexión emocional con las demás. Es nuestra naturaleza. Por ello, las imágenes de personas en las webs causan diferentes emociones como tristeza o alegría. En otras palabras, las personas subconscientemente buscan la cara de otra persona en la web. Y esa persona es capaz de cargar emociones o un concreto estado anímico en los usuarios.

Este chico es soñador y reflexivo, crea sensaciones positivas.

Esta chica sonríe y quieres devolverle la sonrisa.

Anhelo

Si el sitio está enfocado en ventas (e-commerce), la demanda de productos depende del atractivo de las imágenes. La atracción conduce a la compra del producto.

Un buen ejemplo de web sabrosa que despierta el apetito.

Las webs de bodas son también un gran ejemplo. El amor es la sensación más relacionada con la felicidad.

Pequeños detalles

Las pequeñas cosas agradables podrían tocar a una persona en el nivel emocional. Para comprender mejor de lo que hablo, veamos unos cuantos ejemplos.
Esta página de error 404 es un buen ejemplo de conexión con el usuario: “¡Sin café no hay curro!”

¿Estás perdido?

Un ejemplo es la landing page de MailChimp. Dice “Es tu momento de gloria”.

Conclusión

El diseño emocional tiene muchas cualidades positivas. Hemos visto cómo a veces lo atractivo e inusual despierta el pensamientos creativo. Don Norman ha identificado tres niveles de diseño visual que están basados en nuestros procesos psicológicos: percepción intuitiva, comportamiento de los usuarios y contemplación. Los diseñadores web tienen como tarea responsable balancear estos niveles y maximizar el impacto de su proyecto en los usuarios web. Necesitan predecir sus metas, necesidades y expectativas.

Hay un montón de ejemplos similares en las webs. ¿Conoces otros interesantes ejemplos de diseño emocional? Siéntete libre de compartir con nosotros tus pensamientos en la sección de comentarios de abajo.
¡A disfrutar!

 
Fuente crazypixels.net
 

Autor

OldMith

Desarrollador Web. jQuery. Responsive Design. Wordpress. Friki por naturaleza.

Compartir

Comentarios

Zatoni

20/11/2012
diseño emocional
Hay una pagina en Colombia exquisita que combina los tres factores me atrevería a decirlo sin equivocarme, es una revista electronica con temas diversos divorciada de las convenciones www.bacanika.com.co es un derroche de diseño, fotografía, pintura, conjugado en arte para el lector :)