El documento proporciona instrucciones para varias actividades relacionadas con el diseño de interfaces de usuario y sitios web. Se pide diseñar prototipos de baja y alta fidelidad para una empresa de videojuegos infantiles, crear perfiles de usuario, y analizar ejemplos de navegación y diseño de páginas web. También incluye instrucciones para evaluar la usabilidad y accesibilidad de los prototipos.

1. Maestros Online www.maestronline.com
Solicita una cotización a través de nuestros correos
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
Actividad 1: Interacción con objetos comunes Instrucciones: 1. Define con tus propias palabras el término interacción. 2. Identifica 10 elementos físicos con los que el hombre interactúa; por ejemplo: la puerta es un objeto que nos permite entrar o salir de un lugar físico, y la interfaz que utilizamos para hacer uso de ella es la perilla. ¿Identificas los elementos de interacción de una bicicleta? Puedes apoyarte de fotos de estos objetos de tu casa o imágenes tomadas de Internet. 3. Entra a la siguiente página y elige 5 artículos o señales con diseños inadecuados de interacción: http://www.baddesigns.com/examples.html a. Explica con tus palabras por qué se considera como un diseño inadecuado. b. Busca en Internet cinco artículos parecidos pero con un buen diseño, y realiza una comparación. c. Con base en la comparación, menciona cuáles son los elementos y estilos que mejoran la interacción. 4. Realiza una presentación en PowerPoint® con tus hallazgos. 5. Para cerrar el tema, menciona por qué es importante tomar en cuenta la interacción al momento de diseñar.
1. Apoyándote del contenido de la siguiente página http://www.webpagesthatsuck.com/.../ elige un ejemplo de: a. Una interfaz que confunda al usuario por problemas de percepción ya sea por uso inapropiado del color, mala distribución de elementos, íconos inadecuados, etc.) b. Una interfaz que provoque al usuario un modelo mental incorrecto de su funcionamiento. Apóyate con pantallas de la interfaz y describe en qué consiste el error.

3. Maestros Online www.maestronline.com
2. Prepara una entrevista como parte del proceso de ingeniería de requisitos para generar un sistema para una empresa. Debes establecer lo siguiente: a. Objetivo de la entrevista b. Personas y puestos que serían entrevistados. c. Realiza un cuestionario con al menos 10 preguntas.
Actividad 2: Análisis para un Diseño Centrado en el Usuario Instrucciones: 1. Considera el siguiente escenario: Marina tiene una pequeña tienda de comida especializada con 10 empleados (1 Gerente, 1 Supervisor, 1 Administrador, 2 Cajeras, 2 acomodadores de artículos, 1 almacenista, 1 persona de Atención a Clientes y 1 guardia). Ella desea tener un sistema que le ayude a administrar los horarios de entrada y salida de cada uno de sus empleados, así como el registro de los que trabajan tiempo extra el fin de semana. Te contrata como parte del equipo que desarrollará el sistema, por lo que decides realizar un análisis para conocer las necesidades y requerimientos. 2. Con base al escenario de Marina, responde lo siguiente. No olvides justificar cada una de tus respuestas. a. ¿Qué técnica de recopilación de información utilizarías? b. ¿A qué tipo de personas tomarías para realizar el análisis? c. ¿Cuánto tiempo calculas que tarde el análisis? d. ¿Cuáles serían los pasos para prepararte antes de ejecutar la técnica? 3. Crea un formato que ayude a documentar en análisis realizado. 4. Describe el perfil del entorno más adecuado para interactuar con el sistema.
1. Busca en Internet 3 páginas de organismos que se dediquen a la adopción de mascotas. 2. Navega por sus páginas y responde lo siguiente: a. ¿A quién está dirigida la página? ¿Cómo puedes saberlo con sólo navegar? b. ¿Qué tipo de personas ves en las fotos de la página?

4. Maestros Online www.maestronline.com
c. ¿Qué secciones encuentras en la página? d. En las secciones de ayuda o voluntariado ¿hay varias maneras de hacerlo? Si es así, ¿cómo es que la organización hace diferencia para acercarse a cada uno? e. Al revisar la página, ¿crees que dos personas totalmente diferentes, por ejemplo un niño y una persona de la 3ª edad, puedan identificarse con la organización para ayudar. ¿Por qué?
Actividad 3: Perfil a través de Personas, Accesibilidad Instrucciones: Considera el siguiente escenario: 1. El Parque Ecológico Xochimilco desea rediseñar su página de Internet ofreciendo contenido para maestros, estudiantes y familias. 2. Genera los siguientes perfiles de usuario: Maestro, Estudiantes y Familia utilizando el concepto de “Personas”. 3. Contesta las siguientes preguntas: a. ¿Cuál es el beneficio de utilizar el concepto “Personas” para el diseñador de la página web del parque? b. ¿Crees que sea importante incluir una foto de cada uno de los perfiles “Personas”? Justifica tu respuesta. c. ¿Qué recomendaciones harías para lograr que la nueva página del parque tenga características de accesibilidad? d. Busca un ejemplo de alguna página de algún parque internacional que ofrezca accesibilidad al usuario. Explica en qué consiste apoyándote de imágenes. 4. Ejemplifica cada uno de los factores que afectan el desempeño humano con imágenes de aplicaciones y explica en qué consisten.
Realiza las siguientes actividades y entrega un reporte con tus resultados. 1. Elige 5 factores humanos que impacten en el diseño interactivo y explica por qué un diseñador debe considerarlos. 2. Genera una tabla donde puedas comparar las ventajas y desventajas de las técnicas de obtención de información y menciona en qué situación es mejor utilizarla.

5. Maestros Online www.maestronline.com
Técnica Descripción Ventajas Desventajas Cuándo usarla
3. Elabora tres perfiles de usuario utilizando el concepto “Personas” considerando que serán los usuarios de la página web del Museo Soumaya. (http://www.soumaya.com.mx) 4. Persona 1: Maestros Persona 2: Estudiantes Persona 3: Familias Recuerda incluir los siguientes atributos: a. Nombrar a la Persona b. Realizar una breve descripción de sus antecedentes. c. Descripción breve de sus necesidades. d. Describe un escenario donde la “Persona” entre a la página web y haga uso de su contenido. 5. Para la misma página web del Museo Soumaya describe cómo cubre las 7 facetas de la experiencia del usuario. a. Justifica tu respuesta para cada una de las facetas. b. Si no cubre alguna de las facetas explica por qué no. 6. Navega en otras páginas web de museos de México y busca tres ejemplos que vayan en contra de los principios de la comunicación con el usuario. Menciona y explica por qué no se cubrieron los principios de comunicación con el usuario.
Actividad 4: Diseño de una interfaz gráfica Instrucciones: 1. Busca 3 páginas de Internet de algún tema que te guste; pueden ser de comics, deportes, música, tu artista favorito, etc. 2. Revisa cada página y describe qué tipo de contenido encuentras en cada una. 3. Ahora revisa cómo está organizado el contenido en cada una y responde: a. ¿Cuál prefieres y por qué? b. ¿Cómo están organizados el texto y las imágenes? c. ¿Puedes realizar acciones en la página? ¿Qué tipo de acciones? 4. Ahora en las mismas páginas, busca si hay secciones que te permitan llenar información o de ayuda. Responde lo siguiente: a. ¿Funcionan bien?

6. Maestros Online www.maestronline.com
b. ¿Te ayudan a encontrar información en la página? 5. Selecciona un tema para diseñar una pantalla de página de Internet y elige la personalidad que quieres transmitir con ella. 6. Diseña una pantalla incorporando al menos 3 propiedades de la composición visual según Galitz. Puedes utilizar texto lorem ipsum para llenar el contenido. 7. Agrega elementos que incluyan color seleccionando zonas del contenido (background & foreground). 8. Una vez diseñada la pantalla, tómala como base y genera 3 pantallas más del mismo tema; aplica cambios a la tipografía, a los colores y al espacio. 9. Compara las cuatro pantallas y describe si cumplen con las recomendaciones de los autores estudiados en el tema.
1. Revisa los ejemplos de navegación que propone la siguiente página: http://ui- patterns.com/patterns 2. Selecciona un ejemplo de cada uno de los siguientes tipos: Tabs, Jumping in hierarchy, Menus y Content. 3. Responde a los siguientes incisos: a. Incluye el ejemplo (imagen) b. Describe cuándo se utilizan c. Describe las recomendaciones de uso a modo de “Best practices” 4. Busca y describe el proceso para generar prototipos. 5. Genera una tabla comparativa donde incluyas sus ventajas y desventajas.
Actividad 5: Rediseño de un sitio web Instrucciones: 1. En equipo, seleccionen una página en Internet de alguna empresa que ofrezca venta de artículos online. 2. Analicen la página y respondan lo siguiente. Recuerden justificar sus respuestas. a. Identifiquen qué modelo de navegación utiliza. b. Identifiquen qué estructura de menús tiene. c. Revisen qué tipos de menús gráficos tiene. d. Ubiquen si utiliza un mapa del sitio, rutas de navegación y paginación. e. Describan cómo implementa esas funciones de navegación web. 3. Con la misma página seleccionada realicen lo siguiente: a. Creen un prototipo de baja definición (boceto o prototipos en papel) que ofrezca un rediseño a la página que seleccionaron.

7. Maestros Online www.maestronline.com
b. El prototipo deberá cubrir al menos 5 escenarios, una estructura de navegación y menú gráfico. c. Describan las nuevas características que ofrece el prototipo de forma que puedan convencer al dueño de la empresa en implementar el rediseño.
1. Describe con tus propias palabras qué es usabilidad y Accesibilidad. 2. Describe las ventajas de realizar pruebas de usabilidad en un sistema 3. Selecciona una aplicación móvil o una página web que te guste visitar regularmente. 4. Ahora muéstrasela a un adulto (pueden ser tus papás, tíos o maestros) y responde: a. ¿Les gusta tanto como a ti? b. ¿La pueden usar fácilmente? c. ¿En qué aspectos es diferente a como tú la utilizas? d. ¿Crees que un niño la pueda utilizar? ¿Qué diferencias habría en la manera de usarla entre tú, un adulto y un niño? 5. Ahora revisa tu computadora o celular y menciona todas las características que encuentres que pueden ayudar a una persona con necesidades especiales. a. ¿Qué otra cosa se te ocurre que podría incluirse?
Actividad 6: Prototipos para Video-Toys Instrucciones: La empresa de videojuegos “Video-Toys” desea generar un portal de Internet para su línea infantil y te ha contratado para que presentes algunas ideas que puedan utilizar. Recibes de su parte 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): se ha creado un videojuego para colorear, armado de rompecabezas y reconocimiento de figuras geométricas.  Educativos (para niños de 6 a 8 años): se encuentra los juegos que ayudan a los niños a leer, a realizar operaciones algebraicas y a crear sus propias historietas.  Infantiles (de 8 a 10 años): se han colocado aquellos que están relacionados con destreza y entrenamiento. 1. Con la información anterior, crea un prototipo de tipo Storyboard para presentarlo al dueño de la empresa “Video-Toys”, deberá abarcar los tres tipos de productos que ofrece.

8. Maestros Online www.maestronline.com
2. Utilizando Fireworks genera un prototipo diseñado para una tableta electrónica o Smartphone que muestre cómo sería la versión para estos dispositivos. Recuerda incorporar al menos tres escenarios posibles. 3. Exporta el prototipo a HTML y compártelo a través del foro de discusión de Blackboard.
Selecciona una empresa de tu interés a la que quieras hacer una página web y realiza lo siguiente: 1. Selecciona las facetas de la experiencia del usuario que vas a utilizar en la página. Justifica tu elección. 2. Diseña una forma con al menos 10 controles (6 obligatorios). Incluye el mensaje de error que debe aparecer, respeta los principios de comunicación. 3. Diseña la pantalla homepage donde presentes la página de la empresa, utiliza los elementos de tipografía, color y espacio, así como el sistema de navegación. Si es necesario puedes incluir pantallas adicionales. 4. Realiza un prototipo de baja fidelidad (boceto, prototipo en papel o storyboard) de un sistema en web para la empresa seleccionada. 5. Construye un prototipo de alta fidelidad para uno de los departamentos de la empresa que incluya al menos tres escenarios. 6. Realiza un ejercicio de evaluación al prototipo de alta fidelidad, considera elementos de usabilidad y accesibilidad.