El proceso del diseño interactivo
description
Transcript of El proceso del diseño interactivo
![Page 1: El proceso del diseño interactivo](https://reader033.fdocuments.net/reader033/viewer/2022052400/5598538f1a28ab08448b48b6/html5/thumbnails/1.jpg)
El proceso del diseño
interactivo
![Page 2: El proceso del diseño interactivo](https://reader033.fdocuments.net/reader033/viewer/2022052400/5598538f1a28ab08448b48b6/html5/thumbnails/2.jpg)
Ciclo de vida de un diseño
interactivo
Identificar
necesidades/establec
er requerimientos
Construir versión
interactiva
Evaluar(Re)Diseñar
Producto final
![Page 3: El proceso del diseño interactivo](https://reader033.fdocuments.net/reader033/viewer/2022052400/5598538f1a28ab08448b48b6/html5/thumbnails/3.jpg)
Ejercicio
Los relojes además de la hora y la fecha, tienen luz,
cronómetro, etc. La interfaz puede ser numérica o con
manecillas.
Su misión es diseñar un reloj, ya sea de correa, de
pared, electrónico o alguna variación que se le ocurra.
El objetivo es ser inventivo y exploratorio.
![Page 4: El proceso del diseño interactivo](https://reader033.fdocuments.net/reader033/viewer/2022052400/5598538f1a28ab08448b48b6/html5/thumbnails/4.jpg)
Ejercicio
Siga estos pasos:
1. Piense sobre la interacción del producto: ¿qué quiere que
haga? Encuentre 3 usuarios potenciales y pregúnteles que
esperan que haga. Escriba una lista de requerimientos para el
reloj.
![Page 5: El proceso del diseño interactivo](https://reader033.fdocuments.net/reader033/viewer/2022052400/5598538f1a28ab08448b48b6/html5/thumbnails/5.jpg)
2. En base a dispositivos semejantes, busque fuentes de
inspiración que le ayuden. Tome nota de cualquier
descubrimiento que le parezca interesante o útil.
![Page 6: El proceso del diseño interactivo](https://reader033.fdocuments.net/reader033/viewer/2022052400/5598538f1a28ab08448b48b6/html5/thumbnails/6.jpg)
3. Bosqueje diseños iniciales para el reloj (al menos 2, ambos
considerando los requerimientos).
![Page 7: El proceso del diseño interactivo](https://reader033.fdocuments.net/reader033/viewer/2022052400/5598538f1a28ab08448b48b6/html5/thumbnails/7.jpg)
4. Evalúe los dos diseños, en base a su usabilidad y a la
interacción con los bosquejos, involucrando usuarios
potenciales.
![Page 8: El proceso del diseño interactivo](https://reader033.fdocuments.net/reader033/viewer/2022052400/5598538f1a28ab08448b48b6/html5/thumbnails/8.jpg)
Requerimientos
Declaración sobre un producto planeado que
especifica lo que debería hacer o cómo debería
hacerlo.
![Page 9: El proceso del diseño interactivo](https://reader033.fdocuments.net/reader033/viewer/2022052400/5598538f1a28ab08448b48b6/html5/thumbnails/9.jpg)
Tipos de requerimientos
Requerimientos funcionales.
Dicen lo que el sistema debe hacer.
Ej: para un procesador de texto, que soporte una variedad de
estilos de formato.
Requerimientos de datos.
Capturan el tipo, persistencia, cantidad, exactitud y valores de
los datos requeridos.
![Page 10: El proceso del diseño interactivo](https://reader033.fdocuments.net/reader033/viewer/2022052400/5598538f1a28ab08448b48b6/html5/thumbnails/10.jpg)
Requerimientos del entorno / contexto de uso.
Considera:
• entorno físico,
• entorno social (colaboración y
coordinación)
• entorno organizacional,
• entorno técnico.
Circunstancias
donde el producto
se espera vaya a
ser usado.
![Page 11: El proceso del diseño interactivo](https://reader033.fdocuments.net/reader033/viewer/2022052400/5598538f1a28ab08448b48b6/html5/thumbnails/11.jpg)
Requerimientos de usuario.
Capturan las características del grupo de usuarios a quien
va dirigido.
Habilidades, nivel de experiencia, frecuencia de uso.
Requerimientos de usabilidad.
Capturan las metas de usabilidad de un producto: efectividad,
recuerdo, facilidad de aprendizaje, utilidad.
Que el producto sea disfrutable, atractivo y motivante.
![Page 12: El proceso del diseño interactivo](https://reader033.fdocuments.net/reader033/viewer/2022052400/5598538f1a28ab08448b48b6/html5/thumbnails/12.jpg)
Ejercicio
Sugiera un requerimiento funcional, de datos, de
ambiente, de usuario y de usabilidad para cada
escenario siguiente:
![Page 13: El proceso del diseño interactivo](https://reader033.fdocuments.net/reader033/viewer/2022052400/5598538f1a28ab08448b48b6/html5/thumbnails/13.jpg)
a) Un sistema para una cafetería universitaria que
permita a los usuarios pagar su comida usando un
sistema de crédito.
Funcional.
Datos.
Entorno.
Usuario.
Usabilidad.
![Page 14: El proceso del diseño interactivo](https://reader033.fdocuments.net/reader033/viewer/2022052400/5598538f1a28ab08448b48b6/html5/thumbnails/14.jpg)
Funcional - calcular el costo total de la compra.
Datos - el sistema accede a los precios de los productos.
Entorno - los usuarios pueden llevar prisa, el entorno
puede ser ruidoso y los usuarios pueden estar platicando
con otros mientras usan el sistema.
Usuario - un rango de edad menor a 25 años,
acostumbrados a usar tecnología.
Usabilidad - sistema simple que permita a los nuevos
usuarios usar el sistema de inmediato, que pueda ser
recordable para los usuarios frecuentes. Que sea eficiente
y no haga esperar a los usuarios mientras procesa.
![Page 15: El proceso del diseño interactivo](https://reader033.fdocuments.net/reader033/viewer/2022052400/5598538f1a28ab08448b48b6/html5/thumbnails/15.jpg)
b) Un sistema que controle el funcionamiento de una
planta nuclear.
Funcional.
Datos.
Entorno.
Usuario.
Usabilidad.
![Page 16: El proceso del diseño interactivo](https://reader033.fdocuments.net/reader033/viewer/2022052400/5598538f1a28ab08448b48b6/html5/thumbnails/16.jpg)
Funcional - el sistema monitorea la temperatura del
reactor
Datos - el sistema accede a las lecturas de
temperatura
Entorno - entorno ordenado, con pocas restricciones
en la consola, a menos que sea necesario vestir
indumentaria protectora.
Usuario - usuarios bien entrenados, competentes en
el manejo de la tecnología
Usabilidad - la salida del sistema (advertencias,
calibraciones) debe ser clara y sin ambigüedad.
![Page 17: El proceso del diseño interactivo](https://reader033.fdocuments.net/reader033/viewer/2022052400/5598538f1a28ab08448b48b6/html5/thumbnails/17.jpg)
Usuarios
![Page 18: El proceso del diseño interactivo](https://reader033.fdocuments.net/reader033/viewer/2022052400/5598538f1a28ab08448b48b6/html5/thumbnails/18.jpg)
Principiantes, intermedios y
expertos
La mayoría de los usuarios no son ni principiantes ni
expertos, son intermedios.
Nadie permanece mucho como principiante.
La mayoría se mantienen como "intermedios
perpetuos ".
![Page 19: El proceso del diseño interactivo](https://reader033.fdocuments.net/reader033/viewer/2022052400/5598538f1a28ab08448b48b6/html5/thumbnails/19.jpg)
Se busca dar servicio a los intermedios perpetuos.
Sin asustar a los principiantes.
Sin insultar a los expertos.
Si un usuario siente que no pasa del estado de
principiante después de un rato de trabajo, tenderá a
buscar otro programa que tome su lugar.
![Page 20: El proceso del diseño interactivo](https://reader033.fdocuments.net/reader033/viewer/2022052400/5598538f1a28ab08448b48b6/html5/thumbnails/20.jpg)
Optimizando para los
intermedios
Las guías (Clipo):
Los expertos rara vez los usan.
Los principiantes tratan de descartar pronto esos
recordatorios de su ignorancia.
Se debe buscar optimizar para los intermedios.
![Page 21: El proceso del diseño interactivo](https://reader033.fdocuments.net/reader033/viewer/2022052400/5598538f1a28ab08448b48b6/html5/thumbnails/21.jpg)
Personas y escenarios
![Page 22: El proceso del diseño interactivo](https://reader033.fdocuments.net/reader033/viewer/2022052400/5598538f1a28ab08448b48b6/html5/thumbnails/22.jpg)
Personas
Usuarios abstractos, representan
lo observado de usuarios reales.
Modelo y ejemplo de una persona.
No es un ser humano, pero son concretos.
http://boagworld.com/usability/an-experience-with-site-personas/
![Page 23: El proceso del diseño interactivo](https://reader033.fdocuments.net/reader033/viewer/2022052400/5598538f1a28ab08448b48b6/html5/thumbnails/23.jpg)
Tarea:
Resumen de:
Nielsen Lene, Personas, Soegaard, Mads and Dam, Rikke Friis
(eds.), "The Encyclopedia of Human-Computer Interaction, 2nd
Ed.", Aarhus, Denmark: The Interaction Design Foundation,
2013.
Disponible en línea
http://www.interaction-design.org/encyclopedia/personas.html.
![Page 24: El proceso del diseño interactivo](https://reader033.fdocuments.net/reader033/viewer/2022052400/5598538f1a28ab08448b48b6/html5/thumbnails/24.jpg)
Elementos de las Personas
Información demográfica.
Motivaciones.
Comportamiento.
Intenciones.
Metas.
![Page 25: El proceso del diseño interactivo](https://reader033.fdocuments.net/reader033/viewer/2022052400/5598538f1a28ab08448b48b6/html5/thumbnails/25.jpg)
¿En qué ayuda usar Personas?
Empatía
Considerar
Comprensión
Coherencia
Más empatía por un usuario particular más que por uno genérico.
¿Por qué un usuario quisiera usar el sistema que se está diseñando?¿Qué lo haría no querer usarlo?
Comprender el estado mental, emociones, filosofía y punto de vista de los usuarios.
Mantener un diseño coherente y consistente, más que una aglomeración dispersa de características.
![Page 26: El proceso del diseño interactivo](https://reader033.fdocuments.net/reader033/viewer/2022052400/5598538f1a28ab08448b48b6/html5/thumbnails/26.jpg)
Usar personas te mantiene centrado.
¿Cómo usaría Jorge esto?
¿Ésta característica adicional encaja con el deseo de Jorge
de un sistema minimalista?
![Page 27: El proceso del diseño interactivo](https://reader033.fdocuments.net/reader033/viewer/2022052400/5598538f1a28ab08448b48b6/html5/thumbnails/27.jpg)
Creación de Personas
Mapear temas de la entrevista a variables de
comportamiento.
![Page 28: El proceso del diseño interactivo](https://reader033.fdocuments.net/reader033/viewer/2022052400/5598538f1a28ab08448b48b6/html5/thumbnails/28.jpg)
Identificar patrones de comportamiento significativo.
Resumir características y metas relevantes.
Incluir 0 o 1 meta de vida.
Revisar que la Persona esté completa.
Cada Persona debe variar de las demás en al menos un
aspecto significativo.
![Page 29: El proceso del diseño interactivo](https://reader033.fdocuments.net/reader033/viewer/2022052400/5598538f1a28ab08448b48b6/html5/thumbnails/29.jpg)
Desarrollar narrativa.
Narrativa en tercera persona.
Dar prioridad a la Persona que será el objetivo
principal del diseño.
![Page 30: El proceso del diseño interactivo](https://reader033.fdocuments.net/reader033/viewer/2022052400/5598538f1a28ab08448b48b6/html5/thumbnails/30.jpg)
Escenarios
Tipos de escenarios:
Escenarios de problema
Historias sobre un proble-
ma que existe, antes de
introducir una tecnología.
Presentan una nueva visión
de la situación, después de
la introducción de la
tecnología.
Escenarios de diseño
![Page 31: El proceso del diseño interactivo](https://reader033.fdocuments.net/reader033/viewer/2022052400/5598538f1a28ab08448b48b6/html5/thumbnails/31.jpg)
Hace uso de una historia específica para construir e
ilustrar soluciones de diseño.
Se enfoca en describir cómo los usuarios completan
tareas.
Identificación de necesidades.
Las necesidades consisten de objetos, acciones y contextos.
Ej: Llamar (acción) a una persona (objeto) para hacer una cita
(contexto).
![Page 32: El proceso del diseño interactivo](https://reader033.fdocuments.net/reader033/viewer/2022052400/5598538f1a28ab08448b48b6/html5/thumbnails/32.jpg)
Responden preguntas como:
¿cómo es el entorno donde el producto se usa?
¿se usará durante largos períodos de tiempo?
¿la persona es interrumpida frecuentemente?
¿qué otros productos se usan a la vez?
¿qué actividades primarias debe realizar la persona para
completar sus metas?
¿cuál es el resultado final esperado al usar el producto?
![Page 33: El proceso del diseño interactivo](https://reader033.fdocuments.net/reader033/viewer/2022052400/5598538f1a28ab08448b48b6/html5/thumbnails/33.jpg)
El escenario incluye:
Finalización
Acción
Comienzo
Contexto
Persona
![Page 34: El proceso del diseño interactivo](https://reader033.fdocuments.net/reader033/viewer/2022052400/5598538f1a28ab08448b48b6/html5/thumbnails/34.jpg)
Actividad sobre escenarios
Escribir un escenario donde estés eligiendo comprar
un carro (nuevo o usado).
1. Escríbelo, piensa en los aspectos relevantes de la
tarea, tus prioridades y preferencias.
2. Luego, imagina un producto interactivo que te
ayude a realizar esta tarea tomando en cuenta esos
aspectos. Escribe un escenario futurista que muestre
como ese producto te ayudaría.
![Page 35: El proceso del diseño interactivo](https://reader033.fdocuments.net/reader033/viewer/2022052400/5598538f1a28ab08448b48b6/html5/thumbnails/35.jpg)
Rafa observa carros en el camino e identifica los que
le llaman la atención, esto puede tomar semanas.
También identifica reportes de consumidores que
hablen sobre el desempeño de los vehículos. Esto
ayuda a Rafa a encontrar que tipo de carro quiere
comprar. Luego visita una agencia y ve de primera
mano cómo es el carro, qué tan confortable es
sentarse en él. Si el carro aún le convence, pide que
le dejen probar manejarlo. Con ello, siente que tan
bien se controla el carro, que tan ruidoso es, etc. Al
terminar, Rafa decide si lo compra o no.
![Page 36: El proceso del diseño interactivo](https://reader033.fdocuments.net/reader033/viewer/2022052400/5598538f1a28ab08448b48b6/html5/thumbnails/36.jpg)
Escenario futurista:
Rafa quiere comprar un carro nuevo, visita un local de ventas, ellocal tiene cabinas y Rafa ocupa una disponible. Dentro, hay unasiento y frente a él, una pantalla. Cuando Rafa se sienta, lapantalla se enciende; entonces se muestran distintas opciones paraver videos de los carros que han salido al mercado en los últimosdos años, así como un buscador para encontrar carros según sumarca, modelo o año. Rafa puede seleccionar de entre ellos,también puede consultar los comentarios de otros compradoressobre un carro en el que esté interesado. Después de buscardurante un buen rato, Rafa considera que podría regresar más tardey continuar su búsqueda pero mejor decide que antes activará elsimulador de realidad virtual para el carro que más le interesó. Estole ayuda a recrear la sensación que tendría al manejar la versiónreal del mismo.
![Page 37: El proceso del diseño interactivo](https://reader033.fdocuments.net/reader033/viewer/2022052400/5598538f1a28ab08448b48b6/html5/thumbnails/37.jpg)
Referencias
Preece Jenny, Rogers Yvonne, Sharp Hellen, Interaction Design:
Beyond Human Computer Interaction, Wiley, 2002. Capítulos 6 a
7.
Cooper Alan, Reimann Robert, About Face 2.0: The essentials of
interaction design. Wiley, 2003. Capítulos 3 a 6.
Nielsen Lene, Personas, Soegaard, Mads and Dam, Rikke Friis
(eds.), "The Encyclopedia of Human-Computer Interaction, 2nd
Ed.", Aarhus, Denmark: The Interaction Design Foundation, 2013.
Disponible en línea http://www.interaction-
design.org/encyclopedia/personas.html.