You are on page 1of 314

ZORRAQUINO

UX Trends 2019
10 tendencias en experiencia

UX Trends 2019 - Zorraquino - Enero 2019

de usuario para 2019

Este informe ha sido elaborado con la colaboración de C4E, Communication for effectiveness.
Enero 2019 1
UX Trends 2019

Prólogo
La digitalización de la experiencia de cliente continúa siendo uno de los principales
retos a los que las empresas se enfrentan. En este sentido, el diseño de servicios y
procesos, el conocimiento e investigación de los usuarios, el diseño de nuevas
interfaces y la aplicación de los últimos avances tecnológicos son aspectos clave que
toda compañía competitiva debe trabajar para destacar en el mercado.

Ese es el objetivo de este informe, recoger las 10 tendencias que desde nuestro punto
de vista marcarán el año 2019 y venideros, una guía visual con multitud de ejemplos
prácticos que esperemos sirva para inspirar y avanzar en la digitalización de
nuestros negocios. Tendencias nuevas y otras no tanto, pero que entran con fuerza y
UX Trends 2019 - Zorraquino - Enero 2019

con puntos de vista renovados.

Espero que este informe te resulte enriquecedor y cumpla con tus expectativas.

Miguel Zorraquino
linkedin.com/in/mzorraquino

2
UX Trends 2019

Índice de contenidos
• Tendencia 1. UX ergonómica 4
• Tendencia 2. Procesos autómatas 37
• Tendencia 3. UX research 65
• Tendencia 4. Buttonless 90
• Tendencia 5. UX invisible 129
• Tendencia 6. UX oscura 156
• Tendencia 7. UX writing 195
UX Trends 2019 - Zorraquino - Enero 2019

• Tendencia 8. UX search 227


• Tendencia 9. Experiencias físicas 246
• Tendencia 10. Tendencias visuales 269

3
Tendencia 1

UX ergonómica
Diseño adaptado.
UX Trends 2019 - Zorraquino - Enero 2019

4
UX Trends 2019 - Zorraquino - Enero 2019

Diseño ergonómico
Hapticidad, biomecánica, antropometría y proxémica.

5
Tendencia 1. UX ergonómica

Diseño ergonómico
El incremento de los dispositivos móviles y la generalización de un diseño UX,
centrado en el modo en que el usuario interactúa con la pantalla, está abriendo la
puerta a una UX cada vez más ergonómica, que se construye teniendo en cuenta
las situaciones de contexto, postura y posición.

El diseño adaptado significa construir interfaces más cómodas para su manejo. Para
ello es necesario investigar y conocer la forma en la que los usuarios se relacionan
con sus dispositivos: cómo los cogen, qué acciones realizan, cómo se mueven, etc.
UX Trends 2019 - Zorraquino - Enero 2019

Es una cuestión ergonómica: el usuario se ha acostumbrado a estirar los dedos y


sujetar de forma insegura los terminales con el fin de realizar ciertas acciones en la
pantalla, y un diseño adaptado a ese modo de uso mejora sensiblemente la
experiencia de interacción con esos dispositivos.

6
Tendencia 1. UX ergonómica

En síntesis
• El diseño ergonómico crece en importancia.

• La UX para los móviles y el diseño basado en el pulgar es un buen ejemplo para


ilustrar este nuevo tipo de UX.

• En 2025, el 70% de los internautas serán “mobile only”. En España ya hay un 32%
(2017), en la India un 70% y en Indonesia un 67%.

• Diseño UX cada vez más centrado en la navegación desde el móvil y no tanto desde el
PC. Una media de 150 interacciones al día.

• Investigar cómo utilizan los usuarios los dispositivos. No se navega igual con un
UX Trends 2019 - Zorraquino - Enero 2019

móvil (con una o dos manos) que con una tableta o portátil.

• Estudiar situaciones de uso: concentradas, distraídas, haciendo otras labores… y las


diferencias culturales.

7
UX Thumb
Cómo diseñar para los pulgares en la era de las pantallas gigantes.
iPhone 5 — Thumb
Lejos quedó el popular anuncio de Apple para el iPhone 5 (2012).
iPhone XS — Growth Spurt
Apple ahora comparte un nuevo vídeo resaltando el tamaño de sus iPhone XS Max (2018).
Design for fingers
Formas posibles de interacción con el dispositivo móvil.

Cradled Hold and Touch Two Hands - Landscape

One Hand - First Order One Hand - Second Order Two Hands - Portrait
Design for fingers
Tipos de hábitos de manejo del dispositivo móvil.

49% 36% 15%

One Handed Cradled Two Handed


Tendencia 1. UX ergonómica

El móvil, cada vez para más cosas


• El uso del teléfono se realiza el 68% de los casos en casa y no en el trabajo.

• El 72% de los usuarios de smartphones no deja sus teléfonos fuera de su alcance


en ningún momento.

• Más de la mitad de los móviles son smartphones. La mitad de los usuarios lo utilizan
como principal acceso a lnternet.
UX Trends 2019 - Zorraquino - Enero 2019

• Hay 7 categorías de uso en el móvil: 3 representan el 77% de todo el tiempo dedicado


al teléfono inteligente: socialización, compras y “tiempo para mí” (Fuente: Harvard
Business Review).

13
Mobile only
Acciones no tan típicas del móvil ya se realizan a través de este dispositivo.
Tendencia 1. UX ergonómica

Los pulgares en el centro del diseño


• Cómo diseñar para los pulgares en la era de las pantallas gigantes.

• Diseños que se adapten al arco natural de barrido del pulgar sobre la pantalla. No
únicamente una adaptación responsive entre dispositivos, pensar en el usuario.

• Uso con pulgar derecho 67%, con el izquierdo el 33% (aunque solo un 10% usuarios
total es zurdo, este porcentaje corresponde a la simultaneidad de otra acción).
UX Trends 2019 - Zorraquino - Enero 2019

• Función de “alcanzabilidad o accesibilidad” para los iconos superiores de la pantalla


con los pulgares. Aunque estén lejos bajan al alcance del dedo. Función existente
desde el iPhone 6.

15
Zonas de mayor uso en los diferentes tamaños de pantalla
La pantalla aumenta pero la zona verde no disminuye.
UX Trends 2019 - Zorraquino - Enero 2019

iPhone to iPhone 4S iPhone 5 to 5S iPhone 6 iPhone 6 Plus


iPhone 6
Función de “accesibilidad”, el usuario puede acercar las funciones al alcance del pulgar.
Mapa de calor
Zonas donde primero miran y pulsan los usuarios.

Zonas menos precisas


Bordes y esquinas

Zonas más precisas


Centro
Jerarquía de lectura
Orden del scanner que realiza el usuario en una pantalla móvil.

Zonas terciarias
Otras funciones detrás de

los menús

Zonas primarias
Contenidos y

funcionalidades centrales

Zonas secundarias
Acciones y pestañas a lo

largo de los bordes
Tendencia 1. UX ergonómica
UX Trends 2019 - Zorraquino - Enero 2019

Ley de Fitts
Permite calcular el tiempo que necesita un usuario para señalar un objetivo en función
del tamaño y la distancia.
20
Tendencia 1. UX ergonómica

Ley de Fitts
• En la interacción persona-ordenador, la ley de Fitts permite calcular el tiempo que
necesita un usuario para señalar un objetivo en función del tamaño y la distancia del
blanco. 

• En usabilidad afecta al tamaño de la tipografía en un enlace, a la posición de un botón


o una llamada a la acción o a la longitud de los menús desplegables.

• Los objetos pequeños y alejados de su posición inicial tardan más en ser


seleccionados, mientras que los grandes que están cerca de su posición inicial son
UX Trends 2019 - Zorraquino - Enero 2019

seleccionados en menos tiempo.

• Ciertas áreas de los estudios psicológicos ayudan al diseño UX en el conocimiento


de los usuarios.

21
Apagar el iPhone
El botón de apagado del iPhone es bastante inalcanzable,
mientras que para mantenerlo encendido es muy fácil pulsar la cancelación.
Puntos difíciles de alcanzar
Zonas a las que se llega con dificultad no llegan a tener un acierto total de pulsación.

Zonas menos precisas


Bordes y esquinas
Lyft
Ejemplo de diseño adaptado al pulgar.
Tendencia 1. UX ergonómica

Spotify
• El 60% de la música se escucha desde el móvil.

• Spotify tiene aún cosas que mejorar para crear una buena experiencia de usuario al
alcance del pulgar.

• Acercar los elementos más utilizados a este dedo. Para salir de cada carátula o de las
letras, el botón está en la esquina superior izquierda y cuesta mucho cerrar. Es una
acción muy repetida.

• No ocultar funciones bajo menús casi invisibles y poco accesibles.


UX Trends 2019 - Zorraquino - Enero 2019

• Tiene botones muy pequeños como para acertar con el pulgar.

• Ni limitar funciones a la versión del PC, como crear listas de reproducción. Permitir
realizar todas las funciones fácilmente desde el smartphone.

25
Problemas de Spotify con el pulgar
Muy difícil alcanzar la esquina izquierda para salir de las letras o de la carátula.
Menús invisibles
Menú con tres puntitos casi invisible e inaccesible para desplegar otro menú y un buscador.
Tendencia 1. UX ergonómica

“Mobile first, and put the most used elements


down to the reachable zone as the size of the
screen is bigger and bigger for one hand users.”

Linh Giang Nguyen, Medium.


UX Trends 2019 - Zorraquino - Enero 2019

28
Barra inferior cercana al pulgar
La barra inferior de fácil acceso con las principales funciones
ya está incluida en casi todas las grandes aplicaciones.
Tendencia 1. UX ergonómica

Path app
• Red social “para amigos de verdad” que limitaba a 50 los contactos, justo acaba de
cerrar el pasado octubre de 2018.

• En cuanto a temas de diseño UX, esta app ha servido de “inspiración” a Facebook


(emoticonos en vez de “me gusta”).

• Diseño amigable, interactivo y emotivo sin ser especialmente llamativo.

• El botón animado para compartir publicaciones invita al uso y es muy fácil y


atractivo en su experiencia de utilización.
UX Trends 2019 - Zorraquino - Enero 2019

• Se puede utilizar con una sola mano fácilmente.

• Sustituye a las barras-menús de la parte inferior de la pantalla.

30
Path App
Sustituye la barra inferior por un diseño animado accesible al pulgar.
Trading app design from Dribbble
Otro ejemplo tiene el mismo tipo de botón múltiple en la zona de mayor uso.
“The real problem with the interface is that it is
an interface. Interfaces get in the way. I don’t
want to focus my energies on an interface. I
want to focus on the job… I don’t want to think of
myself as using a computer, I want to think of
myself as doing my job.”
UX Trends 2019 - Zorraquino - Enero 2019

Don Norman, one of the forefathers of usability and UX.

33
Tendencia 1. UX ergonómica

Zorraquino sugiere
• Las pantallas de los móviles cada vez son más grandes y el área accesible con el
pulgar es menor. Los diseños tienen que tener en cuenta los hábitos del usuario para
mejorar la experiencia.

• Accesibilidad con una mano, que es el uso generalizado.

• Colocar los elementos más utilizados al alcance del usuario.


UX Trends 2019 - Zorraquino - Enero 2019

• Diseños intuitivos y sencillos, se recomienda no más de una función por pantalla.


Aunque hay muchas interacciones, la atención frente al teléfono tiene una media de 8
segundos.

34
Tendencia 1. UX ergonómica

Referencias
Cómo diseñar para los pulgares en la era de las pantallas enormes
https://medium.com/wikiux/c%C3%B3mo-dise%C3%B1ar-para-los-pulgares-en-la-era-de-las-pantallas-
enormes-cb0b2087be97

4 UX Trends That Should Dominate in 2019


https://medium.com/nyc-design/4-ux-trends-that-should-dominate-in-2019-d216ceec17f

La Guía Fundamental Para La Usabilidad Mobile


https://www.toptal.com/designers/mobile-ui/la-guia-fundamental-para-la-usabilidad-mobile/es
UX Trends 2019 - Zorraquino - Enero 2019

35
Tendencia 1. UX ergonómica

Referencias
6 Buenas prácticas UX para diseñar apps irresistibles
https://www.aulacreactiva.com/buenas-practicas-ux-apps

The One Thumb, One Eye Test for Good Mobile Design
https://www.interaction-design.org/literature/article/using-mobile-apps-the-one-thumb-one-eyeball-test-for-
good-mobile-design

Never Just Design Pretty Little Apps


https://blog.prototypr.io/never-just-design-pretty-little-apps-55580b0d83b2
UX Trends 2019 - Zorraquino - Enero 2019

36
Tendencia 2

Procesos autómatas
La generalización de

UX Trends 2019 - Zorraquino - Enero 2019

la inteligencia artificial.

37
Tendencia 2. Procesos autómatas

Inteligencia artificial
¿Cómo influye en el UX la IA? Gracias a ella –y a la automatización de tareas que trae
consigo– los diseñadores se están convirtiendo en profesionales cada vez más
estratégicos, que se centran en diseñar experiencias personalizadas, relevantes,
inteligentes y eficientes donde el factor humano sigue siendo esencial e insustituible.

El buen uso de la inteligencia artificial aparece como un aliado para mejorar el trabajo
y el resultado de los diseños de UX: vídeos automáticos, patrones de reconocimiento,
asistentes virtuales, automatización de test A/B… Es una pauta que va en aumento y
que seguirá creciendo en los próximos años.

Una tecnología muy prometedora, que hay que aprender a manejar, pero que puede
UX Trends 2019 - Zorraquino - Enero 2019

facilitar la vida de los diseñadores y ayudarles a que puedan concentrarse en lo más


esencial de su trabajo. A menudo vista como enemigo, la IA se puede convertir en un
gran aliado.

38
Tendencia 2. Procesos autómatas

En síntesis
• La IA influye positivamente en el comportamiento del consumidor, permite a las
marcas ofrecer una mejor experiencia de usuario y evita a los diseñadores el trabajo
improductivo y repetitivo.

• Diseño anticipado, Zero UI (interfaz física superada por una virtual), reconocimiento de
imágenes, eliminación de pruebas sesgadas A/B test, automatización de diseños…

• Aproximadamente un 20% de las labores del diseñador UX podrían ser


UX Trends 2019 - Zorraquino - Enero 2019

automatizadas y liberar el tiempo del diseñador para que pueda dedicarse a


cuestiones más estratégicas.

39
Tendencia 2. Procesos autómatas

IA + UX, en acción
• Adobe Sensei: IA que ayuda a los diseñadores a editar imágenes y documentos.

• Traducción automática de Netflix, acelera el proceso ya que adapta a cada idioma las
cartelas publicitarias. La labor del diseñador se reduce a revisar y dar su visto bueno.

• Airbnb anuncia una tecnología que puede identificar bocetos en papel de


diseñadores y convertirlos en código en tiempo real.
UX Trends 2019 - Zorraquino - Enero 2019

• Auto Draw, experimento de Inteligencia Artificial de Google que completa


automáticamente los bocetos realizados torpemente con el ratón y los convierte en
versiones más pulidas en pocos segundos.

40
Adobe Sensei
Adobe ha incorporado IA en su programa para facilitar el diseño y edición de documentos.
Netflix
Uso de algoritmos de visión artificial para elaboración automática de sus imágenes.
Airbnb – Programando con dibujos
Ha creado un sistema de IA que convierte los diseños dibujados en código fuente de programación.
UX Trends 2019 - Zorraquino - Enero 2019

Airbnb – Pintando con código


Biblioteca de Airbnb de código abierto “React – Sketch.app”.

44
Google
Autodraw es un experimento de Google que reconoce los dibujos torpes del usuario.
Tendencia 2. Procesos autómatas

“We’re moving

from a mobile-first to

an AI-first world.”
Sundar Pichai, CEO de Google.
UX Trends 2019 - Zorraquino - Enero 2019

46
Tendencia 2. Procesos autómatas

Cortex
• Incluso para los diseñadores es difícil entender los algoritmos de IA.

• Empresa Cognitive Scale ha creado software de “Inteligencia Aumentada” que


emula y entiende la función cognitiva humana.

• Empareja personas y máquinas para personalizar experiencias, seguimiento y


evolución de usuarios (pacientes, transacciones…)

• El producto principal es Cortex, muy accesible para diseñadores que podrán incluir la
automatización de parte de su trabajo.

• Cortex simplifica el diseño, desarrollo y mantenimiento de los sistemas de IA:


UX Trends 2019 - Zorraquino - Enero 2019

personalizar perfiles de usuarios, generar informes comprensibles sobre datos


incomprensibles, coordinar de manera automatizada procesos tediosos, aprender de
los datos…

47
Cortex
Desarrolla desde sus propias Apps los productos necesarios para cada empresa.
Tendencia 2. Procesos autómatas

Cortex
• Ofrece diversos productos para los diseñadores, una especie de App Store para datos,
algoritmos o servicios específicos.

• Interfaz fácil de utilizar y entender, y muy accesible. Los datos aparecen ordenados
en un dashboard. No es necesario ser informático o técnico de IA.

• A través de un panel de abeja el diseñador coloca las skills de la IA según los


requisitos de cada proyecto.

• Cada vez más perfiles de las empresas necesitan trabajar directamente con datos y
UX Trends 2019 - Zorraquino - Enero 2019

saber procesarlos y entenderlos; un requerimiento común, actualmente, en puestos


de diseño.

49
Cortex
Diseño de proyectos a través de las “skills” necesarias para cada proyecto en Cortex.
Tendencia 2. Procesos autómatas

Textio
• Herramienta de redacción para equipos de RRHH.

• A través de la Inteligencia artificial pueden redactar las ofertas de trabajo


adecuándolas a los perfiles más interesantes para sentirse atraídos por ellos.

• El programa marca los posibles cambios y genera una puntuación y unos


comentarios que valoran positivamente ese cambio.

• Conocido como “augmented writing”.


UX Trends 2019 - Zorraquino - Enero 2019

• Utilizado por empresas como Atlassian o Johnson & Johnson para atraer talento
cualificado.

51
Textio
Textio mejora los textos laborales a través de puntuaciones y recomendaciones.
Tendencia 2. Procesos autómatas

hiConversion
• Sitios web que se optimizan solos.

• Va más allá de evaluar la experiencia para mejorarla en tiempo real.

• Con algoritmos de autoaprendizaje, su motor de optimización asigna el tráfico de


visitantes a diferentes tratamientos creativos en tiempo real, lo que lleva más tráfico a
los ganadores y minimiza a los perdedores.

• La herramienta también maximiza sus métricas más importantes, conversiones e


ingresos, al tiempo que recopila información que proporciona hipótesis para futuras
UX Trends 2019 - Zorraquino - Enero 2019

pruebas.

• "La experiencia es la marca". Estas experiencias personalizadas y optimizadas


aumentan la lealtad a la marca.

53
hiConversion
hiConversion optimiza en tiempo real las experiencias de cada usuario.
hiConversion
Proceso de optimización en tiempo real a través de la inteligencia artificial.
Tendencia 2. Procesos autómatas

Launchpad
• Test A/B automatizado.

• La IA identifica las áreas de optimización, entiende cómo puede ocurrir esta


optimización (cambio de palabras, colores en los botones, ubicación
de ciertos elementos…).

• Implementa ese cambio y ejecuta la prueba A/B.

• Tras un análisis de los resultados, decide cuál es la mejor versión.


UX Trends 2019 - Zorraquino - Enero 2019

• El usuario además de crear una web a través de las plantillas de Launchpad tiene la
posibilidad de ir mejorándola sin esfuerzo.

• A través del “machine learning” cada vez habrá menos necesidad de realizar tests.

56
Launchpad
A/B testing automatizado ayuda a optimizar una web de manera autónoma.
Tendencia 2. Procesos autómatas

Después de The Grid


• The Grid y su asistente Molly es un sitio popular de creación de webs a través de IA sin
necesidad de saber programar. Fue un éxito entre el mercado artesanal (Etsy) y
freelance en EEUU.

• Diseño a través de cuadrículas. La IA puede ayudar a que un sistema de diseño sea


aún más solido. A través de patrones, módulos y elementos que, combinados, crean
el lenguaje de diseño de una marca o producto.

• Universe, realiza diseño de webs desde el móvil a través de una app en unos pocos
UX Trends 2019 - Zorraquino - Enero 2019

minutos.

• En su primer año crearon 150.000 webs.

58
The Grid
Plataforma de creación de webs a través de IA.
The Grid
Fácil acceso a un escaparate para todos aquellos que venden productos o servicios a través de Internet.
Sacha
Otro ejemplo de plataforma que diseña webs también a partir de una IA.
Tendencia 2. Procesos autómatas

Zorraquino sugiere
• La inteligencia artificial no va a reemplazar a los diseñadores, es un complemento a
su trabajo, un apoyo.

• IA utilizada como tecnología de asistencia no como sustituto del trabajo.

• Los diseñadores se convertirán en los estrategas que organizan el trabajo creativo y


de optimización.

• La empatía con los usuarios, básica para ser diseñador UX, sigue siendo una cualidad
humana insustituible.
UX Trends 2019 - Zorraquino - Enero 2019

• Trabajando con IA los diseñadores pueden aumentar la calidad y el pulido de lo que


están tratando de crear sin gastar mucha energía en hacerlo.

62
Tendencia 2. Procesos autómatas

Referencias
Diseño centrado en el ser humano: 4 formas en las que la IA hará tu UX

más inteligente
https://medium.com/repensareducativo/dise%C3%B1o-centrado-en-el-ser-humano-cuatro-formas-en-que-la-
inteligencia-artificial-har%C3%A1-tu-ux-m%C3%A1s-8968f0bdce06

How AI has started to impact our work as designers


https://uxdesign.cc/how-ai-will-impact-your-routine-as-a-designer-2773a4b1728c

How AI solves UX/UI design problems


UX Trends 2019 - Zorraquino - Enero 2019

https://uxdesign.cc/how-ai-solves-ux-ui-design-problems-9769a8757424

AI Is Changing the Way We Look At the Future of UX


https://dzone.com/articles/ai-is-changing-the-way-we-look-at-the-future-of-ux

63
Tendencia 2. Procesos autómatas

Referencias
How Netflix Uses AI and Data to Conquer the World
https://www.linkedin.com/pulse/how-netflix-uses-ai-data-conquer-world-mario-gavira

Web Design AI: Giving Websites the Power to Design Themselves


https://edgylabs.com/web-design-ai-giving-websites-the-power-to-design-themselves

Will Machine Learning Be the Death of Content A/B Testing?


https://venturebeat.com/2018/04/30/will-machine-learning-be-the-death-of-content-a-b-testing
UX Trends 2019 - Zorraquino - Enero 2019

How to Improve Your Website with Artificial Intelligence


http://blog.zoominfo.com/artificial-intelligence-website

64
Tendencia 3

UX research
Aumenta el interés por

UX Trends 2019 - Zorraquino - Enero 2019

la investigación de usuario.

65
Tendencia 3. UX research

UX research
En los últimos meses hemos visto resurgir un aspecto de diseño ya conocido, pero
actualmente revalorado: la investigación del usuario, que proporciona una base
esencial para la estrategia de diseño.

Crece el perfil del investigador dentro de los equipos multidisciplinares, porque la


investigación responde a un interés cada vez mayor y más refinado por poner el
usuario en el centro, en busca de una mejor comprensión sobre quiénes son, cómo
actúan y por qué, qué esperan o desean de las marcas…

De ahí que muchos de los métodos de investigación existentes desde hace décadas
estén, hoy en día, más de moda que nunca: por la importancia de afinar en la
UX Trends 2019 - Zorraquino - Enero 2019

construcción de una UX cada vez más eficaz y, por eso mismo, centrada en el
conocimiento y motivaciones de los usuarios. No hay buena experiencia de usuario si
no hay una sólida investigación detrás. Una realidad que ha tomado este año
forma de tendencia y que cada vez impera más.

66
Tendencia 3. UX research

En síntesis
• Mayor preocupación por poner al usuario en el centro, que se manifiesta en la
prioridad de la investigación, para construir productos digitales consistentes.

• Contribución al proceso de diseño del producto y mejora de la experiencia de


usuario a través de los datos resultantes de la investigación.

• Perfil más estratégico del diseñador UX. Visión general del proceso de diseño.
Presente y partícipe desde el inicio.

• Técnicas de investigación a través de DCU (Diseño Centrado en el Usuario),


UX Trends 2019 - Zorraquino - Enero 2019

Customer Journey, Evaluación Heurística, pruebas de concepto, recorridos cognitivos,


Jobs to be Done…

67
Se reclutan investigadores
Es el puesto 39 de los 100 perfiles más demandados en América por la CNN.
Facebook
Las grandes compañías demandan UX Researchers.
Adobe
Las grandes compañías demandan UX Researchers.
Tendencia 3. UX research

“How you climb a mountain is more important


than reaching the top.”

Yvon Chouinard, CEO de Patagonia.


UX Trends 2019 - Zorraquino - Enero 2019

71
Tendencia 3. UX research

Diseño centrado en el usuario


• Diseñar por y para el usuario, en sus múltiples variantes y contextos.

• Facilitar el uso intuitivo y claro de un producto digital a través de los siguientes


principios:

• Control de la situación por el usuario: que él inicie las acciones.

• Planteamiento directo de las situaciones y diseño consistente, accesibilidad y


posibles opciones presentadas de manera clara y de fácil uso.
UX Trends 2019 - Zorraquino - Enero 2019

• Posibilitar la recuperación de errores. Poder volver atrás en cualquier momento


sin problemas.

72
DCU
Las fases principales del diseño centrado en el usuario.

Diseño Estratégico Investigación Ideación

Estrategia Investigación Análisis Ideación Evaluación

Iteración
UX Trends 2019 - Zorraquino - Enero 2019

Pivotaje
Tendencia 3. UX research

Fases del DCU:



Diseño Centrado en el Usuario
1. Definición de los objetivos, a partir del conocimiento del usuario que se obtiene con
los datos facilitados por la investigación.

2. Ideación y prototipado, que facilite aterrizar el diseño en un modelo que pueda ser
evaluado.

3. Testeo, contando con la participación del usuario para ver en qué medida el
producto se ajusta a sus necesidades y expectativas.

4. Rediseño en función de los resultados del test y preparación del producto para su
UX Trends 2019 - Zorraquino - Enero 2019

lanzamiento.

5. El proceso se completa con la evaluación y la mejora constante, basado en el


análisis habitual de la interacción del usuario con el producto.

74
Tendencia 3. UX research

Evaluación heurística
• Método para evaluar una interfaz según el cumplimiento de una lista de verificación.

• Conjunto de mejores prácticas y pautas que ayudan a identificar áreas


problemáticas y oportunidades potenciales.

• Definido por Jakob Nielsen (gurú de la usabilidad) en los 90.

• Una evaluación heurística es una evaluación de una experiencia digital que identifica
problemas de usabilidad.
UX Trends 2019 - Zorraquino - Enero 2019

• El uso de este método mejora la experiencia de usuario y ayuda a evitar problemas


de postproducción.

• También puede ayudar a sugerir medidas correctivas para los diseñadores de UX.

75
Heurística de la usabilidad
Las diez reglas de la heurística de Jakob Nielsen.

1 Visibilidad del estado
 6 Minimizar la carga de



del sistema. la memoria del usuario.

2 Similitud entre el sistema
 7 Flexibilidad y eficiencia



y el mundo real. de uso.

3 Control y libertad para el
 8 Los diálogos estéticos y



usuario. diseño minimalista.

4 Consistencia y
 9 Ayuda al reconocimiento,


estándares. diagnóstico y recuperación
de los problemas.

5 Prevención de errores. 10 Ayuda y documentación.


Tendencia 3. UX research

Jobs to be done
• Los profesionales quieren aumentar la empatía a través de la observación empírica.
Este sistema se centra en el contexto y los deseos que mueven a los usuarios a
actuar de cada manera.

• JTBD despliega un Atlas donde analizar todos los elementos que influyen en los
usuarios: emocionales, contextuales, reiterativos, puntos débiles y fuertes…

• La fórmula JTBD se centra en los cambios que el usuario quiere realizar en su


comportamiento orientados a un objetivo final y deseado: ¡el trabajo por hacer!
UX Trends 2019 - Zorraquino - Enero 2019

• Los motores de trabajo de este Atlas incluyen motivaciones, necesidades,


ansiedades, expectativas, actitudes y modelos mentales.

77
Tendencia 3. UX research

Jobs to be done
• Definen el deseo consciente desde la perspectiva del consumidor.

• Lo relevante acerca de estos conceptos es que proporcionan un contexto de por qué


es deseable hacer un trabajo.

• Las motivaciones y los comportamientos pueden ser diferentes según los diferentes
perfiles que se investiguen.

• Complementan el conocimiento de un individuo ya que aportan una comprensión


más global del perfil.
UX Trends 2019 - Zorraquino - Enero 2019

• JTBD se enfoca en el resultado deseado, el trabajo a realizar. Es algo más concreto y


menos complicado que generar un perfil “persona” ya que tiene muchas aristas y
abstracciones.

78
Jobs to be Done Book
By Anthony W. Ulwick
Tendencia 3. UX research

Fitbit
• Uso de técnicas de Research de IDEO: Diseño centrado en el usuario (Human-
Centered Design).

• Descripción de los usuarios según el uso de la app.

• Jobs To Be Done explora posibles contextos donde el usuario utiliza Fitbit, ¿qué le
mueve o motiva en cada contexto a utilizar la app?

• Identificar los puntos débiles.


UX Trends 2019 - Zorraquino - Enero 2019

• Definir problemas e identificar posibles mejoras y oportunidades.

• Diseñar la propuesta, prototipar e implementar las mejoras con respecto a cada


"pain point".

• Mantener seguimiento y evaluar.

80
Charlotte Behaviors
• She works 9am-6pm and sometimes overtime during the week.
• She does yoga once a week.
• She runs occasionally on the weekends.
• She sleeps around 6-7 hours.
• Some of her friends own Fitbit and go to the gym together.
• She cares about her image and has an active social life.

Needs & Goals


• She wants to have a healthier lifestyle.
Demographics • She wants to track her exercise and do more cardio workouts.
• Age: 28 • She wants to look fitter and lose 6 pounds.
• Location: San Francisco • She wants to sleep 8 hours a day.
• Occupation: Graphic designer • She wants to exercise with her friends.
UX Trends 2019 - Zorraquino - Enero 2019

Fitbit
Descripción de sus usuarios, importancia de los comportamientos,
también de las necesidades y motivaciones.

81
Fitbit
Investigación a partir de la técnica Jobs to be Done.

Situation Motivation Outcome


Fitbit
Trabajo de identificación de Pain Points.
Pain points Success rate
(i.e. user succeeded without struggle)

Before After

• Find where to long or track 2/5 5/5


an exercise

• Find the relevant exercise 0/5 4/5


type log

• Edit duration of an exercise 0/5 5/5

• Set up a challenge with a 2/5 5/5


friend
UX Trends 2019 - Zorraquino - Enero 2019

Fitbit
Técnica para evaluar los cambios realizados.

84
Pruebas de usabilidad
Evaluación de producto con usuarios reales.
Tendencia 3. UX research

“Guerrilla usability test is ‘the art of pouncing on


lone people in cafes and public spaces, quickly
filming them whilst they use a website for a couple
of minutes’.”

Martin Belam, The Guardian.


UX Trends 2019 - Zorraquino - Enero 2019

86
Tendencia 3. UX research

Zorraquino sugiere
• La fase de investigación se consolida como un paso necesario, que no se puede
obviar si se busca calidad.

• Supone una puesta en valor de la metodología y capacidad estratégica humana


frente a la máquina.

• Se deja de ver como una pérdida de tiempo o dinero. Es una inversión necesaria que
previene males posteriores.

• La investigación como base y cimiento del desarrollo de la estrategia de diseño.


UX Trends 2019 - Zorraquino - Enero 2019

Investigación igual a solidez.

• Aporta información valiosa sobre usuarios, pistas sobre dónde encontrar al público
acertado, etc.

87
Tendencia 3. UX research

Referencias
Recopilación de Métodos de Usabilidad
https://www.sidar.org/recur/desdi/traduc/es/visitable/Herramientas.htm

The Research Process in 5 Inspiring UX Case Studies


https://medium.com/@allisoncrady/the-research-process-in-5-inspiring-ux-case-studies-6b344e6f810

UX Research Is Essential to Product Success


https://www.uxmatters.com/mt/archives/2018/09/ux-research-is-essential-to-product-success.php

10 Tips on How to Conduct a Perfect Heuristic Evaluation


https://medium.muz.li/10-tips-on-how-to-conduct-a-perfect-heuristic-evaluation-ae5f8f4b3257
UX Trends 2019 - Zorraquino - Enero 2019

Best Jobs in America CNN Money


https://money.cnn.com/gallery/pf/2017/01/05/best-jobs-2017/39.html

88
Tendencia 3. UX research

Referencias
Facebook Careers UX Researcher Jobs
https://www.facebook.com/careers/jobs/191914045085653/?ref=a8lA00000004CJ6IAM

TripAdvisor UX Researcher
https://careers.tripadvisor.com/job/TRINUS1153/UX-Researcher

IBM User Researcher


https://careers.ibm.com/ShowJob/Id/466389/User%20Researcher

Adobe Careers User Magento User Experience Researcher


https://adobe.wd5.myworkdayjobs.com/en-US/external_experienced/job/Austin/Magento-User-Experience-
UX Trends 2019 - Zorraquino - Enero 2019

Researcher_64644

UX Lab: The User Experience of Usability Testing


https://www.youtube.com/watch?v=ygMZlH9zUwE

89
Tendencia 4

Buttonless
La interacción más allá

UX Trends 2019 - Zorraquino - Enero 2019

del cursor y dedo.

90
Tendencia 4. Buttonless

Más allá del cursor y el dedo


La estrategias “Voice First” han empezado a sonar con fuerza este año, reivindicando
un tipo de interacción más humana y natural entre el hombre y la máquina,
posibilitada ahora por la tecnología.

Un tipo de interacción que, sobre todo, abre una nueva era en la que los humanos nos
relacionaremos con las máquinas sin necesidad del ratón, el teclado o el dedo, sino
más bien, a través de la voz, la imagen, los gestos o los movimientos.

Interacturar con las máquinas modulando la voz o moviendo las manos o el cuerpo es
aparentemente más fácil y cómodo para el usuario; resulta más intuitivo y reduce la
intermediación hombre-máquina.
UX Trends 2019 - Zorraquino - Enero 2019

Pero, también, presenta nuevos desafíos para los diseñadores, que tienen que
aprender a crear experiencias usando un lenguaje, una tecnología y un modo de
trabajo que hasta ahora no existía, y que puede ser muy beneficioso tanto para los
consumidores como para las marcas.

91
Tendencia 4. Buttonless

En síntesis
• La interacción a través del ratón, el teclado o la pantalla podrían pasar pronto a
segundo término.

• La voz, la imagen y los gestos son el futuro. La importancia del canal.

• Diseñar conversaciones amables y efectivas, no ser pesados, no dar muchas


explicaciones. Textos redactados para ser hablados.

• Características: síntesis, estilo directo, repetición ideas principales...

• Los gestos como medio de interacción. Manejo de dispositivos moviendo la mano,


mostrando una sonrisa o, simplemente, dejándote ver.
UX Trends 2019 - Zorraquino - Enero 2019

• Nuevos canales que enriquecen el "journey map" que recorre cualquier usuario.

• Nuevos lenguajes todavía por explorar y que habrá que aprender a manejar.

92
Aumento del uso de la voz
La voz va ganando terreno en las búsquedas de información.

How do you prefer to search for online information?


Aumento del uso de la voz
Quiénes son los que más utilizan este nuevo canal.
Sobre todo millennials seniors masculinos, seguidos de mujeres Gen X con niños.

How many US people are using digital



voice assistants, by generation
Aumento del uso de la voz
Cada vez más dispositivos de interacción por voz.
Aumento del uso de la voz
Forma ya parte de nuestra rutina diaria.
Aumento del uso de la voz
¿Dónde tenemos los altavoces activados por voz?
Aumento del uso de la voz
Una experiencia de usuario más humana.
Aumento del uso de la voz
Un nuevo espacio para las marcas.
Tendencia 4. Buttonless

Los usuarios y la interacción por voz


• Usuarios que buscan ayuda de forma concreta e inmediata.

• Son los usuarios los que buscan a las marcas y esperan interacción, al revés que en la
publicidad tradicional.

• Más de la mitad de los adolescentes de los EE. UU y el 41% de los adultos hablan
regularmente con Alexa, Siri, Google Home o asistentes virtuales en automóviles.

• Una campaña de voz no se basa sólo en el tipo de consumidor, sino también tiene que
saber qué está haciendo y dónde está. No tiene que ser confusa, tiene que ser útil,
UX Trends 2019 - Zorraquino - Enero 2019

entretenida y clara.

100
Tendencia 4. Buttonless

TV por voz
• La interacción por voz también en los televisores inteligentes.

• En 2018 era una tecnología reservada para los modelos premium pero en 2019 será
mucho más común.

• Alexa y Google Home se han introducido en las televisiones como una funcionalidad
estándar.

• Control por voz de la televisión, pero también integración de la Smart tv en un hogar


conectado.
UX Trends 2019 - Zorraquino - Enero 2019

• Elimina la experiencia negativa de los teclados en las pantallas de la televisión para


realizar búsquedas.

101
TV por voz
Tipos de televisiones con asistentes por voz.
Tendencia 4. Buttonless

Apple TV
• Ofrece muchos servicios de control por voz a través de Siri.

• Búsquedas, reproducción, inicio de aplicaciones, sintonización de programas en


directo…

• También puede cargar vídeos de YouTube, canciones en Apple Music o podcasts.

• Incluye funciones sobre información del tiempo y control de los dispositivos


domésticos a través de HomeKit.
UX Trends 2019 - Zorraquino - Enero 2019

• Posibilidad de dictar contraseñas por voz. Más rápido, fácil y amable que los teclados
que aparecen en las televisiones.

103
Apple TV
Dispone de un mando sencillo que facilita la interacción por voz.
Tendencia 4. Buttonless

“Dentro de poco, los asistentes de voz serán más


importantes que los smartphones.”

Adam Cheyer, cofundador de Siri.


UX Trends 2019 - Zorraquino - Enero 2019

105
Tendencia 4. Buttonless

Google Soli
• Tecnología de Google que puede acabar con las pantallas táctiles.

• Aunque el proyecto fue presentado en 2015, no ha sido hasta ahora cuando ha


conseguido la aprobación de EEUU para su puesta en marcha.

• Soli es un sensor de interacción especialmente diseñado que utiliza un radar para el


seguimiento del movimiento de la mano humana.

• Gestos aéreos detectados con ondas electromagnéticas.


UX Trends 2019 - Zorraquino - Enero 2019

• Rastrea y reconoce los gestos dinámicos expresados por movimientos finos de los
dedos y la mano, sin tocar pantallas.

• Prototipos condensados que ya caben en relojes inteligentes y en el interior de


teléfonos móviles.

106
Google Soli
Innovador dispositivo con tecnología de gestos inalámbrica.
Google Soli
Un radar diminuto detecta interacciones gestuales sin contacto.
Google Soli
Soli hardware prototypes July 2014 - May 2015.
Tendencia 4. Buttonless

Amazon Echo Show


• Además de las funcionalidades de Amazon Echo y Echo Dos tiene una pantalla de
10.1 pulgadas, tipo tableta, conectado a un altavoz.

• Video en resolución de 720p en HD.

• Añade un mensaje visual a la información ofrecida por voz.

• Casi sin botones o control remoto, Show se maneja a través de la voz. La pantalla
táctil ofrece un complemento a los resultados de búsquedas, la lectura de noticias,
la consulta del tiempo, o de recetas, el control de la casa… o simplemente se convierte
UX Trends 2019 - Zorraquino - Enero 2019

en un elemento decorativo como un marco de fotos digital.

• Mejora la experiencia de usuario sobre todo para realizar vÍdeo llamadas, realizar
compras por voz. Diseño UX + voz.

110
Amazon Echo Show
Experiencia más completa al combinar voz e imagen.
Facebook Portal
Esta es el primera pieza de hardware de Facebook.
Tendencia 4. Buttonless

Magic UX
• App diseñada por el estudio Special Proyects de UK.

• Permite pasar de app en app sin realizar un baile de pulgares sino moviendo el móvil
por un espacio físico como si estuviesen los materiales ordenados sobre un escritorio
y un simple control manual.

• Inspiración en la mesa de trabajo del mundo físico.

• Realizado a través de la tecnología de Realidad Aumentada donde crea un espacio


de trabajo virtual.
UX Trends 2019 - Zorraquino - Enero 2019

• Para escribir un mail se puede saltar a la carpeta de fotos para adjuntar de manera
intuitiva y más fácil o copiar textos desde Internet para incluir en ese mail.

• London Design Awards Gold Winner.

113
Magic UX
Magic UX recrea la sencillez de unir elementos en un escritorio virtual.
Magic UX
Magic UX recrea la sencillez de arrastrar elementos en un escritorio virtual.
Tendencia 4. Buttonless

Buttonless screen
• Pantallas sin botones. Intuitivo, descifrar su uso con solo mirarlo.

• Navegación a través de gestos o voz. Los gestos son naturales y reflejan las
acciones físicas.

• Las acciones a través del tacto otorgan al usuario una sensación de realidad
y control.

• Pequeñas animaciones que facilitan al usuario realizar simples acciones.

• Muy acostumbrados por el uso de redes sociales en móvil o tablet. Instagram,


Facebook, Twitter, se manejan con sencillos gestos del pulgar.
UX Trends 2019 - Zorraquino - Enero 2019

• Cada vez se realizan más acciones por voz, búsquedas, pagos…

• IoT gestos entre dispositivos conectados que ahorran tiempo al usuario.

116
Nuevo Feed Instagram
Combina los gestos horizontales y verticales de forma fácil e intuitiva.
Dribbble
Pequeños gestos sobre la pantalla que empatizan con los usuarios.
Asos
Con un pequeño gesto se incluye un producto al carrito y se paga a través de la huella digital.
Google Assistant
Diseño muy coherente con la marca, que utiliza de forma muy visual la presentación

de la información requerida por el usuario.
Google Assistant
Diseño muy coherente con la marca, que utiliza de forma muy visual la presentación

de la información requerida por el usuario.
Clay
Gestos detectados entre dispositivos conectados.
IoT
Gestos detectados entre dispositivos conectados.
IoT
Dispositivos conectados para desbloquear el usuario sin contraseña.
Tendencia 4. Buttonless

Zorraquino sugiere
• Los usuarios han impulsado la voz como un nuevo canal, las marcas deben adaptar
sus estrategias a esta nueva necesidad.

• Establecer jerarquía de información. Los usuarios no quieren sentirse sobrecargados,


pero al mismo tiempo, necesitan suficiente información para completar su tarea.

• Diseñar siempre estrategias de error. Diseñar para escenarios con mal sonido,
confusión, malinterpretaciones…

• La interfaz de voz ha cambiado la forma de interacción, el entretenimiento, los motores


UX Trends 2019 - Zorraquino - Enero 2019

de búsquedas… y seguirá cambiando en los próximos años.

125
Tendencia 4. Buttonless

Referencias
Taking Command of Voice: What the New Channel Means for Marketers
https://venturebeat.com/2018/03/20/taking-command-of-voice-what-the-new-channel-means-for-marketers

OK, Google, Will Voice Be The Future of Search?


https://www.forbes.com/sites/nicolemartin1/2018/11/06/ok-google-will-voice-be-the-future-of-search/
#741163e17d04

Designing a VUI—Voice User Interfaz


https://uxplanet.org/designing-a-vui-voice-user-interface-c0b3b9b57ace

New Amazon Echo Show Review 2018


UX Trends 2019 - Zorraquino - Enero 2019

https://www.theverge.com/2018/10/8/17944022/new-amazon-echo-show-review-2018-alexa-speaker-video-
camera

126
Tendencia 4. Buttonless

Referencias
Clay VR Gesture Recognition On iPhone
https://www.youtube.com/watch?v=Nqdsk4_COdU

This is Facebook’s first piece of hardware, Portal


https://www.dailydot.com/debug/what-is-portal-facebook-speaker/

5 ways voice assistance is shaping consumer behavior


https://www.thinkwithgoogle.com/consumer-insights/voice-assistance-consumer-experience/

Entrevista a Adam Cheyer, cofundador de Siri


UX Trends 2019 - Zorraquino - Enero 2019

https://retina.elpais.com/retina/2017/11/27/tendencias/1511800893_865293.html

127
Tendencia 4. Buttonless

Referencias
Google Soli
https://atap.google.com/soli/

Project Soli, los mini radares de Google que reconocen movimientos, consigue
la aprobación de los EEUU para su puesta en marcha
https://www.xataka.com/robotica-e-ia/project-soli-mini-radares-google-que-reconocen-movimientos-consigue-
aprobacion-eeuu-para-su-puesta-marcha

Project Soli, el invento de Google que puede acabar con las pantallas táctiles
https://www.xatakamovil.com/desarrollo/asi-project-soli-invento-google-que-puede-acabar-pantallas-tactiles
UX Trends 2019 - Zorraquino - Enero 2019

macOS Sierra: Auto Unlock with Apple Watch hands-on


https://www.youtube.com/watch?v=aHCSgdKHrPs

How many US people are using digital voice assistants, by generation


https://www.theatlas.com/charts/Sy-EorC1-

128
Tendencia 5

UX invisible
La experiencia de usuario

UX Trends 2019 - Zorraquino - Enero 2019

que no se ve.

129
Tendencia 5. UX invisible

La no UX
Cada año vemos cómo se vuelven posibles cosas que creíamos imposibles. Algunos
ya cuentan con un asistente en el salón que organiza la casa, muchos han comenzado
a pagar sin necesidad de llevar cartera, en algunos lugares los vendedores ya saben lo
que nos gusta antes de que lleguemos a pedir…

Facilidades que mejoran y enriquecen la experiencia de usuario, con diseños


invisibles, mínimos, transparentes y que no se ven, mientras las pantallas y botones
van desapareciendo.
UX Trends 2019 - Zorraquino - Enero 2019

En muchos casos, se puede decir que el diseño UX es invisible, pero eso no significa
que desaparezca. Al contrario, es más complejo y está más presente que nunca, pero
por detrás.

130
Tendencia 5. UX invisible

En síntesis
• La UX sin interfaz. Zero UI.
• Cada vez hay más UX, pero mucho más oculta.
• Un tipo de UX que no se plasma en la interfaz de usuario. Experiencia de usuario sin
interfaz.
• UX invisible, cada vez menos botones. Interfaces cada vez más simples a la vista pero
más complejas por detrás.
• IA, algoritmos, modelos de predicción… todos los procesos y diseño están
UX Trends 2019 - Zorraquino - Enero 2019

encubiertos, es diseño back end.


• Cada vez más habitual en nuestras vidas: Alexa, Nest, Fitbit, Google Home…

131
Tendencia 5. UX invisible

“Good design is obvious.



Great design is invisible.”
Joe Sparano, diseñador gráfico.
UX Trends 2019 - Zorraquino - Enero 2019

132
Tendencia 5. UX invisible

Google Discover,

el nuevo Google Feed
• Presentado en el evento de 9to5 Google el pasado octubre.

• Google Feed pasa a ser Google Discover.

• Anticiparse a la información que los usuarios necesitan antes de que la pidan.

• Disponible a la izquierda del buscador de Android: muestra artículos relacionados


con sus aficiones según preferencias predeterminadas.

• Utilizada por 800.000 usuarios.


UX Trends 2019 - Zorraquino - Enero 2019

• A un golpe de pulgar sin tener que preocuparse en las búsquedas. Los temas que a
uno le interesan disponibles en un click.

• Lanzamiento a la vez que Google Lens se ha convertido en Google Images que


marcará el futuro de las búsquedas a través de imágenes.

133
Tendencia 5. UX invisible

Google Discover,

el nuevo Google Feed
• Otra novedad es el diseño de tarjetas para los resultados en el buscador para móviles.

• Las tarjetas incluyen una imagen de portada, un título y un breve resumen, así como
el nombre del sitio y la fecha de publicación.

• Cada tarjeta tiene un menú desplegable en la esquina superior derecha que permite
descartar o decir que no está interesado, para filtrar las preferencias de cada usuario
y recibir contenido que realmente interesa.

• Información enriquecida de los resultados de las búsquedas. Las imágenes y


UX Trends 2019 - Zorraquino - Enero 2019

posibilidad de filtrar según preferencias en la misma interfaz facilita la experiencia de


usuario, a golpe de vista, sencilla y con un solo dedo.

134
Nuevo Feed de Google
Discover ofrece información interesante para el usuario sin necesidad de buscar.
Google Discover
El filtrado de noticias permite realizar diversas acciones de forma intuitiva.
Tendencia 5. UX invisible

Fitbit
• Sin botones. Menos pantalla.

• Presentación elegante y moderna del dispositivo.

• App motivadora para realizar esfuerzo físico y llevar una vida sana.

• Es un rastreador de ejercicios que monitorea el ritmo cardíaco, los pasos, calorías y


líquidos ingeridos. Propone y recuerda el movimiento o comidas en forma de juego
para lograr los objetivos. Gamificación.

• Interacción más natural e intuitiva a través de la pantalla en vez de botones. Sensores


de aviso en la muñeca.
UX Trends 2019 - Zorraquino - Enero 2019

• Más información en la pantalla al poder deslizarla.

• Incluye Fitbit pay para realizar pagos contactless. Notificaciones mails, llamadas y
mensajes.

137
Fitbit
Reducción de la pantalla y eliminación de los botones en el nuevo modelo Charge 3 de Fitbit.
Fitbit
Modelo Fitbit HR más sencillo todavía.
Tendencia 5. UX invisible

Domino’s Pizza
• Objetivo de Domino’s: que la experiencia de usuario a la hora de pedir una pizza sea lo
más fácil posible.

• Dentro de su nuevo sistema “Domino’s Anywhere” el usuario puede pedir una pizza
desde Twitter, Alexa, SMS, Messenger, Google Home, coches Ford, Smart TV, Smart
Watch e incluso Slack.

• También ha desarrollado la app “Zero Click” a través de la que puedes pedir tu pizza
favorita, una vez registrado, sin hacer nada.
UX Trends 2019 - Zorraquino - Enero 2019

• Al abrir la app en 10 segundos se hace el pedido solo. También se puede abrir la app
por voz. Totalmente “seamless”.

• El temporizador añade diversión y adrenalina a la espera.

140
Domino’s Pizza
Domino’s Anywhere, la marca está allí donde se le necesite.
Tendencia 5. UX invisible

“We like to say we used to be a pizza



company that sold online and we've now become
an e-commerce company that sells pizza.”

Denis Maloney, Domino's Chief Digital Officer.


UX Trends 2019 - Zorraquino - Enero 2019

142
Domino’s Pizza
Sin tocar un botón pides tu pizza favorita, en 10 segundos se hace el pedido solo.
Tendencia 5. UX invisible

Biometría para todo


• Reconocimiento facial cada vez más común.

• Servicios personalizados.

• Interfaz sencilla, sin apenas botones.

• Los datos registrados de las caras, cifrados algorítmicamente, garantizan la


privacidad del usuario.

• Teóricamente, el método más seguro de pago.


UX Trends 2019 - Zorraquino - Enero 2019

• Máquinas que recuerdan las preferencias de cada usuario, gestionan los puntos de
fidelización y se anticipan a sus solicitudes.

• Elimina muchos puntos de fricción: llaves, contraseñas, tarjetas fidelización…

144
Seven Eleven
Varias tiendas en Tokio ya realizan el pago por reconocimiento facial.
Alipay
Pago biométrico “Smile to pay” ha evolucionado en “Dragonfly”
más compatible con todo tipo de comerciantes.
Máquina de café Luce X2 Touch TV
Con función de reconocimiento facial que recuerda las preferencias de cada usuario,

ofrece contenido audiovisual personalizado.
Coca Cola empatiza reciclando
Máquina expendedora y de reciclaje de envases que te sonríe cuando interactúas con ella.
Reconocimiento facial para recibir beneficios a través del reciclaje, bebidas gratis o descuentos.
StoneLock Go
Reconocimiento facial para abrir puertas sin necesidad de tener llaves.
Tendencia 5. UX invisible

BBVA
• Simplificación e invisibilización del proceso. Mayor seguridad.

• Elimina la gestión de espera del proceso de compra en un establecimiento.

• Sin preocupación por recordar las contraseñas.

• Dentro del centro financiero BBVA en Madrid.

• En la cafetería mirando una cámara pagas a través del iris del ojo.

• Tecnología de la startup Veridas.


UX Trends 2019 - Zorraquino - Enero 2019

• App Selfie and Go para realizar los pedidos en la cafetería con anterioridad y no
esperar cola.

• Permite guardar favoritos y pedir con Zero Clicks.

150
BBVA. Paga con tu cara
Pagos por reconocimiento facial en la cafetería de las oficinas de Madrid.
Tendencia 5. UX invisible

“The best interface


is no interface.”
Golden Krishna, one of the world’s foremost thinkers of UX desing.
UX Trends 2019 - Zorraquino - Enero 2019

152
Tendencia 5. UX invisible

Zorraquino sugiere
• Diseño que no se ve, ahora es más complejo aunque de cara al usuario es más
sencillo. Diseño back end.

• Las capacidades informáticas se integran de forma orgánica en el contexto de la


vida de forma invisible. Sin pantallas, sin botones, completar acciones a través de los
gestos y rasgos faciales.

• Supresión de la fricción en torno a las contraseñas y tener que memorizarlas,


UX Trends 2019 - Zorraquino - Enero 2019

cambiarlas… más seguridad a través de la fisionomía única de cada ser humano.

153
Tendencia 5. UX invisible

Referencias
Invisible UI: a hidden opportunity for great UX
https://www.usertesting.com/blog/invisible-ui

The User Interface Vanishes: How Smartware Will Change the User Experience
https://www.uxmatters.com/mt/archives/2018/02/the-user-interface-vanishes-how-smartware-will-change-the-
user-experience.php

Making Facial Recognition Smarter With Artificial Intelligence


https://www.forbes.com/sites/jenniferhicks/2018/09/30/making-facial-recognition-smarter-with-artificial-
intelligence/#2d6e06f0c8f1

The Best Interface is No Interface


http://www.nointerface.com/book
UX Trends 2019 - Zorraquino - Enero 2019

Google Discover begins rolling out to google.com on mobile web


https://9to5google.com/2018/10/27/google-discover-web-rolling-out/

‘Pagar por la cara’ gracias a la estrategia de ‘pagos invisibles’ de BBVA


https://www.bbva.com/es/bbva-pone-marcha-estrategia-pagos-invisibles/

154
Tendencia 5. UX invisible

Referencias
Fitbit Charge 3 hands-on: An all-week fitness tracker with the soul of a
smartwatch
https://www.macworld.com/article/3298682/fitness-hardware/fitbit-charge-3-hands-on.html

Domino’s Pizza: el placer de la experiencia de usuario


https://www.mastermarketingdigital.com/everriculum/2018/05/25/dominos-pizza-placer-la-experiencia-usuario/

Facial recognition software for vending machines


https://www.canadianvending.com/machines-accessories/facial-recognition-software-for-vending-
machines-4878

Máquinas expendedoras inteligentes: Coca-Cola usa el reconocimiento facial


UX Trends 2019 - Zorraquino - Enero 2019

para darte beneficios al reciclar


https://www.coca-colamexico.com.mx/historias/maquinas-expendedoras-inteligentes-reconocimiento-facial

True Frictionless Access Control


https://www.stonelock.com/

155
UX Trends 2019 - Zorraquino - Enero 2019

Tendencia 6

Dark patterns.
UX oscura

156
Tendencia 6. UX oscura

Patrones oscuros
Mientras el UX coloca al usuario en el centro y le facilita el camino en los entornos
digitales, existe otra cara de la moneda que utiliza el diseño con malas intenciones.
Estrategias empleadas por algunas marcas para engañar a sus usuarios y conseguir
más clicks, suscripciones o beneficios de forma poco ética. Se trata de diseños que,
de entrada, crean desconfianza, generan tensión en la relación y producen desagrado
e influyen de forma negativa tanto en la experiencia de usuario como en la
reputación de las marcas.

Harry Brignull, doctor en Ciencia Cognitiva, bautizó estas prácticas como dark
patterns y comparte en su web las frustraciones de muchos usuarios con respecto a
UX Trends 2019 - Zorraquino - Enero 2019

estos engaños.

Las nuevas políticas de transparencia y las regulaciones sobre privacidad denuncian


estas prácticas, dedicadas a buscar el beneficio de la empresa sin pensar en el
usuario final y, por tanto, lesionando directamente la UX.

157
Abuso de notificaciones
Cómo los puntos rojos se apoderan de nuestra vida.
Apple iOS 12
iOS 12 incluye nuevas prestaciones para reducir las interrupciones y gestionar Screen Time.
Tendencia 6. UX oscura

Patrones de persuasión
• El diseño persuasivo comprende factores psicológicos, conductas y motivaciones
inconscientes del usuario.

• Presenta toda la información de manera persuasiva.

• Psicología social.

• Psicología del desarrollo.


UX Trends 2019 - Zorraquino - Enero 2019

• Psicología cognitiva.

• Psicología del aprendizaje.

160
Los seis principios de la persuasión
Por Robert Cialdini, autor de la obra ‘Influence: The Psychology of Persuasion’ (1984).

Prueba social Coherencia Reciprocidad

Autoridad Agrado Escasez


Persuasive Patterns
Herramienta de brainstorming.
Tendencia 6. UX oscura

En síntesis
• Patrones de diseño utilizados de forma intencionada para engañar al usuario y
provocar que realice acciones contra su voluntad.

• Harry Brignull creó el término y el dominio darkpatterns.org donde cuelga ejemplos


para llamar la atención sobre estas prácticas.

• Diseños engañosos a través del uso del color, la colocación de botones y un


lenguaje confuso.

• Se aprovechan de un usuario torpe, con prisas, vago o distraído.


UX Trends 2019 - Zorraquino - Enero 2019

• Obligan al usuario a examinar la pantalla en busca de trampas ocultas, des-


seleccionar elementos que se agregan automáticamente a las cestas, o que les
suscriben a servicios que no desean.

163
UX Trends 2019 - Zorraquino - Enero 2019

Facebook
Indica los mensajes sin leer en una categoría concreta para incidir la navegación en esa categoría,
a pesar de que haya mensajes en otras. Si no entramos, la notificación no desaparece.

164
UX Trends 2019 - Zorraquino - Enero 2019

Skype
No ofrece un ‘no’ como opción.

165
UX Trends 2019 - Zorraquino - Enero 2019

Banco Sabadell
No deja desuscribirse a los usuarios.

166
El pelo en Instagram
Un pelo en la pantalla hace que quieras quitarlo y hacer clic como en este ejemplo.
UX Trends 2019 - Zorraquino - Enero 2019

La dificultad de cancelar una suscripción


Esta newsletter tiene la opción de anular la suscripción en texto blanco sobre fondo blanco.

168
UX Trends 2019 - Zorraquino - Enero 2019

Gratis (pero no del todo)


El precio solo cubre el envío.

169
Skype y Bing & MSN
Al instalar un nuevo servicio a través de muchas pantallas,

la inercia puede hacer que pulses algo que realmente no quieres aceptar.
Tendencia 6. UX oscura

“Lo honesto no es mandarte un recordatorio, 



lo honesto sería no pedirte la tarjeta.”

Inma Bermejo, Lead Designer de Weblogs S.L.


UX Trends 2019 - Zorraquino - Enero 2019

171
Tendencia 6. UX oscura

Los 11 patrones

oscuros de Brignull
1. Disguised Ads: publicidad disfrazada como contenido de una página.

2. Forced Continuity: renovaciones automáticas después de una prueba gratuita.

3. Friend Spam: pedir contactos de email o red social.

4. Hidden Costs: aplicar gastos desconocidos en los últimos pasos de compra


(envíos, impuestos).
UX Trends 2019 - Zorraquino - Enero 2019

5. Misdirection: distracciones sobre lo importante.

6. Balt and Switch: hacer creer al usuario que hace una cosa cuando en realidad está
haciendo otra.

172
Tendencia 6. UX oscura

Los 11 patrones

oscuros de Brignull
7. Price Comparison Prevention: evitar la comparación de precios.

8. Privacy Zuckering: “Marcarse un Zuckerberg” utilizar los datos del usuario tras
acordarlo en una letra pequeña oculta.

9. Roach Hotel: “Hotel con cucarachas” que impide al usuario darse de baja.

10. Sneak into Basket: incluir productos en la cesta para comprar sin darte cuenta.
UX Trends 2019 - Zorraquino - Enero 2019

11. Trick Questions: “le enviaremos publicidad a no ser que deseleccione esta casilla”.

173
UX Trends 2019 - Zorraquino - Enero 2019

Sky
A través de un lenguaje confuso y enrevesado confunde al usuario.

174
Tendencia 6. UX oscura

“If the company benefits more than the consumer,


I would call it ‘evil design’. If an approach benefits
the company and the customer equally, you are
probably in the realm of ‘commercial design’.”

Chriss Nodder, autor de “Evil by Design”.


UX Trends 2019 - Zorraquino - Enero 2019

175
Tendencia 6. UX oscura

Ryanair
• Las aerolíneas son un sector que poseen muchas dark patterns.

• El de Ryanair es conocido como un clásico.

• Ejemplo de mala dirección o misdirection del usuario en el proceso de compra.

• La web de Ryanair marca por defecto el pago de un seguro de viaje.

• Si el usuario no desea contratarlo tiene que buscar la opción dentro de la pestaña


desplegable con un listado de países de residencia.

• No presenta la opción de cancelación clara y visible.


UX Trends 2019 - Zorraquino - Enero 2019

• La mezcla de categorías crea confusión en el usuario

• Aparecerá automáticamente este servicio complementario en la cesta si no se


consigue cancelar, algo ilegal en la UE.

176
UX Trends 2019 - Zorraquino - Enero 2019

Ryanair
En la web de Ryanair si no quieres pagar el seguro que añaden por defecto

debes buscar en un listado de países la opción de eliminar.

177
Tendencia 6. UX oscura

Linkedin
• LinkedIn importa tus contactos de mail al crear una cuenta como uno de los
procesos predeterminados del registro.

• En uno de los pasos del registro al pulsar “Añadir contactos” enviaba una invitación a
todos tus contactos de mail.

• La diferencia entre la presentación de contactos que ya tenían un perfil en LinkedIn y


los que no era casi imperceptible.

• Los usuarios denunciaron que el botón de “Añadir contactos” suponía una práctica
desleal por parte de la red social.
UX Trends 2019 - Zorraquino - Enero 2019

• Los usuarios se sentían molestos debido a que LinkedIn enviase una avalancha de
mails en su nombre.

• LinkedIn pagó 13 millones de dólares en 2015 a sus usuarios.

178
Linkedin
Linkedin hizo que sus usuarios se sintieran molestos y utilizados al enviar spam en su nombre.
Linkedin
Durante el proceso de alta no diferencian los contactos que ya están en la red social y los que no.
UX Trends 2019 - Zorraquino - Enero 2019

Linkedin
Como uno de los pasos predeterminados a seguir, acceden

a tus contactos de mail sin dejar muy visible la opción opuesta.

181
UX Trends 2019 - Zorraquino - Enero 2019

Linkedin
Al pulsar “saltar este paso” insisten marcando en azul la opción opuesta
a la que el usuario quería realizar.

182
UX Trends 2019 - Zorraquino - Enero 2019

Linkedin
Cambio realizado tras las denuncias, sigue sin quedar muy claro paro va mejorando…

183
Tendencia 6. UX oscura

Privacidad:

Facebook y Google ante el GDPR
• Informe realizado por el Consejo Noruego de Consumidores en abril y mayo de 2018
ante los cambios en privacidad del GDPR.

• Analiza las grandes empresas como Facebook, Google y Microsoft.

• Analizan los patrones oscuros en la configuración de la privacidad.

• Configuraciones predeterminadas y redacción engañosa.

• Creación en el usuario de una “ilusión de control”.


UX Trends 2019 - Zorraquino - Enero 2019

• Opciones que benefician al consumidor más escondidas, selecciones


predeterminadas, o cierta información clave en segundas pantallas.

• Sin posibilidad de posponer si salta el pop up, toma de decisiones inmediata,


amenazas de pérdida de funcionalidad si no se eligen ciertas configuraciones, etc.

184
Diagrama de flujo de Facebook
13 clicks vs los 4 de la ruta fácil.
Pop up de Google ante la nueva privacidad
Obligaba a aceptar para continuar, la opción de configurar cada sección podía llevar bastante tiempo al usuario
dependiendo en el momento en el que le pillase.
UX Trends 2019 - Zorraquino - Enero 2019

Opciones predeterminadas en Google


La configuración predeterminada de las opciones está ya marcada para compartir
los datos del usuario con ellos sobre Maps, Search o YouTube.

187
Reconocimiento facial de Facebook
Para deshabitar el reconocimiento facial debes llegar a la tercera pantalla y superar las advertencias

que asustan al usuario, sin contar los usos que ellos pueden darle a tu imagen.
UX Trends 2019 - Zorraquino - Enero 2019

Las tres grandes ante la privacidad del usuario


Comparativa de las facilidades o dificultades que ofrecen las grandes empresas a la 

hora de presentar al usuario las opciones sobre la privacidad de sus datos.

189
Tendencia 6. UX oscura

Ética empresarial y transparencia


• Estrategias oscuras o dark benefician a las marcas en un corto plazo, pero las
empresas están sentando las bases para crear lealtad por parte de los usuarios y tener
un crecimiento orgánico y sostenible.

• La desconfianza generada por los dark patterns hace que los usuarios penalicen a
las marcas, se generen escándalos que minen su reputación y acaben con denuncias
o procesos legales.

• Regularización de las malas prácticas, un acuerdo ético para los servicios web que
UX Trends 2019 - Zorraquino - Enero 2019

amparen a los consumidores.

• Dialéctica entre beneficios de negocio mayores con ofrecer una experiencia de


usuario transparente y que beneficie al usuario.

190
Tendencia 6. UX oscura

Zorraquino sugiere
• El engaño puede parecer beneficioso a corto plazo, pero no es una estrategia
sostenible a la larga.

• Una buena UX implica un diseño claro donde el usuario pueda sentirse confiado y
realizar todas las acciones de forma intencionada, consciente y conforme.

• Los usuarios demandan transparencia y responsabilidad por parte de las marcas,


una navegación sencilla y clara.

• Se espera una disminución de estas prácticas engañosas obedeciendo a una


UX Trends 2019 - Zorraquino - Enero 2019

responsabilidad de carácter social que están tomando las empresas por exigencia
de sus clientes.

191
Tendencia 6. UX oscura

Referencias
Dark Patterns
https://darkpatterns.org

Dark Patterns: el lado oscuro del UX


https://wildwildweb.es/es/blog/dark-patterns-el-lado-oscuro-del-ux

WTF is Dark Pattern Design


https://techcrunch.com/2018/07/01/wtf-is-dark-pattern-design

The Year Dark Pattern Won


https://www.fastcompany.com/3066586/the-year-dark-patterns-won
UX Trends 2019 - Zorraquino - Enero 2019

Dark Patterns in UX: How Designers Should Be Responsible for their Actions
https://uxdesign.cc/dark-patterns-in-ux-design-7009a83b233c

192
Tendencia 6. UX oscura

Referencias
Los seis principios de la persuasión
https://habilidadsocial.com/tecnicas-de-persuasion/

How Tiny Red Dots Took Over Your Life


https://www.nytimes.com/2018/02/27/magazine/red-dots-badge-phones-notification.html?smprod=nytcore-
ipad&smid=nytcore-ipad-share

iOS 12 incluye nuevas prestaciones para reducir las interrupciones y gestionar


Screen Time
https://www.apple.com/es/newsroom/2018/06/ios-12-introduces-new-features-to-reduce-interruptions-and-
UX Trends 2019 - Zorraquino - Enero 2019

manage-screen-time/

Add psychology to your web design


https://shop.ui-patterns.com/product/persuasive-patterns-card-deck/

193
Tendencia 6. UX oscura

Referencias
Study calls out “dark patterns” in Facebook and Google that push users towards
less privacy
https://techcrunch.com/2018/06/27/study-calls-out-dark-patterns-in-facebook-and-google-that-push-users-
towards-less-privacy

Dark Patterns and the Ethics of Design


https://medium.com/adventures-in-ux-design/dark-patterns-and-the-ethics-of-design-31853436176b

Los 'dark patterns' del diseño: así hackean tu cerebro webs y aplicaciones para
sacarte más dinero o retener tu atención
UX Trends 2019 - Zorraquino - Enero 2019

https://www.xataka.com/otros/los-dark-patterns-del-diseno-asi-hackean-tu-cerebro-webs-y-aplicaciones-para-
sacarte-mas-dinero-o-retener-tu-atencion

194
Tendencia 7

UX writing
Cómo hablar a través del diseño.
UX Trends 2019 - Zorraquino - Enero 2019

195
Tendencia 7. UX writing

UX Writing
La UX Writing se ha convertido en pocos años en una parte esencial de la experiencia
de usuario. Un texto bien pensado facilita y mejora la interacción. Por el contrario,
mal pensado, crea confusión y fricción, y aunque el diseño esté muy bien cuidado,
puede lesionar desde el origen la capacidad de comunicación y de conexión. Cada
interacción del usuario es una oportunidad de conversión, los textos que forman
parte del diseño son tan importantes como la imagen.

Conocidos como microcopys, hacen que la experiencia de usuario sea agradable y


ayude a completar una acción deseada de manera fácil. Además, marcan la identidad
de la marca a través del tono y estilo con el que se dirige a los usuarios.
UX Trends 2019 - Zorraquino - Enero 2019

Acertar con ellos implica, como en todo proceso de diseño, conocer al usuario y su
forma de actuar. Responder a las necesidades de cada momento puede requerir
textos simples y claros, irónicos, que hagan reír… Para cada caso, una escritura.

196
Tendencia 7. UX writing

En síntesis
• Parte importante del UX: diseño de palabras y conversaciones.

• Establece la voz y el tono de una marca.

• El UX Writer participa en el proceso de diseño desde que comienza con la


investigación. Delimita la historia que se quiere contar a través del producto y organiza
las jerarquías de información en la interfaz.

• Objetivo del UX Writer: diseñar la interacción entre producto y usuario.


UX Trends 2019 - Zorraquino - Enero 2019

• Una buena UX Writing permite al usuario un uso fluido de programas y apps, de forma
intuitiva y sin esfuerzo.

197
UX Trends 2019 - Zorraquino - Enero 2019

UX writing en Google
Así incorpora Google el UX Writing dentro de su área de UX.

198
Usuarios Antecedentes El viaje

¿Qué es lo que ¿Dónde están
 ¿Cómo llegaron


saben? ellos? aquí?

¿Qué es lo que ¿Qué dispositivo ¿Qué hacían



quieren? están usando? antes?

¿Cuáles son sus ¿Cuáles son sus ¿Qué pueden hacer


puntos débiles? puntos débiles? ahora?
UX Trends 2019 - Zorraquino - Enero 2019

Comprender cómo se comporta el usuario


El mejor copy va de la mano de la investigación y los tests de usuario.

199
Tendencia 7. UX writing

Los principios del UX writing


• Principios básicos: claridad, concisión, precisión, atención a las palabras y sus
significados, contexto y audiencia.

• Textos situados en: botones, menús, mensajes de error, mensajes de pantalla


informativos, instrucciones de uso…

• Lenguaje concentrado, mucho significado en pocas palabras.

• Eficaz tanto para la empresa (contando) como para el usuario (entendiendo).


UX Trends 2019 - Zorraquino - Enero 2019

• Usuario como protagonista de la historia, cada interacción es pensada para mejorar


su experiencia y alcanzar sus metas.

• Mejorar la interacción con el usuario complementando el trabajo de UI, UX, IxD


(Diseño de Interacción).

200
UX Trends 2019 - Zorraquino - Enero 2019

Claro, conciso y útil


Los principios del UX Writing, aplicados a cada situación.

201
Llamada
 Botones
 Mensajes

Instrucciones
a la acción de navegación de confirmación

Mensajes
 Pantalla

Privacidad Error 404
de error de carga
UX Trends 2019 - Zorraquino - Enero 2019

Dónde se aplica
Microcopy en las diferentes interacciones con el usuario.

202
Tendencia 7. UX writing

Youtube y el UX writing
• 2013 aparece el primer UX Writer contratado en YouTube.

• Años de crecimiento donde adaptar sus productos a diferentes dispositivos y


plataformas.

• Detectaron inconsistencias en el lenguaje: cada dispositivo se comunica con el


usuario con un tono, estilo y voz diferentes.

• UX Writer para proporcionar una mirada transversal y unificar el lenguaje de una


marca.

• 2 tipos de funciones del UX Writer.


UX Trends 2019 - Zorraquino - Enero 2019

• Microcopy: parte transaccional y navegacional del diseño de palabras.

• Copywriting: parte con con más personalidad y vitalidad de un producto. La


combinación expresa la voz, el tono y el estilo de una marca.

203
Tendencia 7. UX writing

“Oh, don’t use big words.



They mean so little.”
Oscar Wilde, writer, poet and playwright.
UX Trends 2019 - Zorraquino - Enero 2019

204
Tendencia 7. UX writing

Claridad y coherencia
• Un texto claro es intuitivo.

• Un texto claro no genera esfuerzo de comprensión.

• Un contenido que no es claro genera confusión, los clientes se van.

• Es una cuestión de muy pocos segundos, ayuda al usuario a leer lo menos posible.

• Testar copys en función de su claridad.

• Acorde con la voz, estilo y tono de una marca.


UX Trends 2019 - Zorraquino - Enero 2019

• El estilo tiende a tener un trato cercano y empático con el usuario.

• Importante tener una guía de estilo que defina los atributos de una marca y cómo
dirigirse al usuario a través de diferentes dispositivos.

205
Citymapper
¿Por qué hablar en calorías si se puede hablar en croquetas?
Guía de estilo
Define cómo dirigirse al usuario a través de cada medio.
High Fives! Rock on!
Your email is in the send queue
 Your email has been scheduled.
and will go out shortly.
UX Trends 2019 - Zorraquino - Enero 2019

Mensajes de confirmación de MailChimp


MailChimp pone humor al trabajo con un sistema B2B amigable, humano y divertido.

208
Salesforce app
El texto es mínimo, y el tono es amigable y conversacional: "¡Aquí están tus cosas!”.
Tendencia 7. UX writing

Utilidad
• UX Writing es muy contextual: llamada a la acción, consejos de uso de herramientas,
etc. Se orienta a informar y guiar al usuario para que realice las acciones propuestas.

• Poco espacio, pantallas pequeñas, poco tiempo…

• No perder de vista el objetivo de cada texto.

• Los usuarios tienen una misión en cada interacción y desean realizarla de forma
rápida y eficiente sin tener que pensar demasiado.
UX Trends 2019 - Zorraquino - Enero 2019

• Que el usuario no se pierda, informar de los próximos pasos, en qué punto del
proceso se encuentra…

• No dar nada por sentado, explicar y mostrar toda la información: Rule of Thumb.

210
Tendencia 7. UX writing

“Write like you’re writing for a billboard. Your users


are driving 80 mph and can only see a few words
of copy without crashing.”

Steve Krug, autor de Don’t make me think.


UX Trends 2019 - Zorraquino - Enero 2019

211
UX Trends 2019 - Zorraquino - Enero 2019

Cuando las explicaciones sobran


Okcupid proporciona desplegables, sin decirle al usuario qué hacer, porque no hace falta.

212
Cuando las explicaciones ayudan
Instagram tiene ejemplos de instrucción precisa, que aparecen exactamente cuando es necesario.
UX Trends 2019 - Zorraquino - Enero 2019

Airbnb
Guía al usuario proponiendo opciones de texto de presentación.

214
UX Trends 2019 - Zorraquino - Enero 2019

Google
Pruebas de textos que mejoran el engagement.

215
UX Trends 2019 - Zorraquino - Enero 2019

Rule of Thumb
Explica todo lo que tiene que ser explicado. La web de ModCloth lo hace.

216
Tendencia 7. UX writing

Concisión y capacidad conversacional


• Scanning is the new reading.

• Textos cortos y amables.

• El empeño del UX writer es decir lo mismo, igual de entendible en menos palabras.

• Preguntas sencillas, opciones claras de respuesta.

• Conversacional, humanizar la experiencia con el usuario.

• Ser empáticos, guiños inteligentes en momentos de fricción.


UX Trends 2019 - Zorraquino - Enero 2019

• Tono casual para aligerar la experiencia negativa de las pantallas de error.

217
UX Trends 2019 - Zorraquino - Enero 2019

Medium habla directamente al usuario


Ese estilo y tono de voz conecta con el perfil de usuarios de la plataforma.

218
Error 404
Ante una mala experiencia, generar empatía es importante.
Error 404
Página de error 404 en la web de Social Mood.
NPR National Public Radio de US
Error 404 en el que conectan con sentido del humor con el usuario con la intención de no perderle.
Microcopy Book
Convierte todos los mensajes de tu producto digital en una valiosa conversación.
Tendencia 7. UX writing

“Be nice, even when writing instructions.



Every word matters.”

Kinneret Yifrah, world expert in UX Writing and Microcopy.


UX Trends 2019 - Zorraquino - Enero 2019

223
Tendencia 7. UX writing

Zorraquino sugiere
• Cada interacción con el usuario se convierte en una oportunidad de conversión.

• Una buena UX Writing elimina la fricción y conecta con el usuario a través del texto,
que elabora con mentalidad de diseñador.

• La coherencia en el tono de una marca genera confianza y evita confusión, hace que
la experiencia de usuario sea más fluida.

• Son los primeros años de una disciplina que va creciendo a base de pruebas e
investigación.
UX Trends 2019 - Zorraquino - Enero 2019

• Seguirá su desarrollo para facilitar al usuario la mejor experiencia respecto a los


productos digitales y las marcas.

224
Tendencia 7. UX writing

Referencias
UX Writing: What Is It and Why Is It So Important
https://medium.com/nyc-design/ux-writing-what-is-it-and-why-is-it-so-important-21b314e005a1

This Is UX Writing At Its Very Best


https://uxplanet.org/this-is-ux-writing-at-its-very-best-2806f3f386e0

The 5 Cs of UX Writing
https://uxplanet.org/the-5-cs-of-ux-writing-c66e5404f03c

How to Build a Better Product With UX Writing


https://uxdesign.cc/how-to-build-a-better-product-with-ux-writing-926d78209ce8
UX Trends 2019 - Zorraquino - Enero 2019

UX Writing: How to do it like Google with this powerful checklist


https://uxplanet.org/ux-writing-how-to-do-it-like-google-with-this-powerful-checklist-e263cc37f5f1

225
Tendencia 7. UX writing

Referencias
No Good, Very Bad UX Writing Mistakes
https://realbigwords.com/bad-ux-writing-mistakes

Microcopy: The Complete Guide


https://www.microcopybook.com

Mailchimp Voice and Tone


https://styleguide.mailchimp.com/voice-and-tone

Salesforce Voice & Tone Guidelines


https://www.lightningdesignsystem.com/assets/downloads/salesforce-voice-and-tone.pdf
UX Trends 2019 - Zorraquino - Enero 2019

¿Por qué es importante el UX writing? (Con ejemplos reales)


No Good, Very Bad UX Writing Mistakes https://realbigwords.com/bad-ux-writing-mistakes

226
Tendencia 8

UX search
El buscador como protagonista.
UX Trends 2019 - Zorraquino - Enero 2019

227
Tendencia 8. UX search

UX search
Siguiendo la línea del diseño invisible, van ganando protagonismo los buscadores en
las webs y apps. Bien pensados, permiten presentar la información al usuario de forma
sencilla y limpia, proporcionándole la opción de acceder a los contenidos fácil y
rápidamente. Su importancia crece de modo paralelo a la enorme cantidad de
información que ofrecen hoy en día las webs.

De hecho, se han convertido, en la práctica, en un atajo para llegar a la información


requerida. Son más inteligentes y destacan más en la interfaz, sin interrumpir. El buen
diseño de la barra de búsqueda en una web proporciona una navegación más
placentera, se anticipa a lo que el usuario necesita y genera empatía con él.
UX Trends 2019 - Zorraquino - Enero 2019

No es de extrañar, por eso, que las principales marcas de ecommerce estén


convirtiendo el buscador en un elemento clave en la navegación, central también
para la conversión.

228
Tendencia 8. UX search

En síntesis
• Buscadores de diseño invisible: complejo diseño back-end vs. menos diseño de
interfaz.

• El usuario quiere tener toda la información a mano, con un diseño limpio.

• Más importancia y presencia en cuanto a tamaño.

• Barra de búsqueda siempre disponible y fácil de encontrar.

• El buscador como atajo: en webs grandes se convierte en una pasarela directa para
llegar al objetivo.
UX Trends 2019 - Zorraquino - Enero 2019

• Orientados a conseguir una búsqueda y navegación más placentera.

• Proporciona orientación a los usuarios frustrados.

• Empatía y anticipación a través de la funcionalidad y tecnología.

229
Buscar en la vida real
Así se vivirían algunos errores de la experiencia de compra online en la vida real.
Airbnb
Tiene la posibilidad de aplicar filtros desde la misma barra de búsquedas.
The Verge
Posición central para facilitar las búsquedas en webs con gran cantidad de información.
Digital Trends
Alta presencia, tanto en posición como en tamaño, para superar la complejidad.
Buscadores destacados
Ubicación preferente y central, pero integrada con el diseño de la web.
Tendencia 8. UX search

Empathy search
• Empresa diferenciada por crear Digital Empathy: búsquedas construidas a partir
de la empatía.

• Basada en tres principios: expresión, anticipación y transparencia.

• Pretende empatizar a través de las búsquedas para optimizar.

• Complementa la barra de buscadores con filtros para guiar al usuario hasta el


producto deseado.
UX Trends 2019 - Zorraquino - Enero 2019

• De modo fácil, sin hacerle perder el tiempo con el menú y tratando de proporcionar
una experiencia más satisfactoria.

• El buscador ofrece también inspiración al usuario, anticipando propuestas gracias al


aprendizaje automático de sus preferencias.

235
Empathy Broker
Empresa responsable del diseño de buscadores de las webs del grupo Inditex.
Empathy Broker
Cómo empatizar con el usuario a través del buscador en una web
y conseguir la mayor optimización de un producto digital.
Empathy Broker
Conocimiento del usuario para poder personalizar y anticiparse en sus búsquedas.
Según los usuarios:

3º 61% 63%
El buscador es el De los usuarios
 Son menos
tercer aspecto más utiliza el buscador propensos a hacer
importante de un siempre o la mayoría una compra si el
sitio de comercio del tiempo cuando buscador del sitio no
electrónico. compra. es bueno.
UX Trends 2019 - Zorraquino - Enero 2019

Empathy Broker
Según los usuarios, el buscador es clave en la experiencia de compra.

239
Empathy Broker para Pull&Bear
Barra de búsqueda combinada con los filtros como elementos de navegación.
Tendencia 8. UX search

Zara
• Utiliza los datos del usuario para ofrecer una experiencia que le sitúa en el centro.

• Barra de búsquedas como herramienta de venta poderosa.

• La barra de búsqueda es una de las fuentes más ricas para la detección de tendencias.

• Análisis de datos para ver nuevos colores y tendencias de productos y poder


reaccionar rápido, ayudando así a los equipos de diseño.

• Adaptabilidad al usuario. La búsqueda ayuda a los equipos de productos y contenido


UX Trends 2019 - Zorraquino - Enero 2019

a poder cambiar el nombre de sus productos utilizando el idioma del cliente para
hacerlos más “accesibles".

241
Zara
Protagonismo del buscador en la web de la empresa.
Zara
Buscador en la web: anticipa los productos buscados.
Tendencia 8. UX search

Zorraquino sugiere
• El buscador de una web o app ha pasado a ser un elemento fundamental de la
experiencia de usuario.

• Gran importancia por la información que proporciona sobre el usuario. Es una


fuente de escucha y aprendizaje, es un lugar principal de conexión entre una marca y
sus clientes.

• Los usuarios expresan ahí sus necesidades a través de palabras clave, esperando una
UX fácil, rápida y sin problemas.
UX Trends 2019 - Zorraquino - Enero 2019

• El éxito de un buscador no se mide solo en conversión, hay que entender el contexto


de cada búsqueda ya sea informativo, de inspiración, compra…

244
Tendencia 8. UX search

Referencias
Designing the invisible
https://uxdesign.cc/designing-the-invisible-a92d2dd9a5e9

Search Is Redefining The Ecommerce Experience


https://medium.com/empathybroker/search-is-redefining-the-ecommerce-experience-93b7102b2eba

Zara’s Intelligent Use of Search Dada Is Transforming It’s online Store and
Putting the Customer back at the Center
https://medium.com/empathybroker/zaras-intelligent-use-of-search-data-is-transforming-it-s-online-store-and-
putting-the-customer-67961b74e1ab
UX Trends 2019 - Zorraquino - Enero 2019

UX Best Practices for Using Search on Your Website


https://designmodo.com/ux-search-website

Google Analytics In Real Life - Site Search


https://www.youtube.com/watch?v=cbtf1oyNg-8

245
Tendencia 9

Experiencias físicas
De la UX a la CX.
UX Trends 2019 - Zorraquino - Enero 2019

246
Tendencia 9. Experiencias físicas

UX física
La UX está evolucionando hacia la CX: pasamos de la experiencia de usuario a la
experiencia de cliente, con un uso cada vez más frecuente de los procesos de
diseño UX para crear la CX. No solo por su utilidad de cara a los procesos de diseño
sino porque consigue clientes cada vez más satisfechos que, además, celebran la
coherencia entre UX y CX. La experiencia de usuario, cada vez más, transciende las
pantallas o los dispositivos y se traslada al mundo físico; las marcas quieren satisfacer
las necesidades de sus clientes, desde el punto de vista de la usabilidad, en todos los
momentos de la relación que mantienen con ellos: en la web, en las tiendas, por
teléfono, en las calles… Estar disponibles para facilitarles la vida siempre que ellos
tengan una necesidad.
UX Trends 2019 - Zorraquino - Enero 2019

La UX y la CX, cada vez más, trabajan juntas para generar fidelización hacia la marca
y satisfacción por parte del cliente, utilizando conjuntamente todos los recursos de la
realidad física y del mundo digital.

247
Tendencia 9. Experiencias físicas

En síntesis
• UX está evolucionando hacia CX.

• Uso del diseño UX para diseñar experiencias fuera de las pantallas: productos,
tiendas, ciudades, IoT…

• Experiencia global del cliente, omnicanalidad o infinity channel.

• Uniformidad y coherencia de una marca en todas sus interacciones ya sean físicas o


digitales.
UX Trends 2019 - Zorraquino - Enero 2019

• Personalización: los productos digitales aprenden del usuario y reconocen patrones


para crear una experiencia más refinada y exclusiva: desde coches, gafas conectadas,
ropa, termostatos, cerraduras…

248
Experiencia ominicanal de Ikea
Estar siempre disponible para el usuario en cualquier situación.

IN STORE
FOOD
MARKET

LIVE
RESTAURANT
PRODUCT A place to relax and
DEMOS
think, browse a catalogue
and explore new
bedroom options CRAYFISH
PARTIES
WAREHOUSE
A simple layout that is
coded for ease of navigation
and also displays SHOWROOM
larger items
The main area that inspires and
delights with ideas for the home
The main showroom space brings the web KIDS PLAY AREA
and the catalogue to life by displaying room Supervised area that allow
ideas and accessories - a constantly refreshed kids to have fun and
space that also demonstrates product features parents to shop the
and benefits store hassle free

MARKETPLACE
BLUE &
Displays products by YELLOW
type - ideal for those in BAGS
explore mode who
want to compare or
contrast products
ROOM SETS
Full size displays across
the key areas of the home.

KITCHEN
PLANNER
An essential tool that COOKBOOK

allows dreamers and


explorers to create
their ideal space

WEBSITE CATALOGUE
Comprehensive online catalogue A free printed piece that allows
and interior planning tool all mindstates to explore IKEA
IKEA LIVE A global resource that provides tips and The catalogue is now published each summer
inspiration as well as the opportunity to in 55 different editions, in 27 languages for
browse and purchase from the site 35 countries. The catalogue is regarded as
the main marketing tool and contains over

E
12,000 products

OR
DELIVERY
DECORATED An essential tool that has
MONORAIL
opened up the brand to
ON

ST
more consumers
FACEBOOK LONGEST
CAMPAIGN BOOKSHELF
NYC
POP UP
Posted IKEA interiors that

OF
users were encouraged to
LIN

SIMS 2
tag with their names HOMESTUFF
to win the products GAME
in the shot

T
E

AR APP

U
DESKTOP

O
APP

LOCATING EXPLORING DREAMING


Tendencia 9. Experiencias físicas

De consumidores a usuarios
• Las marcas que mejores experiencias diseñan tratan a sus clientes como usuarios
no como consumidores.

• Hacen la vida más fácil y construyen relaciones de confianza y lealtad con ellos.

• Las tiendas retail utilizan el diseño UX para diseñar sus espacios.

• Crean sus experiencias de marca como lo haría un diseñador, teniendo en cuenta


cada punto de contacto, antes, durante y después de la compra.
UX Trends 2019 - Zorraquino - Enero 2019

• Ikea, Muji, AllBirds Outdoor Voice… entre las marcas que apuestan por este tipo de
enfoques.

250
Tendencia 9. Experiencias físicas

Muji
• Pop up en el centro de Londres para presentar la colección primavera-verano.

• Muji Life apartment, diseñado como una casa, en cada habitación ofrecían una
experiencia diferente para conocer los nuevos productos.

• Desde probar comida típica japonesa en la cocina del apartamento a participar en


talleres de belleza japonesa, de almacenamiento y orden de armarios e incluso de
cómo hacer fotos para Instagram.

• Actividades acordes con la filosofía de la marca sobre el minimalismo y el orden en


UX Trends 2019 - Zorraquino - Enero 2019

la casa, la sencillez y diseños naturales frente a la fiebre de la sociedad de consumo


para acumular cosas materiales.

251
Muji Life Apartment en Covent Garden Londres
Espacio creado por Muji para ofrecer algo más que productos.
Muji Life Apartment en Covent Garden Londres
Espacio creado por Muji para ofrecer algo más que productos.
Tendencia 9. Experiencias físicas

SNKRS de Nike
• App de modelos exclusivos y ediciones limitadas de zapatillas Nike.

• La app te avisa de lanzamientos en exclusiva, como las de Justin Timberlake en la


Superbowl que se agotaron en 5 min.

• En el concierto de Kendrick Lamar en Los Angeles los asistentes podían comprar las
zapatillas que llevaba el cantante desde la app.

• Uso de la geolocalización, llamada Stash, para lanzamientos o juegos.


UX Trends 2019 - Zorraquino - Enero 2019

• Acción de AR para ver las zapatillas en 3D, una especie de Pokemon Go que se viralizó
entre los fanáticos de Nike que buscaban las zapatillas escondidas en una ubicación
especial para acudir a un evento.

• Recompensa a los participantes con la pre-venta de nuevos modelos de la marca.

254
SNKRS de Nike
Exclusividad, geolocalización y entretenimiento con AR.
SNKRS de Nike
Zapatillas de venta exclusiva durante el concierto de Kendrick Lamar.
SNKRS de Nike
Visión en AR de los modelos exclusivos.
SNKRS de Nike
Geolocalización SNKRS Stash para conseguir entradas a eventos exclusivos.
Tendencia 9. Experiencias físicas

Internet of clothing
• Tecnología y datos para ganar en calidad de vida.

• Proporcionan información de forma automática, pueden ayudar a mejorar la salud, la


seguridad, menor pérdida tiempo, exclusividad.

• Calcetines que analizan tu pisada y te ayudan a correr mejor. Gafas para deportistas
que se comunican por audio e imagen como un entrenador personal.

• Chaquetas que te dan acceso vip a galerías, restaurantes, discos… Google+Levis o


Rochenbeau.
UX Trends 2019 - Zorraquino - Enero 2019

• Calcetines Netflix que paran cuando te has dormido para que no te pierdas ningún
capítulo.

259
Solos Wearables
Gafas para ciclistas que analizan los datos del entrenamiento a tiempo real.
Sensoria
Sensoria actúa como entrenador personal para conseguir el entrenamiento perfecto.
Bright Bmbr
Experiencias VIP con esta chaqueta conectada.
Calcetines Netflix
Detectan cuando el usuario se ha dormido para apagar la serie y que no se pierda ni un capítulo.
Tendencia 9. Experiencias físicas

Starling Crossing
• Starling: STigmergic Adaptive Responsive LearnING Crossing.

• Un paso de peatones diseñado según la experiencia de usuario.

• Con ayuda de la tecnología: cámaras e IA.

• Aparece dónde y cuándo es necesario.

• Identifica a los peatones en tiempo real, se adapta al tiempo, la luz, el tráfico, los
movimientos.

• Calcula trayectorias y anticipa la ubicación del paso de cebra.


UX Trends 2019 - Zorraquino - Enero 2019

• Principios de diseño para mejorar la percepción de las personas sin distraerlas y


resaltar la seguridad entre personas y automóviles.

• Tecnología y diseño para un mejor servicio, todavía en fase experimental en un barrio


de Londres.

264
Starling Crossing
Paso de cebra diseñado para aparecer cuando hace falta.
Tendencia 9. Experiencias físicas

Zorraquino sugiere
• La UX del mundo online genera tanta conexión con los usuarios que cada vez se va
adaptando más al mundo físico.

• El paso más importante: considerar a los clientes usuarios más que consumidores y
facilitarles la experiencia.

• Un acercamiento entre UX y CX que, además, se ve enriquecido por la tecnología,


que complementa también la experiencia física.

• El reto: simplificar y facilitar la experiencia en todos los ámbitos de modo integrado:


UX Trends 2019 - Zorraquino - Enero 2019

login, carritos, tienda física, hogar, cuidad, apps... Para crear entorno integrado entre
dispositivos.

266
Tendencia 9. Experiencias físicas

Referencias
Diferencias entre Customer Experience y User Experience
http://www.danielmarote.com/diferencias-entre-customer-experience-y-user-experience

The Most Successful Brands Focus on Users—Not Buyers


https://hbr.org/2018/02/the-most-successful-brands-focus-on-users-not-buyers

From Muji to Ikea, Why the Best Retailers Think Like UX Designers
https://www.fastcompany.com/90177301/from-muji-to-ikea-why-the-best-retailers-think-like-ux-designers

5 Keys to Designing User Experience for IoT Products


https://www.iotforall.com/designing-user-experience-iot-products

Internet of Clothing. Cuando la ropa también quiere ser Smart


UX Trends 2019 - Zorraquino - Enero 2019

https://hablemosdeempresas.com/grandes-empresas/the-internet-of-clothing-cuando-la-ropa-tambien-quiere-
ser-smart

Netflix y los calcetines que pausan el vídeo cuando te duermes


https://clipset.20minutos.es/netflix-calcetines-conectados/

267
Tendencia 9. Experiencias físicas

Referencias
Inside MUJI's pop-up apartment in London's Covent Garden
https://www.housebeautiful.com/uk/lifestyle/news/a3347/muji-life-pop-up-apartment/

How to Create Effective Customer Journey Maps


https://blog.percolate.com/2016/12/customer-journey-maps/#

Nike’s SNKRS App Is Making Sneaker Releases Fun (and Fair) Again
https://www.highsnobiety.com/p/nike-snkrs-ron-farris-interview/

Nike uses AR to tease its biggest Jordan launch of the year


https://www.engadget.com/2018/11/28/nike-snkrs-app-ar-air-jordan-11-concord/

SOLOS Smart Glasses New Generation


UX Trends 2019 - Zorraquino - Enero 2019

https://www.youtube.com/watch?v=PXVwk86rpLQ

Starling Crossing Responsive Road Infraestucture


http://umbrellium.co.uk/initiatives/starling-crossing/

268
Tendencia 10

Tendencias visuales
Qué veremos en 2019.
UX Trends 2019 - Zorraquino - Enero 2019

269
Tendencia 10. Tendencias visuales

Tendencias visuales 2019


Aunque no es innovación como tal, porque las tendencias van y vienen, hay varios
elementos o recursos de diseño que están más de moda que otros y se verán
mucho en las actualizaciones y cambios de imagen de algunas marcas o en la
aparición de otras nuevas.

Tendencias como el aumento de interfaces oscuras, la integración de elementos en


tres dimensiones o la tendente desaparición de los botones en los diseños para
móviles nos acompañarán durante el nuevo ejercicio.
UX Trends 2019 - Zorraquino - Enero 2019

O, también, la consolidación de un diseño limpio, plano y minimalista en la estela


de Apple. Un diseño intuitivo, aparentemente sencillo y de carga rápida, que combina
su minimalismo con diferentes recursos empleados de forma sutil, como
animaciones, colorido e ilustraciones (de tipo icono).

270
Tendencia 10. Tendencias visuales

En síntesis
• Recursos de diseño que más veremos durante el 2019.

• Pequeñas animaciones que facilitan el uso de webs y apps móviles.

• Interfaces oscuras cada vez más comunes, adaptadas al uso prioritario de los
dispositivos en ambientes oscuros o nocturnos.

• Diseño simple acompaña a una interacción por voz a través del móvil.

• Animaciones más complejas y sofisticadas, con elementos en tres dimensiones,


UX Trends 2019 - Zorraquino - Enero 2019

collages y superposiciones.

• En el otro lado de la moneda, continuaremos viendo diseño minimal, plano o flat de


muchas marcas que siguen lo que realiza Apple.

271
Tendencia 10. Tendencias visuales

Vuelve el negro
• La alternativa oscura a las interfaces de luz es cada día más común.

• El blanco es radiante y el negro absorbe la luz. Las letras blancas contaminan con la
luz. Las letras oscuras absorben la luz que las rodea.

• Las IU oscuras, inspiradas en Star Wars, se convirtieron en el paradigma del género de


ciencia ficción y replanteó la forma de interacción con la tecnología.

• La interfaz de usuario oscura crea una experiencia sin distracciones. Una


experiencia parecida a la de estar en el teatro o en el cine.
UX Trends 2019 - Zorraquino - Enero 2019

• La interfaz oscura también tiene que ver con el contexto en el que se utilizan, suele ser
por la noche, es perfecta para adaptarse al entorno.

272
Diferencias de lectura
Efectos del blanco sobre negro. Absorción o contaminación de luz.

Too long. Didn’t read. Too long. Didn’t read.


Apps que combinan números y textos
El contraste con el fondo negro proporciona una mejor experiencia de usuario.
El lado oscuro
Nuevo macOS Mojave dispone de función aspecto oscuro.
El lado oscuro
Muy utilizada por técnicos que trabajan con muchos datos ya la organización y lectura es mejor.
Apple
Para interfaces promocionales el negro convierte al producto en un elemento de lujo.
Netflix
El uso de Netflix suele ser por la noche, la interfaz oscura se adapta al entorno.
Spotify
Reserva el diseño blanco para resaltar las principales funcionalidades

como la búsqueda de canciones en la app oscura.
Tendencia 10. Tendencias visuales

Superposiciones, estructuras y 3D
• El efecto de superposición se basa en colores, texto o imagen. Pueden crear una
sensación de espacio y, por lo tanto, una interfaz más estructurada.

• Material design vs flat design. Estos elementos proporcionan materialidad y


volúmenes a los diseños, acercándolos más a la realidad y a la naturaleza.

• Estas tendencias buscan una sofisticación de la sencillez. Ofrecer algo más al


diseño plano.

• Incluir elementos 3D son un reto en cuanto a producción y tiempo de carga de la


UX Trends 2019 - Zorraquino - Enero 2019

página. Una vez superado esto proporcionan un espacio más atractivo donde
interactuar.

280
Material Design
El diseño plano (Flat design) se convertirá en material (Material design).
Composiciones volumétricas
Superposiciones que crean una sensación de 3 dimensiones.
3D
Volúmenes en 3D que traspasan la pantalla para interactuar en un mismo espacio que el usuario.
3D
Elementos 3D crean un espacio más atractivo donde presentar un producto.
3D
3 dimensiones también en tipografías.
3D
Guitarra y pared en 3D consiguen un efecto más visual del producto.
3D
La transición en 3D proporciona materialidad y consistencia al producto.
Tendencia 10. Tendencias visuales

Animaciones
• Llevamos viendo animaciones desde hace tiempo, pero cada año son
más complejas.

• Una animación es capaz de contar una historia.

• Captar la atención.

• Los movimientos buscan sorprender y agradar al usuario para mantener su atención


el mayor tiempo posible.
UX Trends 2019 - Zorraquino - Enero 2019

• Puede también anticipar al usuario acciones que debe realizar para continuar hacia
su objetivo.

• Ha pasado también a ser algo característico de la marca. Cada vez hay más logos
animados.

288
Logotipos animados
Marcas animadas, logotipos en movimiento para conectar con el usuario.
Logotipos animados
Marcas animadas, logotipos en movimiento para conectar con el usuario.
Arche68
Hay webs animadas que proponen una experiencia sensorial.
Bloques y superposiciones
Combinado con una animación que añade el atributo de ligereza a la marca.
Efecto líquido
Transiciones animadas cada vez más complejas y abstractas.
Kommi Graphics
Agencia de diseño griega que utiliza las animaciones con efecto líquido.
Agencia francesa Rue 5
Tiene una web con una animación adhoc para cada sección y también para presentar su logotipo.
Tendencia 10. Tendencias visuales

Y continúan…
• En 2019 continuarán varios diseños que sin ser novedosos van actualizando muchas
marcas y mejorando de esta forma su relación con los usuarios.

• El uso de colores vivos para llamar la atención, crear una personalidad joven y
dinámica.

• Degradados que aportan profundidad y movimiento en un plano estático y


bidimensional.

• Juegos tipográficos como único elemento de diseño.


UX Trends 2019 - Zorraquino - Enero 2019

• Minimal - Flat Design que lidera Apple y que muchas marcas buscan. Aunque
parezca que contradice lo anterior, poseen desde muchos elementos contados pero
utilizados con limpieza, elegancia y sutileza.

296
Colores vivos
Animación y colores vivos para llamar la atención de los usuarios.
Colores vivos, degradados, 3D
Animación y colores vivos para llamar la atención de los usuarios.
Degradados
Degradados en collages y superposiciones para dar volumen a las formas.
Estudio Achos!
El eclecticismo de Achos! convierte su web en un catálogo de diseño.
Degradados
Degradados para destacar los elementos principales de una interfaz.
Degradados
Degradados con fondos oscuros para mostrar de manera más clara cierta información.
Brutalismo
Tendencia que seguirá presente en 2019 en contraposición al minimalismo.
Brutalismo
Tendencia que seguirá presente en 2019 en contraposición al minimalismo.
Brutalismo
Tendencia que seguirá presente en 2019 en contraposición al minimalismo.
Minimalismo
Diseño plano, minimal, superposiciones y color block.
Minimalismo
Diseño mínimo, espacio blanco y tipografía sencilla.
Minimalismo
Juegos simples animados y tipográficos con colores básicos y lisos.
Tendencia 10. Tendencias visuales

Zorraquino sugiere
• Vemos una gran variedad de tendencias o estilos visuales que se adaptan a los
diferentes productos y personalidades.

• Las animaciones son cada vez más complejas pero más ligeras, lo que permite
seguir sorprendiendo al usuario sin generar fricciones con el tiempo de carga.

• El uso de unos u otros recursos dependerá de la legibilidad de la información.


UX Trends 2019 - Zorraquino - Enero 2019

• Tanto claridad para poder leer como para reconocer e interpretar conceptos de un
solo vistazo.

309
Tendencia 10. Tendencias visuales

Referencias
In the dead of night
https://uxdesign.cc/in-the-dead-of-night-a4c7fa98aec4

The Power of the Dark Side: Dar User Interfaces


https://www.shopify.com/partners/blog/dark-ui

UI Trends 2019: The Top 7 Trends Users Will Love


https://uxstudioteam.com/ux-blog/ui-trends-2019

2019 UI and UX Design Trends


https://uxplanet.org/2019-ui-and-ux-design-trends-92dfa8323225
UX Trends 2019 - Zorraquino - Enero 2019

Top Graphic Design Trends 2019: Fresh Hot & Bold


https://graphicmama.com/blog/graphic-design-trends-2019

User Experience (UX) Design Trends 2019


https://merehead.com/blog/ux-trends-2019/

310
Tendencia 10. Tendencias visuales

Referencias
Tendencias en diseño web 2019: lo que viene para quedarse
https://www.40defiebre.com/tendencias-diseno-web

The 8 Biggest Graphic Design Trends That Will Dominate 2019


https://venngage.com/blog/graphic-design-trends

Future UI Design Without Buttons


https://medium.com/@michyoung/future-ui-design-without-buttons-a49bfb8252e9

10 innovative web design trends for 2019


https://99designs.es/blog/trends/web-design-trends-2019/#8
UX Trends 2019 - Zorraquino - Enero 2019

20 web design trends for 2019


https://webflow.com/blog/20-web-design-trends-for-2019

Brutalism: BrutAl wEbsIteS for mOdern dAy webMAsTeRS


https://www.awwwards.com/brutalism-brutalist-websites.html

311
ZORRAQUINO

Superarse, avanzar y pensar en el futuro.

El diseño estratégico impulsa el crecimiento de negocio. Optimizar la experiencia de


cliente a través de la ideación, creación e implantación de soluciones eficientes e
innovadoras resulta esencial para mejorar el rendimiento y aumentar la competitividad
de nuestras empresas.

Conócenos en:

www.zorraquino.com
UX Trends 2019 - Zorraquino - Enero 2019

312
Zorraquino
Imagen de nuestras oficinas
ZORRAQUINO

Bilbao Madrid

Marqués del Puerto 6, 1º
 Gustavo Fernández Balbuena 11, 4º



48009 BILBAO 28002 MADRID

Tel. (+34) 94 415 73 79
 Tel. (+34) 91 179 34 82

www.zorraquino.com Twitter Linkedin Instagram Newsletter

© COPYRIGHT ZORRAQUINO COMUNICACIÓN, S.L.U. TODOS LOS DERECHOS RESERVADOS. ESTE DOCUMENTO ES PROPIEDAD DE ZORRAQUINO COMUNICACIÓN, S.L.U. Y SU CONTENIDO ES CONFIDENCIAL.

ESTE DOCUMENTO NO PUEDE SER REPRODUCIDO, EN SU TOTALIDAD O PARCIALMENTE, NI MOSTRADO A OTROS, NI UTILIZADO PARA OTROS PROPÓSITOS QUE LOS QUE SE HAN ORIGINADO EN SU ENTREGA,

SIN EL PREVIO CONSENTIMIENTO POR ESCRITO DE ZORRAQUINO COMUNICACIÓN, S.L.U.