Parte 1: Información Curso

Código-Curso: 12052 – Arquitectura de la Información

Tiene como prerrequisito: Diagramación y Tipografía
Programa-Semestre: Diseño de Medios Interactivos – Quinto Semestre
Intensidad semanal: 6 horas
Créditos: 3

Objetivo General: Al finalizar el curso los estudiantes estarán en capacidad de diseñar y evaluar interfaces que
permitan el consumo de información y que impacten positivamente en la experiencia del usuario a partir del análisis
de su perfil y su contexto.

Parte 2: Objetivos terminales

1. Aplicar métodos de investigación para realizar análisis del usuario.
2. Diseñar interfaces centradas en el usuario para evaluar la usabilidad.
3. Aplicar métodos de evaluación a interfaces para validar su impacto positivo en la experiencia del usuario.

Parte 3: Objetivos Específicos

Unidad 1: Análisis de Usuarios
1.1. Definir los conceptos de diseño interactivo, tales como: UX, UI, Diseño centrado en el usuario, arquitectura
de la información y usabilidad.
1.2. Aplicar métodos de investigación para entender a los usuarios.
1.3. Explicar los principios de usabilidad.

Unidad 2: Diseño y documentación de Interfaces

2.1. Explicar los patrones de interfaz de usuario.
2.2. Diseñar arquitecturas, flujos de usuario, wireframes y prototipos para generar interfaces de usuario usando
la metodología de Atomic Design.
2.3. Maquetar interfaces interactivas, usando Frameworks de maquetación.

Unidad 3: Evaluación de Interfaz

3.1. Evaluar interfaces de usuario usando las técnicas de evaluación heurística, test con usuarios y recorrido
cognitivo.
3.2. Aplicar métricas de evaluación de productos interactivos.
Parte 4: Planeador

Objetivo
Unidad Sesión Tema Actividad en Clase Actividad después de clase
Especifico
1. Presentación del curso 1. Preparar Lectura AI
2. Presentación reglas del curso 2. Preparar Lectura El
UX - UI 3. Presentación UX - UI - DCU arquitecto de Información
1 1.1. Definir los Diseño centrado en 3. Leer Experiencia de
conceptos de el usuario Usuario / Yusef Hassan
diseño interactivo, 4. Leer Atomic Design / Brad
tales como: UX, UI, Frost
Diseño centrado en Arquitectura de la Definición de arquitectura de Preparar Lectura ppios
el usuario, Información: Diseño información, esquemas de Schneiderman
arquitectura de la de información, organización
información y esquemas de
2
usabilidad organización de
información,
jerarquías,
etiquetado
1. Presentación ppios de Preparar Lecturas ppios
Principios de Shneiderman Nielsen
3 Usabilidad 2. Ejercicio: Identificar Realizar informe de
Shneiderman problemas de usabilidad usabilidad de un sitio Web
1.2. Aplicar métodos asignado.
de investigación 1. Presentación ppios de Nielsen Preparar Lecturas
para entender a los
1
2. Ejercicio: Identificar Investigación contextual,
usuarios problemas de usabilidad Etnografía. Insights de
Principios de
4 usuario.
Usabilidad Nielsen
Preparar exposiciones
grupales de técnicas de
investigación con usuarios.
1. Investigación Exposiciones: Preparar exposiciones
contextual - I. Contextual grupales de técnicas de
5 2. Métodos - Métodos coparticipativos investigación con usuarios.
coparticipativos - Entrevista
3. Entrevista
Exposiciones: Diseñar user personas para
- User personas una app X
1.3. Explicar los
1. User personas - Escenarios Escribir un escenario que
6 principios de
2. Escenarios describa la situación
usabilidad
problema que pueda resolver
un producto interactivo.
Exposiciones: Preparar evaluación unidad 1
1. Journey map - Journey map
7 - Cardsorting
2. Cardsorting
Ejercicios Cardsorting
Evaluación: Parcial escrito de Lecturas: Diseño UI
8 conceptos de diseño interactivo.
1. Presentación Flujos de Terminar el flujo y presentarlo
usuario

2 9 Flujos de usuario
2. Ejercicio: Diseñar flujos de
usuario de X productos
interactivos.
3. Ejercicio: Proponer un flujo de
 interacción para un producto X

1. Presentación Wireframes 1. Realizar un informe con los

2.1. Explicar los 2. Ejercicio: Diseñar wireframes flujos hallados.
patrones de interfaz de X productos interactivos. 2. Realizar un informe con el
10 Wireframes
de usuario. 3. Ejercicio: Diseñar los flujo de interaccion del
wireframes del producto de producto X
propuesta en la clase de flujos.
1. Presentación Patrones 1. Presentar un informe
11 2. Ejercicio: Recopilar los aplicando patrones de
Patrones de interfaz
patrones de interfaz de usuario interacción para mejorar la
de usuario
12 en sitios web populares a través app propuesta en la clase de
de capturas. flujos.
Diseñar un mapa conceptual
1. Quiz escrito Atomic Design
13 propio que explique cómo
2. Presentación Atomic Design
funciona el AD
2.2. Diseñar
arquitecturas, flujos
de usuario, 1. Hallar en las principales redes
wireframes y sociales la estructura base de
14 prototipos para AD (Atomic Design)
Diseño UI - Atomic
generar interfaces 2. Realizar una presentación con
Design
de usuario usando el material hallado.
la metodología de
Atomic Design.
1. Usar soft grafico para diseñar Replicar la interfaz gráfica de
15 interfaces una web asignada.
2. Diseñar la interfaz del Diseñar y montar el proyecto
16 producto sobre la metodología en Behance como entrega
Atomic Design del proceso.
17 2.3. Maquetar HTML
18 interfaces Maquetar interfaces CSS Ejercicios de maquetación
interactivas, usando interactivas (HTML -
19 Ejercicios de maquetación HTML + CSS
Frameworks de CSS)
20 maquetación. Maquetar
21 Diseñar un landing page
Usar FrameWorks 1. Presentación Frameworks
usando un framework de
22 de maquetación 2. Ejercicio de aplicación
maquetación
23 Formatos para documentación
Documentación de
Ejercicio: Organizar Lecturas Evaluación con
desarrollo de
entregable/documentación del usuarios.
24 interfaces
producto propuesto.
Evaluación Ejercicio: entregar el informe
Heurística Presentación evaluación
25 de evaluación del producto X
Heurística y recorrido cognitivo.
Recorrido cognitivo de la unidad 2

3 26
3.1. Evaluar
interfaces de
usuario usando las Test AB
Presentación TEST AB
Herramientas para desarrollar el
Aplicar Test AB al producto
de la unidad 2
test Lectura: Caso Photoshop
técnicas de
Realizar ejercicios de test AB Test con usuarios
evaluación
 heurística, test con
usuarios y recorrido
cognitivo.

27 1. Quiz escrito Test Caso:

Photoshop
28
2. Presentación Test con
3.2. Aplicar métricas usuarios Realizar Test con usuarios
de evaluación de Test con usuarios
29 3. Realizar un test con usuarios del producto de la unidad 2
productos en el aula
interactivos. 4. Informe de preparación
30 5. Informe de resultados
31 Presentación métricas
Métricas: ROI, Informe: métricas aplicadas
Aplicación de métricas a
32 HEART, NPS de un producto X
productos populares

Parte 5: Evaluación

Porcentaje dentro de
Evaluación Unidades que cubre
la calificación global
Corte 1 30%
Informe de usabilidad 5% 1
Exposición técnicas de investigación 5% 1
Parcial Conceptos 20% 1
Corte 2 30%
Flujo de usuarios 2
Wireframes 2
Patrones 2
5%
Quiz Atomic Design 2
Esquema Atomic Design 2
AD en redes sociales Presentación 2
Replica de una interfaz 2
5%
Behance de atomic design de un producto X 2
Maquetación 1 2
Maquetación 2 10% 2
Maquetación con FW 2
Documentación de todo el proceso 10% 2
Corte 3 40%
Informe evaluación de un producto 3
Test AB 10% 3
Métricas 3
Test con usuarios 10% 3
Trabajo Final 20% 1,2,3
Bibliografía
 Hassan, Yusef. Experiencia de Usuario: Principios y Métodos. 2015
 Knemeyer, Dirk & Svoboda, Eric. User Experience - UX
 Marc Hassensahl. User Experience and Experience Design
 Shneiderman, Ben. 8 reglas de oro de Usabilidad
 Nielsen. 10 Usability Heuristics for User Interface Design
 Randall, Dave & Rouncefield, Mark. Ethnography
 Nielsen, Lene. Personas
 Hudson, William. Card Sorting
 Wong Euphemia. Principle of Consistency and Standards in User Interface Design
 Soegaard, Mads. Visual Hierarchy: Organizing content to follow natural eye movement patterns
 Soegaard, Mads. The Grid System: Building a Solid Design Layout
 Eelke, Folmer. Interaction Design Patterns
 Brad Frost. Atomic Design
 Fabio, Muniz. An Introduction To Heuristic Evaluation
 Heuristic Evaluation of User Interfaces
 Soren Lauesen & Mimi Pave Musgrove. Versus Usability Testing
 Google’s HEART Framework for Measuring #UX
 Rodden Kerry, Hutchinson Hilary, & Fu Xin. Measuring the User Experience on a Large Scale: User-Centered
Metrics for Web Applications