ETAPA GENERACIÓN

Diseño Centrado en
el Usuario
UOC - Grado en Ingeniería Informática - Interacción persona ordenador
 Índice
- - - - X

Índice​ 1
Introducción​ 2
User Journey​ 3
Requerimiento 1: Planificar una ruta accesible​ 3
Requerimiento 2: Reportar una incidencia​ 4
Prototipado​ 5
Herramienta utilizada​ 5

Introducción
- - - - X
En esta etapa del proyecto he trabajado en llevar más lejos mi
propuesta de diseño, centrándome en refinar el prototipo y en
profundizar en la experiencia del usuario. A través de la técnica del
User Journey he podido analizar con mayor claridad cómo interactúan
los usuarios con la app en situaciones reales y he identificado los
puntos del recorrido donde puede haber confusión.

También he continuado desarrollando mi prototipo de baja fidelidad en

Figma, teniendo en cuenta lo aprendido durante los test con usuarios y
los principios de diseño universal. Aunque ha sido un proceso con
ciertos desafíos técnicos me ha servido para visualizar mejor las
pantallas y pensar cómo guiar al usuario de forma sencilla y
accesible. Además, he revisado cómo se integran los conceptos básicos
de la IPO en el diseño, para asegurar que la propuesta sea
comprensible para cualquier persona que la use.

1
 User Journey
- - - - X
Requerimiento 1: Planificar una ruta accesible
El usuario quiere planificar una ruta accesible desde su ubicación
actual hasta un hospital.

Fase Touchpoints Acciones Emociones Pain Oportunidades

Points y Soluciones

Inicio Pantalla Abre la Interesado Ninguno Ubicarlo

principal app y centrado con
pulsa icono y texto
“Planific grande
ar ruta”

Búsqueda Buscador Introduce Ligerament Molesto Ofrecer

de ruta del destino el e dudoso y por los comandos por
destino ya algo anuncios + voz y
estresado Iconos autocompletad
poco o
claros

Filtros Sección de Marca Más Ninguno Usar texto

accesibili filtros “Evitar confiado junto a los
dad escaleras iconos y
” y botones
“Ascensor grandes
es
disponibl
es”

Resultados Lista de Revisa y Positivo No siempre Añadir

de ruta rutas con elige la es clara distintivo de
iconos opción la “100%
con menor accesibili accesible” en
dificulta dad real verde, con
d texto

2
Confirmaci Botón de Pulsa Tranquilo Dudas Mostrar
ón inicio de “Confirma sobre qué resumen de
navegación r ruta” puntos del accesibilidad
trayecto antes de
son iniciar
accesibles
, aunque
luego se
da cuenta
él mismo

Navegación Vista paso Sigue la Acompañado Falta de Notificacione

a paso + ruta paso , seguro aviso si s automáticas
modo voz a paso algo sobre
(si hay) cambia en incidencias
tiempo
real

Requerimiento 2: Reportar una incidencia

Fase Touchpoints Acciones Emociones Pain Oportunidades

Points y Soluciones

Inicio Pantalla Pulsa Leve Botón no Usar colores

principal “Reportar frustració visible o de alerta y
incidenci n mal texto claro
a” identifica (Algo no
do funciona?)

Selección Mapa o Seleccion Con algo La Permitir

de campo a de prisa geolocaliz edición
ubicación manual ubicación ación manual rápida
del falla o y sugerencias
problema tarda de lugares

Tipo de Lista de Elige Más prisa Ninguno Añadir

problema incidencias “Ascensor aun descripciones
fuera de simples o
servicio” ejemplos
visuales

3
Agregar texto o Añade Más Dificultad Dictado por
informació imagen imagen aliviado para voz accesible
n escribir o directamente
sostener
el móvil
para una
correcta
foto

Confirmaci Botón Envía Tranquilo No queda Mensaje de

ón “Enviar” reporte claro si confirmación
se envió claro y breve
correctame
nte

Fin Pantalla Cierra el Satisfecho Nada que Ofrecer

final proceso hacer botón:
después “¿Quieres
del reportar otra
reporte cosa?”

4
 Prototipado
- - - - X
Herramienta utilizada
Para esta versión del prototipo he utilizado Figma, una
herramienta online de diseño que permite crear interfaces
interactivas de forma colaborativa y muy visual. Es una buena
opción porque permite simular flujos de navegación, enlazar
pantallas entre sí y compartir el diseño con otras personas sin
necesidad de descargar nada. Muy útil para testear más adelante
con usuarios.

Requerimiento 1: Planificar una ruta accesible

Funcionalidades destacadas en esta versión:

❖​Interfaz clara con campos de búsqueda grandes y visibles.

❖​Filtros de accesibilidad: “evitar escaleras”, “solo rutas
con ascensores”, “instrucciones por audio”.
❖​Resultados destacados con etiquetas visuales de
accesibilidad (color verde, icono de silla de ruedas).
❖​Botón grande y centrado para confirmar la ruta y comenzar
la navegación paso a paso.
❖​Opción de escuchar la ruta con un clic.

5
Requerimiento 2: Reportar una incidencia de accesibilidad
Funcionalidades incluidas:

❖​Acceso directo desde la pantalla principal mediante un

botón con icono claro y con texto (“¿Algo no funciona?”).
❖​Geolocalización automática o campo para escribir
manualmente.
❖​Lista de incidencias frecuentes con iconos grandes y
comprensibles.
❖​Posibilidad de añadir una foto, escribir una nota o
dictarla por voz.
❖​Confirmación final con mensaje claro: “¡Gracias por tu
ayuda! Hemos recibido tu reporte”.

Interacciones y Navegabilidad
El prototipo permite navegar entre pantallas, desde el inicio,
al planificador de ruta, al filtro, a la vista de resultados y
al detalle de navegación.

También está conectada toda la sección de reportes, es decir, la

selección del problema, adjuntar contenido y confirmación final
con la opción de iniciar un dictado directamente en la app.

Cada botón, icono o campo tiene retroalimentación visual al

interactuar y los elementos están distribuidos respetando
jerarquía visual y accesibilidad.

6
 Conceptos fundamentales de la Interacción Persona-Ordenador
-​ - - - - - - - - - - - - - - - - - - - - - - - - - - X

En esta etapa, he analizado cómo los seis conceptos básicos de

IPO están presentes en la versión actual de mi prototipo. A
continuación explico cada uno de ellos con ejemplos concretos
dentro de las funcionalidades diseñadas.

1. Metáfora
Aplicado en el icono de la lupa para buscar una ruta.

Utilizar un símbolo que los usuarios ya conocen del mundo físico

o digital ayuda a que entiendan inmediatamente su función. En
este caso, la lupa es reconocida universalmente como símbolo de
búsqueda. No necesita explicación, simplemente se asocia de
forma natural.

2. Affordance
Aplicado en los botones de filtros accesibles (ej. “Evitar
escaleras”, “Instrucciones por audio”).

El diseño de los botones indica claramente que se pueden pulsar.

Tienen forma rectangular, sombreado, y al tocar se deberían
resaltan. Esto invita a interactuar sin necesidad de decirlo
explícitamente.

7
3. Visibilidad
Aplicado en la opción “Reportar incidencia”, ubicada en la
pantalla principal.

Esta función está destacada con un color llamativo y un texto

claro. La intención es que no pase desapercibida porque suele
usarse en momentos de urgencia o frustración. La visibilidad
también mejora con el uso de texto grande y contraste de
colores.

4. Retroalimentación
Aplicado en el envío de un reporte y la confirmación al
planificar una ruta.

Cada vez que el usuario realiza una acción importante, la app

responde con un mensaje claro como “¡Gracias por tu ayuda!” o
“Ruta confirmada”. Esto ayuda a que el usuario sepa que su
acción fue recibida correctamente y que el sistema está
respondiendo.

5. Restricción
Aplicado en el campo de búsqueda, se restringe el uso a
direcciones válidas o puntos geográficos reconocidos.

La idea es que el usuario intenta escribir algo sin sentido o

incompleto, la app no le deja avanzar. Esto evita errores y
malentendidos. También ayuda a guiar la interacción hacia lo
correcto, sin bloquear al usuario.

8
6. Modelo mental
Aplicado en la estructura del flujo: Planificar ruta → Aplicar
filtros → Ver resultados → Confirmar ruta.

El flujo sigue el modelo mental que la mayoría de personas tiene

cuando quiere desplazarse: primero busca, luego filtra (si es
necesario), elige y confirma. Al respetar ese orden, el usuario
se siente cómodo y sabe qué esperar en cada paso.

Enlace al prototipado:

[Link]
de-id=4-213&t=dO4ZV4zIRcMjFMNX-1

9
10