Este documento presenta una serie de actividades relacionadas con el diseño de interfaces de usuario y la interacción humano-computadora. La actividad guía a los estudiantes a través de tres partes principales: 1) analizar la experiencia del usuario y principios de diseño, 2) diseñar prototipos de interfaces y 3) evaluar los prototipos con usuarios reales.

1. Maestros Online www.maestronline.com
Solicita una cotización a través de nuestros correos
Parte 1. La
Maestros Online Diseño interactivo Grupo de problemas
Servicio de asesorías y solución de ejercicios
Envía tus actividades a ciencias_help@hotmail.com

2. Maestros Online www.maestronline.com
interacción 1. De manera individual define o describe con tus palabras qué es interacción, deberás utilizar la dinámica de Twitter; es decir, tu definición deberá ser redactada con un máximo de 140 caracteres. 2. Reúnanse en equipo e identifiquen 10 elementos físicos con los que el hombre interactúe y su interfaz; por ejemplo: la puerta del salón cuya interfaz sería la perilla. De estos elementos, ¿cuáles creen que son más significativos en la interacción humana de la vida diaria? 3. Elijan un dispositivo electrónico (que no sea la computadora o laptop) con lo que interactúan más tiempo, y contesten lo siguiente: a. ¿Cuál es el servicio que ofrece? b. ¿Cuál es el mecanismo que utilizan para darle instrucciones? c. ¿Cuál es el mecanismo que utiliza el dispositivo para dar el servicio que se requiere? d. ¿Cuáles son sus ventajas y desventajas en su uso? Parte 2. Mejorando la interacción 4. Sigan trabajando en equipos. 5. Entren a la siguiente página y elijan 5 artículos con diseños inadecuados de interacción: http://www.baddesigns.com/examples.html En caso de que no cuenten con conexión a Internet piensen diseños inadecuados de interacción. 6. Elaboren una presentación (libre) en donde muestren estos 5 artículos y por qué muestran diseños inadecuados de interacción, agreguen 5 artículos más que no se muestren en la página y mencionen cómo podrían mejorarlos. Parte 3. Elementos y estilos de interacción 7. Seleccionen una Tablet, computadora o celular que lleven consigo. 8. Elaboren una presentación en donde mencionen los elementos y estilos de interacción que proponen para que el objeto seleccionado mejore la interacción que tiene con las personas. Nota: Considera que tu actividad debe estar documentada (proceso) y fundamentada. Entregable(s):  Documento que integre la definición de interacción, el análisis de un dispositivo y los elementos físicos de interacción cotidiana.  Presentación libre (video, power point, boceto, animación, etc.) de objetos que presentan una interacción no adecuada y los elementos y estilos de interacción de un objeto.

3. Maestros Online www.maestronline.com
Parte 1. Analizando la interfaz 1. ¿Alguna vez has visitado una página web que resulte cansado para la vista leerla, buscar la información o inclusive es difícil encontrar lo que estás buscando? Menciona al menos 3 páginas que recuerdes que tengan esta característica y en una presentación menciona cuáles son los principios de agrupación que no se están cumpliendo. 2. Ahora menciona páginas web que cumplan con estos principios, agrega estas páginas a tu presentación y señala cuáles principios de agrupación cumple. 3. ¿Para ti cuáles son los principios de agrupación que consideres más importantes y por qué? Enlístalos. Parte 2. Análisis de necesidades 4. Reúnanse en equipos. 5. Realicen un análisis de un sistema cuyo principal objetivo es que ayude al alumno de la Universidad TecMilenio a llevar la agenda de un semestre con carga completa. a. Pónganse en los zapatos del usuario y listen de forma individual lo que ustedes esperarían del sistema. b. Elijan la técnica de recolección de información que crean sea la más adecuada. No olviden documentar por qué eligieron esa técnica en particular. c. Preparen con anticipación la información que deseen recabar, antes de iniciar con la técnica de recolección elegida. d. Pregunten a al menos 15 alumnos de su campus qué funciones desearían que tuviera este sistema. e. Documenten la información recabada. 6. Una vez realizado el ejercicio realicen lo siguiente: a. Listen las funciones requeridas por el usuario. b. Identifiquen cuántos de ellos se enfocaron más al diseño (estética) que a la funcionalidad esperada. c. ¿Qué fue lo más difícil del ejercicio de análisis? d. ¿La opinión del usuario coincidió con lo que ustedes inicialmente habían pensado? Parte 3. Diseñando la interfaz 7. Tomando como base los resultados del análisis de necesidades elijan 5 funciones que consideren sean las más utilizadas en el sistema de la agenda del alumno de la Universidad TecMilenio. Para cada una de estas funciones diseñen un ícono que permita al usuario entender la función con solo su representación gráfica. 8. Diseñen la pantalla principal de la interfaz de la agenda, pueden utilizar un programa de dibujo (Paint, Photoshop, Flash, etc.). Recuerden tomar en cuenta los principios de

4. Maestros Online www.maestronline.com
agrupación, además deberán definir el tipo de usuario y la accesibilidad que tendrá; es decir, ¿podrá utilizarla un alumno con capacidades diferentes? Nota: Considera que tu actividad debe estar documentada (proceso) y fundamentada. Documento que muestre los aspectos básicos del usuario en su entorno para crear y desarrollar nuevos productos y servicios. Instrucciones para realizar evidencia:80% 1. Elige un dispositivo electrónico (por ejemplo, celular, calculadora, televisión, etc.) y describe cómo ha evolucionado a través del tiempo hasta la actualidad. 2. Escoge 5 factores humanos que impacten en el diseño interactivo, y describe por qué consideras que el diseñador los debe tener en cuenta. 3. Menciona las ventajas y desventajas de las técnicas de cómo obtener información, y sugiere en qué situación se utilizarían mejor. 4. Describe una aplicación que tenga un enfoque para 2 perfiles de usuario. Explica y utiliza pantallas de la aplicación. Parte 1. Enfoque al usuario 1. De manera individual explica con tus propias palabras por qué un diseñador debe escuchar al usuario. 2. Selecciona una página web de búsqueda de información con la que estás familiarizado o te guste trabajar. Puede ser para buscar películas, música, viajes, etc. 3. Describe cómo ha sido tu experiencia de usuario: a. ¿Encuentras la información que estás buscando fácilmente? b. ¿Te gusta la página, sus colores, organización y menús? c. Si requieres hacer una búsqueda dentro de la página, ¿encuentras la sección para hacerlo? d. ¿Te sirven los resultados que te arroja? 4. En equipo, compartan los hallazgos de su actividad. ¿Son similares sus experiencias como usuarios? ¿Cuál de las páginas les resultó mejor como usuarios? Parte 2. Ciclo de vida del diseño interactivo 5. Reúnanse en equipo y lean la siguiente situación: El Ejército Mexicano necesita un sistema que les ayude a registrar las actividades realizadas en situaciones de desastres naturales. 6. Definan un bosquejo del ciclo de vida del diseño interactivo con las siguientes secciones: a. Establezcan la estrategia del diseño. b. Propongan un mecanismo de recopilación de datos. c. Generen al menos 3 alternativas.

5. Maestros Online www.maestronline.com
d. Seleccionen una de ellas y diseñen un prototipo. e. Para evaluar su diseño, presenten el trabajo a otro equipo. Nota: para trabajar la siguiente parte de la actividad lleva a clase información sobre tres páginas web en donde haya que llenar la forma. Las formas deben de solicitar al menos 10 datos diferentes. Parte 3. Comunicación con el usuario 7. Continúen trabajando con su equipo. 8. Compartan la información sobre las formas de las páginas web que previamente investigaron. 9. Llenen las formas, tanto de manera correcta como con datos erróneos u omisión de datos obligatorios. 10. Realicen una tabla comparativa en donde: a. Identifiquen los atributos de una comunicación efectiva de las tres páginas web. b. Comparen los mensajes que arrojan cada uno de los formularios cuando faltan datos o son incorrectos. c. Evalúen si existe una comunicación adecuada o inadecuada y expliquen por qué. Nota: Considera que tu actividad debe estar documentada (proceso) y fundamentada. Entregable(s): 1. Documento que integre la importancia de considerar al usuario y la descripción de las facetas de la experiencia del usuario. 2. Documento con el bosquejo del ciclo de vida del diseño interactivo de un sistema para el Ejército Mexicano. 3. Tabla comparativa con la forma en que aplican los atributos de la comunicación efectiva en las formas. Parte 1. Diseño de contenido 1. De manera individual recuerda 3 páginas de Internet de algún tema que te guste. Puede ser de cómics, deportes, música, tu artista favorito, etc. 2. Describe qué tipo de contenido encuentras en cada una. 3. ¿Recuerdas cómo está organizada la información que presenta cada página? Responde: a. ¿Cuál prefieres y por qué? b. ¿Cómo están organizados el texto y las imágenes?

6. Maestros Online www.maestronline.com
c. ¿Puedes realizar acciones en la página? ¿Qué tipo de acciones? 4. Ahora en las mismas páginas, ¿hay secciones que te permitan llenar información o de ayuda? Responde lo siguiente: a. ¿Funcionan bien? b. ¿Te ayuda a encontrar información en la página? Parte 2. Diseño visual 5. Reúnanse en equipos. 6. Seleccionen un tema para diseñar una pantalla de página de Internet y elijan la personalidad que quieren transmitir con su página. 7. Diseñen una pantalla incorporando al menos 3 propiedades de la composición visual según Galitz. Pueden utilizar texto lorem ipsum para llenar el contenido. 8. Agreguen elementos que incluyan color seleccionando zonas del contenido (background y foreground). 9. Una vez diseñada la pantalla, tómenla como base y generen 3 pantallas más (del mismo tema), aplicando cambios a la tipografía, a los colores y al espacio. 10. Comparen las cuatro pantallas y describan si cumplen con las recomendaciones de los autores estudiados en el tema. Parte 3. Diseño de navegación 11. Con el mismo equipo de trabajo retomen las cuatro páginas que hicieron en la parte 2. 12. Generen una página homepage donde incluyan un mecanismo de navegación que pueda enlazar las cuatro páginas previamente elaboradas. a. Determinen qué modelo de navegación utilizarán. b. Seleccionen una estructura de menú que pueda servir para estructurar las páginas. c. Genera un menú y un mapa del sitio utilizando los títulos de las páginas. Nota: Considera que tu actividad debe estar documentada (proceso) y fundamentada. Entregable(s): 1. Presentación en PowerPoint® donde describas los tipos de disposición visual (layout) de cada una de las páginas e incluyas los tipos de ayuda contextual. 2. Archivo HTML con el diseño de las cuatro páginas con diferencias en tipografía, color y espacio. 3. Archivo HTML con el diseño de una página con un menú de navegación y un mapa del sitio que ligue las páginas previamente diseñadas. Diseño de una interfaz centrada en el usuario, partiendo de los principios de la Interacción Humano-Computadora.

7. Maestros Online www.maestronline.com
Instrucciones para realizar evidencia:80% 1. Selecciona una empresa de tu interés a la que quieras hacer una página web y realiza lo siguiente: a. Selecciona las facetas de la experiencia del usuario que vas a utilizar en la página. Justifica tu elección. b. Diseña una forma con al menos 10 controles (6 obligatorios). Incluye el mensaje de error que debe de aparecer, respetando los principios de comunicación. c. Diseña la página siguiendo los 5 pasos del proceso de diseño de contenidos. d. Diseña la pantalla homepage donde presentes la página de la empresa, utilizando los elementos de tipografía, color y espacio, así como el sistema de navegación. Si es necesario, puedes incluir pantallas adicionales. Parte 1. Boceto para Video-Toys La empresa de videojuegos “Video-Toys” desea generar un portal de Internet para su línea de videojuegos infantiles. Por tal motivo, te ha contratado para que le presentes algunas ideas que se puedan utilizar para ese propósito. Te brinda la siguiente información: Las categorías utilizadas en esta línea de productos son:  Familiares (para niños de 3 a 5 años)  Educativos (para niños de 6 a 8 años)  Infantiles (de 8 a 10 años) Para la categoría de Familiares, Video-Toys ha creado videojuegos para colorear, armado de rompecabezas y reconocimiento de figuras geométricas. En la categoría Educativos se encuentran los juegos que ayudan a los niños a leer, operaciones algebraicas, y creación de sus propias historietas. Finalmente, en la categoría de Infantiles ha colocado aquellos que están relacionados con destreza y entrenamiento. 1. De manera individual, realiza tres dibujos o bocetos donde puedas demostrar tres posibles formas para el portal principal (página web) de la línea de videojuegos infantiles de Video-Toys. 2. Genera una presentación que incluya cada boceto agregando texto explicativo. Parte 2. Storyboard para Video-Toys 3. Reúnanse en equipos y revisen el trabajo individual realizado en la Parte 1. Ofrezcan retroalimentación a sus compañeros sobre los elementos incluidos en cada boceto y seleccionen 3 bocetos que consideren tengan las mejores características.

8. Maestros Online www.maestronline.com
4. Desarrollen un storyboard que permita explicar la interacción que podrían tener los niños que tengan acceso al portal de “Video-Toys”, explicando cómo podrían interactuar con cada una de las categorías propuestas en el caso. Parte 3. Prototipo de alta fidelidad 5. Con su equipo, utilicen Fireworks para generar un prototipo diseñado para una tableta electrónica o Smartphone que demuestre cómo sería la versión para estos dispositivos. Recuerden incorporar al menos tres escenarios posibles. Nota: Considera que tu actividad debe estar documentada (proceso) y fundamentada. Entregable(s):  Presentación con los bocetos y el storyboard.  Archivo Fireworks con el prototipo funcional. Parte 1. Plan de evaluación 1. En equipo seleccionen uno de los prototipos que realizaron para la empresa de videojuegos “Video-Toys” (Actividad 5). 2. Para el prototipo seleccionado elaboren un plan de evaluación, el cual debe contener los siguientes puntos: a. Objetivo b. Alcance c. Cronograma d. Documentación e. Plan de comunicación f. Cierre y lecciones aprendidas Condiciones necesarias:  Recuerden que al menos deben participar 5 usuarios que puedan dar retroalimentación del diseño.  Deben establecer los criterios de evaluación tanto de usabilidad como de accesibilidad.  La evaluación deberá hacerse en un lugar controlado. Parte 2. Ejecución del plan de evaluación 3. Sigan trabajando en equipo y ejecuten el plan de evaluación generado en la Parte 1. 4. Recuerden utilizar los mecanismos necesarios para documentar las impresiones de los usuarios.

9. Maestros Online www.maestronline.com
5. Sometan el prototipo a una herramienta de Accesibilidad y obtengan los problemas detectados. Parte 3. Análisis de resultados y mejora continua 6. En equipo revisen los resultados generados en la Parte 2. 7. Analicen qué aspectos del prototipo deben cambiar. 8. Categoricen por severidad los problemas encontrados. 9. Discutan qué cambios se deben realizar para mejorar la usabilidad y accesibilidad. 10. Realicen los cambios necesarios al prototipo. Nota: Considera que tu actividad debe estar documentada (proceso) y fundamentada. Entregable(s): 1. Plan de evaluación de usabilidad y accesibilidad. 2. Evidencia de las pruebas de evaluación generadas y sus resultados. 3. Diseño del prototipo (antes y después de la evaluación). Prototipo innovador para crear un producto con un diseño interactivo enfocado a un perfil de usuario específico. Instrucciones para realizar evidencia:80% 1. Selecciona una empresa de supermercado para la realizar la evidencia de este módulo. 2. Con base en tu selección, lleva a cabo lo siguiente: a. Elabora un prototipo de baja fidelidad (boceto, prototipo en papel o storyboard) de un sistema enweb para la compañía que permita dar a conocer sus opciones de e-commerce y ofertas de la semana. b. Elabora un prototipo de alta fidelidad, incluyendo al menos 3 escenarios, para su departamento de comidas preparadas para eventos. c. Evalúa el prototipo de alta fidelidad, considerando elementos de usabilidad y accesibilidad.