Diseñando el Sistema
1. Diseño - qué es
Diseño y Especificación de Requerimientos
Descomposición - Enfoques
2. Arquitectura (distintos estilos)
3. Técnicas y Herramientas
4. Características de un buen diseño
5. Técnicas para mejorar el diseño
6. Validación del Diseño
7. Documentación
Curso 2007 Ingeniería de Software Diseño 1
1. Diseño - qué es
• Significado:
* Proceso por el que se genera una solución a un problema
* Descripción de la solución
* Etimológicamente significa componer, por lo que se obtiene
la solución que habrá de implementarse.
Distintos Diseños
Diseño 1 (Alternativas)
Requeri- permiten cumplir con
Diseño 2
mientos los requerimientos,
... pero cada uno ofrece
Restricciones Diseño n prestaciones
específicas
Curso 2007 Ingeniería de Software Diseño 2
Diseño y
Especificación de Requerimientos(1)
QUÉ CÓMO
DISEÑO DISEÑO
CONCEPTUAL TÉCNICO
Diseñadores
función del Sistema forma
Constructores
Clientes del Sistema
Curso 2007 Ingeniería de Software Diseño 3
Diseño y
Especificación de Requerimientos(2)
“El usuario podrá
enviar mensajes a
cualquier usuario
Topología de Red
en cualquier otra Protocolo
computadora en Velocidad (bps)
red” ...
DISEÑO DISEÑO
CONCEPTUAL TÉCNICO
Ingeniería de Software Diseño 4
Capacidad física y menta de
las personas.
Cuando se toman decisiones en el diseño de las interfaces de
usuario, deben tenerse en cuenta las capacidades físicas y
mentales de las personas que utilizarán el software.
Ingeniería de Software Diseño 5
Mensajes de error
Mensaje orientado al sistema
Error #27
? Identificador de paciente no
válido
Aceptar Cancelar
Mensaje orientado al usuario
El paciente J. Bates no está registrado
Seleccione:
Pacientes para listado de pacientes registrados
Reintentar para reingresar el nombre del paciente
Ayuda para más información
Pacientes Ayuda Reintentar Cancelar
Curso 2007 Ingeniería de Software Diseño 6
CONCEPTOS RELACIONADOS CON
EL DISEÑO ARQUITECTÓNICO
Ingeniería de Software Diseño 7
COMPONENTES DEL DISEÑO
Ingeniería de Software Diseño 8
HERRAMIENTAS
Ingeniería de Software Diseño 9
Conversión de un modelo a Análisis
en un diseño de software
Curso 2007 Ingeniería de Software Diseño 10
El proceso de diseño de la
interfaz de usuario
Curso 2007 Ingeniería de Software Diseño 11
Cuando se diseña la interfaz entran
en juego 4 modelos diferentes:
1. Modelo de diseño creado por el ingeniero de
software.
2. Modelo del usuario: que puede ser creado por
el ingeniero de software u otros ingenieros.
3. Percepción del usuario.
4. Imagen del sistema creada por los que
implementan el sistema.
Ingeniería de Software Diseño 12
Interacción del usuario
Curso 2007 Ingeniería de Software Diseño 13
categorías de usuarios
Ingeniería de Software Diseño 14
Trabajo Autónomo
• Emplear un organizador grafico
• Investigue sobre los principios Generales
para el Diseño de interfaz de Usuario.
• Determine la importancia en el marco de
Desarrollo de Software.
• Emplear la rubrica de calificación.
Ingeniería de Software Diseño 15
• Introducicon
• Introducicon
• Antecedentes
• Antecedentes • PPyPP
• PPyPP • Justificacion
• Justificacion • Objetivos
• Objetivos • Delimtacion
• Marco Teorico
• Delimtacion
• Bases Teoricas
• Marco Teorico
• Bases Legales
• Bases Teoricas • Tipo de Investigacion
• Bases Legales • Diseño de la inve
• Tipo de Investigacion • Metodologia de desarrolloa
• Diseño de la inve • Fases de la metodologia
• Fase 1: Resultados de las técnicas
• Metodologia de desarrolloa
• Cronograma
• Fases de la metodologia} • Fase 2: diagramas uml, base de datos, dfd,
• Metodos y Tecnicas diccionario de datos
• Recursos: Hw, Sw y • Fase 3: Codificacion (liberias nuevas)
Humano • Fase 4: pruebas y manuel del sistema
• Metodos y Tecnicas
• Cronogama
• Recursos: Hw, Sw y Humano
• Resultados
• Discusion
• Conclusiones
• Reomendaciones
Curso 2007 Ingeniería de Software Diseño 16
Diseño de la Interfaz de Usuario (1)
Principios generales (Sommerville)
• Familiaridad: utilizar términos familiares a los usuarios
• Consistencia: menúes y comandos con el mismo
formato y significado en toda la aplicación
• Mínima sorpresa: misma acción en contextos
comparables produzcan un cambio similar
• Recuperabilidad: recuperación frente a errores
cometidos por el usuario, brindar:
* confirmación de acciones destructivas
* recursos para deshacer en varios niveles
• Guía al usuario: proveer ayuda en varios niveles
• Diversidad de usuarios: tener en cuenta distintos tipos
de usuarios.
Curso 2007 Ingeniería de Software Diseño 17
Color en el diseño de la Interfaz (1)
Lineamientos clave (Shneiderman 1998)
• Limitar cantidad de colores utilizados, no más de
cuatro o cinco colores distintos por ventana
• Utilizar un cambio de color para indicar un cambio en
el estado del sistema
• Utilizar el código de colores para apoyar tarea de
usuarios, por ej. resaltar similitudes o diferencias
• Utilizar el código de colores en forma consistente , por
ej. desplegar mensajes de error en rojo siempre!
• Tener cuidado al combinar colores que puedan
producir cansancio en la vista
Curso 2007 Ingeniería de Software Diseño 18
Color en el diseño de la Interfaz (2)
Elementos culturales
• ¿Qué color utilizar? ¿Púrpura?
* En Inglaterra representa la realeza
* En Japón, dignidad y nobleza
* En Grecia representaba al diablo y la muerte
• Dos pasos para hacer nuestros sistemas multi-
culturales
* (1) eliminar sesgos o referencias a una cultura específica
* (2) ajustar (1) para las culturas que utilizarán el software
Curso 2007 Ingeniería de Software Diseño 19
Preferencias de Usuario
• A ella le gusta, a él no...
• No hay una interfaz universal aplicable a todo el
mundo
• construir un prototipo y evaluarlo con la
audiencia objetivo
• permitir adaptar la interfaz de usuario
* ejemplo: Microsoft Word vs. WordPerfect
Curso 2007 Ingeniería de Software Diseño 20
Guía para definir la interfaz de usuario
Alto
Facilidad de Uso
Medio
Bajo
Reconocimiento Línea de Formu- Pantalla OCR
de Voz Comandos larios sensible optical character
al tacto recognition
Entrada de datos
Curso 2007 Ingeniería de Software Diseño 21
Soporte al Usuario
• Sistema de ayuda debe proveer:
* Mensajes de error
° Amables, concisos, consistentes y constructivos, si es
posible incluir sugerencia para correción
* Ayuda en línea
° Páginas web con hipervinculos, ventanas múltiples
° Cuidar la estructura de navegación, si es compleja los
usuarios se pierden
* Documentación de usuario
° Incluyendo secciones de: instalación, descripción
general, descripción funcional, mensajes de error.
Ingeniería de Software Diseño 22
Elementos Diseño de la Interfaz de
Usuario (2)
Para elaborar el diseño de la interfaz se
utilizarán las siguientes herramientas::
•Diagrama de menús
•Diseño de cada una de las pantallas del
sistema de acuerdo con el diagrama
jerárquico.
•Conteo de Puntos de función
Ingeniería de Software Diseño 23
ESQUEMAS DE MENU
• Los menús proporcionan a los usuarios una forma
sencilla y familiar de recuperar información e
interactuar con el sistema. A los usuarios se les
presenta el diseño completo del sistema a través
de un esquema en forma descendente, donde se
muestran las distintas opciones que el sistema
tendrá.
• La clasificación de los esquemas de menú puede
ser sencillo, en serie, en árbol, en red e integrado.
Ingeniería de Software Diseño 24
Ejemplo de menus
Ingeniería de Software Diseño 25
Ejemplo de menus
Curso 2007 Ingeniería de Software Diseño 26
Ejemplo de menús
Ingeniería de Software Diseño 27
DISEÑO DE PANTALLAS
Lineamientos para el
diseño de formularios:
•Haga que las formas sean
fáciles de llenar.
•Asegúrese de que las formas
satisfacen el objetivo para el
que fueron diseñadas.
•Diseñe formas que aseguren
el llenado preciso.
•Las formas deben ser
atractivas.
Ingeniería de Software Diseño 28
Evaluación de la interfaz
• La evaluación de la interfaz es el proceso de evaluar la
forma en que se utiliza una interfaz y verificar que cumple
los requerimientos del usuario.
• Existen varias técnicas menos costosas y sencillas en la
evaluación de interfaces que pueden identificar deficiencias
específicas en el diseño de interfaces:
* 1. Cuestionarios que recopilan información de lo que opinan los
usuarios de la interfaz.
* 2. La observación de los usuarios cuando trabajan con el sistema y
«piensan en voz alta»
* de cómo tratan de utilizar el sistema para llevar a cabo alguna
tarea.
Curso 2007 Ingeniería de Software Diseño 29
Evaluación de la interfaz
• Existen varias técnicas menos costosas y sencillas en la
evaluación de interfaces que pueden identificar
deficiencias específicas en el diseño de interfaces:
* 3. «Instantáneas» de vídeos del uso típico del
sistema.
* 4. 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.
Curso 2007 Ingeniería de Software Diseño 30
Atributos de Usabilidad
Curso 2007 Ingeniería de Software Diseño 31
Trabajo autónomo
• Mencione la ventajas y desventajas de los
estilos de interacción.
• En que consiste los lineamientos generales para
diseñar sitios Web, de buenos formularios web y
de pantalla, diseño de paginas de intranet e
internet.
• Explique cada uno componentes de un sitio
web: Estructura, Contenido, Texto, Gráficos,
Estilo de presentación, Navegación, Promoción.
Considerar rubrica de investigación
Curso 2007 Ingeniería de Software Diseño 32
lineamientos generales para diseñar sitios
Web
Curso 2007 Ingeniería de Software Diseño 33
lineamientos generales para diseñar sitios
Web
Curso 2007 Ingeniería de Software Diseño 34
lineamientos generales para buenos
formularios web y de pantalla
Curso 2007 Ingeniería de Software Diseño 35
lineamientos generales para buenos
formularios web y de pantalla
Curso 2007 Ingeniería de Software Diseño 36
lineamientos generales para diseño
de paginas de intranet e internet.
• Proveer instrucciones claras; los usuarios Web
tal vez no estén familiarizados con la
terminología técnica.
• Demostrar una secuencia de entrada lógica para
los formularios de llenado.
• Usar varios cuadros de texto, botones, menús
desplegables, casillas de verificación y botones
de opción para funciones específicas y crear
interés en el formulario.
Curso 2007 Ingeniería de Software Diseño 37
lineamientos generales para diseño
de paginas de intranet e internet.
• Proveer un cuadro de texto desplazable si no está
seguro sobre cuánto espacio necesitarán los usuarios
para responder a una pregunta, o sobre el lenguaje, la
estructura o formulario que utilizarán los usuarios para
introducir los datos.
• Preparar dos botones básicos en todos los formularios
de llenado en Web: Enviar y Borrar formulario.
• Si el formulario es extenso y los usuarios se deben
desplazar con mucha frecuencia, divídalo en varios
formularios más simples en páginas separadas.
• Crear una pantalla de retroalimentación que se niegue a
enviar un formulario.
Curso 2007 Ingeniería de Software Diseño 38
