1

¡Bienvenidas/os
a UX / UI !
Agenda

Bienvenida

Actividad: Rediseñando la carta

Repaso: Arquitectura de la información

Teoría: site map, card sorting, features

Break

DEMO: ¿Cómo preparo mi presentación?

Cierre

3
Hoja de Ruta
Usted
Está Aquí

SEM 5 SEM 6 SEM 7

· Preparación para · Site map y · Demo Bloque

la entrega 2: card sorting Investigación:
Persona -Benchmarking
· Práctica para
· User flow la entrega 3: -Persona
· Modelos mentales Arquitectura de -Arquitectura de la
la información información

Entrega 2 Entrega 3 Cierre de Bloque

4
Actividad:
Rediseñando la carta
Rediseñando
Consigna
una carta
Vamos a rediseñar este menú de un restaurante de
acuerdo los criterios de todo el equipo.

1. Formar los grupos de trabajo

2. Escribir cada ítem del menú en un post-it
3. Pegar todos los post-its en la pared
4. Agrupar los post-its en categorías y
subcategorías
5. Nombrar esas categorías y subcategorías
6. Entre todos debatir y re acomodar lo que
haga falta
7. Definir y diseñar la nueva organización

6
Puesta en común
Repaso:
Arquitectura de la
Información
Disciplinas troncales
que integran UX

9
¿Qué es Arquitectura
de información (AI)?
Arquitectura de
En términos de experiencia de la información
usuario, la arquitectura de
información consiste en
organizar el contenido de una
interfaz de manera tal que los Usabilidad &
usuarios puedan comprender y Accesibilidad Interacción

encontrar el contenido que

necesitan.

10
Al definir un producto digital y armar la
arquitectura de la información:
● Definimos categorías y subcategorías
● Definimos features (funcionalidades)

11
¿Qué es un site map
(mapa del sitio)?
Site map
Un sitemap (mapa del sitio) es un
diagrama jerárquico que muestra la
estructura de una interfaz.
Sirven para definir la agrupación
(taxonomía) de contenido
relacionado.
Son un paso importante del proceso
de DCU, ya que garantizan que el
contenido se encuentre en lugares
donde los usuarios esperarían
encontrarlo.

13
Site map: ¿para qué?
● Muestra cómo debe estructurarse la
navegación.
● Ayuda a identificar qué contenido generar y
dónde se ubicará.
● Ayuda a mostrar la relación entre las
diferentes páginas.
● Proporciona una estructura sobre la cual
comenzar las estimaciones para el desarrollo.
● Son el primer entregable tangible que
muestra lo que va a crear.

14
Site map: ¿cuándo?
Los sitemaps se generan normalmente
después de haber realizado persona y user
journey, y después de haber concluido el
período de descubrimiento inicial.

Los sitemap muestran lo que hemos aprendido sobre cómo

los usuarios navegan por el sitio, qué tipo de contenido
necesitan para lograr sus objetivos y qué tipo de lenguaje
usan para identificar cosas. Además, también tienen en
cuenta los objetivos del negocio y cualquier contenido que
el negocio requiera para cumplir con su estrategia general.

15
Site map: ¿cómo?
1. Agrupación y etiquetado
En un proyecto nuevo, los contenidos dependen
de los objetivos y la estrategia definida en la
etapa de investigación del proyecto o producto.
En un rediseño se parte de los contenidos
preexistentes y se contrastan con la definición
del proyecto para añadir las modificaciones que
haga falta.

16
Site map: ¿cómo?
2. Definición de la estructura
● Principales elementos de navegación y orden:
menú principal, opciones adicionales en el
header y footer.
● Jerarquización de los contenidos:
cuál es la información principal, qué se
incluirá dentro de cada parte, cuáles son los
niveles de profundidad.
● Etiquetas de las diferentes opciones:
terminología para identificar los contenidos,
tono del proyecto.

17
Site map: ¿cómo?
3. Evaluación de la arquitectura
Una vez definido la arquitectura de la
información, hay que evaluar con usuarios, por
medio de dinámicas como card sorting,
diagramas de afinidad, etc.
Los resultados de la evaluación nos llevarán a
iteraciones sobre la estructura. El proceso de
iteración se puede realizar las veces que sean
necesarias para optimizar al máximo los
resultados finales.

18
DINÁMICAS
Card-sorting (Ordenamiento por tarjetas)
¿Qué es card sorting?

El card sorting es una técnica que permite analizar cómo los usuarios
ordenan y asocian los contenidos, para luego definir la arquitectura de la
información en base a sus modelos mentales.

20
¿Qué es card sorting?

Ventajas Contribuye a descubrir cuál es la mejor forma de organizar la información

Permite definir las etiquetas del producto o servicio interactivo.
Es de fácil, rápida y económica implementación
Garantiza una arquitectura de la información basada en las expectativas
de los usuarios, lo que facilita que encuentren lo que buscan cuando
utilicen el producto.

21
Tipos de Card sorting

22
Card sorting

Abierto
Se les pide a los participantes que organicen
los temas/contenidos de su sitio/app en
grupos que tengan sentido para ellos y que
luego nombren cada grupo de la manera en
que sientan que describe con mejor
precisión el contenido.

23
Card sorting

Reverso (Tree testing)

Se prueban menús y jerarquías. Los usuarios tienen
una tarea y se les pide que identifiquen en qué lugar
creen que encontrarían la información que necesitan.

Este tipo de card sorting busca evaluar si la

estructura que se propone es intuitiva y permite
encontrar con facilidad los contenidos buscados; si el
rotulado (categorización) es inteligible y se relaciona
de manera óptima con los contenidos.

24
Card sorting

Cerrado
Se les pide a los participantes que agrupen los
temas/secciones del sitio/app en categorías
predefinidas.

25
DINÁMICAS
Features (elementos funcionales)
¿Qué son los features?

Son las funciones específicas de

nuestro producto. Dependiendo del tipo
y escala del producto, esta lista puede
ser más simple o más exhaustiva.

27
Ejemplos de
features
Ver info del
contacto
Hacer llamada

Sacar foto Grabar audio

Abrir menú de Emojis

28
Ejemplos de guardar
features ocultar

dejar de seguir

notificaciones

me gusta

29
“El diseño no puede
rescatar un mal
contenido.”
Edward Tufte
Profesor de la Universidad de Yale, dicta cursos sobre evidencia estadística y
diseño de información y de interfaces.
Recursos
Recursos Si te quedaste con ganas de más...
- Artículo: The Purpose of Site Maps and Other
Design Deliverables
- Libro: Card Sorting: Designing Usable
Categories
- Herramienta para realizar flows & site maps:
https://flowmapp.com/

32
 ¡BREAK!

Ph. Credit: Drew Coffmann

DEMO:
¿Cómo preparo mi
presentación?
No pienses la DEMO como
evaluación.
- Es practicar para cuando presentes en el mundo profesional.
- Es reflexionar sobre la práctica.
- Es retroalimentar tu perspectiva con otras.
- Es compartir y abrirse para mejorar.

¡Y es una oportunidad para celebrar los logros!

35
LA GUÍA COMPLETA
PARA NO ENTRAR EN
PÁNICO

36
“Dime lo que puedes
hacer y muéstramelo.”
- Dr. Kwegyir Aggrey
En su presentación, buscamos que:

Nos cuenten y que sobre todo, ¡NOS MUESTREN!

38
La regla de las 3 Ps:
1 PREPARAR

2 PRACTICAR

3 PRESENTAR

39
La regla de las 3 Ps:
1 PREPARAR

2 PRACTICAR

3 PRESENTAR

40
1 PREPARAR

Sugerimos que armen un esqueleto de presentación

(Word, Excel, etc.) con lo que van a presentar teniendo
en cuenta los siguientes puntos:

¿A quién?

¿Qué?

¿Cómo?

¿Tiempo?

41
1 PREPARAR

¿A quién? Le presentan a la clase y al equipo docente.

¿Qué les puede servir a ellos/as de su
¿Qué?
experiencia en este proyecto?
¿Cómo?

¿Tiempo?

42
1 PREPARAR

¿A quién?

¿Qué? Viaje
¿Con qué obstáculos te encontraste?
¿Cómo? ¿Qué decisiones tomaste?
¿Qué quisiste lograr?
¿Tiempo? Puerto de llegada
¿Cuáles son los resultados que alcanzaste?
¿Qué te gustaría mejorar?
¿Qué aprendiste?

43
1 PREPARAR

¿A quién?

¿Qué? *TIP: usa fotos, gráficos, diagramas...en fin,

elementos visuales.
¿Cómo?
¡El 65% de las personas son
¿Tiempo?
pensadores puramente
visuales!

44
1 PREPARAR

¿A quién?

¿Qué?

¿Cómo? ¿Presento
¿Tiempo? - primero el resultado final y luego el
proceso o
- cuento el proceso cronológicamente
hasta el resultado al final?

45
1 PREPARAR

¿A quién?
ESTRUCTURA
¿Qué? VISUAL

apoya la
¿Cómo? historia

¿Tiempo?

46
1 PREPARAR

¿A quién?
ESTRUCTURA MENSAJE
¿Qué? VISUAL

apoya la cuenta la
¿Cómo? historia historia

¿Tiempo?

47
1 PREPARAR

¿A quién?
ESTRUCTURA MENSAJE ÁGIL
¿Qué? VISUAL

apoya la cuenta la hazla dinámica y

¿Cómo? historia historia atrapante

¿Tiempo?

48
1 PREPARAR

¿A quién?

¿Qué?

¿Cómo?

¿Tiempo? Cada uno/a tendrá

10 minutos como máximo para exponer
(luego podremos hacerle preguntas y/o
darle feedback).

49
La regla de las 3 Ps:
1 PREPARAR

2 PRACTICAR

3 PRESENTAR

50
2 PRACTICAR

51
La regla de las 3 Ps:
1 PREPARAR

2 PRACTICAR

3 PRESENTAR

52
3 PRESENTAR

Emoción Si demuestras entusiasmo por tu trabajo (sin

importar a lo que hayas llegado), vas a contagiar
Actitud al público.

Intención Conecta con tu entorno. Aunque te dé vértigo,

miedo y timidez, ¡mira a los ojos!

*TIP: decir en voz alta “estoy muy

nervioso/a” te ayudará a relajarte.

53
3 PRESENTAR

Emoción

Actitud Si pretendes diseñar tu

Intención presentación con una
determinada emoción,
¡acompañala con tu
cuerpo, gestos y cara!

54
3 PRESENTAR

Emoción

Actitud

Intención ¿Buscas feedback del público?

¡Pídelo al terminar!

55
Cómo seguimos
Cómo seguimos

Usted
Está Aquí

SEM 5 SEM 6 SEM 7

· Preparación para · Site map y · Demo Bloque

la entrega 2: card sorting Investigación:
Persona -Benchmarking
· Práctica para
· User flow la entrega 3: -Persona
· Modelos mentales Arquitectura de -Arquitectura de la
la información información

Entrega 2 Entrega 3 Cierre de Bloque

57
Próximos pasos

1. Traigan las entregas 1 y 2 para trabajar sobre la

entrega 3
2. Repasen los hallazgos de la investigación
3. Si todavía no hicieron entrevistas, ¡háganlas!

58
59