Anticipation design: ¿La nueva tendencia del mundo UX/UI?

Marisol de la Vega
tech tiendanube
Published in
6 min readOct 12, 2017

--

La anticipación es el concepto de tomar decisiones basadas en predicciones, expectativas o creencias sobre el futuro. Estamos todo el tiempo anticipando situaciones del futuro (basadas en aprendizajes y contextos) para tomar decisiones. Estas últimas influyen en el comportamiento y también alteran las opciones del presentes, muchas veces de una manera inconsciente.

Siguiendo está definición, podríamos decir un(a) diseñador(a) anticipa las necesidades, expectativas y deseos de las personas en sus propuestas. Por lo tanto, el diseño de interacción es por naturaleza, pro-activa en esta nueva “iniciativa” de anticipation design

Fuente: Facebook. Todas las mañanas te avisa como va a estar el clima.

Expectativa

Los mensajes enviados por un(a) diseñador(a) son el resultado del proceso anticipatorio o procesos creados en el momento del diseño. Una de las tareas de un(a) diseñador(a) es analizar, un conjunto de posibilidades de comportamiento, en las interacciones. Cuando una persona se encuentra con una interfaz, que puede tener flows o acciones que no se entiendan puede preguntarse: “¿Qué pasa si toco este botón?”

Hacer una Homero. Fuente: https://media.giphy.com/media/3orif6bbMzfab8ga52/giphy.gif

En ese primer contacto con una interfaz, antes de aprender a usarlo, las personas crean expectativas dirigidas sobre el aprendizaje y sobre el uso de la misma. En ese momento, la predicción trata de capturar la conexión que existe entre los elementos que se muestran dentro de la interfaz.

Reducir ansiedad

Algo interesante que tenemos dentro de los micromoments (Se trata de momentos basados en una gran intención en los que se toman decisiones y se definen preferencias. En estos momentos, las expectativas de las personas son más altas que nunca), es el concepto de “trigger”, (el disparador). Se usa sobre una acción directa que realiza el usuario para concretar una necesidad.

Tienen 3 componentes principales:
1. El control que ejecuta el disparador
2. Los estados de este control
3. Una etiqueta y/o un icono

Esto significa que el disparador puede tener información sobre el estado (interno) de la microinteracción. Por ejemplo: estado vacío, estado de carga, estado de progreso, etc. Estos estados son muy importantes, porque educan al usuario sobre lo que está pasando y de lo que pueda llegar a pasar. Esto reduce la ansiedad con el “disparador/acción”. Uno puede motivar al usuario a participar con el disparador, o simplemente ayudar al usuario a entender la función del disparador y cómo usarlo.

Fuente: Airbnb

En AirBnb, el control deslizante del rango de precios (el disparador) muestra un gráfico de la distribución de precios (los datos) de la ubicación que está navegando, lo que permite tomar una decisión informada. Este tipo de visualización, ayuda a las personas a entender que acciones tomar en el futuro. Mostrando está información Airbnb se anticipa a posibles frustraciones o situaciones de ansiedad por parte del usuario. Ya que mostrando el valor promedio por noche, las personas pueden tomar decisiones más acertadas.

En la tarjeta Google Now Flights, el botón para iniciar la navegación (el disparador) al aeropuerto de salida también contiene el tiempo estimado del viaje (los datos).

Fuente: Google

¿Es anticipation design una tendencia?

Hay que tener en cuenta que las personas están cada vez más conectados y ocupados. La gente ya no tiene tiempo para procesar muchas tareas (el multitasking, no existe, no va más). Es el momento de enamorarnos de los problemas que afrontamos diariamente. Nuestro reto es entender cómo nuestros productos pueden facilitar las vidas y tareas diarias de todxs. Podemos decir que tenemos que utilizar nuestro “back-end” para ayudar a las personas a completar sus tareas sin agotar recursos valiosos que necesitarán varias veces durante su día. Siguiendo está línea podemos tomar como ejemplo el disparador de rango de precios de Airbnb. Se trata de poner a la tecnología al servicio de los usuarixs para que puedan ser más productivos o eficaces en las tareas que quieran hacer.

Un ejemplo es Digit un app que te ayuda a ahorrar. Conectas tu cuenta y la app analiza tus ingresos y gastos. En base a eso encuentra algo de plata que podes dejar a un lado para ahorrar. Y así sin darte cuenta te pagaste las vacaciones sin mover un dedo.

Fuente: Digit

Tips para tener diseños más anticipatorios

Cada vez que me encuentro con un nuevo desafío con una interfaz trato de preguntarme:

  1. ¿Hay alguna manera de usar data pre-existente para simplificar la experiencia?

Meetup me ofrece “charlas” en base a mis preferencias y a data pre-existente.

Fuente: https://www.smashingmagazine.com/2015/09/anticipatory-design/

2. ¿Podemos crear flows basándonos en las preferencias de la persona?

Netflix te selecciona y muestra nuevas series en base a lo que viste o buscaste.

Fuente: Netflix

Sí te interesa este tipo de anticipation, en este podcast de Andre do Amaral, Product Designer de Netflix, explica un poco sobre este tipo de experiencias. http://movimentoux.com/work/netflix/

3. ¿Hay alguna manera de dar un extra en nuestros triggers?

En este ejemplo elegí unas de las tareas que le ofrecemos a nuestrxs trials (es la denominación que se le da en marketing a los usuarios que comienzan el proceso de prueba de forma gratuita por una cantidad limitada de tiempo, de un servicio o producto. Con este enfoque se puede lograr convertirlos en clientes pagos.), en su período de prueba. Importar sus productos de Mercado Libre a su tienda online. El extra value en esté micro-moment, es colocar la cantidad de productos (los datos), que están siendo importados en el progreso. Reducimos la fricción y la ansiedad.

Fuente: Tienda Nube

4. ¿Qué medio sería el más efectivo para mostrar o ayudar a realizar una tarea específica a nuestros usuarios?.

En Tienda Nube te damos la posibilidad de customizar tu tienda. Ofrecemos capturar los colores del logo de la brand, para colocarla como paleta principal de su tienda. Le ahorramos el trabajo al cliente de tener que elegir los colores.

Fuente: Tienda Nube

5. ¿Cómo puedo dar más feedback, de lo que está pasando, en el disparador ?

Teniendo en cuenta las premisas de los micro-moments, está bueno tener presente pequeños hacks que podemos hacer en nuestras interfaces con muy poco. Elegí este ejemplo de Nicolás J Engler, compañero de trabajo en Tienda Nube :). La interacción es muy sencilla, una vez que se envia el formulario, la información de siendo enviada y finalizada se muestra en el botón.

Fuente: https://codepen.io/nicolasjengler/full/PJKqby/

Seguramente utilizaste alguno de los productos que mencione más arriba y te generaron diferentes sentimientos. Teniendo en cuenta algunos de los tips, y pensando siempre en cómo anticiparse a las acciones con data pre-existente, podemos llevar un paso más lo que ofrecemos para generar grandes momentos y experiencias :)

Fuente: https://www.smashingmagazine.com/2015/09/anticipatory-design/

--

--