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.
Parte 4: Planeador
Unidad Sesión Especifico Objetivo Tema Actividad en Clase Actividad después de clase
1
1 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 UX - UI Diseño centrado en el usuario
1. Presentación del curso 2. Presentación reglas del curso 3. Presentación UX - UI - DCU
1. Preparar Lectura AI 2. Preparar Lectura El arquitecto de Información 3. Leer Experiencia de Usuario / Yusef Hassan 4. Leer Atomic Design / Brad Frost 2 Arquitectura de la Información: Diseño de información, esquemas de organización de información, jerarquías, etiquetado Definición de arquitectura de información, esquemas de organización
Preparar Lectura ppios Schneiderman
3
1.2. Aplicar métodos de investigación para entender a los usuarios Principios de Usabilidad Shneiderman 1. Presentación ppios de Shneiderman 2. Ejercicio: Identificar problemas de usabilidad
Preparar Lecturas ppios Nielsen
Realizar informe de usabilidad de un sitio Web asignado.
4 Principios de Usabilidad Nielsen
1. Presentación ppios de Nielsen 2. Ejercicio: Identificar problemas de usabilidad Preparar Lecturas Investigación contextual, Etnografía. Insights de usuario. Preparar exposiciones grupales de técnicas de investigación con usuarios. 5
1. Investigación contextual 2. Métodos coparticipativos 3. Entrevista Exposiciones: - I. Contextual - Métodos coparticipativos - Entrevista Preparar exposiciones grupales de técnicas de investigación con usuarios.
6 1.3. Explicar los principios de usabilidad 1. User personas 2. Escenarios Exposiciones: - User personas - Escenarios
Diseñar user personas para una app X
Escribir un escenario que describa la situación problema que pueda resolver un producto interactivo. 7 1. Journey map 2. Cardsorting
Exposiciones: - Journey map - Cardsorting Ejercicios Cardsorting
Preparar evaluación unidad 1
8
Evaluación: Parcial escrito de conceptos de diseño interactivo. Lecturas: Diseño UI
2
9 Flujos de usuario1. Presentación 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 10 2.1. Explicar los patrones de interfaz de usuario. Wireframes 1. Presentación Wireframes 2. Ejercicio: Diseñar wireframes de X productos interactivos. 3. Ejercicio: Diseñar los wireframes del producto de propuesta en la clase de flujos.
1. Realizar un informe con los flujos hallados.
2. Realizar un informe con el flujo de interaccion del producto X
11
Patrones de interfaz de usuario
1. Presentación Patrones 2. Ejercicio: Recopilar los patrones de interfaz de usuario en sitios web populares a través de capturas.
1. Presentar un informe aplicando patrones de interacción para mejorar la app propuesta en la clase de flujos.
12 13
Diseño UI - Atomic Design
1. Quiz escrito Atomic Design 2. Presentación Atomic Design
Diseñar un mapa conceptual propio que explique cómo funciona el AD 14 2.2. Diseñar arquitecturas, flujos de usuario, wireframes y prototipos para generar interfaces de usuario usando la metodología de Atomic Design.
1. Hallar en las principales redes sociales la estructura base de AD (Atomic Design)
2. Realizar una presentación con el material hallado.
15 1. Usar soft grafico para diseñar interfaces Replicar la interfaz gráfica de una web asignada. 16
2. Diseñar la interfaz del producto sobre la metodología Atomic Design
Diseñar y montar el proyecto en Behance como entrega del proceso. 17 2.3. Maquetar interfaces interactivas, usando Frameworks de maquetación. Maquetar interfaces interactivas (HTML - CSS) HTML Ejercicios de maquetación HTML + CSS 18 CSS 19 Ejercicios de maquetación 20 Maquetar 21 Usar FrameWorks
de maquetación 1. Presentación Frameworks 2. Ejercicio de aplicación
Diseñar un landing page usando un framework de maquetación 22 23 Documentación de desarrollo de interfaces
Formatos para documentación Ejercicio: Organizar
entregable/documentación del producto propuesto.
Lecturas Evaluación con usuarios.
24
3
25
Evaluación
Heurística Presentación evaluación Heurística y recorrido cognitivo.
Ejercicio: entregar el informe de evaluación del producto X de la unidad 2
Recorrido cognitivo 26
3.1. Evaluar interfaces de usuario usando las técnicas de evaluación
Test AB
Presentación TEST AB Herramientas para desarrollar el test
Realizar ejercicios de test AB
Aplicar Test AB al producto de la unidad 2
Lectura: Caso Photoshop Test con usuarios
heurística, test con usuarios y recorrido cognitivo.
27
Test con usuarios
1. Quiz escrito Test Caso: Photoshop
2. Presentación Test con usuarios
3. Realizar un test con usuarios en el aula
4. Informe de preparación 5. Informe de resultados
Realizar Test con usuarios del producto de la unidad 2 28 29 3.2. Aplicar métricas de evaluación de productos interactivos. 30 31 Métricas: ROI, HEART, NPS Presentación métricas Aplicación de métricas a productos populares
Informe: métricas aplicadas de un producto X
32
Parte 5: Evaluación
Evaluación Porcentaje dentro de la calificación global Unidades que cubre
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 5% 2 Wireframes 2 Patrones 2
Quiz Atomic Design 2
Esquema Atomic Design 2
AD en redes sociales Presentación 2
Replica de una interfaz 5% 2
Behance de atomic design de un producto X 2 Maquetación 1
10%
2
Maquetación 2 2
Maquetación con FW 2
Documentación de todo el proceso 10% 2
Corte 3 40%
Informe evaluación de un producto
10%
3
Test AB 3
Métricas 3
Test con usuarios 10% 3
