User Experience

Design

1
 User Experience Design
Ayuda

Ayuda en la navegación

Objetivos

Objetivos

1. Introducción. User Experience

1.1. Introducción User Experience

1.2. Requisitos de una UX ejemplar

2. User Interface. Diferencias con User Experience

2.1. Diferencias User Interface/User Experience

2.2. Diferencia entre UX y UI, ejemplo gráfico

2.2. Combinación UI-UX

2.3. El ejemplo de Twitter

3. Habilidades UX Designer

3.1. Habilidades UX Designer

3.2. Investigación UX

3.3. Colaboración

3.4. Wireframing y Prototipado

3.5. Escritura

3.6. Comunicación Visual

3.7. Empatía con el usuario

3.8. Diseño de interacciones

3.9. Desarrollo

3.10. Analítica

3.11. Habilidades de comunicación

4. Usability

4.1. Usability

4.2. Ejercicio para entender

5. Errores comunes

5.1. Usabilidad vs Experiencia de usuario

2
 5.2. Diseño bonito vs usabilidad e intuición

5.3. Creer que se comprende al usuario

6. El proceso de UX

6.1. El proceso de UX

6.2. Paso 1 – Research / Investigar

6.3. Paso 2 – Insight / Comprender

6.4. Paso 3 – Conceptualizar / Idear / Iterar

6.5. Paso 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
Objetivos

Objetivos

Introducción al diseño centrado en el usuario y el proceso por el cual diseñamos

productos y servicios con nuevas metodologías que nos permiten poner al cliente
en el centro. Este módulo permitirá comprender el proceso de creación de User
Experience, desde la investigación de usuarios hasta el diseño y prototipado.
Como parte de la experiencia de usuario, también abordaremos la usabilidad con
multitud de ejemplos reales. Finalmente, el alumno aprenderá a utilizar tres
herramientas de muchísima utilidad en el diseño de prototipos: [Link], Invision y
NodeRED.

5
1. Introducción. User Experience

1.1. Introducción User Experience

Hace años leí un estudio sobre los factores que generaban mejor ratio de
conversión en una tienda física, esto es, incrementar el número de visitantes que
llevaban a cabo la compra de uno o más artículos del número total de los mismos.
Entre complejos razonamientos basados en neurociencia, o asombrosos cálculos y
estimaciones 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 consistí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 significativamente el número de prendas que los
visitantes a la tienda se prueban y, consecuentemente, la ratio de conversión.

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
Estantería de ropa
finalmente compramos. Todo ello formó parte de
perfectamente ordenada
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 esta 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

6
comúnmente utilizado 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 cualquiera de los canales directos o indirectos de
trato con él.

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.

7
1.2. Requisitos de una UX ejemplar

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

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

Es necesario distinguir también en este punto otros 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, un componente entre
los muchos que engloba la ‘experiencia de usuario completa’.

8
2. User Interface. Diferencias con 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 destino, e incluso un
chatbot (UI7) para despejar dudas de forma más rápida y en lenguaje natural.

El trabajo de UX está relacionado con el hemisferio izquierdo de

nuestro cerebro, el más analítico, 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 prototipos 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, investigar y trazar perfiles de cliente,
y pensar en los posibles escenarios y caminos que un usuario puede recorrer
al conocer nuestra marca y productos.

Por otra parte,

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

Entre sus tareas se encuentra imaginar un diseño visual con las tipografías,
colores y estilos más adecuados para transmitir el mensaje que nuestra
empresa desea mostrar al mundo, permitiendo una experiencia agradable llena
de matices que permiten al usuario desarrollar las tareas que desee completar
de la mejor manera.

Algunas diferencias entre UX y UI

En el ejemplo que vemos en la imagen siguiente, 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 cantidad 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 divertido o información nutricional que
posicione favorable al usuario a consumirlos.

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

“Análisis app IMDb”

Pensemos ahora en algo más sofisticado 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.

12
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 investigación
de usuario:

Resultados a la pregunta: "¿Cuál es tu objetivo principal al usar la app de IMDb?"

Parece claro que casi la mitad de los

encuestados utilizan esta aplicación para
escoger películas basadas en su
puntuación, y tal vez reseñas o críticas.
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.

¿Y qué es lo que estos usuarios echan en

falta en esta aplicación móvil? Pues una
de las críticas más comunes es no poder
chatear o compartir recomendaciones
con amigos.

Tras estas primeras tareas (investigación sobre la marca, comprender al usuario),

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

User Flow de IMDb modificada con nueva funcionalidad de Mensajes

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

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

Antiguo menú estilo hamburguesa (izda.) y nuevo menú horizontal (dcha.)

Esta modificación se basa en distintos estudios, como el realizado por Scott Hurff,
que muestran el movimiento natural o no natural de nuestro pulgar en distintos
dispositivos. Como vemos, en dispositivos de distintos tamaños la zona natural
para mover nuestro pulgar se extiende 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 continuado tras la búsqueda de
muchas reseñas de películas.

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

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.

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.

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

18
2.2. Combinación UI-UX

¿Sería posible encontrar un producto o servicio con una mala UI, pero una buena
UX? ¿Y al contrario?

Hagamos en este punto una breve pausa. Como un pequeño ‘test’ al lector, se
plantea esta pregunta tras haber presentado los conceptos fundamentales solo de
manera introductoria.

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ástica. Por ejemplo, la
interfaz de la siguiente imagen es conocida como “pantalla verde”, concretamente
estamos viendo la UI de una de las utilidades de Amadeus que permiten a los
trabajadores de una aerolínea acceder al sistema de reservas.

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 partir del cual escribir e información aparentemente críptica 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
Interfaz "pantalla verde" de
que busca, incluye atajos de teclado que, una vez
Amadeus
memorizados, consiguen agilizar el proceso, y el
tiempo de carga es prácticamente 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 positiva. De hecho, algunos dirán
que no solo la UX es positiva, 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.

19
2.3. El ejemplo de Twitter

20
21
22
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ácticamente todos los usuarios de Internet saben, Twitter es una red
social que nació con una característica 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 transmitir sus ideas, o links
a otras webs como Medium -creación del mismo ‘inventor’ de Twitter-, diseñada
como forma de extender ese límite en la longitud del mensaje.

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

responder sus propios mensajes, creando una cadena de “tweets”. De hecho, la
propia empresa Twitter 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 difí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 ‘timeline’ 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 cantidad 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 Twitter en un

texto perfectamente legible

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 Twitter no
está en absoluto diseñada y pensada para disertaciones largas, estos ‘hilos’ tienen
mucho mayor ‘engagement’ que los ‘tweets’ normales.

23
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
creativas, cabría preguntarse: ¿Cuáles son las habilidades ‘must have’ de este tipo
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
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.2. 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 investigar, investigar 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 objetivos, 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 investigar y profundizar en el

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

25
3.3. Colaboración

Si ya hemos hablado repetidas 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 marketing, 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.4. 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 entienden, sin ver, la grandeza de un buen
diseño.

Un prototipo 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 ejecutivos aprobar un proyecto que, de otra manera, tendría a muchos
escépticos.

Un sencillo Wireframe permite comunicar nuestras ideas

eficazmente

Además, un buen prototipo será la espina dorsal del producto en fase alfa,
permitiendo acelerar la puesta en producción.

27
3.5. 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 diseño de cualquier clase.

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!

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?

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

hemos borrado a propósito de la imagen de la izquierda que ahora podéis ver aquí
abajo.

28
Página de reserva de
Omitir ambigüedades, usar un lenguaje positivo, centrar bien
Airbnb
las expectativas 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?

Mensaje de error de Windows

29
3.6. 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 contiene imágenes, gráficos, dibujos, etc. Iconos,
mockups, prototipos..., 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. A
continuación dos ejemplos de distintas formas de hacer Powerpoints.

30
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 estilo de comunicación visual, con un estilo reconocible e ilustraciones que
despiertan la curiosidad del usuario; el segundo ejemplo opta por una plantilla
barata y un listado de ‘bullet points’ que nadie en su sano juicio querría leer.

31
3.7. Empatía con el usuario

Ser capaz de ponerse en la piel del usuario y entender sus problemas,

seguramente es una de las características 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.

32
3.8. Diseño de interacciones

Una cosa es crear un diseño estéticamente agradable, y otra muy diferente es

comprender cómo los usuarios interactuarán con él. Aquí nos metemos realmente
en una subdisciplina llamada Interaction Design, que estudia esta relación para
crear productos que permitan al usuario completar sus objetivos de la mejor
manera posible, y no necesariamente se limita al mundo web: hablamos de
sonidos, movimientos, espacios, etc.

Interaction Design
([Link]
[Link])

33
3.9. Desarrollo

En un mundo hambriento de perfiles tecnológicos, muchos UX Designers tienen 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.

34
3.10. 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 partir 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 repetidas
veces, y conseguir un verdadero proceso de mejora continua.

35
3.11. Habilidades de comunicación

Ya hemos visto anteriormente la importancia de la comunicación visual. En

realidad, una de las características 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 software 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, Creative and Marketing Professionals
Salary Guide” de 2019, entre las profesiones dentro del campo digital, el UX
Designer se sitúa en el segundo lugar.

36
 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 últimos 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 distintos productos de Software como
Servicio (SaaS): la combinación entre las habilidades creativas y de diseño junto
con la experiencia con herramientas y productos de software 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.

37
4. Usability

4.1. Usability

Otro aspecto que diferenciar en esta introducción es el de Usabilidad, siendo este

una característica de la UI, por tanto, dentro de la disciplina de User Experience,
pero con el objetivo de evaluar si el sistema (pudiendo este ser una web, una app,
un asistente virtual, etc.) presenta un fácil aprendizaje, eficiencia y satisfacció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:

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

Definición de UX

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

Definición de Usabilidad

38
En resumen, “Usabilidad” responde a la pregunta:

“¿Puede el usuario cumplir con su objetivo de forma eficaz, eficiente y

satisfactoria?”

39
4.2. Ejercicio para entender

Andrea Cantú, en su blog [Link] 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:

Pregunta 1 - ¿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
cantidad, ni el tamaño. Y, además, si queremos volver a la lista
de tipos 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 objetivo 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.

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

Pregunta 2 - ¿Cómo podríamos mejorar la UX de esta web?

Para responder a esta pregunta debemos preguntarnos por qué cosas nos generan
40
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 sentirnos 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 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 tipo 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...?

Proceso de mejora al 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.

41
 Fuente: User experience 2008 nnGroup Conference
Amsterdam

Según este esquema, la experiencia de usuario empieza por la utilidad del

producto o servicio en cuestión. “¿Es útil para mí?, ¿satisface 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?

42
Tal vez, como en el “iPhone Cupholder” de la imagen superior, la inutilidad 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 difícil sería no ver tanto al café como al móvil tirados en el suelo
tras solo unos minutos.

Por tanto, se trata de ser capaces de satisfacer 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 satisfacer 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 “útil” no existe experiencia de usuario,
ya que si este no percibirá valor en el producto y no se llegará a convertir 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?

43
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 cotidiano al respecto, y hablemos

concretamente sobre los interruptores de la luz y sus problemas de usabilidad más
comunes. (Imágenes por: [Link])

44
¿No es relativamente común ver estos interruptores colocados en los lugares más
inaccesibles? El interruptor de la izquierda exige al usuario diestro hacer 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 (abajo) 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?

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

47
 Posible solución a los problemas de usabilidad de los paneles
con múltiples interruptores de luz

El tercer círculo concéntrico, 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 atractivo 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 uno excepcional.

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átiles 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
competidores también “aprobaban”, con mejor o menor nota los test de utilidad 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.”

48
 Presentación de Apple iPod en 2001

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

industria llena de competidores donde no había un rey, un campeón claro. Su
estilo 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 1.000 canciones.

Pensemos en un coche. Un Skoda o un BMW cumplen ambos en utilidad, 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.

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

¿Consigue mejorar la percepción de Microsoft usar su sistema operativo

Windows, de la misma manera que un MacBook mejora la percepción de Apple?

La gran diferencia entre el resto de los 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 marketing pueden convertir 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.

Es muy interesante el ejemplo sobre Brand Experience 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

49
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
Bandera del pirata Barba
la propia marca, sino sea creación conjunta de unos y
Negra
otros. Unido a la mayor información y a la inmensa y
globalizada competencia, hoy en día todo sería más
difí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 sentimiento de

nostalgia, unidad y familiaridad inigualables. Su fábrica insignia sufrió un incendio
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.

El vídeo creado a raíz de este accidente

puede verse en este link:
[Link] 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.
Noticia sobre el incendio de la fábrica de
Campofrío en Burgos, diario ABC
(19/11/2014)

50
5. Errores comunes

5.1. Usabilidad vs Experiencia de usuario

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.

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 8

Borrar un mensaje en WhatsApp es sumamente

sencillo, e intuitivo. Un usuario escribe a la persona
incorrecta, o simplemente quiere rectificar, toca el
mensaje en cuestión y aparece la opción de borrar el
mensaje. Sin embargo, en su lugar aparece lo siguiente
que podemos ver en la imagen al margen derecho. Mensaje borrado de
51
Es tremendamente sencillo de usar, pero en realidad no Whatsapp
has conseguido borrar el mensaje completamente. En
su lugar, aparece otro que avisa al destinatario 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 del iPhone

52
5.2. Diseño bonito vs usabilidad e intuición
Segundo error: “Un diseño bonito será mágicamente
fácil de usar o intuitivo en su uso.”

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. Un bonito diseño no siempre
conlleva una buena usabilidad

53
5.3. Creer que se comprende al usuario

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

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

marcar el destino 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 sobreestimar cuánta gente comparte nuestros
gustos, decisiones o juicios, mientras consideramos extrañas y minoritarias
aquellas que difieren.

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

No es necesario preocuparse ni sentirse 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.

54
6. El proceso de UX

6.1. El proceso de 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, invirtiendo 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.

UX Vision (fuente: [Link]

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.

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

56
6.2. Paso 1 – Research / Investigar

Primera fase del proceso UX: Research

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

y tu marca. 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. Sin embargo, aún
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 la ratio 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 artificial y clases especializadas.

Sin embargo, esa universidad no tiene como principal misión la búsqueda de la

excelencia, sino la inclusión de aquellos estudiantes en condiciones más adversas,
llevando la 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.

Este es un ejemplo que nos muestra la importancia de conocer no solo al cliente,

en este caso los estudiantes, sino los valores, objetivos 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
57
empleados y su cultura de empresa, etc.

En cuanto al usuario, el proceso de investigación debe ser incluye una gran

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

Información de usuario podemos encontrar de tipo cuantitativa, como la

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

Existen técnicas “de guerrilla” para realizar investigació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
tipo de validaciones, podemos usar técnicas como
“First Click Testing”, que observa dónde un usuario
determinado hace click primero para llevar a cabo una
tarea concreta. De una manera similar, los “Usability
Usability Test (fuente:
Tests” someten a un grupo de usuarios a unas
determinadas pruebas, consistentes en realizar tareas [Link])
en una interfaz web o de cualquier otro tipo. Los
observadores pueden tomar notas, comprender sus
dificultades y analizar en detalle el comportamiento, frustración o satisfacción de
sus movimientos.

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

directamente observarle en su propia actividad y obtener datos objetivos. Hay
quien dice que cuando un usuario habla, puede mentir; 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.

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 sobre valores y misión de la empresa, estrategia y negocio,

58
 estructura organizacional, pronósticos y roadmap, etc.
Investigaciones completadas en los años anteriores, ya sean de mercado o
usuario, encuestas, análisis de competidores, etc.)
Informe anual de la compañía y otra documentación oficial con indicadores
y métricas de negocio.
Estilo de comunicación y publicidad con ejemplos y últimas campañas.
Grandes proyectos abordados en los últimos años.
Información y respuestas de NPS y Voice of Customer.
Cualquier tipo de información que pueda obtener.

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

Los problemas y prioridades de la empresa.

Sus KPI (Key Performance Indicator), objetivos de negocio y otras métricas.
Su ‘target’ de mercado, aunque más tarde se hará una investigación
profunda sobre el cliente.
Cuáles son los competidores, sus puntos fuertes y débiles y su estrategia.
Los valores de la empresa, su estilo y línea de actuación.

59
6.3. Paso 2 – Insight / Comprender

Segundo paso del proceso UX: Insight

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 arquetipos de usuarios
hipotéticos 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óticos, 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 partir de ahora, hablaremos de Ivy, no de

un usuario genérico. Ivy es arquitecta IT corporativa 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.

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.

60
 User Persona (fuente [Link])

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 distintas etapas
de un recorrido habitual del cliente con nosotros.

Customer Journey Map (fuente: [Link]

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

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

1. Buscar pizzas en su ciudad,

2. elegir la mejor pizzería,
3. pedir la pizza,
4. esperar a la pizza y
5. 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
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?

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.

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?
62
En conclusión, tenemos como acciones urgentes investigar en detalle qué sucede
en las tareas 1 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.

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

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

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

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

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.

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

Es necesario realizar el trabajo en equipo con rigor para evitar situaciones cómicas (fuente:
desconocida)

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:

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

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

64
 3. ¿Cómo beneficia al usuario este cambio?

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

“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 para evitar sus alergias.”

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

conversaciones grupale en las que las personas dominantes lleven la
voz cantante

Hace ya un tiempo, el ejercicio más habitual era el de diseñar distintos casos de

uso. Las historias de usuario son más prácticas y completas: tienen 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 actividad antes de pasar al diseño visual,
donde a partir de ahora cada componente irá asociado a un elemento de la lista.
Podemos incluso compartir 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.

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.

65
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: Ejemplo de 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.”

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:

“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 test con usuarios.

66
Nuestro proceso hasta ahora (fuente:
[Link]

67
6.4. Paso 3 – Conceptualizar / Idear / Iterar

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

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á iterativo y colaborativo: 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 corporativos,
identidad de marca y otros elementos que puedan alejarnos del objetivo.

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

esqueleto del diseño final. Nos ayudan a explorar distintas 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 en papel

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

68
 Prueba de dos párrafos de Lorem Ipsum (fuene: [Link])

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

más simple y rápida, aquella que hacemos prácticamente 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:

1 – No rompas ni borres tus ideas, guárdalas.

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

2 – 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 actitud positiva y afronta las críticas constructivas
de forma asertiva.

3 – Asegúrate de que tu ‘wireframe’ es auto explicativo.

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 prototipo. Un prototipo se diferencia de un
‘wireframe’ en una característica fundamental: es interactivo, y permite a un
usuario probarlo, tocarlo, realizar tareas básicas.

Un prototipo de un nuevo ‘eCommerce’ no permitirá al usuario registrarse ni

realizar una compra, pero sí navegar por la interfaz, desplazarse por los menús, y
69
completar algunas tareas sencillas como buscar un producto o añadirlo al carrito.
Existen distintas formas de crear prototipos, y algunas herramientas que nos
facilitan la tarea como “[Link]” o “[Link]”.

Interfaz de [Link] para creación de prototipos

Estas webs especializadas presentan una interfaz ‘drag & drop’ (arrastra y suelta)
para el prototipado 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 prototipos al propio teléfono para hacer
presentaciones o sesiones de testeo con usuarios.

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

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

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.

70
Su capacidad de respuesta.

Obviamente, sabemos que un chatbot es un sistema basado habitualmente en

inteligencia artificial ‘estrecha’ que interactúa con un humano (o con otro
chatbot, como podemos ver hacer a Cleverbot en el siguiente vídeo:
[Link] ¿Puede contestar a
preguntas de mayor o menor dificultad, siendo sus respuestas eficaces y
relevantes y adaptadas al contexto? Nuestro prototipo 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.

Su inteligencia.

Si incluye capacidades de inteligencia artificial, ¿es capaz de comprender el

tono o personalidad del usuario con quien habla y enfatizar los puntos de
conversaciones más relevantes? ¿Es capaz de hablar distintos idiomas?

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.

Nivel de comprensión.

Peticiones de distintos tipos y maneras, jerga, expresiones, emoticonos... ¿será

capaz de entender todo esto sin perderse?

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

¿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 sentirse desorientado si
las respuestas por defecto comienzan a salir o el tiempo de procesamiento es
elevado.

71
Personalidad.

¿Tiene el chatbot su propia personalidad y forma de comunicación? ¿Es su

tono reconocible y consigue transmitir su propio estilo ya sea este
desenfadado, formal, cercano, profesional...?

72
73
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
artificial, 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 prototipo no es un MVP (Minimum Viable Product),

aunque a veces ambos términos se usen indistintamente. El prototipo 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 invirtiendo en productos en forma de MVP, pues
esa escasa inversión permite echarse atrás sin problemas si no cumple con las
expectativas.

El prototipo no tiene 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 prototipos, y existen

muchísimas más. Una de las más interesantes para trabajar en prototipos 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!

74
 Interfaz de Node-RED ([Link])

Este tipo 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 gratis 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 cuestión de unos minutos a través de un “starter kit” que se explica
en distintos tutoriales, y comenzar a crear prototipos “más ricos” y profesionales.

Su funcionamiento es sencillo. Existen

nodos de entrada, nodos intermedios y
nodos de salida. Esto representa bien
cómo funciona cualquier programa
informático, que consta de datos que se
introducen en el sistema, operaciones y
procesamiento, y finalmente un
Guía paso a paso para el uso de Node-RED en
resultado.
IBM Cloud (fuente: [Link])
Mediante la unión de los distintos nodos,
se consigue que la información fluya
“programando” de esta manera lo que sucederá con los datos. Por ejemplo, se
podría construir un flujo que permitiera prototipar una aplicación para
reconocimiento de basuras en contextos urbanos con inteligencia artificial. Para
ello, el prototipo tendría como objetivo probar el sistema de reconocimiento
visual, mientas que la toma de fotografí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.

75
 Flujo Node_RED

En este diagrama se observa que solo con ocho nodos se puede completar esta
tarea. El primero y el último nodo, en amarillo, representan petició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

Resultado web en Node-RED

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

construida para el prototipo, 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
Recognition” hace una llamada a la API del servicio cognitivo 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.

76
Sirva esta simple explicación como un resumen no exhaustivo, y se recomienda al
lector que haya sentido curiosidad que entre en los diversos tutoriales que
existen. Las posibilidades exceden a las básicas de una herramienta de
prototipado, incluyendo inteligencia artificial, bases de datos, IoT y muchas
funcionalidades avanzadas para el prototipo que nosotros decidamos.

Por último, además del “sketch”, el

“wireframe” y el prototipo, 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 objetivo no
es explicar el funcionamiento del
producto, sino mostrar su estética, que
será muy similar al producto final.

Mockup (fuente: UX Planet)

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

En la siguiente tabla comparativa podemos apreciar un resumen de las

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

Fidelity Cost Use General traits

Sketchy, black, white &

Low Documentation, quick
Wireframe $ grey representation of the
fidelity communication
interface

Middle User testing, reusable

Prototype to high $$$ backbone or the Interactive
fidelity interface

Middle Gathering feedback and

Mockup to high $$ getting buy-in from Static visualization
fidelity stakeholders

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 prototipo, y se ha pulido del diseño final mediante ‘mockups’,
estamos listos para la siguiente fase del proceso.

77
6.5. Paso 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 partir de ahora se enfrentará al mundo real, y no podemos
celebrar el éxito por mucho tiempo 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ítica de comportamiento, de

rendimiento, visualización de sesiones de usuario y de escucha activa 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:

1. ¿Qué partes del proceso de UX funcionaron bien?, ¿cuáles no tanto?,

¿cuáles no lo hicieron en absoluto? ¿Cuáles fueron las razones?
2. ¿Qué problemas encontramos en la colaboración entre equipos?
3. ¿Responden los usuarios de forma positiva a nuestro trabajo? ¿Se
corresponden las asunciones con la realidad?
4. ¿Hemos conseguido solucionar los problemas de nuestros usuarios?
¿Hemos mantenido el foco en ellos durante todo el proceso?
5. ¿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?
6. ¿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 distintas
etapas del proceso de diseño.

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

“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 continuació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 satisfacer las necesidades de
nuestros usuarios mediante colores, tipografías, y elementos visuales? ¿Hay algo
más allá? Lo veremos en este cuarto módulo.

79
Actividades

Actividad

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

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

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

Verdadero Falso
La Usabilidad es una característica de la UI, por tanto, dentro de la
disciplina de User Experience.

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.

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

Un buen algortimo.

Crear prototipos y wireframes para mostrar y probar

nuestras hipótesis.

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

sistema, un producto o un servicio.

81
7. Fuentes y recursos

Fuentes y recursos

[Link]

[Link]

[Link]

[Link]
content/uploads/2019/01/Onward_Search_Salary_Guide_2019.pdf

[Link]
feature-for-easily-writing-tweetstorms/

[Link]

[Link]

[Link]

[Link]

[Link]

[Link]
[Link]

[Link]

[Link]

[Link]
node-red-starter-application/

82
Fin de módulo

¡Enhorabuena!

Has finalizado el módulo.

83