Informe Tendencias Experiencia de Usuario 2019 ZORRAQUINO

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
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
• 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.
4
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.
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
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
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

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.
• 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.
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).
• 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.
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
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
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
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.
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.

• 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.
“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.

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.
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.
• 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.”
Don Norman, one of the forefathers of usability and UX.
33
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.

• 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
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
35
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
36
Tendencia 2
Procesos autómatas
La generalización de 
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
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
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

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

cuestiones más estratégicas.
39
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.
• 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.
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.
“We’re moving 
from a mobile-first to 
an AI-first world.”
Sundar Pichai, CEO de Google.
46
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:

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.
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
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.
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”.

• 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.
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
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.
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.

• 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.
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
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.
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.
• 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
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

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
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
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 
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
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
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),

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.
“How you climb a mountain is more important

than reaching the top.”
Yvon Chouinard, CEO de Patagonia.

71
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.
• 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
Pivotaje
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
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
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.
• 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.

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!
• Los motores de trabajo de este Atlas incluyen motivaciones, necesidades,

ansiedades, expectativas, actitudes y modelos mentales.
77
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.
• 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
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.

• 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.
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
Fitbit
Técnica para evaluar los cambios realizados.
84
Pruebas de usabilidad
Evaluación de producto con usuarios reales.
“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.

86
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.

Investigación igual a solidez.
• Aporta información valiosa sobre usuarios, pistas sobre dónde encontrar al público
acertado, etc.
87
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
Best Jobs in America CNN Money

https://money.cnn.com/gallery/pf/2017/01/05/best-jobs-2017/39.html
88
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-
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á 
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.
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
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.
• 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?

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
Cada vez más dispositivos de interacción por voz.
Forma ya parte de nuestra rutina diaria.
¿Dónde tenemos los altavoces activados por voz?
Una experiencia de usuario más humana.
Un nuevo espacio para las marcas.
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,
entretenida y clara.
100
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.
• 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.
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.
• 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.
“Dentro de poco, los asistentes de voz serán más

importantes que los smartphones.”
Adam Cheyer, cofundador de Siri.

105
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.

• 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.
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
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.
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.
• 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.
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.
• 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.
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

de búsquedas… y seguirá cambiando en los próximos años.
125
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

https://www.theverge.com/2018/10/8/17944022/new-amazon-echo-show-review-2018-alexa-speaker-video-
camera
126
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

https://retina.elpais.com/retina/2017/11/27/tendencias/1511800893_865293.html
127
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
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 
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.
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
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
encubiertos, es diseño back end.

• Cada vez más habitual en nuestras vidas: Alexa, Nest, Fitbit, Google Home…
131
“Good design is obvious. 

Great design is invisible.”
Joe Sparano, diseñador gráfico.
132
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.

• 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
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

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.
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.
• 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.
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.
• 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.
“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.

142
Domino’s Pizza
Sin tocar un botón pides tu pizza favorita, en 10 segundos se hace el pedido solo.
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.

• 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.
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.

• 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.
“The best interface

is no interface.”
Golden Krishna, one of the world’s foremost thinkers of UX desing.
152
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,

cambiarlas… más seguridad a través de la fisionomía única de cada ser humano.
153
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
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
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

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
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
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.
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.

• 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.
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.

• 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
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
Skype
No ofrece un ‘no’ como opción.
165
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.
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
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.
“Lo honesto no es mandarte un recordatorio,  

lo honesto sería no pedirte la tarjeta.”
Inma Bermejo, Lead Designer de Weblogs S.L.

171
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).
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
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.
11. Trick Questions: “le enviaremos publicidad a no ser que deseleccione esta casilla”.
173
Sky
A través de un lenguaje confuso y enrevesado confunde al usuario.
174
“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”.

175
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.

• 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
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
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.
• 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.
Linkedin
Como uno de los pasos predeterminados a seguir, acceden 
a tus contactos de mail sin dejar muy visible la opción opuesta.
181
Linkedin
Al pulsar “saltar este paso” insisten marcando en azul la opción opuesta
a la que el usuario quería realizar.
182
Linkedin
Cambio realizado tras las denuncias, sigue sin quedar muy claro paro va mejorando…
183
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”.

• 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.
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.
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
É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
amparen a los consumidores.
• Dialéctica entre beneficios de negocio mayores con ofrecer una experiencia de

usuario transparente y que beneficie al usuario.
190
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

responsabilidad de carácter social que están tomando las empresas por exigencia
de sus clientes.
191
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
Dark Patterns in UX: How Designers Should Be Responsible for their Actions
https://uxdesign.cc/dark-patterns-in-ux-design-7009a83b233c
192
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-
manage-screen-time/
Add psychology to your web design

https://shop.ui-patterns.com/product/persuasive-patterns-card-deck/
193
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
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.
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.
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
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.

• Una buena UX Writing permite al usuario un uso fluido de programas y apps, de forma
intuitiva y sin esfuerzo.
197
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?
Comprender cómo se comporta el usuario

El mejor copy va de la mano de la investigación y los tests de usuario.
199
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).

• 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
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
Dónde se aplica
Microcopy en las diferentes interacciones con el usuario.
202
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.

• 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
“Oh, don’t use big words. 

They mean so little.”
Oscar Wilde, writer, poet and playwright.
204
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.

• 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.
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!”.
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.
• 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
“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.

211
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.
Airbnb
Guía al usuario proponiendo opciones de texto de presentación.
214
Google
Pruebas de textos que mejoran el engagement.
215
Rule of Thumb
Explica todo lo que tiene que ser explicado. La web de ModCloth lo hace.
216
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.

• Tono casual para aligerar la experiencia negativa de las pantallas de error.
217
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.
“Be nice, even when writing instructions. 

Every word matters.”
Kinneret Yifrah, world expert in UX Writing and Microcopy.

223
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.
• Seguirá su desarrollo para facilitar al usuario la mejor experiencia respecto a los

productos digitales y las marcas.
224
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 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
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
¿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.
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.
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
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.
• 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.
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.
• 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.
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.
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

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.
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.
• 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
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 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.
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.
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
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.
• 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

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.
• Ikea, Muji, AllBirds Outdoor Voice… entre las marcas que apuestan por este tipo de
enfoques.
250
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

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.
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.

• 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.
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.
• 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.
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.

• 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.
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:

login, carritos, tienda física, hogar, cuidad, apps... Para crear entorno integrado entre
dispositivos.
266
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

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
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

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.
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.
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
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,

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
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.
• 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.
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

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.
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.
• 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.
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.

• 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
Brutalismo
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.
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.

• Tanto claridad para poder leer como para reconocer e interpretar conceptos de un
solo vistazo.
309
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
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
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
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
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.

Informe Tendencias Experiencia de Usuario 2019 ZORRAQUINO

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Informe Tendencias Experiencia de Usuario 2019 ZORRAQUINO

Uploaded by

Copyright:

Available Formats

ZORRAQUINO

de usuario para 2019

con puntos de vista renovados.

• Tendencia 8. UX search 227

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

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

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

Cradled Hold and Touch Two Hands - Landscape

49% 36% 15%

One Handed Cradled Two Handed

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

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

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

Los pulgares en el centro del diseño

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

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

Zonas menos precisas

Zonas más precisas

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

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

seleccionados en menos tiempo.

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

Zonas menos precisas

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

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

“Mobile first, and put the most used elements

Linh Giang Nguyen, Medium.

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

• 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

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

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

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

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

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

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

4 UX Trends That Should Dominate in 2019

La Guía Fundamental Para La Usabilidad Mobile

Never Just Design Pretty Little Apps

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

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

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

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

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

Airbnb – Pintando con código

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

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

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

personalizar perfiles de usuarios, generar informes comprensibles sobre datos

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

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

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

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

• Conocido como “augmented writing”.

• 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

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

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

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

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

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

Después de The Grid

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

• En su primer año crearon 150.000 webs.

Fases del DCU: 

1 Visibilidad del estado  6 Minimizar la carga de 

2 Similitud entre el sistema  7 Flexibilidad y eficiencia 

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

4 Consistencia y  9 Ayuda al reconocimiento,

How many US people are using digital 