jueves, 1 de marzo de 2018

El Anzuelo Definitivo UX: Diseño Anticipatorio, Persuasivo y Emocional en UX


La próxima frontera en el diseño de UX abarcará la ciencia de la publicidad y la persuasión para forjar conexiones humanas más fuertes que generen experiencias de productos positivas y atractivas.

¿La publicidad realmente funciona? Las compañías estadounidenses gastan alrededor de $ 170 mil millones en publicidad cada año, por lo que parecen pensar que sí. La publicidad exitosa usa una variedad de trucos para influenciar al consumidor. Evocan recuerdos positivos y emociones que afectan nuestro comportamiento a lo largo del tiempo y nos instan a comprar algo en una fecha posterior.
La publicidad necesita alcanzar los niveles subconscientes del cerebro para que funcione. A la gente no le gusta pensar que la publicidad los puede influenciar fácilmente, pero lo son. Por ejemplo, la publicidad usa caras felices y modelos atractivos que miran o usan un producto o servicio. Debido a que tenemos lo que los científicos del comportamiento llaman neuronas espejo, el mensaje es imitar la expresión de la persona en el anuncio e imaginar nuestro yo mejor y más exitoso utilizando el mismo producto.
la ciencia de la publicidad es un diseño emocional y persuasivo
¿Pueden los diseñadores aplicar algunas de las técnicas comprobadas en la ciencia de la publicidad al diseño de productos? ¿Pueden los diseñadoresaprovechar algunos de estos factores de influencia en el comportamiento para optimizar las experiencias de los usuarios? ¿Pueden aprovechar el diseño anticipatorio, emocional y persuasivo para empujar a los usuarios en una dirección determinada y proporcionar una mejor experiencia de usuario? ¡Absolutamente!

Una talla no sirve para todos

Hay muchos trucos visuales que los diseñadores pueden emplear para llevar a un usuario a un determinado llamado a la acción.Landing page. Los diseñadores son maestros de estos secretos.
El diseño visual es muy efectivo, pero el diseño visual por sí solo no siempre puede persuadir y empujar a los usuarios por un camino determinado. Grandes botones naranja de llamada a la acción, trucos visuales como F-patterns y Z -patterns, y otros no siempre pueden hacer el truco por completo.
patrón de lectura z ejemplo diseño persuasivo
Callfire utiliza un patrón Z y un destacado botón naranja CTA para optimizar el compromiso del usuario.
En esta era digital, las personas desean una conexión más profunda con las marcas y los productos. La combinación de diseño anticipatorio, emocional y persuasivo es el siguiente nivel y va más profundamente para crear experiencias más personalizadas y significativas.

¿Qué es un diseño anticipado?

Es salida, sin mucha necesidad de entrada.

El 89% de las empresas exitosas reconocen que es fundamental para su crecimiento que anticipen las necesidades de los clientes y proporcionen experiencias de asistencia a lo largo del recorrido del cliente (Fuente: Econsultancy/Google).
La aplicación del diseño anticipatorio es más importante que nunca si las empresas digitales simplifican y facilitan el curso de nuestras vidas digitales. El diseño anticipatorio prevé un mundo donde nuestros dispositivos digitales están diseñados con métodos de interacción optimizados para humanos, no computadoras.
Aaron Shapiro de Huge define el diseño anticipatorio como un método para simplificar los procesos respondiendo a las necesidades un paso adelante de las decisiones del usuario, es decir, respondiendo a las necesidades del usuario aún no expresadas.
El diseño anticipatorio en su mejor forma va más allá de la personalización. Presenta una interfaz limpia e intuitiva que se ajusta exactamente de la manera que esperas.
Por ejemplo, la visualización de la película de Netflix es personalización; se basa en las preferencias de sabor y la historia. El diseño anticipado tomaría el diseño más profundo. Con algoritmos inteligentes (AI y aprendizaje automático), la interfaz realmente cambiará en el momento en que interactúa con la aplicación.
netflix diseño de interfaz de usuario personalizado no diseño anticipatorio
Netflix es un ejemplo de personalización pero no de diseño anticipatorio.
El diseño anticipado significaría — en el caso de las compras en línea, por ejemplo — que el sistema lo conocería y personalizaría la experiencia en la medida en que se sentiría como si estuviera siendo guiado por una mano invisible. Basado en datos, realmente cambiaría la interfaz de usuario sobre la marcha, eliminaría cualquier información extraña, preseleccionaría las opciones predeterminadas para usted y solo presentaría el contenido más relevante de manera oportuna, minimalista y aparentemente mágica.
Esto no es muy difícil de lograr hoy.
Digamos que alguien está comprando una guitarra costosa en guitarcenter.com. Al momento del pago, el sitio mostraría automáticamente “Pick Up in Store” como la opción predeterminada porque sabe al observar el comportamiento anterior de otros usuarios que compraron guitarras costosas que preferirían retirar su compra en la tienda física más cercana. almacenar.
ecommerce checkout anticipatory design
Para una guitarra cara, "Recoger en Tienda" debe estar preseleccionado en función del comportamiento anterior del usuario.
No se trata de personalización o personalización, sino de anticipación, porque el sistema anticipa la siguiente necesidad más lógica del usuario en función de una variedad de factores y millones de puntos de datos.

Interfaces del futuro

Cuando la IA se vuelve más penetrante, un mayor grado de personalización basada en datos permitirá un mayor nivel de diseño anticipatorio.
En función de todo tipo de seguimiento de comportamiento autorizado por el usuario: historial de compras, preferencias, etc., el sistema lo reconocerá y, con un alto grado de certeza, podrá predecir cuál será su próxima elección. Detrás de todo esto se encuentra la promesa de la IA y el aprendizaje automático, que no solo emplean algoritmos predictivos, sino que realmente deducen las necesidades individuales de interacción basadas en la observación del comportamiento de millones de personas.
Increíblemente, Airbnb falla incluso en la forma más básica de diseño anticipatorio. Cuando un anfitrión no responde a una solicitud de reserva, Airbnb presenta a los usuarios un enlace, “El anfitrión no respondió. Intente encontrar un nuevo espacio” (abajo). La expectativa razonable es que Airbnb prellenaría la misma ubicación y fechas y presentaría a los usuarios los resultados. Parece que tiene sentido común, ¿verdad? En cambio, los usuarios vuelven a la página de inicio y deben comenzar su búsqueda desde cero.
la falta de diseño anticipatorio básico de airbnb
Por el contrario, una de las evoluciones más ambiciosas del software de búsqueda de Google, la aplicación Google Now, es más efectiva.
La idea es simple: prediga lo que desea, o necesita, saber antes de saber que lo necesita o lo quiere y preséntelo en un formato fácil de leer y basado en tarjetas. Está anticipando la necesidad del usuario de información contextual en el momento.
Las capacidades de minería de datos de Google son inigualables. No solo sabe quién es usted, sino que también tiene acceso a miles de millones de otros puntos de datos en tiempo real que puede extraer de su amplia bóveda de datos. Puede mostrar tarjetas con información personalizada, con información de ubicación, como eventos de calendario, clima local, noticias, vuelos, tarjetas de embarque, hoteles, restaurantes y más.
Si Google no cree que necesite algo en este momento, no se mostrará. Es la encarnación del diseño anticipatorio y solo mejorará con el tiempo.
google ahora aplicaciones de diseño anticipadas

¿Cómo ponemos en juego el diseño anticipatorio?

Hasta que cuenten con algoritmos predictivos increíblemente sofisticados, inteligencia artificial completamente desarrollada que monitoree constantemente millones de puntos de datos y aprendizaje automático, las empresas pueden extraer los datos existentes para las oportunidades de diseño anticipatorio, reduciendo así los posibles puntos débiles y las barreras.
Una investigación más profunda de los usuarios también nos dirá mucho — observación contextual, tal vez, o estudios etnográficos — donde podríamos observar lo que los usuarios están dispuestos a hacer en su flujo de momento a momento. Podríamos hacer un mapa de estos viajes del usuario paso a paso y diseñar la interacción en consecuencia.
El resultado ideal de aplicar dicha minería de datos y personalización, junto con métodos de diseño centrados en el usuario, crearía experiencias anticipadas fluidas y sin interrupciones que agradarían a los clientes y generarían lealtad al hacer aparecer las cosas correctas en el momento adecuado para que interactúen … si por magia

Diseño emocional

La recompensa para las empresas que se conectan con las emociones de los clientes de una manera positiva puede ser sustancial. Entonces, ¿cómo podemos identificar los poderosos motivadores que conducen a hacer esas conexiones? El diseño emocional puede influir en esos motivadores, allanando el camino en los negocios a una ventaja competitiva y crecimiento.
Como humanos, establecemos una especie de conexión emocional con todos los productos que utilizamos. Por lo tanto, esperamos algún nivel de retroalimentación similar a la humana cuando interactuamos con ellos. Aunque sabemos que los productos no son humanos y no pueden sentir emoción, queremos creer que sí pueden.

¿Cómo se relaciona la emoción con el diseño?

Todo lo que nos rodea ha sido diseñado de alguna manera, y todo diseño en última instancia produce una emoción debido a las expectativas. Cuando se cumplen esas expectativas, experimentamos una emoción positiva, cuando no se cumple, una negativa. Experimentamos una reacción emocional a nuestro entorno momento a momento: un gusto o una aversión, alegría, alegría, frustración. Lo sentimos, es personal.
Existe un viejo adagio en el mundo de los profesionales de UX: “La interacción con cualquier producto produce una experiencia, ya sea que tenga diseño de UX o no”. Tome diseño industrial, por ejemplo, y encontrará que sus productos provocaron una emoción de su audiencia, ya sea bueno o malo, agradable o frustrante.

Interacción → Respuesta → Emoción

Reflexionemos sobre la definición de diseño de UX: “El diseño de UX considera cómo un usuario interactúa y responde a una interfaz, servicio o producto”. Esa respuesta se puede definir como emociónLos diseñadores de experiencia del usuario no solo se esfuerzan por diseñar productos funcionales y utilizables, sino que también generan un cierto efecto emocional positivo. mientras que las personas están usando ese producto, a menudo llamado por el término groseramente usado, “deleite del cliente”.
Cuando hablamos de diseño emocional, estamos hablando de cómo el diseño de un producto o una interacción afecta al usuario. En el caso del diseño digital, es un efecto momento a momento para el usuario, “en el flujo”, y opera en tres niveles en el cerebro: visceral, conductual y reflexivo. Hay una demora entre estos niveles: primero, es visceral; segundo, es conductual, y por último; reflexivo. La experiencia en realidad se mueve desde el sistema límbico (cerebro “visceral”) hasta la neocorteza (analítica) hasta el cerebro medio (emoción). Pero más sobre esto más tarde.
aston martin de James James, visceral, diseño emocional
Un ejemplo de diseño visceral clásico: Aston Martin de James Bond: elegante, emocionante.

Estética y Usabilidad Percibida

Braun, una empresa de diseño y fabricación muy exitosa fundada hace casi 100 años en Alemania, era famosa por sus diseños minimalistas y elegantes que cautivaban a la gente. Eran funcionales pero también simples, refinados, bonitos y, en consecuencia, un placer utilizarlos.
diseño emocional minimalista por braun
Diseño industrial por Braun
Los diseños utilitarios que son simplemente funcionales y ricos en funciones no suelen agradar a las personas. En este día y edad, no se ponen a la altura ni satisfacen a los clientes.
“Un diseño básico siempre es funcional, pero uno excelente también dirá algo”. – Tinker Hatfield, diseñador de zapatos, Nike
Las personas perciben que las cosas funcionales y atractivas “funcionan mejor”. Los productos que incluyen un diseño estético y anticipatorio agradable pueden llevar a tal grado de satisfacción del cliente que las personas perdonarán frustraciones menores cuando encuentren imperfecciones con esos productos.
¿Alguien recuerda Blackberry y Nokia? Algo suena, pero son historia. Contraste sus diseños con el iPhone o los diseños elegantes de Samsung que satisfacen a las personas.
diseño para teléfonos de emoción, manzana y samsung
Teléfonos móviles Apple y Samsung: diseño emocional liso, resbaladizo, funcional, y atractivo.

La emoción y el cerebro

Las emociones en realidad cambian la forma en que funciona el cerebro humano. Las experiencias negativas enfocan al cerebro en lo que está mal; reducen el proceso de pensamiento y hacen que la gente se sienta ansiosa y tensa. No nos sentimos libres y “fluidos”. Nos sentimos restringidos y frustrados.
Si un sitio web o una aplicación está mal diseñado y no funciona según las expectativas, la sensación puede convertirse en enojo. Esto se conoce como “rabia informática”. Nuestra frecuencia de pulso aumenta, hacemos clic fuera del sitio y eliminamos la aplicación por frustración. Este es un ejemplo de “diseño errado” que produce una emoción extrema. Un buen diseño emocional provoca placer y una sensación de seguridad.
diseño funcional versus diseño emocional
Incluso el viejo pelador de patatas puede diseñarse para la emoción. Se trata de cómo se ve, se siente y funciona.

“Diseño Es Cómo Funciona” – Steve Jobs

“La gente está buscando productos que no solo sean sencillos de usar, sino también un placer de usar”. – Bruce Claxton, Profesor, Gerencia de Diseño en Savannah College of Art and Design
fiat 500, lindo, divertido, combina diseño y emoción
Similar a los iMac translúcidos de color caramelo, el Fiat 500 tiene un diseño lindo y divertido.

De pasivo a interactivo

No siempre tuvimos “relaciones interactivas” con los objetos y sistemas que nos rodean. Han sido en su mayoría “tontas”, pasivas, máquinas de un solo sentido. Un automóvil era para llevarnos de A a B. Ahora esperamos hablar con nuestro automóvil y nos responde.
Estamos interactuando más con los productos y formando relaciones con ellos, y eso se vuelve emocional. Esta interacción da lugar a antropomorfismo : la tendencia a proyectar rasgos, emociones o intenciones humanas en entidades humanas.
Cuando las personas establecen relaciones con las cosas, también existe la posibilidad de que surja una emoción negativa cuando la cosa no está haciendo lo que queremos. La molestia y la irritación pueden surgir con la posibilidad de escalada a la ira si la agravación persiste. En el otro extremo de la escala, los usuarios se sienten satisfechos y totalmente encantados cuando ponen justo lo que estaban buscando en la punta de sus dedos, y en el momento perfecto. UX nirvana.
el diseño emocional busca evocar emociones positivas
Las emociones con valencia positiva son evocadas por eventos, objetos o situaciones con valencia positiva.

¿Cómo entregamos un diseño emocional que da lugar a emociones positivas?

Las estrategias de experiencia del cliente deben incluir el diseño de toda la experiencia humana, que incluye la emoción. Los diseñadores deben utilizar el poder de la investigación del usuario y las pruebas de productos para configurar y medir de manera efectiva el efecto emocional del producto en los usuarios. Los diseñadores no solo deben esforzarse por eliminar las frustraciones, sino también encontrar oportunidades que hagan que los clientes se deleiten y se vuelvan críticos. momentos en experiencias emocionales positivas.

Visceral → Comportamiento → Reflexivo

Para crear un producto exitoso, un diseño debe funcionar extremadamente bien en los tres niveles descritos anteriormente: visceral, conductual y reflexivo. (Enorme asentimiento aquí al libro seminal de Don Norman sobre diseño emocional.)
Diseño visceral: “Lo quiero. Se ve increíble, al igual que yo.” Esta es una reacción instintiva inmediata de nivel profundo a su producto. Como dicen, “nunca tienes una segunda oportunidad de causar una primera impresión”. El diseño visceral también afecta la percepción de la credibilidad, confiabilidad, calidad, atractivo e incluso la facilidad de uso percibida de su producto.
diseño visceral para la emoción
Diseño visceral: divertido, emocionante, rápido, intransigente, intimidante.
Diseño de comportamiento: “Puedo dominarlo. Me hace sentir inteligente.” Tiene que sentirse bien, verse bien y tener un buen desempeño. El diseño conductual es un concepto que se centra en cómo una estructura o sistema, según lo ven los usuarios, satisface sus necesidades y requisitos. Un buen diseño de comportamiento es como un candado y una llave. Los clientes y su comportamiento son el bloqueo, y el producto es la clave. La armonía perfecta se logra cuando los dos trabajan juntos sin problemas.
Diseño reflexivo: “Me completa. Puedo contar historias sobre eso (y sobre mí).” Se trata de la autoimagen, la satisfacción personal, los recuerdos, reflejando la experiencia. La belleza es una característica deseable de los productos que compramos. Comprar y luego usar un producto crea un sentido de estatus en la sociedad. La gente pregunta: “¿Es hermoso? ¿Fue un placer usarlo? ¿Me facilitó la vida? ¿Cómo me veo usándolo, manejándolo o usándolo?”
image alt text
Diseño reflectante: la aplicación de banca a la izquierda es funcional y suficiente, pero no funciona bien como diseño reflectante. Por el contrario, el diseño de la aplicación de monitor de bebé es atractivo y un placer de usar.
Puede parecer obvio, pero si el diseño de un producto debe ser emocional, la gente necesita sentir una conexión emocional con ese producto. Las grandes marcas y sus vendedores hacen todo lo posible para formar un vínculo emocional entre sus marcas y consumidores, y gastan millones cada año para renovar esa conexión. Del mismo modo, los diseñadores deben esforzarse por obtener la misma conexión emocional para que sus productos tengan éxito.

Belleza funcional y emoción

Ya no basta con decir: “Estamos uniendo un producto impulsado por software que superará los límites de la tecnología y será funcional y útil para las personas”. Como la tecnología nivela el campo de juego, casi cualquier persona puede reunir un equipo y tecnología para crear productos de consumo diarios funcionales y ricos en funciones.
Sin embargo, lo que es una tarea más difícil es tener una comprensión profunda de las motivaciones y el comportamiento de sus clientes. Traducirlos en un diseño emocional efectivo que sea elegante, hermoso y verdaderamente único desempeñará un papel vital en la entrega de una experiencia ideal para el cliente.

Diseño persuasivo

Al utilizar un diseño persuasivo, los diseñadores conocedores pueden aprovechar el pensamiento y las motivaciones no conscientes de los consumidores para diseñar productos de mejor rendimiento.
La palabra “persuasión” a menudo se asocia con la manipulación, el engaño y la influencia indebida. Sin embargo, estamos hablando de emplear algunas de estas técnicas de una manera ética. El diseño persuasivo puede mejorar la experiencia del usuario haciendo que un producto sea más atractivo; el proceso de diseño comprende los factores desencadenantes psicológicos y las conductas del usuario y los utiliza para su beneficio.
A medida que un número cada vez mayor de compañías utilizan la investigación y las teorías de la neurociencia para optimizar su contenido digital, han convertido lo que solía ser un arte en una ciencia para impulsar un mayor compromiso y compra. Esa ciencia es la ciencia de la persuasión, y se divide en seis principios. La “ciencia” es parte del trabajo de Dr. Robert Cialdini , un investigador líder en el campo, y es el resultado de años de investigación científica sobre la psicología de la influencia.

Los seis principios de la persuasión

  1. Reciprocidad
  2. Escasez
  3. Autoridad
  4. Consistencia
  5. Me gusta
  6. Consenso
Estos seis principios proporcionan atajos psicológicos en las vidas cada vez más sobrecargadas de las personas como reglas básicas para guiar su toma de decisiones.

Reciprocidad

¿Alguna vez se ha encontrado con una página de inicio que ofrezca algo para que descargue de forma gratuita? ¿Qué tal una prueba gratuita de dos semanas de un servicio? Eso es reciprocidad en acción y está diseñado para comenzar un embudo de ventas.
El concepto es simple; si nos dan algo primero en forma de comportamiento, regalo o servicio, nos sentimos obligados a devolver. Hulu, Netflix, Amazon Prime y muchos otros ofrecen a las personas una prueba gratuita de su servicio. Por un lado, la gente puede probar los servicios, pero hay otro componente incluido en esta oferta, y es psicológico: el principio de reciprocidad.
la reciprocidad del período de prueba de hulu en acción

Escasez

Los conceptos de escasez y “FOMO” (fear of missing out) están estrechamente vinculados. Ambos sirven necesidades psicológicas poderosas. Wikipedia define FOMO como “una aprehensión generalizada de que otros puedan estar teniendo experiencias gratificantes de las cuales uno está ausente”. Es la base de todos los aspectos adictivos de las redes sociales.
Por un lado, la escasez está ligada a la supervivencia como un mecanismo desencadenante inconsciente fundamental, y en un lado más claro, es un principio que las personas quieren más de esas cosas que perciben como que tienen una disponibilidad limitada.
principio de escasez de Amazon ecommerce en acción
Amazon usa el principio de escasez de manera efectiva agregando una nota de urgencia a un producto en el carrito.

Autoridad

Las personas siguen el ejemplo de expertos creíbles y conocedores, por lo que es más probable que compren un producto o servicio recomendado por un experto. Esta es la razón por la cual una revisión de cámara patrocinada, por ejemplo, comenzaría con la frase: “Soy un fotógrafo profesional con más de 15 años de experiencia”.
Un artículo con “expertos dicen” en el título es probable que se lea mucho más que uno sin él porque las personas confían en los expertos y la autoridad. Esta es la razón por la cual a un experto en la industria o una celebridad se le paga mucho para respaldar un producto.
los expertos dan credibilidad, el principio de autoridad
La página de destino del teléfono Pixel de Google usa la revista Wired como la "autoridad".

Consistencia

El principio de coherencia establece que las personas están motivadas hacia la coherencia cognitiva y cambiarán sus actitudes, creencias, percepciones y acciones para lograrlo. A las personas les gusta mantenerse coherentes con las cosas que dijeron o hicieron anteriormente.
La coherencia se activa al buscar y pedir que se hagan pequeños compromisos iniciales. Por ejemplo, una vez que alguien ha donado a una causa benéfica, la mayoría de las veces se le pedirá que done de nuevo, a veces en un correo electrónico de agradecimiento muy pronto después de su donación inicial. Este método de diseño persuasivo está usando el principio de consistencia.
formulario de donación utilizando el poder de la coherencia, un principio de persuasión
Esta forma de donación no solo utiliza el principio de consistencia: un correo electrónico de agradecimiento invita al donante a donar nuevamente, pero también el poder del "deseo mimético" que muestra a las celebridades que donaron.

Gusto

Uno de los principales elementos de persuasión de Cialdini es el “gusto”. (Esto no tiene nada que ver con los Me gusta de Facebook.) Si me parece agradable, es más probable que haga negocios con usted. La similitud aumenta el gusto. Si parecemos ser miembros del mismo grupo o tenemos cosas en común, es incluso más fácil que te gusten.
¿Cómo funcionan los diseñadores de productos con esta técnica persuasiva? Al diseñar en el producto una conexión humana y simpatía. Por ejemplo, una página “Acerca de nosotros” que muestra a los visitantes caras cálidas y amistosas detrás del producto o empresa, o destacando personas detrás de una organización benéfica en su página de inicio.
Cialdini incluso sugiere utilizar la página “Acerca de nosotros” para ser más agradable al incluir información personal e intereses personales.
mailchimp utilizando el principio de gusto en el diseño persuasivo
MailChimp hace un gran trabajo personificando a su equipo y negocio al mismo tiempo que comparte su historia.

Consenso

Especialmente cuando no están seguros, las personas considerarán las acciones y comportamientos de los demás para determinar los propios.
Por ejemplo, Walmart, al igual que muchos minoristas de comercio electrónico, persuade a los usuarios a seguir comprando más recomendando productos y accesorios alternativos y empleando patrones miméticos y persuasivos mostrando productos también comprados por otros clientes. Este es el “deseo mimético” en acción.
¿Recuerdas las “neuronas espejo” en la ciencia de la publicidad mencionada al principio de este artículo? Es lo mismo. Los neurocientíficos informan cada vez más que nuestra estructura neuronal promueve la imitación de manera muy eficaz. Walmart aprovecha este concepto.
diseño de comercio electrónico de walmart
Walmart utiliza el "efecto de consenso" mostrando que "los clientes también compraron estos productos."

Diseñar el Ultimate UX Hook está dentro del alcance

La experiencia del cliente importa más que nunca en esta era digital. La incesante búsqueda de ofrecer mejores productos y experiencias de los clientes debería ser una buena razón para que las empresas y los diseñadoresintegrar las tecnologías más inteligentes y los aspectos psicológicos del diseño en su plan maestro cotidiano.
Las técnicas de aprendizaje automático alimentadas por datos avanzan día a día y se están probando en diversas aplicaciones en todo el espectro de productos digitales para mejorar las experiencias del usuario. La inteligencia artificial, capaz de proporcionar una fórmula predictiva óptima en cualquier escenario que anticipa las necesidades del usuario, también podría ser la clave para optimizar estas experiencias.
Hoy, los diseñadores han evolucionado de “comunicadores visuales” a arquitectos del comportamiento humano. Veremos muchas nuevas oportunidades de diseño, y las que emplean la minería de datos profunda y consideran la psicología humana en sus diseños jugarán un papel directo y esencial en esta evolución.
Esas “experiencias mágicas” elusivas que todos los diseñadores de UX se esfuerzan por encontrar en la intersección donde el progreso en la inteligencia artificial y el aprendizaje automático cumple con los aspectos psicológicos y los impactos conductuales del diseño.
En el futuro, cada diseñador que se precie debe considerar redondear su caja de herramientas con ideas de minería de datos junto con un diseño anticipatorio, emocional y persuasivo para crear productos útiles, eficientes, deseables y duraderos. 

Este articulo fue escrito por Miklos Philips. Originalmente publicado en Toptal.

miércoles, 21 de febrero de 2018

Un Mejor UX a Través de Microinteracciones

Al diseñar un producto, existen muchas formas de mejorar la experiencia del usuario, incluyendo la definición de personajes, la arquitectura de la información bien estructurada y el contenido cuidadosamente escrito. Pero después de establecer esta estructura de alto nivel, crear deleite para un usuario se produce en la interacción más pequeña detalles de diseño.
Estos detalles, conocidos como microinteracciones, son momentos individuales en el producto diseñados para llevar a cabo una tarea única mientras se mejora el flujo natural del producto. Deslizar hacia arriba para actualizar los datos, darle me gusta al contenido o cambiar una configuración son todas microinteracciones. También pueden incluir animaciones UI simples—por ejemplo, la forma en que un menú se desliza cuando se toca o una tarjeta se rueda fuera de la pantalla cuando se desliza.
Con frecuencia, el usuario no nota conscientemente las interacciones microscópicas pero sus detalles sutiles hacen que el producto sea más agradable y más fácil de usar y, por lo tanto, mejora la experiencia del usuario.

Beneficios de Microinteracciones

Las microinteracciones y la animación de UI son tan cruciales que pueden hacer o deshacer un diseño—o como Charles Eames, del diseño de muebles y la fama de la arquitectura, dijo:
“Los detalles no son los detalles. Ellos hacen el diseño.”
microinteracción de desplazamiento
Microinteracción de desplazamiento con contactos (por Nikita Duhovny)
Algunos beneficios clave de incorporar microinteracciones en un producto son:
  • Crear un efecto emocional positivo en el usuario debido a interacciones de UI más suaves
  • Proporcionar comentarios inmediatos al usuario en función de las acciones que han tomado
  • Guiar al usuario a través de una aplicación de una manera más fluida e intuitiva
  • Animar a los usuarios a interactuar con una aplicación respondiendo a una notificación o compartiendo contenido
  • Prevención de errores de usuario

Mejores Prácticas de Diseño de Microinteracción

Ahora que hemos establecido una cierta definición y contexto en torno a lo que hacen las microinteracciones, y dado un ejemplo de cómo mejoran la experiencia del usuario, analicemos las mejores prácticas para crear microinteracciones.
microinteracción de comercio electrónico
Microinteracción de selección de color de producto de comercio electrónico (por Mykolas Puodžiūnas)

Identificar y Comprender el Problema del Usuario

La primera regla en cualquier diseño de experiencia del usuario es descubrir y comprender los problemas del usuario—y no es diferente para las microinteracciones. La mejor manera de entender lo que el usuario necesita es realizar encuestas o entrevistas u observar el comportamiento a través de la investigación del usuario. El Diseñador de Toptal Ivan Annikov profundiza sobre la comprensión de las necesidades del usuario en su artículo “Going Guerrilla: Affordable UX Research Tips and Alternatives.”

Mantén las Microinteracciones Naturales

El objetivo es cerrar la brecha entre el usuario y un producto de forma intuitiva y natural, por lo que debes evitar animaciones extrañas que tarden demasiado en cargarse o distraigan al usuario. En cambio, crea diseños que fluyan sin problemas con el producto. La sutileza es clave en microinteracciones. No dejes perplejo al usuario y que piense: “¿Qué fue eso?”
Patrón UX de Microinteracción de Comercio Electrónico
Una microinteracción de comercio electrónico que agrega un producto al carrito de compras (por Elior Helose)

Prueba e Itera los Resultados de las Pruebas de Usuario

Incluso los diseñadores con experiencia raramente obtienen diseños completamente correctos en el primer intento. Es por eso que usar un proceso de prueba del usuarioy el diseño iterativo es una forma simple de reducir los defectos de usabilidad antes del lanzamiento del producto.
Durante la fase de prueba del usuario, las microinteracciones se prueban y analizan para su uso y se revisan durante la siguiente fase de diseño. Este proceso se repite hasta que se corrijan los problemas de usabilidad y los puntos débiles.

Sigue la Estructura de Microinteracciones

Según Dan Saffer, un Diseñador de Producto de Personal Ejecutivo en Twitter y autor de “Microinteracciones: Diseñando con Detalles,” hay cuatro partes de una microinteracción.
  1. Disparador — Un disparador inicia las microinteracciones. Un tipo de disparador es un interruptor de palanca que enciende y apaga una funcionalidad.
  2. Reglas — Una regla determina cómo una microinteracción responde a un desencadenante y define lo que sucede durante la interacción. Por ejemplo, una aplicación de linterna utiliza un botón como el disparador que enciende y apaga la luz.
  3. Retroalimentación — La retroalimentación le dice al usuario qué está sucediendo durante la microinteracción. Un ejemplo de retroalimentación es un formulario de registro con validación en línea—un color de borde se vuelve verde si el campo se rellena correctamente y se vuelve rojo si algo es incorrecto. De esta forma, el usuario sabe instantáneamente que algo está bien o mal.
  4. Bucles y Modos — Los bucles y modos definen las meta-reglas de la microinteracción y cómo la microinteracción cambia cuando se usa repetidamente. Por ejemplo, en el comercio electrónico, un botón “Comprar ahora” podría cambiar a “Comprar otro” cuando el usuario haya comprado el artículo antes.
patrón ux de microinteracción de solicitud de amistadUna microinteracción para responder a solicitudes de amistad (por Erdenebaatar)

Deconstruyendo el Diseño de Microinteracción

Para mostrar el proceso de pensamiento detrás del diseño de microinteracciones, vamos a deconstruir una microinteracción Google: la microinteracción de sugerencia de nombre de archivo en Google Docs.
Esta microinteracción toma la primera línea de un documento y sugiere esa parte del texto como el nombre del documento, haciendo que el proceso de creación del nombre sea más intuitivo.
Microinteracción de Sugerencia de nombre de archivo de Google Docs
Sugerencia de nombre de archivo de Google Docs
El proceso de diseño de una microinteracción es el mismo que para cualquier tarea de diseño: identificar el punto de dolor del usuario y solucionarlo. Si bien tenemos en cuenta las mejores prácticas anteriores, comencemos a identificar el problema.

El Problema del Usuario

Una manera fácil e intuitiva de mantener los documentos organizados es simplemente nombrarlos descriptivamente. En la mayoría de los editores de texto, el campo “Nombra tu documento” permanece en blanco, aunque existe una gran posibilidad de que el nombre del archivo se correlacione finalmente con el contenido del documento. Este es un proceso que vale la pena abordar con una microinteracción.

La Solución de Google

Google Docs maneja esto de dos maneras, dependiendo de las opciones del usuario: 1) Los usuarios pueden hacer clic en el campo de nombre y cambiar el nombre del documento inmediatamente antes de escribir cualquier contenido y cambiar “Documento sin título” al nombre de tu elección o 2) Una vez que un usuario escribe la primera línea de texto, Google lo auto-pobla como el nombre del documento. El usuario puede mantener esto tal como está o cambiarlo.
Examinemos los detalles:

Disparadores

Podría haber algunos posibles desencadenantes para nombrar el documento utilizando la función del menú Archivo > Guardar como o pulsando cmd+s en una Mac (ctrl+s en Windows) en el teclado como en las aplicaciones de escritorio. Pero ninguno de estos aprovecha la naturaleza interactiva de la web y no mejoran particularmente el flujo de usuarios.
En cambio, el principal disparador de Google Docs es simplemente hacer clic en el campo del nombre del documento. El estado de desplazamiento sobre el campo muestra una información sobre herramientas “Cambiar nombre”. El disparador secundario es Archivo > Renombrar, que resalta el campo de entrada de nombre.
Microinteracción de la descripción emergente "Renombrar" de Google Docs
Google Docs usa una descripción emergente muy simple pero útil.

Reglas

Las reglas definen lo que sucede después de hacer clic en el desencadenador. En este caso, la primera línea de texto aparecerá como el nombre del documento. Pero ¿y si el usuario no quiere tener la primera línea de texto como nombre? Cuando el usuario hace clic en el campo de entrada de nombre, se selecciona todo el texto y se eliminará con cualquier combinación de teclas, lo que facilita al usuario crear un nuevo nombre.
Microinteracción de nombre de archivo resaltado de Google Docs
Google Docs resalta el nombre del documento, lo que le permitirá al usuario comenzar a crear de inmediato uno nuevo.

Retroalimentación

Cambiar el color del borde del campo de entrada es un patrón de interacción común y es lo que Google Docs usa aquí para brindar al usuario comentarios inmediatos.
Microinteracción de borde activo de Google Docs
Cambiar el color del borde le permite al usuario saber qué están cambiando.


Bucles y Modos

El usuario creó correctamente el nombre del documento y el activador permanece en su lugar con una diferencia de clave: el documento ahora ha sido nombrado.
En este punto, el usuario sólo querrá cambiar unas pocas letras o agregar una fecha al nombre en lugar de cambiar el nombre completo que definió previamente. En este caso, a diferencia de la regla anterior, la regla para resaltar todo el nombre del documento está deshabilitada.
Microinteracción de después de que el nombre ha sido configurado de Google Docs
Google Docs no resalta el nombre después de haberlo configurado.

Resultado

Después de definir el problema y enfocarse en las cuatro partes de una microinteracción, el resultado es una experiencia más natural y fácil de usar. La solución de nombres de archivos de Google Docs ayuda al usuario a mantenerse organizado con los archivos correctamente nombrados, al igual que simplifica el proceso de nomenclatura de los documentos.

Microinteracciones en Acción: Ejemplos del Mundo Real

Reordenando una Lista de Tareas

Recordatorios de Apple iOS ayuda a los usuarios a mantenerse organizados y elimina varios pasos permitiéndoles tocar, mantener y arrastrar un elemento de la lista para cambiar su lugar en el orden de la lista.
Microinteracción de Reordenación de listas de recordatorios de iOS
Cambiar el orden de los elementos de la lista es tan simple como arrastrar y soltar.

Reaccionando a Publicaciones en Redes Sociales

Dar “Me gusta” a contenido al hacer clic en el botón o ícono de los pulgares arriba se ha convertido en un patrón de diseño de UX común en muchas aplicaciones y sitios web. Facebook está construido sobre esta interacción mediante la adición de múltiples opciones más allá de “me gusta” a través de una microinteracción sutil.
Microinteracción de Reacciones de Facebook
La colección de Reacciones de Facebook incluye Me Gusta, Me Encanta, Me Divierte, Me Sorprende, Me Entristece y Me Molesta. (por Seth Eckert)

Destacado de Texto de Marca

En la mayoría de los buscadores, es posible anular el color predeterminado de selección de texto. IKEA utiliza este patrón de interacción para agregar un detalle de marca sutil resaltando el texto en sus icónicos colores amarillo y azul.
Texto resaltado de IKEA
IKEA resalta texto en los colores de su marca, amarillo y azul.

Compartir tu Locación

Google Hangouts asume que una de las veces que un usuario desea compartir su ubicación es cuando alguien envía un mensaje de texto “¿Dónde estás?”
Cuando el usuario ve este mensaje, aparece el botón “Compartir su ubicación” como una opción contextual. Luego pueden tocar ese botón para enviar automáticamente un mapa de su ubicación al otro usuario.
Google Hangouts compartiendo tu locación
Compartir tu ubicación con solo un toque (por TechCrunch).

Deslizando hacia Seleccionar

Las interacciones de micro se pueden usar para responder preguntas simples de sí o no en una aplicación. Tinder hace esto haciendo que el usuario deslice hacia la izquierda o hacia la derecha (no/sí) dependiendo de si les gusta o no les gusta su posible coincidencia.
Gesto deslizante de Tinder
Una microinteracción de UI en movimiento: desliza el dedo hacia la izquierda para no, hacia la derecha para sí en Tinder.

Expansión de Búsqueda

La aplicación de Bandeja de entrada de Google no sólo agrupa paquetes de correode forma inteligente, también está diseñada para permitir la búsqueda por voz o elegir entre los contactos más recientes con un solo toque.
Microinteracción de Expansión de la búsqueda en la bandeja de entrada de Google
La aplicación bandeja de entrada permite a los usuarios buscar correos electrónicos de sus contactos más recientes con una microinteracción reflexiva.

Agregando Velocidad a la Información de Contacto de un Amigo

SeatGeek simplifica el proceso de llenado de formularios rellenando automáticamente la información de los contactos de un usuario con un toque del botón “Agregar desde Contactos”.
Microinteracción del botón de "Agregar desde contactos" de SeatGeek
Cuando el amigo de un usuario ya está en sus contactos, puede agregarlos fácilmente a una aplicación con un simple toque.

Aprende más Sobre Microinteracciones

Las microinteracciones son una parte clave para mejorar la experiencia del usuario y hay muchos recursos disponibles para aprender más sobre ellos, algunos de los cuales se enumeran a continuación.
Para obtener más información acerca de las microinteracciones en general, visita Microinteracciones, el sitio web creado como un acompañante para el libro mencionado anteriormente “Microinteracciones: diseñando con detalles” por Dan Saffer. En el sitio hay explicaciones detalladas de microinteracciones, así como información sobre el origen de microinteracciones bien conocidas, como autocorrección, autocompletar y cortar y pegar. El primer capítulo del libro también está disponible como descarga gratuita.
Para inspiración de microinteracción, visita Little Big Details, una colección curada de microinteracciones en productos digitales. Muestra ejemplos de cómo les gusta a las empresas AppleTrello, y StackOverflow implementan microinteracciones y animación UI.


Este articulo fue escrito por Ondřej Dostál. Originalmente publicado en Toptal.