Diseo de Interfaces

2
Diseo Fsico
Es la Especificacin detallada del Diseo lgico
Considera:
Diseo de las Entradas
Formularios, formularios pre-impresos, archivos
Seguridad de las entradas
Diseo de los Procesos
Tcnicas utilizadas, Cartas de estructura, Diagrama de Procesos,
tcnicas de especificacin de programas.
3
Diseo Fsico
Diseo de las Salidas
Informes, formularios pre- impresos, pantallas, archivos,
grficos, salidas multimediales.
Seguridad de las salidas
Diseo de los Datos
Modelo fsico de los datos
Diseo de Interfaz
Diseo de la interfaz de usuario
Pantallas de Ingreso
Pantallas de Operaciones, consultas
Men
4
Diseo de Salidas
DEBEN:
Tener significado para el usuario
Cumplir con los objetivos
Volumen adecuado
Oportunos
Mtodo de Salida (Medio /dispositivo de salida
(pantalla, audio, impreso, grficos, etc))
Distribucin adecuada

5
Diseo de Salidas
Tipos:
Externas:
En relacin a los clientes, proveedores, vendedores,
entidades bancarias, etc.
Internas:
Informes para la toma de decisiones. Se distribuyen al
interior de la organizacin.

6
Diseo de Salidas
Ejemplos De Mtodos de Salida
Impresora: salida permanente de informacin, permite
entregar grandes volmenes de informacin, costo
razonable, entre otras..
Pantalla: salida efmera o temporal, interactiva,
volumen de informacin ms reducido,
Audio: salida efmera o temporal, ms dinmica,
requiere hardware adicional.
7
Diseo de Salidas
Ejemplos De Mtodos de Salida
Impresora: salida permanente de informacin, permite
entregar grandes volmenes de informacin, costo
razonable, entre otras..
Pantalla: salida efmera o temporal, interactiva,
volumen de informacin ms reducido,
Audio: salida efmera o temporal, ms dinmica,
requiere hardware adicional.
8
Diseo de Salidas
La eleccin de la tecnologa de salida depende:
Quin usar la salida?
Con qu frecuencia?
Donde se necesita?
Cual es el propsito?
Con que velocidad se requiere?
Cuantas personas necesitan de ella?
Cuanto tiempo permanecer?
Costos (de adquirir, operar y mantener)

10
11
Pantalla de Consulta
13
Diseo de Informes Impresos
DEBE CONSIDERAR
Perifrico de obtencin (impresora)
Medio
Formato
Eleccin de una Impresora depende:
Costo
Calidad requerida
Velocidad
Copias o duplicados
otras Caractersticas como ruido, espacio que ocupan, etc.
14
Diseo de Informes Impresos
Tipos de Impresoras
Impacto. An utilizadas por su bajo costo, resistencia y
para los informes con copias mltiples
matriz de punto. Su velocidad depende de la calidad requerida.
Margarita. Logra mayor calidad y precisin
de Banda (obtena mayor velocidad pero menor calidad)
Son ruidosas, gran volumen, limitada capacidad grfica.
15
Diseo de Informes Impresos
Tipos de Impresoras
No Impacto
Tinta (Burbuja o Inyeccin). Alta capacidad y calidad grfica,
manejo de colores, velocidad-calidad
Lser. Alta calidad y velocidad
Silenciosas, permiten presentaciones de alta calidad
16
Diseo de Informes Impresos
Medio de obtencin, PAPEL:
Tipo
Oficina
Continuo
original (blanco)
pautado (con lneas)
Tamao
carta (8,5 * 11)
oficio (8,5 * 13)
15 *6
15*8,5
15 * 9
17
Diseo de Informes Impresos
Medio de obtencin, PAPEL:
Gramaje: Es la densidad del papel, gramos de papel por
cm
2
. Tiene que ver con el grosor del papel.
Debe ser consideradas dependiendo del tipo de impresora
Calidad (Blancura, Prepicado, textura, etc)
18
Diseo de Informes Impresos
Formato. Varia dependiendo de tres
caractersticas:
Destino. A quin va dirigido?
Interno. No requieren la identificacin detallada de la
organizacin, basta con la especificacin del sistema que lo
emite.
Externo. Tienen una presentacin ms formal, puede estar
sujeto a alguna normativa (ejem. SII), debe estar bien
identificada la organizacin (nombre, razn social, rut,
direccin, telefono, giro, entre otros.)
19
Diseo de Informes Impresos
Uso o informacin contenida
De detalle.
Son aquellos donde se hace un vaciado de archivos.
Contienen gran cantidad de informacin y son voluminosos
de Excepcin
Contienen informacin resumida de a cuerdo alguna restriccin
o condicin especifica.
F
o
r
m
a
t
o

20
Diseo de Informes Impresos
Uso o informacin contenida
Resumida
Informacin resumida o totales/subtotales, focalizada o
localizada.
Diseo
Estticos
Presentacin del informe, legibilidad a simple vista.
Elementos que considera, mrgenes, tipo de papel, tamao de
letra, color, entre otros.
F
o
r
m
a
t
o

21
Diseo de Informes Impresos
Diseo
Funcionales
Se refieren al contenido del informe, con la organizacin de
ste (estructura)
Deben considerar como referencia el uso del informe

F
o
r
m
a
t
o

22
Diseo de Informes Impresos
Diseo
Elementos de Esttica
Mrgenes
Bordes +
Header = encabezado
Footer = Pe de Pgina
Uso de espacios en blanco,
en su justa medida
F
o
r
m
a
t
o

header
footer
Cuerpo
8,5
11
B.D
B.I
B.S
B.In
23
Diseo de Informes Impresos
Diseo elementos de esttica
Enumeracin De Pginas
Fecha de emisin (opcionalmente Hora)
Usar un Formato estndar
La informacin que contiene el informe se divide en:
Constante
Variable
F
o
r
m
a
t
o

24
Diseo de Informes Impresos
Diseo elementos de Funcionalidad
Ttulos autodescriptivos y concisos (no redundar con la
palabra informe)
Las descripciones de cada campo del formulario deben ser
claras, evitar notaciones crpticas. (de utilizarlas, debe ser
aclarado su significado al final)
Separacin adecuada entre campos.
Destacar totales/subtotales
La enumeracin de los campos variables puede facilitar la
verificacin manual de los datos.
F
o
r
m
a
t
o

25
Diseo de Informes Impresos
Diseo elementos de Funcionalidad
Notacion para especificar los datos en un informe de
salida impreso
ALFABTICO: AAA
ALFANUMRICO: XXX
NUMEROS:
9999
99.99
FECHAS
99-99-9999
MM/AA
DD-MM-AAAA

F
o
r
m
a
t
o

26
Diseo de Informes Impresos
Diseo elementos de Funcionalidad
Supresin del Largo
ZZ9 ejemplos
1
15
889
Z99
45
789

F
o
r
m
a
t
o

27
Diseo de Informes Impresos
Diseo elementos de Funcionalidad
Proteccin de cifras (utilizadas para expresar
cantidades $)
Ejemplos:
$.$$9
0010 => $10
0100=> $100
1500=>1500
F
o
r
m
a
t
o

28
29
30
31
Diseo de Informes Impresos
Una vez diseado el informe, es decir,
descritos cada uno de los campos
estticos y variables (longitud, tipo y
ubicacin), es posible estimar la
cantidad de pginas del informe y el
tiempo de impresin.
32
Estimacin de N de Pginas de un Informe
Depende de:
Tamao del Papel
Mrgenes
N de Registros lgicos (campos
variables) y longitud
N de Lneas de encabezado, pie
de pgina (Headen/Footer), N de
lneas de descripcin, ttulos, y
campos estticos
Cantidad de lneas por pulgada
33
Estimacin de N de Pginas de un Informe
Ejemplo
Tamao del Papel : 8,5 *11
Mrgenes:
derecho 0.5 - Izquierdo 1
superior 0,5 - inferior 0,5
N de Registros lgicos:500 con 1 registro por
lnea.
Total Lneas Header: 6 Lneas
Total Lneas Footer: 4 Lneas
Si la impresin es de 6 lneas por pulgada
34
Estimacin de N de Pginas de un Informe
Ejemplo

11 -1=10 por hoja
10 * 6 lneas = 60 lneas por hoja
60 - 10 (header + footer)= 50 lneas por
hoja
500 lneas de reg. lgicos / 50 = 10
pginas
35
Estimacin de tiempo de impresin de un Informe
Requiere:
n pginas o lneas de impresin
velocidad de impresin
Ejemplo anterior :
10 pginas
Velocidad 3 pginas * minuto
tiempo= total pginas/velocidad por
pgina
tiempo=10/3= 3.3333 minutos
36
Estimacin de tiempo de impresin de un Informe
Otro ejemplo
papel=8.5*11
Registros de impresin = 3000 (2 por lnea)
impresora 1200 lneas por minuto
Salto de lnea =6 LP
Lneas header/footer (+mrgenes) =18
N Pginas 125
Calculo
Total lneas header/footer =18*125=2250
Total lneas = 2250 + 2*3000=8250
Tiempo (minutos) = 8250 lneas/ 1200 L*M= 6.875
37
Diseo Fsico
Formularios de Entrada
Documentos duplicados o pre-impresos que son
llenados de acuerdo a un procedimiento estandarizado.
Alimentan de Informacin al Sistema
CONSIDERACIONES para el diseo:
Fciles de llenar
Que agrupen lgicamente los datos
Mantengan una estructura clara, que indique con precisin el
orden de llenado
Utilicen vocabulario conocido por los usuarios
38
Diseo Fsico
Formularios de Entrada
CONSIDERACIONES para el diseo:
Satisfacer el propsito deseado
Completitud de la informacin
Fciles de interpretar
Asegurar la precisin del llenado, utilizan vocabulario claro y
no ambiguo. Por ejemplo deben incorporar indicaciones de
llenado.
Deben ser atractivos, por ejemplo entregar espacio suficiente,
uso apropiado de color, tamao de letra, Logos,
39
Diseo Fsico
Formularios de Entrada
CONSIDERACIONES para el diseo:
Utilicen en forma optima el espacio disponible. Los
formularios que contienen demasiada informacin pueden
provocar la desmotivacin del usuario, los errores, omisiones,
etc.. Por otra parte, dividir un formulario (2 o ms) o utilizar
ms de una hoja, puede provocar la pierda del sentido lgico
de la entrada de los datos (orden) y provocar problemas
similares a los anteriores.
Deben ser consistentes con el diseo de las pantallas de ingreso
de datos.

40
Diseo Fsico
Formularios de Entrada
Un buen Diseo permite:
reducir la cantidad de errores en el ingreso de datos
facilitan la verificacin manual de la correctitud de los datos
reducen el tiempo de llenado,
estandarizan y formalizan los flujos de informacin en la
empresa.
Incorpore otros beneficios......
La correctitud en la entrada de datos permite obtener
correctitud en la salida
41
Diseo Fsico
Formularios de Entrada
Los datos que ser ingresados al sistema pueden
provenir de:
Formularios de uso interno. Por ejemplo, en este tipo de
formularios se destaca el ttulo del formulario y se identifica su
origen (no lleva los datos de la empresa)
Formularios externos
Salidas de otros sistemas de la empresa (en ste caso y el
anterior, las consideraciones deben ser tomadas en el diseo de
las pantallas de ingreso)
Formularios pre- impresos ( planos )
42
Diseo Fsico
Secciones de un formulario:
Dependiendo del
formulario y las
necesidades de la
empresa, deben
incorporados los campos:
Fecha
Nmero copia y destino
Nmero de formulario,
etc.
Encabezado
Firma - Verificacin -
VB
Indicaciones de llenado
Cuerpo : datos variables del formulario
(en cantidad y detalle)
Ttulo
Identificacin y
acceso
Totales
Comentarios - Observaciones
Ejemplo
43
Diseo Fsico
Formulario Pre-Impreso:
Pueden ser utilizados para la entrada de datos o
salida.
Planos: Son utilizados para el ingreso de datos al
sistema y pueden llenarse a mano o a mquina
Continuos : Son utilizados para la salida de informacin
del sistema, por lo tanto es llenado por la impresora.
44
Formulario Pre-Impreso
Los Form. Pre-impresos continuos requieren las
mismas consideraciones que los planos. Al ser
diseados deben incorporar las holguras (espacio)
para el llenado, puesto que el ajuste varia de
impresora en impresora.
Las copias y el destino de cada una debe ser
especificado claramente, por ejemplo a travs de
colores distintivos.
45
Formulario Pre-Impreso
Uso de colores (de letra, de Fondo y de Lneas)
El color debe ser utilizado para destacar o diferenciar,
su uso excesivo puede distraer al usuario.
los colores encarecen el formulario, dependiendo si este va a
una imprenta o al programador
determinan la eleccin del medio de salida, impresora y las
especificaciones de hardware para ella.
46
Formulario Pre-Impreso
Tipo y caractersticas del papel:
Gramaje
Calidad
Prepicado
Continuo/hojas sueltas
La eleccin depende entre otras cosas, del uso del
formulario, interno o externo, n de copias y $.
47
Resumen de las especificaciones de un Formulario
Ttulo
Descripcin
Uso y Distribucin
Tamao (especificado en pulgadas)
Cantidad
Diseo
Colores
Gramaje
N formulario y Fecha

48
Diseo de Pantallas
El diseo de la interfaz grfica de un sistema es
uno de los FACTORES que determina su xito y
aceptacin por lo usuarios.
Existen un gran nmeros de sistemas que cumplen
con la funcionalidad requerida, empero, no son
usados por el mal diseo grfico de sus interfaces
(ineficiencia, poco atractivas, complicadas)
49
Diseo de Pantallas
Consideraciones:
Atractivas
Eficaz (cumpla con las necesidades del Usuario)
Eficientes
Voluminosas (exceso de informacin)
Complejas
Inconsistentes con la lgica interna de los datos y
operaciones.
Inconsistencias con otros sistemas existentes
50
Diseo de Pantallas
Consideraciones:
Estandarizacin
De diseo (lugar o distribucin de la informacin y
objetos (botones, logos, cuadros de dialogo, etc))
Operativa, la mantener las mismas opciones
generales y el significado de stas. Por ejemplo:
botn Cancelar - Anular - Cancel

51
Diseo de Pantallas
Consideraciones:
Cuadros de dialogo
Errores
de Informacin
Pregunta
de Advertencia
Contenido: claros y precisos, que definan inequvocamente el
suceso.
Forma: mantener ubicacin, logos, sonidos, colores, y en lo
posible tamao.

52
Diseo de Pantallas
Consideraciones:
Efectos especiales.
Deben utilizarse en forma moderada y consistente durante todo
el sistema.
Deben mantener consistencia incluso con otras aplicaciones
existentes.

53
Diseo de Pantallas de Ingreso de Datos
Consideraciones:
RESTRINGIR al operador slo a las reas de ingreso de datos.
FACILITAR ingreso a travs avance automtico entre campos
(uso TAB, mouse, enter)
Destacar los Campos de Ingreso de Datos
Rtulos de Campos Claros, evitar notaciones crpticas.
Especificar el llenado de campos
--/--/---- (dd/mm/aaaa)
Diseo de sistemas de Codificacin
54
Diseo de Pantallas de Ingreso de Datos
Consideraciones:
Utilice mecanismos para asegurar el ingreso de datos (no
necesariamente esperar hasta el final)
No obligue el uso de caracteres especiales ($ % / \)
Para los campos con valores estndar, Entregar campos con valores
por defecto
Proveer de medios de abortar la operacin
Mantenga la consistencia (lgica y fsica) entre la pantalla de
ingreso y el formulario de entrada utilizado.
55
56
57
Diseo de Pantallas de Ingreso de Datos
Consideraciones:
Incorporar validaciones durante el ingreso
Ponga disponible las operaciones bsicas de entrada (agregar,
borrar, modificar)
Evitar el ingreso de datos calculados (son utiles para la
verificacin manual de la entrada de datos)
Facilite el desplazamiento entre pantallas y la solicitud de mayor
detalle.
El diseo de las pantallas debe ser chequedo con
los Usuarios.
58
Diseo de Pantallas de Ingreso de Datos
MENU
El diseo de las opciones de men, se realiza Top -
Down. En el nivel superior se encuentran las operaciones
lgicas y en el ltimo nivel las operaciones fsicas.
Deben mantener la lgica de las operaciones y los datos,
sin que esto se transforme en algo engorroso.
59
Tipos de Seguridad en las entradas/salidas
Seguridad en las entradas
Sobre lo Datos (ingreso)
Sobre la operatividad del Sistema
El ingreso de datos debe estar restringido slo a las
personas encargadas. Es decir, deben quedar en
manos de los Responsables.
60
Tipos de Seguridad en las entradas/salidas
Sobre la operacin, los datos deben ser
manipulados (vistos y operados) por los
responsables y autorizados para ello. No todos los
usuarios deben conocer toda la informacin
manejada por el sistema, por ejemplo, un vendedor
no tiene por qu manejar informacin del resto de
los vendedores.
61
Tipos de Seguridad en las entradas/salidas
Las especificaciones (procesos, salidas, entradas)
del diseo lgico deben describir las restricciones
correspondientes.
Para restringir la entrada y operaciones, la forma
ms comn es el uso de Password, otra forma es la
implementacin de un archivo de login.
62
Tipos de Seguridad en las entradas/salidas
El Archivo de login, es un archivo donde se
registran los usuarios, autorizaciones y el detalle de
todas las transacciones realizadas por el. Es
manejado por el administrador de datos
(administrador de base de datos). Los DBMS
actuales facilitan la implementacin de ste tipo de
archivos.
63
Tipos de Seguridad en las entradas/salidas
Seguridad en las salidas
Se refiere a asegurar que la informacin de salida
est en manos de las personas que corresponden.
Medios:
especificar en el mismo informe, quien o a quien va
dirigido
Incorporar un sello distintivo para informes
confidenciales. (en la impresin o despus de ella)
64
Tipos de Seguridad en las entradas/salidas
Medios:
Guardar los informes confidenciales en reas de
seguridad.
Generar slo en nmero de copias requeridas o
necesarias.
Controlar el nmero de veces que ha sido solicitado el
informe, registrando por cada vez (o despus de la n vez)
el usuario que lo solicit.