1. Diseo, prototipo yconstruccin

2. Diseo Diseo conceptual. Desarrollo de un modeloconceptual que captura lo que un producto har y sucomportamiento. Diseo fsico. Se enfoca al los detalles del diseo talescomo pantalla, mens, conos y grficos. Surge de un proceso iterativo de rediseo con la evaluacin deusuarios. 3. Modelo conceptual orientado a producto. Su estructura se basa en los productos y herramientas que losusuarios crean, modifican y mantienen. Ej: Ofimtica. Modelo conceptual orientado a proceso. Su estructura se basa en la lista de pasos de proceso queconforman la base de una aplicacin. Ej: SW para controlar una planta qumica, un paqueteadministrativo o contable, etc. 4. Circunstancias de diseo Cuando se empieza desde cero. Cuando se modifica un producto existente. Agregar caractersticas adicionales. 5. Perspectivas para el desarrollode un modelo 1. Modo de interaccin. Depende de las actividades del usuario, dnde y cmo hace sutarea / usara un desarrollo. 2. Se puede usar alguna metfora en la interfaz? Si es posible, aprovechar metforas del dominio del que elusuario est familiarizado. 3. Qu paradigma de interaccin se usar? De escritorio / mvil / Web. Cmputo ubicuo. Cmputo pervasivo. Wearable computing. Otros. 6. Perspectivas para el desarrollode un modelo contextual 1. Modo de interaccin. Depende de las actividades del usuario, dnde y cmo hace sutarea / usara un desarrollo. 2. Se puede usar alguna metfora en la interfaz? Si es posible, aprovechar metforas del dominio del que elusuario est familiarizado. 3. Qu paradigma de interaccin se usar? De escritorio / mvil / Web. Cmputo ubicuo. Cmputo pervasivo. Wearable computing. Otros.Son decisiones tentativas,que pueden cambiar. 7. Actividad: De los ejemplos vistos del CHI, qu tipo deparadigma siguen? Qu funciones realizar el producto? Cmo se relacionan las funciones entre s? Una despus de otra? en paralelo? Qu informacin necesita estar disponible? Qu informacin se requiere para una tarea? 8. Reglas de oro para el diseode interfaces de Shneiderman 1. Consistencia. 2. Permitir atajos. 3. Ofrecer retroalimentacin. Error 404? y eso es? 4. Indicar cuando una accin se completa. Notificar: impresin completa 9. Reglas de oro para el diseode interfaces de Shneiderman 5. Ofrecer prevencin de errores y un manejo de erroressimple. Que la interfaz prevenga errores. Aunque las equivocaciones pueden suceder, el sistema debepermitir retomar o corregir la situacin. 6. Permitir acciones reversibles. 7. Que el usuario se sienta en control. 8. Reducir la carga de memoria. 10. Diagrama de afinidad / Paredde afinidad Organiza notas capturadas durante la sesin derecopilacin de datos. Las notas son agrupadas juntas ya sea que serelacionen entre s de alguna manera. Los grupos no son predefinidos, sino que se forman deacuerdo a los datos. Se pone una nota y luego el equipo busca otras notasque estn relacionadas d alguna manera. 11. Prototipado 12. Tipos de prototipado segnfunciones a considerar Prototipado horizontal. Enfocado a proporcionar un conjunto amplio de funciones, conpoco detalle. Prototipado vertical. Proporciona mucho detalle para pocas funciones. 13. Ej: Prototipo de un modelo conceptual orientado aproceso. 14. Problemas de los prototipos de altafidelidad con respecto a los de baja Consumen ms tiempo en realizarse. Los usuarios que los prueban tienden a comentaraspectos superficiales. Los desarrolladores no quieren cambiar algo que lestom horas. Un pequeo bug en el prototipo y puede detener laevaluacin. 15. Proceso del prototipado Conforme avanza el desarrollo del diseo, la calidad delprototipo aumenta. Se requieren herramientas que reflejen dnde seencuentra uno en el proceso del diseo. Al inicio, no cosas de alta definicin que consuman muchotiempo. Comienzo con storyboards, Proporcionan un sentido de las tareas y los escenarios que sevan a soportar. 16. Luego prototipos de papel. Mock-ups digitales. (En el dominio Web) HTML esttico. Partes dinmicas (bases de datos y partesdesarrolladas). 17. Error comn:Centrarse en la interfaz de usuario antes de centrarse enlas tareas para las que va a servir la interfaz. 18. Storyboard 19. Storyboard Se enfoca en las tareas. En unos cuantos paneles se presenta para lo que unainterfaz puede ayudar a una persona a lograr. Comunican flujo. Como en una tira cmica, muestra lo que sucede enpuntos clave. No se trata de dibujos bonitos, sino de comunicar ideas.Deben ilustrar una meta!!!! 20. Partes a mostrar en unstoryboard Un escenario. Actores involucrados (Persona). Ambiente Tarea a ser efectuada. 21. Secuencia. Pero no de la interfaz! (no sobre cmo son los botones). Qu pasos estn involucrados? Qu lleva a alguien a usar la interfaz? Qu tarea es ilustrada? Satisfaccin. Qu motiva al usuario a usar el sistema? Qu permite lograr al usuario? Qu necesidad cubre el sistema? 22. Beneficios de usar storyboard Enfoque holstico. Enfatiza como una interfaz ayuda a cumplir una tarea. Evita centrarse a una interfaz particular. An no especifica botones, capas, etc. Ayuda a que todos los stakeholders compartan losmismos conceptos respecto a la meta. Comparten un mismo trasfondo. 23. No gastar mucho tiempo en storyboards.No se trata de dibujos bonitos! 24. Actividad: realiza un storyboard para ilustrar cmo llenarel tanque de gasolina. 25. Plantilla para storyboard en PowerPoint:http://blog.elearningart.com/rapid-storyboarding-and-a-free-template/ 26. Prototipado en papel 27. Prototipado de papel Al tener una breve idea de para lo que la interfaz va aservir: Comenzar a pensar en cmo se va a implementar. Qu se le va a presentar al usuario y con qu va a interactuar?(look and feel). Cmo sera la interfaz de usuario? 28. Bosquejo de la interfaz de usuario, pero no encomputadora. En computadora, tomara tiempo, uno tiende a ser exacto y darledetalles. Herramientas: Papel, post-its, marcadores, pluma, etc. Es un bosquejo rpido. 29. Videos: 30. Consejos al usar prototipos depapel Manejar componentes reutilizables (botones, etc.). Si algo es difcil de simular (indicar de progreso, botnderecho del mouse, hiperenlaces), permite que elusuario pregunte si est disponible y verbalmentedescribirle la interaccin. til usar una maqueta o pegar "las pantallas" sobre undispositivo. 31. Se pueden usar capturas de pantalla, dibujos, todo loque ayude a realizarlo rpido. Si se manejan capas, se pueden usar transparencias. Para ayudar a la persona que pruebe el prototipo,explicarle la parte conceptual del bosquejo en papel. 32. Ventajas del prototipo enpapel Permite probar varios prototipos simultneos. Se puede involucrar distintos stakeholders. Identifica si los usuarios se traban, se confunden o consideranque algo es extrao. Identifica sus sugerencias. /en otro papel, que indiquen qumodificaciones haran. Al terminar el prototipado de papel, se puede pasar a unbosquejo digital. 33. Diseo de mens Nombres claros, cortos y no ambiguos. Usar agrupaciones lgicas. 34. Card sorting. Resumen:http://www.interaction-design.org/encyclopedia/card_sorting.html. Recursos: SynCaps, http://www.syntagm.co.uk/design/cardsortdl.shtml xSort http://www.xsortapp.com/ (OSX, gratuito). UXSort https://sites.google.com/a/uxsort.com/uxsort/ (Win, gratuito). 35. Wireframing 36. Jumpchart https://www.jumpchart.com/ Plan gratuito: 2 usuarios, un proyecto y 10 pginas. iPlotz http://iplotz.com/ Plan gratuito: 1 proyecto con 5 pginas. InVision App http://www.invisionapp.com/ Plan gratuito: 1 proyecto 37. iPhoneMockup http://iphonemockup.lkmc.ch/ Gratuito. Slo una pantalla, va Web. framebox http://framebox.org/ Gratuito. MockFlow http://mockflow.com/ Plan gratuito: 1 proyecto, 4 pginas. 38. Pencil Project http://pencil.evolus.vn/ Open-source. Cliente de escritorio. Permite enlazado de pginas. Cacoo https://cacoo.com Plan gratuito, solo exporta a png. WireFrame https://wireframe.cc/ Demo 7 das. Gratuito, salva URL. 39. JustinMind http:// www.justinmind.com/ Gratuito (aunque caractersticas especiales de pago). PowerPoint. PDF dinmico. 40. Falseando lainteraccin 41. Se requiere recibir retroalimentacin lo ms prontoposible. Para recibir retroalimentacin, se requiere algo quefuncione. Pruebas rpidas con usuarios sobre prototipos. 42. Mago de Oz 43. Prototipado Mago de Oz Simula el comportamiento de la mquina conoperadores humanos. Una aplicacin interactiva sin (mucho o nada de) cdigo. La parte visible de la interfaz (front-end). Un mago (remotamente) controla la interfaz. Usado cuando es ms rpido, barato, sencillo que hacer lainterfaz real. Interfaces de reconocimiento, personalizacin basada en el usuario. 44. Retroalimentacin en Mago deOz Sobre alta definicin: Los usuarios piensan que es ms real. Mechanical Turk. Consume mucho tiempo. Los usuarios tienden a criticar menos con este tipo de interfaces. Sobre baja definicin: Recomendacin para usar el mago de Oz. Los usuarios sienten que pueden brindar retroalimentacin. 45. Consideracin para prepararun prototipo por Mago de Oz Mapea escenarios y el flujo de la aplicacin. Considerar qu debera suceder en respuesta alcomportamiento del usuario? Es ms sencillo construir un prototipo-Oz para un conjuntolimitado de funcionalidades. Conjuntar "esqueletos" de la interfaz. Es lo que el usuario final va a ver. 46. Identificar dnde y cmo el mago tendr intervenciones. Al seleccionar la siguiente pantalla, al introducir texto, alreconocer habla, etc. Recordar que luego el mago ser reemplazado por unacomputadora. Ensayar el papel del mago con un colega. Qu instrucciones se le dirn a la persona? Ayuda a identificar fallos antes de llevar la prueba con usuariosreales. 47. Realizando un prototipomanejado por Mago de Oz Practicarlo primero con compaeros. Tras alcanzar confianza, reclutar usuarios. Un lugar cmodo para ellos (si es posible). Dos roles: facilitador y el mago. Facilitador: Proporciona tareas y toma notas. Mago: Opera la interfaz. 48. La retroalimentacin puede ser: Pensar en voz alta. Hablar libremente mientras se realizan lastareas. Retrospectiva. Para cuando hablar libremente es un distractor. Incluso se puede mostrar un video de la sesin y luego preguntarle:Cuando te trabaste aqu, cul fue el problema? 49. Evaluacin heurstica. Categoras de problemas o heursticas sobre las que se le pideal usuario que ponga atencin. Agradecer al usuario (revelar al mago, si es necesario). Agradecer a las personas. Una muestra de aprecio. 50. Ventajas de usar Mago de Oz Se puede usar durante todo el proceso de desarrollo (nosolo al inicio). Rpido, barato e iterativo. Permite crear mltiples variaciones. Se le dan al mago distintas instrucciones (no hay cdigo quecambiar). 51. Identifica bugs y problemas con el diseo presentado. Pone al usuario en el centro del desarrollo. Los diseadores aprenden al tener que interpretar almago. Permite visualizar aplicaciones que sean un reto aconstruir. 52. Desventajas del Mago de Oz La simulacin puede suponer mal el uso de algunatecnologa. Puede simular tecnologa que no existe o que nuncaexistir. Los magos requieren entrenamiento y pueden serinconsistentes. 53. Puede ser cansado ser el mago. Algunas caractersticas y limitaciones son difciles oimposibles de simular correctamente. Puede ser inapropiado en algunos lugares (en la casa). 54. Videos de prototipos de papel: 10 ejemplos efectivos en video de prototipado en papel.http://speckyboy.com/2010/06/24/10-effective-video-examples-of-paper-prototyping/ 55. Prototipado en video 56. Que las distintas decisiones que se hagan se combinenpara dar soporte a las actividades de los usuarios. Elementos de la interfaz, funcionalidad, diseo visual. Problema: desviarse con detalles de implementacin. Solucin: prototipo en video que muestre lo que serausar el sistema. 57. Beneficios de prototipo envideo Rpido y barato. Sirve como herramienta de comunicacin Pone un trasfondo comn. Muestra el contexto de uso. Auto explicativo Puede servir como especificacin para losdesarrolladores. Cualquier interfaz que logre la meta (mostrada) es una buenainterfaz. 58. Enlaza el diseo de la interfaz con las tareas. Orienta y ayuda a dar prioridad sobre las elecciones de unainterfaz. Asegura que se tiene una interfaz completa. Se tienen todos los elementos que alguien necesitara paracompletar la tarea que tiene que hacer? Asegura que no hay extras que no usen las personas paracompletar sus metas. 59. Se puede usar el prototipado en video durante todo elciclo del diseo. Al comienzo, como una ayuda a la lluvia de ideas. Al usar un prototipo en papel y luego ponerlo dentro deun video.**Videos 60. Qu se muestra en un video? Semejante a un storyboard, se muestra toda la tarea. Motivacin y xito en la tarea. Se muestran tomas y ayuda narrativa. Presenta las tareas relevantes que permite el sistema. Permite figurar cul es el mnimo que el sistema debe permitir. Si no est en el video, no es necesario incluirlo en las primerasvueltas del proceso. 61. Pasos para un prototipado envideo Comenzar con un resumen (o con el storyboard). Planear las tomas, identificar qu se va a mostrar en elvideo y cmo las tareas o actividades mostradas logranla intencin. Se vale improvisar. 62. Equipo a usar: Una cmara (de celular, de lap, etc.). Participantes (los mismos integrantes del equipo - ayuda afortalecer la empata hacia los usuarios). Un lugar realista. Enfocarse ms en el mensaje que en la filmacin. 63. Otras consideraciones Se puede usar audio o pantallas con ttulos. La interfaz puede ser papel, maquetas, cdigo o inclusoser invisible. Puede mostrar tanto el xito o la falla (de la interfaz adesarrollar o de otras). Editar lo menos posible (editar consume tiempo). 64. Comparandomltiples alternativas 65. Al probar mltiples (cantidad) vs. Probar una decalidad 66. Fijacin funcional: 67. Fijacin funcional: 68. Prototipado serial vs. Prototipado paraleloPrototipoRetroalimentacinPrototipoRetroalimentacinPrototipoPrototipo PrototipoRetroalimentacin RetroalimentacinPrototipo 69. Por qu da mejores resultados unacercamiento paralelo? Separacin del Ego del artefacto. Motiva la comparacin. Comparticin de caractersticas. Mejor consenso. Ayuda al entendimiento entre losintegrantes del equipo. Proporcionan vocabulario.