Diseño emocional: cómo diseñar una web para los usuarios 'se siente bien'.

Hermoso sitio web ... pero ¿por qué la gente no está atada? El problema que el diseñador y el propietario de la web realmente encontraron

¿Alguna vez te has sentido así? Dedicó tanto el dinero como el tiempo para crear un hermoso sitio web. Función completa El diseño también es moderno. Pero el resultado fue decepcionante ... la cantidad de usuarios no aumenta. La tasa de reutilización es pequeña. Los clientes entran y entran en silencio. Como solo pasa para saludar y luego pasar este problema no es para ti solo. Pero es una historia real que muchas personas en la web se enfrentan, tendemos a estar obsesionados con la "estética" y la "usabilidad" hasta que la dimensión más importante sea la "emoción) de los usuarios. El sitio web del" corazón "no es diferente del robot que funciona según lo ordenado.

-[Inmediato]-

Solicitud de ilustraciones: la imagen de comparación entre el sitio web A se ve hermosa pero animada con el sitio web B, que tiene un diseño más simple, pero hay elementos que hacen sonreír al usuario (como una linda mascota o un mensaje de saludo amigable) con el gráfico que muestra el compromiso A, el establo y el sitio de B -website.

-[/Inmediato]-

¿Por qué nuestro sitio web "sin corazón"? Perforar las raíces que se pasan por alto

Este problema surge porque tendemos a considerar el diseño web como "lógico y razonamiento". Creamos el flujo de usuario más corto, colocamos el botón para encontrar el más fácil de encontrar, usamos los colores de mayor contraste. Pero todo es la única respuesta lógica (lógica) que olvidamos que los humanos decidieron y crearon la mayoría de los recuerdos con "emociones". Según los principios de Don Norman, el pionero de la experiencia del usuario explicó en el famoso de diseño emocional que hay 3 niveles de percepción humana: visceral (instintos), comportamiento (comportamiento) y reflexivo. El comportamiento es "fácil de usar", pero el examen no puede al nivel visceral que debe ser "hermoso a primera vista" y el nivel de reflexión que debe "crear buenos recuerdos y significado" para los usuarios que nos enfocamos en la función pero que carecen de conexión emocional. Es como construir una casa fuerte, pero nadie quiere quedarse porque no da la sensación de la palabra "casa". La ignorancia de las emociones del usuario es la raíz del problema que hace que nuestro sitio web solo sea "herramientas" pero no "amigos" en los que los usuarios piensan

-[Inmediato]-

Solicitud de ilustraciones: Imágenes infográficas simples El cerebro humano se divide en 2 partes: "lógica" (con un icono en forma de engranaje, gráfico) y "emoción" (con íconos en forma de corazón, estrellas, caras sonrientes) con las flechas que la mayoría de los diseños se centran en la lógica, pero las flechas que apuntan a la emoción están vacías.

-[/Inmediato]-

Deje que el sitio web se "sece" más ... resultados más dolorosos de lo esperado

Si continuamos dejando que nuestro sitio web sea un área hermosa pero expuesta, las consecuencias fueron más graves que las "ventas no son explosivas", pero es una marca de corrosión a largo plazo. Imaginar:

• La lealtad de la marca es cero: cuando no hay un vínculo emocional, los clientes no tienen una razón para ser leales a su marca. Está listo para cambiar a un competidor tan pronto como haya una propuesta un poco mejor.
• No hay más (boca a boca): la gente compartirá o dirá qué los hace sentir "wow", "impresionantes" o "diversión". El sitio web que se "puede usar" no será recordado ni mencionado en absoluto.
• Desaparecer en el mar de los competidores: en una época, todos pueden crear un hermoso sitio web "sentimiento" es algo que crea verdaderas diferencias. Si su sitio web no es emocional, no se verá diferente de otros sitios web. Millones en el mercado
• Pérdida de oportunidades para crear comunidad: el sentimiento común es la base de la construcción de la comunidad. Los sitios web de Heartless no pueden construir una base de fanáticos que esté listo para apoyar y proteger su marca.

Ignorar el diseño emocional es como si intentes agregar agua a la fuga. Es posible que pueda obtener muchos presupuestos de marketing para atraer a las personas. Pero al final, fluirán por completo porque su sitio web "sus sentimientos" no pueden mantener su bien ". Comprender el impacto del sitio web de la organización en la marca lo ayudará a ver la imagen más claramente por qué este asunto es extremadamente importante.

-[Inmediato]-

Solicitud de ilustraciones: antes/después de imágenes comparativas. El primer lado es un tanque de agua con muchos agujeros. El agua fluyó casi por completo. (Es como un cliente que ha fallecido). El lado posterior es un tanque de agua que se ha filtrado con íconos en forma de corazón. Y tiene un tanque completo (como los clientes que todavía están con la marca)

-[/Inmediato]-

¡Despierta tu corazón para tu sitio web! A partir de 3 niveles de diseño emocional

La buena noticia es ... ¡podemos despertar nuestros corazones para que nuestro sitio web sea animado! Y el mejor punto de partida es comprender y aplicar los 3 niveles del diseño emocional de Don Norman en Interaction Design Foundation. Veamos cuál es cada nivel y dónde podemos comenzar:

• Nivel 1: Diseño visceral (el diseño que afecta a los instintos): este es el "amor primero". Es la primera impresión que ocurrió en un segundo. El usuario juzgará inmediatamente que "le gusta" o "no le gusta" sin siquiera pensar. Es la historia de "Look and Feel".
  A partir de aquí: enfócate con la calidad de la ilustración, el uso del color que transmitía las emociones de la marca, la hermosa tipografía, el diseño fácil de leer, limpio y atractivo.
• Nivel 2: Diseño de comportamiento (diseño que responde al comportamiento): Cuando el usuario comienza "use" su sitio web, la sensación cambiará a la "facilidad" y la "eficiencia", ¿su sitio web le facilita la vida? ¿Usado y se sintió inteligente y capaz de lograr algo como desee?
  Comenzando desde aquí: hacer que el sitio web sea más fácil de usar (usbilidad), reducir los procedimientos complejos, permitiendo que las acciones de cada usuario tengan una respuesta clara (comentarios), como usar microinteraciones encantadoras
• Nivel 3: Diseño reflexivo (el diseño que crea una reflexión): este es el más alto y más poderoso. Es el sentimiento. "Después" ¿Qué usuario se ha utilizado en su sitio web? ¿Lo hace sentir bien consigo mismo? ¿Está vinculado a la identidad o al valor que tiene? Es la creación de "historias" y "significado".
  Comience desde aquí: cree una marca que valga la pena seguir, utilizando la escritura de UX que muestre comprensión (como un mensaje de error amistoso), creando una sensación de marcas y dando "valor" que es más que el producto o servicio.

El diseño perfecto es combinar los 3 niveles juntos. Para crear experiencias que no sean solo "satisfactorias", sino que es memorable ". Si necesita expertos para ayudar a colocar estrategias en esta sección, servicio de diseño UX/UI está listo para dar consejos.

-[Inmediato]-

Información de las ilustraciones: 3 capas de pirámide piramidal, el piso inferior es "visceral" (icono en forma de ojo), la capa media es "conductual" (icono en forma de mano, uso) y el piso superior es "reflexivo" (el icono en forma de cerebro, el significado/historia) con breves explicaciones en cada capa.

-[/Inmediato]-

Casos reales de MailChimp: cuando "Monkey" crea bonos de clase mundial

Si habla sobre el ejemplo de una empresa que usa el diseño emocional, se convierte en una leyenda de "MailChimp". Debe ser el primero. MailChimp es una plataforma para el marketing por correo electrónico, que es una técnica "aburrida" y "completa, pero pueden hacerlo" divertido "y" amigable.

Problema inicial: la campaña de correo electrónico es estresante y preocupada para los especialistas en marketing. Tienes que verificar y verificar de nuevo. Miedo de enviar errores y esperar que los resultados salgan bien

Cómo solucionar con el diseño emocional: MailChimp entiende esta sensación bien. Y diseñaron la experiencia en todos los niveles para convertir el estrés en felicidad:

• Visceral: usan monos de mascota llamados "Freddie" con personajes lindos y lúdicos, estilo único y lenguaje amigable. Lo hace sentir bien
• Comportamiento: su plataforma tiene fama de ser muy fácil de usar. Los pasos son claros, no complicados. Hace que el usuario sienta que "puede hacer" y "controlar" todo
• Reflexivo: el máximo pico es "después" de que ya ha enviado una campaña de correo electrónico. En lugar de encontrar una pantalla aburrida, MailChimp mostrará la animación del mono Freddie que es "Hi-Five" con usted con un mensaje para alentar a esta pequeña cosa a crear enormes impactos emocionales. Convierte los momentos más estresantes en una época de "celebración" y "buenos sentimientos". Muchos usuarios incluso toman fotos de esta pantalla para compartir en las redes sociales con buenos sentimientos.

Resultados: La inversión en diseño emocional hace que MailChimp no solo sea una "herramienta", sino que se convierte en un "amigo socio" de los vendedores mundiales. Hasta que se convierta en miles de millones de dólares, este es el poder del diseño que realmente comprende el "corazón" del usuario.

-[Inmediato]-

Solicitud de ilustraciones: el modelo de pantalla de MailChimp con Freddie Mascoting Freddie es una actuación divertida (como el alto cinco) después de que algunos usuarios trabajan. Con un gráfico que muestra la satisfacción del cliente (satisfacción del cliente)

-[/Inmediato]-

¡La lista de verificación se puede usar de inmediato! Levante su sitio web para vivir en 3 pasos.

¿Le gustaría tratar de aplicar el diseño emocional a su sitio web pero no sabe cómo comenzar? ¡No te preocupes! Intente usar esta lista de verificación simple. Se puede dividir en 3 niveles para que pueda hacerlo de inmediato.

Paso 1: Modificar "Nivel visceral"

• [] Imágenes de alta calidad: ¿ Todas las imágenes en el sitio web son claras, hermosas y comunican las emociones de la marca?
• [] Paleta, el color correcto: el color utilizado en la web es consistente con la personalidad de la marca y crea la sensación deseada (como azul = confiable, amarillo = diversión) o no?
• [] Fuentes que son fáciles de leer y tienen personajes: ¿ Las letras se ven bien, leen cómodamente y coinciden con el estado de ánimo y el tono en general?
• [] Espacio en blanco adecuado: ¿hay un espacio para "aliento"? ¿O todo es tan incómodo?

Paso 2: crea una experiencia que "nivel de comportamiento"

• [] Encantador micro-internacional: ¿hay una pequeña respuesta que nos haga usar? (Como el botón que cambia de color al apuntar el mouse, el icono que puede moverse). Una buena microinacciones lo ayudará a obtener más ideas.
• [] Reducir ideas: ¿diseñado teniendo en cuenta los prejuicios o ideas cognitivas para reducir la carga de los usuarios?
• [] Mensaje de navegación claro: ¿ El usuario siempre sabe qué hacer a continuación? ¿Varios botones y menús fáciles de entender o no?
• [] Comentarios de manera oportuna: cuando el usuario tiene éxito (como llenar el formulario), ¿hay un mensaje de confirmación claro y amigable?

Paso 3: Relación "Nivel reflexivo"

• [] Marcas (sobre nosotros): la página "Acerca de nosotros" ¿Puede contar una historia encantadora e inspiradora?
• [] Escritura UX que entiende: lenguaje que usa al usuario "como humano" y muestra cuánto comprensivo. Especialmente en la página de mensajes de error que deberían ser rescatados, no agravado, intente estudiar más del artículo. Escribir un buen mensaje de error
• [] Crear un sentimiento especial: ¿ dar un privilegio especial, gracias o contenido específico para que los clientes regulares lo hagan sentir "personas importantes"?
• [] Vinculado con valores más altos: ¿a qué se defiende su marca? (Como la sostenibilidad, ayudar a la sociedad) y ¿comunica a ese usuario?

Simplemente comience esta lista de verificación una por una. Su sitio web comenzará a tener un "corazón" y creará un mejor vínculo con los usuarios.

-[Inmediato]-

Solicitud de ilustraciones: imágenes de lista de verificación grandes que se ven hermosas y fáciles de usar. Con 3 temas principales, visceral, conductual, reflexivo y tiene un lindo icono ensamblado en cada elemento

-[/Inmediato]-

Preguntas que las personas tienden a preguntarse (preguntas frecuentes) sobre el diseño emocional.

Hemos compilado una pregunta que muchas personas se preguntaban sobre el diseño emocional con respuestas claras y fáciles de entender aquí.

P: ¿El diseño emocional es adecuado para cada negocio? ¿O solo adecuado para la marca de productos de estilo de vida?
Respuesta: ¡Adecuado para cada negocio! Ya sea que venda software B2B, servicios financieros o bienes de consumo, su usuario sigue siendo un "humano" que tiene sentimientos. La creación de sentimientos positivos como la fiabilidad, la seguridad, los sentimientos de atención son importantes para cada negocio. El diseño que comprende las emociones siempre ayudará a hacer las diferencias y ventajas en la competencia.

Pregunta: ¿Si tenemos un presupuesto limitado debería comenzar a invertir con diseño emocional primero?
Respuesta: Comience con cosas pequeñas. Eso puede hacer que mucho impacto también se conozca como "fruta de baja caña", como
1. Escritura de UX: Mejore el texto en el botón (CTA), el tema y la messee de errores para que sea más amigable y comprensible. Esta parte usa el menor costo pero ver los resultados.
2. Micro-Invertencias: agregue un poco de animación al presionar el botón o cargar la página web. Para que el uso se vea más animado.
3. Imagen: seleccionar o tomar la imagen principal (imagen de héroe) que se utilizará en la primera página. Porque es lo primero que los usuarios ven e impresionan de inmediato

Pregunta: ¿Cómo podemos medir el éxito del diseño emocional?
Respuesta: Incluso los "sentimientos" son difíciles de medir. Pero podemos medir a través de los cambios de los usuarios, como
el tiempo en la página (cuando se usa en la página web): si el usuario se siente agradable, estará en la web más tiempo
: páginas por sesión (el número de aperturas por tiempo): los buenos sentimientos los alentarán a explorar su sitio web más
: tasa de conversión (tasa de concentración): confianza positiva y sentimientos directamente a la compra o contacto
- mentes de marca (hablando de marcas): aviso en las medios sociales. ¿Que alguien está hablando de buenas experiencias en su sitio web?
- Encuestas de satisfacción del cliente (Encuesta de satisfacción): agregue preguntas sobre "sentimientos" para usar en la encuesta.

-[Inmediato]-

Solicitud de ilustraciones: Icono de marca de interrogación grande (?) Rodeado de un pequeño icono que transmite varias preguntas como presupuesto, medición, tipo de negocio

-[/Inmediato]-

En conclusión: es hora de dejar de crear "sitio web" y luego crear un "sentimiento".

En este punto, creo que todos verán la misma imagen de que el diseño exitoso del sitio web en esta era no puede centrarse en "belleza" o "facilitar", pero deben ir a la creación "buenos sentimientos" para suceder en la mente de los usuarios. Hemos aprendido los 3 niveles de Don Norman de visceral (instinto), conductual (comportamiento), hasta reflexivo (reflexión), que es una impresión verde importante para crear una experiencia completa y memorable.

La inversión con el diseño emocional no es solo una decoración web para verse bien. Pero es una inversión crear "relaciones" a largo plazo, es un cambio de "visitantes" a "fanáticos" y cambiar de "marca" para convertirse en un "amigo" en el que los usuarios piensan y confían. No permita que su sitio web sea solo un código y un píxel animado.

¡Es hora de despertar su corazón para su sitio web! Intente usar la lista de verificación que damos para usar poco a poco. Le garantizo que definitivamente comenzará a ver los cambios. ¡Comience hoy para crear un sitio web que su usuario "amará", no solo "usar"! Si necesita un equipo profesional para ayudar a crear un sitio web que sea hermoso y comprenda el corazón de los usuarios, consulte al equipo de diseño de UX/UI de Vision X Brain de forma gratuita. Estamos listos para ser socios y crear resultados impresionantes para su negocio.

-[Inmediato]-

Solicitud de ilustraciones: gráficos potentes que muestran la mano del diseñador, cambiando el boceto del sitio web (estructura de alambre) en una línea sin vida para convertirse en un sitio web colorido y un ícono en forma de corazón que flota. Transmitir sitios web normales a un sitio web animado

-[/Inmediato]-

‍