UX Trends 2017 Report

ZORRAQUINO
UXTrends2017-Zorraquino-Marzo2017
UX Trends 2017
www.zorraquino.com 
Marzo 2017

Prólogo
Para los que no nos conocen, Zorraquino somos una agencia de diseño y estrategia
digital, especialista en branding, experiencia de usuario y desarrollo de soluciones
integrales para el negocio digital.
2017 es un año importante para nosotros, ya que es el año de nuestro 15º aniversario.
Y en parte, por este motivo, presentamos en este informe las 12 tendencias en
Experiencia de Usuario más relevantes del momento.
12 conceptos referentes a UX de muy diversos sectores con los que pretendemos
hacerte reﬂexionar. Un recorrido por los distintos caminos por los que la Experiencia
de Usuario se convierte en la aliada de las marcas para dar mejor servicio,
conseguir clientes más satisfechos e incrementar sus ventas.
Espero que te resulte interesante.
Miguel Zorraquino 
linkedin.com/in/mzorraquino
2

UX se pasa a la voz
Diseñar experiencias para ser habladas
Tendencia 1
3

Diseñar experiencias habladas
• La interacción de voz es ya una alternativa o, incluso, un reemplazo completo de
interfaces visuales tradicionales.
• Cuando la mayoría deje de utilizar pantallas para centrarse en la voz a través de Siri,
Alexa, Cortana, Google Home… ¿Cómo se comunicará la identidad de una marca a
través de la voz y la conversación?
• ¿Qué relación se creará entre el usuario y el asistente de voz? ¿Hasta dónde llegará la
conﬁanza con una IA?
• Se trata, probablemente, de uno de los mayores desafíos del diseño de experiencia
de usuario (UX) desde que nació el smartphone, que podría ascender este año a
categoría de mainstream, como se ha puesto de maniﬁesto en CES 2017.
4
Tendencia 1, UX se pasa a la voz

Amazon Echo
Más conocido como Alexa
5

Predicción ventas 2017
33 millones de dispositivos de voz
Voice-First Device Footprint
35
30
25
20
15
10
5
0
VoiceLabs Analysis combined with research from CIRP, KPCB and InfoScout
Millionsofdevices
2014 2015 2016 2017
6

Amazon Fire TV
Una televisión controlada por voz
7

En síntesis
• El 45% de los adultos estadounidenses utilizan al menos un asistente personal
digital activado por voz, como Siri (Apple), Google Now, Cortana (Microsoft) o Alexa
(Amazon), según Forrester Data.
• Experiencia de baja fricción y altamente personalizada: recordatorios, citas, reservas
para cenar…
• Los usuarios tienen altas expectativas en esta nueva forma de interacción.
• Más fácil, más rápido y más humano (la voz como único intermediario).
• Nuevas vías para expresar la identidad de marca: las palabras, la conversación, el tono
de voz, etc.
• Marcas con identidad de voz como si fuesen humanos.
8

Jason Amunwa, Digital Telepathy
“Virgin America may opt to converse with you in a saucy, ﬂirty and suggestive British
voice that’s in line with their brand, whereas the New York Times might opt for a more
mature, assertive, voice for their announcements. The kids may ﬁnally get to talk
directly to Mickey as you book your Disney World vacation! Apple may be searching for
the perfectly engaging, and yet soothing voice for your next operating system, (spoiler
alert, it’s Scarlett Johanssen’s voice, in Her)”
9

Retos y oportunidades
• Diseño de la voz y conversaciones: por ahora no son muy espontáneos ni se puede
llegar a tener una conexión emocional (uno de los errores de Siri).
• Personalización voz según funciones o interacción con marcas. Aportar valor al
usuario. Distinguir entre los diferentes miembros de la familia, para mejorar la
experiencia del usuario.
• Saber cómo habla la gente con las máquinas para diseñar las conversaciones:
frases sencillas, preguntas simples y concretas, sin ambigüedad.
• Importancia del lenguaje: no hay gráﬁcas ni animaciones.
• Aprendizaje mutuo. Alexa aprende de mis respuesta para próximas interacciones y yo
tengo que aprender cómo dirigirme a ella para conseguir lo que quiero.
10

Alexa
User: Alexa, Ask Date Night to make a reservation at Haymarket tonight. 
Do
Date Night: Reservation at Haymarket. 
For what time tonight?
User: About 7:30.
 
Don’t
Date Night: To make a reservation, you
need to say the location, time, date and
number of people. Please start over.
11
Ejemplo del buen uso del lenguaje por Alexa

Para pensar
• Después de mucho tiempo, en 2017 se empezarán a ver cambios reales. El voice
interface ya es mainstream.
• La privacidad puede ser una barrera, tener un dispositivo que en cuanto dices Alexa
reacciona signiﬁca que te está escuchando siempre.
• Las palabras importan más que nunca para el UX.
• Alianzas entre marcas y empresas tecnológicas. Datos de consumo a cambio del
control de la experiencia del consumidor.
• Reto para los diseñadores UX: anticiparse a la intención del usuario y mantener su
participación una vez haya pasado el momento de novedad.
• Hay que seguir desarrollando su personalidad e ir innovando en respuestas: claridad
y comprensión, hacia la creación la identidad de marca a través del UX.
12

Referencias
Alexa, tell me a brand’s story 
https://uxdesign.cc/how-can-we-tell-a-brands-story-and-create-a-recognisable-identity-
through-ai-sound-and-46d9d793e145#.fb6zcpgnq
Alexa best practices 
https://developer.amazon.com/public/solutions/alexa/alexa-skills-kit/docs/alexa-skills-kit-voice-
design-best-practices
La voz es la nueva plataforma y Alexa será la reina 
https://backchannel.com/voice-is-the-next-big-platform-and-alexa-will-own-it-
c2cf13fab911#.btsfy6bn6
Voice report 2017. Datos de crecimiento y desarrollo 
http://voicelabs.co/2017/01/15/the-2017-voice-report/
13

Referencias
La voz es el gran reto para UX 
http://www.dtelepathy.com/blog/design/the-ux-of-voice-the-invisible-interface 
 
Qué implica el éxito del IA en la experiencia de usuario 
http://www.geomarketing.com/what-the-rise-of-the-intelligent-agent-means-for-customer-
experience
AI para combatir la soledad 
https://uxdesign.cc/can-ai-help-combat-loneliness-fda56da6ec82#.bczo4kl9k
14

Simple vs Retro
Conectar mirando al pasado
15
Tendencia 2

Simple vs Retro
• Por mucho que esté avanzando la tecnología hay un importante nicho de la sociedad
que preﬁere la simplicidad: usuarios saturados de vivir constantemente conectados,
disponer de demasiadas opciones y con sensación de no poder parar y disfrutar de las
cosas cotidianas.
• En búsqueda de la simplicidad añorada, muchas marcas miran al pasado para
mejorar la experiencia de usuario. Lo retro, acompañado con el componente
emotivo y nostálgico, vende. Y la experiencia del usuario se simpliﬁca al mirar atrás y
construir a partir de territorios conocidos por los consumidores.
• Lo retro es friendly: aporta facilidad, seguridad, privacidad; como opuesto a
aceleración, interrupción, grito.
16
Tendencia 2, Simple vs Retro

Campaña Heinz
Don Draper presentando la campaña que ha recuperado la agencia DAVID Miami
17

En síntesis
• Retro: moda y búsqueda de la simplicidad (reacción frente a la complicación).
• Volver al pasado para conectar mejor con el usuario.
• Las marcas recuperan modelos antiguos adaptándolos a la vida actual.
• Ejemplos: relojes Casio, neveras Smeg, Ikea Argang, Bultaco (motos eléctricas),
cámaras Polaroid, Anís del Mono…
• Lo retro despierta emociones positivas: empatizar con la gente a través valores de
conﬁanza basados en los recuerdos del pasado.
• EEUU: términos newstalgia y newtro para nombrar esta tendencia.
• Conectar desde universos conocidos y más simples.
• Dar importancia a lo que el cliente valora.
18

Polaroid Snap
Fusión entre retro, sencillo y útil, pensando en el usuario
19

Nokia 3310
“Back to the future”

Nokia 3310
• Presentación en el Mobile World Congress, Barcelona 2017.
• El protagonismo para un teléfono de hace 17 años; el Nokia indestructible.
• Interés hacia un móvil simple, barato, y con menos funciones: no controla pasos,
calorías, interacción en redes, solo cuesta 50 €, la batería dura 22h.
• Fácil de usar, simple, sin complicaciones; para llamar y mandar SMSs.
• Ni Twitter, ni Facebook, ni WhatsApp, ni vídeos, vuelve a las esencias de la telefonía
móvil.
• Con el status que le otorga ser un clásico.
• Modernizado en diseño y convertido en objeto de culto.
21

Burger Records
en California, la meca del "cassette"
22

Vuelve el casette
• Las ventas de cassettes en EEUU en 2016 aumentaron un 74%: 129.000, frente a
los 74.000 de 2015 (cifras todavía pequeñas pero en alza).
• Frente a los vinilos –que apuestan además por calidad de sonido superior– los
cassettes, además del reducido coste, se relacionan con el retour a las sensaciones:
que sea tangible, los colores, la manipulación de la cinta…
• “Nos gusta tocar cosas. Nos gusta sentir. Somos sensibles. Y que las cosas nos
lleguen al corazón” (Burguer Records).
• Justin Bieber, Kanye West, BSO Star Wars: lanzamientos exclusivos en cassettes.
Sección en Urban Outﬁtters, tienda de referencia en EEUU.
• No sólo para nostálgicos, nuevas generaciones fans de estas estrellas buscan
exclusividad.
23

Elbow
Mini reproductor de cintas de cassette para fans de lo retro
24

Para pensar
• Seguridad que otorga el componente vintage, que garantiza calidad y funcionalidad
en una sociedad complicada y excesiva en oferta.
• Componente también de originalidad: ser distinto, ir a contracorriente.
• UX: mejora también ayudado por los componentes emocionales asociados a lo retro.
• Lo retro como una forma directa de conseguir sencillez, calidad y exclusividad.
• La apuesta por la conﬁanza en el pasado vs desconﬁanza futuro, que hace
interacciones más fáciles. No necesariamente todo lo nuevo es mejor.
25

Referencias
Ejemplos retro 
http://www.puromarketing.com/44/22379/vintage-gusta-tanto-consumidor.html 
http://www.puromarketing.com/9/16590/vintage-despertarndo-emociones-traves-
nostalgia.html 
https://www.linkedin.com/pulse/do-old-brands-have-second-life-prabhakar-mundkur 
http://www.eleconomista.es/empresas-ﬁnanzas/noticias/8224421/03/17/La-resurreccion-de-
la-imprenta-ninos-y-jovenes-impulsan-las-ventas-de-libros-en-papel-.html
Nokia 3310 
http://www.thedrum.com/opinion/2017/02/24/nokias-3310-returns-has-the-mobile-phone-
revolution-come-end 
https://www.dusted.com/blog/nokia-3310-isnt-just-catering-hipsters/ 
https://www.retailgazette.co.uk/blog/2017/03/nokias-3310-and-the-nostalgia-revolution 
https://www.capitalmadrid.com/2017/3/8/45446/la-involucion-vintage-se-pone-de-
moda.html
26

Referencias
Cassete 
http://burgerrecords.com/ 
https://www.xataka.com/musica/las-ventas-de-cassettes-en-2016-suben-un-74-en-estados-
unidos-no-solo-de-vinilos-vive-la-moda-retro 
https://www.forbes.com/sites/jasonevangelho/2016/03/24/forget-vinyl-lets-talk-about-the-
cassette-comeback/#516173ce4d71
27

Invisible
UX que funciona sin ser visto
28
Tendencia 3

Invisible
• El buen diseño es aquel que no se ve, y la buena experiencia de usuario es aquella
que muestra lo esencial, ni más ni menos, ni antes ni después: en el momento
preciso en que se necesita.
• Diseños donde el usuario no queda aturdido por excesivos mensajes y opciones de
navegación, donde cada elemento en la experiencia tiene un sentido, donde recibes
ayuda sin notarlo y donde la experiencia resulta excelente; sin darte cuenta.
• Muchos elementos ayudan a conseguir este efecto. Para las tendencias de este año
hemos elegido tres: haptic design, age-responsive design y animación funcional,
que se enfoca a animar no para “decorar” sino para dar sentido a la navegación y a la
experiencia del usuario.
29
Tendencia 3, Invisible

Spotify

En síntesis
• Haptic design: botones y teclas que proporcionan feedback sensorial a los usuarios.
• Diseño adaptado a la edad: más allá del "responsive design", que se adapta a cada
plataforma. Colores, tipos de letra, ilustraciones, textos, espacios, menús de
navegación... adecuados a la edad de los usuarios.
• Animaciones que acompañan al sentido del diseño, que dicen cosas, anticipan el
siguiente paso y ayudan a disminuir la "interstitial anxiety": ese momento de silencio
que pasa desde que el usuario ejecuta una acción hasta que recibe una respuesta.
32

Animaciones funcionales
• El movimiento guía y se centra en lo que es importante, no permite que te sientas
perdido.
• Su aplicación puede ser divertida y juguetona o seria y sencilla, utilizar los principios
del movimiento puede ayudarle a ofrecer una experiencia coherente, clara y rápida.
• Una animación funcional es sutil, con un propósito claro y lógico.
• Es asociativa, natural, intencional y rápida.
• Las animaciones también cuentan cosas.
• Facilita la experiencia: las transiciones nos ayudan a comprender el entorno y a hacer
predecible el modelo de interacción.
33

Demo del rediseño de Snapchat

Snapchat
• Una barra de búsqueda que cambia la experiencia de usuario.
• Orientada a encontrar fácilmente a los contactos.
• Respuesta a una clara petición de sus usuarios, a los que les resultaba complicado
encontrar gente conocida.
• Buscador siempre presente. Tendencia a hacerlo más grande.
• Amazon en el punto de mira, como referente en cuanto a priorizar el buscador al menú.
• Espacios más generosos. Más amplios y con un mejor gusto en el uso de colores e
imágenes. Interfaz más sencilla, rápida y útil. Mejora la navegación.
• Claro ejemplo de "diseño invisible", pensado y creado para el móvil.
35

Para pensar
• Las numerosas opciones que tienen los diseñadores para ilustrar y enriquecer
aplicaciones y webs pueden poner en peligro la utilidad.
• Poner atención a todos y cada uno de los detalles es la clave del éxito al diseñar
pensando en la experiencia de usuario.
• El criterio de la invisibilidad ayuda a diferenciar qué sirve y que no.
• Optar únicamente por aquello que ayude a comunicar de manera efectiva con los
usuarios.
• Que añada facilidad de uso.
• Y que no se vea.
36

Referencias
Tendencias 2017 
https://www.multiplica.com/wp-content/uploads/2017/02/multiplica.tendenciasux2017.pdf
Barra búsqueda Snapchat 
https://techcrunch.com/2017/01/23/snapchats-big-redesign-featuring-universal-search-and-
more-just-hit-ios/
Animación funcional 
http://forolr.com/temas/animacion-funcional-en-el-diseno-ux-que-hace-una-buena-transicion.
22/ 
https://medium.com/@juancaferraris/animaciones-en-el-dise%C3%B1o-de-ux-mobile-
a4d7600d5930#.2tf23u8xk 
https://www.beeva.com/beeva-view/diseno-y-ux/mueve-ui-las-animaciones-tambien-cuentan-
cosas/ 
https://material.io/guidelines/motion/transforming-material.html#transforming-material-
rectangular-transformation
37

Apuesta por lo virtual
Tan real como la vida misma
Tendencia 4
38

Apuesta por virtual
• Con la presentación del Oculus Rift, el PlayStation VR y el DayDream, entre otros, la
Virtual Reality (VR) está consolidando posiciones, para ofrecer a usuarios y marcas
la posibilidad de trasladarse a entornos quasi-reales que ampliﬁquen la experiencia.
• Tecnológicas, productoras, diseñadores y medios, amparados por marcas como
Google, Snapchat, Facebook, Sony o Samsung, están convirtiendo la realidad virtual
en una opción asequible a todos los públicos.
• Una tecnología con altas perspectivas de crecimiento, por la que apuestan marcas y
plataformas, que ofrece inﬁnitas posibilidades y, también, que plantea el reto de su
integración amable, y útil, en la comunicación y la relación con los clientes.
39
Tendencia 4, Apuesta por virtual

En síntesis
• Se prevé que la industria de la realidad aumentada, virtual y mixta mueva alrededor de
160.000 millones de € en 2020.
• Ofrecen experiencias, cada vez, más inmersivas, para todos los sentidos.
• Permiten ir de compras, colocar muebles virtuales en su casa, hacer entrevistas de
trabajo, probar coches sin salir de casa, visitar hoteles o atracciones turísticas, asistir a
una clase, viajar al pasado... facilita la conexión con los consumidores y puede ayudar
en la decisión de compra.
• Una experiencia –de la VR, AR o MR– que no se limita al entretenimiento y que se
democratiza con los visores y cámaras de nueva generación y bajo precio.
• Obliga a repensar la UX para adaptarla a un nuevo entorno virtual: gestos, clicks,
navegación, entorno... todo es posible y todo cambia en este universo.
40

Buy+ The First Complete VR Shopping Experience
41

Alibaba
• Lanza Buy+.
• Una plataforma de realidad virtual que permite comprar desde China como si
estuvieses en Manhattan.
• Paseas por los grandes almacenes como si estuvieses realmente allí.
• Integrado en Alipay; seleccionas con el cursor y compras con un sencillo movimiento
de cabeza.
• De momento, sólo en fase piloto.
42

Una web de recursos para repensar la UX

Can you make it to the end?
Campaña en VR para la National Autistic Society
44

Old Irish
Vender cerveza irlandesa en Georgia, con realidad virtual
45

Proyecto Esper
de la VR a la AR
46

Proyecto Esper
• De la VR a la AR.
• Para estudiantes de medicina, Proyecto Esper tienen una visión más amplia de la
anatomía humana.
• Experiencia de estudio de anatomía real.
• Interacción con las manos.
• Se proyecta a través de las HoloLens de Microsoft y es como un proyector láser.
47

Retos y oportunidades
• Creación de experiencias interactivas y reactivas, con mundos que cambian con cada
movimiento del cuerpo y de los ojos.
• Recrear experiencias amables que superen el “virtual reality sickness”.
• Hacer fácil el uso de los controladores y el movimiento del usuario dentro del mundo
virtual. Entender el modo de hacer click en la realidad virtual. Integrar los modos de
feedback físico.
• Aprender a jugar con el tamaño de la imagen y el texto.
• Sacar todo su partido a los sonidos y la música, que también participan directamente
de la experiencia de realidad virtual.
• Crear experiencias que, realmente, superen y mejoren la realidad.
48

Para pensar
• La VR ofrece muchas posibilidades, pero todavía muchos retos: su alto precio, la
complejidad de la producción de universos virtuales, la diﬁcultad de diseñar esos
ecosistemas, el efecto aislamiento... cada vez más fáciles de superar pero que
complican su rápido desarrollo.
• Además, lleva consigo el reto de ofrecer contenido signiﬁcativo para dar valor a la
experiencia, en todos los campos: deporte, conciertos, aprendizaje...
• Los rápidos desarrollos tecnológicos y, sobre todo, el empuje de empresas como
Google, Facebook y Snapchat, puede hacer que su implantación sea más rápida de
lo esperado.
49

Referencias
Tendencias 2017: VR, AR, MR 
http://www.mondo.com/mainstream-vr-adoption-google-chrome/ 
http://edition.cnn.com/videos/world/2016/11/28/alibaba-vr-shopping-stevens-pkg.cnn 
http://www.lavanguardia.com/tecnologia/20170206/414053748119/internet-en-las-cosas-
realidad-mixta-realidad-virtual-comercio-iphone-8.html 
http://www.dailymail.co.uk/sciencetech/article-4185138/Developer-combines-HTC-Vive-
HoloLens-mixed-reality.html 
https://www.solomarketing.es/las-tendencias-clave-en-experiencia-de-usuario-ux-para-2017/ 
http://www.gartner.com/smarterwithgartner/gartner-predicts-a-virtual-world-of-exponential-
change/
A UX guide to designing virtual reality experiences 
http://www.dtelepathy.com/blog/philosophy/ux-guide-designing-virtual-reality-experiences
50

Referencias
Virtual Reality Leads Marketers Down a Tricky Path 
https://www.nytimes.com/2017/03/05/business/media/virtual-reality-leads-marketers-down-
a-tricky-path.html
Top 10 Most Creative VR Experiences 
http://www.shots.net/news/article/91434/shots%27-top-10-most-creative-vr-experiences
51

Mejor anticiparse
Dar sin que pidan
52
Tendencia 5

Mejor anticiparse
• Uno de los principales atributos del buen servicio es la anticipación: ofrecer
respuestas a necesidades todavía no formuladas, interpretar qué necesita el
consumidor y dárselo sin que te lo pida; algo que bien se podría extender al diseño de
la experiencia de usuario, que mejora cuando sorprendes al cliente con respuestas o
servicios que buscaba pero todavía no había pedido o, más aún, que ni siquiera era
consciente que necesitaba.
• Este es precisamente el sentido del "anticipatory design", que mejora el proceso,
simpliﬁca la relación y enriquece la experiencia. Un diseño que ahorra tiempo y
supone, sobre todo, entender bien cómo funciona y qué quiere nuestro interlocutor.
Mejorado también con el análisis y la recogida de datos de compra.
53
Tendencia 5, Mejor anticiparse

En síntesis
• Diseño anticipativo para facilitar las cosas al consumidor.
• Un diseño que trata de ir siempre un paso por delante: ofrecer acciones, respuestas,
servicios... antes de que los pidas.
• Construido sobre el conocimiento previo.
• Un conocimiento del consumidor basado en: análisis de datos, compras previas,
conocimiento del mercado, análisis del proceso de compra.
• Orientado al feedback y a la mejora continua: no hay conocimiento sin monitorización
y respuesta por parte del usuario.
• Tan importante el diseño como los datos.
54

Aaron Saphiro, HUGE
“Anticipatory design is fundamentally diﬀerent: decisions are made and executed on
behalf of the user. The goal is not to help the user make a decision, but to create an
ecosystem where a decision is never made—it happens automatically and without user
input. The design goal becomes one where we eliminate as many steps as possible
and ﬁnd ways to use data, prior behaviors and business logic to have things happen
automatically, or as close to automatic as we can get”
55

Peapod
• El supermercado online de verduras ("grocery store") más grande de Estados
Unidos. Con oﬁcina central en Illinois, opera en 23 ciudades.
• Su nueva app está diseñada para poder llenar el carro en un par de clicks, con pre-
decisiones tomadas a partir de información de compras anteriores.
• Un servicio que han denominado "Order Genius".
• Trata de anticiparse a lo que el cliente necesita, para facilitarle la navegación,
ahorrarle tiempo y mejorar la experiencia.
• Diseño para aprender continuamente acerca del comportamiento del consumidor,
que recoge información cada vez que usa la app.
• Diferencia las compras de los clientes según, incluso, la temporada y el ciclo de los
productos.
57

Uber
• Uber va un paso más allá.
• Personalización como medio para simpliﬁcar la experiencia del usuario.
• La última actualización permite compartir tu calendario y contactos para localizar a
tus amigos o a esa persona con la que debes reunirte, enviando una notiﬁcación que,
al ser aceptada, marca el destino exacto en el que se encuentran.
• También te permite controlar la música durante el viaje a través de Pandora y conecta
con las guías locales para acceder a reviews de bares y restaurantes en la zona a la
que te diriges.
• Se anticipa ofreciendo servicios que podrías necesitar, de manera amable y clara
desde el punto de vista del diseño, sin confundir ni abrumar.
59

Netﬂix
Una importante referencia en diseño anticipativo

"A very realistic vision is we should get to the point
where you just turn on your Netflix app and
automatically a video starts to play that you’re very
happy with". "If you’re not, you may have to flip
once or twice and end up with something that
you’re very, very happy with. Only in, say, 10-to-20
percent of sessions [will you] escape into ...
browse mode.”
 
Carlos Gomez-Uribe, Netflix's Vice President of Innovation
61

Para pensar
• El diseño pasa de simplemente presentar una selección, o facilitar la navegación, a
sustituir al consumidor a la hora de tomar decisiones.
• Una nueva forma de entender el diseño que exige no solo competencia gráﬁca sino
comprensión de los procesos de compra y de la toma de decisiones y, también,
capacidad para procesar y analizar datos.
• Requiere, además, un cierto "acostumbramiento" por parte del usuario, que cede
protagonismo y poder.
• Supone superar la barrera de la desconﬁanza; las marcas, en este entorno, se verán
necesitadas de forjar una relación más estrecha con sus consumidores, o pactar
condiciones precisas de uso.
62

Referencias
Anticiparse, automatizar las acciones, aconsejar y descubrir. 
Tendencias 2017. 
https://www.multiplica.com/wp-content/uploads/2017/02/multiplica.tendenciasux2017.pdf 
http://www.mondo.com/ux-design-trends-2016-2017/ 
https://www.solomarketing.es/las-tendencias-clave-en-experiencia-de-usuario-ux-para-2017/ 
https://blogs.oracle.com/VOX/entry/smart_user_experiences_machine_learning?SC=ccentral-
machine-learning-ashley-forbes
Interstitial anxiety 
https://www.quora.com/What-are-some-examples-of-UX-Ui-animation-that-reduce-interstitial-
anxiety
63

Resurgir del texto
Leer y escribir la nueva interface
64
Tendencia 6

Textos fáciles y rápidos
• Gracias a la mensajería instantánea, y a apps como Messenger, Whatsapp o WeChat,
el texto está experimentando un nuevo resurgir y se está convirtiendo en la nueva
interface.
• Un fenómeno potenciado con la llegada de los chatbots y que implica, desde el punto
de vista de la UX, aprender diseñar las relaciones como conversaciones textuales y
elaborar textos fáciles, rápidos, simples, inequívocos, predecibles, que faciliten a
los usuarios relacionarse con las marcas a través de las plataformas que más
frecuentemente usan: los servicios de mensajería.
• Una tendencia que ha sido acogida por la mayor parte de las marcas y que tiene
indicios de seguir creciendo.
65
Tendencia 6, Resurgir del texto

En síntesis - Chatbots
• A través de la web, apps, Kik, Facebook Messenger u otros.
• Automatiza el proceso de atención, asociado con el ciclo de vida del usuario;
incluso, permite realizar pagos a través del chatbot.
• Se pueden crear fácilmente desde FB: Chatfuel.
• Más de 30.000 chatbots en Facebook Messenger, aunque hay dudas sobre su
efectividad: sólo resuelven el 30% de las preguntas (según Facebook).
• Diálogo cercano, disponible 24/7. Trato personalizado. Simple, rápido y sencillo. Casi
humano. Hace pensar que hablan con una persona real.
• No solo para atención al cliente: también idiomas (Duolingo), eventos (Thington),
consultas médicas (Babylon), ﬁnanzas (Matilda), multas (DoNotPay), noticias (CNN),
entretenimiento (Hello Barbie), etc.
66

"Welcome to the era of the conversational
interface. It’s not the next app killer, but CI looks to
be the primary interface that much of the world
will interact with in the foreseeable future. (...) CI is
an interface design focused around “chatting”
with either real humans or bots”
 
Paul Campillo, Typeform
67

Duolingo
Aprende idiomas conversando, experiencia similar a tener un profesor

Domino’s
Just in time for Super Bowl Sunday, Domino’s bot now oﬀers full-menu ordering

Thington
La app para organizar eventos con texto

Bot Judy Zootopia
• Disney hizo un gran uso del bot dando vida a uno de los personajes de dibujos
animados.
• Antes del estreno de la película "Zootopia", crearon un “Judy Hopps bot” en Facebook
Messenger, que fue utilizado para impulsar la anticipación de la película y crear una
experiencia divertida para los clientes.
• La interacción consistía en ir resolviendo casos con Judy.
• En promedio, los usuarios pasaron más de 10 minutos hablando con el personaje de
la película. Muchos repitieron.
• "After witnessing how passionate fans were about the Judy Hopps experience, our
conclusion is that an interactive, one-on-one touchpoint with each customer will
become the most eﬀective and most eﬀective medium for engaging”.
73

Typeform
Free & Beautifully Human Online Forms
74

Typeform
Se adaptan a las necesidades de cada ser humano, no usuarios

Typeform
• Esta empresa se dedica a hacer formularios: de satisfacción, sugerencias, incidentes,
contacto, información, registros, pagos…
• Apuestan por un acercamiento de humano a humano a través de un diseño y
preguntas visualmente atractivas y cercanas.
• Conversacionales.
• Personalizados según cada marca.
• Métricas de comportamiento útiles para anticiparse en futuras relaciones con el
usuario.
• En el blog interactúan con el usuario aportando información adicional a la lectura.
76

Typeform
Se adaptan a las necesidades de cada sDurante la lectura del blog te acompañan y ofrecen información adicional a la lectura
77

Typeform
Se adaptan a las necesidades de cada sDurante la lectura del blog te acompañan y ofrecen información adicional a la lectura
78

Para pensar
• El auge de la mensajería y el chatbot requiere cultivar de nuevo la habilidad de la
escritura sintética.
• El próximo reto, escritura anticipativa y chatbots basados en inteligencia artificial.
• Otro desafío pendiente: integrar las emociones en la conversación y hacer los
mensajes de texto todavía más humanos.
• Las últimas noticias publicadas por Facebook, ponen en entredicho la eficacia de los
bots: sólo resuelven el 30% de las preguntas.
• La mensajería atendida por humanos, en cambio, sigue subiendo.
• Para respetar la privacidad y preservar la confianza, que es clave. Será necesaria una
política de opt-in donde los usuarios pueden elegir qué comparten.
79

Referencias
Chatbots Trends 2017 
https://www.accenture.com/es-es/insight-tendencias-fjord-2017?src=SOMS 
http://venturebeat.com/2017/03/01/why-business-chatbots-must-understand-customer-
intent/ 
http://www.techworld.com/picture-gallery/personal-tech/9-best-uses-of-chatbots-in-business-
in-uk-3641500/ 
https://www.forbes.com/sites/sujanpatel/2017/01/21/6-eﬀective-uses-for-chatbots-in-
marketing/#4f2131673f48 
https://www.solomarketing.es/las-tendencias-clave-en-experiencia-de-usuario-ux-para-2017/
Typeform 
https://www.typeform.com/about/
80

Referencias
Aprender idiomas con un bot 
https://www.theguardian.com/technology/2016/oct/06/duolingo-chatbots-learning-language 
http://bots.duolingo.com/
Domino’s 
http://www.digitaltrends.com/social-media/dominos-facebook-chatbot/
Ayuda a ahorrar en casa, pone dispositivos en reposo, 
ayuda a organizar eventos.  
https://thington.com/
Help Judy save the case 
http://www.topbots.com/project/disney-zootopia/
81

Hablar con imágenes
Mostrar en vez de decir
82
Tendencia 7

Hablar con imágenes
• Como dice el refrán, una imagen vale más que mil palabras. Las imágenes pueden ser
una manera poderosa de captar la atención de los usuarios y diferenciar un producto.
Son más que decoración y tienen un efecto positivo –que se puede volver negativo, si
confunden– en la experiencia de usuario.
• Pero la prioridad de la imagen como forma de comunicación se extiende también a la
experiencia diaria del ciudadano común. Cada vez es más frecuente responder a una
pregunta por WhatsApp –un "¿Qué tal?", "¿qué haces?" o "¿dónde estás?"– enviando
una foto. Compartimos constantemente imágenes para contar lo que hacemos,
decir donde estamos, qué comemos o, incluso, para informar de incidencias o pedir
un repuesto para la oﬁcina.
83
Tendencia 7, Hablar con imágenes

"This is a watershed time where we are moving
away from photography as a way of recording and
storing a past moment" (...). "We are turning
photography into a communication medium”
 
Robin Kelsey, a professor of photography at Harvard
84

En síntesis
• Las imágenes, cada vez más usadas para contar, tanto por los usuarios como por las
marcas.
• Se explota la facilidad de compartir imágenes para mejorar la comunicación y la
experiencia: decir más con poco, y de modo más claro.
• Vinculado tanto a la comunicación informal, como a la atención al cliente, la petición
de productos, la autentiﬁcación...
• Bienvenida siempre que facilite la comunicación.
• Alto poder evocador; componente emocional.
• También, función estética y amable, que no solo ayuda a comunicar sino a hacer la
comunicación más amable.
85

Ever
Compartir cada momento con tus amigos

Oportunidades
• Comunicarse a través de imágenes facilita la experiencia de usuario cuando no sabes
explicar algo exactamente: “necesito una pieza concreta que se me ha roto y no sé su
nombre técnico”. Las descripciones se sustituyen por las fotos. No hacen falta
palabras.
• Pueden transmitir información especíﬁca que hace que la comprensión sea fácil e
inmediata.
• Las fotos de puestas de sol, reuniones con amigos, las vacaciones de la familia… se
están convirtiendo en un tipo totalmente nuevo de diálogo.
• Ya no son simplemente recuerdos, son un medio de comunicación.
• Efecto similar con los emoticonos, capaces de condensar gran cantidad de
información, con un sólo click.
87

Todos somos fotógrafos profesionales
Compartir cada momento con tus amigos

Instagram
Nos relacionamos a través de imágenes

Smartphongrafía
• Todas las RRSS quieren convertirse en el álbum de fotos de los usuarios.
• Muchos de los usuarios de Instagram no solo buscan compartir, lo hacen desde un
punto de vista creativo.
• Gracias a los smartphones y los ﬁltros todos somos fotógrafos profesionales.
(Anuncios marquesinas de iPhone 7).
• Lentes que se acoplan al móvil para mejorar calidad.
• Las imágenes enviadas a móviles están aumentando a medida que los mensajes de
texto siguen cayendo.
• Emoticonos expresando emociones, hacen más agradable y divertido el mensaje.
90

Fooji
Pedimos pizza a través de imágenes

Abrimos cuentas a través de imágenes
Y nos identiﬁcamos posteriormente

Cover
Haz una foto y te digo cuánto te costará el seguro

Para pensar
• El predominio de la imagen anima a reﬂexionar sobre cómo se puede simpliﬁcar la
conversación con los usuarios a base de emplear más imágenes y de modo más
oportuno.
• Imágenes que hagan la comunicación real y que traigan al mundo on-line formas y
maneras de la comunicación interpersonal, centrada en mostrar más que hablar.
• La UX mejora con las imágenes; se convierte en rápida, cercana, atractiva…
• No hay barreras lingüísticas. El mundo se hace más pequeño gracias a la tecnología,
todo el mundo pueden chatear con imágenes, la lengua universal.
• Se hará también necesario velar por la calidad en un momento en que, debido a la
alta proliferación de imágenes, la cantidad puede llegar a lesionarla.
94

Referencias
Un nuevo lenguaje 
https://bits.blogs.nytimes.com/2013/06/30/disruptions-social-media-images-form-a-new-
language-online/
Cómo la imagen mejora la UX 
https://uxplanet.org/how-to-use-images-to-improve-ux-for-mobile-apps-1fe3ﬀ83bc8b#.
6zop23b6n
Compartir momentos 
http://venturebeat.com/2017/03/02/ever-launches-image-recognition-tool-to-make-photo-
sharing-with-friends-easier/
95

Piensa en mini
Lo mismo, en menos pasos
96
Tendencia 8

Piensa en mini
• Los usuarios, a veces inconscientemente, tratan de huir de la complejidad y andan
en busca de un proceso de consumo más simple. Quieren lo que no se puede
comprar: el tiempo.
• El consumidor rechaza la confusión, la saturación, la multivariedad, la complejidad, la
artificiosidad... no necesita ser cautivado con grandes gestos, quizá tampoco busca
infinitas alternativas. Quiere menos.
• Menos botones, menos clicks, menos pantallas, menos tiempo de espera, menos
fotos, menos items, menos menús...
• Quizá la filosofía de la abundancia ha derivado en el mundo de la UX hacia una
experiencia más cualitativa que cuantitativa, que busca menos y mejores opciones,
en menos pasos.
97
Tendencia 8, Piensa en mini

En síntesis
• El 64% de los consumidores pagan más por experiencias más sencillas, rápidas y
fáciles. Se hacen premium para simpliﬁcar procesos.
• La simplicidad genera lealtad: el 61% de los consumidores tiende a recomendar una
marca porque es simple.
• No hace falta estrategias complicadas para destacar. La simplicidad es un valor
diferencial verdaderamente sustancioso.
• Tres reglas para una experiencia de marca simple:
1. Dar a los consumidores lo que quieren.
2. Estar disponible cuándo y dónde lo deseen.
3. Entrega en tres o menos pasos.
98

¿Quieres un latte? Starbucks tiene lattes.  
¿Lo quieres en 15 minutos? Starbucks tiene una
aplicación para que puedas pedirla con antelación
y tenerlo cuando pases por allí. 
¿Lo quieres en dos pasos? Paga desde la App.
100

Starbucks
• App pedido personalizado, pago desde la app con google maps integrado para
calcular cuánto tardas y que esté listo tu café.
• Si tienes un pedido guardado, en tres pasos lo tienes.
• Eliminación de colas, es decir, de ansiedad del usuario.
• Como extensión de la App Mobile Order and Pay este año han lanzado en USA: My
Starbucks Barista que integra Alexa.
• Se puede realizar el pedido por voz, lo que incluye simplicidad y, de paso, más fácil la
personalización y la repetición de la compra.
101

Starbucks
Barista con Alexa (Amazon) incluida
102

Ikea
Elimina los tornillos: nuevo sistema wedge dowel
103

Ikea
• Muebles baratos, funcionales y de diseño escandinavo.
• Problema: montaje.
• Solución: wedge dowel, ya no hay tornillos, tuercas ni llaves allen. Piezas de madera
con unos acabados en forma de dientes, similares a los sistemas tuerca-tornillo. Un
clic nos indica que la pieza está en su sitio.
• Simpliﬁca el proceso, entre un 50% y un 80%, es decir, montar una mesa en 3
minutos en lugar de los 24 actuales.
• El medio ambiente también se verá beneﬁciado, ya que se prescinde de la fabricación
de millones de piezas metálicas y llaves.
• Mejora la durabilidad de los muebles, la madera sufre menos y es posible montarlos
y desmontarlos tantas veces como se quiera.
104

Nest
El termostato que decide por ti
105

Digit
El modo simple de gestionar y ahorra dinero, sin preocuparte de pensar

Futteral Haus
Una casa a golpe de click; "revolutionizing simple, smart living"
107

Para pensar
• Una de las tendencias más fuertes, la simplicidad es prioritaria al pensar en la
interacción del usuario con una marca.
• Al mismo tiempo es una tendencia universal, en el espacio y en el tiempo, de la que
seguimos hablando por la dificultad que de materializarla. Simplificar y reducir es
difícil. Hoy más importante que nunca.
• La complejidad de opciones, alternativas, información otorga un papel especial a la
labor simplificadora del diseño. El usuario necesita que el diseño le ayude a acertar y a
ahorrar tiempo.
108

Referencias
Tendencia Mini, UX trends 2017 
Aldi, líder en simplicidad 
https://www.linkedin.com/pulse/simplicity-solution-4-ways-retailers-earn-more-keeping-bryan-
pearson
Simplicity Index Results 
https://www.forbes.com/sites/kimberlywhitler/2017/01/25/new-global-brand-simplicity-index-
results-brands-that-create-simpler-experiences-win/#406c3eb252a3
Ikea y Starbucks 
http://www.tmagazine.es/diseno-e-interior/no-mas-tornillos-ikea-rerevoluciona-el-mueble/ 
http://www.merca20.com/starbucks-lanza-bot-ios-permite-hacer-pedidos/
109

Hazlo tú mismo
El usuario construye la experiencia
110
Tendencia 9

Hazlo tú mismo
• “Do it yourself” sigue siendo una tendencia cada vez más expandida a diferentes
ámbitos.
• Enlazado con el movimiento maker y con el resurgir de la artesanía, las marcas tratan,
cada vez más, de diseñar experiencias de usuario que otorguen protagonismo al
consumidor, le permitan moverse de manera autosuﬁciente y tomar la iniciativa, con
diseños que hacen fácil la navegación pero que le dejan hacer y moverse a su modo.
• Los usuarios buscan tanto instrucciones como demos, guías o ayudas; nos
encontramos ante una nueva generación de consumidores inteligentes y
autodidactas que necesitan experiencias que estén a su nivel.
111
Tendencia 9, Hazlo tú mismo

En síntesis
• Las nuevas generaciones también son makers.
• El aumento de los dispositivos móviles ha afectado signiﬁcativamente la capacidad de
los niños para interactuar con la tecnología y, como consecuencia, su interés en
producir esta misma tecnología.
• “A lot of kids this days like to play games, but now they want to make them”, Thomas
Suarez, desarrollador de 12 años.
• En las aulas se implementan programas de diseño de UX y APPs. Son programas de
educación galardonados: Apps for Good.
• Artesanía, decoración, estudios universitarios, tecnología… el fenómeno autodidacta
se extiende también a la UX con la "de-linearity": la “contra-simpliﬁcación”.
112

Thomas Suarez
12 years old, app developer

La Colmena
Crea comunidades en el barrio para comprar comida ecológica y local

La colmena
• Ejemplo de comunidad ecológica: la experiencia mejora con la compra de cercanía,
cuando compras fruta y verdura a agricultores de la zona.
• Usuarios que hacen ellos mismos los productos: muebles, la decoración, agricultura…
la experiencia es muy satisfactoria y añade que es mucho más barato.
• Usuarios que consumen productos artesanos hechos por otros: productos exclusivos,
que suman también la satisfacción emocional positiva de colaborar con los artesanos.
• Pequeñización e internacionalización: lo pequeño se internacionaliza gracias al e-
commerce y a las redes sociales, que han multiplicado la actividad comercial de los
pequeños artesanos.
115

Coursera
Elige cursos de las mejores universidades desde tu casa
116

Coursera
• Una universidad a tu medida: a distancia, que permite organizar tu tiempo (asistes a
clase cuando te viene bien), atención continua para resolución de dudas, comunidad
en redes sociales, etc.
• Mucho más internacional que la universidad presencial.
• Elevado número de alumnos y variedad de oferta docente; y en muchos casos, gratis.
Cursos a tu medida.
• La forma de aprender o asimilar un nuevo conocimiento se hace a través de vídeos
tutoriales; incluso estudian por ese medio.
• Muchas plataformas; aparte de Coursera, edX, Udacity, FutureLearn, etc.
• Se estima que 50% de las clases en universidades serán vía e-learning en 2019.
117

Lego
Más “do it yourself” que nunca
118

Lego
• El juego “DIY” por excelencia.
• En la tienda de Londres podrás conseguir las piezas necesarias para construir tu
retrato con Lego.
• Por 125 Libras puedes sacar tu retrato en una cabina fotográﬁca instantánea y adquirir
las piezas necesarias (en 5 colores), para construirlo con Lego.
• Una nueva apuesta para los superfans de la marca.
• Experiencia de usuario altamente satisfactoria: están contigo porque les haces
hacer a ellos.
119

"De-linearity is the concept of giving users a
number of ways to accomplish a task rather than
requiring them to perform a single precise set of
actions to accomplish that same task”
 
Q Manning, CEO of Rocksauce Studios
120

"Increasingly, users of mobile and web
applications want the freedom to navigate an
interface on their own terms, free of the restraints
that linear design imposes”
 
Q Manning, CEO of Rocksauce Studios
121

Twitter en iOS
Dos formas de volver hacia atrás

De-linearity
• Linearity: simplicidad, claridad, cero ambigüedad: un único camino, el mejor camino,
el más rápido y eﬁciente.
• De-linearity: Varios modos de llegar a lo mismo: no existe un único camino.
• Desafío al diseño tradicional: simplicidad, caminos claros, etc.
• Mejora experiencia de usuario (del usuario de hoy en día): "including a number of paths
from one touchpoint to the next is extremely useful”.
• En algunos casos, se ha convertido en una demanda clara: que el usuario ya usa y
disfruta, aunque no se le llame así.
• Plantea nuevos retos para los diseñadores. Entre otras cosas, puede añadir
confusión y despiste. Más fácil para la web que para el móvil.
123

Para pensar
• El usuario actual, marcadamente autodidacta, necesita ayuda pero no quiere que se lo
den todo hecho.
• Disfruta con la experiencia del Do It Yourself (DIY); y preﬁere buscar su propio camino a
seguir siempre el mismo.
• El "de-linear design" busca también ampliar las posibilidades del diseño intuitivo,
asumiendo que hay varias formas intuitivas de llegar a las cosas.
• Supone un cambio de esquema y un cierto "cuestionar" la simplicidad y univocidad
características del diseño.
• Aplicarlo supondrá, aparte de entenderlo bien, hacerlo compatible con las
necesidades de información y navegación del propio usuario. Peligro de aumentar la
confusión.
124

Referencias
La colmena, compra alimentos de calidad a productores y elaboradores locales 
https://lacolmenaquedicesi.es/es/assemblies/7724
Los nativos digitales son makers 
http://www.uxforchangeuk.org/how-to-inspire-digital-natives-to-become-makers-and-not-just-
consumers-of-mobile-technologies/
When Design Worlds Collide: De-Linearity in UX Design 
http://designrﬁx.com/design/design-worlds-collide-delinearity-ux-design
Lego más “do it yourself” que nunca 
http://www.adweek.com/creativity/this-lego-booth-scans-your-face-and-makes-a-custom-kit-
so-you-can-build-yourself-out-of-legos/
125

Itinerarios
Diseñar caminos que se andan solos
126
Tendencia 10

Itinerarios
• Diseñar experiencias es como trazar caminos; mostrar por dónde ir; deﬁnir
itinerarios. Itinerarios relacionados con lo que el usuario busca, con su forma de
caminar, con su forma de pensar, con su modo particular de procesar información.
• Por eso, diseñar itinerarios no es fácil; porque cada itinerario es para alguien, que
camina a su estilo. Por eso el diseño de itinerarios empieza con la observación.
• Un buen itinerario garantiza una buena experiencia; y tiene las características de
cualquier buena ruta: amable, agradable, clara, inconfundible y, sobre todo, que lleva a
destino.
127
Tendencia 10, Itinerarios

En síntesis
• Diseño claro e intuitivo, sin exceso de mensajes. Enfocado a la usabilidad.
• “Te va llevando, vas descubriendo” pero te sientes dueño de la interfaz.
• Cada elemento tiene una razón de ser.
• Basado en el conocimiento del cliente, para acertar con el camino y para poder guiarlo
durante el proceso.
• Comprender cómo es su experiencia, qué motivaciones tiene, qué es lo que espera y
por qué; saber cuándo se siente frustrado, perdido o aburrido para poder solucionarlo.
• Características de un buen itinerario: simplicidad, claridad, rapidez, empatía, eﬁcacia.
128

Airbnb
Itinerario claros y fáciles de descubrir y de transitar

Airbnb
• Web premiada en los Awwwards.
• Información clara y útil.
• Una sitio web en el que, desde el primer momento, se identifica claramente a qué se
dedican y, una vez empiezas a navegar, resulta fácil encontrar lo que buscas, con
resultados ordenados, posibilidades de filtrar según diferentes criterios, etc.
• Tanto una web con diseño responsive como una app específica para móviles.
• Destaca en los cuatro elementos clásicos (Awwwards): diseño, usabilidad - UX,
creatividad y contenido.
130

Basic
Simplicidad en diseño y navegación
131

Basic
• Super sencilla: texto sobre fondo blanco que te van guiando a través de una web
formada por contenido atractivo.
• Minimalismo y un contenido que hace que navegar por la página sea muy sencillo.
• Protagonismo de la imagen y el vídeo.
132

Para pensar
• Comprender al usuario, clave para poder interpretar mejor cómo se siente, cómo
piensa, qué necesita.
• Conocerle es el primer paso necesario para poder diseñar una mejor experiencia.
• El diseño de itinerarios, bien concebido, abarata costes (evitamos incluir acciones
innecesarias) y reduce errores en el cliente (que disfrutará de la satisfacción que
produce acercar a la primera con el camino).
• El itinerario es cambiante, lo mismo que la UX. No basta con diseñarla una vez; hay
que revisarla habitualmente, para adaptarla a un cliente y un proceso de compra que
evoluciona constantemente.
133

Referencias
The Drum: The UX Revolution 
http://www.thedrum.com/news/2017/02/14/the-ux-revolution-new-report-the-drum-reveals-
why-great-user-experience-will-be-the
Trends 2017 
Entendiendo al cliente 
https://itblogsogeti.com/2017/02/09/entendiendo-al-cliente/
Basic 
https://basicagency.com/
134

Dímelo con vídeo
Acercar la experiencia a la vida
135
Tendencia 11

Dímelo con vídeo
• El vídeo está en todas partes. Lo vemos en el ordenadores, tablets y teléfonos. El
vídeo puede entretenernos e informarnos, mostrarnos la serie que esperábamos, la
última noticia, el modo de funcionamiento de un producto, cómo atar un nudo, dónde
podemos ir de vacaciones...
• Tiene fuerza porque es real, se acerca a la vida misma: porque la vida es en vídeo, con
imagen, movimiento y sonido. Por eso el vídeo conecta, explica, comunica, emociona...
y ayuda a mejorar la experiencia de usuario.
• Diseñar la UX en torno al vídeo va más allá de usar demos o tutoriales; más bien,
pasa por pensar la experiencia de usuario, en cada paso, contando con el vídeo.
136
Tendencia 11, Dímelo con vídeo

Squatty Potty
Ve al baño fácil y rápidamente
137

En síntesis
• Experiencias más audiovisuales. Diseño que incluya vídeos.
• Muchas opciones de aplicación. Transformar un sitio con imágenes estáticas en una
experiencia llena de movimiento y contenido que cuente historias.
• Conexión emocional con el usuario. Por eso, mismo, especialmente activo en
sectores como moda, viajes, lujo...
• Desde el punto de vista funcional, los consumidores quieren ver el producto, un vídeo
ayuda a mejorar la experiencia de compra.
• El usuario agradece la calidad del vídeo. El reto: ser fácil de encontrar y fácilmente
descargable.
• La duración es relevante; la gente tiene diﬁcultad para consumir vídeos largos, a no ser
que el contenido sea especialmente impactante.
138

Coverr
Vídeos para aspiracionales para tu homepage
139

Ambience videos
• Cada vez más común tener vídeo en la homepage.
• No tienen un protagonismo pleno, pero cambian la percepción y enriquecen la
experiencia.
• Los colores, la velocidad, el tono... sutilmente introduce un estado de ánimo o un
sentimiento, provocando el deseo de seguir leyendo y navegar.
• Suelen ser a pantalla completa.
• No son de gran calidad para que no tarde mucho en cargarse la página. A veces
incluso borrosos, para no diﬁcultar la lectura del contenido que hay sobre ellos.
140

New York Times
Te avisan del siguiente contenido y duración

Vídeos entretenimiento
• Diseñar una buena experiencia pasa por conseguir que el consumo de vídeos sea fácil.
• Reducir barreras para la activación, a través de la presencia en la página, el diseño, la
ubicación y tamaño de los botones.
• Facilitar el control de la experiencia.
• Identiﬁcar la ubicación: que sepa dónde está (minutaje) y cuánto le queda.
• Que pueda decidir si verlo entero o en parte.
• Con opción de verlo con o sin sonido.
• Introducir contenido contextual también enriquece la experiencia.
• Avisar del contenido que viene después (NYTimes).
142

Videos explicativos

Vídeos explicativos
• Usados desde siempre, cada vez más presentes para mejorar la experiencia de
usuario. Impulsados, ligeramente, por el "card-based design”.
• Generalmente a pequeño tamaño (no pantalla completa): no todo el mundo los
quiere ver; tratan de no ser invasivos.
• Se busca que el usuario tenga el control. Que no salte al entrar en la página.
• Sin sonido por defecto, opción de subirlo. Subtítulos.
• Experiencia agradable y didáctica. Genera conﬁanza y compromiso porque
habitualmente no son vídeos promocionales.
• Cada vez, también, más vídeos 360º.
• El auge de los "explainer videos”.
144

Videos card-based design

Unboxing
VÍdeos caseros con récord de popularidad
146

Tutoriales
Invaden Youtube y la web
147

Explainer video
Del Project Loon de Google
148

Para pensar
• Una tendencia que va en alza, por la fuerza expresiva del vídeo y su facilidad de
producción y uso, que las marcas deben saber emplear para mejorar la experiencia de
los usuarios.
• Los jóvenes son los grandes consumidores audiovisuales y muestran preferencia
por este formato.
• YouTube como escuela tanto por formato como por temática: demos, tutoriales,
unboxing, etc. El vídeo como recurso habitual.
• Un formato sin barreras, fácil de consumir, fácil de producir, que tolera el formato
informal (con cuidado). Con algunos problemas de formato: puede ser muy pesado.
• Los propios usuarios pueden ser también proveedores de contenido en vídeo y fuente
de inspiración.
149

Referencias
Trends 2017 
Good practices 
https://www.interaction-design.org/literature/article/5-good-practices-when-using-video-for-
ux 
https://www.nngroup.com/articles/video-usability/ 
https://www.sitepoint.com/how-to-oﬀer-great-video-ux/
150

UX en movimiento
Diseño para un mundo móvil
151
Tendencia 12

UX en movimiento
• El mundo actual es móvil. Móvil desde el punto de vista del consumo de medios, la
comunicación interpersonal, la relación de las marcas con sus clientes.
• En torno al 70% del tráﬁco de Internet es actualmente a través de dispositivos
móviles, lo que obliga a las marcas a diseñar experiencias pensando en un usuario en
movilidad, tanto por el dispositivo como por la situación de consumo.
• Estamos pasando de "mobile ﬁrst" a "mobile native", de "responsive design" a
"progressive design". Porque, ya ahora, la presencia de las marcas en Internet, si no es
"mobile friendly", no existe. Con diseños más intuitivos, de descarga rápida, pensados
y nacidos para el móvil, ricos en imagen, con textos breves, para un usuario cuya
pantalla principal es, en muchos casos, un teléfono.
152
Tendencia 12, UX en movimiento

Forbes ha lanzado su PWA
Promete rapidez por encima de todo
153

Progressive web apps
• Promovidas especialmente por Google: las PWA.
• Nuevas webs móviles que tratan de replicar las principales características de las apps
nativas.
• Buscan crear experiencias únicas y diferenciales: lectura rápida, fricción y
frustración reducidas al mínimo, etc.
• Se cargan instantáneamente en el dispositivo.
• Son interactivas con el usuario: notiﬁcaciones.
• De diseño intuitivo.
• Ofrecen posibilidad de trabajar sin conexión.
• Plantean una experiencia inmersiva, facilitando el “engagement”.
154

Comparación en la velocidad de carga del contenido
Promete rapidez por encima de todo

The Washington Post
• Experiencia mobile web separada.
• Funciona y se comporta como una web nativa.
• Con icono en la pantalla principal del móvil.
• Las historias se cargan inmediatamente. Rapidez.
• Acceder a contenido oﬄine.
• “We embrace technological innovation at The Post, and any technology that allows us
to oﬀer a superior experience to our readers is a priority,” Shailesh Prakash, Jefe de
Tecnología TWP.
156

Para pensar
• El usuario busca sobre todo rapidez y facilidad de uso, preferentemente a través del
móvil.
• En un contexto cada vez más exigente desde el punto de vista del usuario, y más
competitivo desde el punto de vista del mercado, la navegación móvil no simplemente
tiene que ser "responsive"; ha de nacer para la pequeña pantalla.
• Tratar de conseguir un diseño ideado por y para móviles. Para pantallas táctiles con
poco espacio de lectura.
• Un cambio que tiene implicaciones no sólo de diseño, sino también tecnológicas, que
habrá que estar atento para adquirir.
157

Referencias
Trends 2017 
http://www.mondo.com/ux-design-trends-2016-2017/
Age-Responsive Design 
https://uxdesign.cc/toward-a-more-human-user-interface-with-artiﬁcial-
intelligence-7bbee17ﬀ30d#.99fckz8kx 
http://insanelab.com/blog/web-design/age-responsive-web-design/
PWAs  
http://www.digitaltrends.com/mobile/progressive-apps-live/ 
https://www.campusmvp.es/recursos/post/Que-son-las-Aplicaciones-Web-Progresivas-o-
Progressive-Web-Apps.aspx
158

Referencias
The Washington Post 
https://www.washingtonpost.com/pr/wp/2016/05/19/the-washington-post-introduces-new-
progressive-web-app-experience/?utm_term=.b48815409100
Forbes 
http://www.niemanlab.org/2017/03/forbes-rebuilt-its-new-mobile-website-as-a-progressive-
web-app/
159

UXTrends2018-Zorraquino-Enero2018
Somos una consultoría estratégica de negocio, una agencia digital, un estudio
de diseño y una empresa de desarrollo que centra su trabajo en la
investigación, el diseño, la tecnología y el marketing. Nuestros proyectos se
basan siempre en metodologías de diseño y ágiles como elemento clave en la
estrategia e innovación de los negocios.
 
Conócenos en: www.zorraquino.com
160
ZORRAQUINO

Zorraquino
Imagen de nuestras instalaciones en BIlbao

Madrid
Gustavo Fernández Balbuena 11, 4º 
28002 MADRID
Tel. (+34) 91 179 34 82
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.
Bilbao
Marqués del Puerto 6, 1º 
48009 BILBAO
Tel. (+34) 94 415 73 79 
www.zorraquino.com
ZORRAQUINO

UX Trends 2017 Report

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (10)

Similaire à UX Trends 2017 Report

Similaire à UX Trends 2017 Report (20)

Dernier

Dernier (20)

UX Trends 2017 Report