Diseño_de_sistemas_-_GUI

Vista previa del material en texto

29/05/2020
1
I N T E R F A Z G R Á F I C A
D E U S U A R I O ( G U I )
Verificación y validación
Diferencias entre verificación y validación.
Interfaz Gráfica de Usuario (GUI)
¿Qué es la ‘Interfaz Gráfica de Usuario’?
Criterios para el diseño de GUI
¿Qué tener en cuenta al momento de diseñar la GUI de un sistema?
Contenido
1
2
3
29/05/2020
2
Interfaz Gráfica de Usuario
¿Qué es la ‘Interfaz Gráfica de Usuario’?
Contenido
Diseño de sistemas: GUI
Capa de presentación Capa de negocio Capa de datos
29/05/2020
3
Diseño de sistemas: HCI
¿Qué tecnología se utilizará para permitir la interacción entre el usuario y el sistema? Algunos ejemplos…
Diseño de sistemas: Importancia de HCI
Interfaz de usuario (User Interface – UI)
• El diseño de una interfaz de usuario crea una comunicación efectiva entre un humano y una
computadora. [2]
• La percepción y respuesta de una persona que resulta del uso y/o uso anticipado de un
producto, sistema o servicio. [8]
Experiencia del usuario (User Experience – UX)
29/05/2020
4
Any Questions?
Criterios para el diseño de GUI
¿Qué tener en cuenta al momento de diseñar la GUI de un sistema?
Contenido
29/05/2020
5
3 reglas de oro
1. El usuario debe tener el control.
2. Reducir la carga de memoria del usuario.
3. Hacer que la interfaz gráfica del usuario sea consistente
Criterios para diseño de GUI
Accesibilidad
Interacción accesible para personas 
con necesidades especiales.
Presentación
Colores, tipo de letra, etc.
Tiempo de respuesta
Opciones de ayuda
Usuarios necesitan ayuda para 
realizar las operaciones.
Latencia y manejo de errores
Latencia  mostrar el progreso de 
una operación.
Duración y variabilidad.
Navegabilidad
Facilidad para realizar las operaciones.
Considerar
29/05/2020
6
Criterios para diseño de GUI
Accesibilidad
Interacción accesible para personas 
con necesidades especiales.
Presentación
Colores, tipo de letra, etc.
Tiempo de respuesta
Opciones de ayuda
Usuarios necesitan ayuda para 
realizar las operaciones.
Latencia y manejo de errores
Latencia  mostrar el progreso de 
una operación.
Duración y variabilidad.
Navegabilidad
Facilidad para realizar las operaciones.
Considerar
Criterios para diseño de GUI: Navegabilidad
• La facilidad que tiene el usuario para “moverse” entre las distintas pantallas
del sistema con el fin de realizar las operaciones que requiere.
• Algunas herramientas útiles:
- Mapa de un sitio web (Site Map) Ejemplo: www.ocadogroup.com/site-map.
- Diagramas de navegación
Explica gráficamente las opciones de navegación que tiene el usuario.
(Existen distintas formas de presentar el diagrama de navegación: ¿Trabajo?)
Es importante porque…
(a) muestra de una forma gráfica el sistema a los stakeholders (partes interesadas).
(b) puede utilizarse para implementar las opciones de ayuda que ofrece el sistema.
• Profundidad en número de pantallas.
• Flexibilidad para ejecutar operaciones.
29/05/2020
7
Criterios para diseño de GUI: Diagrama de Navegación
Criterios para diseño de GUI
Accesibilidad
Interacción accesible para personas 
con necesidades especiales.
Presentación
Colores, tipo de letra, etc.
Tiempo de respuesta
Opciones de ayuda
Usuarios necesitan ayuda para 
realizar las operaciones.
Latencia y manejo de errores
Latencia  mostrar el progreso de 
una operación.
Duración y variabilidad.
Navegabilidad
Facilidad para realizar las operaciones.
Considerar
29/05/2020
8
Criterios para diseño de GUI
Accesibilidad
Interacción accesible para personas 
con necesidades especiales.
Presentación
Colores, tipo de letra, etc.
Tiempo de respuesta
Opciones de ayuda
Usuarios necesitan ayuda para 
realizar las operaciones.
Latencia y manejo de errores
Latencia  mostrar el progreso de 
una operación.
Duración y variabilidad.
Navegabilidad
Facilidad para realizar las operaciones.
Considerar
Criterios para diseño de GUI: Latencia
• Comunicación de las acciones.
• Elementos de latencia (tiempos, barras
de proceso, etc.).
• Mostrar entretenimientos.
• Alarmas de fin de proceso.
29/05/2020
9
Criterios para diseño de GUI: Manejo de errores
• Mensajes de advertencia.
• Redundar en elementos de advertencia:
sonidos, luces, colores, etc.
• Regreso al estado anterior.
Criterios para diseño de GUI
Accesibilidad
Interacción accesible para personas 
con necesidades especiales.
Presentación
Colores, tipo de letra, etc.
Tiempo de respuesta
Opciones de ayuda
Usuarios necesitan ayuda para 
realizar las operaciones.
Latencia y manejo de errores
Latencia  mostrar el progreso de 
una operación.
Duración y variabilidad.
Navegabilidad
Facilidad para realizar las operaciones.
Considerar
29/05/2020
10
Criterios para diseño de GUI: Accesibilidad
Criterios para diseño de GUI: Accesibilidad
29/05/2020
11
Criterios para diseño de GUI
Accesibilidad
Interacción accesible para personas 
con necesidades especiales.
Presentación
Colores, tipo de letra, etc.
Tiempo de respuesta
Opciones de ayuda
Usuarios necesitan ayuda para 
realizar las operaciones.
Latencia y manejo de errores
Latencia  mostrar el progreso de 
una operación.
Duración y variabilidad.
Navegabilidad
Facilidad para realizar las operaciones.
Considerar
Criterios para diseño de GUI: Presentación
• Diseño coherente.
• Uniformidad de elementos visuales.
• Uniformidad en la secuencia de acciones.
• Orden y equilibrio de los elementos visuales.
• Información relacionada.
• Solo lo importante.
• Legibilidad de la información.
• No abusar de color.
29/05/2020
12
Criterios para diseño de GUI: Presentación
https://www.sitepoint.com/10-troublesome-colors-to-avoid-in-your-advertising/
Criterios para diseño de GUI: Presentación
https://visme.co/blog/website-color-schemes/
29/05/2020
13
Criterios para diseño de GUI: Presentación
https://covid19.minsa.gob.pe/sala_situacional.asp
Criterios para diseño de GUI: Presentación
https://www.arcgis.com/apps/opsdashboard/index.html#/bda7594740fd40299423467b48e9ecf6
29/05/2020
14
Criterios para diseño de GUI
Accesibilidad
Interacción accesible para personas 
con necesidades especiales.
Presentación
Colores, tipo de letra, etc.
Tiempo de respuesta
Opciones de ayuda
Usuarios necesitan ayuda para 
realizar las operaciones.
Latencia y manejo de errores
Latencia  mostrar el progreso de 
una operación.
Duración y variabilidad.
Navegabilidad
Facilidad para realizar las operaciones.
Considerar
Any Questions?
29/05/2020
15
Pruebas y validación
Diferencias entre pruebas y validación.
Contenido
Pruebas
Black-box test White-box test
29/05/2020
16
Pruebas de caja negra
Pruebas de caja negra
Enablers Assumptions
Initial values
Context Feature 1
Expected Outcome (s)
Sensors
S1
…
Ss
Network
N1
…
Nn
Database
D1
…
Dd
Reasoners 
R1
…
Rr
Learners
L1
…
Ll
HCI
H1
…
Hh
Preferences
P1
…
Pp
Users
U1
…
Uu
Ejemplo de prueba de caja negra [5]
29/05/2020
17
Verificación
Verificación
Ejemplo de verificación (prueba de caja negra) [5]
29/05/2020
18
Validación
¿El sistema hace lo que el usuario necesita? 
Requisitos funcionales
¿El sistema esta diseñado de tal forma que permite al 
usuario realizar sus tareas adecuadamente?
Requisitos no funcionales + Diseño  Usabilidad
Validación
Usabilidad
“El nivel de usabilidad de una tecnología se determina por la interacción entre el usuario y la
computadora, considerando el nivel en el que esta tecnología puede ser integrada
exitosamente para realizar una tarea en el ambiente de trabajo deseado.” (Traducido de [7]).
29/05/2020
19
Validación
Usabilidad
“El nivel de usabilidad de una tecnología se determina por la interacción entre el usuario y la
computadora, considerando el nivel en el que esta tecnología puede ser integrada
exitosamente para realizar una tarea en el ambiente de trabajo deseado.” (Traducido de [7]).
¿Ejemplos de tecnología que para Uds. han tenido un ALTO grado
de usabilidad?
Validación
Usabilidad
“El nivel de usabilidad de una tecnologíase determina por la interacción entre el usuario y la
computadora, considerando el nivel en el que esta tecnología puede ser integrada
exitosamente para realizar una tarea en el ambiente de trabajo deseado.” (Traducido de [7]).
¿Ejemplos de tecnología que para Uds. han tenido un BAJO grado
de usabilidad?
29/05/2020
20
Validación
Usabilidad
“El nivel de usabilidad de una tecnología se determina por la interacción entre el usuario y la
computadora, considerando el nivel en el que esta tecnología puede ser integrada
exitosamente para realizar una tarea en el ambiente de trabajo deseado.”
(Traducido de Ref. [7])
Uno de los principales problemas de la validación del diseño de
un sistema es…
“¿Cómo preguntar al usuario si el sistema es usable?”
Validación
Ejemplo de validación centrada en Health-ITUEM [4]
29/05/2020
21
Bibliografía
[1] I. Sommerville, Software Engineering, 10th Edition, Pearson Education Limited, 2016.
[2] R. Pressman, B. Maxim, Software Engineering: A Practitioners Approach, 8th Edition, McGraw Hill, 2015.
[3] W. Brown, PY Yen, M. Rojas, R. Schnall, Assessment of the Health IT Usability Evaluation Model (Health-ITUEM) for 
evaluating mobile health (mHealth) technology, Journal of Biomedical Informatics, 46 (6), 2013. 
https://doi.org/10.1016/j.jbi.2013.08.001
[4] M. Quinde, N. Khan, J.C. Augusto, A. van Wyk, A Human-in-The-Loop Context-Aware System Allowing the Application
of Case-Based Reasoning for Asthma Management. In: Duffy V. (eds) Digital Human Modeling and Applications in Health, 
Safety, Ergonomics and Risk Management. Healthcare Applications. HCII 2019. Lecture Notes in Computer Science, vol
11582. Springer, Cham, 2019. https://doi.org/10.1007/978-3-030-22219-2_10
[5] J. C. Augusto, M. Quinde,C. L. Oguego, Context-aware Systems Testing and Validation, 2019 10th International 
Conference on Dependable Systems, Services and Technologies (DESSERT), Leeds, United Kingdom, 2019, pp. 7-1, 2019. 
https://doi.org/10.1109/DESSERT.2019.8770048
Bibliografía
[6] J. C. Augusto, M. Jose Quinde, N. Kahn, Using Formal Methods to Guide the Development of an Asthma Management 
System, 2019 10th International Conference on Dependable Systems, Services and Technologies (DESSERT), Leeds, 
United Kingdom, 2019, pp. 57-62, 2019. https://doi.org/10.1109/DESSERT.2019.8770017
[7] B. Shackel, Usability—context, framework, definition, design and evaluation. In: Shackel B, Richardson SJ, editors. 
New York (NY), Cambridge University Press, 1991.
[8] E. Law, V. Roto, M. Hassenzahl, A. Vermeeren, J. Kort, Understanding, Scoping and Defining User Experience: A Survey 
Approach. In Proc. Human Factors in Computing Systems, CHI’09. April 4-9, 2009.
29/05/2020
22
Any Questions?