Post on 31-Jan-2016
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
• [1] Sommerville Ian, Ingeniería del Software – 7ma Ed.Cap. 16 “ Diseño de Interfaces de Usuario”Cap. 17 “Desarrollo rápido de Software” [Sección
17.4]
• [2] Kendall K., Kendall J., Análisis y Diseño de Sistemas, 6 Ed.
Cap. 6 “ Elaboración de Prototipos, RAD y Programción Extrema” [Sección: El papeldel usuario en la elaboración de prototipos]
Cap. 14 “Diseño de Interfaces de Usuario”
• [3] Pressman Roger, Ingeniería del Software – Un enfoque Práctico 7ma Ed.
Cap. 11 “ Diseño de Interfaz de usuario”
Contenidos de la materia
Unidad 3 - Diseño de Interfaces y Componentes
a. Reglas de oro.
b. Tipos de Interfaces de Usuario
c. Diseño de salida eficaz.
d. El proceso de diseño de interfaz de usuario.
i. Análisis y modelado de tareas
ii. Actividades de diseño de la interfaz
iii. Herramientas de Implementación.
e. Diseño a nivel de Componentes
i. Programación estructurada
ii. Comparación de Notaciones de Diseño
Unidad 4 - Diseño orientado a Objeto I
Casos de Uso Reales
Agenda
¿Qué es un prototipo?
Modelo de Construcción de Prototipos
Los prototipos y el ciclo de vida [procesos de Ingeniería en Sistemas ]
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
Un prototipo es una versión inicial de un sistema que
se utiliza para:
demostrar conceptos,
probar opciones de diseño,
informarse más del problema y sus posibles
decisiones
¿Qué es un prototipo?
Un prototipo es una versión inicial de un sistema que
se utiliza para:
demostrar conceptos,
probar opciones de diseño,
informarse más del problema y sus posibles
decisiones
¿Qué es un prototipo?
¿Qué es un prototipo?
Una representación, o un modelo a escala reducida, que
permite visualizar el comportamiento de lo que será el
sistema real que se diseñará:
Permite conocer tanto el comportamiento del sistema
que se diseña, como las reacciones de los usuarios ante
el mismo.
Personas
Las personas no son anónimas para nosotros. Es importante que
nosotros conozcamos las necesidades, intereses y objetivos
de los usuarios
Enfoques para la construcción de
prototipos
Enfoques para la construcción de
prototipos
Prototipo Evolutivo
Comienza con las partes
menos entendidas del
sistema
Obtener y validar los
requisitos en sus etapas
iniciales
Comienza con los
requisitos que mejor se
comprenden
Se entrega al usuario un
incremento funcional del
Sistema
Clarificar requisitos,
informar los cambios
Riesgos del clienteRiesgos tecnológicosRiesgos de los requisitosRiegos del proyecto
Valoración y reducción de Riesgos
Prototipo Throw-away
(desechable)
Modelo de construcción de prototipos
Modelo de construcción de prototipos
Áreas o departamentos
Objetivos globales
Identifican los
requerimientos
Modelo de construcción de prototipos
Áreas o departamentos
Objetivos globales
Identifican los
requerimientos
Centrado en aspectos del
software visibles para el
usuario:
Interfaz de usuario
Salidas impresas
El cliente / usuario
evalúa el prototipo
Se refinan los
requerimientos
¿Cuándo usar el Modelo de
construcción de prototipos?
El modelo de construcción de prototipos se recomienda
usarlo cuando:
El cliente define un conjunto de objetivos generales
para el software
No identifica los requerimientos detallados de
entrada, proceso o salida
No se está seguro de la eficacia de un algoritmo
No se conoce exactamente la tecnología de
desarrollo
Ventajas y desventajas
Desventajas de la elaboración
de Prototipos
Ventajas de la elaboración de
prototipos
Es difícil manejar la elaboración
de prototipos como un proyecto
dentro de un esfuerzo de
sistemas más grande
(codificación temprana)
Existe el potencial para hacer
cambios en el sistema en las
primeras etapas de su
desarrollo.
Los usuarios y analista pueden
adoptar a un prototipo como un
sistema terminado cuando es
inadecuado.
Existen oportunidades para
detener el desarrollo de un
sistema que no es funcional.
Puede atacar necesidades de
usuario y expectativas más
cercanas.
Los prototipos y los procesos de la Ingeniería en Sistemas
de Información
Definición de Requisitos
Análisis del Sistema
Diseño del Sistema
istIngeniería de Sub-sistemas In Integración y Pruebas
Pruebas del Sistema
Instalación del Sistema
Evolución del Sistema
Definición de Requisitos
Análisis del Sistema
Diseño del Sistema
istIngeniería de Sub-sistemas In Integración y Pruebas
Pruebas del Sistema
Instalación del Sistema
Evolución del Sistema
El prototipo ayuda adescubrir, seleccionar ya validar requisitos encuanto a los eventos ya la información
Los prototipos y los procesos de la Ingeniería en Sistemas
de Información
Análisis del Sistema
Diseño del Sistema
istIngeniería de Sub-sistemas In Integración y Pruebas
Pruebas del Sistema
Instalación del Sistema
Evolución del Sistema
El prototipo sirve paradecidir sobre temas denavegación, facilidadde aprendizaje, tiposde ventanas…
Definición de Requisitos
Los prototipos y los procesos de la Ingeniería en Sistemas
de Información
Análisis del Sistema
Diseño del Sistema
istIngeniería de Sub-sistemas In Integración y Pruebas
Pruebas del Sistema
Instalación del Sistema
Evolución del Sistema
El prototipo ha evolucionado a interfaz de usuario y ayuda en los procesos de Verificación y Validación
Definición de Requisitos
Los prototipos y los procesos de la Ingeniería en Sistemas
de Información
Análisis del Sistema
Diseño del Sistema
istIngeniería de Sub-sistemas In Integración y Pruebas
Pruebas del Sistema
Instalación del Sistema
Evolución del Sistema
El prototipo (UI) vincula al desarrollo con el mantenimiento reduciendo los costos del sistema y aumentando la tolerancia al cambio
Definición de Requisitos
Los prototipos y los procesos de la Ingeniería en Sistemas
de Información
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
uc Vista de casos de uso
Despachador
Env iar_Pedidos
Facturar_Pedidos
Empleado de
Facturación
Consultar_Clientes
«include»
class Vista lógica
Clientes
- Apellido: str
- Domicil io: str
- Nombre: str
Prov incias
- Nombre: str
Pedidos
- estado: str
- número: int
- total: float
Conceptos de
pedido
- cantidad: int
especificacion de
productos
- descirpcion: str
1
viven-en
1..*
1
solicita
1..* 1
contiene
1..*
1..*
describe
1
Documentos de Casos de Uso
Escenario de éxito . Eventos
Presentación - Vista
Información . Modelo
Comportamiento
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
act Desarrollo prototipos
Usuarios FinalesAnalistas e Ingenieros
Establecer los objetiv os de
aprendizaje del prototipo
Definir la funcionalidad del
Prototipo
Desarrollar el Prototipo
Objetiv os
Documento de
Casos de Uso
Prototipo
Ev aluar el Prototipo
Reporte de la
Ev aluación
FinalDeActividad
Modelo del
Dominio
Descubrir y validar los requisitos según
los eventos del negocio y la información
Funcional
No Funcional – (Papel, pizarrón, CASE)
De características seleccionadas
Sugerencias
Innovaciones
Reacciones
• Ahora a trabajar…
• Inicio de la 2da parte.
Contenidos de la materia
Unidad 3 - Diseño de Interfaces y Componentes
a. Reglas de oro.
b. Tipos de Interfaces de Usuario
c. Diseño de salida eficaz.
d. El proceso de diseño de interfaz de usuario.
i. Análisis y modelado de tareas
ii. Actividades de diseño de la interfaz
iii. Herramientas de Implementación.
e. Diseño a nivel de Componentes
i. Programación estructurada
ii. Comparación de Notaciones de Diseño
Unidad 4 - Diseño orientado a Objeto I
Casos de Uso Reales
Agenda – 2da. parte
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 Reales• Documentar la interacción del usuario con el 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
Artefactos
Actividades
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 Actividad: Analizar y comprender las actividades
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 Actividad: 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
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
Actividad: Prototipado de la Interfaz de Usuario
Agenda
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
Actividad: Prototipado de la Interfaz de Usuario
Principios de diseño del las IU
Reglas de oroPrincipio 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 ventanas de 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 Actividad: 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 Actividad: 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
Actividad: 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 Caso de uso realSincronía entre los modelos
Disposiciones de
las ventanas
Modelo de Casos de Uso
Documentos de CU
Diagrama de Clases
Diagrama de Colaboración
Casos de Uso reales
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 realDocumento parcial – 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. ...
Agregar pre y pos condiciones
Agenda
A E
H
F B
I
• Fin de la presentación