Diseño interactivo ss14

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


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.


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


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?


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.

http://bbsistema.tecmilenio.edu.mx/bbcswebdav/institution/UTM/semestre/profesional/cs/cs13102/bb/modulo1.htm#collapseEV3


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é.


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?


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.


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.



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.



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.


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.


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.


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.


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.


Diseño interactivo ss14

Education

Transcript of Diseño interactivo ss14