Itinerario 1: Modelado Del Usuario: Guía Didáctica

Itinerario 1: Modelado del
Usuario
Guía didáctica
Facultad de Ingenierías y Arquitectura
Departamento de Ciencias de la Computación y

Electrónica
Itinerario 1: Modelado del Usuario
Guía didáctica
Carrera PAO Nivel
Tecnologías de la información VII
Autores:
Soto Guerrero Fernanda Maricela
Correa Tenesaca Roddy Andrés
DSOF_4074 Asesoría virtual

www.utpl.edu.ec
Universidad Técnica Particular de Loja
Itinerario 1: Modelado del Usuario

Guía didáctica
Soto Guerrero Fernanda Maricela
Correa Tenesaca Roddy Andrés
Diagramación y diseño digital:
Ediloja Cía. Ltda.

Telefax: 593-7-2611418.
San Cayetano Alto s/n.
www.ediloja.com.ec
edilojacialtda@ediloja.com.ec
Loja-Ecuador
ISBN digital - 978-9942-39-087-5
Reconocimiento-NoComercial-CompartirIgual
4.0 Internacional (CC BY-NC-SA 4.0)
Usted acepta y acuerda estar obligado por los términos y condiciones de esta Licencia, por lo que, si existe el
incumplimiento de algunas de estas condiciones, no se autoriza el uso de ningún contenido.
Los contenidos de este trabajo están sujetos a una licencia internacional Creative Commons
Reconocimiento-NoComercial-CompartirIgual 4.0 (CC BY-NC-SA 4.0). Usted es libre de
Compartir — copiar y redistribuir el material en cualquier medio o formato. Adaptar — remezclar,
transformar y construir a partir del material citando la fuente, bajo los siguientes términos:
Reconocimiento- debe dar crédito de manera adecuada, brindar un enlace a la licencia, e indicar
si se han realizado cambios. Puede hacerlo en cualquier forma razonable, pero no de forma tal
que sugiera que usted o su uso tienen el apoyo de la licenciante. No Comercial-no puede hacer
uso del material con propósitos comerciales. Compartir igual-Si remezcla, transforma o crea a
partir del material, debe distribuir su contribución bajo la misma licencia del original. No puede
aplicar términos legales ni medidas tecnológicas que restrinjan legalmente a otras a hacer
cualquier uso permitido por la licencia. https://creativecommons.org/licenses/by-nc-sa/4.0/
16 de marzo, 2021
Índice
1. Datos de información................................................................. 8
1.1. Presentación de la asignatura.......................................... 8
1.2. Competencias genéricas de la UTPL............................... 8
1.3. Competencias específicas de la carrera......................... 8
1.4. Problemática que aborda la asignatura........................... 9
2. Metodología de aprendizaje....................................................... 10
3. Orientaciones didácticas por resultados de aprendizaje............. 13
Primer bimestre............................................................................. 13
Resultado de aprendizaje 1 y 2.............................................................. 13
Contenidos, recursos y actividades de aprendizaje............................. 14
Semana 1 ...................................................................................... 14
Unidad 1. Introducción al modelado de usuario............................. 14

1.1. Modelado de usuario........................................................... 15
1.2. Importancia del modelado de usuario............................... 17
1.3. Objetivos del modelado de usuario.................................... 18
1.4. Usabilidad, UX, UI................................................................. 20
Actividades de aprendizaje recomendadas.......................................... 27
Autoevaluación 1.................................................................................... 28
Semana 2 ...................................................................................... 31
Unidad 2. Usabilidad..................................................................... 32
2.1. Introducción......................................................................... 32
2.2. Usabilidad de sistemas interactivos.................................. 34
2.3. Objetivos y medidas de la usabilidad................................. 36
2.4. Motivaciones de la usabilidad............................................ 39
4 MAD-UTPL
Semana 3 ...................................................................................... 41
2.5. Aspectos de la usabilidad................................................... 41

Autoevaluación 2.................................................................................... 58
Resultados de aprendizaje 3.................................................................. 61
Semana 4 ...................................................................................... 61
Unidad 3. Experiencia de usuario.................................................. 62

3.1. Introducción......................................................................... 62
3.2. El proceso de UX.................................................................. 64
3.3. Investigación de usuario..................................................... 66
Semana 5 ...................................................................................... 77
Semana 6 ...................................................................................... 85

Resultado de aprendizaje 4.................................................................... 93
Semana 7 ...................................................................................... 94
3.4. Prototipado.......................................................................... 94
Autoevaluación 3.................................................................................... 107
Actividades finales del bimestre............................................................ 110
Semana 8 ...................................................................................... 110
5 MAD-UTPL
Segundo bimestre.......................................................................... 111
Semana 9 ...................................................................................... 112
Unidad 4. Interfaz de usuario........................................................ 113

4.1. Introducción a las interfaces de usuario (UI).................... 113
4.2. Importancia del diseño de la UI.......................................... 116
4.3. Objetivos de diseño de una UI............................................ 118
Semana 10 .................................................................................... 122
4.4. ¿Cómo se complementan UX y UI?.................................... 122

4.5. Diseño centrado en el usuario............................................ 127
4.6. Principios de diseño............................................................ 130
Semana 11 .................................................................................... 142
4.7. Fundamentos de diseño de la UI........................................ 142

Autoevaluación 4.................................................................................... 158
Semana 12 .................................................................................... 161
4.8. El enfoque de diseño........................................................... 161

Semana 13 .................................................................................... 184
4.9. Métodos de evaluación de usabilidad para UI................... 184

4.10. Tendencias de diseño de UI................................................ 187
4.11. Herramientas de diseño...................................................... 188
6 MAD-UTPL
Semana 14 .................................................................................... 190
4.12. Desarrollando un prototipo de usuario con UI & UX.......... 191

Autoevaluación 5.................................................................................... 203
Semana 15 .................................................................................... 207
Unidad 5. Desarrollo de la interfaz................................................ 207

5.1. Introducción al desarrollo de interfaces de usuario (web)
.............................................................................................. 207
5.2. Conceptos fundamentales de desarrollo........................... 209
5.3. El enfoque de desarrollo frontend...................................... 211
5.4. Elementos tecnológicos para el desarrollo web frontend
.............................................................................................. 211
Autoevaluación 6.................................................................................... 216
Actividades finales del bimestre............................................................ 219
Semana 16 .................................................................................... 219
4. Solucionario.............................................................................. 220
5. Referencias bibliográficas......................................................... 229
7 MAD-UTPL
1. Datos de información
1.1. Presentación de la asignatura
1.2. Competencias genéricas de la UTPL
Compromiso e implicación social.
1.3. Competencias específicas de la carrera
Desarrollar métodos alternativos de acceso a las TI mediante la

implementación de técnicas de interacción humano – computador
para propiciar el uso inclusivo de la tecnología.
8 MAD-UTPL
1.4. Problemática que aborda la asignatura
Elaboración de modelos de usuario que permitan validar

a través de prototipos interactivos, las necesidades y
expectativas de la parte interesada de un producto software.
Relacionar aspectos fundamentales del proceso de diseño de

interfaces haciendo uso de conceptos como usabilidad, UX y
UI.
Comprender cómo diseñar una UI con base a las necesidades y

expectativas de los interesados.
Conocer en qué etapa de desarrollo se elaboran los modelos

del usuario.
Utilizar aspectos de desarrollo que agilizan la construcción de

interfaces de usuario a través del uso de patrones de UI.
Comprender la importancia de integrar al usuario en cada

una de las etapas de elaboración de modelos y prototipos
interactivos.
9 MAD-UTPL
2. Metodología de aprendizaje
Para esta asignatura se utilizarán algunas metodologías de

aprendizaje que garantice el proceso de enseñanza-aprendizaje,
con el objetivo de poder transmitir todos los conocimientos y
conceptos que usted podrá adquirir en el transcurso de estudio de
esta asignatura y que le servirán para aplicar en su vida profesional y
laboral.
Los métodos que utilizan son:
Clase invertida: usted cuenta con todos los recursos

necesarios para su análisis previo a la tutoría, por lo que se
propone que en ese espacio se pueda dar lugar a la aplicación
de los conocimientos adquiridos.
Aprendizaje basado en análisis de estudio de caso: para lograr

las competencias de la asignatura dentro de las actividades del
componente de Aprendizaje Práctico Experimental (APE), se
propone usar un estudio de caso en el que usted podrá aplicar
los conocimientos adquiridos.
Aprendizaje basado en problemas: usted podrá estar en la

capacidad de analizar e identificar soluciones a problemas
reales de la profesión a través del acceso y empleo de las
actividades recomendadas.
10 MAD-UTPL
Antes de iniciar con el estudio de las unidades es importante que
analice y siga las siguientes recomendaciones:
Dedique como mínimo una hora diaria al estudio, revise

el plan docente semanalmente y cumpla con cada una
de las actividades planteadas: síncronas, asíncronas,
tareas, cuestionarios, actividades recomendadas y las
autoevaluaciones que se encuentran al final de cada unidad de
estudio.
Organice mediante agenda las fechas de las actividades en

línea y entrega de tareas, esto le permitirá tener un mayor
control y seguimiento de las actividades que tiene que realizar.
Ingrese con periodicidad (semanalmente) al EVA, para que

revise los anuncios académicos publicados por su tutor, estos
anuncios contienen lineamientos u orientaciones que debe
seguir en cada semana de estudio.
Se recomienda que mientras aprende los temas propuestos,

avance en el desarrollo de las tareas, las mismas que deberán
ser enviadas a través del (EVA) para su calificación de acuerdo
con las fechas establecidas (ver plan docente), es necesario
aclarar que solamente las tareas enviadas por este medio se
calificarán.
Para empezar el estudio de esta asignatura, se recomienda

primero leer las páginas de la 1 a la 9 del texto guía en dónde
encontrará las indicaciones de cómo vamos a desarrollar el
trabajo en esta asignatura. Seguidamente, inicie con el estudio
de los temas de la semana 1 programados en el plan docente.
11 MAD-UTPL
Al final de cada unidad de estudio, se plantean
autoevaluaciones, sea honesto en su desarrollo, esto le
permitirá tener un criterio para determinar su nivel de
aprendizaje y si usted cree que necesita revisar algún tema
una y otra vez, hágalo, identifique y mejore su metodología de
estudio y por último y no menos importante, es necesario que
planifique su tiempo.
Las dudas e inquietudes que tenga en relación con la

asignatura, realícelas a su tutor a través de los diferentes
canales que le brinda la UTPL: mensajes en el EVA, correo
electrónico, vía telefónica o por chat de consultas.
Antes de iniciar su proceso de aprendizaje, lo invitamos a

revisar con detenimiento el plan docente que se encuentra
en el EVA, en él se detallan las competencias y resultados de
aprendizaje que va a adquirir en la asignatura, los contenidos,
las actividades de aprendizaje y el tiempo estimado de estudio,
con toda la información proporcionada podrá organizarse para
que su aprendizaje sea el idóneo.
12 MAD-UTPL
3. Orientaciones didácticas por resultados de
aprendizaje
Primer bimestre
Explica como la interfaz de

Resultado de
usuario y la usabilidad se
aprendizaje 1 y 2 afectan mutuamente.
Estimado estudiante, bienvenido a nuestra primera semana de

estudios. Aquí nos introduciremos en el mundo del modelado de
usuario, seguro se preguntará ¿qué es?, o ¿cómo se orienta?, se
desprende del diseño centrado en el usuario, esto quiere decir, poner
a nuestro usuario final en el centro de todo el proceso de modelado/
diseño, con el objetivo de que sea la persona o perfil del usuario que
va a utilizar nuestro producto o servicio digital quién nos guíe durante
el proceso de modelado hasta cumplir con sus expectativas. ¿Cuál
cree que será el objetivo de esto?, fallar rápido a través del diseño
y de los modelos o prototipos, aprender de ello y reajustar, esto
nos llevará a una etapa de implementación futura segura. Además,
conoceremos algunos elementos como la usabilidad, experiencia
de usuario – UX, e interfaz de usuario – UI, que son imprescindibles
para el cometido y de esta forma logrará el resultado de aprendizaje
planteado.
13 MAD-UTPL
Contenidos, recursos y actividades de aprendizaje
Semana 1
Unidad 1. Introducción al modelado de usuario
La tecnología es el aspecto más cotidiano en nuestro día a día, nos

apoyamos de ella para la realización de nuestras actividades en los
diferentes ámbitos como lo social, educativo, trabajo, científico, etc.,
y lo hacemos mediante un dispositivo móvil o una PC, accediendo
ya sea a una App (aplicación móvil) o una aplicación/sitio web.
¿Quién hace de mediador entre el usuario y un sitio web por ejemplo?
Podríamos decir que es ese dispositivo móvil, pero además de este,
existe ese elemento que detona la interacción, siendo la interfaz de
usuario, la que facilita y permite que ese sitio resulte útil, amigable,
satisfactorio y fácil de usar, es decir, que además de la relación del
usuario con la interfaz le proporcionamos una mayor experiencia.
He ahí la importancia de esta asignatura, en donde pueda identificar

claramente, cómo a través del modelado centrado en el usuario
brindaremos una óptima interfaz que se vea reflejada en la
experiencia de esta persona.
¡Iniciamos!
14 MAD-UTPL
1.1. Modelado de usuario
El modelado de usuario consiste en analizar y representar las

características de las personas que utilizarán algún producto o
servicio en modelos o prototipos que se desarrollarán a partir del
proceso de una investigación enfocado en el usuario, lo cual, nos
permitirá entender, conocer y a partir de esto, tomar las mejores
decisiones para una interacción. Todo esto se desprende de
los estudios del Diseño Centrado en el Usuario – DCU, que es
considerado como una filosofía, su objetivo es tener presente
siempre al usuario, es decir, que él esté presente en todas las fases
del diseño lo cual permite garantizar el éxito de un producto.
De acuerdo con (Hassan et al., 2004), se considera que el modelado

de usuario es la definición de clases o perfiles de usuarios con
base a atributos comunes, en donde estos atributos representan
las necesidades de información, condiciones de acceso, experiencia
y conocimientos, es decir, patrones de conducta, objetivos y
necesidades, lo que permite que el diseñador conozca para quién
diseña, qué espera encontrar del usuario y en qué forma. En el
estudio también se manifiesta que es necesario definir “escenarios”
que representan descripciones de uso de una aplicación/sitio web,
con el objetivo de contextualizar la interacción persona aplicación,
para este caso en la figura 1, se presenta un ejemplo de la descripción
de un usuario y el escenario definido, esto hace mayor referencia a
la creación del perfil de un usuario o lo que llamaremos la definición
de “persona” que será analizado con mayor detalle durante la
semana 5, sección 3.3.Personas y mapas de empatía. Es importante
resaltar que el modelado o prototipado del usuario al ser un proceso
15 MAD-UTPL
estrictamente centrado en las personas es conocer que los aspectos
fundamentales del modelado es ¿quién es la persona?, ¿cuáles son
sus intereses?, ¿en qué o cuál es el escenario perfecto dónde la
persona utilizaría un producto o servicio digital?
Figura 1.
Ejemplificación de modelado de usuario basado en la descripción y
definición de “escenario”.
Datos Nombre: Ana

generales Edad: 24 años
Ocupación: Estudiante de 3er curso de diplomatura
en Biblioteconomía Documentación.
Descripción Ana es soltera y ha superado los dos primeros cursos
“persona” con un expediente medio-alto.
Su primer contacto con la informática fue en la
carrera, aunque no siente demasiada pasión por los
computadores.
No tiene computador personal en casa, por lo que
acude a las aulas de informática de la facultad cuando
necesita consultar su email, buscar apuntes o
consultar alguna información sobre asignaturas,
profesores u horarios.
Escenario Son las 13:25 horas, y acaba de conseguir un
computador libre en el aula de informática.
Una amiga le ha comentado que para este curso
deberá realizar la matrícula en línea, por lo que
ingresa a la web de la facultad para informarse.
No tiene mucho tiempo, ya que si se demora
demasiado perderá el autobús. Auque intuye que no
podrá realizar la matrícula este día, quiere consultar
información sobre plazos para realizarla y requisitos
necesarios.
Fuente: Adaptado de Hassan, Y., Martín Fernández, F. J., & Iazza, G.

(2004). Diseño web centrado en el usuario: usabilidad y arquitectura de la
información.
16 MAD-UTPL
Conocer a la persona le permitirá no solo contar con un listado de
características y atributos de la persona, sino, contar con una base de
conocimientos que dará soporte y cabida a cada una de las acciones
que usted desempeñará durante el proceso de modelado, que más
adelante profundizará. En este primer enfoque ¿qué le ha parecido
está forma de identificar las necesidades de un usuario, considera
que puede resultar efectivo y de mayor beneficio?, ¿para qué?, ¿cómo
cree que podría generar un resultado importante a partir de este
conocimiento?, lo invitamos a reflexionar, indagar y profundizar en el
tema respecto a este primer acercamiento, justifique su análisis con
casos o problemas de la vida real.
1.2. Importancia del modelado de usuario
Continuando con el estudio de (Hassan et al., 2004), conocer la

importancia del modelado de usuario permite que durante este
proceso usted pueda definir clases o perfiles de usuarios, y que
de esa forma parta desde un proceso de contextualización y
conocimiento de lo que la persona necesita y transmite con el
objetivo de no solo resolver problemas a nivel lógico, sino, de abordar
aspectos relacionados con modelos o prototipos válidos mediante
los cuales las personas puedan visualizar su idea y sus expectativas,
siempre partiendo por el conocimiento de las personas o usuarios
finales que serán quienes usen un producto o servicio para el cual
usted pueda estar trabajando.
Además, podemos decir que este modelado enfocado en el usuario,

permite describirlo y entenderlo de manera efectiva, por lo tanto, esto
nos aporta información valiosa logrando perfeccionar el producto o
servicio hasta el punto donde podamos satisfacer las necesidades
y sobre todo asegurar los niveles de calidad que el usuario espera al
recibir su producto.
17 MAD-UTPL
Más adelante vamos a involucrarnos con las diferentes etapas por las
que se debe transitar para llegar a conocer a nuestro usuario y que
esto se plasme en cada una de las fases del diseño, identificará que
se inicia con la investigación y a partir de ese momento se crearán
los perfiles de usuarios que representan los intereses de cada grupo
con características comunes, llegando así al modelado de usuario
para resumir, sintetizar y organizar esa información recopilada y
permitir pasar al diseño en donde el objetivo será el de satisfacer las
necesidades identificadas.
1.3. Objetivos del modelado de usuario
Los principales objetivos del modelado de usuario que abordará al

estudiar esta asignatura y que utiliza un conjunto de buenas prácticas
enfocadas en la investigación, construcción y materialización de un
modelo de usuario se resumen a continuación:
Utilizar un proceso de diseño basado en usabilidad, Experiencia

de Usuario (UX) e Interfaz de Usuario (UI), le permitirá a utilizar
un mecanismo basado en el diseño centrado en el usuario para
determinar las principales necesidades y características que
un producto de software debe contener. Esto sin la necesidad
de entrar en etapas de desarrollo o codificación de código para
construir artefactos que puedan ser validados por nuestros
clientes.
Abordar la Experiencia de Usuario (UX) como aspecto principal

del proceso de modelado le permitirá conocer y direccionar
cada una de las decisiones de diseño de su producto y servicio
a las necesidades reales de los usuarios finales. Esto incluye no
solo diseñar, modelar y prototipar para cualquier persona, sino
abordar aspectos como inclusividad, accesibilidad y sobre todo
conocer la diversidad de pensamientos, emociones, criterios y
necesidades que deben cubrir nuestros modelos desarrollados.
18 MAD-UTPL
Comprender que desarrollar, construir o implementar un
producto o servicio de software, no solo implica centrarnos
en las necesidades lógicas funcionales, sino, es fundamental
abordar aspectos mucho más importantes de cara al usuario
como el diseño de interfaces de usuario, que sean interactivas,
intuitivas y fáciles de usar para alcanzar los objetivos del
usuario.
Conocer que el proceso de diseño de una Interfaz de Usuario

(UI) para nuestros modelos, implica aspectos más allá de
utilizar colores y letras, el proceso de diseño de una UI debe
partir por conocer cuáles son los dispositivos de soporte, si
diseñamos para móvil o para web o para ambos casos, qué
aspectos de modelado y de desarrollo tenemos que considerar
para poder cubrir estas necesidades de diseño. Así mismo,
entender cuáles son los mejores elementos visuales para
personas o usuarios normales o con discapacidad.
Desarrollar un modelo o prototipo que nos permita fallar rápido

en un proceso de desarrollo de software, con la finalidad de que
a través del modelo orientado al usuario podamos comprender
de una forma fácil y temprana, las necesidades reales y
expectativas de nuestros clientes o interesados. Esto permitirá
generar mayor confianza y compromiso entre las partes durante
un proceso de desarrollo de un producto o servicio de software.
Evaluar aspectos de usabilidad y accesibilidad de nuestras

interfaces de usuario para conocer por ejemplo la carga
cognitiva y visual que representan nuestros diseños y modelos
o comprender cuán fácil es usar o intuir cada una de las
funcionalidades que hemos representado en la UI de nuestros
modelos.
19 MAD-UTPL
Todos y cada uno de estos objetivos, son algunos de los elementos
que usted estudiará y logrará aplicar durante su vida profesional.
A medida que avance con el estudio de esta asignatura irá
reconociendo la importancia de contar y usar un proceso de
modelado y prototipado de Interfaces de usuario, abordando
conceptos fundamentales como usabilidad y experiencia de usuario.
1.4. Usabilidad, UX, UI
Para identificar claramente todo lo que implica y lo que es el

modelado de usuario vamos a iniciar por analizar los elementos
que lo componen. Según (Lowdermilk, 2013), el modelado de
usuario se resume en algunos conceptos importantes partiendo
por la Interacción Humano Computador (HCI), la usabilidad, la
Experiencia de Usuario (UX) y la relación que existe entre estas a
través del Diseño Centrado en el Usuario (DCU), por sus siglas en
inglés, hasta construir un modelo. Para comprender cada una de
estas definiciones, lo invitamos a revisar la tabla 1, dónde usted,
contextualizará cada uno de estos conceptos.
Tabla 1.
Descripción y relación entre usabilidad, HCI, DCU y UX.
El mundo de la usabilidad es amplio y se

centra en el estudio de los seres humanos que
interactúan con cualquier producto.
La Interacción Humano-Computador – HCI es

un subconjunto de la usabilidad que se centra
específicamente en la interacción de los seres
humanos con los productos informáticos.
El Diseño Centrado en el Usuario – DCU es una

metodología que utilizan los desarrolladores
y diseñadores para asegurarse que crean
productos que satisfacen las necesidades de los
usuarios.
20 MAD-UTPL
La Experiencia de usuario – UX es uno de
los muchos enfoques del DCU. Incluye la
experiencia de usuario con el producto, incluidas
las reacciones físicas y emocionales.
El DCU no es subjetivo y a menudo se basa en

datos para respaldar las decisiones de diseño.
El DCU implica mucho más que hacer que las

aplicaciones sean estéticamente agradables. El
diseño desempeña un papel importante, pero
no es el único objetivo.
El DCU puede ahorrar tiempo al ayudarle a

evitar costosos errores.
El diseño no nos distrae del trabajo. Asegura

que nos centremos en lo correcto, satisfacer
las necesidades de los usuarios con la solución
tecnológica adecuada.
Fuente: (Lowdermilk, 2013)
Ahora que comprendió cada uno de estos conceptos es importante

que revise la figura 2 y comprenda la relación entre cada uno de
estos. Es primordial que diferencie cada uno de los conceptos
referenciados, centrados en las interacciones entre una persona y
un equipo informático, además de la sensación que le provoca a
esta persona, por ello vamos a describir y ejemplificar aún más a la
usabilidad, UX y UI.
21 MAD-UTPL
Figura 2.
Usabilidad UX y UI.
Usabilidad
(Factores humanos)
Interacción
humano-computador
(HCI)
Diseño centrado
en el usuario
(UCD)
Experiencia de
usuario
(UX)
Aplicación
Fuente: Elaborado por el autor.
Usabilidad: hace referencia a la facilidad de uso, orientado a

conseguir un mínimo esfuerzo y mayor eficiencia para el usuario.
Brinda todas las facilidades posibles para hacer más rápida y sencilla
la navegación en un sitio web o en la tecnología correspondiente.
Es una de las características que está presente en los siguientes
elementos. El control de errores en una página web es un claro
ejemplo de usabilidad, apuntamos justamente a esa “eficiencia” para
el usuario, en la tabla 2 se presenta un caso de ello.
22 MAD-UTPL
Tabla 2.
Ejemplo de usabilidad para prevención de errores.
Primer pedido en una tienda online:

1. Se debe facilitar exhaustivamente los datos de registro, envío y pago.
2. Se comienza a introducir todos los datos de la dirección de envío y facturación.
3. Se decide que lo mejor es pagar con tarjeta de débito, así que se copia
cuidadosamente el número de la tarjeta que, además, se ha debido ir a buscar a
la cartera que no está cerca.
4. Se comprueba el número un par de veces, se introduce la identificación, el tipo

de envío que se quiere y se revisa que todo el pedido está bien.
5. Luego de 10 minutos más tarde desde que se comenzó a introducir los datos,
se pulsa el botón definitivo para realizar la compra.
6. Finalmente, hay algún error en el formulario y todos los datos ingresados

desaparecen, o el formulario se vacía de toda la información. Por lo que la
única opción para realizar la compra es volver a comenzar a rellenar todos los
campos.
Fuente: Pagina Web 4 U. (2018). USABILIDAD WEB Y EJEMPLOS ÚTILES

PARA TUS PÁGINAS. Paginaweb4u.Com.
¿Cómo reaccionaría o reacciona cuando le sucede esto, qué hace,

lo vuelve a hacer o lo deja? Esto va a depender de la situación o la
necesidad que tenga del sitio, pero seguro que esto hará que se
pierda un visitante o más aún un cliente. Reflexione sobre ¿cómo
resolvería esto?
Experiencia de usuario – UX: término utilizado para resumir toda

la experiencia de un producto tecnológico, en donde no solo se
hace referencia a la funcionalidad, sino que se orienta también a
lo atractivo, agradable e intuitiva que resulta una aplicación, por
ejemplo, detalles que provoquen emociones. A la UX le preocupa
cómo se sentirá el usuario.
23 MAD-UTPL
Según Jakob Nielsen y Donald Norman, expertos en usabilidad,
diseño centrado en el usuario y diseño emocional, manifiestan que,
para lograr una experiencia de usuario de alta calidad, debe haber
una fusión perfecta de los servicios de múltiples disciplinas, como
la ingeniería, el marketing, el diseño gráfico e industrial y el diseño
de la interfaz. Lo invitamos a revisar el sitio web Nielsen Norman
Group, de estos dos prestigiosos expertos, en el que usted podrá
revisar resultados de investigaciones y recursos enfocados en el uso
y aplicación de UX.
La figura 3 representa como la UX se centra en el diseño centrado en

el humano, y en las necesidades de estos, además de no perder de
vista y alinearse con los objetivos del negocio considerando también
las limitaciones técnicas.
Figura 3.
Representación gráfica de UX.
Necesidades
del usuario
UX
Objetivos Limitaciones
del Negocio técnicas
Fuente: Sandoval, E. (2019). ¿Qué es UI, UX, IxD? ¿Cuál es la diferencia?
24 MAD-UTPL
Interfaz de usuario – UI: UI es lo que un usuario visualiza y utiliza
para interactuar con un sistema o aplicación. Esta interfaz es la
encargada de la interacción, es decir, se encarga de definir en dónde
colocamos los botones, el menú, colores y formas, es la capa visual,
lo que vemos y nos permite activar la acción que se requiere para que
la aplicación lo ejecute. Por lo que podemos decir que es el mediador
o el medio de comunicación entre un usuario y la máquina, en la
figura 4 se ilustra un ejemplo de la interfaz de usuario del sistema
operativo Mac OS.
Figura 4.
Interfaz de usuario Mac OS.
Fuente: GCFGlobal. (n.d.). Interfaz de Mac OS X.
Para resumir cada uno de los conceptos anteriormente revisados, lo

invitamos a que revise con detenimiento la figura 5, y analice la forma
cómo definen estos conceptos la ISO 9241-210:2019 – Ergonomics
of human-system interaction.
25 MAD-UTPL
Figura 5.
Definiciones de usabilidad, UX, UI.
Usabilidad UX UI
Grado en que un sistema, Percepciones y Todos los componentes
producto o servicio respuestas del usuario de un sistema interactivo
puede ser utilizado por que resultan del uso y/o (software o hardware)
usuarios específicos para del uso previsto de un que proporcionan
acanzar objetivos sistema, producto o información y controles
específicos con eficacia, servicio. para que el usuario
eficiencia y satisfacción realice tareas específicas
en un contexto de uso con el sistema
específico. interactivo.
Fuente: International Organization for Standardization. (2010). ISO 9241-

210: Ergonomics of human–system interaction Human-centred design for
interactive systems. In International Organization for Standardization.
¿Se han comprendido estos elementos que se contemplan dentro

del modelado de usuario y la diferencia entre cada uno de ellos?,
esperamos que sí. Durante las siguientes semanas abordaremos la
usabilidad y UX a detalle y en el segundo bimestre profundizaremos
en UI.
Hemos finalizado nuestra primera semana de estudio, ánimo y éxito

en las próximas.
26 MAD-UTPL
Actividades de aprendizaje recomendadas
Para afianzar los temas de diseño, UX y UI, lo invitamos a revisar y

analizar el siguiente video, ¿qué es diseño gráfico, diseño UX y diseño
UI?, en él se habla qué son, de que van y sus diferencias. Se sugiere
iniciar en el minuto 1:22, en donde se destaca qué es el diseño, luego
puede poner mayor atención del minuto 10:19 al minuto 14:00 para
reconocer las principales diferencias entre UX y UI.
Una vez que ha observado el video, responda lo siguiente: ¿ha

coincidido su criterio de diseño con respecto al dado en el video o
ha sido diferente?, si ha sido diferente, ¿qué tan lejano o cercano se
encuentra su criterio?, ¿están claros los términos de funcionalidad
y estética?, y finalmente ¿ha encontrado la relación entre UX y UI, en
qué momento interviene cada una?
Estimado estudiante, mediante este cuestionario usted pondrá a

prueba lo aprendido hasta el momento.
27 MAD-UTPL
Autoevaluación 1
En las siguientes preguntas, revise cada ítem y seleccione la

respuesta correcta. Recuerde que sus resultados constituyen un
reflejo del auto aprendizaje de la asignatura.
1. ¿Quién hace de mediador entre el usuario y un sitio web?
a. Dispositivo.
b. Interfaz de usuario.
c. Experiencia de usuario.
2. ¿Cuál es el fin del modelado centrado en el usuario?
a. Brindar una óptima interfaz que se vea reflejada en la

experiencia del usuario.
b. Interés por obtener una interfaz bonita y agradable.
c. Interés de que el resultado sea fácil de usar.
3. ¿Su objetivo es tener presente siempre al usuario, que él esté

en todas las fases del diseño lo cual garantizará el éxito de un
producto?
a. Interfaz de usuario.
b. Diseño centrado en el usuario.
c. Interfaz gráfica.
4. Para satisfacer las necesidades de los usuarios, ¿en qué nos

apoyamos inicialmente?
a. Recolectar los requisitos.

b. Realizar un prototipo.
c. Definir perfiles de usuario.
28 MAD-UTPL
5. Es uno de los objetivos del modelado de usuario:
a. Definir un proceso de diseño que se encuentre dirigido por

la información sobre las personas que van a hacer uso de
un producto digital.
b. Fallar rápido implica mayores costos, sin embargo,

se generará mayor confianza al momento de la
implementación.
c. Aplicar mínimamente la usabilidad y accesibilidad, en

este proceso no son necesarios.
6. ¿Es un subconjunto de la usabilidad que se centra

específicamente en la interacción de los seres humanos con los
productos informáticos?
a. Diseño Centrado en el Usuario – DCU.

b. Experiencia de Usuario – UX.
c. Interacción Humano-Computador – HCI.
7. ¿Cuáles son los elementos que intervienen en el modelado de

usuario?
a. Interfaz gráfica, accesibilidad y usabilidad.

b. Usabilidad, experiencia de usuario e interfaz de usuario.
c. Usabilidad, investigación y accesibilidad.
8. ¿Hace referencia a la facilidad de uso y está orientada a

conseguir un mínimo esfuerzo y mayor eficiencia para el
usuario?
a. Experiencia de usuario.
c. Usabilidad.
29 MAD-UTPL
9. ¿Quién se orienta a lo atractivo, agradable e intuitivo, además
de la funcionalidad, y provoca emociones?
c. Usabilidad.
10. ¿Es lo que un usuario visualiza y utiliza para interactuar con un

sistema o aplicación?
c. Usabilidad.
¿Cómo le fue en la autoevaluación?, esperamos que muy bien.
Puede verificar sus respuestas al final de este texto guía. Si no

consiguió un buen resultado, es necesario que revise nuevamente
los puntos que aún no estén claros o persistan dudas. Recuerde
interactuar con su tutor y de hacer uso de los medios de
comunicación que le brinda la UTPL, esto es muy importante y
téngalo siempre presente.
Hemos finalizado con el estudio de la unidad 1.
¡Felicitaciones y avancemos!
30 MAD-UTPL
Semana 2
Estimado estudiante, iniciaremos el estudio de la unidad 2 con uno de

los temas más universales e importantes a considerar en un proceso
de modelado y diseño, que es la usabilidad. Al culminar la primera
semana de estudio ya hemos analizado qué es y descubrimos que se
enfoca al uso que le da un usuario, a un producto o servicio digital,
pero hay autores que se enfocan en mucho más que el uso, por lo
que lo invitamos a profundizar con los objetivos y las motivaciones
que la promueven. Para lograr el resultado esperado, durante esta
y la siguiente semana usted reconocerá qué es la usabilidad, qué
elementos son necesarios considerar y sobre todo identificar cómo
ésta es imprescindible tanto en la etapa de diseño como en la
interfaz de usuario.
31 MAD-UTPL
Unidad 2. Usabilidad
2.1. Introducción
En gran parte de la bibliografía que usted encontrará sobre este tema

comprenderá que la usabilidad hace referencia a lo fácil e intuitivo
que puede resultar utilizar un producto y al éxito que éstos tienen con
respecto a los que presentan un alto grado de dificultad a la hora de
utilizados.
A inicios de los años 70, uno de los ingenieros de IBM, Harlan

Crowder, usó el término user-friendly (amigable para el usuario) para
indicar la capacidad de los sistemas informáticos de comunicarse
y ser usados por las personas, ya que hasta ese entonces los
computadores no estaban pensados para que una persona interactúe
con ellos, menos para conseguir sus metas.
32 MAD-UTPL
Para (Hartson & Pyla, 2012), la Interacción Humano-Computadora
– HCI es el resultado de lo que sucede cuando un usuario humano
y un sistema de computación se unen para lograr algo e incluye
características como:
Facilidad de uso.
Productividad.
Eficiencia.
Eficacia.
Capacidad de aprendizaje.
Capacidad de retención.
Satisfacción del usuario.
Continuando con el autor en mención, la usabilidad no es solo la

“facilidad de usar” ni la estética, porque descuida la importancia del
rendimiento del usuario en términos de productividad del usuario, y
que, como usuarios, necesitamos una herramienta eficiente, eficaz,
segura, estética y divertida que los ayude a alcanzar sus objetivos.
Como puede observar, este último estudio mencionado se basa en
los conceptos brindados por la ISO 9241.
El grado de utilización de un producto definirá su éxito. Los usuarios

deben poder familiarizarse con su interfaz de usuario rápidamente
y sin demasiadas indicaciones, además, ser capaces de alcanzar
sus objetivos directamente y con la menor fricción posible. Al volver
al producto, estos deben ser capaces de recordar cómo navegar y
realizar acciones familiares. Según (Vesselov & Davis, 2019), cuando
se realiza el diseño, es necesario incluir aspectos que mejoren la
usabilidad del producto, en donde también es necesario considerar e
incluir la accesibilidad.
Accesibilidad.- Según la RAE es la condición

que deben cumplir los entornos, productos y
servicios para que sean comprensibles, utilizables
y practicables por todos los ciudadanos, incluidas
las personas con discapacidad.
33 MAD-UTPL
En esta unidad 2, nos vamos a encontrar con diversidad de autores
que han logrado un recorrido en cuanto a la usabilidad, nos
basaremos especialmente en el libro de Shneiderman, B., et. al.
(2018) Designing the user interface strategies for effective human-
computer interaction que destaca muchos de los temas abarcados
en esta unidad.
2.2. Usabilidad de sistemas interactivos
Sistemas interactivos.- Es la combinación de

hardware y/o software y/o servicios y/o personas
con las que los usuarios interactúan para lograr
un objetivo específico. ISO 9241-210:2019
Ergonomics of human-system interaction.
De acuerdo con (Shneiderman et al., 2018), los investigadores

crearon la ciencia del diseño interdisciplinario de la interacción entre
el humano y el computador aplicando los métodos de la psicología
experimental a las poderosas herramientas de las ciencias de
la computación. Luego integraron las lecciones de psicólogos
educativos e industriales, diseñadores instructivos y gráficos,
técnicos, expertos en factores humanos o ergonomía y equipos cada
vez más numerosos de antropólogos y sociólogos.
No es raro que para cada sector económico encontremos sistemas

especializados que los apoyen en sus diferentes procesos. En los
entornos empresariales existen herramientas de apoyo para la
toma de decisiones y de intercambio de documentos, por ejemplo.
Mientras que, en los entornos domésticos, las fototecas digitales
y las conferencias por Internet mejoran las relaciones familiares
y personales. Millones de personas aprovechan los innumerables
recursos del patrimonio educativo y cultural de la Internet, que
permiten acceder a todo tipo de elementos, desde objetos de arte,
música, deportes, espectáculos, etc. Lo invitamos a dar lectura a la
tabla 3 y, seguir analizando el uso, la importancia de la tecnología y
de los sistemas interactivos en diversos ámbitos.
34 MAD-UTPL
Tabla 3.
Sistemas interactivos en diferentes ámbitos.
Sistemas interactivos en diferentes ámbitos.

Los dispositivos móviles enriquecen la vida cotidiana de muchos usuarios, entre
ellos los que tienen discapacidades, alfabetización limitada y bajos ingresos. La
adopción notablemente rápida y generalizada de los dispositivos móviles (incluidos
los teléfonos inteligentes, las tablet’s, los dispositivos de juego, los aparatos de
entrenamiento físico, etc.), favorece la comunicación personal, la colaboración y la
creación de contenidos.
Los economistas consideran que existe un vínculo directo entre la difusión de

los teléfonos celulares y el crecimiento económico, ya que las comunicaciones
facilitan el comercio electrónico y estimulan los emprendimientos empresariales.
Del mismo modo, el crecimiento explosivo es la descripción adecuada de lo

que ocurre en los ámbitos de las redes sociales y el contenido generado por los
usuarios. Los medios de comunicación más antiguos, como los periódicos y la
televisión, han perdido audiencia en favor de los medios sociales como Facebook,
Twitter, YouTube y Wikipedia (todos los cuales se encuentran entre los 10 servicios
más visitados). Estos sitios web líderes son sólo una muestra de lo que está por
venir, ya que los empresarios provocan una participación cada vez mayor de los
medios sociales accesibles a través de aplicaciones basadas en la web y pequeños
dispositivos móviles.
Los diseñadores permiten a los usuarios crear, editar y distribuir objetos impresos
en 3D, juegos de realidad virtual inmersivos, animaciones interactivas y música, voz
y vídeos de alta definición.
Fuente: Adaptado de Shneiderman, B., Plaisant, C., Cohen, M., Jacobs, S., &
Diakopoulos, N. (2018). Designing the user interface strategies for effective
human-computer interaction. In Pearson (Sixth Eidi). Pearson Education
Limited.
Como se puede evidenciar, el interés es cada vez mayor en la

interacción entre el hombre y la computadora y se aduce que ello
es gracias en buena parte al deseo de los diseñadores de mejorar
la experiencia de los usuarios, considerando los elementos ya
mencionados de la usabilidad, la facilidad de uso y la productividad
del usuario.
35 MAD-UTPL
2.3. Objetivos y medidas de la usabilidad
El objetivo del Diseño Centrado en el Usuario (DCU), es que

consideremos al usuario en todo el proceso del diseño para obtener
un producto que le sea valioso, fácil de utilizar y lograr su satisfacción
en cuanto a la funcionalidad, proporcionando características de
calidad como la usabilidad, la universalidad y la utilidad.
Lo mencionado es posible lograrlo mediante:
Una planificación cuidadosa.

Sensibilidad a las necesidades de los usuarios.
Devoción al análisis de los requisitos y pruebas diligentes.
Cumplir sin salir del presupuesto y en el plazo previsto.
Cómo seguramente ya se dio cuenta, la usabilidad, la UX y UI se

encuentran estrechamente relacionadas porque aportan al fin, que es
el usuario y a su interacción con el resultado reflejado en un producto
como una App, por esto se persigue la excelencia de la UI, mediante
la selección de diseñadores experimentados y planificaciones
realistas que contemple el tiempo necesario para la reunión de
requisitos, la preparación de directrices y la repetición de pruebas.
Es necesario destacar que los diseñadores de éxito persiguen

mucho más que la “facilidad de uso”, lo “intuitivo” y lo “natural”.
Deben tener un conocimiento profundo de la diversa comunidad de
usuarios y de las tareas que deben realizarse. Además de, estudiar
las pautas basadas en la evidencia y en la investigación cuando es
necesario. Podemos indicar que también están comprometidos con
el mejoramiento en la experiencia de los usuarios, lo que refuerza su
determinación cuando se enfrentan a decisiones difíciles, presiones
de tiempo y presupuestos ajustados. Los grandes diseñadores
también son conscientes de la importancia de suscitar respuestas
emocionales, atraer la atención con animaciones y sorprender
lúdicamente a los usuarios.
36 MAD-UTPL
Cuando se ha hecho un buen trabajo referente a lo mencionado, las
interfaces generan sentimientos positivos de éxito, competencia y
dominio entre los usuarios. Los usuarios tienen un modelo mental
claro de la interfaz que les permite predecir con confianza lo que
sucederá en respuesta a sus acciones. En el mejor de los casos, la
interfaz casi desaparece, lo que permite a los usuarios concentrarse
en su trabajo, exploración o placer. Este tipo de entorno tranquilizador
da a los usuarios la sensación de que están operando en su punto
máximo, mientras alcanzan sus objetivos.
Por lo tanto, la estrecha interacción con la comunidad de usuarios

conduce a un conjunto bien elegido de tareas de referencia que
se convierte en la base principal de los objetivos y medidas de la
usabilidad. Esto quiere decir, que, para cada tipo de usuario y cada
tarea, unos objetivos precisos y medibles guían al diseñador a través
del proceso de prueba.
Tal como se indicó en la sección 2.1 de esta semana, de acuerdo

con la definición de la ISO 9241 acerca de la usabilidad, podemos
mencionar que los objetivos en los que se centra son: la eficacia,
eficiencia y satisfacción. En la figura 6, se presenta las definiciones
que nos brinda esta norma.
37 MAD-UTPL
Figura 6.
Definición de eficacia, eficiencia y satisfacción.
Eficacia Eficiencia Satisfacción

Precisión y Recursos (tiempo, el Grado en que las
exhaustividad con la esfuerzo humano, respuestas físicas,
que los usuarios los costes y los cognitivas y
alcanzan los materiales) emocionales del
objetivos utilizados en relación usuario que resultan
especificados. con los resultados del uso de un
obtenidos. sitema, producto o
servicio satisfacen
las necesidades y
expectativas del
usuario.
Fuente: International Organization for Standardization. (2010). ISO 9241-

210: Ergonomics of human–system interaction Human-centred design for
interactive systems. In International Organization for Standardization.
¿Cómo podríamos medir la usabilidad?, a continuación, detallamos

las medidas que considera (Shneiderman et al., 2018), las cuales se
centran en la evaluación práctica:
Tiempo para aprender. ¿Cuánto tiempo tardan los miembros

típicos de la comunidad de usuarios en aprender a utilizar las
acciones pertinentes a un conjunto de tareas?
Velocidad de ejecución. ¿Cuánto tiempo se tarda en realizar las

tareas de referencia?
Tasa de errores de los usuarios. ¿Cuántos y qué tipo de errores

cometen los usuarios al realizar las tareas de referencia?
Aunque el tiempo para cometer y corregir errores podría
incorporarse a la velocidad de rendimiento, el manejo de errores
es un componente muy crítico.
38 MAD-UTPL
Retención a lo largo del tiempo. ¿Qué tan bien mantienen los
usuarios sus conocimientos después de una hora, un día o una
semana? La retención puede estar estrechamente vinculada
al tiempo de aprendizaje y la frecuencia de uso juega un papel
importante.
Satisfacción subjetiva. ¿Cuánto les gustó a los usuarios

utilizar varios aspectos de la interfaz? La respuesta puede
determinarse mediante entrevistas o encuestas escritas que
incluyen escalas de satisfacción y espacio para comentarios de
forma libre.
2.4. Motivaciones de la usabilidad
El enorme interés en la usabilidad de la interfaz surge de la

demostración de los beneficios que se derivan de las interfaces
de usuario bien diseñadas. Esta mayor motivación viene de los
diseñadores y de quienes producen dispositivos móviles, sitios web
de comercio electrónico y medios de comunicación social en los que
es necesario contar con excelentes experiencias de usuario para
tener éxito en los grandes mercados altamente competitivos.
Por lo mencionado, es posible decir que la usabilidad ha pasado

de ser deseable a ser necesaria para la supervivencia. Así mismo,
existe un gran interés por los juegos y el entretenimiento, esto
ha aumentado el rendimiento de los dispositivos, las redes y las
interfaces de usuario. ¿Cuál o cuáles creen que serían los objetivos
que se persiguen?, sería el garantizar que el juego sea fluido y vívido,
que la transmisión de fotos, música y vídeo sea rápida y que el
intercambio sea elegante y sencillo.
Las fuertes motivaciones para la calidad de la usabilidad provienen

de profesionales de alto rendimiento que exigen excelencia en los
diferentes entornos como los sistemas críticos para la vida, las
39 MAD-UTPL
plantas industriales, las oficinas legales y los organismos policiales.
A continuación, se analizan algunos de los entornos en donde se
tiene gran expectativa por la usabilidad
Motivaciones de la usabilidad
Con estas interesantes motivaciones de la usabilidad hemos

culminado esta segunda semana, esperamos que esto genere
en usted el interés por este criterio de calidad que es imperativo
considerar en nuestros diseños e interfaces.
Avancemos con paso firme y entusiasmo a las siguientes semanas

de estudio.
Ahora lo invitamos a revisar el siguiente video, ¿Qué es usabilidad

web? A partir del minuto 0:37 se inicia con la definición de usabilidad
de manera general y luego lo traslada al tema contexto web, si
analizamos la usabilidad no cambia su objetivo porque es universal.
Estamos seguros de que, una vez finalizada la revisión del video,

estará en la capacidad de responder lo siguiente: ¿ha logrado
identificar qué es un error de usabilidad?, ¿considera que existen
errores de programadores o errores de usabilidad?, ¿alguna vez se
ha encontrado con errores de usabilidad en sitios web, ¿cómo lo
han hecho sentir?, finalmente ¿cuáles son los componentes de la
usabilidad de acuerdo con el video propuesto?
40 MAD-UTPL
Semana 3
Estimado estudiante, durante esta tercera semana de estudio

avanzaremos con los aspectos de la usabilidad, estos se encuentran
relacionados con los desafíos a los que se ella se enfrenta y que
deben considerarse para que la gran mayoría del público pueda
utilizar un producto o servicio digital. Aquí intervienen temas como
la accesibilidad, el uso de las TIC en adultos mayores y en niños,
en fin, a la diversidad de personas o personalidades que existen a
nivel mundial y que tienen diferentes capacidades, el objetivo es
que absolutamente nadie se vea limitado. Seguro que con todas las
consideraciones que analizaremos, usted estará en la capacidad de
tener en cuenta la usabilidad en sus proyectos de diseño.
2.5. Aspectos de la usabilidad
Como ya se ha estudiado, la usabilidad se orienta mucho a la

facilidad de uso de un producto digital, en donde debemos considerar
que el servicio que este brinde ya sea en cuanto a contenidos y
funcionalidades sean fáciles durante su interacción con el usuario y
que se evidencien los objetivos que esta persigue – ¿los recuerda?:
eficacia, eficiencia y satisfacción.
Debemos ser conscientes que existen diferentes capacidades

humanas, así como motivaciones, personalidades, culturas, estilos
de trabajo y no podemos dejar de lado las diferencias físicas,
intelectuales y de personalidad de los usuarios que se convierten
en un gran desafío para los diseñadores de interfaces. Si somos
capaces de comprender cada una de estas diferencias se asegura
una ampliación de la cuota de mercado, es decir, una mayor
41 MAD-UTPL
participación de usuarios. Considerando las diferencias de las
capacidades humanas nos acercamos más al objetivo central de este
tema, que es el de atender las necesidades de todos los usuarios.
¿Cómo se lo lograría, tiene algo en mente?, analicemos lo expuesto a
continuación.
Con los productos digitales se debe pensar en que los diseños de

estos sean universalmente utilizables y con ello nos referimos a
considerar los desafíos que traen consigo las diferencias físicas,
cognitivas, perceptivas, de personalidad y cultural (Shneiderman et
al., 2018). Por lo tanto, también se debe considerar a usuarios con
discapacidades, adultos mayores y jóvenes. Revisemos con detalle
estos desafíos que se convierten en los aspectos a considerar dentro
de la usabilidad.
Variaciones en las aptitudes y lugares de trabajo físicos: en este

primer aspecto interviene la “ergonomía” que tiene como objetivo
adaptar el trabajo a las capacidades y posibilidades del ser humano,
esto ya es considerado también en el ámbito tecnológico y se tiene
en cuenta en productos de hardware y software, consiste en brindar
las adaptaciones para el uso del ser humano, por ejemplo, la postura
correcta para el uso del teclado, mouse y pantalla.
Ergonomía.- Según la Asociación Española de

Ergonomía, es el conjunto de conocimientos
de carácter multidisciplinar aplicados para la
adecuación de los productos, sistemas y entornos
artificiales a las necesidades, limitaciones y
características de sus usuarios, optimizando la
eficacia, seguridad y bienestar.
42 MAD-UTPL
Analicemos lo siguiente:
Los parámetros de diseño del teclado de un teléfono móvil

(colocación, tamaño, distancia entre teclas, etc.), evolucionaron
para acomodar las diferencias en las capacidades físicas de
los usuarios, las personas con manos especialmente grandes
o pequeñas pueden tener dificultades para utilizar teléfonos
celulares o teclados estándar, pero una fracción sustancial de
la población está bien atendida por un diseño.
Las preferencias en cuanto al brillo de la pantalla varían

de acuerdo con las necesidades del usuario, por lo que los
diseñadores suelen permitir a los usuarios controlar este
parámetro.
Para regular los controles de la altura de un asiento y el

respaldo de las sillas y para los ángulos de visualización
también se permite un ajuste individual.
Por lo tanto, cuando un solo diseño no se puede acomodar a una

gran fracción de la población, las versiones múltiples o los controles
de ajuste son útiles.
Dentro de este ámbito también se debe considerar la visión, ya que

nos podemos encontrar con usuarios que tienen deficiencias de
color. Por lo que los diseñadores necesitan estudiar el parpadeo,
el contraste, la sensibilidad al movimiento y la percepción de la
profundidad, así como el impacto del deslumbramiento y la fatiga
visual, además de contemplar las necesidades de las personas que
usan lentes correctivos, tienen problemas de visión o son ciegos.
También son importantes otros sentidos, por ejemplo, el tacto para
la entrada en el teclado o la pantalla táctil y el oído para las señales
auditivas, los tonos y la entrada o salida del habla.
43 MAD-UTPL
Las capacidades físicas mencionadas influyen en los elementos del
diseño de los sistemas interactivo, además del diseño del lugar de
trabajo. En la tabla 4, se presentan las consideraciones a tener en
cuenta para los lugares de trabajo en el sector de la informática dado
por el estándar ANSI/HFES 100 – 2007 Ergonomic Standard. Human
Factors Engineering of Computer Workstations.
En la figura 7, se ilustran algunas de las consideraciones en una

estación de trabajo informática. Uno de los dispositivos más
utilizados en cualquier espacio hoy en día son los móviles, por lo que
los diseñadores deben tener en cuenta aspectos como la iluminación,
el ruido, el movimiento y la vibración, ya que forman parte de la
experiencia del usuario.
Tabla 4.
Consideraciones para una estación de trabajo informática.
Consideraciones para una estación de trabajo informática.

Altura de la mesa de trabajo y del soporte de la pantalla.
Espacio libre bajo la superficie de trabajo para las piernas.
El ancho y la profundidad de la superficie de trabajo.
Ajuste de alturas y ángulos para sillas y superficies de trabajo.
Profundidad y ángulo del asiento, altura del respaldo y apoyo lumbar.
Disponibilidad de reposabrazos, reposapiés y reposa manos.
Fuente: Eppler, M. (2010). Overview of the ANSI / HFES 100 -2007 Ergonomic
Standard. In Computer Workstations (pp. 2010–2010).
44 MAD-UTPL
Figura 7.
Ergonomía en puestos informáticos.
1 La silla 2 Los codos

Debe ser ergonómica, la espalda Deben estar o
debe permanecer recta y permanecer a 90 grados.
apoyada en el espaldar.
3 El horizontal visual
Debe ir paralelo a la parte
superior de la pantalla.
4 Las rodillas
Deben formar un ángulo de 90
grados, con o sin apoyapies.
5 Los antebrazos
Deben ir apoyados
sobre el escritorio.
6 El teclado y el mouse
Deben ir alineados, para que solo
tengamos que mover el antebrazo.
Fuente: Mucho Mejor Ecuador. (2018, July 31). Salud laboral, cuida tu
postura y cuidarás tu cuerpo. Muchomejorecuador.Org.Ec.
45 MAD-UTPL
Diversas habilidades cognitivas y perceptivas: los diseñadores
deben comprender las capacidades cognitivas y perceptivas de los
usuarios, puesto que la experiencia y el conocimiento de fondo en
los ámbitos de las tareas y las interfaces desempeñan un papel
fundamental en el aprendizaje y el rendimiento. Ergonomics Abstracts
clasifica los procesos cognitivos humanos de la siguiente manera:
Memoria a corto plazo y memoria de trabajo.

Memoria semántica y a largo plazo.
Resolución de problemas y razonamiento.
Toma de decisiones y evaluación de riesgos.
Comunicación y comprensión del lenguaje.
Búsqueda y memoria sensorial.
Aprendizaje, desarrollo de habilidades, adquisición de
conocimientos y logro de conceptos.
Ergonomics Abstracts indica también un conjunto de factores que

afectan al rendimiento perceptivo y motor:
Estimulación y vigilancia.
Fatiga y privación del sueño.
Carga perceptiva (mental).
Conocimiento de resultados y retroalimentación.
Monotonía y aburrimiento.
Falta sensorial.
Nutrición y dieta.
Miedo, ansiedad, humor y emoción.
Drogas, tabaco y alcohol.
Ritmos fisiológicos.
46 MAD-UTPL
Diferencias de personalidad: existe infinidad de preferencias
y estilos de interacción, por ejemplo, hay personas que están
ansiosas por utilizar diferentes tipos de dispositivos y en cambio
otras los encuentran frustrantes. Es necesario contar con una clara
comprensión de la personalidad y los estilos cognitivos para diseñar
interfaces para diversas comunidades de usuarios.
Por ejemplo, entre hombres y mujeres existe una gran diferencia y

clara, se conoce que la mayoría de los jugadores y diseñadores de
videojuegos son hombres jóvenes, algunos juegos (como The SimsTM,
Candy Crush Saga y Farmville) atraen a un gran número de mujeres.
Otro caso puede ser la manera en cómo se organizan los correos
electrónicos, o cómo procede una u otra persona ante un producto
digital, todo ello dependerá de la personalidad lo cual da a entender
que los diseños deben enfocarse a satisfacer diversos requisitos.
Diversidad cultural e internacional: la tecnología se ha expandido

alrededor de todo el mundo por lo que es necesario considerar cada
uno de los aspectos culturales al momento de diseñar productos
digitales ya que todo esto incide en la manera de interactuar, es decir,
algunos usuarios se van a sentir cómodos con los enlaces hacia
diversos puntos en una página o aplicación y a otros les resultará
complejo e incómodo. Para un diseñador es imprescindible que
piense siempre en la internacionalización del producto, esto por el
mismo hecho que las computadoras, dispositivos y aplicaciones
crecen cada vez en el mercado mundial, es por ello, que para
desarrollar diseños eficaces las empresas realizan estudios de
47 MAD-UTPL
usabilidad con usuarios de diferentes países, culturas y comunidades
lingüísticas ya que es necesario considerar las diversas necesidades
de los estos con conocimientos lingüísticos y acceso a la tecnología
muy diferente.
Algunas de las preocupaciones de diseño de para la

internacionalización incluyen:
Caracteres, números, caracteres especiales y diacríticos (signo

ortográfico, que sirve para modificar el valor de una letra o de
un signo de representación fonética).
Introducción y lectura de izquierda a derecha y de derecha a

izquierda.
Formatos de fecha y hora.
Formatos numéricos y de moneda.
Pesos y medidas.
Números de teléfono y direcciones.
Nombres y títulos (Sr., Sra., Dr.).
Números de seguridad social, identificación nacional y

pasaporte.
Capitalización y puntuación.
48 MAD-UTPL
Secuencias de clasificación.
Iconos, botones y colores.
Pluralización, gramática y ortografía.
Etiqueta, políticas, tono, formalidad y metáforas.
Usuarios con discapacidad: la inclusividad y la accesibilidad son

temas que han ido tomando fuerza en todos los ámbitos sociales,
por lo que la tecnología al ser universal también debe considerarlos
al momento de diseñar cada uno de sus elementos, por ello cuando
los contenidos y servicios digitales pueden presentarse de manera
flexible en diferentes formatos, todos los usuarios se benefician
(Horton & Quesenbery, 2014). Para los usuarios con discapacidad
ya no es un problema acceder a dichos contenidos puesto que
se cuenta con diversidad de dispositivos de entrada/salida que
les permite acceder a los diferentes servicios y contenidos, por
ejemplo, los usuarios ciegos pueden utilizar lectores de pantalla
mediante salida de voz como JAWS o VoiceOver de Apple, o
pantallas refrescantes de braille, mientras que los usuarios con
poca visión pueden utilizar la ampliación. Para los usuarios con
problemas de audición es posible utilizar subtítulos en los vídeos y
transcripciones de audio, y las personas con destreza limitada u otras
discapacidades motoras pueden utilizar el reconocimiento de voz, el
seguimiento ocular o teclados o dispositivos de puntería alternativos,
como el que se observa en la figura 8, en la cual un joven utiliza un
dispositivo de comunicación y control aumentativo montado en una
silla de ruedas para controlar un televisor estándar.
49 MAD-UTPL
Figura 8.
Dispositivo para comunicación y control en usuarios con discapacidad.
Fuente: Shneiderman, B., Plaisant, C., Cohen, M., Jacobs, S., & Diakopoulos,
N. (2018). Designing the user interface strategies for effective human-
computer interaction. In Pearson (Sixth Eidi). Pearson Education Limited.
El diseño para la accesibilidad ayuda a todos, ya que los usuarios

están cada vez más en movimiento y experimentan “impedimentos
situacionales”. Para que las personas con discapacidad puedan
utilizar la tecnología, sus interfaces deben ser accesibles y para
ello existen estándares internacionales como la “Guidance on
Applying WCAG 2.0 to Non-Web Information and Communications
Technologies” (WCAG2ICT) que describe cómo pueden aplicarse
las Pautas de Accesibilidad al Contenido en la Web – WCAG
2.0 a las TIC. Este estándar tiene el fin de apoyar soluciones de
accesibilidad armonizadas en toda una serie de tecnologías. En
50 MAD-UTPL
países como Estados Unidos y en la Unión Europea, la accesibilidad
se ha convertido en una exigencia, puesto que es considerada una
característica esencial de los sistemas de información (durante
todo su ciclo) con el fin de proporcionar un servicio valioso y útil a
todo usuario y sin que esto represente un mayor esfuerzo durante el
desarrollo.
Debemos pensar que, con esta nueva realidad o normalidad, la

tecnología en un escenario de post-pandemia se expandirá aún más
ya que la gran mayoría de las actividades se realizan con el apoyo
de ella. Por ello debemos garantizar la accesibilidad y la igualdad
de acceso a la gran diversidad de la población, mediante un buen
diseño, normas de codificación apropiadas y pruebas y evaluaciones
adecuadas, con ello cuando las personas con discapacidad tienen
acceso a los contenidos y servicios digitales en condiciones
de igualdad, tienen acceso a toda la gama de oportunidades
económicas.
Seguro que ha identificado la importancia de este aspecto por lo que

lo invitamos a profundizar en la revisión del estándar W3C – Web
Accesibility Initiative.
Usuarios adultos: este es también un aspecto muy importante y

necesario en el cual los diseñadores deben comprender los factores
humanos del envejecimiento con el fin de crear interfaces de usuario
que faciliten el acceso de los usuarios adultos mayores.
Todos sabemos que conforme avanza la edad se van produciendo

cambios progresivos en el funcionamiento fisiológico y psicológico,
esto quiere decir que algunos de nuestros sentidos van cambiando,
esto se presenta por ejemplo en la agudeza visual y auditiva, la
fuerza y la velocidad de respuesta. Sin embargo, debemos también
pensar en el lado positivo del avance de la edad, ya que seguramente
dejará mucha experiencia que puede ser muy útil para la población
más joven. Si lo analizamos desde ese punto también podemos ver
51 MAD-UTPL
el resultado de considerar que las adaptaciones en diseño y en las
interfaces que se apliquen para los adultos mayores además del
beneficio para ellos, todos los demás usuarios nos veremos también
beneficiados, por ejemplo, el hecho que los semáforos sean más
brillantes y la iluminación nocturna sea mejor para que la conducción
sea más segura para conductores y peatones. Si analizamos desde
el punto de la tecnología esto puede verse reflejado en proporcionar
el control sobre el tamaño de las fuentes, el contraste de la pantalla y
los niveles de audio, el fin es brindarles un mejor acceso.
Los elementos por considerar para este tipo de público deben

orientarse a reducir la carga cognitiva, la dificultad perceptiva y
las exigencias de control motor, como por ejemplo un software de
autocompletado para reducir las pulsaciones que deben realizar.
Otro punto muy importante es el de tratar de reducir el miedo y la
creencia de que son incapaces de utilizar algún producto digital, las
interfaces deben ayudar a que esos temores se reduzcan a través
de experiencias positivas, si ellos tienen la oportunidad de superar
un reto y obtener una sensación de logro y dominio será útil para
hacerlos sentir mejor.
¿Qué cree que resulte más sencillo para un adulto mayor, el uso de
un mouse o una pantalla táctil?, seguro que su respuesta será la
pantalla verdad, pues de acuerdo con estudios en esta temática se ha
logrado confirmado que realmente es así. Es importante identificar
todas las pautas e iniciativas que existen a nivel internacional
para orientar el diseño hacia interfaces de utilidad para los adultos
mayores, revise el sitio de Human Factors & Ergonomics Society
– HFES, en donde podrá profundizar aún más sobre este tema. En
la figura 9, se puede observar la alegría que puede llevar las TIC a
cualquier tipo de persona, en este caso a los adultos mayores, por el
hecho de aprender algo diferente y sentirse útiles, y por el medio de
acercarse a sus familiares lejanos, sobre todo en la situación actual,
de pandemia.
52 MAD-UTPL
Figura 9.
Uso de las TIC por los adultos mayores.
Fuente: Notipress. (2020, April 30). Adultos mayores se acercan más a la

tecnología por confinamiento. Matutinografico.Com.
Niños: los niños también son un aspecto para tener en cuenta al

momento de diseñar y crear interfaces, ya que son una comunidad
muy amplia. El objetivo es el de permitir que ellos desarrollen más
habilidades considerando la capacidad de creatividad lúdica en el
arte, la música y la escritura y generar mayor valor en las actividades
educativas de ciencias y matemáticas, esto permite que ellos
enriquezcan sus experiencias de aprendizaje, apoyen su desarrollo
personal y social.
Se debe prestar mucha atención porque aquí existe también una

amplia diversidad en el público objetivo, como por ejemplo niños
pequeños o adolescentes, en donde cada uno tiene características
diferentes, así como el uso o la interacción que realicen, por ejemplo,
el diseñar para los niños más pequeños requiere prestar atención a
sus limitaciones, a la capacidad de abstracción y de atención que
tienen, por lo que es necesario evitar las secuencias complejas a
menos que participe un adulto. Además, los diseñadores de software
infantil tienen la responsabilidad de prestar atención a los peligros
por ejemplo en los entornos web, donde el control parental sobre el
53 MAD-UTPL
acceso a materiales violentos, racistas o pornográficos es necesario.
En la figura 10 se representan algunas de las opciones tecnológicas
que apoyan a los niños y a los que la gran mayoría tienen acceso,
pero será que existen puntos negativos tal como lo acabamos de
mencionar, eso queda para la reflexión…
Figura 10.
Niños y TIC.
Fuente: viviendomas.com. (2020). Pros y contras del uso de tecnología para

niños. Viviendomas.Com.
Aquí también es importante considerar que no todos los niños tienen

los recursos económicos y de aprendizaje adecuados por lo que
se les complica acceder a la tecnología y también generan temor
de utilizarla y llegado el caso a sentir frustración. Este aspecto es
muy importante para desarrollar interfaces que apoyen a este grupo
vulnerable.
54 MAD-UTPL
Hardware adaptable y diversidad de software: como ya se ha
mencionado, la tecnología cada día evoluciona presentando nuevos
dispositivos que son mucho más veloces, nuevos softwares que
automaticen aún más nuestras rutinas en diversos sectores, nuevas
formas de conectividad, etc., por lo tanto, los diseñadores deben
considerar la compatibilidad entre lo nuevo y lo antiguo.
De acuerdo con (Shneiderman et al., 2018) se mencionan tres

principales retos técnicos en cuanto a hardware y software: De
acuerdo con (Shneiderman et al., 2018) se mencionan tres principales
retos técnicos en cuanto a hardware y software:
1. Producir una interacción satisfactoria y eficaz con Internet

en conexiones de alta velocidad (banda ancha) y más lentas
(Dial-up y algunas inalámbricas). Ya se han producido algunos
avances tecnológicos en los algoritmos de compresión para
reducir el tamaño de los archivos de imágenes, música,
animaciones e incluso vídeo, pero se necesitan más. Se
necesitan nuevas tecnologías para permitir la precarga o las
descargas programadas. El control por parte del usuario, de la
cantidad de material descargado por cada solicitud también
podría resultar beneficioso, por ejemplo, permitir a los usuarios
especificar que una imagen grande se reduzca a un tamaño
menor, que se envíe con menos colores, que se convierta en
un dibujo lineal simplificado, que se sustituya por una simple
descripción de texto o que se descargue por la noche, cuando
las tarifas de Internet son quizás más bajas.
55 MAD-UTPL
2. El diseño responsivo permite acceder a los servicios web
desde pantallas grandes (3200 x 2400 píxeles o más) y
dispositivos móviles más pequeños (1024 x 768 píxeles o
menos). Reescribir cada página web para diferentes tamaños
de pantalla puede producir la mejor calidad, pero este enfoque
es probablemente demasiado costoso y lento para la mayoría
de los proveedores web. Herramientas informáticas como las
hojas de estilo en cascada (CSS) permiten a los diseñadores
especificar su contenido de forma que se puedan realizar
conversiones automáticas para una gama cada vez mayor de
tamaños de pantalla.
3. Apoyan el mantenimiento fácil o la conversión automática a

múltiples idiomas. Los operadores comerciales reconocen que
pueden ampliar sus mercados si pueden ofrecer acceso en
varios idiomas y en varios países. Esto significa aislar el texto
para permitir una fácil sustitución, elegir las metáforas y los
colores apropiados y atender a las necesidades de las distintas
culturas.
Actividad 1: uno de los estándares que más destaca en cuanto a

la usabilidad es el de la accesibilidad web a través del W3C – Web
Accesibility Initiative, le recomendamos analizar con mayor detalle el
sitio web. Como nuestra asignatura está orientada al diseño, lo invito
a analizar las sugerencias que brinda este estándar en cuanto al
Diseño para accesibilidad web (inglés).
El objetivo principal de esta actividad es que identifique la necesidad

de contemplar estas buenas prácticas para garantizar la usabilidad
a todos los usuarios, incluyendo a quiénes tienen discapacidades.
56 MAD-UTPL
Antes de analizar está página ¿conocía de estás buenas prácticas
para considerar en sus diseños?, si no las conocía no importa, pero
ahora que ya sabe de ellas es imprescindible incluirlas y no perderlas
de vista.
Actividad 2: realice la lectura del siguiente REA, Lecture 1: Usability,

en él puede encontrar directrices de cómo crear interfaces de usuario
efectivas considerando la usabilidad.
Estimado estudiante, mediante la autoevaluación usted pondrá a

prueba lo aprendido hasta el momento.
57 MAD-UTPL
Autoevaluación 2

1. Hace referencia a lo fácil de utilizar un producto:
a. HCI.
b. Interactividad.
c. Usabilidad.
2. Cuando hablamos de mejora de la usabilidad de un producto,

es necesario incluir también a:
a. La facilidad de uso.
b. La accesibilidad.
c. La productividad del usuario.
3. ¿Cuáles son los objetivos de la usabilidad?
a. Eficacia, eficiencia y satisfacción.

b. Tiempo de respuesta, velocidad de ejecución y
satisfacción.
c. Precisión, expectativa y eficiencia.
4. Es la precisión y exhaustividad con la que los usuarios alcanzan

los objetivos especificados:
a. Eficacia.
b. Eficiencia.
c. Satisfacción.
58 MAD-UTPL
5. Son motivaciones de la usabilidad:
a. Clientes electrónicos y social media, juegos, interfaces

colaborativas.
b. Capacidades físicas, ergonomía, habilidades cognitivas.
c. Interfaces colaborativas, habilidades cognitivas, entornos
profesionales.
6. Considera la adecuación de los productos, sistemas y entornos

artificiales a las necesidades, limitaciones y características de
sus usuarios, optimizando la eficacia, seguridad y bienestar.
a. Usabilidad.
b. Ergonomía.
c. Accesibilidad.
7. ¿Cuál es el estándar internacional enfocado a la ergonomía?.
a. W3C.
b. ISO.
c. ANSI/HFES 100 – 2007.
8. ¿Cuál es el aspecto de la usabilidad que hace referencia a

estilos lingüísticos?
a. Diversas habilidades perceptivas.

b. Diferencias de personalidad.
c. Diversidad cultural e internacional.
9. ¿Cuál es el estándar internacional enfocado a la accesibilidad?
a. W3C.
b. ISO.
c. ANSI/HFES 100 – 2007.
59 MAD-UTPL
10. El aspecto de hardware adaptable y diversidad de software se
refiere a:
a. Considerar la compatibilidad entre lo nuevo y lo antiguo.

b. Permitir el desarrollo de habilidades considerando
la capacidad de creatividad y apoyar a su desarrollo
personal y social.
c. Crear interfaces de usuario que faciliten el acceso de los
usuarios adultos mayores.

60 MAD-UTPL
Explica cómo la interfaz de
usuario y la usabilidad se
afectan mutuamente.
Resultados de
aprendizaje 3 Selecciona un estilo de
interacción de interfaz de
usuario apropiado para una
tarea.
Estimado estudiante, durante esta semana damos inicio a la unidad

3 con el tema experiencia de usuario, muy conocida como UX por
sus siglas en inglés. Usted reconocerá como poco a poco se va a ir
introduciendo en la magia del proceso de diseño y modelado, que
cada vez va adquiriendo mayor fuerza en el aspecto tecnológico. Para
alcanzar los resultados de aprendizaje planteados, usted estudiará
los conceptos fundamentales y el proceso de UX, lo que le permitirá
conocer el camino para llegar a una interfaz de usuario considerando
aspectos como usabilidad y métodos de selección de interacción.
Empecemos…
Semana 4
61 MAD-UTPL
Unidad 3. Experiencia de usuario
3.1. Introducción
De acuerdo con el estudio de (Córdoba, 2013), se indica que la

experiencia de usuario, (User Experience – UX, por sus siglas en
inglés), se ha acuñado a la experiencia que tiene un usuario cuando
interactúa con un producto tecnológico. ¿Cómo lograrlo?, mediante el
uso de varios métodos que abordaremos a lo largo de este texto guía.
Pero muy bien, ¿qué es la UX?, veamos las siguientes definiciones
recopiladas en la tabla 5:
Tabla 5.
Tabla Definiciones de UX.
Autor Definición
(International La UX representa las percepciones y respuestas del usuario que
Organization for resultan del uso y/o uso anticipado de un sistema, producto
Standardization, o servicio. En donde, las percepciones y respuestas de los
2010) usuarios incluyen las emociones, creencias, preferencias,
percepciones, comodidad, comportamientos y logros de
los usuarios que se producen antes, durante y después del
uso. También se menciona que la UX es una consecuencia
de la imagen de marca, la presentación, la funcionalidad, el
rendimiento del sistema, el comportamiento interactivo y las
capacidades de asistencia de un sistema, producto o servicio.
También es el resultado del estado interno y físico del usuario
que resulta de las experiencias, actitudes, aptitudes, habilidades
y personalidad anteriores y del contexto de uso.
62 MAD-UTPL
Autor Definición
(Turner, 2017) En este libro se mencionan que se han adoptado tres
perspectivas centradas en el producto, centrada en el usuario y
centrada en la interacción para agrupar las definiciones de UX
y establecerla como la “usabilidad del nuevo milenio”. En donde
incluye la usabilidad (el atributo más importante), accesibilidad,
la diversión y la estética en función del contexto. Además, se
menciona que la experiencia es el resultado de hacer cosas con
las cosas (productos digitales) del mundo.
(Hartson & Pyla, Manifiestan que la UX es algo que está totalmente en la cabeza
2012) del usuario y puede verse afectada por más cualidades de
diseño que la usabilidad por sí sola. Siendo estas cualidades
la utilidad, integridad funcional, usabilidad, persuasión y diseño
gráfico.
En su libro indican que han expandido el alcance de la

experiencia del usuario para incluir:
1. Efectos experimentados debido a factores de usabilidad.

2. Efectos experimentados debido a factores de utilidad.
3. Efectos experimentados debido a factores de impacto
emocional.
Fuente: elaborado por el autor.
Utilidad.- Se refiere a la importancia o interés del

contenido de un sitio web: información, productos
o servicios que ofrece) para el visitante.
Integridad funcional.- Medida en que un sitio web

funciona como se pretende y a la calidad continua,
por ejemplo, sin enlaces rotos.
La verdadera UX va mucho más allá de dar a los clientes lo que

dicen que quieren, para lograr una UX de alta calidad debe existir la
combinación perfecta de los servicios de múltiples disciplinas, entre
ellas la ingeniería, la comercialización, el diseño gráfico e industrial y
el diseño de interfaz.
63 MAD-UTPL
Entonces, ¿por qué es importante la UX?, porque cambia la vida de
las personas, desde médicos que puedan hacer diagnósticos más
precisos, niños que pueden aprender de forma más eficaz y que los
usuarios con discapacidades pueden llevar vidas más productivas.
A continuación, conozcamos cómo lograrlo, identificando el proceso

que debemos considerar para la UX.
3.2. El proceso de UX
Es importante seguir una estrategia a la hora de implementar

cualquier técnica, y esta no es la excepción, se cuenta con un
proceso o ciclo de vida definido para la UX, esto con el objetivo de
seguir las etapas y actividades que correspondan para lograrla. En la
figura 11, se presenta el ciclo de vida propuesto en (Hartson & Pyla,
2012).
64 MAD-UTPL
Figura 11.
Proceso o ciclo de vida de la UX.
Diseño
Volver a la
Volver a la Crear conceptos de Iterar actividad de
actividad de diseño de interacción. esarrollo
desarrollo anterior
anterior.
Iterar
Prototipo
Comprender el trabajo
Realizar alternativas
y las necesidades del
de diseño.
usuario.
Análisis
Iterar
Volver a la
Volver a la Verificar y actividad de
activiad de Iterar perfeccionar el diseño desarrollo
desarrollo de interacción. anterior.
anterior. Evaluación
Fuente: Adaptado de Hartson Rex, & Pyla Pharda. (2012). The UX Book
Process and Guidelines for Ensuring a Quality User Experience.
El ciclo de vida se encuentra formado por cuatro actividades: el

análisis, el diseño, el prototipo y la evaluación. A continuación,
analizaremos qué es y qué se contempla en cada una de las
actividades.
Ciclo de vida de la UX
Algo importante del ciclo presentado en la figura 11, es que en cada

fase o actividad existe una evaluación, todo el ciclo de vida está
centrado en la evaluación, con el fin de probar, inspeccionar, analizar
con el cliente o usuario y recibir su feedback.
65 MAD-UTPL
Muy bien ahora que conocemos sobre el proceso que nos lleva a una
verdadera UX, vamos a iniciar con las actividades y subactividades.
¡Ánimo y mucha atención!
3.3. Investigación de usuario
Es momento de iniciar con la investigación y tener claro que con ella

lograremos obtener información de los usuarios, esto con el objetivo
de añadir contexto y generar conocimiento más profundo en el
proceso de diseño de UX.
Analicemos ¿por qué es importante conocer a nuestro usuario, a

quién nos estamos dirigiendo?, ¿por qué es necesario identificar los
problemas y sus necesidades? y profundizando aún más, ¿por qué es
necesario conocer sus gustos y costumbres? Al responder esto, nos
daremos cuenta que realmente estamos acercándonos de manera
más precisa a esa solución óptima que le brinde realmente una
experiencia satisfactoria y de utilidad, que marque una verdadera
diferencia en él.
¿Cómo lograr conocer más a fondo a nuestro usuario e identificar las

necesidades precisas de este?
Esto es posible lograrlo mediante los métodos de ¡investigación!,

seguramente se está preguntando cómo o de qué forma. La
investigación acorde con su definición es la acción de ampliar el
66 MAD-UTPL
conocimiento en un ámbito específico, por lo tanto, no es nada
descabellado que apliquemos métodos de investigación para ampliar
nuestro conocimiento de los usuarios, ya revisaremos con detalle
cada uno de esos métodos.
Al momento de introducir la investigación en UX se permite que los

equipos de diseño:
1. Obtengan más información de los usuarios al momento de

diseñar productos y/o servicios.
2. Validen las hipótesis planteadas.
3. Disminuyan los costos de un producto que cuenta con mayor
probabilidad de éxito.
Destacando aún más la importancia de la investigación es porque

nos permitirá crear afinidad, empatía y como resultado brindar
una buena experiencia al usuario, ya que está en la mayoría de las
ocasiones vende mucho más que un simple producto. En nuestros
días se da mucha más relevancia al valor experimental o vivencial
que el valor material o económico y es ahí es ahí el éxito o fracaso de
un gran producto.
Para diseñar una buena UX, es necesario que este usuario se

encuentre involucrado en el proceso del diseño de nuestro producto
y esto lo hacemos desde el primer momento, apoyados con la
investigación en UX a través de varias técnicas, tanto cuantitativas
(por ejemplo, encuestas o test de usabilidad en remoto) como
cualitativas (por ejemplo, entrevistas o focus group).
Lo invitamos a revisar el siguiente video ¿Qué es investigación de

usuario? User research, con el fin de esclarecer más la temática
propuesta.
67 MAD-UTPL
Una vez identificada la importancia de la investigación, dirijámonos
a aplicarla en beneficio de brindar un producto o servicio que brinde
una sensación de satisfacción en nuestros usuarios, este es el fin
para perseguir, pero el medio será ese diseño inicial lo que nos
conlleve a garantizarlo.
Retomemos que la UX es la experiencia que tiene una persona

cuando interactúa con un producto en condiciones particulares,
teniendo en cuenta además los factores culturales (hábitos o
religión) y sociales (presión de éxito o fracaso), podemos analizar
esta relación a través de la figura 12.
Figura 12.
Factores culturales y sociales de la UX.
Cultural
Usuario/Producto
Contexto de uso Social
Fuente: Elaborado por el autor
68 MAD-UTPL
La investigación en UX permite generar conocimiento más profundo
en el proceso de diseño de UX, de esta forma tenemos más
información de los usuarios para diseñarle productos y/o servicios. El
investigar se trata de entender bien un problema antes de resolverlo,
es muy importante identificar desde el primer momento cuál es el
problema para que luego seamos capaces de identificar una solución
que aporte valor al usuario. Por lo tanto, investigar nos permite
entender, empatizar y generar conocimiento.
Empatizar.- Es la capacidad de identificarse con

algo o alguien, compartir sus sentimientos.
Es necesario contar con una buena planificación de la investigación,

esto es clave para asegurar el éxito del proyecto, además de
convencer internamente al cliente del valor de esta fase. Para lograrlo
se deben tener en cuenta las fases de la investigación, que de manera
general conllevan las planteadas en la figura 13.
Figura 13.
Fases de la investigación.
Análisis de la situación. Visión amplia del problema.
Planteamiento de los objetivos e

Investigación preliminar.
hipótesis de la investigación.
Planificación de la Elección del tipo de investigación, fuentes

investigación. de información, tiempos y costos.
Aplicar las técnicas de investigación

Recolección de la
necesarias que permitan la adquisición
información.
de la información requerida.
Análisis de la información. Sintetizar los datos obtenidos.
Recopilación de los
Obtención de resultados de valor.
resultados.
69 MAD-UTPL
3.3.1. Técnicas de investigación cualitativa y cuantitativa
De acuerdo con el tipo de información que queremos recopilar,

se puede clasificar las técnicas de investigación en cualitativas y
cuantitativas. En la figura 14 se presenta un extracto de estás dos
técnicas.
Figura 14.
Clasificación de técnicas de investigación cualitativa y cuantitativa.
Investigación cualitativa Investigación cuantitativa
Responden el ¿por qué? Responden ¿cuátos?
Entrevistas en
Encuestas
profundidad
Etnografía Analítica online
Test usabilidad en
Focus Group
remoto
A continuación, analizaremos en detalle cada una de las técnicas,

tanto de la investigación cualitativa como cuantitativa:
70 MAD-UTPL
Investigación cualitativa: trata de responder el por qué, tienen
un enfoque exploratorio que generan datos sobre conductas
o actitudes que se basan en la observación, esto permite
hacer preguntas e investigar el comportamiento, lo que
permite comprender la naturaleza y la cualidad de la conducta
humana y los motivos de esta conducta y lo hace mediante
el estudio de fenómenos no observables directamente, como
los pensamientos, creencias, opiniones o motivaciones. Sus
muestras son reducidas pero representativas.
Para (Herrera, 2017), la investigación cualitativa extrae
descripciones a partir de observaciones que adoptan la forma
de entrevistas, narraciones, notas de campo, grabaciones,
transcripciones de audio y vídeo cassettes, registros escritos de
todo tipo, fotografías o películas y artefactos.
Técnicas de investigación cualitativas: algunas de las técnicas

de investigación cualitativas más utilizadas son las que se
mencionaron en la figura 14, las entrevistas, etnografía y focus
group. En este caso nos enfocaremos en la entrevista.
Entrevista en profundidad: es una conversación estructurada

en la que interesa identificar su perfil personal a través de
sus gustos o preferencias, conocer su ocupación, trabajo,
contexto, residencia, nivel de “expertise” con la tecnología,
sus motivaciones y frustraciones (en dónde ve problemas
o barreras), sugerencias o soluciones que ellos ya lo han
pensado. De manera general se puede decir que esta técnica de
investigación cualitativa permite recopilar información sobre el
comportamiento, actitud y percepción de nuestros usuarios.
Es posible apoyarse en los siguientes elementos para definir
nuestra entrevista:
1. Definición de la muestra: es necesario tener en cuenta

que lo importante no es el número de casos sino
reconocer el potencial que pueda tener cada uno de los
entrevistados. Se recomienda entrevistar entre 9 y 12
personas, y que en este grupo exista alguna novata y
otra experta en el uso o conocimiento de un producto o
71
servicio. MAD-UTPL
2. Captación y localización de los entrevistados: es
necesario contar con una muestra bien distribuida y que
el ambiente en donde se desarrolle sea cómodo.
3. Pauta de moderación: definir una lista de los temas a

cubrir con el entrevistado, es necesario tener mente
abierta para ampliar el guion en el caso que se requiera.
Es importante validarlo con el fin de garantizar que
las preguntas responden a nuestros objetivos de la
investigación y nos permite comprobar la hipótesis.
La estructura de la entrevista debe incluir:
1. Recibimiento: brindar un cálido recibimiento al

entrevistado, sonreír y tranquilizarlo. Es necesario grabar
las entrevistas por lo que esto debe ser indicado y pedir la
firma de consentimiento.
2. Contextualización: se deben elaborar preguntas que

permitan identificar las aficiones del entrevistado con
el objetivo de comprender o interpretar sus futuras
reacciones y respuestas.
3. Preguntas de investigación: en este punto hacemos las

preguntas puntuales sobre nuestra investigación y si ya
contamos con el prototipo es necesario presentarlo en
este momento.
4. Cierre de la entrevista: antes de finalizar se puede hacer

un resumen de las ideas claves de la entrevista, si es
necesario aclarar dudas y plantear la interrogante de
cómo sería su producto y/o servicio ideal para concluir
con ideas concretas. Agradecer su apoyo.
72 MAD-UTPL
Importante: durante una entrevista es importante hacer sentir
cómodo al usuario, además es necesario estar atentos a las
actitudes no verbales, sus reacciones, comportamiento. Demostrar
interés por lo que está contando el entrevistado, pero de manera
neutral, no se debe emitir ninguna opinión, recuerda que nos interesa
conocerlo a él. Para esta técnica se puede apoyar con mapas
mentales – Mind map, que permitan tomar notas rápidas de la
entrevista y luego clasificarlas. En la web hay varias herramientas
disponibles como por ejemplo MindMeister o GoConqr.
Investigación cuantitativa: trata de responder cuántos, tienen

un enfoque descriptivo-causal que permite recopilar gran
cantidad de información y obtener datos estadísticos con el fin
de medir, recopilar datos sobre el comportamiento y actitudes a
través de encuestas o analíticas online.
Encuestas: permiten extraer un conocimiento detallado sobre
un tema. De acuerdo con el momento de intercepción se puede
definir diferentes tipos de cuestionarios: antes, durante o
después de la experiencia.
y Antes de la experiencia: podemos conocer cuáles son los

prejuicios o motivaciones del usuario.
y Durante la experiencia: evaluamos o entendemos su

comportamiento.
y Después de la experiencia: se centra en la satisfacción de

haber cumplido o no el objetivo.
Existen diferentes tipos de preguntas, tal como se observan en la

tabla 6:
73 MAD-UTPL
Tabla 6.
Tipos de preguntas para cuestionarios
Según número de
Según propiedades Según tipo de respuesta
respuestas
Sociodemográficas Única Cerradas
Socioeconómicas
Actitudes Múltiple Semicerradas
(Limitada – Ilimitada)
Comportamiento Múltiple dicotómica Abiertas
En el estudio de (Vesselov & Davis, 2019), se manifiesta que

aplicar una encuesta a los usuarios de un sistema, ayuda a
comprender el estado de este, lo que es necesario cambiar o
se puede agregar con el fin de que el sistema sea más eficaz y
eficiente.
Ahora, es muy importante que tengamos en cuenta que según lo que

tratemos de comprender es posible también clasificar las técnicas de
investigación en actitud o comportamiento. En la figura 15 podemos
observarlas gráficamente.
La actitud responde a la pregunta ¿qué dicen los usuarios?, trata

de comprender o medir las creencias que las personas nos dicen
que tienen. El comportamiento busca comprender ¿qué hacen las
personas con un producto o servicio determinado?
Tal como se presenta en la figura 15, las entrevistas en profundidad,

focus group y encuestas son técnicas actitudinales y los test de
usabilidad, eyetracking y A/B testing son de comportamiento. Veamos
a continuación las descripciones de algunas de estas técnicas muy
utilizadas y que ayudan a iterar y revisar los componentes para que
se ajusten mejor a las necesidades de los usuarios.
74 MAD-UTPL
Figura 15.
Clasificación de técnicas de investigación de actitud y
comportamiento.
Actitud Comportamiento
Analizan el ¿qué dicen? Analizan el ¿qué hacen?
Entrevistas en
Test usabilidad
profundidad
Focus group Eyetracking
Encuestas A/B testing
Test de usabilidad: sirven para probar cómo los visitantes navegan

en un sitio web, por ejemplo. Es una serie de prácticas y pruebas
que se le hacen a una aplicación o un sitio web con el fin de
comprobar la manera en cómo se maneja (comodidad, facilidad o
complejidad), este tipo de prueba permite la reacción frente al diseño
y funcionalidad del producto a evaluar.
A/B testing: permite comparar dos versiones de un componente

y medir la eficacia de cada una para comprobar cuál de las dos
versiones es más eficiente. En la figura 16 se muestra un ejemplo
de la aplicación de esta técnica. Por lo tanto, es importante elegir la
técnica más adecuada según lo que se requiere investigar, esto debe
estar considerado dentro de la planificación de la investigación.
75 MAD-UTPL
Figura 16.
Ejemplo de A/B testing
Sign up Log in Myshop.com 2 items
New Woman Men Wishlist Outlet About us
89€
Buy it now
Fuente: Abtasty.com. (2020). A/B Testing, la guía definitiva: definiciones,

ejemplos y herramientas. Abtasty.Com.
Hemos finalizado nuestra semana de estudio y esperamos que haya

identificado la importancia de la etapa de investigación en el proceso
de UX y que esté muy animado por seguir avanzando con las demás.
Actividad 1: diríjase a la semana 14 del texto guía, ahí se propone

el caso: desarrollo de una aplicación móvil para fomentar la visita a
los parques urbanos de la ciudad de Loja, el objetivo es desarrollar
un prototipo integrando UX y UI. Analice el problema y céntrese en
los puntos 1 y 2 que corresponde a la primera actividad del proceso
de UX, el análisis mediante la investigación. Una vez cumplido
con lo indicado responda lo siguiente: ¿identifica cómo aplicar
la investigación y las técnicas aplicadas durante este proceso?,
¿cree que sería mejor utilizar diferentes técnicas a las propuestas?,
¿considera que las técnicas de investigación ayudan realmente a
conocer al usuario?
76 MAD-UTPL
Actividad 2: revise el video ¿Qué es investigación de usuario o User
Research?, en el encontrará un extracto del tema de investigación
de usuario y las técnicas a aplicar, en aproximadamente 7 minutos.
Lo invitamos a observarlo en su totalidad ya que sintetiza uno de los
temas estudiados durante esta semana.
Muy bien, ahora veamos lo que ha entendido dando respuesta a lo

siguiente: ¿la elección del método de investigación que vayamos a
aplicar de qué depende?, ¿se ha comprendido de dónde se obtienen
los datos cualitativos y cuantitativos?, finalmente identifica ¿cuáles
son métodos que se pueden utilizar para analizar el comportamiento?
Semana 5
Estimado estudiante, nos encontramos ya en la quinta semana de

estudio y avanzaremos con más elementos que son parte de las
actividades del proceso de UX. En esta ocasión nos centraremos 1)
en el análisis de los resultados que obtuvimos en la investigación y
2) a representarlos mediante técnicas como la creación de perfiles
de usuarios y mapas de empatía. El objetivo es identificar las
necesidades y motivaciones de los usuarios y documentarlos.
3.3.2. Análisis de resultados de investigación
Así como es importante la investigación de usuario lo es la

recopilación y el análisis de los resultados. Esta etapa nos ayuda a
sintetizar la información obtenida en la investigación con el objetivo
de tomar decisiones que apoyen en el proceso de diseño.
El análisis de los resultados consiste en organizar y darle sentido

a la información obtenida. Tal como analizamos durante la
semana anterior, conocemos que para la investigación tenemos
77 MAD-UTPL
las técnicas cuantitativas y cualitativas, por ejemplo, si para la
investigación cuantitativa aplicamos encuestas a través de un
software especializado, para esto, la información la tendremos ya
digitalizada y bastara con analizar los datos, pero para el análisis
de la investigación cualitativa es necesario agrupar la información y
sintetizarla. Es posible utilizar los siguientes apartados para realizar
la síntesis de la información:
Resumen de la información obtenida.

Patrones de comportamiento.
Verbatims: son las expresiones o frases literales del usuario,
esto aporta con ideas.
Motivaciones del/los usuarios.
Frustraciones del/los usuarios.
Todo este análisis sirve como punto de partida para generar nuestra
“persona” y el mapa de empatía que analizaremos en la siguiente
sección.
3.3.3. Personas y mapas de empatía
Las personas y mapas de empatía son herramientas que permiten

profundizar en los aspectos más motivacionales de los usuarios.
Permiten representar los resultados de la investigación.
Analicemos con detalle estas herramientas:
Personas: es la representación de un usuario, un arquetipo, es

decir, consiste en, agrupar usuarios por características similares o
comunes y con base a ello definir un modelo de persona sintetizando
esos resultados de la investigación cualitativa y que se parezca al
original para imitarlo, reproducirlo o copiarlo.
Arquetipo: Según la RAE es el modelo original y

primario en un arte u otra cosa.
78 MAD-UTPL
También podemos decir que esta técnica permite documentar las
necesidades, objetivos y modelos mentales de un usuario, mediante
la creación de perfiles de usuarios, esto como resultado del análisis
de grupos de personas que hacen uso de un producto o servicio.
Es importante que para cada persona se describan las siguientes

características:
Nombre y fotografía.
Breve biografía: edad, género, profesión, ciudad, cultura, gustos,
rutina, hábitos, etc.
Descripción física.
Motivaciones, frustraciones.
Objetivos o metas.
Verbatim representativo.
Relación con la tecnología.
Marcas favoritas.
Apps que se utilizan habitualmente.
En la figura 17 se presenta una plantilla que puede utilizarse para

crear el perfil “Persona”.
Como resultado de la creación de estos perfiles, al equipo de diseño

le permite alinearse y contextualizarse mejor, y priorizar la toma de
decisiones, para sostener posibles ideas o soluciones futuras. En la
figura 18, tiene un ejemplo de la descripción del perfil de un médico,
ahí puede observar con detalle cómo se desagrega la información
que brinda pautas claras de su necesidad.
79 MAD-UTPL
Figura 17.
Formato para crear un perfil “Persona”.
Nombre Bio Objetivos
Foto
Frase Frustraciones
Edad Personalidad
Profesión
Estado
Ciudad
Arquetipo
Fuente: designthinking.es. (2020). Design Thinking en español. Designthinking.Es.
80 MAD-UTPL
Figura 18.
Ejemplo “Persona” aplicación de salud.
Fuente: designthinking.es. (2020). Design Thinking en español.

Designthinking.Es.
81 MAD-UTPL
Avancemos con el estudio de la siguiente herramienta, el mapa de
empatía.
Mapa de empatía: es una herramienta muy utilizada para profundizar

en los aspectos motivacionales y psicológicos de los usuarios. Nos
permite ponernos en el lugar del usuario, es decir, empatizar con él,
logrando así identificar el por qué de sus acciones y actitudes, con
lo cual el equipo de diseño puede interiorizar en sus sentimientos y
experiencias.
Un mapa de empatía permite acercarnos a las motivaciones y

frustraciones del usuario y hacer un mejor ajuste o tomar mejores
decisiones estratégicas.
La página oficial de Design Thinking indica que un mapa de empatía

es una herramienta en la que se organiza la información recopilada
en una entrevista, de acuerdo con los siguientes grupos:
¿Qué dice?: frases o palabras significativas que el usuario

utiliza.
¿Qué hace?: acciones y comportamientos que se notó.
¿Qué piensa?: cuáles fueron sus opiniones, cuáles son sus
creencias.
¿Qué siente?: emociones que logró identificar.
Es recomendable que cuando realicemos la entrevista, estemos

atentos a todas las reacciones del usuario, lenguaje no verbal,
comportamiento, eso ayudará a identificar lo que piensa o siente. En
la figura 19 se presenta la plantilla que se utiliza para crear un mapa
de empatía.
82 MAD-UTPL
Figura 19.
Formato para crear un mapa de empatía.
¿Qué piensa y siente?

Opiniones/sentimientos
Preferencias/creencias
¿Qué oye? ¿Qué ve?

Qué dice su entorno/canales de Amigos/ntorno/Oferta de mercado
comunicación/personas influyentes
¿Qué dice y hace?

Actitud/comportamiento
Aspecto/lenguaje
Limitaciones/obstáculos Oportunidades/Necesidades
Miedos/frustraciones Deseos/expectativas
Fuente: designthinking.es. (2020). Design Thinking en español. Designthinking.Es.
83 MAD-UTPL
Que le ha parecido estás herramientas, ¡muy útiles para describir
los resultados de investigación verdad! Y sobre todo para conocer
realmente qué es lo que necesita y espera nuestro usuario, seguro
los resultados cuando se implemente la solución serán muchos más
satisfactorios porque estarán ajustados a esas necesidades.Hemos
culminado nuestra semana de estudio, sigamos avanzamos con pie
firme.
Actividad 1: diríjase a la semana 14 del texto guía, ahí se propone

el caso: desarrollo de una aplicación móvil para fomentar la visita a
los parques urbanos de la ciudad de Loja, el objetivo es desarrollar
un prototipo integrando UX y UI. Revise el resultado del punto 2 de la
investigación del usuario, en este caso corresponde a la definición
del perfil de usuario. Ya que ha cumplido con lo indicado responda
lo siguiente: ¿identifique cómo aplicar las técnicas de investigación
propuestas?, ¿considera que con el perfil definido es posible
identificar lo que necesita o quiere el usuario?
Actividad 2: revise el video ¡Aprende a realizar un mapa de empatía!,

tiene una duración de 8 minutos y vale la pena analizarlo ya que se
puede observar cómo se construye a través de un ejemplo práctico.
Responda a las siguientes inquietudes para medir su comprensión

de la actividad propuesta: ¿comprende qué se ubica en cada parte
del mapa de empatía?, ¿cuál considera que es el mayor problema al
elaborar un mapa de empatía?, ¿siempre dice y hace lo que piensa
y siente?, ¿en una encuesta siempre respondemos con la verdad o
con lo que siente que no va a quedar mal?, ¿qué haría usted para
conseguir que los usuarios le respondan con sinceridad?
84 MAD-UTPL
Semana 6
Estimado estudiante, durante la sexta semana de estudio

conoceremos herramientas que apoyan a la actividad del diseño,
analizaremos qué elementos son indispensables para crear un
mapa del viaje del usuario más conocido como Customer Journey
Map, en el cual se representa un mapa con las interacciones que
irá realizando el usuario en los diferentes puntos del producto, y
finalmente estudiaremos la técnica Crazy 8s para plasmar las ideas
de las necesidades del usuario en un primer boceto.
3.3.4. Customer Journey Map – CJM
De acuerdo con el sitio SDT – Service Design Tools, definen al CJM

como la descripción de la interacción del usuario con el producto o
servicio a lo largo de sus puntos de contacto. Es decir, cuando un
cliente utiliza los productos y servicios de una empresa para alcanzar
un objetivo o una necesidad, realiza un viaje desde el punto A hasta
el punto Z, el CJM traza el camino que sigue el usuario desde el inicio
de este viaje hasta la satisfacción de esa necesidad.
El proceso se traza desde la perspectiva del usuario, describiendo lo

que ocurre en cada etapa de la interacción, qué puntos de contacto
están implicados, qué obstáculos y barreras pueden encontrar,
es posible integrar capas adicionales que representan el nivel de
emociones positivas/negativas experimentadas a lo largo de la
interacción.
Según (Czajkowski, 2020), un CJM es una herramienta muy útil que

representa toda la interacción con un producto o servicio de manera
transparente. Señala claramente los puntos fuertes y débiles de cada
85 MAD-UTPL
etapa de la interacción, en particular los que afectan a la UX. Además
de esto, los CJM también muestran las posibilidades de mejora. Sin
embargo, la creación de un CJM es un proceso que consume muchos
recursos.
Para realizar un CJM es básico trabajar con escenarios e identificar

los puntos de contacto (momentos de interacción entre el usuario y el
producto/servicio), está interacción puede ser activa o pasiva, directa
o indirecta. Los puntos de contacto pueden ser tanto digitales como
físicos, y son diferentes a los canales, por ejemplo, mediante el canal
móvil es posible recibir una notificación push y posterior un e-mail de
confirmación. En este caso las notificaciones (push y e-mail) son los
dos puntos de contacto, diferentes, pero en el mismo canal (móvil).
No existe una plantilla específica para construir un CJM ya que

va a depender mucho del proyecto y del contexto, sin embargo,
analicemos los elementos (agrupados en 3 bloques/zonas: objetivos,
experiencias mapeadas y conocimientos adquiridos a lo largo del
proceso) que no pueden faltar en un CJM y que se observan en la
figura 20.
86 MAD-UTPL
Figura 20.
Estructura de un Customer Journey Map.
Fuente: Kaplan, K. (2016). Nielsen Norman Group: UX Research, Training, and

Consulting. Nngroup.Com.
Parte superior – Zona A: aquí se definen los objetivos y se

proporcionan restricciones para el mapa asignando (1) un personaje
(“quién”) y (2) el escenario (situación o circunstancia donde se
podría usar un producto o servicio) que se va a examinar (“qué”), es
decir se incluye el contexto de uso y la persona, ¿cuál persona?, la
del resultado de nuestro análisis y que estudiamos en la semana 6,
sección 3.3.Personas y mapas de empatía.
Parte central – Zona B: el corazón del mapa es la experiencia

visualizada, normalmente alineada a través de (3) fases
fragmentadas del viaje, es decir, definir las fases por las que pasa el
usuario por el producto o servicio, (4) las acciones que lleva a cabo
el usuario en cada una de las fases y de manera simultánea se deben
87 MAD-UTPL
ir identificando los puntos de contacto, (5) pensamientos al realizar
cada acción y (6) experiencia emocional del usuario a lo largo del
viaje pueden complementarse con citas o videos de la investigación.
Parte inferior – Zona C: se descubren los insights, que son las

conclusiones que nos darán pistas de cómo y de dónde avanzar.
El resultado debe variar en función del objetivo empresarial al que
se destine el mapa, pero podría describir las ideas y los puntos de
dolor descubiertos, (7) las oportunidades en las cuales centrarse,
y finalmente (8) implicación interna o sobre quién recae la
responsabilidad.
Insight: Un insight se deriva de la psicología

y se refiere a la descripción de un fenómeno
o la comprensión clara de la naturaleza de un
problema lo que a su vez implica una revelación o
descubrimiento.
Debemos tener claro que esta herramienta del CJM es muy útil para
reflexionar sobre el viaje de nuestro usuario y tener una foto completa
y detallada, mapeamos la relación que establece el usuario con
nuestro producto y así identificaremos los puntos a mejorar.
3.3.5. Necesidades del usuario
Cuando hablamos de necesidades del usuario seguro que viene a

nuestro pensamiento la especificación de requisitos puesto que
permite identificar qué es lo que requiere realmente este usuario, en
el tema del diseño nos centramos en entender muy bien el problema
y su contexto, existen técnicas para comprender de mejor manera
el problema y centrarnos en explorar la solución con mayores
probabilidades de éxito para un proyecto.
Luego de sintetizar la información que encontramos en la etapa de

investigación es necesario contextualizar al usuario en su entorno
y decidir el área de oportunidad en la que podemos aportar más
88 MAD-UTPL
valor. Para conseguir lo mencionado vamos a utilizar el mapa del
entorno del proyecto, en el cual primero se identifica a todas aquellas
personas, empresas, entidades públicas y competencia, etc., con los
cuales nos podemos apoyar o ver afectados, luego los ubicamos
como internos, conectados o externos de acuerdo con la manera en
que resuelven un problema o necesidad en el sector que queremos
abordar y la relación con nosotros. Como internos se incluyen
aquellos que pueden ser nuestros compañeros de viaje, como
conectados aquellos que tienen una relación directa con nosotros,
personas que necesitan resolver un problema concreto, y como
externos colocamos otras empresas, entidades o competencia que
pretenden resolver este problema actualmente. Finalmente, cada
miembro del equipo de diseño votará individualmente a aquellos
agentes a los cuáles les podamos aportar más valor, el objetivo de
este mapa es encontrar nuestra área de oportunidad. En la figura 21
se presenta una ilustración de un mapa del entorno.
Figura 21.
Mapa del entorno del proyecto.
EXTERNOS
..
... CONECTADOS
..
...
... ...
INTERNOS
..
Fuente: elaborado por el autor
89 MAD-UTPL
A continuación, es importante y necesario definir el reto del diseño,
para hacerlo debemos plantearnos preguntas de cómo podríamos
resolver el problema, es necesario formular bien la pregunta, procurar
que no sea ni muy específica ni muy genérica, en la figura 22 se
presenta un ejemplo. Como resultado de ello identificaremos el reto
que queremos abordar y este debe estar alineado con el área de
oportunidad identificada en el paso anterior (mapa del entorno).
Con estos dos pasos se logra tener ya identificado y definido muy

bien el problema, por lo que a continuación debemos pasar a la
exploración de posibles soluciones. La primera etapa por seguir
durante esta exploración es la ideación, aquí cada miembro del
equipo de diseño debe responder ¿cómo podríamos resolver nuestro
reto?, el proceso a aplicar podría ser el siguiente:
1. Generar ideas de manera individual,

2. Socializar las ideas con todo el equipo,
3. Ordenarlas y agruparlas y
4. Decidir cuál de las ideas pasa al siguiente nivel.
90 MAD-UTPL
Figura 22.
Ejemplo de proceso para planteamiento de problema.
No sabemos si los clientes

se encuentran satisfechos.
Cómo Cómo
podríamos... podríamos...
¿Hacer felices a ¿Destacar el botón

los usuarios? de registro?
Muy genérico Muy específico
Cómo podríamos...
¿Medir la satisfacción
de nuestros clientes?
Para que el equipo de diseño plasme sus ideas, es posible utilizar

técnicas de creación colectiva como Crazy 8s (Crazy eights), que
consiste en dividir una hoja de papel en 8 recuadros, en cada una
de ellas cada participante describirá una pantalla o característica
(boceto), el objetivo es que las ideas surjan lo más rápido posible
ya que se dispone de la información que se puede aprovechar. Con
esta técnica es posible generar una serie de ideas diferentes en un
período corto de tiempo. Al final se debe obtener una o un pequeño
número de ideas que se pueden convertir en un prototipo. Puede
visitar el sitio Prototypr.io para que analice la implementación de esta
técnica y los tiempos sugeridos a aplicar por boceto, sin embargo,
se recomienda utilizar un minuto para cada boceto. En la figura 23 se
presenta un ejemplo del resultado que arroja un Crazy 8s.
91 MAD-UTPL
Figura 23.
Ideación utilizando técnica Crazy 8s.
Fuente: Stevenson, H. (2019). How to run a Crazy eights workshop. Blog.

Prototypr.Com.
El objetivo de esta etapa es que evidenciar cómo nuestra idea

resuelve el problema encontrado, aquí ya tenemos un nuevo
resultado, el prototipo.
Esperamos que estos contenidos estén permitiendo seguir el hilo de

todo el proceso de UX y sus ideas se vayan consolidando, además de
identificar la importancia de cada uno de los elementos que hemos
estudiado durante esta semana.
92 MAD-UTPL
Revise el video Aprende a realizar un Customer Journey Map, tiene

una duración muy corta de cerca de 7 minutos, en donde el autor
indica los elementos que contiene esta técnica y cómo se completa.
Responda a las siguientes inquietudes para medir su comprensión de

la actividad propuesta: ¿cuál es la clave que busca el CJM?, ¿el CJM
permite identificar cómo se siente un usuario con cada movimiento
que da?, ¿considera que el CJM le permitirá tomar decisiones de
mejora?
Analiza y diseña un prototipo

de una interfaz gráfica de
Resultado de usuario que incorpora la
aprendizaje 4 retroalimentación a partir
de pruebas tempranas de
usabilidad.
Estimado estudiante, una vez que hemos analizado y comprendido

mejor el problema y a esbozar algo inicial como prototipo de la
solución, es momento de pasar de las ideas abstractas a puntos
de contacto concretos entre el usuario y un proyecto. Por ello
trasladaremos todo ese aprendizaje a pantallas de una App o
página web, por ejemplo. Durante esta semana dedicaremos a
analizar técnicas de prototipado, que nos llevará a tener una mejor
comprensión de la solución que se construirá más adelante, y lo más
importante es que comprenderá que a través del prototipo podrá
validar con el usuario y obtener su retroalimentación de manera
oportuna.
93 MAD-UTPL
Semana 7
3.4. Prototipado
Para (Shneiderman et al., 2018) los prototipos son herramientas de

diseño que permiten a los usuarios y a los diseñadores ver y sostener
representaciones de la interfaz prevista, además de permitir al equipo
de diseño reproducir escenarios y pruebas específicas para su
validación.
En la actualidad se escucha mucho la frase “falla rápido y de manera

temprana y sin mayor costo”, estamos seguros de que sí, para lograrlo
ha incrementado el uso de los prototipos, ya que a través de ellos
es más fácil aplicarle los cambios necesarios antes del lanzamiento
del producto o servicio. Esta es la razón de la importancia de esta
fase dentro del proceso de UX, esta etapa es como un horno de
incubación de diseños previo a su validación y con esa seguridad nos
lanzamos a la implementación.
Lo mencionado nos lleva a reflexionar acerca de los modelos de

desarrollo de software tradicionales, ¿cómo se desarrolla con el
método en cascada, qué recursos se emplean y sobre todo qué
resultados obtenemos?, este método principalmente recurre a
procesos pesados que requieren de una gran inversión de tiempo,
dinero y personal. Durante todo su ciclo sí que se incorpora una
cantidad significativa de detalles de diseño, pero en qué momento y
con quiénes los validamos, solo hasta el final en la entrega, momento
ya tarde para hacer cambios necesarios.
94 MAD-UTPL
En diversos estudios se ha logrado identificar que grandes proyectos
del desarrollo de software fracasaron debido a ciertas condiciones
como requisitos erróneos, incumplimiento de los requisitos, mala
experiencia del usuario y mucha insatisfacción del cliente y del
usuario. ¿Cómo mejoramos esto?, con todo lo que hemos estudiado
hasta el momento en nuestro texto guía, centrándonos en el usuario
final, en donde nos sintamos seguros que el diseño sea el correcto y
la mejor manera es evaluarlo con usuarios reales.
Un prototipo proporciona una primera versión de un sistema y

que puede construirse mucho más rápido y con menor costo, le
ofrecemos al usuario algo que evaluar antes de asignar recursos para
la construcción del sistema real.
Tal como se menciona en (Hartson & Pyla, 2012), el objetivo

principal del prototipado es proporcionar una primera visión rápida y
fácilmente modificable del diseño de interacción previsto.
Analicemos los elementos y técnicas que se utilizan para llegar a un

prototipo.
¡Empecemos!
3.4.1. Baja, media y alta fidelidad
La fidelidad de un prototipo se refiere al contenido y a la forma

de presentarlo a los clientes y usuarios, a que nos referimos, a
que refleja el grado de “acabado” de un prototipo, o al grado de
coincidencia con el aspecto y la sensación del sistema final. Se la
ha dividido en tres niveles: baja, media y alta. También es posible
mencionar que la fidelidad de un prototipo depende del contenido, la
interacción y el estilo visual.
95 MAD-UTPL
Baja fidelidad: Por lo general, suelen crearse mediante bocetos,
notas adhesivas o cortando y pegando trozos de papel (maquetas
de papel). En la figura 24 se presenta un ejemplo de un boceto en
papel dibujado a mano que representa la idea inicial de un mouse que
incorpora una pantalla táctil, en el cual se sugiere construir el mouse
acoplando un smartphone a un mouse óptico. Los sketchs o bocetos
(sección 3.4.2.) son considerados de baja fidelidad.
Figura 24.
Boceto dibujado a mano para el LensMouse. Ejemplo de baja fidelidad.
Media fidelidad: se encuentran entre la baja y la alta fidelidad, por

ejemplo, cuando no se dispone de muchos recursos como el tiempo
y con el fin de preparar que el prototipo evolucione de la baja fidelidad
a la alta fidelidad, corresponde hacer algo intermedio. Cuando el
equipo de diseño requiere de mayor fidelidad en las representaciones
de papel, es posible pasarlas a otro esquema computarizado, como
los wireframes (sección 3.4.3.), que son una forma eficaz de mostrar
el diseño y la amplitud de los objetos de la interfaz de usuario. En la
figura 25 se presenta un ejemplo de un wireframe del esquema de
Facebook para web, como puede observar la fidelidad aumenta en
gran medida por la estructura que se mantiene.
96 MAD-UTPL
Figura 25.
Wirefame como ejemplo de media fidelidad.
Fuente: Casanaoba, E. (2019). Prototipos, wireframes, mockups y sketchs

¿¿para qué?? | by Eugenia Casabona | Medium. Medium.Com.
Alta fidelidad: los prototipos de alta fidelidad son representaciones

más detalladas del diseño, incluyen detalles de la apariencia y el
comportamiento de la interacción, tal como se puede observar en
la figura La alta fidelidad es necesaria para evaluar los detalles del
diseño y es la forma en que los usuarios lo pueden ver, sirven para
para perfeccionar los detalles del diseño y conseguir que sean
perfectos para la implementación. Se parecen casi al producto final
pero no necesariamente van a ser del todo funcional. Los mockups
(sección 3.4.4.) son considerados prototipos de alta fidelidad.
97 MAD-UTPL
Figura 26.
Prototipo del LensMouse. Ejemplo alta fidelidad.
Soft scroll wheel

Soft Buttons
(lesft+right click)
Touch display
LensBar
Tilted base for

better viewing
angle
Finalmente se puede decir que la fidelidad se relaciona con el

aumento del realismo y con la inversión del tiempo en su creación,
cada uno de los niveles mencionados son adecuados y sirven en
diferentes momentos del diseño, como, por ejemplo, para la ideación
los prototipos de baja fidelidad son los más adecuados, esto invita a
mejorarlo o rechazarlo, y luego seguir avanzando, brindando mayor
fidelidad.
Antes de iniciar con los tipos de producto a obtener durante el

proceso de diseño, y que responden a la fidelidad, planteamos la
secuencia o los diferentes niveles de madurez de estos en la figura
27.
98 MAD-UTPL
Figura 27.
Tipos de producto del proceso de diseño.
Sketch Wireframe Mockup Prototype
Fuente: Babich, N. (2020). Sketch, Wireframe, Mockup, and Prototype: Why,

When and How | by Nick Babich | UX Planet. Medium.Com.
3.4.2. Sketch
Para (Hartson, 2013) un sketch o boceto es la creación rápida de

dibujos a mano alzada que expresan ideas preliminares de diseño,
se centra en los conceptos (representación básica de este) más que
en los detalles. Un boceto es una conversación entre el dibujante o
diseñador y el artefacto.
(Shneiderman, 2018) considera que un sketch es una herramienta de

diseño basada en vectores que permite crear maquetas y prototipos
para las interfaces de usuario.
Un sketch es esencial para la ideación y el diseño, puesto que este

último es un proceso de creación y exploración, y el sketch es un
medio visual para esa exploración, recordemos que lo visual y que a
través de las imágenes se puede explicar de mejor manera las ideas,
mejor que con las palabras.
¿Qué se necesita para hacer un sketch?, materiales para dibujar, algo

tan simple como un lápiz y papel y mucha creatividad, no se necesita
ser un dibujante experto lo importante es comunicar o transmitir
la idea principal. En la figura 28 se ilustra un ejemplo de un sketch
propuesto para una página web.
99 MAD-UTPL
Figura 28.
Ejemplo de sketch para una página web.

Recuerda que durante la semana anterior mencionamos sobre la

técnica Crazy 8s, ésta es muy utilizada cuando realizamos un sketch.
3.4.3. Wireframe
Los wireframes son una versión más refinada del prototipo, en ellos
se plasma principalmente la arquitectura de información y el diseño
de interacción de la solución de diseño que estemos proponiendo.
Los wireframes presentan un nivel mayor de fidelidad en cuanto a
contenido, estructura y niveles le legibilidad, es decir, definen cuál
100 MAD-UTPL
será el contenido y dónde se ubicarán los diferentes elementos. Están
centrados en la asignación de espacio y priorización del contenido,
las funcionalidades disponibles, y los comportamientos deseados, se
centran en “qué hace la pantalla, no cómo se ve”, por lo que carecen
de estilos tipográficos o colores.
El wireframe conecta la estructura conceptual, o arquitectura de la

información, con el diseño visual de la web o aplicación, esto se
puede observar en la figura Ayudan a establecer la funcionalidad,
y las relaciones entre las diferentes plantillas de pantallas. Los
wireframess actúan como esqueletos para el diseño, representan la
interfaz de usuario básica y se convierten en un plano del producto.
Los wireframes son utilizados en la etapa inicial del proceso de

diseño, tienen el objetivo de evaluar la estructura de las páginas/
pantallas individuales. Pueden crearse con lápiz y papel, aunque
también con herramientas digitales como: Balsamiq, Gliffy,
Justinmind, Cacoo.
101 MAD-UTPL
Figura 29.
Ejemplo de wireframe para una página web.
Logo Search
Ilustration
Tag line
Navigation Bar
Header Promotional
area
Navigation Sub Head Sub head
Tu sub
sections Text Block Text Black
Promotional
area
TK
Sub head
Text Block
Possible ks
to partner
sites
Before Navigation Bar

102 MAD-UTPL
Recuerde:
No es necesario añadir demasiados detalles

a los wireframes, estos deben representar la
estructura básica del producto y su objetivo es
evaluar el diseño, no pulir los detalles.
Los wireframes se crean tradicionalmente en

blanco y negro, a escala de grises.
Agregar anotaciones cortas para que ayuden a

crear un contexto y a transmitir rápidamente las
ideas clave.
A medida de las iteraciones, los wireframes

serán más refinados y aumentarán la fidelidad
de la cubierta.
3.4.4. Mockup
Los mockups son una visualización de alta fidelidad de su diseño,

ofrecen el aspecto visual del diseño del producto y son ideales para
evaluar tanto el aspecto como la sensación del diseño. Son útiles
durante la fase de diseño visual del proceso de diseño. En la figura 30
se ilustra un ejemplo de mockup.
Un mockup es la versión más aproximada al producto real, puede

utilizarse para diseñar un nuevo producto o para rediseñar uno ya
existente, sirven para evaluar las decisiones de diseño visual, ver
cómo se combinan los colores, la tipografía y las imágenes. En
este punto es necesario retomar o considerar los aspectos de la
accesibilidad, ya que el diseño debe permitir a todo tipo de usuario,
navegar, comprender y utilizar el producto. ¿Qué elementos o
aspectos son necesarios?, el contraste de colores, tamaño de fuente,
etc., retome las recomendaciones del W3C.
103 MAD-UTPL
Los mockups pueden crearse con herramientas digitales de diseño,
desde Adobe Photoshop, Adobe XD, Figma y muchas más, como las
que mencionamos en los puntos anteriores que sirven para crear
cada uno de estos niveles.
Figura 30.
Ejemplo de mockup para una página web.
Fuente: Lopez, S. (2017). Wireframe, Mockup y Prototipos: en busca de sus

diferencias.
3.4.5. Prototipo
Los prototipos son representaciones de alta fidelidad al igual que

los mockups, en qué se diferencian, en que los primero incluyen o
simulan la interacción con el usuario. En esta representación los
usuarios ya pueden experimentar en alguna medida la experiencia
de uso del producto, por lo tanto, ese es el objetivo central de un
prototipo, el simular la interacción entre el usuario y la interfaz. Puede
observar un ejemplo a través de la figura Los prototipos son útiles
durante la fase de diseño funcional del proceso de diseño, ayudan a
evaluar el recorrido del usuario, a identificar posibles problemas con
el flujo de interacción, a probar la usabilidad. Todo esto generará la
confianza suficiente para ahí si pasar a una fase de implementación.
104 MAD-UTPL
Existen muchas herramientas de prototipado como Axure, Proto.io,
POP, Adobe XD, entre otras.
Figura 31.
Ejemplo de prototipo creado en Adobe XD.
Fuente: Babich, N. (2020). Sketch, Wireframe, Mockup, and Prototype: Why,

When and How | by Nick Babich | UX Planet. Medium.Com.
Finalmente recapitulemos sobre el proceso del diseño, iniciamos con

el sketch que representa la idea inicial, continuamos con el wireframe
en donde se define la estructura, para avanzar con el mockup que
indica cómo es visualmente, y finalizamos con el prototipo que define
sobre todo cómo se comporta el producto. Además, considere que la
fase de validación del prototipo es muy importante y sobre todo que
sean los mismos usuarios finales quienes nos apoyen a realizarlo,
es decir, que nos digan si esa posible solución puede resolver su
problema.
105 MAD-UTPL
De esta manera hemos concluido con nuestro primer bimestre,
en donde se han abarcado los temas más importantes del diseño
centrado en el usuario y los elementos de la UX. Cómo trasladamos
todo esto hacia la UI, es lo que analizamos a partir del segundo
bimestre.
Felicitaciones por su esfuerzo y empeño, es momento de seguir

avanzando con los mejores ánimos para llegar al éxito esperado.
Actividad 1: diríjase a la semana 14 del texto guía, ahí se propone el

caso: desarrollo de una aplicación móvil para fomentar la visita a los
parques urbanos de la ciudad de Loja, el objetivo es desarrollar un
prototipo integrando UX y UI. Revise los puntos 4 y 5, que es donde se
elaboran los prototipos de baja y media fidelidad, sketch y wireframe
respectivamente. Ya que ha cumplido con lo indicado responda
lo siguiente: con los resultados de la investigación ¿qué tan fácil
considera que es llegar a los prototipos mencionados?
Actividad 2: revise el video Figma Tutorial – Creación de prototipos,

con el fin de afianzar lo estudiado en este primer bimestre, en él
puede ir viendo paso a paso como crear un prototipo mediante
Figma. Le recomendamos que lo haga usted también siguiendo los
pasos y podrá descubrir lo sencillo que es.
Actividad 3: revise el REA, Lecture 17: Prototyping, en el podrá

identificar la aplicación de técnicas para el prototipado de baja, media
y alta fidelidad.
106 MAD-UTPL
Autoevaluación 3

prueba lo aprendido hasta el momento. En las siguientes preguntas,
revise cada ítem y seleccione la respuesta correcta. Recuerde que
sus resultados constituyen un reflejo del auto aprendizaje de la
asignatura.
1. Ha definido como la usabilidad del nuevo milenio:
a. Accesibilidad.
b. Interactividad.
c. Experiencia de usuario.
2. ¿Cuáles son las actividades que incluye el proceso de UX?
a. Análisis, diseño, prototipo y evaluación.

b. Investigación, diseño, ideación y prototipo.
c. Empatía, definición, ideación, prototipo y evaluación.
3. ¿En cuál de las actividades del proceso de UX se realizan

alternativas de diseño?
a. Análisis.
b. Prototipo.
c. Evaluación.
107 MAD-UTPL
4. ¿Por qué es importante conocer a nuestro usuario y saber a
quién nos estamos dirigiendo?
a. Aumentar los costos de un producto y garantizar mayor

probabilidad de éxito.
b. Obtener más información de los usuarios al momento de
diseñar nuestros productos y/o servicios.
c. Realmente esto no es necesario.
5. Son las expresiones o frases literales que dice un usuario:
a. Verbatims.
b. Escenarios.
c. Arquetipo.
6. Es una herramienta muy utilizada para profundizar en los

aspectos motivacionales y psicológicos de los usuarios:
a. Personas.
b. Customer Journey Map.
c. Mapa de empatía.
7. Es una herramienta que permite describir la interacción del

usuario con el producto o servicio a lo largo de sus puntos de
contacto:
a. Personas.
b. Customer Journey Map.
c. Mapa de empatía.
8. Es una técnica que consiste en dividir una hoja de papel en 8

recuadros, en cada una de ellas se realiza un boceto:
a. Customer Journey Map.

b. Mapa de empatía.
c. Crazy 8s.
108 MAD-UTPL
9. Permite obtener representaciones más detalladas del diseño:
a. Baja fidelidad.
b. Media fidelidad.
c. Alta fidelidad.
10. Son artefactos de alta fidelidad:
a. Mockup.
b. Wireframe.
c. Sketch.

¡Felicitaciones!
109 MAD-UTPL
Actividades finales del bimestre
Semana 8
Actividades recomendadas
Apreciado estudiante.
Hemos llegado a la etapa final del primer bimestre y estamos seguros

de que usted cumplió con todas las actividades de aprendizaje.
Como preparación para el examen presencial se sugiere que:
Revise las unidades y subtemas estudiados en cada una de las

semanas del bimestre, y refuerce los que considera necesarios.
Analice los recursos facilitados en este texto guía.
Revise las autoevaluaciones de las unidades del bimestre.
Prepárese para la evaluación presencial del primer bimestre y

comuníquese con su tutor en caso de que se presenten dudas.
Consulte el horario y lugar para rendir la evaluación presencial

de la asignatura.
110 MAD-UTPL
Segundo bimestre
Seleccione un estilo de
interacción de interfaz de
usuario apropiado para una
tarea.
Diseñe una Interfaz simple de

usuario.
Proporcione ejemplos del tipo

de entrada requerido desde el
usuario, evaluando la eficacia de
las diferentes opciones de estilo
de interacción.
Resultado de Describa opciones de interfaz

aprendizaje 5 de usuario para dispositivos
que no soportan interfaces de
usuario visuales.
Explique como la interfaz

de usuario y la usabilidad se
afectan mutuamente.
Analice y diseñe un prototipo

de una interfaz gráfica de
usuario que incorpore la
retroalimentación a partir
de pruebas tempranas de
usabilidad.
111 MAD-UTPL
Semana 9
Durante el primer bimestre estudiamos la importancia de realizar

el proceso de investigación basado en UX y usabilidad. Hasta el
momento usted es capaz de identificar las necesidades de los
interesados en términos de lo que un usuario final necesita y requiere
a nivel de interfaz para poder manipular un producto de software. En
este segundo bimestre usted alcanzará los resultados de aprendizaje
a través del enfoque en el estudio de la Interfaz de Usuario o UI cómo
se le conoce por sus siglas en inglés y comprenderá que modelar
para el usuario y llegar a un prototipo que el usuario pueda validar
requiere de un proceso que involucra a UX y UI. Lo invitamos a seguir
con el estudio de este interesante campo y a pensar que el desarrollo
de software no es solo centrarse en la codificación y construir
componentes fuertemente acoplados sino, a través de un proceso de
modelado podamos tener de una forma ágil un prototipo funcional
que pueda ser evaluado por los interesados antes de pasar a la etapa
de desarrollo.
¡Continuemos con este interesante estudio!
112 MAD-UTPL
Unidad 4. Interfaz de usuario
4.1. Introducción a las interfaces de usuario (UI)
La interfaz de usuario (UI, por sus siglas en inglés), es la parte

más importante de cualquier sistema informático. ¿Por qué?
Para los usuarios no técnicos o cualquier persona común, la UI
es el sistema. A través de la interfaz, los usuarios de un sistema
pueden interactuar directamente mediante un dispositivo digital
sin la necesidad de conocer los elementos lógicos y técnicos que
componen a un producto de software, como se observa en la figura
El objetivo principal de una UI es facilitar el trabajo a través de un
dispositivo, sea este un computador, un dispositivo móvil o cualquier
otro. Imagine usted tener que trabajar frente a un computador, sin
contar con las bondades de una UI amigable, intuitiva y fácil de usar;
seguramente, usted, estará supeditado a trabajar a través de una
consola mediante líneas de comando o más aún a realizar trabajos
de forma manual, lo cual dificultaría y retrasaría sus actividades
cotidianas.
Supeditado: Condicionar algo al cumplimiento de

otra cosa.
113 MAD-UTPL
Figura 32.
Interfaz de Usuario (UI)
Fuente: Muñoz, G. (2019, April 28). Lo que debes saber de UI para Móvil y
Desktop. Medium.
Desde el punto de vista de investigación, la UI es un subconjunto

de un campo de estudio llamado interacción humano-computadora
(HCI). La interacción persona-computadora es el estudio, la
planificación y el diseño de cómo las personas y las computadoras
trabajan juntas para que las necesidades de una persona se
satisfagan de una manera más efectiva (Galitz, 2007), tal como lo
estudiamos en el primer bimestre. En este sentido, los diseñadores
de UI deben considerar características y limitaciones técnicas de
hardware y software del dispositivo digital para que la UI atienda a las
necesidades de los usuarios para observar, escuchar, interactuar y
realizar cualquier tipo de acción que le permita manipular un sistema
de software, independientemente de las características de cada uno
de los dispositivos digitales.
114 MAD-UTPL
Cuando hablamos de características de hardware y software de los
dispositivos, pensamos en que la UI debe tener la capacidad de
poder adaptarse y posicionarse de forma automática a los tamaños
y tipos de pantalla que un dispositivo puede tener o lo que se llama
técnicamente como adaptación o diseño responsivo. Imagine usted
construir una UI para un dispositivo de escritorio y que este vaya
a usarse en un teléfono inteligente y en una tablet. Si partimos por
analizar el tamaño de las pantallas, seguramente necesitaríamos
traducir las necesidades del usuario a la UI y que esta se adapte de
forma automática a cada uno de los dispositivos, esto significa que
usted a través de algunos elementos técnicos tiene que garantizar
que, sin la necesidad de construir una UI para cada dispositivo, debe
permitir que un único diseño y desarrollo tenga la capacidad de
adaptarse a cualquier contexto.
En este punto de nuestro estudio, es importante considerar que

cuando pensamos en modelar o diseñar la UI, es necesario tener
en cuenta, además de lo que el usuario necesita que se represente
en la interfaz, también considerar los elementos que se tienen que
incluir en la UI y que estos estén alineados a la propuesta de valor
y estrategia de la parte interesada. ¿Qué deberíamos entender por
esto? Que cuando traducimos las necesidades a la UI, tenemos que
partir por conocer todos los elementos necesarios para traducir la
estructura y los wireframes que definimos en UX hacia UI; es decir,
conocer el motivo, la estrategia, lo que el cliente pretende comunicar
a través de la UI a sus usuarios finales, su imagen institucional o
corporativa, lo que nos llevará a seleccionar los colores y diseños
adecuados para representar a nuestros clientes. Recordemos que
previo a hacer UI, debemos contar con el resultado que arroja el
análisis e investigación de la UX.
A continuación, para reforzar más este concepto de UI, lo invitamos

a revisar el siguiente video: ¿Qué es una Interfaz de Usuario?, luego
defina con sus propias palabras ¿qué es UI?, explique cuál es la
importancia de la UI y del proceso de modelado de usuario para el
desarrollo de un proyecto de software.
115 MAD-UTPL
4.2. Importancia del diseño de la UI
Seguramente a todos nos habrá sucedido en algún momento de

nuestras vidas como desarrolladores que, inmediatamente después
de analizar las necesidades de nuestros clientes, pensamos en
cómo desarrollar y cumplir con las expectativas de los interesados.
También nos pudo haber pasado que empezamos a desarrollar y a
construir las interfaces del sistema como nosotros lo imaginamos
y no como el usuario lo quería, lo cual más adelante se traduce en
conflictos, correcciones, refactorizaciones que sin duda alguna se
sale de nuestra planificación inicial haciendo que se desperdicien
los recursos y el tiempo invertido para desarrollar un producto de
software.
Elaborar un prototipo o un modelo de usuario antes de iniciar las

actividades de desarrollo, nos permite evitar este tipo de problemas
durante el desarrollo de una aplicación web, móvil o de otro tipo.
Como lo estudiamos en el primer bimestre, de la misma forma que
hacemos un proceso de elicitación para identificar requerimientos
funcionales e investigamos las necesidades de los usuarios, antes
de modelar una UI o construir un prototipo necesitamos conocer
¿qué espera el usuario de su aplicación de software? Qué gestos,
animaciones, colores, tipografía es necesaria para construir un
producto de software que no solo satisfaga las necesidades a nivel
lógico y operacional, sino que también se vea bien diseñado, atractivo
e intuitivo para el usuario final.
Una interfaz y una pantalla bien diseñadas son muy importantes para
los usuarios. Son la ventana para ver las capacidades del sistema,
el puente hacia las capacidades del software. Para muchos usuarios
es el sistema, porque es uno de los pocos componentes visibles del
producto que crean sus desarrolladores. También es el vehículo a
través del cual se presentan muchas tareas críticas. Estas tareas
suelen tener un impacto directo en las relaciones de una organización
con sus clientes y en su rentabilidad.
116 MAD-UTPL
(Galitz, 2007), describe que el diseño, la apariencia de una pantalla
y la navegación de un sistema afectan a una persona de diversas
formas. Si son confusos e ineficientes, las personas tendrán
más dificultades para hacer su trabajo y cometerán más errores.
Un diseño deficiente puede incluso alejar a algunas personas
de un sistema de forma permanente. También puede provocar
agravamiento, frustración, y mayor estrés.
Imagine usted que está construyendo una aplicación de ventas en

línea para que sus potenciales compradores compren de manera
rápida y fácil sus productos. Lo más probable es que si su interfaz
no es sencilla de usar, no se encuentran los productos fácilmente,
sus interacciones son lentas o poseen errores. Sus visitantes o
compradores potenciales no van a comprar en su tienda a pesar de
que a nivel lógico su aplicación haga todo lo que tiene que hacer.
Recuerde que lo que primero que aprecia un usuario final es la
interfaz de usuario.
Modelar previamente y contar con la aprobación de los interesados

antes de empezar a desarrollar un producto es una de las prácticas
más importantes, no solo para los interesados, sino para usted como
parte del equipo de proyecto de desarrollo de software. Para esto,
es necesario dar la misma importancia al modelado de usuario que
al proceso de gestión o de desarrollo de un producto. A lo largo de
su carrera, habrá escuchado que nunca se debe validar un requisito,
componente o conjunto de necesidades con los interesados con un
documento, modelo o descripción técnica. ¿Por qué?, generalmente
los interesados son personas no técnicas, es decir, que no tienen
conocimientos técnicos y difícilmente van a poder validar o verificar
algún componente del sistema. Es mucho más sencillo para un
interesado validar un componente a través de un modelo o prototipo
funcional.
117 MAD-UTPL
Un modelo o prototipo funcional es una “réplica” o “demo” de lo que
se va a construir como parte de una aplicación de software, es decir,
una representación a nivel visual de lo que el usuario va a observar
y tener en su aplicación de software. Generalmente este tipo de
prototipos o modelos son mucho más fáciles de comprender ya que
constituyen una réplica exacta o aproximada de lo que la aplicación
va a realizar, interacciones, elementos visuales, etc., esto sin la
necesidad de desarrollar o escribir código que más adelante tenga
que refactorizarse.
Para comprender de forma didáctica que es un prototipo funcional

o interactivo, ingrese al siguiente recurso de video: Cómo crear un
prototipo interactivo, desde el minuto 12:00 a 14:¿Qué le pareció?,
podemos conocer cómo va a funcionar nuestra aplicación antes de
escribir código ¿cómo cree usted que beneficia el uso de prototipos
interactivos o funcionales al desarrollo de software tradicional?
4.3. Objetivos de diseño de una UI
Ahora que conocemos algunos conceptos fundamentales de la UI, es

importante preguntarnos ¿cuáles deberían ser nuestros objetivos de
diseño?, ¿se debe diseñar una interfaz sencilla o llena de funciones?,
¿cuál debería ser el sentido de nuestra UI? La construcción de un
producto de software implica conocer el contexto para abordar
múltiples decisiones de diseño. Antes de pensar en cómo diseñar,
debemos tener presente que el proceso de diseño de una UI debe
considerar dos objetivos fundamentales: 1) El diseño tiene que estar
centrado en humanos y 2) El diseño de una UI debe ser realizado
por humanos (Banga, Cameron and Weinhold, 2014) ¿Qué significan
estos objetivos? A continuación, se describirá cada uno de estos.
118 MAD-UTPL
Objetivo 1: Diseñando centrado en humanos
Las interfaces de usuario, se componen de múltiples elementos

gráficos que se enfocan en facilitar el uso de los productos
o sistemas de software a los seres humanos, es decir, es un
componente visual que permite que los seres humanos puedan
manipular y usar productos digitales de software. En este contexto,
este objetivo se enfoca en comprender que, debido a la diversidad
de humanos que usarán una UI, es muy complicado para los
diseñadores intentar construir una interfaz que sea del agrado y
utilidad de las masas. Los usuarios son personas normales que
vienen en diferentes formas y tamaños, pueden hablar diferentes
idiomas, ser mayores o más jóvenes, ser mejores o peores lectores,
saber más o menos sobre computadoras e incluso tener diversas
discapacidades que dificultan su capacidad para usar su aplicación.
Comprender que está construyendo para todo tipo de personas

revela rápidamente lo difícil que puede ser el diseño de interacción.
Para muchos, es esta diversidad y este desafío lo que hace que el
trabajo de un diseñador de interfaces sea emocionante. Comprender
a su audiencia lo ayuda a ver los problemas de software de manera
diferente y de una manera que lo ayudará a crear un diseño efectivo.
Por experiencia podemos decir que los humanos no somos los

usuarios perfectos. Los diseños de interfaz deben ser flexibles,
evitando que el usuario arruine todo en un instante. Diseñar para
humanos está en marcado contraste con diseñar para computadoras
que ejecutan automáticamente todas las instrucciones de
programación definidas en el código. En las aplicaciones
desarrolladas para plataformas móviles, los usuarios humanos a
menudo no escuchan lo que se les dice, incluso cuando piense que lo
ha explicado todo de forma clara y deliberada. Enfrentar ese desafío
es el aspecto más gratificante y frustrante de la construcción de un
diseño de interfaz e interacción para humanos.
119 MAD-UTPL
Entonces, ¿cuál es el mejor diseño para usuarios humanos?, es uno
construido pensando en el perdón. Idealmente, el diseño de una UI
tiene que estar enfocado en algo que le dé al usuario una sensación
de libertad y la capacidad de explorar sin miedo o aprensión. La
mejor manera de reconfortar a los usuarios a través del diseño
de interacción es protegerse contra la pérdida de datos, explicar
claramente los resultados de las acciones principales y permitir que
los usuarios comiencen de nuevo cuando sientan que han cometido
un error. Al crear aplicaciones, permita crear experiencias que brinden
al usuario una sensación de seguridad para explorar su trabajo. Esto
brinda a los usuarios la comodidad de navegar sin temor a cometer
un error y comprar algo accidentalmente.
Objetivo 2: interfaces diseñadas por humanos
Aunque como hemos visto los usuarios pueden resultar imperfectos

y propensos a cometer errores al momento de usar sus aplicaciones
de software, es importante tener en cuenta que los diseñadores
también son humanos y están lejos de ser perfectos ¿qué nos
quiere decir esto?, al crear un diseño de interacción para cualquier
aplicación, es probable que usted como diseñador cometa muchos
errores, esto generalmente conduce a comprender que cualquier
diseño es capaz de ir evolucionando para ofrecer una mejor
experiencia de usuario.
Generalmente los usuarios son muy buenos para señalar lugares

donde los diseñadores se equivocan, así que ¿por qué no aprovechar
ese hecho?, es importante aprovechar este escenario para que
los usuarios pongan sus manos en su aplicación, la prueben y
retroalimenten su experiencia. Es en este momento cuando utilizar
modelos y/o prototipos que permitan conocer la experiencia,
críticas, comentarios de los usuarios con nuestras aplicaciones nos
permite crecer y garantizar productos de software de calidad. ¿Cómo
podemos ampliar los resultados de este proceso de revisión?
120 MAD-UTPL
Actualmente, existen muchas comunidades en Internet que se
centran en el diseño y que pueden presentar su trabajo a los ojos
de personas experimentadas para obtener información sobre
cómo mejorarlo. Dribbble y Forrst son comunidades orientadas a
diseñadores que quieren mejorar su oficio. En estas redes, se anima a
los usuarios a publicar sus trabajos en un foro público para que otros
puedan comentar y sugerir mejoras. Por otro lado, también es valioso
crear un pequeño grupo de amigos y colegas de confianza que estén
dispuestos a revisar su trabajo y ofrecer ideas sobre lo que está
haciendo correctamente y lo que necesita mejorar. Los equipos de
desarrollo de software más exitosos implementan procesos formales
como revisiones de diseño de pares o revisiones de código para
ayudar a asegurarse de que su trabajo se revise internamente para
mejorar.
Finalmente, no hay nada más útil que un grupo de prueba beta que
le permite experimentar con tipos de diseño de interacción y jugar
con compilaciones de prueba de las próximas aplicaciones. Al
buscar usuarios para probar el software de la versión preliminar, es
importante seleccionar un grupo diverso de usuarios potenciales.
Puede ser una experiencia valiosa sentarse junto a un usuario
y observar cómo utilizan su software por primera vez. Mientras
observa, puede ver con qué partes del diseño tuvieron problemas y
dónde podría aclararse, simplificarse o explicarse mejor.
Revise el siguiente recurso de video para reforzar lo aprendido hasta

el momento y conteste de una forma didáctica ¿Qué es el Diseño UI?
¿Cree usted que se puede prescindir de alguno de los dos objetivos
que hemos visto? ¿Cómo cree usted que los objetivos de diseño
pueden alinearse con escenarios de accesibilidad e inclusividad
para personas con discapacidad? ¿Cómo podrían aportar los dos
objetivos fundamentales y combinarse con el proceso de desarrollo
de software?
121 MAD-UTPL
Semana 10
Ahora que conocemos algunos aspectos fundamentales de la UI

y somos capaces de contestar algunos interrogantes como ¿Qué
es una UI? ¿Qué importancia tienen las UI? Es importante recalcar
que difícilmente vamos a poder definir un diseño de UI sin antes
haber pasado por el proceso de UX, es fundamental que, al igual
que un proceso de desarrollo de software general, dónde partimos
por investigar las necesidades del usuario, comprendamos que los
requisitos no solo están enfocados en elementos lógico-funcionales,
sino también deben incluir elementos de interfaz que sirvan como
base para conocer en contexto qué es lo que espera el cliente de su
producto. En esta semana comprenderemos como se complementan
la UX y UI para crear un prototipo de software que permita validar la
experiencia del usuario final.
4.4. ¿Cómo se complementan UX y UI?
En este punto de nuestro estudio, que sin lugar a duda ha sido

gratificante, hemos hecho un abordaje realmente significativo
para comprender los fundamentos, los conceptos, las técnicas y
las herramientas necesarias para modelar y prototipar productos
de software para el usuario final. Durante el primer bimestre
estudiamos UX, y usabilidad como temas principales, y hasta
el momento conocemos los conceptos importantes del diseño
de UI. Sin embargo, a pesar de que comprendemos estos dos
conceptos fundamentales UX y UI surge una gran pregunta ¿Cómo
desarrollamos un prototipo basado en UX y UI? ¿Qué diferencia existe
entre estos dos conceptos? ¿Cómo se complementan? Ahora que
conocemos que es UX y UI, es importante que respondamos a estas
incógnitas.
122 MAD-UTPL
Antes de responder a las incógnitas planteadas lo invitamos a leer
el siguiente artículo de usabilitygeek.com, escrito por Alan Smith
How to Have Better UX Beforee UI Begins. Al finalizar esta lectura lo
invitamos a contestar la siguiente pregunta ¿por qué es importante
centrarse primero en la UX antes de diseñar la UI?, lo más probable
es que haya resuelto una de las primeras preguntas ¿cómo se
complementan UX y UI?
En palabras simples, podemos decir que a través de UX podemos

definir la forma en cómo se definirá la interacción humano-
computador que será la base sobre la cual se diseñará más adelante
la UI, para tomar el control y transmitir una buena UX al usuario
final. ¿Qué significa esto?, cualquier proceso de modelado de
usuario o desarrollo de un prototipo de aplicación, al igual que lo
que conocemos como ciclo de vida de desarrollo de software (SDLC,
por sus siglas en inglés) requiere de un proceso de investigación y
análisis que nos brinde las pautas necesarias para establecer los
elementos que requiere un producto de software, cómo se observa en
la figura 33.
Figura 33.
Proceso de modelado y desarrollo de una UI.
Pruebas de usuario
Pruebas de mediante
usuario prototipos de alta
de Wireframes fidelidad
Pruebas Pruebas
Inicio del
Investigación Construcción Lanzamiento
proyecto
Requisitos de Prototipo Diseño Frontend y Backend
negocio
Análisis a la Modelado de Revisar diagramas
competencia tareas del Diseño gráfico
usuario
Sketching
Wireframes
Fuente: Adaptado de Foia, D. (2020). UI Design Process: Why We Need It?
Gbievents.Com.
123 MAD-UTPL
Cuando desarrollamos un prototipo es fundamental tener en cuenta
o centrarnos primero en la UX antes que diseñar la UI. Necesitamos
conocer el contexto, las emociones, las preferencias, la investigación
entre otros aspectos cruciales que define la UX antes de definir el
aspecto visual de nuestra aplicación a través del UI. Imagine usted
diseñar una UI de software sin haber conocido al usuario final,
¿qué tal si dentro del universo de usuarios, debemos garantizar
que nuestra aplicación sea inclusiva?, lo más probable es que si no
partimos del proceso de investigación, nuestro diseño no cubra las
necesidades del contexto necesario.
(Smith, 2020), menciona que primero se hace UX, luego UI, ese es el
orden en el que se deben desarrollar las actividades de modelado
y prototipado de una aplicación. También destaca que no es
conveniente abordar UX y UI de forma paralela, peor omitir alguno
de estos dos conceptos. A pesar de ser notablemente diferentes no
podemos prescindir de ninguno a la hora de diseñar un buen producto
de software, algunas razones por las cuales a pesar de ser diferentes
se complementan entre sí, son las que destaca (Thukral, 2017):
Una buena UI conduce a una buena UX. Si la UI es amigable,

conduciría a una UX más positiva.
Ambos trabajan para aumentar la satisfacción del cliente y se

centran en la interacción del usuario con un producto o servicio.
El diseño de la UI es un componente clave de UX.
Otra de las preguntas que planteamos al inicio de esta sección fue

¿Qué diferencia existe entre estos dos conceptos? Pensemos por un
momento en un automóvil, ¿Qué elementos forman parte de la UI?
¿Qué elementos forman parte de la UX?
Para un automóvil, la interfaz de usuario incluye el volante, acelerador,

freno y embrague, el tablero de instrumentos, los diversos controles,
los asientos y el interior, las llaves y el mando a distancia, el
ambiente general del interior, etc. Por el contrario, una experiencia
124 MAD-UTPL
de usuario, o UX, abarca toda la experiencia que los usuarios tienen
con un producto como elementos internos: el motor, el chasis, el
manejo y la confiabilidad, así como los externos, como la sala de
exhibición del producto, la experiencia de compra y entrega, los
manuales del propietario y de reparación, la garantía del producto y el
departamento de servicio.
Entonces, aunque UX y UI son dos conceptos distintos, son realmente

complementarios, ¿cómo traducimos la analogía del vehículo a un
producto de software digital?, la UI, es el elemento que observa y
manipula el usuario de nuestro producto, sus elementos, colores,
tipografía, etc.; mientras que la UX, son todos aquellos elementos
que suceden en la pantalla, es decir, la interacción, las animaciones,
la forma en cómo está estructurado el contenido y sobre todo la
apreciación y emociones que tiene el usuario final al momento de
interactuar con nuestra aplicación, puede observar estos elementos
mencionados en la figura 34.
Figura 34.
Diferencias entre UI y UX.
Interfaz Experiencia
UI UX
• Identidad corporativa. • Arquitectura/organización

• Diseño visual. de contenidos.
• (iconos, imágenes, videos, • Características y
Producto final
etc.). objetivos del producto.
Interacción
• Colores y estilo. • Necesidades del usuario.
• Tipografias. • Analíticas/Test.
• Diseño gráfico y • Usabilidad y
creatividad. accesibilidad.
Fuente: Adaptado de Cubik, D. (n.d.). Diseño Web UX/UI.
125 MAD-UTPL
¿En qué momento cambiamos de UX a UI? Si pensamos en como
pasamos de la fase de UX a UI, es importante considerar los
conceptos de prototipado estudiados en la sección 3.4, unidad 3
del primer bimestre. Los principales artefactos que se generan para
pasar de UX a UI, son los prototipos de baja, media y alta fidelidad. Es
en este momento dónde el resultado de estos artefactos nos permite
pasar de una etapa a otra. Entonces, si analizamos el proceso desde
un alto nivel, el proceso de diseño se podría resumir de la siguiente
manera, como se muestra en la figura 35.
Figura 35.
Proceso de diseño de alto nivel para UX y UI
UX UI
Sketch Mockup
Usuario Wireframes Prototipo
Investigación al usuario Identidad corporativa

Arquitectura de información Diseño visual
Necesidades del usuario Colores y estilos
Analíticas/test Tipografías
Usabilidad y accesibilidad Diseño gráfico y creatividad
Cómo podemos observar, el proceso de alto nivel inicia por el

estudio de UX, partiendo de investigar las necesidades del usuario
y completar todas las actividades de UX. El artefacto resultante de
esta fase es el sketch, posteriormente se elaboran los wireframes,
es decir, a partir de la elaboración del prototipo de baja fidelidad,
sketch o bocetos que generalmente se desarrollan a mano alzada
en papel y lápiz, elaboramos los wireframes de la aplicación
o prototipo de media fidelidad. Aquí definimos la estructura y
126 MAD-UTPL
elementos importantes de lo que será más adelante nuestro
esquema de modelado. Los wireframes conducen al diseño de la UI
y a la especificación de los elementos visuales de lo que el usuario
podrá ver en un prototipo funcional y más adelante en un producto
de software. Es en la fase de UI, dónde elaboramos lo mockups o
prototipos de alta fidelidad, estos al construirse como modelos
o prototipos funcionales nos servirán para validar con la parte
interesada si el prototipo o modelo desarrollado cubre todas las
necesidades visuales de los usuarios finales.
El proceso de alto nivel de UX y UI, también marca un elemento

importante “el usuario”, es necesario que este proceso este marcado
por la participación del usuario para recibir la retroalimentación
necesaria, ajustar y diseñar productos que satisfagan las
necesidades del usuario. A continuación, hablaremos sobre los
métodos de diseño centrados en el usuario, para dar soporte a esta
explicación.
¡Continuemos!
4.5. Diseño centrado en el usuario
Es esencial comprender quién y cómo usarán las personas nuestro

producto de software, sin esta comprensión es difícil conseguir que
un producto de software sea de gusto y acceso de las personas. El
diseño centrado en el usuario (UCD, por sus siglas en inglés), es un
proceso de diseño iterativo en el que los diseñadores se centran en
los usuarios y sus necesidades en cada fase del proceso de diseño
(Interaction Design Foundation, 2020). Según usability.gov, UCD es
un modelo basado en el estándar internacional ISO 9241-210:2019:
Ergonomics of human-system interaction — Part 210: Human-centred
design for interactive systems. En este proceso, el diseño de UI
compromete la participación de los usuarios en todo el proceso a
través de múltiples técnicas de investigación y diseño.
127 MAD-UTPL
De forma general las prácticas UCD se enfocan en crear productos
poniendo como centro del proyecto a los usuarios, con la expectativa
de que los productos de software que se están diseñados estén
totalmente alineados a las necesidades y expectativas de
los usuarios. El diseño centrado en el usuario se trata de una
investigación profunda sobre los hábitos de los usuarios, desde sus
interacciones con el producto hasta su visión de cómo debería verse
y comportarse el producto.
¿Por qué el diseño centrado en el usuario?
El diseño centrado en el usuario es la única metodología de diseño

que coloca a los usuarios en el centro del proceso de diseño. Por
lo tanto, es ideal para desarrollar productos o sitios web que deben
ser simples y fáciles de usar. Ayuda a comprender las necesidades y
preferencias de los usuarios con respecto a las características de un
producto, tarea, objetivos, flujos de usuarios, etc. (Le, 2017). Según
Interaction Design Foundation, UCD es un proceso iterativo en el que
los diseñadores utilizan una combinación de métodos y herramientas
de investigación para comprender las necesidades de los usuarios.
Cada iteración comprende cuando fases, como se observan en la
figura 36.
Figura 36.
Fases del modelo UCD.
Fuente: Adaptado de Interaction Design Foundation. (2020). What is User

Centered Design? Interaction-Design.Org.
128 MAD-UTPL
El modelo UCD, describe en primer lugar como los diseñadores
trabajan en equipo para intentar comprender el contexto para el
que los usuarios pretenden usar el sistema. Luego, identifican los
requisitos de usuario. Los elementos resultantes de estas fases
iniciales son el insumo necesario para que los miembros de un
equipo de diseño propongan sus primeros bocetos de solución,
en esta fase es vital comprender que los primeros bocetos tienen
que estar alineados al contexto y a los requisitos para verificar que
tan bien están alineados los primeros bocetos con lo que esperan
los interesados. Al ser el modelo UCD, un proceso iterativo tanto
diseñadores como usuarios deben comprender que el proceso de
diseño puede volver a fases posteriores, cuantas veces sea necesario
hasta que el diseño de las UI resultante satisfaga las necesidades del
usuario final.
Es importante destacar que el Diseño Centrado en el Usuario o UCD,

en un proyecto de software puede incorporarse fácilmente a cualquier
enfoque de desarrollo sea que esté utilizando un modelo en cascada,
ágil o cualquier otro enfoque.
Ahora que conocemos este modelo lo invitamos a reflexionar y a

contestar la siguiente pregunta ¿qué tienen en común el modelo
UCD con un proceso de desarrollo de software que haga uso de un
escenario tradicional o ágil? ¿Cómo integraría usted el proceso UCD a
un Sprint en un proceso de desarrollo gestionado con Scrum?
Revise el siguiente recurso del sitio web w3.org, Accessibility,

Usability and Inclusion, navegue por el sitio web y responda a la
siguiente pregunta ¿Por qué es importante que las decisiones de
diseño se basen en el usuario como elemento principal del proceso
de modelado?
Lea el siguiente artículo: Diseño inclusivo: diseñando interfaces para

todos de Jesús Maceira ¿cómo cree usted que afecte no considerar a
las personas para las que diseña?
129 MAD-UTPL
4.6. Principios de diseño
Estudiar el trabajo de otros puede inspirar nuestra creatividad, pero

estudiar y comprender los principios del diseño nos protegerá de
cometer errores. Los principios de diseño son las leyes científicas
del mundo de la usabilidad, al igual que las leyes de la gravedad y la
relatividad en el mundo de la física (Lowdermilk, 2013).
Los principios de diseño son bastante constantes y se han definido

a lo largo de muchos años a partir del estudio de la cognición y el
comportamiento humano. Los principios nos orientan a expresar
a través de un lenguaje común lo que pretendemos comunicar a
través de una UI, además, entender como los humanos comprenden
e interpretan de manera efectiva la interactividad con un producto
digital.
4.6.1. Principio de proximidad (principio Gestalt)
A continuación, según Travis Lowdermilk, (2013), se presentan los

principios más importantes.
El principio de proximidad es uno de los muchos principios definidos

en los principios de percepción de la Gestalt. Si bien debe estudiar
todos los principios de la Gestalt, el principio de proximidad tiene
el mayor impacto potencial para sus aplicaciones y requiere la
menor cantidad de esfuerzo. El principio establece que percibimos
relaciones entre objetos que están más juntos. Por el contrario, los
objetos que están más separados aparentemente tendrían menos
relación.
Debido a esto, es posible que escuche el principio de proximidad

denominado principio de agrupación. Básicamente, es más fácil ver
patrones de funcionamiento cuando los elementos se agrupan según
su función, como se muestra en la figura 37.
130 MAD-UTPL
Figura 37.
Patrones de funcionamiento principio de proximidad.
Fuente: INZONE. (2020). The 6 Principles of Design. inzonedesign.com.
Por eso, el principio de proximidad puede tener el mayor impacto.

Simplemente organizando y agrupando elementos de una manera
que describa su función, puede mejorar significativamente la
experiencia del usuario con su aplicación. Un diseño organizado
facilita el aprendizaje de su aplicación y pone menos esfuerzo en el
usuario para encontrar cosas. Muchos desarrolladores pierden este
simple principio porque no se han tomado el tiempo para considerar
cómo se debe organizar su aplicación. Piensan que el diseño de
su aplicación tiene sentido; mientras tanto, sus usuarios están
confundidos y frustrados. El principio de proximidad se puede utilizar
como un poderoso indicador de que ciertas características van
juntas. Por ejemplo, observe la figura 38.
131 MAD-UTPL
Figura 38.
Ejemplo de UI de principio de proximidad.
Fuente: Yalanska, M. (2020). Gestalt Theory for UX Design: Principle of

Proximity. Blog.Tubikstudio.Com.
Revise el siguiente artículo, escrito en el blog nachomadrid.com sobre

algunos elementos o estrategias de accesibilidad para garantizar
este y otros principios a la hora de diseñar una UI.
132 MAD-UTPL
4.6.2. Visibilidad, retroalimentación visual y prominencia visual
La visibilidad es realmente cualquier cosa que use para enfocar

visualmente un elemento o acción en la UI de su aplicación. Hay
varias formas de hacer esto:
Tipografía: los diferentes estilos y tamaños de texto pueden

llamar la atención de un usuario.
Opacidad: ajustar la opacidad de un elemento ayuda a reducir o

mejorar su visibilidad.
Prominencia: aquellos elementos que sean más grandes que

otros les brindarán mayor visibilidad.
Estado: indica que la aplicación está procesando una solicitud

o ha recibido información del usuario.
Color / Contraste: tradicionalmente, los elementos con mayor

contraste o colores más brillantes llamarán más la atención.
El principio de visibilidad se puede utilizar cuando se indica el estado

de una aplicación. Por ejemplo, cuando un usuario quiere enviar
datos a través de un formulario web o móvil, como se observa en
la figura Al enviar los datos estos son validados. En caso de no
completar los datos obligatorios, la interfaz deberá comunicar el
estado del envío de datos, esto nos permite mantenernos informados
sobre las acciones que, como usuarios realizamos a través de una UI.
133 MAD-UTPL
Figura 39.
Validación de campos obligatorios de formulario y retroalimentación
visual.
Primer nombre Primer apellido Usuario
Daniel Rodríguez @
¡Muy bien! ¡Muy bien! Por favor ingresa el

nombre de usuario
Ciudad Cantón
Elige Elige
Por favor ingresa la Por favor ingresa el

ciudad donde resides cantón donde resides
Acepte términos y condiciones
Tienes que aceptar las condiciones antes de enviar tus datos
Enviar
Otro aspecto del principio de visibilidad es proporcionar información

visual. El principio de retroalimentación visual establece que las
aplicaciones deben responder a la entrada del usuario. En otras
palabras, su aplicación debe mostrar alguna indicación de que ha
recibido información del usuario. Un ejemplo simple es una alerta de
notificación cuando recibimos un nuevo mensaje, como se observa
en la figura El objetivo general del principio de retroalimentación
visual es notificar al usuario que se ha producido una interacción.
Figura 40.
Notificación al usuario producto de alguna interacción en la UI de la
aplicación.
Mensajería hace 15 minutos

Tienes un nuevo
mensaje.
134 MAD-UTPL
4.6.3. Jerarquía
Al desarrollar sistemas más complejos, puede resultar difícil

organizar todas las funciones de su aplicación. El principio de
jerarquía o jerarquía visual, establece que las aplicaciones deben
proporcionar indicadores visuales para ayudar al usuario a percibir
cómo está organizada la aplicación. La mayoría de las veces,
esto toma la forma de menús desplegables y otros elementos de
navegación como se observa en la figura 41.
Figura 41.
Representación de una UI con jerarquía y sin jerarquía visual.
Sin jerarquía Jerarquía

Fuente: Adaptado de poradora. (2020). Visual Perception. In poradora.com.
135 MAD-UTPL
4.6.4. Modelos mentales y metáforas
Generalmente cuando nos disponemos a manipular una nueva

UI, inconscientemente aplicamos los conocimientos que hemos
adquirido de otras UI para comprender su funcionamiento. Nuestras
experiencias denotan la forma en cómo pensamos que funcionan
la gran mayoría de aplicaciones. Este principio se basa en crear
modelos o interacciones que sean fáciles de memorizar para los
humanos. Sin darnos cuenta utilizamos la función de copiar y pegar
en una y otra aplicación y reconocemos estas funciones a través
de íconos visuales representativos. Otro ejemplo significativo de
este principio es un método de guardar una combinación de teclas
mediante el cual enviamos una señal a la UI para que ejecute
una función como abrir una ventana de ayuda. La mayoría de las
veces tecleamos F1 y nos aparece la ayuda, como lo observamos
en la figura 42 o un scroll vertical u horizontal para manipular una
aplicación móvil.
Este principio nos ayuda a reforzar metáforas de interacción,

para intuir el funcionamiento e interacción de una aplicación sin
la necesidad de leer un manual u obtener una explicación de
funcionamiento.
136 MAD-UTPL
Figura 42.
Ventana de ayuda de Microsoft Word.
4.6.5. Divulgación progresiva
La divulgación progresiva es una excelente manera de ayudar a

los usuarios a comprender qué funciones están disponibles para
ellos dentro de su aplicación. Simplemente ocultando opciones que
no son posibles, puede reducir la carga cognitiva de los usuarios
y guiarlos de manera más efectiva a través de sus tareas. El
principio de divulgación progresiva es bastante fácil de emplear y
es especialmente útil en aplicaciones más complejas con menús
cargados de funciones. Un ejemplo de esto es el uso de menús y
submenús a través de los cuales el usuario puede ir navegando
hasta encontrar las funciones que requiere ejecutar en un momento
determinado, como puede observar en la figura 43.
137 MAD-UTPL
Figura 43.
Menú de navegación con 2 niveles.
Inicio Menú 1 Menú 2 Menú 3
Opción 1
Opción 2
Opción 3
4.6.6. Consistencia
A veces es bueno cuando una aplicación se comporta como uno

espera, cuando un elemento del menú está exactamente donde tiene
que estar y que este produzca una acción con el resultado adecuado.
Este principio mantiene que los usuarios aprenden y comprenden las
aplicaciones más fácilmente cuando son consistentes con lo que ya
conocen. Equilibrar la coherencia en su diseño puede ser un desafío,
pero si lo hace correctamente, puede crear una aplicación que sea
fácil de aprender y agradable de usar. Observe el ejemplo de la figura
44.
138 MAD-UTPL
Figura 44.
Representación de ejemplo de consistencia en el diseño de una UI.
Fuente: Yalanska, M. (2020). UX Writing: Handy Tips on Text Improving User

Experience. Blog.Tubikstudio.Com.
4.6.7. Asequibilidad y restricciones
Muchos objetos, como herramientas y mecanismos, están diseñados

para permitirnos su uso adecuado y evitar que los usemos de
manera incorrecta. Estos son los principios de la asequibilidad
y restricciones. Un ejemplo de esto es la transmisión manual
de un vehículo. Estos objetos están diseñados para no solo
complementarse entre sí, sino que también funcionan de una única
manera. Es prácticamente imposible accionar una marcha más o
menos en un vehículo o hacerlo de manera incorrecta. Un ejemplo
claro de este principio en la UI de una aplicación es el uso de un Drag
and Drop o función de arrastrar un archivo para subirlo a un producto
de software, como se observa en la figura Está diseñado para que el
mecanismo cumpla una única función y el usuario no equivoque sus
acciones.
139 MAD-UTPL
Figura 45.
Función Drag and Drop (Arrastrar y soltar) de una UI.
Fuente: Noaman, T. (2019, November 6). How to create a Drag and Drop file
uploading in Angular. Medium.Com.
4.6.8. Confirmación
Una forma de evitar que los usuarios hagan algo incorrecto es

pedir su confirmación. El principio de confirmación establece que
una aplicación debe evitar acciones no deseadas solicitando una
verificación a su solicitud de acción. Por ejemplo, cuando estamos
trabajando en un documento e intentamos cerrar la herramienta
de software. Antes de perder el trabajo, esta nos pide a través de la
UI una confirmación de nuestra acción. En la mayoría de los casos
gracias a este principio evitamos perder el trabajo realizado. En
pocas palabras, no tenemos forma de cerrar la aplicación sin antes
abordar, si desea guardar el documento, como se observa en la figura
46.
140 MAD-UTPL
Figura 46.
Solicitud de confirmación para guardar un documento de Microsoft
Word.
Estos y otros principios pueden utilizarse como una herramienta o

una lista de tareas que podemos usar a la hora de diseñar nuestras
interfaces de usuario. Recuerde que el resultado de modelar para
el usuario es contar con la retroalimentación que estos nos puedan
dar para ajustar nuestros prototipos y cubrir todas y cada una de las
expectativas de la parte interesada. Revise el siguiente artículo The
Basic Principles of User Interface Design, de UXPin e identifique otros
principios que usted podría considerar para diseñar las interfaces de
usuario.
Lea el siguiente recurso web: How People with Disabilities Use the
Web, comprenda cómo las personas con discapacidades utilizan
la web. Identifique principios y técnicas que puedan apoyar a su
proceso de diseño de UI. ¿Qué aspectos, principios o técnicas debería
considerar para que sus interfaces sean inclusivas para personas con
discapacidades físicas? Justifique su respuesta.
141 MAD-UTPL
Semana 11
Ahora que conocemos como se complementan UX y UI, la

metodología de diseño centrado en el usuario y los principios básicos
de diseño, y además haber abordado temas como usabilidad,
accesibilidad e inclusividad para usuarios con discapacidades, es
importante que conozca los fundamentos de diseño de la UI. A
continuación, en la presente semana conoceremos los fundamentos
de diseño de la UI.
4.7. Fundamentos de diseño de la UI
Definir prototipos y modelar para el usuario antes de construir un

producto de software es fundamental para asegurar la calidad
del producto, no solo a nivel lógico, sino a nivel visual. Cuando
empezamos a analizar la UX, identificamos algunas pautas,
enfocadas en las expectativas de la parte interesada de lo que se
espera entregar a través de una interfaz de usuario. La UI es el puente
entre lo que un producto de software es capaz de hacer y la UX que
se pretende entregar al usuario final. Cómo lo podemos ver ¿UX y
UI son complementarios? No se puede pensar en diseñar una UI,
modelar o diseñar un producto sin antes conocer lo que requieren los
interesados del proyecto.
Modelar para el usuario, construir un prototipo funcional o diseñar

una UI, es un aspecto esencial para abordar la construcción de un
producto de software. La diversidad de dispositivos actualmente en
el mercado ha hecho que ya no pensemos solo en los componentes
lógicos de software; sino, debemos abordar conceptos de
representación visual para que el producto se vea atractivo y sea
142 MAD-UTPL
fácil de utilizar para cualquier usuario. En este contexto, es necesario
que después de haber investigado las necesidades y la UX que
los interesados quieren plasmar en algún producto de software
conozcamos algunos aspectos importantes y le planteo aquí una
pregunta ¿qué necesita usted conocer para diseñar una UI?
Lo más probable es que su respuesta sea pensar en los colores,

imágenes, iconografías o algún otro elemento visual, pero esto ¿es
suficiente para cubrir la variedad de dispositivos digitales con los que
contamos actualmente? Antes de trabajar en la UI de una aplicación
de software debemos tener claro dos aspectos principales: 1) soporte
y 2) elementos:
1. El soporte: es decir para que tipo de dispositivo vamos a

diseñar, no es lo mismo diseñar una UI para un sitio/aplicación
web que, para un dispositivo móvil, tableta o incluso una
aplicación para un televisor inteligente. Es importante que
tengamos en cuenta este aspecto, ya que cada uno de estos
dispositivos varían no solo en tamaño de la pantalla, sino en
densidad, resolución, etc., como se observa en la figura 47.
Revise el siguiente recurso y conozca las métricas de la mayor parte

de dispositivos digitales del mercado para los cuales podemos
diseñar la UI.
143 MAD-UTPL
Figura 47.
Diversificación de dispositivos digitales para uso de aplicaciones de
software.
Fuente: pixabay. (2019). Dispositivos Móviles Sitio Web. Pixabay.Com.
2. Los elementos: son los componentes o elementos visuales de

la UI, algunos elementos principales deben considerar:
y Guía de estilo: representar las características visuales

de la aplicación para los diferentes formatos a los
que se tiene que adaptar una aplicación de software,
estos pueden incluir, paletas de color, estilo de textos,
iconografía, imágenes, botones, modales, entre otros.
y Librería de componentes: marcos o frameworks de

trabajo que ayuden a los diseñadores a construir,
mantener y evolucionar un producto de software de
manera rápida y sencilla.
y Redacción: importante porque se debe establecer un

vocabulario corporativo para que se maneje una única
estrategia de comunicación con los usuarios finales, esto
lo determinará el análisis de UX.
144 MAD-UTPL
Otros aspectos importantes por considerar para diseñar una UI
son los componentes, patrones, gestos y acciones, y el mapa de
navegación de la UI. Revisemos en que consiste cada uno de estos
elementos.
¡Continuemos con nuestro estudio!
4.7.1. Componentes de la UI
Si partimos de una definición formal de ¿qué es un componente? La

RAE, lo define como algo que forma parte de un todo. ¿Qué quiere
decir esto? Un componente es un elemento que forma parte de un
objeto, si lo traducimos al concepto de UI, un componente es un
elemento o un conjunto de elementos que componen una UI. Entre
los componentes más importantes del UI, se pueden destacar tres,
la arquitectura de la Información, patrones de interacción y los
elementos gráficos, a continuación, revisaremos cada uno de estos.
4.7.1.1. Arquitectura de la información
El Instituto de Arquitectura de Información, describe a la Arquitectura

de Información (AI), como: “la práctica de decidir cómo organizar las
partes de algo para que sea comprensible”. Es decir, es la forma en
cómo organizamos la información que se va a presentar en una UI.
Para (Rosenfeld et al., 2015), La arquitectura de la información (IA) es
una disciplina de diseño que se centra en hacer que la información
se pueda encontrar y comprender. La IA nos permite pensar en
los problemas a través de dos perspectivas importantes: que los
productos y servicios de información son percibidos por las personas
como lugares hechos de información y que estos entornos de
información puedan organizarse para una búsqueda y comprensión
óptima.
145 MAD-UTPL
Una buena IA, es fundamental para determinar los contenidos, las
funcionalidades del producto y facilitar el acceso a ellas de forma
que la información que necesita el usuario sea fácil de ubicar y
manipular. Pensemos por un momento en el siguiente ejemplo: un
usuario necesita encontrar un producto para comprar a través de una
plataforma web. Lo más común es que el usuario quiera realizar
su transacción en el menor tiempo posible, por lo que, la primera
interacción que se le viene a la mente es la de abrir la aplicación
y buscar el producto, sin la necesidad de navegar por toda la
aplicación, tal y como se observa en la figura Si no consideramos
a la AI, seguramente colocamos el buscador sin considerar que
este debe ser visible apenas cargue la aplicación. La necesidad del
usuario por encontrar el buscador hará que considere dos opciones:
1) navegar por la aplicación hasta encontrar el buscador y comprar
el producto y/o 2) desistir de la compra e ir a otra plataforma de
ventas en línea. En los dos casos, estos son aspectos negativos y
emociones o frustraciones fuertes que va a causar que perdamos no
uno sino varios compradores potenciales por no pensar en quién va
a usar la aplicación y determinar de forma correcta cómo encontrar
la información de manera rápida e intuitiva por la interfaz de la
aplicación.
Figura 48.
UI de la plataforma de ventas de Amazon.
Fuente: Amazon. (2021). Amazon.com: Online Shopping for Electronics,

Apparel, Computers, Books, DVDs & more. Amazon.Com.
146 MAD-UTPL
Para trabajar de forma eficaz con la IA, Rosenfeld et. Al. (2015), en
el libro Information Architecture for the World Wide Web, destaca un
modelo basado en tres conceptos comunes: usuarios, contenido y
contexto, cómo se puede apreciar en la figura 49.
Figura 49.
Los tres círculos de la Arquitectura de la Información (AI)
Objetivos de negocio, financiación,

política, cultura, tecnología,
recursos y limitaciones.
Contexto
Contenido Usuarios
Audiencia, tareas, Audiencia, tareas,

necesidades, necesidades,
comportamiento de comportamiento de
búsqueda de información, búsqueda de información,
experiencia. experiencia.
Fuente: Adaptado de Rosenfeld, L., Morville, P., & Arango, J. (2015).

Information Architecture FOR THE WEB AND BEYOND Fourth-Edition. In
College Research Libraries News (Vol. 61, Issue 9).
Este modelo se basa en el concepto de “ecología de la información” y

se compone de usuarios, contenido y contexto ¿por qué? Este modelo
permite a las personas visualizar y comprender la interdependencia
que existe entre estos tres conceptos para alcanzar una ecología
de la información adecuada y principalmente adaptativa para los
usuarios. Si analizamos cada uno de estos conceptos, necesitamos
comprender que cualquier proyecto está motivado por objetivos o
metas de negocio que es desde dónde partimos para poder crear una
147 MAD-UTPL
AI adecuada. Por otro lado, debemos ser conscientes del volumen de
contenido de información y comportamiento de los usuarios a la hora
de buscar la información o funcionalidades que requieren.
El buen diseño de la arquitectura de información se basa en las tres

áreas, y las tres son objetivos móviles. Los usuarios pueden variar
en su actitud, demografía, psicografía, tareas y necesidades de
información, comportamientos de búsqueda de información y más.
El contenido puede variar en calidad, vigencia, autoridad, popularidad,
valor estratégico, costo y más. Y el contexto organizacional puede
variar según la misión, visión, metas, política organizacional,
cultura organizacional, grado de centralización o autonomía, y más.
La combinación particular de variables difiere de un entorno de
información a otro, y dentro del mismo entorno varía con el tiempo.
En este sentido el modelo sugiere se consideren los tres conceptos

del modelo de la siguiente forma.:
Modelo de la Arquitectura de la Información
En conclusión, para lograr una AI eficaz necesitamos que estos tres

conceptos, contexto, contenido y usuarios confluyan entre sí para
presentar al usuario final del producto, una experiencia personalizada
que le permita hacer uso de los productos que estamos
construyendo.
4.7.1.2. Patrones de interacción
Un patrón es una solución recurrente a un problema en un contexto.

Piense usted un momento en un problema simple del entorno
al que nos enfrentemos todos los días como personas “atarnos
los cordones de los zapatos” ¿cómo resolvemos este problema?
Inconscientemente las personas utilizamos un único patrón para
atar los cordones de los zapatos. Esto es un patrón, es una solución
148 MAD-UTPL
recurrente que podemos dar a un problema del contexto, sea
este de la vida cotidiana o para resolver algún aspecto técnico de
ingeniería como en nuestro caso un problema enfocado a software.
Los patrones de interacción representan elementos, componentes
o interacciones que utilizamos para representar o comunicar algo a
través de una UI.
Diana McDonald (2019), destaca que los patrones de IU están

presentes en cualquier dispositivo digital a través de sitios web,
aplicaciones, aplicaciones móviles nativas y otro software o
dispositivos. ¿Dónde? Los podemos apreciar en elementos de
navegación, acciones de diálogo, interacciones, notificaciones,
etc. ¿Por qué diseñar y desarrollar desde cero cuando tenemos
patrones que podemos reutilizar? Es una pregunta difícil de contestar,
a menos de que una UI requieran elementos de interfaz muy
personalizados pensaríamos en desarrollar o diseñar desde cero.
Con esto se pretende decir que no es necesario reinventar la rueda
cuando podemos apoyarnos en patrones que ya están constituidos
y podemos reutilizar, como por ejemplo implementar notificaciones
para dispositivos móviles (ver figura 50), la lógica funcional es la
misma en todas las aplicaciones que hacen uso de este patrón.
149 MAD-UTPL
Figura 50.
Patrón UI de notificaciones para aplicaciones móviles
Fuente: Email Marketing News. (2020). Coming soon: iOS and Android Push
Notifications. Tapmail.Info.
Conocer los patrones puede ayudarlo a diseñar de manera eficiente

al reconocer rápidamente la mejor herramienta para el trabajo,
comprender el valor de las diferentes soluciones y resolver la mayor
cantidad de problemas a la vez. Por ejemplo, un cuadro de búsqueda
de autocompletar podría ayudar a los visitantes de su sitio a navegar
por el contenido de su sitio, reconocer el término que están buscando
sin saber el nombre exacto o la ortografía y seleccionar un resultado
después de escribir solo unos pocos caracteres sin necesidad de
gastar energía escribiendo el término de búsqueda completo. Al
aprender sobre el patrón de IU de autocompletar, reconocerá más
rápidamente cuándo necesita usarlo y lo mismo ocurre con todos los
patrones de IU.
150 MAD-UTPL
Figura 51.
Función de autocompletado, UI de Amazon.
Fuente: Amazon. (2021). Amazon.com: Online Shopping for Electronics,

Apparel, Computers, Books, DVDs & more. Amazon.Com.
Los patrones de diseño de UI están tomando cada vez más fuerza y

son más populares entre los equipos de diseño y desarrollo, ya que
existen sitios web especializados que mantienen marcos de trabajo
que ayudan a definir mucho más rápidamente como se verá una UI
haciendo uso de patrones preestablecidos que pueden usarse de
acuerdo con los intereses de cada proyecto.
Ingrese al sitio web ui-patterns.com y encuentre referencias de

patrones de diseño comunes que puede utilizar a la hora de diseñar
sus UI, para aplicaciones o sitios web. Revise también el sitio web
mobile-patterns.com para observar patrones de diseño enfocados en
la construcción de aplicaciones móviles.
4.7.1.3. Elementos gráficos
Los elementos gráficos son aquellos elementos o aspectos gráficos

que el usuario visualiza en la pantalla. Estos elementos tienen una
estrecha relación con los patrones de UI. Su diferencia radica en
que los elementos son aspectos independientes que se pueden
utilizar para representar una acción u obtener algún input o entrada
del usuario como un botón, un campo de texto o un contenedor de
151 MAD-UTPL
información. De acuerdo con usability.gov, cuando diseñamos una UI,
se tienen que considerar los aspectos de contexto de la aplicación
para construir interfaces coherentes y predecibles que permitan
acceder y completar las acciones o tareas que los usuarios pretenden
realizar a través de la UI de una aplicación de software.
Algunos de estos elementos incluyen, controles de entrada,

componentes de navegación, componentes informativos,
contenedores, entre otros. En las tablas (7, 8, 9), se describen algunos
de estos elementos de UI:
Controles de entrada
Tabla 7.
Controles de entrada de UI
Elemento Descripción Ejemplo

Casillas de Permiten al usuario seleccionar una o
verificación más opciones
Lista de Permite al usuario seleccionar una

desplegable opción de una lista desplegable
Opciones
de opciones Opciones
Opción A
Opción B
Opción C
Campos de Permite al usuario ingresar datos de
Dirección de correo
texto texto como correo electrónico, texto
plano, contraseñas, etc. name@example.com
Escriba su observación
Fuente: Elaboración propia
152 MAD-UTPL
Componentes de navegación
Tabla 8.
Controles de navegación de UI

Paginación Permite al usuario navegar entre Anterior 1 2 3 Siguiente
varios elementos de una tabla.
De esta forma se organizan por
número de filas para que sea
mucho más fácil ver los datos.
Íconos Permite al usuario de forma
intuitiva y rápida comprender
como funciona un conjunto de
opciones o botones. En algunos
casos es más fácil transmitir
a través de íconos o imágenes
que con texto.
Carrusel de Permite al usuario navegar
imágenes a través de imágenes. Este
tipo de componente puede
utilizarse para destacar algunos
elementos principales de la
aplicación de software.
153 MAD-UTPL
Componentes de información
Tabla 9.
Controles de información de UI

Notificaciones Permite al usuario notificar
alguna acción dentro de un Mensajes 28
sistema o comunicar o alertar
algún tipo de contenido.
Barras de Permite al usuario comprender
25% Procesando...
progreso lo que está sucediendo dentro
de un sistema o transmitir
algún tipo de información
desde el sistema al usuario
Ventana Permite al usuario interactuar
emergente con algún elemento adicional aacción de Ventana emergente Siguiente
los componentes originales. ene@exa

ba su ob
4.7.2. Gestos y acciones de la UI
Las UI, en la actualidad deben adaptarse a la pantalla de cualquier

dispositivo digital, sea una aplicación hecha para funcionar en un
teléfono inteligente, una tablet o una aplicación web que tenga
que adaptarse al tamaño de pantalla de escritorio y/o móvil. Los
gestos son aquellas interacciones o movimientos que las personas
realizamos en las pantallas de los dispositivos digitales para generar
una acción o interactuar directamente con las funcionalidades de un
dispositivo digital.
En una pantalla de dimensiones pequeñas como la de un dispositivo

móvil, los gestos tienen que ser intuitivos para que las personas
puedan utilizar una aplicación de software. Una interfaz es intuitiva
cuando los usuarios comprenden su comportamiento y efecto sin el
uso de la razón, la memorización, la experimentación, la asistencia o
154 MAD-UTPL
la capacitación (Everett N. McKay, 2013). Es decir, si una aplicación
de software no es fácil de manipular y comprender, difícilmente un
usuario final la va a utilizar.
Cuando pensamos en gestos tenemos que considerar, algunos

aspectos fundamentales ¿dónde va a utilizar la UI un usuario final?
Esta podría estar destinada a usarse en una aplicación web, móvil,
tablet, reloj inteligente entre otros dispositivos. Por otro lado, de qué
forma se va a manipular el dispositivo, en algunos casos los gestos
tendrían que ir enfocados a que el usuario haga uso de una sola
mano o las dos como lo vemos en la figura Si bien estas preguntas
las respondemos en el proceso de investigación de UX, es importante
tener en cuenta estos factores para poder determinar los gestos y las
acciones que estos desencadenarán.
Figura 52.
Forma de sostener un teléfono móvil
Fuente: Cuello, J., & Vittone, J. (2013). Capítulo 7: Interacción y patrones –

Diseñando apps para móviles. Appdesignbook.Com.
155 MAD-UTPL
Los gestos que un usuario puede realizar en una interfaz pueden
ser de dos tipos, deslizables y de toque. Los gestos deslizables, son
aquellas acciones que realizamos cuando arrastramos los dedos en
la pantalla de nuestros dispositivos digitales para desencadenar una
acción por ejemplo un scroll o un desplazamiento hacia abajo, para
encontrar algún tipo de contenido como cuando navegamos a través
de la aplicación de Facebook, como se observa en la figura 53 o un
swipe up o desplazamiento hacia arriba cuando queremos encontrar
el menú de aplicaciones de un teléfono android.
Figura 53.
Gesto de desplazamiento hacia abajo o scroll
Fuente: Ketler, A. (2017). Are You Addicted To “The Scroll”? Why It’s Time To
Face Smartphone Addiction & Take The Power Back. Collective-Evolution.
Com.
Los gestos de toque son aquellos que realizamos cuando damos

un clic o toque sobre la pantalla de un dispositivo para generar una
acción en una aplicación móvil. Por ejemplo, dar un doble toque para
dar un “me gusta” en una imagen de Instagram o un toque para abrir
una aplicación que esté instalada en nuestros dispositivos móviles.
156 MAD-UTPL
Algunas buenas prácticas a la hora de seleccionar algún tipo de gesto
para nuestras interfaces señalan que los gestos deben ser intuitivos,
es decir, reconocibles por los usuarios, estos no deben afectar a la
navegabilidad, sino más bien hacerla más sencilla y los gestos deben
guardar coherencia con lo que se pretende representar.
Actividad 1: ingrese al siguiente artículo: Accessiibility guidelines for

UX Designers de Avinash Kaur. Identifique los estándares y pautas
de diseño para personas con discapacidades ¿cómo cree usted
que podría consolidar el diseño de UI para todo tipo de usuarios?
De ser esto posible, ¿qué elementos en común con los vistos en
esta semana de estudio podría reutilizar? Si considera que no es
posible unificar un solo diseño de UI para todo tipo de usuarios ¿qué
estrategia seguiría usted para garantizar el acceso inclusivo a sus
proyectos de desarrollo?
Actividad 2: Revise el siguiente REA, Lecture 20: Color Design

and Typography, conozca algunos aspectos técnicos y humanos
importantes acerca del uso del color y tipografía para el diseño de
sus interfaces.
Estimado estudiante, mediante este cuestionario pondrá a prueba lo

aprendido hasta el momento.
157 MAD-UTPL
Autoevaluación 4

1. ¿Qué es una UI?
a. La Interfaz de usuario a través de la cual los humanos

pueden interactuar directamente con el sistema de
software.
b. La interfaz de usuario a través de la cual los humanos

pueden ejecutar todas las tareas lógicas de la aplicación.
c. La interfaz de usuario a través de la cual los humanos

pueden manipular los componentes internos de la
aplicación.
2. Desde el punto de vista de la investigación, la UI es un

subconjunto del campo de estudio:
a. Interacción humano-interfaz.
b. Interacción humano-computador.
c. Interacción computador-humano.
158 MAD-UTPL
3. Elaborar un prototipo o un modelo de usuario, antes de iniciar
las actividades de desarrollo permite:
a. Realizar actividades de validación con el usuario que

permitan evitar problemas durante la etapa de desarrollo
de una aplicación web, móvil o de otro tipo.
b. Realizar actividades de validación lógica con el usuario.
c. Realizar actividades de validación funcional con el

usuario.
4. Un modelo o prototipo funcional es:
a. Una réplica o demo de cómo una aplicación se va a

comportar a nivel arquitectónico.
b. Una réplica o demo de cómo una aplicación va a
funcionar a nivel lógico.
c. Una réplica o demo de cómo una aplicación se va a
comportar a nivel visual.
5. Los objetivos de diseño de una UI son:
a. Diseño centrado en humanos e interfaces diseñadas por

humanos.
b. Diseño centrado en humanos e interfaces diseñadas por
diseñadores.
c. Diseño centrado en humanos e interfaces diseñadas para
sistemas.
6. Cuando elaboramos un prototipo o modelo de usuario ¿por

dónde empezamos?:
a. UI, luego UX.

b. UX, luego UI.
c. UI, luego usabilidad.
159 MAD-UTPL
7. Cuál es el artefacto resultante del proceso de UX en el que se
basa el diseño de UI:
a. Sketch.
b. Mockups.
c. Wireframe.
8. La práctica de diseño centrado en el usuario se enfoca en
a. Crear modelos y/o prototipos poniendo como centro del

proyecto al usuario.
b. Crear modelos y/o prototipos poniendo como centro del
proyecto al gerente.
c. Crear modelos y/o prototipos poniendo como centro del
proyecto al diseñador.
9. El principio de diseño que permite agrupar los elementos de la

UI por su función es:
a. Proximidad.
b. Jerarquía.
c. Consistencia.
10. El principio de diseño que se apoya en el uso del aprendizaje

basado en el uso de otras UI es:
a. Modelos mentales y metáforas.

b. Visibilidad, retroalimentación visual y prominencia visual.
c. Asequibilidad y restricciones.
160 MAD-UTPL

Semana 12
Semana a semana vamos completando los contenidos de la

asignatura, hasta el momento conocemos el marco conceptual
y fundamental para diseñar una UI, para construir un modelo o
prototipo de usuario que sirva como artefacto de representación para
permitir que sea la parte interesada quién valide el comportamiento y
experiencia de usuario que desea transmitir a través de las UI. En esta
semana nuestro estudio se centrará en los enfoques de diseño, para
web y móvil. Además, conoceremos algunos aspectos importantes
que nos ayudarán a alinear nuestros diseños a uno u otro enfoque.
4.8. El enfoque de diseño
¿Qué debemos considerar para diseñar una UI para uno u otro

dispositivo? Seguramente a esta altura de su estudio esta será
una gran interrogante, más aún cuando nos enfrentamos a una
nueva normalidad que ha provocado que cada vez más gente
esté mayor tiempo frente a un computador o un dispositivo móvil,
161 MAD-UTPL
interactuando con servicios digitales a través de una UI. Las personas
se han trasladado desde escenarios tradicionales manuales a usar
tecnología mediante el uso de dispositivos digitales para realizar
sus tareas cotidianas. Desde leer una noticia en un medio digital
hasta realizar sus actividades laborales a través de herramientas de
software.
Los diseñadores de UI deben considerar que el uso de múltiples

dispositivos digitales está en constante crecimiento, por lo que
diseñar una UI no es tarea fácil o se centra en un único objetivo.
Es vital para los diseñadores conocer los dos enfoques principales
de diseño a la hora de diseñar una UI, estos son el diseño de UI
para web y para móvil ¿por qué? El uso de sitios/aplicaciones web
y aplicaciones móviles es cada vez más demandante, incluso la
forma en como los usuarios consumen el contenido digital. Los
usuarios no solo consumen sitios web a través de navegadores en
computadores, sino, cada vez más los usuarios consumen contenido
web a través de dispositivos móviles, lo cual diversifica la forma en
cómo los diseñadores deben adaptar sus diseños de UI para distintos
dispositivos.
Cada enfoque de diseño debe partir por comprender ¿cuál es el

objetivo de que se construya software para uno u otro enfoque? A
lo largo de los años esto ha ido cambiando significativamente, por
un lado, el diseño web está más orientado a transmitir contenido de
carácter informativo, de interacción y automatización, mientras que
el diseño móvil está más enfocado a completar tareas o actividades
del usuario (STRV, 2015). Tomar una decisión sobre qué tipo de
aplicación de software construir y su enfoque nace del contexto,
objetivos y metas que el negocio pretenda alcanzar. Esto es vital para
decidir sobre el enfoque de diseño. Sin embargo, antes de cubrir una
necesidad de desarrollo es importante que conozcamos que implica
diseñar para web y para móvil. A continuación, nos centraremos en
cada uno de estos dos enfoques.
¡Continuemos!
162 MAD-UTPL
4.8.1. Diseño web
Uno de los principales desafíos de este enfoque es definir la

forma en como las UI que diseñamos para utilizarse a través de
software de escritorio en pantallas de tamaño más grandes que un
móvil, se pueden adaptar a una gran diversidad de dispositivos. Y
cómo se puede ofrecer una UX significativa al usuario para que la
flexibilidad que deben tener nuestras UI permita seguir transmitiendo
el contenido de la misma forma sin alterar los objetivos y metas
de negocio de una organización. Esto es quizás un gran desafío y
produce mayor complejidad a la hora de diseñar para la web. Por su
lado el diseño móvil se enfrenta a una única forma, generalmente
nativa para diseñar sus UI, el diseño web debe verse bien y transmitir
una buena UX al usuario que puede consumir el contenido digital,
desde un dispositivo móvil a un computador o incluso a través de un
televisor inteligente.
¿Cómo lidiamos con esta diversidad? Un buen comienzo es seguir

los estándares documentados por el World Wide Web Consortium
(W3C). Cumplir con los estándares web debe ser su herramienta
principal para garantizar que su sitio sea coherente en todos los
navegadores que cumplen con los estándares. También ayuda a que
su contenido sea compatible con versiones posteriores a medida que
evolucionan las tecnologías web y las capacidades del navegador.
Esto ayuda a que los productos que estamos desarrollando se
alineen a estándares internacionales para el diseño y desarrollo de
aplicaciones y sitios web.
Revise los estándares de W3C. Ingrese a los estándares de diseño

web y aplicaciones y conozca los aspectos más importantes que
usted debe conocer a la hora de diseñar para la web. Los estándares
se resumen en la tabla 10.
163 MAD-UTPL
Tabla 10.
Estándares W3C
Estándar Descripción
HTML &CSS Describe las tecnologías fundamentales para la construcción
de aplicaciones y sitios web.
JavaScript Web API estándar para el desarrollo de aplicaciones web del
APIs lado del cliente. Estas tecnologías permiten crear sitios web
interactivos mediante la secuencia de comandos
Gráficos El uso de gráficos mejora la UX, este estándar define el
uso de tecnologías para integrar gráficos a los sitios web,
entre los más utilizados están el uso de gráficos en formato
PNG (Portable Network Graphics) o SVG (Scalable Vector
Graphics).
Audio y video Define la forma en cómo se deben utilizar los recursos de
audio y video, formatos y almacenamiento para garantizar
recursos de calidad para la web.
Accesibilidad Define las pautas de accesibilidad de contenido web para
ayudar a que el contenido sea accesible para personas con
discapacidades.
Internacionalización Describe las pautas necesarias para desarrollar y diseñar el
contenido de forma que se garantice el acceso universal a
cualquier cultura, región o idioma.
Web móvil Esta iniciativa define la forma en cómo a través del diseño se
garantiza que los recursos web estén disponibles para tantos
dispositivos como sea posible.
Privacidad Proporciona mecanismos para garantizar la privacidad de
los contenidos principalmente de uso privado.
Matemáticas en la Define la forma en cómo se deben almacenar y mostrar
web fórmulas matemáticas.
Fuente: https://www.w3.org/standards
Otros aspectos importantes por considerar para el diseño web son

los descritos por Jennifer Niederst Robbins en el libro Learning Web
Design, (2018), estos aspectos incluyen: 1) contenido, 2) forma de
diseño, 3) características de desarrollo y 4) diseño responsivo.
164 MAD-UTPL
4.8.1.1. Contenido
Una de las grandes diferencias es el enfoque de diseño y lo que se

pretende transmitir al usuario. Antes habíamos dicho que los sitios y
aplicaciones web están más orientados a la publicación de contenido
de tipo informativo y la forma en como los usuarios consumen esa
información. Cuando diseñamos para web, debemos tener claro
que los usuarios van a consumir esa información desde diferentes
dispositivos móviles por tanto la calidad y/o cantidad de contenido
que pretendemos transmitir es fundamental. Por eso el diseño de
una UI, debe considerar la estructura, la forma y el tipo de contenido
que esperamos transmitir, además la forma en que el usuario va a
interactuar con la UI. Dos estrategias importantes que se deben tener
en cuenta en este primer aspecto son: la arquitectura de información
y la estrategia de contenido.
Arquitectura de información: comúnmente trabajada por un

arquitecto de información, es quién organiza el contenido de
forma lógica y para facilitar la búsqueda. Son responsables
de la funcionalidad de búsqueda, los diagramas del sitio y
cómo se organizan el contenido y los datos en el servidor. La
arquitectura de la información está inevitablemente entrelazada
con el diseño de UX y UI, así como con la gestión de contenido.
Estrategia de contenido: cuando el contenido no es correcto,

el sitio no puede ser completamente efectivo. Un estratega
de contenido se asegura de que cada fragmento de texto de
un sitio, desde el texto explicativo extenso hasta las etiquetas
de los botones, respalde la identidad de marca y los objetivos
de la organización. La estrategia de contenido también puede
extenderse al modelado de datos y la gestión de contenido en
una escala grande y continua, como la planificación para la
reutilización de contenido y los programas de actualización.
165 MAD-UTPL
Forma de interacción: no es lo mismo un usuario que consume
un contenido web a través de un dispositivo móvil que a
través de un navegador web en un computador. La forma de
interacción permite determinar la forma en como el usuario va
a interactuar con el dispositivo para manipular la UI. Cuando el
usuario navega por nuestro sitio web en un dispositivo móvil,
la forma de interacción está enfocada al uso de gestos en la
pantalla, mientras que si hace uso de un computador lo hace
mediante un cursor de pantalla. Esto nos da la pauta para saber
cómo disponer el contenido en la UI.
4.8.1.2. Forma de diseño
¿Será lo mismo diseñar un sitio web para un dispositivo móvil que

para un dispositivo de escritorio? No, no es lo mismo la forma de
diseño impacta mucho en la UX que queremos transmitir a los
usuarios. ¿Cuál diseñar primero, para móvil o para escritorio? Existe
un concepto importante para responder a esta pregunta, la estrategia
se denomina mobile first design o lo que traducido al español
significa diseño móvil primero ¿qué significa esto? Significa que, a
la hora de diseñar un producto para web, debemos enfocarnos en
diseñar la forma en cómo se va a ver nuestro producto digital en una
interfaz móvil, desde el dispositivo más pequeño al más grande, tal y
como observamos en la figura 54.
Figura 54.
Estrategia de Diseño Móvil Primero (Mobile First)
1 2 3 4
Fuente: Guerrero, N. (2018). El diseño web ahora empieza en móvil (Mobile
First). Programaenlinea.Net.
166 MAD-UTPL
¿Por qué es importante diseñar primero para móvil? Según
Statcounter GlobalStats, hasta diciembre del 2020 el 55,73% del
tráfico de Internet accede a recursos web desde dispositivos móviles,
mientras que el 41,46% lo hace desde una aplicación de escritorio
y apenas un 2,74% lo hace desde una tablet. Por lo tanto, hacer que
nuestro diseño web se vea bien en una UI, es fundamental. Para
diseñar bajo este concepto, es clave que consideremos que diseñar
primero para una pantalla más pequeña nos brinda la oportunidad
de ir agregando elementos de interfaz de acuerdo con el tamaño
de pantalla, algunos aspectos que podemos considerar a la hora de
diseñar son los siguientes:
Priorizar elementos: al momento de pensar en que primero

diseñamos para pantallas pequeñas, es fundamental que
pensemos en priorizar los elementos que vamos a mostrar
a través de la UI. Lo más probable es que nos centremos en
los elementos realmente importantes de la UI y conforme
vayamos teniendo más espacio poder ir agregando elementos.
Observemos la figura 55, la UI de Spotify, los elementos que se
muestran en la UI, se alinean con el objetivo de la herramienta,
en este caso el objetivo es brindarle al usuario la posibilidad
de escuchar música, por tanto, este es el elemento principal, el
reproductor de música y las funcionalidades complementarias
se van agregando de acuerdo con el tamaño de pantalla del
dispositivo, no es lo mismo posicionar los elementos de la UI
para la aplicación de escritorio que para la aplicación móvil.
167 MAD-UTPL
Figura 55.
UI Spotify en diferentes dispositivos
Fuente: Sandberg, L. (2017, December 17). Spotify and feelings: a reflection

on product design. Uxcollective.Cc.
Trabajar con columnas: las aplicaciones de escritorio al tener

la posibilidad de tener una pantalla más amplia permiten que
se dispongan los elementos de forma estructurada y ordenada
para colocar los elementos de la UI. Lo fundamental es ordenar
los elementos en forma de columnas para las aplicaciones a
las que pueden accederse a través de dispositivos de escritorio.
Para ello podemos basar el diseño en columnas, mientras que
la adaptación debe considerar una sola columna centralizada
para ubicar el contenido de la web, como observamos en la
figura 56.
168 MAD-UTPL
Figura 56.
Diseño de UI basado en columnas
Fuente: Ellis, M. (2017). Desktop vs. mobile app design: how to optimize your
user experience. 99designs.Com.
Aprovechar las bondades de los dispositivos móviles: como

se explicó anteriormente no es lo mismo diseñar una web para
móvil y para escritorio, los dispositivos móviles tienen una
serie de bondades principalmente enfocada al uso de gestos
que podemos hacer en la pantalla para ejecutar una acción.
Es vital, que aprovechemos las bondades de cada uno de los
dispositivos para hacer que la UX de nuestra aplicación sea
realmente significativa para nuestros usuarios.
Mentalidad: una de las principales diferencias con respecto al

diseño de una UI para cualquier dispositivo, es la posibilidad
de comprender al usuario para cualquiera de los contextos en
que se involucre el usuario final. Las tareas en las aplicaciones
móviles deben ser rápidas y comprensibles al instante de un
vistazo.
169 MAD-UTPL
4.8.1.3. Diseño web adaptable
De forma predeterminada, la mayoría de los navegadores en

dispositivos pequeños como teléfonos inteligentes y tabletas
reducen una página web para ajustarse a la pantalla y proporcionan
mecanismos para hacer zoom y moverse por la página. Aunque
técnicamente funciona, no es una gran experiencia. El texto es
demasiado pequeño para leer, los enlaces son demasiado pequeños
para tocarlos y todo ese acercamiento y desplazamiento es una
distracción. El diseño web adaptable (RWD, por sus siglas en inglés)
o responsivo, como comúnmente se lo conoce, es una estrategia que
permite proporcionar diseños adecuados a los dispositivos según
el tamaño de la interfaz de visualización. La clave del diseño web
adaptable es entregar un solo documento HTML a través de una
dirección web a todos los dispositivos, pero aplicando diferentes
hojas de estilo que se carguen según el tamaño de la pantalla, para
proporcionar el diseño más optimizado para ese dispositivo. Por
ejemplo, cuando la página se ve en un teléfono inteligente, aparece
en única columna con enlaces grandes para tocar fácilmente. Pero
cuando esa misma página se ve en un navegador de escritorio
grande, el contenido se reorganiza en varias columnas con elementos
de navegación tradicionales.
¿Cómo logramos esto? En realidad, es solo CSS, esta estrategia se

ha convertido en una de las principales estrategias que utilizamos
para entregar un diseño único y adaptable de la UI de nuestras
aplicaciones. Observemos el ejemplo de la figura En el ejemplo
podemos apreciar como el sitio web de Github tiene la capacidad
de adaptarse a las diferentes pantallas, si observamos de izquierda
a derecha observamos cómo se vería en móvil, tablet y en un
navegador de escritorio.
170 MAD-UTPL
Figura 57.
Diseño responsivo de la UI de Github.
Fuente: Kirkwood, J. (2018, February 26). 11 Powerful Examples of

Responsive Web Design. Invisionapp.Com.
Para reforzar su conocimiento sobre diseño web responsivo, ingrese

al sitio HTML Responsive, para conocer a nivel técnico cómo se
realiza esta implementación y qué aspectos se deben considerar para
diseñar una UI que sea capaz de adaptarse de forma automática.
4.8.1.4. Elementos de diseño
En la web, la primera cuestión empresarial es diseñar cómo funciona

el sitio. Antes de elegir colores y fuentes, es importante identificar
los objetivos del sitio, cómo se utilizará y cómo se mueven los
visitantes por él. Estas tareas pertenecen a las disciplinas de diseño
de experiencia de usuario (UX), diseño de interacción (IxD) y diseño
de interfaz de usuario (UI). El diseñador de la experiencia del usuario
adopta una visión holística del proceso de diseño, lo que garantiza
que toda la experiencia con el sitio sea favorable. El diseño de UX se
basa en una sólida comprensión de los usuarios y sus necesidades a
partir de observaciones y entrevistas.
171 MAD-UTPL
Algunas técnicas que podemos utilizar para trabajar sobre los
diseños web considerando conceptos de UX y UI son:
Informes de pruebas e investigación de usuarios: Comprender

las necesidades, deseos y limitaciones de los usuarios es
fundamental para el éxito del diseño del sitio o aplicación web.
El enfoque de diseño en torno a las necesidades del usuario
se ha basado en el proceso de Diseño Centrado en el Usuario
(UCD) es fundamental para el diseño web. Los diseños de
sitios a menudo comienzan con la investigación del usuario,
incluidas entrevistas y observaciones, para comprender mejor
cómo el sitio puede resolver problemas o cómo se utilizará. Es
típico que los diseñadores realicen una ronda de pruebas de
usuario en cada fase del proceso de diseño para garantizar la
usabilidad de sus diseños.
Uso de wireframes: su propósito es indicar cómo se divide el

espacio de la pantalla y dónde se colocan la funcionalidad y el
contenido, como navegación, cuadros de búsqueda, elementos
de formulario, etc. Los colores, fuentes y otros elementos de
identidad visual se omiten para no distraer la atención de la
estructura de la página.
Diagrama del sitio: un diagrama de sitio indica la estructura

del sitio como un todo y cómo las páginas individuales se
relacionan entre sí.
Guiones gráficos y diagramas de flujo de usuarios: un guion

gráfico traza el camino a través de un sitio o aplicación desde
el punto de vista de un usuario típico (una persona en la
jerga de UX). Por lo general, incluye un guion y “escenas” que
consisten en vistas de pantalla o el usuario interactuando con
la pantalla. El guion gráfico tiene como objetivo demostrar los
pasos necesarios para realizar las tareas, describe las posibles
opciones y también presenta algunos tipos de páginas estándar
172 MAD-UTPL
Diseño visual: debido a que la web es un medio visual, las
páginas web requieren atención a su presentación visual. Las
primeras impresiones lo son todo. Hay muchos métodos y
productos que se pueden utilizar para presentar un diseño
visual a los clientes y partes interesadas. Los más tradicionales
son los bocetos o maquetas del aspecto que podría tener el
sitio.
Para obtener una lista de ejemplos, artículos, libros y podcasts sobre

las guías de estilo web, visite la página Recursos de la guía de estilo
del sitio web.
4.8.2. Diseño móvil
Los dispositivos móviles vienen en todas las formas y tamaños. Es

bastante complicado crear la mejor experiencia posible para una
gran cantidad de tamaños de pantalla diferentes, tal y como observa
en la figura Por ejemplo, su teléfono puede tener solo 140 píxeles de
ancho, mientras que un teléfono inteligente de gama alta puede ser
de tres a cuatro veces más ancho. ¿Paisaje o retrato? ¿Ancho fijo o
fluido? ¿Utiliza una columna o dos? Estas son preguntas comunes
que surgen al pensar en su diseño en múltiples tamaños de pantalla.
La mala noticia es que no hay una respuesta sencilla.
173 MAD-UTPL
Figura 58.
Tamaños de pantalla multidispositivo para equipos móviles
Fuente: Kofman, M. (2017). How to Create a One-Size-Fits-All App for iOS:

iOS 8’s Adaptive UI. Applicoinc.Com.
Diseñar una UI para un enfoque móvil depende en gran medida de

cómo se va a organizar el contenido, y justamente esto depende
del alcance de cada dispositivo y la experiencia que se pretende
transmitir. Lo único seguro es que los dispositivos móviles
comparten la misma orientación, sea esta vertical u horizontal.
El móvil no es solo un medio nuevo, sino también un modelo de

negocio completamente nuevo. Como diseñadores de interacción,
es fundamental comprender a nuestros usuarios y la forma en que
trabajan con los dispositivos. (Fling, 2009), destaca que un buen
diseño requiere tres habilidades: la primera es un don natural para
poder ver visualmente cómo debe verse algo que produce una
emoción deseada en el público objetivo. El segundo es la capacidad
de manifestar esa visión en algo para que otros puedan ver, usar o
participar. El tercero es saber cómo utilizar el medio para lograr sus
objetivos de diseño.
174 MAD-UTPL
Aunque no existe una única forma de abordar el desafío de diseño,
es importante conocer algunos elementos fundamentales del diseño
móvil comenzando con el contexto y superponiendo elementos
visuales o diseñando contenido para lograr el objetivo de diseño.
Luego, debe comprender cómo utilizar las herramientas específicas
para crear un diseño móvil y, finalmente, debe comprender
las consideraciones de diseño específicas del medio móvil. A
continuación, revisaremos cada uno de los elementos de diseño
móvil:
4.8.2.1. Contexto
Como lo hemos visto anteriormente el punto de partida para saber

qué diseñar, las expectativas y necesidades de los interesados, y/o
el objetivo o meta de construir una aplicación móvil, es conocer el
contexto del proyecto. Como diseñador de UI, es importante que
usted a través del proceso de investigación, conozca el contexto y la
forma en cómo los usuarios van a usar la aplicación. Como resultado
de este elemento usted debe tener la capacidad de responder a las
siguientes preguntas:
¿Quiénes son los usuarios? ¿Qué sabes de ellos? ¿Qué tipo de

comportamiento tienen?
¿Asume o predice sobre los usuarios?
¿Qué está pasando? ¿Cuáles son las circunstancias en las

que los usuarios absorberán mejor el contenido que pretendes
presentar?
¿Cuándo interactuarán? ¿Están en casa y tienen mucho tiempo?

¿Son ellos en el trabajo donde tienen cortos periodos de
tiempo? ¿Tendrán períodos de inactividad de tiempo mientras
espera un tren, por ejemplo?
175 MAD-UTPL
¿Dónde están los usuarios? ¿Están en un espacio público o en
un espacio privado? ¿Están adentro o afuera? ¿Es de día o de
noche?
¿Por qué usarán su aplicación? ¿Qué valor obtendrán de su

contenido o servicios en su situación actual?
¿Cómo están usando su dispositivo móvil? ¿Se lleva en la mano

o en el bolsillo?
¿Cómo lo están sosteniendo? ¿Abierto o cerrado? ¿Retrato o

paisaje?
Las respuestas a estas preguntas afectarán en gran medida el curso

de su diseño. Usted puede usar estas preguntas como una lista de
verificación para su diseño de principio a fin. Pueden proporcionar no
solo una gran inspiración para los desafíos de diseño, sino también
una justificación para sus decisiones de diseño posteriores.
4.8.2.2. Mensaje
Otro elemento de diseño es su mensaje, o lo que está tratando de

comunicar sobre su sitio o aplicación visualmente. Su mensaje, es
la impresión mental general que se crea explícitamente a través
del diseño visual. La impresión del usuario debe tratarse como la
creación de una marca de diseño. La marca sirve para reforzar el
mensaje con autoridad, no para transmitirlo. En los dispositivos
móviles, las oportunidades para desarrollar la marca son limitada,
pero la necesidad de mensajería es grande. Con un espacio tan
limitado, los usuarios no se preocupan por su marca, pero sí por los
mensajes y se hacen preguntas como, ¿qué puede hacer esto por
mí?, o ¿por qué es esto importante para mí?
176 MAD-UTPL
Su enfoque del diseño definirá ese mensaje y creará expectativas. Un
escaso diseño minimalista con mucho espacio en blanco le dirá al
usuario que espere un enfoque en el contenido. Un diseño “pesado”
con uso de colores oscuros y muchos gráficos le indicará al usuario
que espere algo más envolvente. Por ejemplo, analicemos la UI
de la aplicación BBC News, en la figura Podemos observar que su
diseño transmite un mensaje centrado en una función de búsqueda
y navegación de noticias. Sin que el usuario conozca, por intuición lo
que hará es entrar a una noticia y poder observar su contenido.
Figura 59.
Mensaje de diseño de UI BBC News
Fuente: nikel. (2018, September 30). UX case study — BBC NEWS app
android. Medium.Muz.Li.
177 MAD-UTPL
4.8.2.3. Mirar y sentir
Aunque este concepto sea muy difícil de medir por lo general cuando
diseñamos UI, es importante que los usuarios puedan observar y
luego sentir; es decir algo con lo que los usuarios puedan interactuar.
La apariencia se usa para provocar la acción, cómo el usuario
usará una interfaz. La mensajería es holística, ya que la expectativa
generará en el usuario un mensaje intuitivo de como abordará
su contexto. Es fácil confundir los dos, porque “sentir” se puede
interpretar como nuestra reacción emocional al diseño y el papel
de la mensajería. Poder determinar cómo el usuario mira y siente la
interfaz, nos permitirá fundamentar las decisiones de diseño.
El establecimiento del diseño generalmente proviene de la

inspiración, aspecto que es difícil de predecir. Para ello podemos
apoyar esta actividad en patrones de diseño para resolver problemas
de diseño. Algunos de los patrones de diseño más importantes son:
navegación, formularios, tablas, búsquedas y filtros, herramientas,
gráficos, tutoriales e invitaciones, patrones sociales, comentarios y
aceptación y ayuda.
Ingrese al sitio web de Stephanie Walter, artículo: 15+ Expert

Resources For Mobile UI Inspiration: Patterns, Components and Flows
y encuentre las principales plataformas web dónde usted podrá
encontrar patrones de diseño que podría utilizar para sus diseños
móviles.
4.8.2.4. Layout
El layout es la estructura que soporta los componentes visuales

de una interfaz. Funciona especificando la forma en cómo se va a
agrupar, clasificar y dar sentido a la información. También ayuda a
que el contenido resalte cuáles son los datos más importantes de
la aplicación. La función de layout, por lo tanto, es invisible para el
usuario, pero relevante para la navegación. En un proceso de diseño
la primera vez que se define un layout es durante la fase de definición
de la arquitectura de información.
178 MAD-UTPL
La segunda parte del diseño de layouts es cómo representar
visualmente el contenido. En el diseño de dispositivos móviles,
el elemento de contenido principal es la navegación. Ya sea que
esté diseñando un sitio o una aplicación, debe proporcionar a los
usuarios métodos para realizar tareas, navegar a otras páginas o
leer e interactuar con el contenido. Esto puede variar, dependiendo
de los dispositivos que admita. Otra consideración de diseño es
cómo se escalará su diseño a medida que cambie la orientación del
dispositivo, por ejemplo, si el dispositivo se gira de modo vertical a
horizontal y viceversa. Esto generalmente se describe como fijo (un
número establecido de píxeles de ancho) o fluido (con la capacidad
de escalar al ancho completo de la pantalla independientemente del
dispositivo orientación).
El cambio de orientación se ha convertido en algo común en los

dispositivos móviles, y su diseño siempre debe proporcionar al
usuario un medio para escalar la interfaz y aprovechar al máximo el
espacio de la pantalla, como se observa en la figura 60.
179 MAD-UTPL
Figura 60.
Diseño de una UI basado en un layout.
Fuente: Dribbble. (2016). Pinterest. Pinterest.Com.
4.8.2.5. Color
El obstáculo más común que se encuentra cuando se trata de color

son las pantallas móviles, vienen en varios colores o profundidades
de bits diferentes, es decir, la cantidad de bits (dígitos binarios)
utilizados para representar el color de un solo píxel en una imagen de
mapa de bits. Cuando se muestran diseños complejos en diferentes
dispositivos móviles, la profundidad de color limitada en un
dispositivo puede causar defectos en la calidad visual del producto.
Las personas responden a los diferentes colores de manera diferente.

Es bastante conocido que los diferentes colores producen diferentes
emociones en las personas. Pensar en las emociones que los colores
evocan en las personas es un aspecto importante del diseño móvil,
que es un medio tan personal que tiende a utilizarse de manera
180 MAD-UTPL
personal. Usar los colores correctos puede resultar útil para transmitir
el mensaje correcto y establecer expectativas. Una de las estrategias
para trabajar con colores es usar las paletas de colores, estas suelen
constar de un número predefinido de colores para utilizar en todo el
diseño. La selección de los colores a utilizar varía de un diseñador a
otro, cada uno con diferentes técnicas y estrategias para decidir los
colores.
Ingrese al siguiente artículo: 20 Best Color Pallets Tool escrito por

Masterpicks escrito en uxplanet.org y descubra las principales
herramientas para trabajar en línea con paletas de colores.
4.8.2.6. Gestos y acciones
Como se mencionó anteriormente, una de las diferencias

fundamentales de uso de aplicaciones web y móviles, es la forma
en como los usuarios interactúan con ellas. En web el método de
interacción es el uso del cursor, mientras que en móvil la forma
más común de interacción es el uso de gestos que desencadenan
acciones. Cuando diseñamos una UI, para móvil es importante que
consideremos la mecánica de uso de nuestra aplicación, lo ideal es
que los usuarios puedan manipular e interactuar de una forma fácil y
sencilla los diferentes elementos que vamos a colocar en la UI de la
aplicación.
La selección de gestos para nuestros diseños tiene que verse y

sentirse naturales e intuitivos, de forma que estos estén directamente
asociados con la forma en cómo las personas interactúan con los
objetos reales. Un claro ejemplo de esto es el uso de la aplicación
móvil de Google Maps, cuando necesitamos hacer zoom para
localizar una ubicación o una zona de interés, podemos utilizar el
gesto de uso de dos dedos para acercar o ampliar la ubicación y
esto desencadena la acción de zoom dentro de la aplicación móvil,
o cuando queremos dar un “me gusta” en Instagram, utilizamos el
gesto de doble tap o doble toque, cómo comúnmente se lo conoce.
181 MAD-UTPL
Algunos de los gestos más comunes son los que se describen en la
figura 61.
Figura 61.
Gestos de toque para interfaces móviles.
Fuente: Adaptado de Villamor, C., Willi, D., & Wroblewski, L. (2010). Touch
Gesture Reference Guide. Touch Gesture Reference Guide.
Revise la Guía de Referencia de Gestos Táctiles, lea sobre los

recursos táctiles y el soporte de cada una de las plataformas móviles
para seleccionar el gesto táctil que se adecúe al diseño que usted
está desarrollando. Otra Guía de referencia sobre gestos es la
propuesta por Material Design.
182 MAD-UTPL
El enfoque de diseño de UI para móvil y para web, es distinto, cada

uno de estos enfoques debe partir de un propósito que está alineado
a un contexto o una idea de negocio que se pretende plasmar
en un producto digital. Una diferencia bastante clara entre estos
dos enfoques es el desarrollo de uno u otro enfoque en términos
de accesibilidad e inclusividad. El diseño para web es el que más
adelantado está y los estándares de W3C nos brindan las pautas
necesarias para cubrir estos escenarios. No tanto así para el
enfoque de diseño móvil, revise el artículo Making Your Mobile Apps
Accesible to Persons with Disabilities, del sitio web G3ict (The Global
Initiative for Inclusive ICTs), identifique algunos aspectos básicos que
debe considerar al momento de diseñar UI, que sean accesibles e
inclusivas para móviles.
Refuerce lo aprendido hasta el momento, navegue por los contenidos

de accesibilidad para los sistemas operativos (Mobile Resouces) más
importantes en el mercado actual Android, iOS, Windows Phone, etc.
Conozca la documentación oficial e indague cómo apoyarse en los
módulos de accesibilidad propios de cada sistema operativo para
cubrir esta necesidad y garantizar el acceso y uso universal de sus
proyectos.
183 MAD-UTPL
Semana 13
Diseñar para web y para móvil representa muchas diferencias, y estas

radican principalmente en el objetivo de diseño de nuestras UI. El
diseño para web tiene que adaptarse para visualizarse en diferentes
tamaños de pantallas, el diseño para aplicaciones nativas móviles
tiene otras características y formas de uso. Estos aspectos nos han
dado una visión y una forma de comprender ¿cómo funcionan las UI
para uno u otro enfoque? ¿Cómo evaluamos nuestras UI? ¿Cuáles
son las tendencias de diseño actual? ¿Qué herramientas puedo
utilizar para elaborar mis diseños? Serán algunas de las preguntas
que se contestarán en esta semana de estudios. Cada vez más
nos acercamos a definir cómo llegar a un modelo o prototipo de
usuario. Al finalizar esta semana de estudios tendremos todos los
fundamentos necesarios para abordar el componente práctico. Lo
motivo para participar activamente del contenido de esta semana
y abordar los recursos externos para reforzar cada uno de los
contenidos.
¡Avancemos!
4.9. Métodos de evaluación de usabilidad para UI
La evaluación de usabilidad se centra en qué tan bien los usuarios

pueden aprender y usar un producto para lograr sus objetivos.
También se refiere a qué tan satisfechos están los usuarios con ese
proceso (usability.gov, 2020). Para conocer cómo la usabilidad afecta
a la UI, los profesionales utilizan algunos métodos y herramientas
para evaluar el nivel de usabilidad de una aplicación de software. De
acuerdo con la norma ISO 9421-11:2018, la usabilidad se refiere a la
184 MAD-UTPL
efectividad del proceso de interacción, la eficiencia de la interacción
y la satisfacción del usuario cuando los usuarios usan el producto en
un entorno específico para realizar tareas específicas. Si analizamos
esta definición, nos podemos dar cuenta que la usabilidad y la UX
tienen una estrecha relación, donde cada una de sus estrategias y
definiciones se transmiten al usuario a través de la UI.
Según usability.gov, la usabilidad es una combinación de factores que

incluyen:
Diseño intuitivo: comprensión de una persona para utilizar de

forma intuitiva los elementos de la UI.
Facilidad de aprendizaje: cuán rápido el usuario aprende a

utilizar un producto de software.
Eficiencia: que tan rápido un usuario puede realizar sus tareas.
Memorización: después de visitar un sitio, cuánta probabilidad

existe de que un usuario pueda recordarlo de forma efectiva
para futuras visitas.
Frecuencia y gravedad de errores: con qué frecuencia los

usuarios cometen errores, qué tan graves son estos y cómo se
recuperan los usuarios de los errores.
Satisfacción subjetiva: qué tan probable es que al usuario le

guste el producto de software.
Uno de los aspectos importantes para alcanzar el éxito es soportar

las actividades de modelado en el modelo de Diseño Centrado en
el Usuario (UCD) que estudiamos anteriormente. Esto permite que,
a través de procesos iterativos e involucramiento activo del usuario
en cada una de las actividades de modelado, se puedan establecer
formas y métodos para determinar el nivel de usabilidad que estamos
entregando a través de la UI.
185 MAD-UTPL
Para determinar la usabilidad de nuestros productos, podemos usar
algunos métodos entre los que se incluyen:
Pruebas de usabilidad: se refiere a la capacidad de evaluar un

producto frente a usuarios representativos. El objetivo de este
tipo de pruebas es observar y recopilar datos cuantitativos y
cualitativos para determinar la satisfacción del usuario frente al
producto.
Uso de técnicas de trabajo grupal o recopilación de

información: como Focus Group, encuestas y/o entrevistas para
definir los objetivos del usuario.
Evaluación de wireframes: permite evaluar la navegación,

se pueden considerar algunos elementos como estructura,
componentes de UI, arquitectura de información como base
para este proceso de evaluación.
Prueba del primer clic: permite conocer cómo los usuarios

navegan de forma correcta por la aplicación.
Encuestas de satisfacción: permite conocer el grado de

satisfacción de los usuarios al usar el producto o servicio.
Evaluación cognitiva: se aprovecha de aspectos fisiológicos

como tecnología de seguimiento ocular o la obtención de datos
neuropsicológicos a través de pruebas basadas en tecnología
EGG (Electroencefalograma).
Uno de los aspectos fundamentales de la evaluación de la usabilidad,

es recopilar métricas cuantitativas y cualitativas que permita obtener
resultados que sean fácil de medir, para poder tomar acciones y
decisiones de diseño, respecto al modelado del usuario.
186 MAD-UTPL
Indague y profundice sobre las pruebas de usabilidad navegando a
través del siguiente recurso: Métodos de evaluación de usabilidad,
de usability.gov. Determine cuales son los elementos, métodos o
técnicas más importantes o las que usted seleccionaría para medir la
usabilidad de sus aplicaciones.
4.10. Tendencias de diseño de UI
Aunque como hemos visto, no existe un estándar o una única

forma de abordar los diferentes desafíos de diseño de una UI, es
importante que como diseñadores nos mantengamos alineados a los
diferentes entornos, conceptos y tendencias de desarrollo. Diseñar
y mantener nuestros productos en constante evolución alineados a
las tendencias de diseño, es fundamental para entregar una máxima
UX a través de la UI a nuestros usuarios finales. Aunque no contemos
con un estándar, es vital para los diseñadores de UI mantenerse
siempre atentos a los blogs más importantes de diseño para poder
recrear interfaces que cumplan con las expectativas de sus clientes.
A continuación, podemos observar una recopilación de tendencias
de diseño para el año 2020 – 2021, basado en los artículos de Diana
Malewicz, (2020), en UX Collective y Kate Shokurova (2020), en UX
Planet.
Tendencias de diseño de UI para el año 2020 – 2021
De acuerdo con las autoras antes mencionadas, Diana Malewicz,

(2020), y Kate Shokurova, una tendencia diferente a las que hemos
visto hasta el momento y coinciden estas dos autoras, es la
simplificación de los procesos UX / UI, ¿qué significa esto? Existe
una necesidad latente de cambio constante, en la que los usuarios
preferimos utilizar productos digitales que sean sencillos de usar
que faciliten el trabajo y la velocidad con la que los usuarios puedan
interactuar con sus sistemas. Diseñar una UI, que no se vea cargada
de elementos y sea fácil de usar, será realmente significativo para
187 MAD-UTPL
nuestros usuarios finales. En este caso, la tarea del diseñador se
enfoca en la minimización de elementos, campos y pasos que debe
realizar un usuario para lograr el resultado deseado. Un claro ejemplo
de esto son los procesos de inicio de sesión simplificados, a través
de este proceso, podemos crear perfiles únicamente dando un clic de
registro o inicio de sesión usando nuestras cuentas de redes sociales
y correos electrónicos.
4.11. Herramientas de diseño
Un aspecto importante del proceso de diseño es poder apoyar

nuestro trabajo, sea para el proceso de UX o de UI, en el uso de
herramientas especializadas que nos permitan generar cada uno de
los artefactos que necesitamos generar hasta llegar a construir un
modelo o prototipo de usuario funcional. A continuación, en la tabla
11, se hace referencia a las principales herramientas de software.
Tabla 11.
Herramientas para UX y UI
Nombre Descripción Enlace

JustindMind Aplicación de escritorio que le permitirá trabajar justinmind.com
Prototype flujos de sitio, prototipos funcionales, diseño de
UI y gestión de requisitos de interfaz.
Sketch Sketch, permite crear prototipos de diseño Sketch.com

de UI, además tiene la posibilidad de trabajar
colaborativamente.
InVision InVision ofrece a los diseñadores todas las Invisionapp.com
Studio herramientas de diseño de IU que necesitan para
crear prototipos funcionales y completamente
realizados con elementos dinámicos y
animaciones.
188 MAD-UTPL
Nombre Descripción Enlace
Proto.io Proto.io es una herramienta que permite crear, Proto.io
organizar, integrar y probar prototipos de diseño.
Basado en estrategias de colaboración entre los
miembros del equipo de diseño.
Adobe XD Adobe XD, es una herramienta que permite Adobe.com
diseñar y crear prototipos y maquetas de UI.
Marvel Marvel, tiene la capacidad de crear wireframes Marvelapp.com
de baja fidelidad y alta fidelidad, prototipos
interactivos y realizar pruebas de usuario, le
brinda al diseñador de UI todo lo que necesita,
todo en una interfaz intuitiva.
Figma Figma permite construir prototipos y maquetas Figma.com
dinámicos, probar su usabilidad y sincronizar
todo el progreso. Además, permite que varias
personas trabajen al mismo tiempo.
WebFlow Webflow le permite diseñar sin conocer HTML o Webflow.com
CSS. Posee la funcionalidad de arrastrar y soltar
para diseñar una UI intuitiva, crear un prototipo y
al mismo tiempo generar código HTML y CSS.
FlowMapp FlowMapp se enfoca en el diseño de UX, Flowmapp.com
la construcción de flujos de usuarios y la
construcción de mapas de sitios visuales son
indispensables para la UX.
Fuente: Adaptado de Cardello, J. (2019). 17 useful tools for UI/UX designers.

Webflow.Com.
Es importante mencionar que todas las herramientas resumidas en

la tabla 11, cuentan con opciones de licenciamiento gratuito y se
pueden usar respetando las condiciones para este tipo de licencia. Si
desea conocer otras herramientas que se adapten a sus necesidades
de diseño considerando UX y UI, ingrese al siguiente blog: Best UX
Tools: 11 Tools To Make Your Life Easy in 2020, escrito por Jonas
Kurzweg, (2020).
189 MAD-UTPL
Revise los siguientes recursos:
Mobile Usability Research the Important Differences from the

Desktop: conozca cuales son las diferencias entre evaluar la
usabilidad para enfoques de diseño móvil y de escritorio.
User Interface Design Guidelines 10 Rules of Thumb: conozca

las 10 reglas generales para el diseño de interfaces. Reflexione
¿cómo se relacionan estas con las tendencias de diseño
estudiadas?
Semana 14
Ahora que contamos con los fundamentos necesarios para abordar

un proceso de modelado enfocado en el usuario a través de aspectos
como usabilidad, UX y UI, y somos capaces de reconocer cómo
nuestros diseños deben orientarse no solo a usuarios normales que
no sufren alguna discapacidad; sino que somos capaces de enfocar
el modelado también para personas con discapacidades. En esta
semana nos centraremos en el componente práctico, cómo usar el
proceso de modelado basado en UX y UI para llegar a un prototipo
funcional que sirva como elemento para validar frente a la parte
interesada, cómo funcionará nuestro producto digital antes de ir a
una etapa posterior del SDLC.
¡Vamos a la práctica!
190 MAD-UTPL
4.12. Desarrollando un prototipo de usuario con UI & UX
En este momento, seguramente se preguntará ¿cuáles son los pasos

básicos que debo seguir para elaborar un modelo o prototipo? Al
existir tantas técnicas, herramientas y consideraciones en este
apartado se pretende que usted conozca los pasos mínimos que
debe seguir hasta conseguir modelar una interfaz que pueda ser
validada por sus usuarios. Como se mencionó anteriormente,
este proceso se inicia estudiando las necesidades del usuario y
comprendiendo qué elementos son los que necesita transmitir a
través de una UI. En este sentido, a continuación, se irá describiendo
los pasos básicos necesarios y las herramientas para diseñar un
modelo que sea capaz de validar el usuario.
Cabe recalcar que para facilitar el proceso de modelado en esta

semana se detallan los pasos mínimos que usted podría seguir para
elaborar un prototipo. El uso de técnicas y prácticas podría diferir
partiendo del contexto y naturaleza del proyecto que usted aborde.
Para abordar este desafío a continuación en la tabla 12 se propone
un caso de estudio:
191 MAD-UTPL
Tabla 12.
Propuesta para caso práctico
Desarrollo de una aplicación móvil para fomentar la visita a

Tema del proyecto:
los parques urbanos de la ciudad de Loja
Propósito del El Municipio de Loja, con el afán de fomentar el turismo
proyecto interno de la ciudad propone desarrollar una aplicación móvil
para dar a conocer los parques urbanos de la ciudad de
Loja, que tenga las siguientes características y que deberá
implementarse considerando dos lanzamientos:
Lanzamiento 1: informativo
Dar a conocer a la ciudadanía a través de la aplicación

móvil los parques urbanos.
Exponer los principales atractivos de interés de cada uno

de los parques urbanos.
Permitir que la ciudadanía a través de la aplicación sea

partícipe de las novedades de cada uno de los parques,
así como también de proponer acciones de mejora y
calificación de cada uno de los parques urbanos de la
ciudad.
Lanzamiento 2: guía
Brindar la posibilidad a los visitantes extranjeros de poder

tener información de cada uno de los parques urbanos,
así como también, permitir que a través de la aplicación
se guíe a los visitantes la forma de cómo llegar a los
parques.
Patrocinador Municipio de Loja
Alcance Para el caso práctico, se considerará la implementación de
las características consideradas para el primer lanzamiento.
Ahora que conocemos el contexto del proyecto, es importante que

recordemos el proceso de alto nivel para UX y UI que se describió
en el punto 4.¿Cómo se complementan UX y UI? Si recordamos el
192 MAD-UTPL
proceso anteriormente mencionado damos inicio a la investigación
de UX y luego realizamos las acciones de diseño de la UI, en este
sentido, a partir de este momento iremos trabajando, considerando
los pasos mínimos que deberíamos realizar para modelar un
prototipo de usuario. A continuación, se detallarán las acciones de
cada uno de los procesos generales UX y UI.
4.12.1. Proceso de UX
Paso 1: el contexto del problema
Cómo se ha venido estudiando hasta el momento, el primer paso

para modelar para el usuario es entender el contexto del problema.
En este escenario particular, uno de los objetivos del que sería
nuestro patrocinador, el Municipio de Loja, es promover el turismo
local de sus ciudadanos a través de una solución móvil que permita a
los ciudadanos y visitantes conocer cada uno de los parques urbanos
de la ciudad de Loja, en este sentido, esta propuesta nace por el
desconocimiento de la población de todos los parques urbanos de la
ciudad, sus lugares de interés, ubicaciones, etc.
Los actores fundamentales de este proceso son los ciudadanos y los

visitantes de la ciudad, por lo tanto, el siguiente paso debería estar
enfocado en tratar de obtener una muestra de estos dos tipos de
usuarios que sirvan como base para el proceso de investigación. Por
lo tanto, en este caso usted como diseñador, está en la potestad de
seleccionar las técnicas o actividades más adecuadas para tratar de
conocer a los usuarios potenciales de su propuesta de solución. Al
igual que un proceso de investigación, lo más factible en este sentido
sería aplicar una encuesta a la población a través de la cuál usted
conozca la apreciación respecto del proyecto que tiene la ciudadanía.
También, debe centrarse en entrevistas con la parte interesada para
conocer qué es lo que cómo Municipio de Loja pretende transmitir a
sus usuarios a través de la solución.
193 MAD-UTPL
Las encuestas masivas le permitirán a usted conocer ¿qué piensa
la población? ¿Qué siente? ¿Qué necesita? ¿Cómo garantizar
accesibilidad e inclusividad a la propuesta? Y cuáles serían sus
perfiles de usuario potencial. En este caso como se mencionó
anteriormente, sus usuarios potenciales son los ciudadanos locales y
los visitantes nacionales y/o extranjeros.
Paso 2: investigación al usuario
El análisis del contexto del problema nos ayuda principalmente a

identificar las necesidades de alto nivel y los perfiles de usuario
de nuestra aplicación. Ciudadanos locales, y visitantes nacionales
y extranjeros, serán los perfiles identificados para nuestro caso
práctico, partiendo de esto necesitamos consolidar estos perfiles,
conocer sus necesidades y expectativas acerca de la solución.
¿Considerando el alcance qué perfil investigaremos? Investigaremos
el perfil de ciudadano local, el perfil de visitante debería utilizarse
para el lanzamiento 2 del proyecto.
Un aspecto importante al momento de investigar al usuario es

identificar casos extremos ¿qué quiere decir esto? Se pueden crear
patrones de comportamiento a través del análisis de datos masivos,
esto permite que podamos identificar casos extremos que abarquen
todos los escenarios resultantes del proceso de investigación. Para
este caso en particular, a continuación, en la figura 62 se detallará el
perfil de usuario que investigaremos para nuestro caso de estudio.
Para este caso usted se puede apoyar en la herramienta gratuita

FlowMapp.
194 MAD-UTPL
Figura 62.
Caso práctico: perfil del usuario.
Si analizamos el perfil del usuario promedio que utilizará nuestra

aplicación nos daremos cuenta que a través de la investigación,
podemos contar con algunos elementos importantes que podremos
usar para enfocar el diseño y desarrollo en este tipo de usuarios,
cómo por ejemplo la preocupación de “David” por no encontrar una
aplicación similar a PARQUEMETER, que utilizó en uno de sus viajes.
El siguiente paso es conocer sus emociones y frustraciones, el
objetivo de esto es comprender qué le gusta y qué le disgusta, para
este caso puede seguir el ejemplo de la figura 63.
195 MAD-UTPL
Figura 63.
Caso práctico: emociones del usuario.
“El día está soleado, es “Me han hablado del “Necesito expresar mi
un buen tiempo para Parque El Colinar apreciación sobre el
Piensa hacer turismo local y Carigán, me gustaría parque para mejorar la
conocer otro parque de visitralo con mi experiencia de los
la ciudad”. familia”. visitantes al lugar”.
Busca información en Busca información en Pregunta a sus

guías turísticas, sin la web y logra obtener familiares como
embargo, no están la ubicación para llegar hacerlo, sin embargo
Hace actualizadas y a parte al parque, sin embargo nadie sabe como
de los parques que ya no hay algún dato lograrlo.
conoce, no identifica un adicional que le ayude
nuevo. a decidir.
Siente Frustración Satisfacción Preocupación
Conocer los aspectos motivacionales y psicológicos que nos

permite entender cómo la solución podría encajar en la rutina de
las personas, por tanto, a partir de aquí podemos justificar algunas
decisiones de diseño y viabilidad del proyecto. Lo siguiente, respecto
a la investigación del usuario será conocer qué acciones realizará en
la aplicación, los dos grandes resultados que esperan las personas
de la aplicación, según el caso propuesto son:
Conocer los parques urbanos de la ciudad de Loja.

Valorar y aportar a la mejora continua de los parques de la
ciudad.
En este punto usted deberá preguntarse: ¿qué pasos debería seguir

el usuario para usar las características principales de la aplicación?
Lo ideal, sería que usted determine paso a paso que hará el usuario.
Es decir, trace la secuencia o los pasos que debe hacer el usuario en
la aplicación, tal como se muestra en la figura Use la técnica que se
menciona en la sección 3.4.Sketch.
196 MAD-UTPL
Figura 64.
Caso práctico: pasos del usuario en la aplicación.
Status bar
Navigation bar
Tab bar
40 px
10 px
Un aspecto fundamental en este momento es pensar en pasos

generales que el usuario realizará hasta completar la acción, no se
requiere mayor detalle, lo ideal es que no se listen más de 5 pasos
hasta que el usuario complete la acción. Una estrategia fundamental
para validar con los usuarios es apoyarnos en la técnica de flujo
de usuario, donde a través de un diagrama de flujo representemos
los pasos que realizará el usuario para utilizar la aplicación. A
continuación, puede observar el flujo de usuario resultante para el
caso que estamos abordando.
Paso 3: Flujo del usuario
Para desarrollar el primer artefacto del proceso de investigación,

usted se puede apoyar en herramientas como flowmapp, justinmind,
entre otras, para profundizar sobre herramientas que soportan
197 MAD-UTPL
esta actividad ingrese al siguiente recurso: 10 must-know tools for
creating user flows great UX. Para este caso en particular usaremos
la herramienta FlowMapp, en la figura 65, puede observar el flujo de
usuario resultante.
Figura 65.
Caso práctico: mapa de flujo del usuario.
Entrar
Bienvenida Ver parques
¿Más
información? Detalle del parque
¿Valorar el
Valorar el parque
parque?
Cerrar
Paso 4: Elaboración de sketch o bocetos
Conjuntamente con un grupo de usuarios, usted deberá definir los

bocetos de su aplicación a través de prototipos de baja fidelidad,
comúnmente se diseñan los primeros bocetos de cómo se verá
la aplicación haciendo trazos con papel y lápiz. Para esto nos
apoyamos en lo que ya conocemos, en este caso en particular una de
las estrategias es tomar cada una de las acciones que establecimos
en el paso 2 y definir una pantalla para cada acción. Observe los
primeros bocetos, estos primeros diseños, desde el punto de vista
del usuario nos permiten determinar la cantidad de pantallas que
tendremos.
198 MAD-UTPL
La figura 66, es el sketch o boceto del caso de estudio.
Figura 66.
Caso práctico: sketch o bocetos de la aplicación.
Paso 5: Elaboración de Wireframe
Hasta este punto ya tenemos los primeros bosquejos e ideas de lo

que será nuestra aplicación. Es importante, que usted pueda traducir
estos prototipos de baja fidelidad a prototipos de media fidelidad, es
decir, con estas primeras ideas ya podemos elaborar los wireframes
de nuestro modelo. A continuación, en la figura 67, podrá observar
el resultado del proceso de transformación de bocetos o sketch a
wireframes.
199 MAD-UTPL
Figura 67.
Caso práctico: Wireframes de la aplicación.
4.12.2. Proceso de UI
Paso 6: selección de elementos de la interfaz
Hasta el momento hemos hecho algunas actividades básicas

para comprender las necesidades del proyecto, hemos analizado
y trabajado directamente con los perfiles de usuario o clientes
objetivos del producto para el cual estamos trabajando. Ahora se
debe encargar de trabajar en la UI de la aplicación, esto implica, como
estudio en la sección 4.Fundamentos de diseño de UI, los elementos
necesarios para poder diseñar las interfaces. Si recordamos los
temas que abordamos en dicha sección los aspectos especiales de
este proceso es conocer el soporte y los elementos.
Para este caso en particular el desarrollo está orientado a ser

construido como aplicaciones móviles nativas (video: tipos de
aplicaciones móviles) Android y iOS, por tanto, tenemos que
considerar algunos aspectos esenciales para saber hacia dónde está
enfocado el diseño, estos se describen en la tabla 13.
200 MAD-UTPL
Tabla 13.
Aspectos visuales y de soporte de la aplicación.
Soporte Teléfonos Android e iOS

Elementos Paleta de colores: al ser una aplicación enfocada en parques, el
color que seleccionó el cliente es la siguiente paleta de colores
que puede observar a través del siguiente enlace a la herramienta
colorhunt.
Tipografía: para este caso el usuario seleccionó: Roboto para las

dos aplicaciones. Puede obtener la tipografía del siguiente enlace a
Material Design.
Aplicación de referencia: PARQUEMET
Paso 7: Diseño de la UI
En este paso, será dónde usted realizará las actividades de diseño

de UI, basados en los insumos que ha ido generando en cada uno
de los pasos trabajados hasta el momento. Es aquí donde se hará
la representación visual de la UI, producto de este proceso usted
tendrá como resultado la figura Para realizar el diseño podrá utilizar
herramientas como Figma, Adobe XD o Juntinmind.
Figura 68.
Caso práctico: Diseño de la UI de la aplicación

201 MAD-UTPL
Paso 7: Validación del prototipo interactivo
Finalmente, usted podrá generar un modelo o prototipo interactivo

de usuario a través del cual sus clientes y usuarios finales de la
aplicación podrán interactuar con su propuesta de diseño y de
aplicación. Para esto usted se puede apoyar en las herramientas
anteriormente destacadas en el paso La generación del prototipo
lo podrá enviar a través de un enlace web y manipularla y obtener la
validación del usuario final. Observe la figura 69.
Figura 69.
Caso práctico: modelo/prototipo interactivo de la aplicación
Con esto hemos llegado al final del caso práctico, aunque de forma
resumida abarcamos lo que podría ser un proceso de modelado
genérico, no olvide que, los proyectos de software por su naturaleza
son dinámicos, por tanto, usted deberá estudiar y conocer el contexto
del problema para poder definir cuál será la estrategia, los métodos,
herramientas y aspectos importantes que utilizará para abordar los
diferentes proyectos en los que se involucre.
202 MAD-UTPL
Autoevaluación 5

asignatura.
1. El enfoque de diseño web está más orientado a:
a. Transmitir contenido informativo, de interacción y

automatización.
b. Transmitir contenido de carácter lógico.
c. Transmitir contenido de carácter transaccional.
2. El enfoque de diseño móvil está más orientado a:
a. Transmitir contenido informativo, de interacción y

automatización.
b. Completar tareas o actividades de usuario.
c. Completar interacciones y gestos en la UI.
3. El estándar W3C de diseño y desarrollo web que describe las

tecnologías fundamentales para la construcción de sitios y
aplicaciones web es:
a. HTML & CSS.

b. Javascript Web.
c. Accesibilidad.
203 MAD-UTPL
4. El estándar W3C de diseño y desarrollo web que define
los lineamientos para que el contenido sea accesible para
personas con discapacidad es:
a. Accesibilidad.
b. Internacionalización.
c. Gráficos.
5. El estándar que define la forma en cómo a través de diseño se

garantiza que los recursos web estén disponibles para todos
los dispositivos digitales es:
a. Web móvil.
b. Privacidad.
c. Accesibilidad.
6. La estrategia Mobile First Design significa que:
a. Cuando realizamos un diseño web, se debe diseñar la

apariencia de cómo se verá nuestro producto, primero en
una interfaz móvil y posteriormente en interfaces más
grandes.
b. Cuando realizamos un diseño web, se debe diseñar la

apariencia de cómo se verá nuestro producto, primero en
una interfaz de escritorio y posteriormente en interfaces
más pequeñas.
c. Cuando realizamos un diseño web, se debe desarrollar

primero para móvil y luego para otros dispositivos.
204 MAD-UTPL
7. Un layout define:
a. La estructura que soporta los componentes visuales de la

interfaz.
b. La estructura que soporta los aspectos interactivos de la
interfaz.
c. La estructura que soporta los componentes interactivos
de la interfaz.
8. Cuando diseñamos para móviles el único elemento común

entre dispositivos es:
a. El tamaño de la pantalla.
b. La capacidad para renderizar interacciones.
c. El cambio de orientación.
9. Una de las diferencias fundamentales de diseñar para web y

para móvil es:
a. La forma en cómo los usuarios interactúan con las

interfaces.
b. La forma en cómo los usuarios desencadenan acciones a
través de gestos.
c. La forma en cómo los usuarios perciben o intuyen el
funcionamiento de la interfaz.
10. La evaluación de la usabilidad se centra en:
a. Qué tan bien los usuarios aprenden a usar los elementos

de la interfaz.
b. Qué tan bien los usuarios aprenden a usar e intuir el
comportamiento del producto de software.
c. Qué tan bien los usuarios interpretan el comportamiento
de la interfaz.
205 MAD-UTPL

Resultado de Diseña una Interfaz simple de

aprendizaje 6 usuario.
¿Qué le ha parecido? A través del caso práctico hemos visto cómo en

unos pocos pasos hemos llegado a desarrollar un modelo o prototipo
que puede ser validado por el usuario, antes de pasar a una etapa
formal de desarrollo. En esta unidad 5, final de la guía, conoceremos
algunos conceptos y herramientas que le permitirán alcanzar el
resultado de aprendizaje planteado, considerando aspectos a tener
en cuenta a la hora de desarrollar modelos de usuario para el enfoque
de diseño web. Para ello iniciaremos por conocer dos conceptos
fundamentales que nos permitirán separar la parte visual de un
producto de software y la parte lógica o más conocida como frontend
y backend.
206 MAD-UTPL
Semana 15
Unidad 5. Desarrollo de la interfaz
5.1. Introducción al desarrollo de interfaces de usuario (web)
Antes de comenzar el desarrollo de UI, es importante que

conozcamos otro rol fundamental del proceso de desarrollo el UI
developer o desarrollador de UI, por su traducción al español. No
podemos pensar que un único rol de desarrollo puede cubrir cada
uno de los temas que hasta el momento hemos abordado. Es
importante que comprenda que cada uno de los aspectos que hemos
visto, deben contar con un profesional cualificado para abordar
temas como usabilidad, UX, UI y en este momento desarrollo de UI.
La tendencia actual, del proceso de desarrollo destaca el uso de
componentes desacoplados ¿qué significa esto? Ya no se construyen
los sistemas de software como una única pieza fuertemente
acoplada o los típicos monolitos que conocemos, sino, se separan las
actividades y componentes, principalmente en Frontend y Backend
para poder enfocar los esfuerzos de proyecto en componentes por
separado y que cada uno de estos centre sus esfuerzos en sus metas
de desarrollo, tal y como lo podemos observar en la figura 70.
207 MAD-UTPL
Figura 70.
Proceso de alto nivel de desarrollo de un producto de software.
Diseñador de
experiencia de
usuario Diseño de
información
Centrado en Diseño de Front-End Centrado en
Investigación Back-End
humanos interacción HTML/CSS/JS la tecnología
UI/Diseño
UI diseñador Desarrollador
visual
UI desarrollador
Fuente: GB Intelligence. (2020). UI Design Process: Why We Need It?

Gbievents.Com.
Analicemos la figura 70, los dos aspectos principales del proceso se

centran en el enfoque de sus actividades. Enfoque en los humanos
y la tecnología. Hasta el momento hemos estudiado el enfoque en
el humano a través del proceso de modelado de usuario, basado en
aspectos como usabilidad, UX y UI. Cabe recalcar que el objetivo
principal de esto es poder construir un prototipo interactivo con
el que el usuario pueda comprender de forma más fácil, cómo
quedará su producto antes de ir a una etapa de desarrollo. Ahora el
desarrollo de interfaces se enfoca más en la tecnología necesaria
para implementar nuestro producto. ¿Cuándo pasamos del diseño/
modelado/prototipado de nuestras aplicaciones al desarrollo de
interfaces?
208 MAD-UTPL
Para contestar esta pregunta, es fundamental que nos retomemos
los objetivos del modelado de usuario. El propósito de modelar
para el usuario permite que a través de un proceso de investigación
basado en UX, se puedan definir las necesidades en función de la
experiencia del usuario, para prototipar nuestras interfaces y usarlas
como recurso y que la parte interesada del proyecto sea capaz de
determinar si el modelo cumple o no con las expectativas esperadas.
Esto implica un proceso de validación y verificación con el usuario
para continuar a etapas posteriores, como el desarrollo de las UI o
desarrollo frontend como se conoce, y posteriormente integrar al
backend de la aplicación. Modelar para el usuario es fundamental
para optimizar esfuerzos en desarrollo de productos de software,
ya que, de no realizar esta actividad, el proyecto estaría propenso
a errores, conflictos y soluciones que se deban aplicar en etapas
finales del proyecto, lo cual induce a que se puedan ver afectadas las
actividades normales del proceso.
Entonces ¿qué necesitamos conocer para el desarrollo de UI? Lo

conoceremos en el siguiente punto.
¡Continuemos!
5.2. Conceptos fundamentales de desarrollo
Seguramente en la introducción de esta unidad, usted pudo identificar

nueva terminología ¿qué es frontend? ¿Qué es backend? Lo invitamos
a revisar la figura 71., antes de continuar.
209 MAD-UTPL
Figura 71.
Diferencias entre frontend y backend
Fuente: Adaptado de Back4App Blog. (2020). ¿Como fazer um aplicativo? | .

Blog.Back4app.Com.
Conocer estos dos conceptos es fundamental para afrontar el

desarrollo de los modelos propuestos. Frontend, es todo aquello
que el usuario observa y manipula, es decir, es el mecanismo de
implementación de la interfaz de usuario, generalmente este es el
componente visual de un producto o como lo reconocen algunos
autores como el desarrollo del lado del cliente, generalmente
esto representa aproximadamente el 20% del total de esfuerzo
de desarrollo durante el proyecto. Por otro lado, el backend
es el componente de software que el usuario no observa,
representa la mayor parte del esfuerzo del proyecto de desarrollo,
aproximadamente el 80%. El componente de backend, contiene la
lógica del producto; es decir podríamos entenderlo como el cerebro
de la aplicación, mientras que el frontend representa lo que el usuario
puede observar y manipular.
Comprender estos dos conceptos es fundamental para separar y

comprender los diferentes enfoques de desarrollo que le permitirá
enfocar los esfuerzos en uno u otro componente (frontend o
210 MAD-UTPL
backend). Ahora que conoce estos dos conceptos le planteo la
siguiente pregunta ¿Cómo se ve afectada la arquitectura de software,
cuando pensamos en el desarrollo de componentes desacoplados
entre frontend y backend? Lo ánimo a trabajar sobre esta pregunta y
a reflexionar sobre la importancia del frontend y el backend y ¿cómo
garantizaría la comunicación entre los dos componentes?
5.3. El enfoque de desarrollo frontend
El desarrollo de frontend se refiere a esa área de desarrollo web

que se enfoca en lo que los usuarios pueden observar y manipular.
Implica transformar el código creado por los desarrolladores de
backend en una interfaz gráfica o viceversa, asegurándose de que
los datos e información producida por el sistema se presenten
en un formato fácil de leer y comprender para el usuario final. Si
partimos de la base de lo aprendido en esta asignatura, diríamos
que el desarrollo frontend es la traducción de nuestras UI a código
implementable, capaz de servir al usuario el modelo que hemos
desarrollado. Aunque podemos separar el enfoque de desarrollo
frontend para web y para móvil, este término está más enfocado
al desarrollo web; sin embargo, también podríamos usarlo en el
desarrollo móvil a través de la separación de responsabilidades en la
etapa de desarrollo.
5.4. Elementos tecnológicos para el desarrollo web frontend
Implementar una UI, es más sencillo cuando se ha seguido los

pasos correctos para definir como se apreciará nuestro producto
de software, es decir, el proceso ha contemplado UX y UI, hasta
llegar a un modelo o prototipo en el que el usuario a sido partícipe,
retroalimentando sus observaciones hasta llegar a tener una versión
final de cómo se verá su producto. Sea para web o para móvil, el
211 MAD-UTPL
proceso de desarrollo frontend es el mismo, se recomienda no obviar
los aspectos estudiados y pasar a una etapa de desarrollo, siempre
y cuando el modelo haya sido autorizado por la parte interesada.
Construir el frontend de una aplicación implica traducir el modelo
desarrollado a código y posteriormente integrarlo al backend para
completar la construcción de un producto. Desarrollar bajo el
enfoque frontend para web se basa principalmente en tres pilares
fundamentales de desarrollo: 1) HTML, 2) CSS, 3) Javascript. En la
tabla 13, se detallan cada uno de estos pilares.
Tabla 14.
Pilares fundamentales del desarrollo frontend.
Pilar Detalle
HTML HTML o HyperText Markup Language es simplemente un archivo de
texto marcado con códigos especiales que le indican al navegador
web cómo mostrar los datos que recibe del servidor en la pantalla de
la computadora. El marcado HTML se basa en una gran colección
de etiquetas de texto que están incrustadas en el texto y le dicen a la
computadora, específicamente al navegador, cómo debe verse un sitio
web.
Versión actual: HTML5.

CSS Si HTML proporciona la estructura para una página web, entonces CSS
proporciona el estilo, ¡y está justo en el nombre! CSS son las siglas
de Cascading Style Sheets y describe cómo debe verse una página
web: prescribe colores, fuentes, espaciado y mucho más. En resumen,
puede hacer que su sitio web se vea como desee.
Versión actual: CSS3

JavaScript JavaScript es el lenguaje de programación de la web. La inmensa
mayoría de los sitios web utilizan JavaScript y todos los navegadores
web modernos (en equipos de escritorio, tabletas y teléfonos) incluyen
intérpretes de JavaScript, lo que convierte a JavaScript en el lenguaje
de programación más implementado de la historia.
212 MAD-UTPL
HTML, define el esqueleto de su UI, CSS, le permite colocar los estilos
gráficos y visuales que haya definido en su diseño de UI, mientras
que Javascript, le da el aspecto funcional a su UI, es decir, le permite
definir la interactividad que tendrá su interfaz.
Observe el siguiente recurso de video: refuerce sobre las principales

diferencias entre los tres pilares fundamentales del desarrollo web
Frontend, desde el minuto 1:15 hasta el final del video.
Para conocer acerca de la sintaxis de estos tres pilares para el

desarrollo frontend, revise los siguientes recursos, HTML, CSS,
Javascript.
5.4.1. Herramientas de código fuente
Aunque puede arreglárselas con los simples editores de texto que

vienen con su computadora, un editor de código dedicado facilita
mucho la tarea de escribir HTML, CSS y JavaScript. Los editores
de código comprenden la sintaxis del código que escribe, por lo
que pueden hacer cosas por usted, como codificación de colores,
detección de errores y finalizar automáticamente tareas simples
como cerrar etiquetas HTML. Algunos proporcionan vistas previas
de la página para que pueda ver los resultados de su código
mientras trabaja. A continuación, en la tabla 14, se describen algunas
herramientas de codificación más destacadas que puede utilizar para
el desarrollo frontend de sus aplicaciones.
Tabla 15.
Herramientas de desarrollo frontend.
Herramietna Tipo de herramienta Enlace

Sublime Text Editor de código fuente. sublimetext.com
Atom Editor de código fuente. atom.io
Brackets Editor de código fuente. brackets.io
Visual Studio Code Editor de código fuente. code.visualstudio.com
213 MAD-UTPL
5.4.2. Frameworks de desarrollo
Elegir un marco adecuado de desarrollo de interfaces de usuario

puede ser una de las tareas más importantes para su proceso de
desarrollo de interfaces. Estos le proveen la posibilidad de utilizar
patrones de diseño ya definidos en estos marcos como por ejemplo
una tabla de datos, un acordeón de información, una galería de
imágenes o algo tan simple como la tipografía y la estructura base
para hacer que su proceso de diseño sea realmente ágil, rápido,
atractivo y con la capacidad de adaptarse a los diferentes tamaños
de dispositivos digitales, sin la necesidad de abordar problemas de
diseño desde cero. A continuación, en la tabla 15, se describen los
frameworks de diseño más usados actualmente.
Tabla 16.
Frameworks de desarrollo frontend
Framework Descripción Enlace

Bootstrap Este es el framework más popular getbootstrap.com
de diseño, brinda la posibilidad a los
desarrolladores de usar componentes
listos que utilizan una combinación de
HTML, CSS3 y Javascript. Actualmente se
encuentra en la versión 5 y su enfoque es
para desarrollo de UI web.
Zurb Foundation Permite a sus usuarios reutilizar el código get.foundation
escrito en HTML, CSS3 Y Javascript a través
de widgets combinados para ubicar en sus
desarrollos web.
Materialice CSS Es otro marco de desarrollo de interfaces materializecss.
web que a través de la reutilización de com
componentes ya desarrollados permite
que se puedan desarrollar interfaces
con altas capacidades visuales, gráficas
y de compatibilidad con los diferentes
navegadores de escritorio y móvil.
214 MAD-UTPL
Otros frameworks importantes para el desarrollo web frontend son:
SemanticUI, Bulma, UIKit, Pure.css.
Revise el siguiente REA, Lecture 9: UI Software Architecture, conozca

y relacione los conceptos estudiados en esta unidad con el uso de
patrones de diseño para interfaces de escritorio y web.
215 MAD-UTPL
Autoevaluación 6

asignatura.
1. El rol encargado de desarrollar las UI es:
a. UI Developer.
b. Diseñador UI.
c. UX Developer.
2. Qué significa el uso de componentes de software

desacoplados:
a. Que se construyen componentes de frontend y backend

por separado.
b. Que se construyen componentes de UI y backend por
separado.
c. Que se construyen componentes como un monolito.
3. El desarrollo de UI está más enfocado en:
a. Las personas.
b. Los interesados.
c. La tecnología.
216 MAD-UTPL
4. El proceso de implementación de desarrollo de UI únicamente
inicia:
a. Cuando el cliente ha validado el modelo o prototipo de

usuario.
b. Cuando el cliente ha validado el modelo de requisitos de
usuario.
c. Cuando el cliente ha dado la aprobación de las
necesidades.
5. Frontend es el componente que los usuarios:
a. Observan e interactúan.
b. Observan y procesan.
c. No observan y tampoco interactúan.
6. Backend es el componente que los usuarios:
a. Observan e interactúan.
b. No observan, pero se encarga de la lógica.
c. No observan y tampoco se encarga de la lógica.
7. El esfuerzo representa aproximadamente el 20% del proyecto

de desarrollo, corresponde a:
a. Desarrollo frontend.
b. Desarrollo backend.
c. Desarrollo UI.
8. El esfuerzo representa aproximadamente el 80% del proyecto

de desarrollo, corresponde a:
a. Desarrollo frontend.
b. Desarrollo backend.
c. Desarrollo UI.
217 MAD-UTPL
9. Los pilares fundamentales del desarrollo web frontend son:
a. HTML, CSS y JavaScript.

b. HTML, CSS y Java.
c. HTML, SCS y JavaScript.
10. Maqueta la estructura del frontend de la aplicación:
a. HTML.
b. CSS.
c. JavaScript.

Hemos finalizado con el estudio de esta interesante asignatura,

esperamos que haya sido de total agrado y aprovechamiento para el
desarrollo de sus competencias como futuro profesional.
¡Felicitaciones!
218 MAD-UTPL
Actividades finales del bimestre
Semana 16
Actividades recomendadas
Apreciado estudiante.
Hemos llegado a la etapa final del segundo bimestre, y seguro que

usted cumplió con todas las actividades de aprendizaje. Como
preparación para el examen presencial se sugiere que:
Revise las unidades y subtemas estudiados en cada una de las

semanas del bimestre y refuerce los que considere necesarios.
Analice los recursos facilitados en este texto guía.
Revise las autoevaluaciones de las unidades del bimestre.
Prepárese para la evaluación presencial del primer bimestre y

comuníquese con su tutor en caso de que se presenten dudas.
Consulte el horario y lugar para rendir la evaluación presencial

de la asignatura.
219 MAD-UTPL
4. Solucionario
Autoevaluación 1
Pregunta Respuesta Retroalimentación
1 b La interfaz de usuario es el elemento que funciona como
mediador entre el usuario y un sitio web y lo hace mediante
la interacción que logra establecer entre estos dos entes.
2 a El fin del modelado centrado en el usuario es obtener un
resultado o un diseño óptimo a la vista del usuario que
permita cumplir con las características de usabilidad y
rendimiento, eso le brindará una grata experiencia.
3 b Como su nombre lo dice, el diseño centrado en el usuario
lo ubica a este en todas las etapas del diseño, con el
objetivo de que vaya validando y que hasta el final se
obtenga un producto o servicio acorde a sus expectativas.
4 c La definición de los perfiles de usuario es una de las
primeras acciones del modelado de usuario, esto permite
identificar las necesidades y el contexto del entorno para
luego traducirlo al diseño.
5 a El centro del proceso del diseño debe ser el usuario final,
quien realmente va a hacer uso de ese producto digital, por
lo tanto, debe ser el, quién oriente y valide cada entregable.
6 c La HCI es quien se enfoca en la interacción de los seres
humanos con cualquier producto informático.
7 b En la actualidad cuando se habla del diseño o modelado
centrado en el usuario, se pone de manifiesto tres ámbitos:
la usabilidad, la experiencia e interfaz de usuario, cada una
de ellas tiene un propósito específico y aporta al objetivo
central.
220 MAD-UTPL
Autoevaluación 1
8 c La usabilidad está ligada con esa facilidad de uso además
del rendimiento del producto o servicio digital, recordemos
que es ella quien brinda todas las facilidades posibles para
hacer más rápida y sencilla la navegación en un sitio web o
en la tecnología correspondiente.
9 a La experiencia de usuario o UX, además de garantizar la
funcionalidad de un producto o servicio digital pretende
obtener emociones y sensaciones agradables en el
usuario.
10 b Un sistema informático es interactivo con el usuario, y es
la interfaz de usuario quien media esta comunicación o
interacción.
221 MAD-UTPL
Autoevaluación 2
1 c La usabilidad es quien se encuentra muy ligada con la
expresión de “fácil uso”.
2 b La facilidad de uso y la productividad del usuario es el
resultado que se pretende de la usabilidad de un producto,
pero es necesario incluir el elemento de la accesibilidad
para garantizar que esa facilidad y productividad se cumpla
para todo tipo de persona incluyendo las personas con
discapacidad.
3 a La norma ISO 9241 indica qué es la usabilidad y los
objetivos que esta persigue, definiendo así a la eficacia,
eficiencia y satisfacción.
4 a Hay que tener claro que las motivaciones de la usabilidad
son los entornos o los medios en los que se desenvuelven
los usuarios y a los que debemos poner atención para
incluir las TIC (software y hardware), mientras que los
aspectos de la usabilidad se centran en los tipos de
usuarios o en las características. Con este breve análisis,
algunas de las motivaciones son los clientes electrónicos y
social media, juegos, e interfaces colaborativas.
5 a Hay que tener claro que las motivaciones de la usabilidad
son los entornos o los medios en los que se desenvuelven
los usuarios y a los que debemos poner atención para
incluir las TIC (software y hardware), mientras que los
aspectos de la usabilidad se centran en los tipos de
usuarios o en las características. Con este breve análisis,
algunas de las motivaciones son los clientes electrónicos y
social media, juegos, e interfaces colaborativas.
6 c La ergonomía tiene como objetivo enfocarse al ambiente
y al lugar de trabajo, adaptando esto en las situaciones
que sea necesario para brindar la seguridad física a los
usuarios.
7 c El estándar ANSI/HFES 100 – 2007 Ergonomic Standard.
Human Factors Engineering of Computer Workstations,
brinda las directrices a considerar en los temas de
ergonomía.
222 MAD-UTPL
Autoevaluación 2
8 c La diversidad cultural e internacional pone de manifiesto
que una preocupación de los diseñadores es la de
considerar las diversas necesidades de los usuarios
con diferentes conocimientos lingüísticos y acceso a la
tecnología también muy diferente.
9 a El estándar W3C – Web Accesibility Initiative, brinda las
directrices a considerar en los temas de accesibilidad.
10 a Con el avance de la tecnología se tiene nuevos dispositivos
que son mucho más veloces y así mismo existe nuevo
software que automatiza aún más las rutinas, además
de nuevas formas de conectividad, etc., por lo tanto, el
aspecto de hardware adaptable y diversidad de software
es una preocupación de los diseñadores ya que deben
considerar la compatibilidad entre lo nuevo y lo antiguo.
223 MAD-UTPL
Autoevaluación 3
1 c El autor (Turner, 2017), define a la experiencia de usuario –
UX como la usabilidad del nuevo milenio, ya que integra la
usabilidad, la accesibilidad, la diversión y la estética.
2 a (Hartson Rex & Pyla Pharda, 2012), nos proporciona el ciclo
de vida definido para la UX, en donde integra 4 actividades
puntuales: análisis, diseño, prototipo y evaluación.
3 b Durante la actividad de prototipo se realizan las alternativas
de diseño, a medida que los diseños evolucionan en la
mente de los diseñadores, éstos producen varios tipos de
prototipos como representaciones externas del diseño.
4 b Al momento de introducir la investigación en UX, es
importante conocer a nuestro usuario para obtener más
información de él con el fin de validar la etapa del diseño.
5 a Los verbatims son las expresiones o frases literales que
menciona un usuario y nos aporta con ideas.
6 c Un mapa de empatía nos permite profundizar en los
aspectos motivacionales y psicológicos de los usuarios ya
que nos permite empatizar con él, logrando así identificar
el por qué de sus acciones y actitudes, con lo cual el
equipo de diseño puede interiorizar en sus sentimientos y
experiencias.
7 b El Customer journey map – CJM describe la interacción
del usuario con el producto o servicio a lo largo de sus
puntos de contacto, es decir, el usuario realiza un viaje
desde el punto A hasta el punto Z, y el CJM traza el camino
que sigue el usuario desde el inicio de este viaje hasta la
satisfacción de esa necesidad.
8 c Para ir plasmando las ideas con posibles soluciones, se
utiliza la técnica de creación colectiva Crazy 8s (Crazy
eights), que consiste en dividir una hoja de papel en
8 recuadros, en cada una de ellas cada participante
describirá una pantalla o característica (boceto).
9 c Los prototipos de alta fidelidad son representaciones más
detalladas del diseño, en ellos se incluyen detalles de la
apariencia y el comportamiento de la interacción.
224 MAD-UTPL
Autoevaluación 3
10 c Los mockups son una visualización de alta fidelidad de su
diseño, ofrecen el aspecto visual del diseño del producto
y son ideales para evaluar tanto el aspecto como la
sensación del diseño. Recordemos que un wireframe es de
media fidelidad y el sketch de baja fidelidad.
225 MAD-UTPL
Autoevaluación 4
1 a La interfaz de usuario es el componente a través del cual
las personas pueden observar y manipular cualquier
sistema de software.
2 b Desde el punto de vista de la investigación la UI es un
subconjunto del campo de estudio Interacción humano-
computador.
3 a Elaborar un prototipo o modelo de usuario antes de iniciar
las actividades de desarrollo permite, validar con el usuario
el funcionamiento del producto antes de continuar a
etapas posteriores de desarrollo de software.
4 c Un prototipo o modelo funcional de usuario es una réplica
o demo de cómo se comportará visualmente la aplicación.
5 a Los objetivos de diseño de una UI son: diseño centrado en
humanos e interfaces diseñadas por humanos.
6 b El proceso para diseñar un modelo o prototipo de usuario
es empezar por UX y terminar con UI.
7 c El artefacto resultante de UX es el wireframe.
8 a La práctica o el modelo de Diseño Centrado en el Usuario
(UCD) se enfoca en crear modelos y/o prototipos poniendo
como centro del proyecto al usuario.
9 a El principio que permite agrupar los elementos de la UI por
su función es proximidad.
10 a El principio de diseño que se basa en el uso del aprendizaje
basado en el uso de otras UI es: modelos mentales y
metáforas.
226 MAD-UTPL
Autoevaluación 5
1 a El enfoque de diseño web está orientado a transmitir
contenido informativo, de interacción y automatización.
2 b El enfoque de diseño móvil está más orientado a completar
tareas o actividades de usuario.
3 c El estándar W3C de diseño y desarrollo web que describe
las tecnologías fundamentales para la construcción de
sitios y aplicaciones web es HTML & CSS.
4 a El estándar W3C de diseño y desarrollo web que define
los lineamientos para que el contenido sea accesible para
personas con discapacidad es accesibilidad.
5 a El estándar que define la forma en cómo a través de diseño
se garantiza que los recursos web estén disponibles para
todos los dispositivos digitales es web móvil.
6 a Mobile first significa que cuando realizamos un diseño web,
se debe diseñar la apariencia de cómo se verá nuestro
producto primero en una interfaz móvil y posteriormente en
interfaces más grandes.
7 a Un layout define la estructura que soporta los
componentes visuales de la interfaz.
8 c Cuando diseñamos para móviles el único elemento común
entre dispositivos es el cambio de orientación.
9 a Una de las diferencias fundamentales de diseñar para web
y para móvil es la forma en cómo los usuarios interactúan
con las interfaces.
10 b La evaluación de la usabilidad se centra en que tan bien los
usuarios aprenden a usar e intuir el comportamiento del
producto de software.
227 MAD-UTPL
Autoevaluación 6
1 a El rol encargado de desarrollar las UI es el UI developer
o lo que en su traducción al español se conoce como
desarrollador UI.
2 a El uso de componentes de software desacoplados significa
que durante el proceso de desarrollo se construyen
componentes independientes de frontend y backend.
3 c El desarrollo de la UI está más enfocado en la tecnología.
4 a El proceso de implementación de desarrollo de UI
únicamente inicia cuando el cliente ha validado el modelo
o prototipo de usuario.
5 a Frontend es el componente con el que los usuarios
observan e interactúan con el sistema.
6 b Backend es el componente que los usuarios no observan,
tampoco manipulan, sin embargo, se encarga de la lógica
del sistema.
7 a El esfuerzo que representa aproximadamente el 20% del
total del proyecto es el desarrollo frontend.
8 b El esfuerzo que representa aproximadamente el 80% del
total del proyecto es el desarrollo backend.
9 a Los pilares fundamentales del desarrollo web frontend son
HTML, CSS y JavaScript.
10 a HTML, es la tecnología que permite maquetar la estructura
del frontend de la aplicación.
228 MAD-UTPL
5. Referencias bibliográficas
Banga, Cameron and Weinhold, J. (2014). Essential Mobile Interaction

design. http://scholar.google.com/scholar?hl=en&btnG=Search
&q=intitle:Interaction+Design#0%5Cnhttp://scholar.google.com/
scholar?hl=en&btnG=Search&q=intitle:Interaction+design%230
Czajkowski, T. (2020). Customer Journey Maps A “Quick And Dirty”

Technique To Create Them Usability Geek. Usabilitygeek.Com.
https://usabilitygeek.com/customer-journey-maps-create-
technique/
Everett N. McKay. (2013). UI is Communication: How to Design

Intuitive, User Centered Interfaces by Focusing on Effective
Communication. In Elsevier Inc. https://books.google.com.np/
books?id=wNozxtKuOKcC&pg=PA63&dq=what+is+communic
ation&hl=en&sa=X&ved=0ahUKEwjC_rfPwNjpAhUCgUsFHW4y
DEkQ6AEIJjAA#v=onepage&q=what is communication&f=false
Fling, B. (2009). Mobile Design and Development. http://books.google.

com/books?id=LyMeulBTkH0C&pgis=1
Galitz, W. O. (2007). The Essential Guide to User Interface Design:

An Introduction to GUI Design Principles and Techniques. In
SIGCHI Bulletin (Vol. 29, Issue 4). https://books.google.com/
books?hl=en&lr=&id=Q3Xp_Awu49sC&pgis=1
Hartson, R., & Pyla, P. (2012). The UX Book Process and Guidelines for
Ensuring a Quality User Experience.
229 MAD-UTPL
Hartson Rex, & Pyla Pharda. (2012). The UX Book Process and
Guidelines for Ensuring a Quality User Experience.
Hassan, Y., Martín Fernández, F. J., & Iazza, G. (2004). Diseño

web centrado en el usuario: usabilidad y arquitectura de la
información.
Horton, S., & Quesenbery, W. (2014). A Web for Everyone: Designing

Accessible User Experiences.
Interaction Design Foundation. (2020). User Centered Design. https://

www.interaction-design.org/literature/topics/user-centered-
design
International Organization for Standardization. (1999). ISO

13407:1999, Human-centred design processes for interactive
systems. In Europe. https://www.iso.org/standard/21197.html
International Organization for Standardization. (2010). ISO 9241-210:

Ergonomics of human–system interaction Human-centred
design for interactive systems. In International Organization for
Standardization. https://www.iso.org/standard/77520.html
Le, K. (2017). User Centered Design Method. Medium. https://medium.

com/redcatstudio/user-centered-design-method-28e3aafc8c8a
Lowdermilk, T. (2013). User-Centered Design.
Rosenfeld, L., Morville, P., & Arango, J. (2015). Information

Architecture FOR THE WEB AND BEYOND Fourth-Edition. In
College Research Libraries News (Vol. 61, Issue 9).
Shneiderman, B., Plaisant, C., Cohen, M., Jacobs, S., & Diakopoulos,
N. (2018). Designing the user interface strategies for effective
human-computer interaction. In Pearson (Sixth Eidi). Pearson
Education Limited. https://doi.org/10.1145/25065.950626
230 MAD-UTPL
Smith, A. (2020). How to Have Better UX Before UI Begins.
Usabilitygeek.Com. https://usabilitygeek.com/better-ux-before-
ui/
STRV. (2015, September 28). Designing for the Web vs. Apps in
the Mobile Era. Medium.Com. https://medium.com/@strv/
designing-for-web-vs-apps-in-the-mobile-era-a7c2fff654df
Thukral, G. (2017). What is UX & UI? They are complementary to

each other. Linkedin.Com. https://www.linkedin.com/pulse/
what-ux-ui-complementary-each-other-gitika-thukral/
Turner, P. (2017). Human-Computer Interaction Series A Psychology of

User Experience Involvement, Affect and Aesthetics. http://www.
springer.com/series/6033
usability.gov. (2020). Usability Evaluation Basics. Usability.Gov.

https://www.usability.gov/what-and-why/usability-evaluation.
html
Vesselov, S., & Davis, T. (2019). Building Design Systems. In Building

Design Systems. Apress. https://doi.org/10.1007/978-1-4842-
4514-9
231 MAD-UTPL

Itinerario 1: Modelado Del Usuario: Guía Didáctica

Cargado por

Copyright:

Formatos disponibles

Itinerario 1: Modelado Del Usuario: Guía Didáctica

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Itinerario 1: Modelado Del Usuario: Guía Didáctica

Cargado por

Copyright:

Formatos disponibles

Itinerario 1: Modelado del

Departamento de Ciencias de la Computación y

Itinerario 1: Modelado del Usuario

Carrera PAO Nivel

 Tecnologías de la información VII

Soto Guerrero Fernanda Maricela

Correa Tenesaca Roddy Andrés

DSOF_4074 Asesoría virtual

Itinerario 1: Modelado del Usuario

Diagramación y diseño digital:

Ediloja Cía. Ltda.

ISBN digital - 978-9942-39-087-5

Unidad 1. Introducción al modelado de usuario............................. 14

2.5. Aspectos de la usabilidad................................................... 41

Unidad 3. Experiencia de usuario.................................................. 62

Actividades de aprendizaje recomendadas.......................................... 84

Actividades de aprendizaje recomendadas.......................................... 93

Semana 8 ...................................................................................... 110

Semana 9 ...................................................................................... 112

Unidad 4. Interfaz de usuario........................................................ 113

Semana 10 .................................................................................... 122

4.4. ¿Cómo se complementan UX y UI?.................................... 122

Semana 11 .................................................................................... 142

4.7. Fundamentos de diseño de la UI........................................ 142

Semana 12 .................................................................................... 161

4.8. El enfoque de diseño........................................................... 161

Semana 13 .................................................................................... 184

4.9. Métodos de evaluación de usabilidad para UI................... 184

4.12. Desarrollando un prototipo de usuario con UI & UX.......... 191

Semana 15 .................................................................................... 207

Unidad 5. Desarrollo de la interfaz................................................ 207

Semana 16 .................................................................................... 219

1.1. Presentación de la asignatura

1.2. Competencias genéricas de la UTPL

Compromiso e implicación social.

1.3. Competencias específicas de la carrera

Desarrollar métodos alternativos de acceso a las TI mediante la

 Elaboración de modelos de usuario que permitan validar

 Relacionar aspectos fundamentales del proceso de diseño de

 Comprender cómo diseñar una UI con base a las necesidades y

 Conocer en qué etapa de desarrollo se elaboran los modelos

 Utilizar aspectos de desarrollo que agilizan la construcción de

 Comprender la importancia de integrar al usuario en cada

Para esta asignatura se utilizarán algunas metodologías de

Los métodos que utilizan son:

 Clase invertida: usted cuenta con todos los recursos

 Aprendizaje basado en análisis de estudio de caso: para lograr

 Aprendizaje basado en problemas: usted podrá estar en la

 Dedique como mínimo una hora diaria al estudio, revise

 Organice mediante agenda las fechas de las actividades en

 Ingrese con periodicidad (semanalmente) al EVA, para que

 Se recomienda que mientras aprende los temas propuestos,

 Para empezar el estudio de esta asignatura, se recomienda

 Las dudas e inquietudes que tenga en relación con la

 Antes de iniciar su proceso de aprendizaje, lo invitamos a

 Explica como la interfaz de

Estimado estudiante, bienvenido a nuestra primera semana de

Unidad 1. Introducción al modelado de usuario

La tecnología es el aspecto más cotidiano en nuestro día a día, nos

Tecnologías de la información VII

Elaboración de modelos de usuario que permitan validar

Relacionar aspectos fundamentales del proceso de diseño de

Comprender cómo diseñar una UI con base a las necesidades y

Conocer en qué etapa de desarrollo se elaboran los modelos

Utilizar aspectos de desarrollo que agilizan la construcción de

Comprender la importancia de integrar al usuario en cada

Clase invertida: usted cuenta con todos los recursos

Aprendizaje basado en análisis de estudio de caso: para lograr

Aprendizaje basado en problemas: usted podrá estar en la

Dedique como mínimo una hora diaria al estudio, revise

Organice mediante agenda las fechas de las actividades en

Ingrese con periodicidad (semanalmente) al EVA, para que

Se recomienda que mientras aprende los temas propuestos,

Para empezar el estudio de esta asignatura, se recomienda

Las dudas e inquietudes que tenga en relación con la

Antes de iniciar su proceso de aprendizaje, lo invitamos a

Explica como la interfaz de

Utilizar un proceso de diseño basado en usabilidad, Experiencia

Abordar la Experiencia de Usuario (UX) como aspecto principal

Conocer que el proceso de diseño de una Interfaz de Usuario

Desarrollar un modelo o prototipo que nos permita fallar rápido

Evaluar aspectos de usabilidad y accesibilidad de nuestras

El mundo de la usabilidad es amplio y se

La Interacción Humano-Computador – HCI es

El Diseño Centrado en el Usuario – DCU es una

El DCU no es subjetivo y a menudo se basa en

El DCU implica mucho más que hacer que las

El DCU puede ahorrar tiempo al ayudarle a

El diseño no nos distrae del trabajo. Asegura