User Experience

Design

1
 User Experience Design
Ayuda

Ayuda en la navegación

1. Introducción

1.1 Introducción

1.2 Requisitos de una UX

2. User Interface/User Experience

2.1 Diferencias User Interface/User Experience

2.2 Diferencia entre UX y UI, ejemplo gráfico

2.3 Diferencia entre UX y UI, ejemplo gráfico

2.4 Ejemplo de Twitter

3. Habilidades UX Designer

3.1 Habilidades UX Designer

3.1 Investigación UX

3.2 Colaboración

3.3 Wireframing y Prototipado

3.4 Escritura

3.5 Comunicación Visual

3.6 Empatía con el usuario

3.7 Diseño de interacciones

3.8 Desarrollo

3.9 Analítica

3.10 Habilidades de comunicación

4. Usability

4.1 Usabilidad

4.2 Ejercicio

5. Errores comunes

5. Errores Comunes

5.1. Usabilidad vs Experiencia de usuario

5.2 Diseño vs Uso

2
 5.3 Creer que se comprende al usuario

6. Proceso UX

6. El proceso UX

6.1 Research / Investigar

6.2. Insight / Comprender

6.3 Conceptualizar / Idear / Iterar

6.4 Diseñar la experiencia

Actividades

7. Fuentes y recursos

Fuentes y recursos

Fin de módulo

¡Enhorabuena!

3
Ayuda

Ayuda en la navegación
1. Accede desde el menú principal al
listado de los apartados de la
unidad y sus secciones.
2. Muévete entre las secciones del
apartado utilizando las flechas
inferiores.
3. Avanza al siguiente apartado con
las flechas laterales.
4. Presta atención a las
instrucciones. Te indicarán cómo
interactuar con los contenidos.
5. No olvides hacer clic en todos los
textos que estén en azul para ver más información.
6. Haciendo clic en los iconos puedes descargar el pdf con los contenidos del
módulo.

Recuerda revisar todo el contenido de cada módulo.

4
1. Introducción

1.1 Introducción

Hace años leí un estudio sobre los factores que generaban mejor ra o de
conversión en una enda sica, esto es, incrementar el número de visitantes que
llevaban a cabo la compra de uno o más ar culos del número total de los mismos.
Entre complejos razonamientos basados en neurociencia, o asombrosos cálculos y
es maciones sobre la evolución de precios y descuentos, me quedé perplejo
cuando vi que uno de los “trucos” que aplicaban algunos comercios para el público
masculino consis a simple y llanamente en mantener las “pilas” de ropa
ligeramente desordenadas.

Al parecer, los hombres presentan una mayor tendencia a probarse prendas de

ropa si estas están mal ordenadas, pues la idea de volver a colocarlas ejerce como
freno y, por tanto, reduce significa vamente el número de prendas que los
visitantes a la tienda se prueban y, consecuentemente, el ratio de conversión.

5
 Estantería de ropa perfectamente
ordenada

Sirva este sencillo ejemplo para preguntarse qué factores son más decisivos
en el éxito de, en este caso, un ‘retailer’. Pensemos en nuestra última visita a
una tienda de ropa. ¿Qué recordamos? La calidad de las prendas que nos
probamos, su precio, el trato de los empleados, el olor y la música del
establecimiento, el esmero en la decoración, la bolsa de tela y cómo
guardaron en ella, con cariño, las prendas que finalmente compramos. Todo
ello formó parte de nuestra experiencia con la marca, y esta experiencia
engloba muchísimas más facetas de las a priori imaginables, aunque sin el
debido conocimiento uno pudiera atribuir el éxito o fracaso de la misma
simplemente al azar. No se trata de azar, se trata de un profundo estudio del
usuario en el mismo principio de la generación de productos o servicios que
son diseñados con una filosofía centrada en el cliente.

Es la Experiencia de Usuario, o User Experience en inglés, como es más

comúnmente u lizado este término. Y no, no es un sinónimo de Customer
Experience, aunque tampoco son conceptos independientes. Ya veíamos en el
módulo anterior como la experiencia de cliente (CX) englobaba toda una serie de
conceptos relacionados con el “viaje” del cliente con nuestra marca: antes, durante
y después de la compra, y en los canales directos o indirectos de trato con él.

Relación entre UX y CX

Por tanto, en este módulo, nos centraremos en uno de los aspectos que permiten
a una empresa construir una experiencia de cliente única por medio de la
excelencia en el campo de la UX.

6
1.2 Requisitos de una UX
Se dice que fue Don Norman, ingeniero por el MIT, y posteriormente psicólogo,
profesor y fundador del Nielsen Norman Group, el primero es ostentar un cargo
con estas palabras, User Experience, cuando en 1993 fue nombrado User
Experience Architect en Apple Computer. Su definición de UX es sencilla pero
potente...

‘La “User Experience” engloba todos los aspectos de las

interacciones que un usuario final tiene con la empresa,
sus servicios y productos’.

Don Norman

Así, propone una serie de requisitos para ofrecer una UX

ejemplar...

En primer lugar

Conocer las necesidades exactas del cliente.

En segundo lugar

Después, encontramos uno de los dogmas de Apple, donde siempre han

creído que al cliente no se le puede “simplemente” ofrecer lo que pide,
reduciendo el proceso de diseño a una lista de funcionalidades y
requisitos. Es necesario crear productos con una elegancia y simplicidad
bien entendida tales que poseerlos y usarlos genere satisfacción.

Conclusión

Una empresa debe ser capaz de poner a trabajar juntos a los

desarrolladores, ingenieros, diseñadores gráficos y especialistas en
Marketing, entre otras muchas disciplinas.

7
Es necesario distinguir dos conceptos a veces mezclados erróneamente

el diseño de User Experience (UX) y el diseño de User Interface (UI).Este

último es una pieza clave del primero, unos componentes entre los muchos
que engloba la ‘experiencia de usuario completa’.

8
2. User Interface/User Experience

2.1 Diferencias User Interface/User

Experience

¿Qué es entonces la User Interface?

En el siguiente módulo se hará un análisis completo de los aspectos
fundamentales de esta disciplina, pero podemos avanzar que la UI es el medio
con el que un usuario interactúa con un sistema, un producto o un servicio.

Usamos un ratón (UI1) y un teclado (UI2) para interactuar con nuestro ordenador,
un picaporte (UI3) para abrir la puerta, y una interfaz web (UI4) creada en HTML (y
otras tecnologías) para interactuar con una web para reserva de billetes de avión,
la cual incluye probablemente un cuadro de diálogo (UI5) para introducir
búsquedas, un menú desplegable (UI6) para elegir origen y des no, e incluso un
‘chatbot’ (UI7) para despejar dudas de forma más rápida y en lenguaje natural.

Ratón (UI1). Usamos un ratón.

Teclado (UI2). Usamos un teclado para

interactuar con nuestro ordenador.

Picaporte (UI3). Usamos un picaporte

9
 para abrir la puerta.

Interfaz web (UI4). Usamos una interfaz

web creada en HTML (y otras
tecnologías) para interactuar con una
web para reserva de billetes de avión.

Cuadro de diálogo (UI5). Incluye un

cuadro de diálogo para introducir
búsquedas.

Menú desplegable (UI6). Para elegir

origen y destino.

Chatbot (UI7). Para despejar dudas de

forma más rápida y en lenguaje natural.

Trabajo de UX

A grandes rasgos, podríamos decir que en el trabajo de UX está relacionado

con el hemisferio izquierdo de nuestro cerebro, el más analí co, aquel que se
encarga de la escritura, la lógica o el lenguaje. Deberemos diseñar las
interacciones que tendrá el usuario con nuestro producto y cuál sería el flujo
de acciones más razonable pantalla a pantalla. Crear proto pos y
‘wireframes’ para mostrar y probar nuestras hipótesis, comprender cómo la
información que mostramos debe ser ordenada y jerarquizada para hacerla
más accesible, inves gar y trazar perfiles de cliente, y pensar en los posibles
escenarios y caminos que un usuario puede recorrer al conocer nuestra marca
y productos.

10
 Trabajo de UI

Por otra parte, el trabajo de UI estaría más unido a las funciones que
comúnmente se le atribuyen al hemisferio derecho, como la visión espacial y
la crea vidad. Entre sus tareas se encuentra imaginar un diseño visual con las
pogra as, colores y es los más adecuados para transmi r el mensaje que
nuestra empresa desea mostrar al mundo, permi endo una experiencia
agradable llena de ma ces que permiten al usuario desarrollar las tareas que
desee completar de la mejor manera.

Algunas diferencias entre UX y UI

Diferencias entre UX y UI
En el ejemplo que vemos en la imagen, la cuchara es la interfaz usada para
‘interactuar’ con el bol de cereales con leche. Debe ser fácil de usar y de
aprender a usarla, y servir para el propósito de traer comida a la boca, y de
mezclar de forma efectiva ambos componentes: leche y cereales.

En la experiencia de usuario habrá una enorme can dad de factores influirán en la

percepción del usuario, incluyendo que su composición evite que se deshagan
completamente con la leche, la temperatura de la leche, que los cereales se
parezcan a marcas de hace años y, por tanto, generen nostalgia en el usuario, o
que en la caja aparezca un personaje diver do o información nutricional que

11
posicione favorable al usuario a consumirlos.

Diferencia entre UX y UI, ejemplo gráfico

12
2.2 Diferencia entre UX y UI, ejemplo
gráfico
La interfaz de usuario, sin duda, puede arruinar una -en teoría- bien diseñada UX:
imaginemos una cuchara demasiado plana que hiciera imposible no derramar parte
de la leche, o tan pequeña que apenas cupieran un par de cereales en cada
bocado.

Pensemos ahora en algo más sofis cado que un bol de cereales: una web de
recomendaciones y reseñas de películas, como IMDb o Filmaffinity (un ejemplo
similar de nacimiento español). a pesar de contar con una más que decente
interfaz gráfica con la que el usuario puede interactuar y, por ejemplo, localizar la
película que busca en segundos, si el catálogo de películas es pobre y solo incluye
aquellas creadas por los grandes estudios, o si no existe un buen algoritmo de
recomendación, la experiencia seguirá siendo deficiente.

13
Como podemos ver en un interesante análisis de Nourdine Diouane en Medium
sobre la UX de la ‘app’ de IMDb. En primer lugar, realiza una sencilla inves gación
de usuario:

Resultados de la pregunta “¿Cuál es tu objetivo principal al usar la ‘app’ de IMDb?

Parece claro que casi la mitad de los encuestados u lizan esta aplicación para
escoger películas basadas en su puntuación, y tal vez reseñas o crí cas. Si a esto
le sumamos que 3 de cada 5 personas que ven cine regularmente tienen la ‘app’ de
IMDb, contamos con una masa crítica significativa.

14
User Flow de IMDb ‘modificada’, y nueva funcionalidad de “Mensajes

¿Y qué es lo que estos usuarios echan en falta en esta aplicación móvil? Pues
una de las crí cas más comunes es no poder chatear o compar r
recomendaciones con amigos.

Tras estas primeras tareas (inves gación sobre la marca, comprender al

usuario), Nourdine modifica la ‘user flow’ de forma que incluye un elemento
de conversación en el diseño, entre otros.

Para el nuevo diseño de las pantallas, u liza un menú horizontal ubicado en la

parte inferior, en lugar del habitual menú de hamburguesa en la esquina superior
izquierda.

Antiguo menú estilo hamburguesa (izq), nuevo menú horizontal (dcha

Esta modificación se basa en dis ntos estudios, como el realizado por Sco Hurff,
que muestran el movimiento natural o no natural de nuestro pulgar en dis ntos
disposi vos. Como vemos, en disposi vos de dis ntos tamaños la zona natural
para mover nuestro pulgar se ex ende mayoritariamente por la esquina inferior
izquierda, siendo menor y más centrada cuanto más grande es la pantalla del
teléfono.

Así, el diseño incluye este nuevo menú ubicado en la zona más natural para el
usuario, disminuyendo el cansancio en el uso con nuado tras la búsqueda de
muchas reseñas de películas.

15
 Zonas de movimiento natural del pulgar en distintos dispositivos (autor: Scott Hurff

Entre otras propuestas, el autor del artículo sugiere la modificación también de la

pantalla más visitada entre todas las que componen la aplicación. Dado que la
motivación principal de los usuarios para utilizar la aplicación es la búsqueda de
películas, la plantilla de esta pantalla debería incorporar los cambios vistos durante
este proceso de UX.

Simplificación de la interfaz

En primer lugar, simplificación de la interfaz mediante la eliminación de

elementos innecesarios como el buscador, links a los actores y actrices, y
buena parte del texto.

Botón add to

En segundo lugar, mayor protagonismo al botón “add to” en lugar del simple
“add to watchlist”, que permite añadirlo a cualquier otra colección, y la
incorporación de la opción “compartir”, que nos permite comenzar una
conversación con otros usuarios y enviarles nuestras recomendaciones sin
salir de la aplicación.

16
17
18
El trabajo completo de Nourdine Diouane merece la pena ser estudiado como
formación extra, así como tantos otros que listaremos en la bibliogra a de este
módulo.

19
2.3 Diferencia entre UX y UI, ejemplo
gráfico
Hagamos en este punto una breve pausa. Como un pequeño ‘test’ al lector, se
plantea la siguiente pregunta tras haber presentado los conceptos fundamentales
solo de manera introductoria. ¿Sería posible encontrar un producto o servicio con
una mala UI pero una buena UX? ¿Y al contrario?

Esta pregunta resulta complicada de contestar en un principio dado que UI y UX

no son conceptos independientes: ya se ha explicado que la interfaz de usuario y
su diseño forman un subconjunto del campo de la experiencia de usuario.

Pensemos en un producto cuya interfaz de usuario sea claramente mejorable,

pero a pesar de todo ofrece una experiencia de usuario fantás ca. Por ejemplo, la
interfaz de la siguiente imagen es conocida como “pantalla verde”, concretamente
estamos viendo la UI de una de las u lidades de Amadeus que permiten a los
trabajadores de una aerolínea acceder al sistema de reservas.

Interfaz ‘pantalla verde’ de Amadeus

A priori, la interfaz no parece especialmente sencilla de usar: una línea de

comandos con letra verde mayúscula sobre fondo negro, con un “command
prompt” (>) a par r del cual escribir e información aparentemente críp ca
formada por números y letras sin sentido… aparente.

En realidad, esta interfaz y tantas otras basadas en línea de comandos (CLI,

“Command-Line Interface”, en inglés) proporcionan a un profesional
especializado una forma rápida y eficiente de acceder a la información que
busca, incluye atajos de teclado que, una vez memorizados, consiguen agilizar
el proceso, y el empo de carga es prác camente inmediato debido a la
carencia de interfaz gráfica, animaciones, o cualquier otro elemento visual. Si
uno observa cómo una persona entrenada en su uso ejecuta tareas a la
velocidad del rayo, uno comienza a darse cuenta de que, en realidad, y a pesar
de que la interfaz de usuario carece de ricos elementos visuales, la
experiencia de usuario sí es más que posi va. De hecho, algunos dirán que no
solo la UX es posi va, sino que también la UI ha sido bien diseñada para
cumplir un propósito: acercar al usuario, un profesional entrenado, a la forma
más eficiente de cumplir con su trabajo.

20
2.4 Ejemplo de Twitter
Vayamos a otro ejemplo que ilustra con detalle Adolfo Ramírez en su post en UX
Design: Twitter y sus ‘threads’ o hilos.

Como prác camente todos los usuarios de Internet saben, Twi er es una red
social que nació con una caracterís ca singular: la limitación de 140 caracteres
(ahora 280). Esta carencia por diseño fue un quebradero de cabeza para muchos
usuarios, que usaban vídeos o imágenes con texto para transmi r sus ideas, o links
a otras webs como Medium -creación del mismo ‘inventor’ de Twi er-, diseñada
como forma de extender ese límite en la longitud del mensaje.

Otros usuarios, deseosos de compar r ideas más elaboradas, optaron por

responder sus propios mensajes, creando una cadena de “tweets”. De hecho, la
propia empresa Twi er decidió incorporar esta funcionalidad (‘threads’) en su UI a
partir de 2017.

Sin embargo, para los escritores de ‘tweets’, la UI es pésima: no está preparada

para escribir cadenas de mensajes, y debido a su falta de flexibilidad es di cil
escribir un texto teniendo que separar las ideas principales en 280 caracteres. Por
otra parte, para los lectores tampoco es trivial: uno puede encontrar en su
‘ meline’ un ‘tweet’ que en realidad es parte de una cadena, sin saberlo, y este
puede ser malinterpretado debido a la falta de contexto. Además, la can dad de
iconos para dar ‘me gusta’ o hacer ‘retweet’, o comentar, añaden complejidad a la
lectura.

“Thread Reader App” es una aplicación que convierte un hilo de Twi er

en un texto perfectamente legible

21
De hecho, existen aplicaciones como “Thread Reader App” para mejorar la lectura
y comprensión de estos hilos. Sin embargo, y a pesar de que la UI de Twi er no
está en absoluto diseñada y pensada para disertaciones largas, estos ‘hilos’ enen
mucho mayor ‘engagement’ que los ‘tweets’ normales.

22
3. Habilidades UX Designer

3.1 Habilidades UX Designer

En caso de que el lector ahora mismo esté interesándose por la labor del UX
Designer que, como Nourdine en el ejemplo que vimos anteriormente de IBMDb,
es capaz de transformar la experiencia de miles de usuarios de las formas más
crea vas, cabría preguntarse: ¿cuáles son las habilidades ‘must have’ de este po
de profesional?

A continuación
Y con base en el ‘post’ que publica el portal especializado UX Planet, comentamos algunas
de las más importantes...

1. Investigación UX

2. Colaboración

3. Wireframing y Prototipado

4. Escritura

23
5. Comunicación Visual

6. Empatía con el usuario

7. Diseño de interacciones

8. Desarrollo

9. Analítica

10.Habilidades de comunicación

24
3.1 Investigación UX
Crear una aplicación móvil o una web no es una tarea que pueda desarrollarse a la
ligera, sin un trabajo previo de pensar e inves gar, inves gar y pensar, y volver al
principio. Tal vez esta sea la razón por la que tantas apps y webs fracasan.

¿Es igual comenzar el proyecto de rediseño de la experiencia de IBMb sin saber

que casi el 50% de los usuarios usan la ‘app’ para elegir la próxima película que
verán hoy, y no para informarse de la cartelera o escribir reseñas? ¿Es igual saber
que la propuesta de valor de Iberia se basa en la puntualidad (aerolínea más
puntual del mundo en 2019), mientras que la de Ryanair lo hace en el precio?

¿Cuál es la visión y misión de mi cliente? ¿Cuáles son sus obje vos, métricas y
KPIs? ¿Cuál es el estado del arte y el nivel de su competencia? Todas estas
preguntas deben ser contestadas mucho antes de escribir una sola línea de código.

Un diseñador UX debe tener la capacidad de inves gar y profundizar en el

usuario, en el cliente, pues esta es la base de todo lo que viene a continuación.

25
3.2
Colaboración
Si ya hemos hablado repe das veces que, en la era de la CX no es posible trabajar
de manera individual -y hemos visto diversas metodologías para ello-, en esta
disciplina es necesario trabajar con desarrolladores, diseñadores, jefes de
proyecto, profesionales de marke ng, analistas de negocio, especialistas de
Software, ejecutivos, personal de negocio, IT, y un larguísimo etcétera.

Apoyarse en estos perfiles, conocer su opinión y experiencia, e integrar todo ese

saber en el proceso de diseño es clave para el éxito del UX Designer.

Este perfil no puede permitirse el lujo de trabajar como un lobo solitario, y sin
duda requiere de ‘soft skills’ para trabajo en equipo: humildad, capacidad de
reconocer los errores propios, cómo criticar el trabajo de los demás de forma
constructiva, o cómo saber ceder tareas en otros miembros del equipo más
especializados serán clave para un profesional que no solo debe ser un as del
pincel sino todo un ‘team player’.

26
3.3 Wireframing y
Prototipado
Para convencer a propios y ajenos de nuestras ideas como UX Designers, es
necesario dominar estas técnicas para mostrar nuestros diseños y sus maravillas a
personas que no necesariamente en enden, sin ver, la grandeza de un buen
diseño.

Un proto po de una app con funcionalidades básicas pero un flujo completado

‘testeable’, permite a los desarrolladores construir la aplicación que has imaginado,
y a los ejecu vos aprobar un proyecto que, de otra manera, tendría a muchos
escépticos.

Un sencillo Wireframe permite comunicar nuestras ideas eficazmente

Un buen proto po será la espina dorsal del producto en fase alfa, permi endo
acelerar la puesta en producción.

27
3.4
Escritura
Está altamente valorada en la industria la habilidad para programar, especialmente
en determinados lenguajes. Y así, muchos diseñadores de UX conocen, al menos,
los lenguajes básicos de Front-End. Sin embargo, existe una habilidad ‘oculta’ que
resulta tan o más importante: una escritura fluida y talentosa hará que el usuario
disfrute al leer cada párrafo de tu app, web o diseño de cualquier clase.

28
Si nos fijamos en la web de Facebook, sin palabras, resultará extraña, ¿verdad?
Hagamos el ejercicio de rellenar cada uno de los cuadros de texto. Seguramente
resulta difícil escoger las palabras más adecuadas: el tono, la forma de dirigirse al
usuario, ser suficientemente claro… ¡es difícil!

29
 Facebook sin palabras

Veamos un ejemplo. Página de reserva de Airbnb, estamos a punto de reservar

una estancia de 276 dólares. ¿Qué pregunta se hace la mayoría de los usuarios
llegados a este punto? Sencillo: ¿van a cobrarme ya si pulso en ese botón rojo?

Página de Reserva de Airbnb

No, no te cobrarán nada. Y, de hecho, eso mismo se reafirma en la línea que

hemos borado a propósito de la anterior imagen.

30
 Página de Reserva de Airbnb, más
abajo

Omi r ambigüedades, usar un lenguaje posi vo, centrar bien las expecta vas
o explicar con claridad qué se encontrará el usuario en el resto de su “viaje”
con nosotros, son algunas de las ventajas de contar con un diseñador con una
brillante escritura.

En el caso contrario, pensemos en esos antiguos mensajes que nos daba Windows
hace años.

No parece la mejor idea explicarle al usuario medio que existe un conflicto de IPs
con otro sistema en la red, ¿verdad?

31
3.5 Comunicación
Visual
Ya sabemos que los humanos somos ‘animales visuales’, como dicen algunos
autores. En otras palabras: aprendemos de manera más rápida y duradera si
aquello que estudiamos con ene imágenes, gráficos, dibujos, etc. Iconos,
mockups, proto pos… bueno, en realidad diseñar una sencilla presentación
Powerpoint para nuestros compañeros puede resultar un verdadero reto en el que
nuestras habilidades de comunicación visual serán puestas a prueba.

Dos formas distintas de hacer presentaciones Powerpoin

Como vemos en estos dos ejemplos, la famosa “muerte por Powerpoint” no se

debe realmente a Powerpoint, sino a pésimos comunicadores: mientras uno opta
por un es lo de comunicación visual, con un es lo reconocible e ilustraciones que
despiertan la curiosidad del usuario; el segundo ejemplo opta por una plan lla
barata y un listado de ‘bullet points’ que nadie en su sano juicio querría leer.

32
3.6 Empatía con el
usuario
Ser capaz de ponerse en la piel del usuario y entender sus problemas,
seguramente es una de las caracterís cas más decisivas en un buen diseñador de
UX -y de muchos otros profesionales-. Es evidente que, si somos capaces de
comprender los problemas reales de los clientes, seremos capaces de diseñar
soluciones más eficaces que si no lo hacemos.

Cuando nos olvidamos de este punto, las soluciones están diseñadas pensando en
nosotros y nuestro contexto, y no en nuestros verdaderos clientes.

33
3.7 Diseño de
interacciones
Una cosa es crear un diseño esté camente agradable, y otra muy diferente es
comprender cómo los usuarios interactuarán con él. Aquí nos metemos realmente
en una sub-disciplina llamada Interac on Design, que estudia esta relación para
crear productos que permitan al usuario completar sus obje vos de la mejor
manera posible, y no necesariamente se limita al mundo web: hablamos de
sonidos, movimientos, espacios, etc.

Interaction Design (https://cdn.lynda.com/course/82822/82822-637162515070833146-

16x9.jpg)

34
3.8 Desarrollo
En un mundo hambriento de perfiles tecnológicos, muchos UX Designers enen o
tendrán la necesidad de sumergirse en el mundo del desarrollo. En realidad, el
estudio Design in Tech de 2017 muestra que un tercio de los diseñadores vienen
del mundo de la ingeniería, por lo que en el fondo no es una habilidad demasiado
ajena para muchos de ellos.

No se trata de ser un auténtico programador, pero sí de conocer las bases de los

lenguajes de programación más usados por los desarrolladores con los que
trabajan habitualmente, de forma que esta colaboración sea mucho más eficaz y
los requisitos sean más fácilmente traducibles a código en la siguiente fase del
proyecto.

35
3.9 Analítica
La creación de una web o una app no termina en el momento de lanzarla a
producción y darla a conocer al público. A par r de aquí, comienza una parte del
trabajo sumamente interesante y es analizar si todas las hipótesis y conclusiones
elaboradas durante la primera fase de diseño son ciertas, y si los usuarios
efectivamente utilizan nuestro diseño de la manera esperada. Esto jamás será así al
100%, por lo que necesitamos un conjunto de herramientas que se engloban en la
palabra “Analytics”.

Mapa de Calor de IBM Tealeaf

Monitorizar métricas, comportamientos, patrones, grabar y reproducir sesiones de

usuario, entender mapas de calor o de scroll y recoger tanta información de
usuario como sea posible será una de las tareas del analista, lo cual será un ‘input’
de muchísimo valor para volver al principio del proceso de diseño, iterar repe das
veces, y conseguir un verdadero proceso de mejora continua.

36
3.10 Habilidades de comunicación
Ya hemos visto anteriormente la importancia de la comunicación visual. En
realidad, una de las caracterís cas de un gran diseñador es su habilidad para
comunicar. Hoy día, las habilidades técnicas como programación o el conocimiento
de muchas herramientas de so ware están valoradas por encima de otras que
resultan, en la práctica, tan o más cruciales.

Pensemos en las grandes presentaciones en eventos y conferencias, en las juntas

de accionistas o en el consejo de dirección: sin duda, hablar con seguridad y
elocuencia, y explicar nuestra toma de decisiones para convencer sobre la
necesidad de un diseño será la diferencia entre ser un buen diseñador y uno
excelente.

Todas y tantas otras capacidades serán clave para un perfil en creciente demanda.
Según el estudio “Onward Search Digital, Crea ve and Marke ng Professionals
Salary Guide” de 2019, entre las profesiones dentro del campo digital, el UX
Designer se sitúa en el segundo lugar.

37
Profesiones más demandadas en el ámbito digital según estudio de 2019

Es fácil comprender este dato, ya que las empresas en los úl mos años han
pasado de ver la experiencia de cliente como un área ‘nice-to-have’ como un
pilar imprescindible de su estrategia de negocio.

Ya en 2017, Adobe entrevistó a 500 líderes de departamentos de UX sobre

sus prioridades. El 87% de las respuestas contestaron que contratar a perfiles
de UX era la prioridad de sus empresas, por delante de diseñadores gráficos y
‘product managers’, tal vez a la par de los desarrolladores software.

En concreto, según el reporte “Prosperity Digital and Technology Salary

Report and Survey” de 2019, señala que los perfiles más buscados son
aquellos con experiencia trabajando con ‘apps’ móviles y dis ntos productos
de So ware como Servicio (SaaS): la combinación entre las habilidades
crea vas y de diseño junto con la experiencia con herramientas y productos
de so ware en la nube es la más buscada. Como dato, según Indeed, en
Estados Unidos la media de sueldo esperada para un UX Designer es de
$96,381, y para un UI Designer de $88,609.

38
4. Usability

4.1
Usabilidad
Otro aspecto que diferenciar en esta introducción es el de Usabilidad, siendo este
una caracterís ca de la UI, por tanto, dentro de la disciplina de User Experience,
pero con el obje vo de evaluar si el sistema (pudiendo este ser una web, una app,
un asistente virtual, etc.) presenta un fácil aprendizaje, eficiencia y sa sfacción en
el uso, y otras tantas facetas que estudiaremos en detalle en este módulo. Una
vez más, observamos que el concepto de UX es más amplio.

La definición formal de estos conceptos, según la ISO 9241, es la

siguiente...

UX

“Las percepciones y respuestas resultantes del uso de un producto, sistema o

servicio.”

Usabilidad

“La facilidad de uso y aprendizaje de un objeto hecho por un humano, como una
herramienta o un dispositivo.”

En resumen,

“Usabilidad” responde a la pregunta: “¿puede el usuario cumplir con su

objetivo de forma eficaz, eficiente y satisfactoria?”.

39
4.2
Ejercicio
Andrea Cantú, en su blog blog.acantu.com plantea un ejercicio muy interesante
que nos permitirá entender estos conceptos mucho mejor.
En la siguiente imagen, vemos la UI de una web móvil de una empresa de venta al
público de cafés, como tantas que conocemos. En este ejemplo, vemos una
sencilla página de producto de un Mocha Frappé, junto con una imagen, el precio,
y un gran botón verde con la palabra “Comprar”.

La pregunta, tras observar

atentamente la imagen,
es... ¿Cómo podríamos mejorar la
usabilidad de esta web?

Seguramente el lector observador

se haya fijado en ciertos detalles
que impiden una correcta
usabilidad. En primer lugar, el
precio parece abusivo: no se ha
especificado que se trata de
dólares mexicanos. No hay opción
para seleccionar la can dad, ni el
tamaño. Y, además, si queremos
volver a la lista de pos de café,
tenemos que volver a empezar
puesto que no existe un botón de
“atrás”.

Todo esto son errores de

usabilidad: no facilitan llegar al
obje vo del usuario (comprar un
café), y en algunos casos pueden
llegar a impedirlo. Veamos cómo
queda esta misma página con
esos errores corregidos.

40
 Tras corregir los problemas de la
página, su usabilidad ha mejorado y es
perfectamente correcta. Sin embargo,
aún hay más. Hemos visto que la
usabilidad es solo uno de los aspectos
de la experiencia de usuario. ¿Y si
quisiéramos mejorar la experiencia de
usuario más allá de la usabilidad?

Recordemos que para responder a

esta pregunta debemos dirigirnos a
un terreno más cercano a lo
emocional, no fijándonos solamente
en lo que el usuario “hace”, sino en lo
que el usuario siente y experimenta.
¿Genera alguna emoción esta página
de producto? Seguramente no mucho
más que el interés que despierta la
imagen a los amantes del Mocha
Frappé.

¿Cómo podríamos mejorar la

UX de esta web?

Para responder a esta pregunta

debemos preguntarnos por qué
cosas nos generan emociones al
pensar en comprar un café, o
simplemente en imaginar un café.
Su textura, su aroma o su intenso
sabor son algunas de las
características.

Además, como clientes de esta

empresa queremos sen rnos
apreciados, y saber que la marca
se preocupa por nosotros y
quiere darnos la mejor
experiencia posible. ¿Cómo
podemos conseguir ambos
objetivos de forma sencilla?

Podemos ver algunos cambios en esta

41
tercera imagen. En primer lugar,
hemos añadido una descripción del
café, listando sus ingredientes y
también su información calórica.

Además, damos la opción de

personalizar el café al gusto del
consumidor eligiendo el po de leche,
y finalmente añadimos un botón para
agregar a favoritos, de forma que el
sistema nos preseleccione nuestros
productos favoritos en la próxima
ocasión, y que pueda recomendarnos
otros que no conocemos en base a
nuestras preferencias.

Un par de cambios muy sencillos,

pero que mejoran sensiblemente la
experiencia del usuario.

¿Qué otros cambios

podríamos incluir?

¿Tal vez un vídeo en el que

veamos la elaboración del café,
información sobre la procedencia
del café, opciones de donación de
cafés (pagas dos, uno para ti y
otro para personas sin recursos),
recogida en tienda sin espera, o
promociones para desayuno o
merienda…?

42
 Proceso de mejora completo

En la siguiente imagen, expuesta en la “nnGroup Conference” en Amsterdam en

2008, el grupo consultor fundado por Don Norman presentaba un modelo de UX
basado en cuatro capas, o círculos concéntricos, que bien puede ayudarnos a
comprender mejor el significado de UX, y también su diferencia con el concepto
de Usabilidad.

43
 Según este esquema, la experiencia de usuario empieza por la u lidad del
producto o servicio en cues ón. “¿Es ú l para mí?, ¿sa sface mis
necesidades?”. Parece obvio, pero no está de más volver a lo más básico al
preguntarnos por la experiencia de nuestro diseño.

¿Ayuda mi producto a resolver problemas reales de personas de este mundo?

¿De qué manera?

Tal vez, como en el “iPhone Cupholder” de la imagen inferior, la inu lidad del
producto sea su mayor error. Puesto que las personas no tenemos tres manos,
este diseño en su uso en casa en absurdo, y en su uso en la ciudad es tan
arriesgado que di cil sería no ver tanto al café como al móvil rados en el suelo
tras solo unos minutos.

iPhone Cupholder

44
Por tanto, se trata de ser capaces de sa sfacer la necesidad del usuario, tener un
propósito que el usuario persigue. Sin embargo, en algunas ocasiones, un producto
falla en este apartado a pesar de sa sfacer una necesidad del usuario. ¿Cómo es
posible? Tal vez el coste sea inasumible, o tal vez el tamaño es inapropiado.

En cualquier caso, sin que un producto sea “ú l” no existe experiencia de usuario,

ya que si este no percibirá valor en el producto y no se llegará a conver r en
usuario.

Pasemos al segundo círculo concéntrico, la Usabilidad.

Como ya habíamos anticipado, Usabilidad y User Experience son dos

conceptos relacionados ya que el primero es un subconjunto del segundo. ¿Es
mi producto “usable”? ¿Es intuitivo y una experiencia sencilla y fluida que me
permita conseguir mi objetivo?

Ese objetivo puede ser tan sencillo como cambiar de canal con un mando a
distancia, o abrir la diminuta cerradura del buzón.

Veamos un ejemplo verdaderamente sencillo y co diano al respecto, y hablemos

concretamente sobre los interruptores de la luz y sus problemas de usabilidad más
comunes.

45
46
¿No es relativamente común ver estos interruptores colocados en los lugares más
inaccesibles? El interruptor de la izquierda exige al usuario diestro hace un
escorzo extraño con el brazo, mientras que el de la derecha requiere de estirar el
brazo más allá del mueble. En ambos casos, estos problemas se convierten en
obstáculos que impiden al usuario llevar a cabo su objetivo (encender o apagar la
luz) de manera eficaz, sencilla y satisfactoria.

Las dos siguientes imágenes muestran otro de sus problemas de usabilidad más
habituales: ¿qué sucede cuando una placa de interruptores sirve para acceder a la
luz de distintos recintos o habitaciones? En la mayoría de los casos, es necesario
aprender de memoria su ubicación en el panel, o incluir pegatinas. ¿No existe una
mejor forma de resolverlo en el diseño inicial?

47
 Problemas de usabilidad en los interruptores de la luz 2 (imagen:
www.ergonomistinthewild.com)

En la siguiente imagen, observamos

una posible solución para este
problema, propuesta por el Dublin
Institute of Design Blog. Usando un
panel vertical en lugar de horizontal,
se sustituyen los clásicos “switches”
por una pantalla táctil con un diseño
de zonas de pulsación que
representan la distribución de las
habitaciones, las cuales estarán
iluminadas o no en función de su
situación real.

Para el lector, se propone el ejercicio

de mejorar aún más este diseño
alternativo para mejorar la usabilidad
del panel de la luz.

A la derechamostramos la posible
solución a los problemas de
usabilidad de los paneles con
múltiples interruptores de la luz.

El tercer círculo concéntrico, Desirability

Volviendo al gráfico anterior, se trata de la “Desirability”, que en español sería

la capacidad de ser deseado. Me gusta su “look and feel”, es atrac vo y, por
muchas razones, quiero tenerlo, acercarme a él, comprarlo. Algunos dicen que
este atributo es lo que distancia a un producto normal, mediocre, de un
excepcional.

48
El iPod no fue el primer reproductor mp3 de la historia, ni mucho menos. Sin
embargo, fue un hito en la historia de los reproductores portá les de música. Y no,
no lo consiguió gracias a su usabilidad. Es cierto que incorporó algunas novedades,
como la interfaz en forma de rueda, pero también es cierto que otros
compe dores también “aprobaban”, con mejor o menor nota los ‘tests’ de u lidad
y usabilidad.

Sin embargo, es en este tercer examen en el que el famoso reproductor de Apple

ganó la batalla. Cuando Steve Jobs lo presentó en sociedad en 2001 en el Apple
Music Event, dijo las siguientes palabras:

“La elección que hacemos [con este nuevo producto] es música. ¿Por qué? Porque
amamos la música, y queremos hacer algo que amemos. Y la música es parte de la vida
de todo el mundo.”

Presentación de Apple iPod en 200

Un producto que se vendió desde un primer momento como en ganador de una

industria llena de compe dores donde no había un rey, un campeón claro. Su
es lo y su diseño hizo tanto o más por el que su batería de hasta 10 horas o su
disco duro, que en aquel momento albergaba hasta 1000 canciones.

Pensemos en un coche. Un Skoda o un BMW cumplen ambos en u lidad, y ambos

aprueban la prueba de la usabilidad. Sin embargo, ¿son igual de atrayentes? Es en
este apartado en el que la distancia es abismal. La sensación de conducción es
diferencia, la experiencia como conductor es simplemente mejor en el segundo
caso.

Cuarto círculo concéntrico, Brand Experience

¿Y hay más? Sí, vayamos ahora al cuarto círculo concéntrico, llamado en inglés
“Brand Experience”, es decir, experiencia de marca. En realidad, este apartado
está fuera del control del UX Designer en su mayor parte, pero su relación con
los anteriores apartados es tal que es imposible separarlo. ¿Consigue el
producto generar una experiencia mejor no solo con el propio producto, sino
con la marca u organización que lo fabrica?

49
¿Consigue mejorar la percepción de Microso usar su sistema opera vo
Windows, de la misma manera que un MacBook mejora la percepción de Apple?

La gran diferencia entre el resto de campos cercanos a la User Experience y Brand

Experience es que este comienza antes de que la persona se convierta en usuario.
El diseño y el marke ng pueden conver r a alguien ‘fan’ de Ferrari o de Tesla sin
haber conducido nunca uno de sus coches. Tal vez, incluso lleven gorras o
camisetas de estos modelos.

Bandera del pirata Barba Negra

El ejemplo sobre Brand Experience es muy interesante ya que expone Nielsen

Norman Group en su blog, ya que trata sobre Edward Teach, también
conocido como el pirata Barba Negra. Entendió la importancia de generar una
impresión, crear una marca. Usaba un largo abrigo azul y un sombrero de
capitán que acentuaban su estatura, plomo humeante bajo su sombrero y
barba para darle una imagen más diabólica y aterradora. Es decir, así creaba su
marca personal. De hecho, se dio cuenta de que esta marca debía ser
reconocida desde lejos, una bandera antecedente de la calavera pirata que
todos conocemos: su propio logo. Los barcos rivales, al observar la bandera,
sabían por su reputación que no debían acercarse, y huían.

La gran diferencia en este terreno con la época del pirata Barba Negra, y también
con los negocios de la primera parte del siglo XX y anteriores, es que la
generación de marca no es algo unidireccional, de marca a consumidor: la
presencia del consumidor en Internet, y concretamente en redes sociales y blogs,
permiten que la creación de la marca no esté limitado a la propia marca, sino sea
creación conjunta de unos y otros. Unido a la mayor información y a la inmensa y
globalizada competencia, hoy en día todo sería más di cil para Barba Negra ya
que todos sabríamos que su humo procedía de un truco pirotécnico.

Uno de los grandes en España es, sin duda, Campofrío. Filial de la mexicana Sigma
Foods, esta empresa de origen burgalés es una de las cinco más importantes del
mundo en su sector.

Sus anuncios navideños son ya una tradición, y generan un sen miento de

nostalgia, unidad y familiaridad inigualables. Su fábrica insignia sufrió un incendio
50
devastador que acabo con el edificio completamente calcinado el 16 de noviembre
de 2014, poco antes de que saliera a la luz su nuevo anuncio navideño.

Noticia sobre el incendio de la fábrica de Campofrío en Burgos, diario

ABC (19/11/2014)

El vídeo creado a raíz de este accidente puede verse en este link

(https://www.youtube.com/watch?v=S1EwZKKjD2A
[https://www.youtube.com/watch?v=S1EwZKKjD2A]), y es un ejemplo de cómo
una empresa construye marca, empatiza con sus empleados y sus consumidores, y
genera ese “algo” intangible que va más allá de la apariencia, del producto y del
precio.

51
5. Errores comunes

5. Errores Comunes

A continuación, vamos a enumerar algunos errores comunes en el campo de la

User Experience, que sin duda servirán para aclarar también dudas al respecto y
variadísimas malinterpretaciones sobre este término.

52
5.1. Usabilidad vs Experiencia de
usuario

Primer error

“Si algo es fácil de usar, entonces su experiencia de usuario será positiva.

Apple diseña todos sus productos de forma que cualquier usuario, con o sin
experiencia previa, sea capaz de comenzar a usar sus productos en segundos, sin
leer manual de instrucciones ni recurrir a tutoriales online.

No es de extrañar que en casi todos sus anuncios se destaque, como en la

siguiente imagen del anuncio de iOS8. Las primeras palabras: fácil de usar. Todo lo
demás viene después. Sin embargo, esto no lo es todo.

Publicidad iOS

Borrar un mensaje en WhatsApp es sumamente sencillo, e intui vo. Un usuario

escribe a la persona incorrecta, o simplemente quiere rec ficar, toca el mensaje
en cues ón y aparece la opción de borrar el mensaje. Sin embargo, en su lugar
aparece lo siguiente:

53
Mensaje borrado en WhatsApp

Es tremendamente sencillo de usar, pero en realidad no has conseguido borrar

el mensaje completamente. En su lugar, aparece otro que avisa al des natario
de que has borrado ese mensaje, lo cual es incluso más sospechoso que haber
leído un mensaje incorrecto.

Otro ejemplo podría ser el cable de carga de iPhone.

54
5.2 Diseño vs
Uso

Segundo error

“Un diseño bonito será mágicamente fácil de usar o intuitivo en su uso.”

Un bonito diseño no siempre conlleva una buena

usabilidad

Estamos viendo en este curso la diferencia entre interfaz de usuario y usabilidad,

ambos campos pertenecientes a la User Experience. Lo más atractivo de un
diseño es, al principio, su apariencia, pero esto no equivale a una buena usabilidad.
Utilidad y usabilidad van delante en los cuatro círculos concéntricos, no lo olvides.

55
5.3 Creer que se comprende al
usuario

Tercer error

“Comprendo perfectamente cómo se siente el usuario.”

Es por esta razón por lo que es tan importante para desarrolladores, diseñadores e
inves gadores UX no asumir en nuestras decisiones que nuestra manera de
entender nuestras interfaces y experiencias será compartida por el usuario.

No eres el usuario, y tus propias reacciones y comportamientos no son pueden

marcar el des no de tus productos. En psicología social, se denomina “efecto de
falso consenso”, y fue definido por primera vez en 1977. Explica que las personas,
de forma natural, tendemos a sobrees mar cuánta gente comparte nuestros
gustos, decisiones o juicios, mientras consideramos extrañas y minoritarias
aquellas que difieren.

No es necesario preocuparse, ni sen rse culpable, ya que es un comportamiento

perfectamente normal en el ser humano. Sin embargo, la clave es ser consciente
de ello, reconocerlo y aprender a superarlo. ¿Cómo? De forma sencilla,
escuchando al usuario y tomando en consideración la diversidad de criterios y
opiniones. Con usuarios reales, por supuesto, no con nuestro equipo ni con
nuestra familia.

56
6. Proceso UX

6. El proceso UX

La mayoría de las empresas de todo el mundo ya han asimilado la importancia de

la User Experience para sus clientes, sus empleados y sus ingresos, invir endo en
profesionales de UX y reenfocando su aproximación al negocio.

Tu trabajo como especialista de UX se podría resumir de la manera más sencilla.

Piensa en todas esas veces en las que las webs, aplicaciones, móviles, ordenados y
otros sistemas no funcionan como esperas, te frustran y te hacen enfadar. Tu
trabajo consiste en que esto no les suceda a tus usuarios.

En realidad, este trabajo es desde luego más complejo, profundo y elaborado, y en

este capítulo vamos a resumir cómo se lleva a cabo paso por paso. Veamos por
tanto cómo funciona el proceso de diseño de UX.

57
UX Vision. Fuente: https://www.interaction-design.org/

Este proceso será necesario para diseñar una experiencia única en una
cafetería de Starbucks, o para ofrecer una experiencia inmejorable en una
aplicación de compra de viajes. Se trata de conocer al usuario, ponerse en sus
zapatos y diseñar nuestros productos y servicios con él en mente. Veamos
cuál es este proceso de creación de User Experience.

Para comprender mejor el proceso, veamos un ejemplo muy concreto.

Pongamos que el lector es ya un diseñador de UX contratado por una
empresa para diseñar su nueva aplicación móvil. ¿Cuál sería tu primer paso?
Veamos cuáles son sus opciones.

58
6.1 Research /
Investigar

Comenzamos con la primera fase del proceso de UX

Al principio, debemos centrarnos en conocer perfectamente dos cosas: tu usuario

y tu marca.

Usuario

Si empezamos por el usuario, Debemos ser capaces de responder la gran

pregunta: ¿a qué problemas se enfrenta? Una vez estos problemas estén
identificados, podríamos comenzar a trabajar en soluciones.

Marca

Sin embargo, aun falta otra parte fundamental, ahora debemos hablar de tu
marca. ¿Cómo se alinea el proyecto en el que trabajas con los objetivos y
valores de tu marca?

Una vez tengamos ambas respuestas, entonces sí podemos pasar a la siguiente

fase. Durante un proyecto en la Universidad Católica de Loja, en Ecuador, se
planteaba el reto de mejorar el ra o de abandono de los estudiantes, que tan solo
en el primer semestre representaba un monstruoso porcentaje cercano al 50%.
Con esta premisa, el equipo comenzó a pensar en soluciones, y eso fue un error.

Algunas de las soluciones propuestas para mejorar ese número estaban

relacionadas con programas de excelencia, incubadora de start-ups, formación
avanzada basada en inteligencia ar ficial y clases especializadas.Sin embargo, esa
universidad no ene como principal misión la búsqueda de la excelencia, sino la
inclusión de aquellos estudiantes en condiciones más adversas, llevando la
59
educación a los lugares rurales, tal vez sin Internet ni ordenador, o a familias con
escasos recursos. De este modo, las soluciones anteriormente propuestas
tuvieron que ser descartadas, y otras muy diferentes fueron muy aceptadas, tales
como la mentorización centrada en comprender la situación de cada estudiante,
las tareas más flexibles y no dependientes de conexión a Internet o acercar la
universidad a aquellas regiones más desfavorecidas.

Importancia de conocer no solo al cliente

Este es un ejemplo que nos muestra la importancia de conocer no solo al
cliente, en este caso los estudiantes, sino los valores, obje vos y misión de la
organización con la que trabajamos. Por eso, en este proceso de UX,
comenzamos entendiendo no solo la marca, sino también su competencia, los
criterios de éxito y métricas de la industria, cuál es la propuesta de valor de la
organización, cuál es el perfil de sus empleados y su cultura de empresa, etc.

Investigación del usuario

En cuanto al usuario, el proceso de inves gación debe incluir una gran

variedad de técnicas, herramientas y metodologías para almacenar datos,
llegar a mejores conclusiones, destapar problemas ocultos y, en defini va,
recoger toda la información valiosa que pueda servirnos más adelante.

Información de usuario

Información de usuario podemos encontrar de po cuan ta va, como la

recopilada por una herramienta de Web Analy cs (Google Analy cs, IBM
Digital Analy cs, Webtrends…) sobre la ac vidad online de los usuarios; y
también puede ser cualitativa, como la que ofrece una entrevista personal con
un cliente.

Investigación de campo

Existen técnicas “de guerrilla” para realizar inves gación de campo,

acercándose a un usuario en su propio contexto y pidiéndole que realice
determinadas acciones o tareas, y otras más elaboradas como el uso de ‘focus
groups’, en los cuales se agrupa a un nuevo de entre 5 y 10 usuarios
moderados por un especialista que realiza una entrevista grupal, o
sencillamente propone temas sobre los cuales los usuarios debaten.

Con cualquiera de estos enfoques, obtenemos conclusiones válidas sobre lo que el

usuario “dice”, pero no sobre lo que el usuario “hace”. En este otro po de

60
validaciones, podemos usar técnicas como “First Click Tes ng”, que observa
dónde un usuario determinado hace click primero para llevar a cabo una tarea
concreta. De una manera similar, los “Usability Tests” someten a un grupo de
usuarios a unas determinadas pruebas, consistentes en realizar tareas en una
interfaz web o de cualquier otro po. Los observadores pueden tomar notas,
comprender sus dificultades y analizar en detalle el comportamiento, frustración o
satisfacción de sus movimientos.

Test (fuente: hotjar.com)

Este segundo po de técnicas no permiten “escuchar” al usuario, sino

directamente observarle en su propia ac vidad y obtener datos obje vos. Hay
quien dice que cuando un usuario habla, puede men r; pero no puede hacerlo
cuando se somete a un ejercicio. También es cierto es estos ejercicios someten al
usuario a una presión innecesaria que influiría en los resultados. En cualquier caso,
todas estas técnicas se complementan para obtener una visión más completa del
cliente.

Proyecto de UX
Volviendo al ejemplo en el que el lector se encuentra en el comienzo de su nuevo

proyecto de UX con una empresa que aún no conoce, deberá entrevistarse en primer

lugar con los responsables (¡o con cualquiera que pueda aportarle información!) para

obtener cierta información:

Documentación
Documentación sobre valores y misión de la empresa,
estrategia y negocio, estructura organizacional,
pronósticos y roadmap, etc.

61
 Investigación
Investigaciones completadas en los años anteriores, ya
sean de mercado o usuario, encuestas, análisis de
competidores, etc.)

Informe anual
Informe anual de la compañía y otra documentación oficial con indicadores y métricas d

Comunicación
Es lo de comunicación y publicidad con ejemplos y
últimas campañas.

Proyectos
Grandes proyectos abordados en los últimos años.

NPS
Información y respuestas de NPS y Voice of
Customer.

Información
Cualquier tipo de información que pueda obtener.

En cualquier caso, con todo ello, el lector deberá ser capaz de iden ficar con
claridad los siguientes puntos. En caso contrario, deberá iterar o buscar nuevas
fuentes de información.

Problemas

Los problemas y prioridades de la empresa.

62
KPI

Sus KPI (Key Performance Indicator), objetivos de negocio y otras métricas.

Target

Su ‘target’ de mercado, aunque más tarde se hará una investigación profunda

sobre el cliente.

Competidores

Cuáles son los competidores, sus puntos fuertes y débiles y su estrategia.

Valores

Los valores de la empresa, su estilo y línea de actuación.

63
6.2. Insight / Comprender

Continuamos con el segundo paso del proceso de UX

Why / What
El objetivo de esta segunda fase es destilar la información recogida durante la
primera fase. Es la fase en la que comprendemos el “WHY? (¿Por qué?)” que
se esconde en el “WHAT? (¿Qué?), como explica Simon Sinek en su popular
charla TED.

Recopila y organiza toda tu información, y comienza a trazar las “User Personas”.

Esta es una herramienta sumamente conocida que debemos usar en esta etapa.
En inglés, este término quiere decir algo similar a arque pos de usuarios
hipoté cos en los cuales nos centraremos en nuestro proceso de UX. Nos ayuda a
empatizar con el usuario, comprendiendo su contexto y necesidades.

De esta manera, evitamos distraernos con usuarios improbables o anecdó cos, y

nos centramos en aquellos con los que la marca quiere tener relación. Cuando
estemos bloqueados, o debamos tomar una decisión, miraremos a nuestras
“Personas” y ellas nos orientarán.

En el siguiente ejemplo vemos a Ivy. A par r de ahora, hablaremos de Ivy, no de

un usuario genérico. Ivy es arquitecta IT corpora va en ABC Tech, y su
preocupación principal es asegurar la resiliencia de su infraestructura tecnológica,
pues le aterra la idea de tener caídas del servicio que puedan afectar al negocio de
manera sensible y verse, también, en peligro dado que es su responsabilidad que el
servicio sea estable.

64
No sabe cómo Bluemix (servicio PaaS en la nube de IBM) puede ayudarle en esta
tarea, pero quiere definir una estrategia cloud para su empresa. Le frustra y
preocupa no solo la resiliencié, sino la seguridad, el rendimiento, y la fiabilidad del
sistema. Su motivación es encontrar la forma más eficiente en cuanto al coste para
dar solución a estos problemas, y quiere conocer las alternativas que el mercado le
ofrece y cómo conectan todas las piezas para conseguir implementar una solución
robusta y eficaz.

User Persona (fuente: IBM.com)

Este es un ejemplo de “user persona”. El usuario ya no es genérico, ahora es Ivy. Y

conocemos a Ivy bastante bien, sabemos lo que quiere y sus preocupaciones.
¿Podemos ahora comenzar a diseñar una solución para ella?

Antes necesitamos conocer cuáles son sus interacciones con la marca, cuál es su
relación con esta organización. Y una estupenda forma de averiguarlo, es usando
los “customer journey maps”. Esta herramienta nos presenta las dis ntas etapas
de un recorrido habitual del cliente con nosotros.

Customer Journey Map (fuente: https://experience.sap.com/skillup/experience-mapping)

65
Volvamos a nuestro ejemplo anterior. La empresa apenas conocida resultó ser…
¡una cadena de restaurantes italianos especializados en pizza!

¿Cuáles son los momentos clave del usuario con esta empresa? Bueno, antes de
comerse la pizza desde luego tiene que hacer un pedido a domicilio, y antes de
esto lo normal será realizar una breve investigación sobre sus opciones a una
distancia cercana.

En estas etapas existen 5 acciones principales:

Buscar pizzas en su ciudad,

Elegir la mejor pizzería

Pedir la pizza

Esperar a la pizza

Obtener la pizza (¡y comérsela, después!)

¿Cómo se sienten nuestras “Personas” en cada una de las fases? Si pensamos

solamente en dos, “hambre” y “estado de humor”, podemos trazar un par de
curvas superpuestas como las que vemos en el gráfico en azul y verde.

En azul, vemos cómo evoluciona su humor en cada una de las fases. El momento
inicial es de excitación, pues ha decidido que hoy va a comer pizza y eso genera
una alegría espontánea. A continuación, su humor empieza a cambiar, pues la
variedad de ofertas y la dificultad para encontrar la mejor opción genera
frustración y estrés.

Una vez elegida, su estado de ánimo vuelve a mejorar y se decide a pedir la pizza.
En ese momento, salvo que su experiencia online sea pésima, estará una vez más
alegre. Luego viene seguramente el momento más odiado, la eterna espera, y
66
cómo pasan los minutos y el repartidor no aparece. Por suerte, finalmente llega a
nuestro domicilio y acabamos con una sonrisa y un excelente humor.

Durante todo este proceso, el nivel de hambre sube es creciente hasta el

momento de, por fin, tener la pizza entre sus manos y poder hincarle el diente.

¿De qué nos ha servido este ejercicio?

Detección de momentos críticos

En primer lugar, para detectar los momentos críticos del journey. El primero,
durante la fase de búsqueda y elección, el usuario no está contento en
absoluto. Esto puede deberse a su falta de práctica en la búsqueda, en la
enorme variedad, o en una experiencia online insuficiente. En cualquier caso,
es necesario explorar en detalle qué sucede exactamente, pues puede ser un
foco claro de “caída del embudo”, es decir, de abandono de clientes
potenciales.

La Espera

En segundo lugar, el usuario no está satisfecho con la espera. Al contrario del

anterior momento de frustración, en el cual parte del problema podría ser
culpa del propio cliente (por su inexperiencia, por su torpeza, o por su mala
conexión a Internet), ahora la culpa es absolutamente de la empresa. Todo el
mundo comprende que la pizza tarda en llegar, habitualmente una media
hora. Ahora bien, ¿es esa media hora la que genera el enfado?, ¿es un posible
retraso?, ¿o tal vez la forma en la que comunicamos la espera, que es confusa
y poco precisa?

Conclusión

En conclusión, tenemos como acciones urgentes investigar en detalle qué

sucede en las tareas 2 y 4, aquellas que generan mayor frustración. En este
ejercicio puede ser sencillo y nada sorprendente, pero imaginemos escenarios
de mayor complejidad, y recordemos el efecto que no somos los clientes, y
que asumir despreocupadamente que para el cliente es obvio lo que resulta
una obviedad para nosotros es del todo desacertado.

Además, se añaden también tres filas adicionales que incluyen los pensamientos
más destacados o ideas comunes entre los usuarios preguntados, algunas ideas
preliminares sobre posibles soluciones, y una pequeña gráfica sobre UX dividida
en usabilidad y disfrute.
67
Con esta herramienta terminada, tendremos una estupenda visión de alto nivel del
proceso completo, y conseguiremos varios objetivos clave en este paso del
proceso

Conseguir una visión de equipo de la situación

Conseguir una visión de equipo de la situación, un punto de partida común al

cual todos podrán referirse en decisiones posteriores y que refleja una base
sobre la cual existe un consenso. Para ello, el equipo completo debe ser
involucrado en su construcción.

Empatizar con el usuario y ponerlo en el centro del proceso de diseño

Empatizar con el usuario y ponerlo en el centro del proceso de diseño. La

información reflejada en el gráfico no puede ser fruto de un debate interno,
sino de los datos y conclusiones obtenidos en la primera fase de investigación.

Romper con los departamentos y divisiones estructurales

Romper con los departamentos y divisiones estructurales. En el proceso de

diseño existen multitud de perfiles involucrados, no solo los propios
diseñadores. Programadores, publicistas, negocio y tantos otros verán
reflejadas sus inquietudes y objetivos si han sido involucrados desde el
principio. De esta manera, será más sencillo fomentar la colaboración sobre
ideas y proyectos que surgen de las mentes de todos.

Enfocar al equipo en la dirección correcta

Enfocar al equipo en la dirección correcta. Como si de un equipo de

piragüismo se tratara, todos deben remar en la misma dirección. Y será
determinada entre todos, de forma que todos conocerán las prioridades. Estas
serán compartidas y no generará conflictos de intereses.

Comenzar a mostrar las primeras oportunidades

Comenzar a mostrar las primeras oportunidades, ideas y posibles soluciones.

No es la fase de ideación, pero comienza a vislumbrarse un camino para la
acción.

68
 Es necesario realizar esta fase con rigor para evitar situaciones cómicas (fuente: desconoci

Por supuesto, tanto la creación de los “User Persona” como del “Customer
Journey Map” pueden ser parte de un taller de Design Thinking, metodología que
se adapta perfectamente a este proceso de UX y de la que hablamos en detalle en
varios capítulos de este curso.

Otra de las técnicas más populares en esa fase es la conocida como “User Stories”.
Muy popular en metodologías ágiles, es un excelente siguiente paso en nuestro
proceso de UX, y podemos incluirlas de forma muy rápida y ágil.

Según la metodología IBM Garage, una “User Story” es “un trozo

de funcionalidad de valor para el usuario”. Estas historias deben
ser cortas y deben contestar tres preguntas

¿Quién es el usuario que se beneficia? Podemos usar una “User Persona”.

¿Qué puede hacer el usuario que no pudiera hacer antes?

¿Cómo beneficia al usuario este cambio?

Pensemos en nuestro ejemplo anterior: ¿cuáles son los objetivos del cliente de

69
 “Laura puede usar la aplicación para pedir una pizza con entrega a domicilio”

“Juan puede conocer en tiempo real el estado de su pizza para saber

exactamente cuándo llegará”

“Paula puede crear una pizza personalizada en la web con ingredientes escogidos por ella pa

Usar post-its en esta fase ayuda en la colaboración, y evita

conversaciones grupales en las que las personas más dominantes
lleven la voz cantante

Hace ya un empo, el ejercicio más habitual era el de diseñar dis ntos casos de
uso. Las historias de usuario son más prác cas y completas: enen una estructura
común, y se centran en un usuario específico.

Como diseñadores, es normal que en este punto queramos ya dar un paso

adelante y comenzar a esbozar lo que nuestra imaginación nos pide a gritos casi
desde la primera reunión con el cliente, y enunciar estas tareas tan simples puede
parecer un paso atrás. Sin embargo, es muy importante ir paso a paso, de otro
modo perder el foco en el cliente y comenzar a trabajar según nuestras
preferencias será una tentación.

Por eso, es importante completar esta ac vidad antes de pasar al diseño visual,
donde a par r de ahora cada componente irá asociado a un elemento de la lista.
Podemos incluso compar r estas tareas con un grupo de clientes y pedirles que
nos ayuden a completar la lista, que nos ayudará en el futuro a no expandir
innecesariamente las funcionalidades de nuestro proyecto, entre otras muchas
ventajas.

70
 A continuación, transformaremos estos objetivos en tareas, y estas
tareas nos servirán para el “user testing” que llevaremos a cabo
unos cuantos pasos más adelante, una vez tengamos un diseño
base.

Imaginemos una sala con usuarios reales dispuestos a ayudarnos con nuestro
diseño. En el primero de los ejemplos de “User Stories”, “Laura puede usar la
aplicación para pedir una pizza con entrega a domicilio”, podríamos diseñar el
siguiente escenario:

“Llevas toda la tarde en la oficina, acabando un proyecto importante con tu equipo.

Son ya las 8, habéis trabajado bien, pero estáis muertos de hambre y decidís que
necesitáis una pequeña recompensa al esfuerzo. Queréis dos pizzas familiares, y como
no sois capaces de decidir los ingredientes, pensáis en pedir pizzas por mitades en la
app que uno de tus amigos te ha recomendado, pero que nunca ni tú ni tus
compañeros habéis usado antes.”

Ejemplo de escenario

Y la siguiente tarea:

“Haz clic en el icono de la aplicación y pide dos pizzas por mitades a la dirección de la
oficina.”

Otra forma de plantear el mismo ejercicio sería con un escenario más sencillo:

“Llevas toda la tarde en la oficina, acabando un proyecto importante con tu equipo.

Son ya las 8, habéis trabajado bien, pero estáis muertos de hambre y decidís que
necesitáis una pequeña recompensa al esfuerzo. Pedís dos pizzas en la aplicación.”

Y la tarea alternativa:

71
“Haz clic en el icono de la aplicación y pide dos pizzas.”

En este segundo ejemplo, no se ha incluido tanto detalle: el usuario no tiene tanta

información, y no es necesario que las pizzas incluyan un diseño por mitades, ni
que sea un pedido a domicilio -tal vez, recogida en tienda o incluso ir a cenar en el
restaurante-. Así, los observadores podrán ver cuáles son las inclinaciones
naturales de los usuarios y ver de qué manera se manejan libremente por la
aplicación.

No existe una forma mejor o peor de llevar a cabo esta dinámica, y depende del
diseñador pensar en los posibles objetivos de un ejercicio de final abierto o
cerrado. En el caso de que conocer las preferencias del usuario sea parte del
ejercicio, en este caso un final abierto será más interesante. Sin embargo, si el foco
de esta actividad es un número limitado de funcionalidades que están bajo
experimentación, será necesario ofrecer algunas pautas a priori.

Hasta ahora, ya hemos hecho un buen trabajo con la información recopilada en la

primera fase del proceso de diseño, hemos trazado 2 o 3 “User Personas”,
tenemos un completo listado de “User Stories”, e incluso hemos comenzado a
pensar en los tests con usuarios.

Nuestro proceso hasta ahora (fuente: https://www.romanpichler.com/)

72
6.3 Conceptualizar / Idear / Iterar

Pasamos a la siguiente fase del proceso de diseño de UX: CONCEPT

Nuestro Diseño
En esta tercera fase, por fin pasamos a la etapa de crear nuestro diseño, a la
cual vamos bien equipados con las herramientas construidas hasta ahora.
Este nuevo paso será itera vo y colabora vo: vamos a construir diseños que
pondremos delante de usuarios, testearemos, y volveremos a modificar y
mejorar. Es importante no comenzar con ningún aspecto visual como colores
corpora vos, iden dad de marca y otros elementos que puedan alejarnos del
objetivo.

Usaremos técnicas como ‘wireframes’, que muestran de forma esquemá ca un

esqueleto del diseño final. Nos ayudan a explorar dis ntas opciones de forma
rápida, comunicar a compañeros de otros equipos nuestras ideas y hacerlas
tangibles sin un gran esfuerzo.

Wireframes en digital y papel

73
Como se muestra en el ejemplo, no solo evita colores e imágenes, sino también la
inclusión del contenido. Es habitual que usemos contenidos genéricos como Lorem
Ipsum para evitar cualquier esfuerzo innecesario. Este texto en la n se cree que
fue escrito en el siglo XVI, y por la dificultad que entraña su comprensión, se usa
comúnmente en pruebas tipográficas y ‘wireframes’, entre otros.

Prueba de dos párrafos de Lorem Ipsum (fuente: es.lipsum.com)

Sin duda, tu proceso comenzará con un cuaderno y un ‘sketch’, la representación

más simple y rápida, aquella que hacemos prác camente en una servilleta de un
bar cuando se nos ocurre una idea que no queremos olvidar.

En esta fase, existen algunos consejos para mejorar los resultados

como son...

Guarda tus ideas

No rompas ni borres tus ideas, guárdalas. Nunca sabes si una idea

anteriormente descartada volverá a tener sen do tras unas cuantas
iteraciones. Además, servirá para dejar constancia de los inicios del proyecto
y poder observar su evolución más tarde.

Mente abierta

Aprecia el ‘feedback’ desde una mente abierta. No necesariamente ‘feedback’

de compañeros del mundo del diseño, también de otros roles. Mantén una
ac tud posi va y afronta las crí cas construc vas de forma aser va.Escribe
aquí tu texto.

74
 Wireframe auto explicativo

Asegúrate de que tu ‘wireframe’ es auto explica vo. La mayoría de las veces

serás tú mismo quien le explique a los demás en qué consiste tu idea, pero
imagina que a mitad de la presentación alguien entra a la sala de reuniones y
echa un vistazo. ¿Sería capaz de entender de qué se trata sin necesidad de
que vuelvas a comenzar la explicación? Si no es así, mejor vuelve a pensarlo.

El siguiente paso, una vez exista consenso de la o las ideas preferidas por el
equipo, es la creación de un proto po. Un proto po se diferencia de un
‘wireframe’ en una caracterís ca fundamental: es interac vo, y permite a un
usuario probarlo, tocarlo, realizar tareas básicas.

Un proto po de un nuevo ‘e-commerce’ no permi rá al usuario registrarse ni

realizar una compra, pero sí navegar por la interfaz, desplazarse por los menús, y
completar algunas tareas sencillas como buscar un producto o añadirlo al carrito.
Existen dis ntas formas de crear proto pos, y algunas herramientas que nos
facilitan la tarea como “proto.io” o “invisionapp.com”.

Interfaz de proto.io para creación de prototipos

Estas webs especializadas presentan una interfaz ‘drag & drop’ (arrastra y suelta)
para el proto pado sin necesidad de saber programar. Creación de pantallas,
menús, vínculos, botones, formularios y otros componentes serán fáciles de
añadir, y podremos exportar nuestros proto pos al propio teléfono para hacer
presentaciones o sesiones de testeo con usuarios.

Según IBM Systems Sciences Ins tute, el coste de solucionar un ‘bug’ en

producción es seis veces superior a solucionarlo en fase de diseño, por lo que
75
verdaderamente merece la pena hacerlo de forma exhaus va. Además, este
proto po puede ser el esqueleto de un diseño futuro en fase beta, y según
Nielsen Norman Group la inves gación muestra que solo cinco usuarios son
suficientes para descubrir el 85% de los errores de usabilidad.

Testeo Chatbot
Pensemos en el testeo de un nuevo ‘chatbot’ para nuestro ya famoso ejemplo de la

pizzería. ¿Qué categorías deberíamos tener en mente a la hora de crear el prototipo? La

respuesta es que sus características mínimas deben ser capaces de responder a las

siguientes siete preguntas, según nos muestra IBM en su blog.

Respuesta
Su capacidad de respuesta. Obviamente, sabemos que
un chatbot es un sistema basado habitualmente en
inteligencia ar ficial ‘estrecha’ que interactúa con un
humano (o con otro chatbot, como podemos ver hacer
a Cleverbot en el siguiente vídeo:
https://www.youtube.com/watch?v=WnzlbyTZsQY
[https://www.youtube.com/watch?
v=WnzlbyTZsQY]). ¿Puede contestar a preguntas de
mayor o menor dificultad, siendo sus respuestas
eficaces y relevantes y adaptadas al contexto?
Nuestro proto po debe incluir no solo respuestas
sumamente sencillas, por lo que su limitación podría ir
en un alcance muy limitado en el área de conocimiento
del chatbot.

Inteligencia
Su inteligencia. Si incluye capacidades de inteligencia
ar ficial, ¿es capaz de comprender el tono o
personalidad del usuario con quien habla y enfa zar
los puntos de conversaciones más relevantes? ¿Es
capaz de hablar distintos idiomas?

Onboarding

76
El ‘onboarding’ de usuario. En los primeros momentos,
el chatbot debe dejar claro al usuario para qué sirve,
cuál es su margen de actuación y cómo puede
ayudarle en sus problemas.

Comprensión
Nivel de comprensión. Pe ciones de dis ntos pos y
maneras, jerga, expresiones, emo conos… ¿será capaz
de entender todo esto sin perderse?

Error
Ges ón del error. ¿Cómo actúa este chatbot en caso
de error?, ¿es capaz en cualquier caso de darle una
posible salida al usuario?, ¿puede recuperarse de un
error?

Navegación
Navegación. ¿Es fácil navegar a través de la
conversación con el chatbot a base de respuestas
preconstruidas, imágenes o links? Es fácil sen rse
desorientado si las respuestas por defecto comienzan
a salir o el tiempo de procesamiento es elevado.

Personalidad
Personalidad. ¿Tiene el chatbot su propia personalidad
y forma de comunicación? ¿Es su tono reconocible y
consigue transmi r su propio es lo ya sea este
desenfadado, formal, cercano, profesional…?

77
 Ejemplos de chatbot (fuente: IBM)

Todos estos son los atributos que se ponen a prueba en la elaboración de un

chatbot, y ya sea nuestro proyecto la creación de un sistema de inteligencia
ar ficial, una web o una aplicación móvil, debemos tener claros los aspectos a
testear antes de construir el prototipo.

Es necesario subrayar que un proto po no es un MVP (Minimum Viable Product),

aunque a veces ambos términos se usen indis ntamente. El proto po es una
representación más sencilla de la idea que sirve para probar hipótesis y test con
usuarios, mientras que el MVP es una primera evolución del producto, explotada
hasta la extenuación en el contexto dominado por las tecnologías en la nube ya
que estas permiten “crear, probar y decidir”, y tal vez “descartar”. Las empresas
acortan sus periodos de decisión invir endo en productos en forma de MVP, pues
esa escasa inversión permite echarse atrás sin problemas si no cumple con las
expectativas.

El proto po no ene una misión tan ambiciosa, y en esta fase la idea aún no ha
sido validada: esta misma herramienta sirve precisamente para comunicar la idea y
recoger ‘feedback’ interno y externo si fuera necesario.

Se han listado dos herramientas interesantes para elaborar proto pos, y existen
muchísimas más. Una de las más interesantes para trabajar en proto pos más
avanzados es Node-RED, una herramienta de código abierto inicialmente creada
por IBM y donada a la comunidad. En su origen, Node-RED se diseñó como
herramienta de pruebas de tecnologías IoT (Internet of Things), pero su éxito hizo
que su uso se extendiera a muchas otras tecnologías.

En este caso, sí es necesario tener unos mínimos conocimientos de programación

Javascript, pero es tan sencillo que un usuario sin experiencia puede atreverse con
tan solo unos cuantos tutoriales. ¡Se anima al lector a intentarlo!

78
 Este po de herramienta se denomina de programación visual. Mediante
cajas, o “nodos”, un usuario puede diseñar un programa completo. Al ser
‘open source’, se pude descargar gra s e instalarlo en un servidor local, o
ejecutarlo en cloud. Por ejemplo, con una cuenta gratuita de IBM Cloud,
cualquier usuario puede lanzar Node-RED en cues ón de unos minutos a
través de un “starter kit” que se explica en dis ntos tutoriales, y comenzar a
crear prototipos “más ricos” y profesionales.

Guía paso a paso para el uso de Node-RED en IBM Cloud (fuente: cloud.ibm.com)

Su funcionamiento es sencillo. Existen nodos de entrada, nodos intermedios y

nodos de salida. Esto representa bien cómo funciona cualquier programa
informá co, que consta de datos que se introducen en el sistema, operaciones y
procesamiento, y finalmente un resultado.

Mediante la unión de los dis ntos nodos, se consigue que la información fluya
“programando” de esta manera lo que sucederá con los datos. Por ejemplo, se
79
podría construir un flujo que permi era proto par una aplicación para
reconocimiento de basuras en contextos urbanos con inteligencia ar ficial. Para
ello, el proto po tendría como obje vo probar el sistema de reconocimiento
visual, mientas que la toma de fotogra as no serían parte de su alcance y se
proporcionaría mediante la selección de una de las imágenes de prueba o
añadiendo la URL en el campo de diálogo.

Flujo Node-RED (creación propia)

En este diagrama se observa que solo con ocho nodos se puede completar esta
tarea. El primero y el úl mo nodo, en amarillo, representan pe ción y respuesta
HTTP, y juntos posibilitan tener una web sobre la que hacer las pruebas. El
siguiente nodo, “Check Image Param” comprobará que existe un parámetro
correcto en el campo de diálogo, para evitar errores.

Página de petición de información en Node-RED (creación propia)

80
 Resultado Web en Node-RED 2 (creación propia)

El nodo “Get Image URL” incluye literalmente el código HTML de la página

construida para el proto po, y el nodo “Extract Img URL” localiza y extrae el literal
de la URL de la imagen. “Payload” es sencillamente un ‘debugger’ que nos permite
reconocer errores del programa en consola, por lo que sería opcional; y “Visual
Recogni on” hace una llamada a la API del servicio cogni vo de Watson para
reconocer imágenes. “Resultado” simplemente tomará el resultado final del
análisis de Watson, y se lo enviará al nodo de respuesta HTTP para su inclusión en
los campos de la web.

Sirva esta simple explicación como un resumen no exhaus vo, y se recomienda al

lector que haya sen do curiosidad que entre en los diversos tutoriales que
existen. Las posibilidades exceden a las básicas de una herramienta de
proto pado, incluyendo inteligencia ar ficial, bases de datos, IoT y muchas
funcionalidades avanzadas para el prototipo que nosotros decidamos.

Por úl mo, además del “sketch”, el “wireframe” y el proto po, existe una
herramienta fundamental más que es necesario explicar, y es el “mockup”. Un
mockup es una representación de alta fidelidad, al contrario que el wireframe, del
diseño final. Además, su obje vo no es explicar el funcionamiento del producto,
sino mostrar su estética, que será muy similar al producto final.

81
 Mockup (fuente: UX Planet)

Sus usos principales son la elección de elementos finales del diseño, como las
pogra as, colores o es los visuales, y también como presentación en rondas de
financiación o en juntas de accionistas. Al contrario que sucedía con los
proto pos, los ‘mockups’ carecen de interacción. Su función es meramente
estética.

En la siguiente tabla compara va podemos apreciar un resumen de las

características de las tres técnicas principales en esta fase de ideación y diseño.

Tabla comparativa

Una vez nuestro diseño ha pasado por todas las fases previamente explicadas,
es decir, se ha generado consenso tras comunicar entre equipos las ideas
principales mediante ‘wireframes’, se ha hecho un completo testeo de usuario
y de viabilidad mediante un proto po, y se ha pulido del diseño final mediante
‘mockups’, estamos listos para la siguiente fase del proceso.

82
6.4 Diseñar la
experiencia

Pasamos a la siguiente fase del proceso de diseño de UX: DESIGN

Es la hora: nuestro diseño está casi listo y es el momento de desarrollarlo y llevarlo

a producción. A par r de ahora se enfrentará al mundo real, y no podemos
celebrar el éxito por mucho empo ya que la iteración será constante. Es
necesario monitorizar este producto, con especial foco en los primeros meses,
para que no muera antes de nacer.

Será necesario un equipo completo de analí ca de comportamiento, de

rendimiento, visualización de sesiones de usuario y de escucha ac va del
‘feedback’ entre otros para poder incorporar datos reales que mejoren y amplíen
nuestra información incluso de la fase 1.

Es el momento de documentar todo el trabajo

realizado y contestar algunas preguntas
fundamentales:

¿Qué partes del proceso de UX

funcionaron bien?, ¿cuáles no tanto?,
¿cuáles no lo hicieron en absoluto?
¿Cuáles fueron las razones?

¿Qué problemas encontramos en la

83
 colaboración entre equipos?

¿Responden los usuarios de forma

positiva a nuestro trabajo? ¿Se
corresponden las asunciones con la
realidad?

¿Hemos conseguido solucionar los

problemas de nuestros usuarios? ¿Hemos
mantenido el foco en ellos durante todo
el proceso?

¿Cómo podríamos mejorar este proceso?

¿Existen otras técnicas que podríamos
incorporar? ¿Qué lecciones aprendidas
hemos recogido para poner en marcha de
ahora en adelante?

¿Cómo podríamos mejorar el producto?

En este módulo, hemos revisado los fundamentos de la User Experience,

contextualizándola en el momento presente y analizando paso a paso las dis ntas
etapas del proceso de diseño.

Es el momento en el que las empresas de todo el mundo han descubierto que la

diferenciación no se basa en el precio y las ofertas, ni siquiera en la tecnología. La
diferenciación se basa en la experiencia, y es hacia donde la estrategia de las
empresas que sobrevivirán en los próximos años se dirigirá.

84
 “El diseño no es solo cómo un producto luce, sino cómo un
producto funciona.”

Steve Jobs

El diseño es el propio producto, es su esencia de la razón de ser. A con nuación,

en el próximo módulo, abordaremos en detalle el Diseño de la Interfaz de Usuario,
también conocida como UI Design. ¿Podemos sa sfacer las necesidades de
nuestros usuarios mediante colores, pogra as, y elementos visuales? ¿Hay algo
más allá? Lo veremos en este cuarto módulo.

85
Actividades
Actividad

Elige "verdadero" o "falso" según cada caso.

La Usabilidad es una característica de la UI, por tanto, dentro de la

disciplina de User Experience.

Verdadero Falso
Si algo es fácil de usar, entonces su experiencia de usuario será
positiva.

Verdadero Falso
Un diseño bonito será mágicamente fácil de usar o intuitivo en su uso.

Verdadero Falso

Actividades

Relaciona los conceptos de ambas columnas.

El trabajo de UI estaría el hemisferio izquierdo

más unido a... de nuestro cerebro, el
más analítico, aquel que
se encarga de la
La simplificación de la
escritura, la lógica o el
interfaz se consigue
lenguaje.
mediante...

las funciones que

El trabajo de UX está
comúnmente se le
relacionado con...
atribuyen al hemisferio
derecho, como la visión
espacial y la creatividad.

86
 la eliminación de
elementos innecesarios
como el buscador, links
a los actores y actrices,
y buena parte del texto.

Actividad

¿Qué es la User Interface?

La UI es el medio con el que un usuario interactúa con un

sistema, un producto o un servicio.

Un buen algortimo.

Crear prototipos y wireframes para mostrar y probar

nuestras hipótesis.

87
7. Fuentes y recursos

Fuentes y recursos

https://www.nngroup.com/articles/definition-user-experience/
https://medium.muz.li/imdb-redesigned-ux-ui-167a59c27642
https://www.scotthurff.com/
https://www.onwardsearch.com/wp-
content/uploads/2019/01/Onward_Search_Salary_Guide_2019.pdf
https://techcrunch.com/2017/12/12/twitter-officially-launches-threads-a-new-
feature-for-easily-writing-tweetstorms/
https://buffer.com/resources/twitter-thread-experiment
https://blog.acantu.com/
https://rossfitzblog.wordpress.com
https://www.ergonomistinthewild.com
https://www.nngroup.com/articles/brand-experience-ux/
https://www.interaction-design.org/courses
https://experience.sap.com/skillup/experience-mapping
https://www.ibm.com/garage
https://www.ibm.com/blogs/nordic-msp/prototyping/
https://developer.ibm.com/components/node-red/tutorials/how-to-create-a-
node-red-starter-application/

88
Fin de módulo

¡Enhorabuena!

Has finalizado el módulo.

89