DS-Diseno_de_GUI

Vista previa del material en texto

Diseño de Sistemas 
 
Materia integradora 
3 nivel 
 
Comisión 3k2 
Universidad Tecnológica Nacional 
 Facultad Regional Tucumán 
Ingeniería en Sistemas de Información 
Mg. Ing. Mabel Torres 
Bibliografía 
• Ingeniería del Software – 7ma Ed. 
 Autor : Ian Sommerville 
 
 Cap. 16 “ Diseño de Interfaces de Usuario” 
 
 
 
• Ingeniería del Software – Un enfoque Práctico 
5 ta Ed. 
 Autor : Roger Pressman 
 
 Cap. 15 “ Diseño de la Interfaz de Usuario” 
 
 
 
 
Agenda 
 Diseño del a interfaz de usuario 
 
 El proceso de diseño de la interfaz de usuario 
 
– Analizar las actividades del usuario 
 
– Prototipado de la interfaz de usuario 
• Principios de diseño de las IU 
 
– Evaluar la UI con los usuarios finales 
• Técnicas para la evaluación de la IU 
 
 Casos de uso real 
 
 
 
 
19/09/2011 
Agenda 
 Diseño del a interfaz de usuario 
 
 El proceso de diseño de la interfaz de usuario 
 
– Analizar las actividades del usuario 
 
– Prototipado de la interfaz de usuario 
• Principios de diseño de las IU 
 
– Evaluar la UI con los usuarios finales 
• Técnicas para la evaluación de la IU 
 
 Casos de uso real 
 
 
 
 
19/09/2011 
Agenda Diseño de la interfaz de usuario 
El diseño de la interfaz de usuario es la categoría de 
diseño que crea un medio de comunicación entre 
hombre y la máquina 
 
 Con un conjunto de principios para el diseño de la 
interfaz, el diseño identifica los objetos y las acciones 
de la interfaz 
 
 Se crea un formato de pantalla que formará la base de 
la interfaz gráfica del usuario 
Agenda 
 Diseño del a interfaz de usuario 
 
 El proceso de diseño de la interfaz de usuario 
 
– Analizar las actividades del usuario 
 
– Prototipado de la interfaz de usuario 
• Principios de diseño de las IU 
 
– Evaluar la UI con los usuarios finales 
• Técnicas para la evaluación de la IU 
 
 Casos de uso real 
 
 
 
 
19/09/2011 
Agenda El Proceso de diseño de la interfaz 
de usuario 
El diseño de la Interfaz de Usuario (UI) es un proceso 
iterativo e incremental donde los usuarios interactúan 
con los diseñadores y con los prototipos de la interfaz 
para decidir sobre: 
 
 las características , 
 organización, 
 apariencia y 
 funcionamiento de la interfaz de usuario del sistema 
Agenda El Proceso de diseño de la interfaz 
de usuario 
Analizar y 
comprender las 
actividades del 
usuario 
Realizar el diseño 
del prototipo en 
papel 
Evaluar el diseño 
con los usuarios 
finales 
Realizar el diseño 
dinámico del 
prototipo 
Evaluar el diseño 
con los usuarios 
finales 
Implementar la 
interfaz de usuario 
definitiva 
Diseño del 
prototipo 
Prototipo 
ejecutable 
Agenda El Proceso de diseño de la interfaz 
de usuario 
 Análisis del usuario: Se comprende las tareas que realiza el 
usuario, el entorno de trabajo, los otros sistemas que utiliza, etc. 
 
 Prototipado del sistema: Se desarrollan prototipos del sistema y se 
los expone a los usuarios quienes pueden guiar la evolución de la 
interfaz 
 
 Evaluación de la interfaz: Recopila información sobre las 
experiencias reales de los usuarios con la interfaz 
Agenda El Proceso de diseño de la interfaz 
de usuario 
Analizar y 
comprender las 
actividades del 
usuario 
Realizar el diseño 
del prototipo en 
papel 
Evaluar el diseño 
con los usuarios 
finales 
Realizar el diseño 
dinámico del 
prototipo 
Evaluar el diseño 
con los usuarios 
finales 
Implementar la 
interfaz de usuario 
definitiva 
Diseño del 
prototipo 
Prototipo 
ejecutable 
Agenda 
Análisis del usuario 
 Una actividad crítica del diseño de la Interfaz de 
Usuario es análisis de las actividades del usuario que 
deben ser soportadas por el sistema informático 
 
 Para desarrollar la comprensión de lo que los usuarios 
quieren hacer con el sistema, se pueden utilizar 
técnicas como: 
 
 análisis de tareas 
estudios etnográficos 
 entrevistas con los usuarios 
 observaciones 
 etc. 
Agenda El Proceso de diseño de la interfaz 
de usuario 
Analizar y 
comprender las 
actividades del 
usuario 
Realizar el diseño 
del prototipo en 
papel 
Evaluar el diseño 
con los usuarios 
finales 
Realizar el diseño 
dinámico del 
prototipo 
Evaluar el diseño 
con los usuarios 
finales 
Implementar la 
interfaz de usuario 
definitiva 
Diseño del 
prototipo 
Prototipo 
ejecutable 
Agenda 
Prototipado de la Interfaz de Usuario 
 El prototipado evolutivo o exploratorio con la 
implicación de los usuarios finales es la única forma 
práctica de diseñar y desarrollar interfaces de usuario 
 
 Este criterio de diseño para los sistema interactivos se 
denomina diseño centrado en el usuario 
 
 El propósito del prototipado es permitir a los usuarios 
adquirir una experiencia directa con la interfaz 
Agenda 
Prototipado de la Interfaz de Usuario 
 El proceso de prototipado se debe realizar en dos 
etapas: 
 
 Al principio del proceso hay que desarrollar 
prototipos en papel – maquetas de los diseños de 
las pantallas – y mostrárselos a los usuarios 
finales 
 
 Luego, se perfecciona el diseño y se desarrollan 
prototipos automatizados cada vez más 
sofisticados, y se ponen a disposición de los 
usuarios para realizar pruebas y simulación de 
actividades 
Agenda 
Prototipado de la Interfaz de Usuario 
 Después de los experimentos iniciales con los 
prototipos de papel, se debe implementar un prototipo 
de software del diseño de la interfaz, conforme a 
estándares profesionales 
 
 Factores humanos a considerar en el diseño de las 
interfaces de usuario: 
 
 Memoria limitada a corto plazo: recordamos hasta 7 
elementos de información 
 Incremento del estrés ante los errores 
 Capacidades físicas diferentes 
 Preferencias de interacción 
Agenda 
 Diseño del a interfaz de usuario 
 
 El proceso de diseño de la interfaz de usuario 
 
– Analizar las actividades del usuario 
 
– Prototipado de la interfaz de usuario 
• Principios de diseño de las IU 
 
– Evaluar la UI con los usuarios finales 
• Técnicas para la evaluación de la IU 
 
 Casos de uso real 
 
 
 
 
19/09/2011 
Principios de diseño del las IU 
Reglas de oro 
Principio Descripción 
 Dar el control al 
usuario 
 No obligar a hacer acciones innecesarias 
 Interacción flexible 
 Ocultar detalles técnicos 
 Interacción directa con los objetos que 
aparecen en la ventana 
 
 Reducir la carga 
de memoria del 
usuario 
 Establecer valores por defecto 
 Reducir la memoria a corto plazo 
 Basar el diseño en metáforas del mundo real 
Desglosar la información en forma progresiva 
 
 Construir una 
interfaz 
consecuente 
 Conocimiento del contexto de trabajo 
 Mantener la consistencia en todas las 
ventanas 
Principios de diseño del las IU 
 - Factores humanos - 
Principio Descripción 
 Familiaridad del 
usuario 
La interfaz debe utilizar términos y conceptos obtenidos 
de la experiencia de las personas que más utilizan el 
sistema 
 Uniformidad  Siempre que sea posible, la interfaz debe ser uniforme 
en el sentido de que las operaciones comparables se 
activen de la misma forma 
 Mínima Sorpresa El comportamiento del sistema no debe provocar 
sorpresa a los usuarios 
 Recuperabilidad La interfaz debe incluir mecanismos para permitir a los 
usuarios recuperarse de los errores 
 Guía de usuario Cuando ocurren errores, la interfaz debe proporcionar 
retroalimentación significativa y características de ayuda 
sensible al contexto 
 Diversidad de usuarios La interfaz debe proporcionar características de 
interacción apropiadas para los diferentes tipos de 
usuarios del sistema 
Principios de diseño del las IU 
 - Factores técnicos - 
Botones Descripción 
 Cancelar  Se usa cancelar en ventanasde respuesta en donde el sistema 
pregunta al usuario si debe continuar con la acción seleccionada o 
abandonarla 
 
 Cancelar se combina con un botón Aceptar o botones Si o No 
 
 Cerrar 
 
 Salir 
 Cerrar se usa para cerrar ventanas dentro de la aplicación 
 
 Salir se usa para abandonar una aplicación completa 
 
 Cuando el usuario hace click en Cerrar o Salir el sistema debe 
revisar para ver si no hay cambios guardados 
 
 Si hay cambios que no han sido guardados el sistema debe 
preguntar si desea guardar el trabajo antes de cerrar la ventana o 
salir de la aplicación 
Principios de diseño del las IU 
 - Factores técnicos - 
Botones Descripción 
 Eliminar  Eliminar se usa para quitar datos de la Base de Datos en 
forma permanente 
 Cuando el usuario hace click en Eliminar el sistema siempre 
debe preguntar ¿ Está Ud. seguro? 
 
 Guardar  Cada acción de guardar en la Base de Datos debe ser 
explícita y obvia 
Nunca guarde datos con un botón Aceptar u OK . El usuario 
siempre debe estar consciente que está actualizando los 
registros de una forma permanente 
 
 Guía de usuario Cuando ocurren errores, la interfaz debe proporcionar 
retroalimentación significativa y características de ayuda 
sensible al contexto 
 
 Deshacer  Deshacer va bajo el menú de Edición . El deshacer por lo 
general es a nivel de campo 
Agenda El Proceso de diseño de la interfaz 
de usuario 
Analizar y 
comprender las 
actividades del 
usuario 
Realizar el diseño 
del prototipo en 
papel 
Evaluar el diseño 
con los usuarios 
finales 
Realizar el diseño 
dinámico del 
prototipo 
Evaluar el diseño 
con los usuarios 
finales 
Implementar la 
interfaz de usuario 
definitiva 
Diseño del 
prototipo 
Prototipo 
ejecutable 
Agenda Evaluar el diseño de a IU con los 
usuarios finales 
 La evaluación de la IU es el proceso de evaluar la 
forma en que se utiliza una interfaz y verificar que 
cumple los requerimientos del usuario 
 
 La evaluación de la IU forma parte del proceso de 
validación y verificación de los sistemas de software 
 
 La evaluación de la IU se lleva a cabo contrastando la 
especificación de los requerimientos de usabilidad 
 
Agenda Evaluar el diseño de a IU con los 
usuarios finales 
Atributo Descripción 
 Aprendizaje ¿Cuánto tiempo tarda un usuario 
nuevo en ser productivo con el nuevo 
sistema? 
 Velocidad de funcionamiento ¿Cómo responde el sistema a las 
operaciones de trabajo del usuario? 
 Robustez ¿Qué tolerancia tiene el sistema a los 
errores del usuario? 
 Recuperación ¿Cómo se recupera el sistema a los 
errores del usuario? 
 Adaptación ¿Está muy atado el sistema a un único 
modelo de trabajo? 
 Atributos de usabilidad para evaluar las IU 
Agenda Evaluar el diseño de a IU con los usuarios finales 
 
Técnicas para la evaluación de la IU 
 Cuestionarios que recopilan información de lo que 
opinan los usuarios de la interfaz 
 
 La observación de los usuarios cuando trabajan con el 
sistema y “piensan y voz alta” de cómo tratan de utilizar 
el sistema para llevar a cabo alguna tarea 
 
 Videos del uso típico del sistema 
 
 La inclusión de código en el software que recopila 
información de los recursos más utilizados y de los 
errores más comunes 
 
Agenda Evaluar el diseño de a IU con los usuarios finales 
 
Técnicas para la evaluación de la IU 
 Cuestionarios 
 
 Es una técnica económica para evaluar la IU 
 
 Los cuestionarios se pueden utilizar aun antes de 
que esté disponible el sistema ejecutable si se 
construyen y evalúan maquetas en papel de la 
interfaz 
 
 Preguntando por la experiencia y conocimientos 
permite conocer si los usuarios con cierto tipo de 
conocimientos tienen problemas con la interfaz 
 
 Ejemplo de preguntas: 
Indique el valor en una escala de 1 a 5 de cuál es 
la comprensión de los mensajes de error 
 
Agenda Evaluar el diseño de a IU con los usuarios finales 
 
Técnicas para la evaluación de la IU 
 Observación 
 
 Se observa cómo utilizan el sistema los usuarios, 
ver los recursos que utilizan, los errores cometidos, 
etc. 
 
 Se complementan, con sesiones en las cuales los 
usuario conversan sobre lo que tratan de hacer, 
qué piensan del sistema y cómo tratan de 
utilizarlo para llevar a cabo sus objetivos 
 
 
Agenda Evaluar el diseño de a IU con los usuarios finales 
 
Técnicas para la evaluación de la IU 
 Uso de videos 
 
 Se graba las sesiones para su análisis posterior 
 
 Grabar las sesiones es relativamente de bajo costo 
 
 El análisis completo por medio de video es caro y requiere 
de un equipo de evaluación especializado con varias 
cámaras enfocadas al usuario y a la pantalla 
 
 El análisis de los videos permite descubrir: 
 
- Demasiados movimientos de las manos 
 
- Movimientos forzados del ojo 
 
 
 
Agenda Evaluar el diseño de a IU con los usuarios finales 
 
Técnicas para la evaluación de la IU 
 La inclusión de código en el software 
 
 Instrumentar código que recopile estadísticas de utilización 
permite mejorar las interfaces de varias formas 
 
 Se pueden detectar operaciones más comunes 
 
 Las interfaces se pueden reorganizar para que sean más 
rápidas de seleccionar 
 
 Los usuarios pueden enviar sus opiniones a los diseñadores 
para y de esta manera se obtiene retroalimentación 
 
 
Agenda El Proceso de diseño de la interfaz 
de usuario 
Analizar y 
comprender las 
actividades del 
usuario 
Realizar el diseño 
del prototipo en 
papel 
Evaluar el diseño 
con los usuarios 
finales 
Realizar el diseño 
dinámico del 
prototipo 
Evaluar el diseño 
con los usuarios 
finales 
Implementar la 
interfaz de usuario 
definitiva 
Diseño del 
prototipo 
Prototipo 
ejecutable 
Agenda 
Implementar la IU 
 Una vez creado el modelo de diseño de la IU, se 
implementa como un prototipo que los usuarios han 
examinado 
 
 Los prototipos se pueden implementar utilizando 
herramientas para el diseño de la interfaz de usuario 
que proporcionan los componentes u objetos que 
facilitan la creación de ventanas, menús, mensajes de 
error, etc. 
 
 
Agenda 
 Diseño del a interfaz de usuario 
 
 El proceso de diseño de la interfaz de usuario 
 
– Analizar las actividades del usuario 
 
– Prototipado de la interfaz de usuario 
• Principios de diseño de las IU 
 
– Evaluar la UI con los usuarios finales 
• Técnicas para la evaluación de la IU 
 
 Casos de uso real 
 
 
 
 
19/09/2011 
Agenda 
Caso de uso real 
 Un caso real de uso describe el diseño concreto del 
caso de uso a partir de una tecnología particular de 
entrada y salida, así como de su implementación global 
 
 Por ejemplo, si interviene una interfaz gráfica para el 
usuario, el caso de uso real incluirá diagramas de las 
ventanas en cuestión y una explicación de la interacción 
de bajo nivel con los artefactos de la interfaz 
 
 
Agenda Caso de uso real 
Ejemplo 
Curso normal de los eventos 
 
1- Este caso de uso comienza cuando un Cliente llega a la caja 
TPDV con los productos que desea comprar 
 
2. Con cada producto, el Cajero teclea el código universal de 
producto (CUP) en A de la Ventana-1. Si hay más de un producto, 
es opcional capturar la cantidad en E. Se oprime H después de 
capturar cada producto 
 
3. El Sistema agrega la información sobre el producto a la actual 
transacción de ventas. La descripción y el precio del producto 
actual se muestran en B y en F de la ventana-1 
 
4. Al terminar de capturar los productos el Cajero oprime el botón I 
para indicarle a la TPDV que terminó de capturar los productos 
 
5. El Sistema calcula y presenta en C el total de la venta 
6. ... 
Agenda 
A E 
H 
F B 
I 
Agenda Caso de uso real 
Sincronía entre los modelos 
Disposiciones de 
las ventanas 
Modelo de Casosde Uso 
 Documentos de CU 
Diagrama de Clases 
Diagrama de Colaboración 
Casos de Uso reales 
• Fin de la presentación