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
• Antecedentes
• PPyPP
• Justificacion
• Objetivos
• Delimtacion
• Marco Teorico
• Bases Teoricas
• Bases Legales
• Tipo de Investigacion
• Diseño de la inve
• Metodologia de desarrolloa
• Fases de la metodologia}
• Metodos y Tecnicas
• Recursos: Hw, Sw y
Humano
• Cronogama
Curso 2007
• Introducicon
• Antecedentes
• PPyPP
• Justificacion
• Objetivos
• Delimtacion
• Marco Teorico
• Bases Teoricas
• Bases Legales
• Tipo de Investigacion
• Diseño de la inve
• Metodologia de desarrolloa
• Fases de la metodologia
• Fase 1: Resultados de las técnicas
• Cronograma
• Fase 2: diagramas uml, base de datos, dfd,
diccionario de datos
• Fase 3: Codificacion (liberias nuevas)
• Fase 4: pruebas y manuel del sistema
• Metodos y Tecnicas
• Recursos: Hw, Sw y Humano
• Resultados
• Discusion
• Conclusiones
• Reomendaciones
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 pue­den 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 pue­den 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