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