Este documento presenta instrucciones para realizar varias actividades relacionadas con el diseño centrado en el usuario, incluyendo el análisis de sitios web, la generación de perfiles de usuario, y el diseño de prototipos. Se pide al lector analizar sitios existentes, crear formatos y prototipos, y responder preguntas sobre conceptos como interacción, usabilidad y accesibilidad.

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
Técnica
Descripción
www.maestronline.com
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
5.
6.
7.
8.
9.
www.maestronline.com
b. ¿Te ayudan a encontrar información en la página?
Selecciona un tema para diseñar una pantalla de página de Internet y elige la
personalidad que quieres transmitir con ella.
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.
Agrega elementos que incluyan color seleccionando zonas del contenido
(background & foreground).
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.
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://uipatterns.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.
2.
3.
4.
Describe con tus propias palabras qué es usabilidad y Accesibilidad.
Describe las ventajas de realizar pruebas de usabilidad en un sistema
Selecciona una aplicación móvil o una página web que te guste visitar regularmente.
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.