Diseño interactivo

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 [email protected]


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.

http://bbsistema.tecmilenio.edu.mx/bbcswebdav/institution/UTM/tetramestre/profesional/cs/cs13151/cel/tema1.htm#collapseAct


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?



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.



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?



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.



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.



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.

Education

Diseño interactivo