Diseño de Interfases Segunda parte Basado en documentos de Prof. Alejandra Segura N.

Diseño Físico Es la Especificación detallada del Diseño lógico Considera: Diseño de las Entradas Formularios, formularios pre-impresos, archivos Seguridad de las entradas Diseño de los Procesos Técnicas utilizadas, Cartas de estructura, Diagrama de Procesos, técnicas de especificación de programas.

Diseño Físico Diseño de las Salidas Diseño de los Datos Informes, formularios pre- impresos, pantallas, archivos, gráficos, salidas multimediales. Seguridad de las salidas Diseño de los Datos Modelo físico de los datos Diseño de Interfaz Diseño de la interfaz de usuario Pantallas de Ingreso Pantallas de Operaciones, consultas Menú

Diseño de Salidas DEBEN: Tener significado para el usuario Cumplir con los objetivos Volumen adecuado Oportunos Método de Salida (Medio /dispositivo de salida (pantalla, audio, impreso, gráficos, etc)) Distribución adecuada

Diseño de Salidas Tipos: Externas: Internas: En relación a los clientes, proveedores, vendedores, entidades bancarias, etc. Internas: Informes para la toma de decisiones. Se distribuyen al interior de la organización.

Diseño de Salidas Ejemplos De Métodos de Salida Impresora: salida permanente de información, permite entregar grandes volúmenes de información, costo razonable, entre otras.. Pantalla: salida efímera o temporal, interactiva, volumen de información más reducido, Audio: salida efímera o temporal, más dinámica, requiere hardware adicional.

Diseño de Salidas Ejemplos De Métodos de Salida Impresora: salida permanente de información, permite entregar grandes volúmenes de información, costo razonable, entre otras.. Pantalla: salida efímera o temporal, interactiva, volumen de información más reducido, Audio: salida efímera o temporal, más dinámica, requiere hardware adicional.

Diseño de Salidas La elección de la tecnología de salida depende: ¿Quién usará la salida? ¿Con qué frecuencia? ¿Donde se necesita? ¿Cual es el propósito? ¿Con que velocidad se requiere? ¿Cuantas personas necesitan de ella? ¿Cuanto tiempo permanecerá? Costos (de adquirir, operar y mantener)

Pantalla de Consulta

Diseño de Informes Impresos DEBE CONSIDERAR Periférico de obtención (impresora) Medio Formato Elección de una Impresora depende: Costo Calidad requerida Velocidad Copias o duplicados otras Características como ruido, espacio que ocupan, etc.

Diseño de Informes Impresos Tipos de Impresoras Impacto. Aún utilizadas por su bajo costo, resistencia y para los informes con copias múltiples matriz de punto. Su velocidad depende de la calidad requerida. Margarita. Logra mayor calidad y precisión de Banda (obtenía mayor velocidad pero menor calidad) Son ruidosas, gran volumen, limitada capacidad gráfica.

Diseño de Informes Impresos Tipos de Impresoras No Impacto Tinta (Burbuja o Inyección). Alta capacidad y calidad gráfica, manejo de colores, velocidad-calidad Láser. Alta calidad y velocidad Silenciosas, permiten presentaciones de alta calidad

Diseño de Informes Impresos Medio de obtención, PAPEL: Tipo Oficina Continuo original (blanco) pautado (con líneas) Tamaño carta (8,5” * 11”) oficio (8,5” * 13”) 15” *6” 15”*8,5” 15” * 9”

Diseño de Informes Impresos Medio de obtención, PAPEL: Gramaje: Es la densidad del papel, gramos de papel por cm2. Tiene que ver con el grosor del papel. Debe ser consideradas dependiendo del tipo de impresora Calidad (Blancura, Prepicado, textura, etc)

Diseño de Informes Impresos Formato. Varia dependiendo de tres características: Destino. ¿A quién va dirigido? Interno. No requieren la identificación detallada de la organización, basta con la especificación del sistema que lo emite. Externo. Tienen una presentación más formal, puede estar sujeto a alguna normativa (ejem. SII), debe estar bien identificada la organización (nombre, razón social, rut, dirección, telefono, giro, entre otros.)

Diseño de Informes Impresos Uso o información contenida De detalle. Son aquellos donde se hace un vaciado de archivos. Contienen gran cantidad de información y son voluminosos de Excepción Contienen información resumida de a cuerdo alguna restricción o condición especifica. Formato

Diseño de Informes Impresos Uso o información contenida Resumida Información resumida o totales/subtotales, focalizada o localizada. Diseño Estéticos Presentación del informe, legibilidad a simple vista. Elementos que considera, márgenes, tipo de papel, tamaño de letra, color, entre otros. Formato

Diseño de Informes Impresos Funcionales Se refieren al contenido del informe, con la organización de éste (estructura) Deben considerar como referencia el uso del informe Formato

Diseño de Informes Impresos 8,5” Diseño Elementos de Estética Márgenes Bordes + Header = encabezado Footer = Píe de Página Uso de espacios en blanco, en su justa medida B.S B.D 11” header Formato B.I Cuerpo footer B.In

Diseño de Informes Impresos Diseño elementos de estética Enumeración De Páginas Fecha de emisión (opcionalmente Hora) Usar un Formato estándar La información que contiene el informe se divide en: Constante Variable Formato

Diseño de Informes Impresos Diseño elementos de Funcionalidad Títulos autodescriptivos y concisos (no redundar con la palabra informe) Las descripciones de cada campo del formulario deben ser claras, evitar notaciones crípticas. (de utilizarlas, debe ser aclarado su significado al final) Separación adecuada entre campos. Destacar totales/subtotales La enumeración de los campos variables puede facilitar la verificación manual de los datos. Formato

Diseño de Informes Impresos Diseño elementos de Funcionalidad Notacion para especificar los datos en un informe de salida impreso ALFABÉTICO: AAA ALFANUMÉRICO: XXX NUMEROS: 9999 99.99 FECHAS 99-99-9999 MM/AA DD-MM-AAAA Formato

Diseño de Informes Impresos Diseño elementos de Funcionalidad Supresión del Largo ZZ9 ejemplos 1 15 889 Z99 45 789 Formato

Diseño de Informes Impresos Diseño elementos de Funcionalidad Protección de cifras (utilizadas para expresar cantidades $) Ejemplos: $.$$9 0010 => $10 0100=> $100 1500=>1500 Formato

Diseño de Informes Impresos Una vez diseñado el informe, es decir, descritos cada uno de los campos estáticos y variables (longitud, tipo y ubicación), es posible estimar la cantidad de páginas del informe y el tiempo de impresión.

Estimación de Nº de Páginas de un Informe Depende de: Tamaño del Papel Márgenes Nº de Registros lógicos (campos variables) y longitud Nº de Líneas de encabezado, pie de página (Headen/Footer), Nº de líneas de descripción, títulos, y campos estáticos Cantidad de líneas por pulgada

Estimación de Nº de Páginas de un Informe Ejemplo Tamaño del Papel : 8,5” *11” Márgenes: derecho 0.5” - Izquierdo 1” superior 0,5” - inferior 0,5” Nº de Registros lógicos:500 con 1 registro por línea. Total Líneas Header: 6 Líneas Total Líneas Footer: 4 Líneas Si la impresión es de 6 líneas por pulgada

Estimación de Nº de Páginas de un Informe Ejemplo 11” -1”=10” por hoja 10” * 6 líneas = 60 líneas por hoja 60 - 10 (header + footer)= 50 líneas por hoja 500 líneas de reg. lógicos / 50 = 10 páginas

Estimación de tiempo de impresión de un Informe Requiere: nº páginas o líneas de impresión velocidad de impresión Ejemplo anterior : 10 páginas Velocidad 3 páginas * minuto tiempo= total páginas/velocidad por página tiempo=10/3= 3.3333 minutos

Estimación de tiempo de impresión de un Informe Otro ejemplo papel=8.5”*11” Registros de impresión = 3000 (2 por línea) impresora 1200 líneas por minuto Salto de línea =6 LP Líneas header/footer (+márgenes) =18 Nº Páginas 125 Calculo Total líneas header/footer =18*125=2250 Total líneas = 2250 + 2*3000=8250 Tiempo (minutos) = 8250 líneas/ 1200 L*M= 6.875

Diseño Físico Formularios de Entrada Documentos duplicados o pre-impresos que son llenados de acuerdo a un procedimiento estandarizado. Alimentan de Información al Sistema CONSIDERACIONES para el diseño: Fáciles de llenar Que agrupen lógicamente los datos Mantengan una estructura clara, que indique con precisión el orden de llenado Utilicen vocabulario conocido por los usuarios

Diseño Físico Formularios de Entrada CONSIDERACIONES para el diseño: Satisfacer el propósito deseado Completitud de la información Fáciles de interpretar Asegurar la precisión 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, tamaño de letra, Logos,

Diseño Físico Formularios de Entrada CONSIDERACIONES para el diseño: Utilicen en forma optima el espacio disponible. Los formularios que contienen demasiada información pueden provocar la desmotivación del usuario, los errores, omisiones, etc.. Por otra parte, dividir un formulario (2 o más) o utilizar más de una hoja, puede provocar la pierda del sentido lógico de la entrada de los datos (orden) y provocar problemas similares a los anteriores. Deben ser consistentes con el diseño de las pantallas de ingreso de datos.

Diseño Físico Formularios de Entrada Un buen Diseño permite: reducir la cantidad de errores en el ingreso de datos facilitan la verificación manual de la correctitud de los datos reducen el tiempo de llenado, estandarizan y formalizan los flujos de información en la empresa. Incorpore otros beneficios...... La correctitud en la entrada de datos permite obtener correctitud en la salida

Diseño Físico 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 título 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 diseño de las pantallas de ingreso) Formularios pre- impresos ( planos )

Diseño Físico Secciones de un formulario: Ejemplo Dependiendo del formulario y las necesidades de la empresa, deben incorporados los campos: Fecha Número copia y destino Número de formulario, etc. Encabezado Firma - Verificación - VºBº Título Indicaciones de llenado Cuerpo : datos variables del formulario (en cantidad y detalle) Identificación y acceso Totales Comentarios - Observaciones

Diseño Físico 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 máquina Continuos : Son utilizados para la salida de información del sistema, por lo tanto es llenado por la impresora.

Formulario Pre-Impreso Los Form. Pre-impresos continuos requieren las mismas consideraciones que los planos. Al ser diseñados 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 través de colores distintivos.

Formulario Pre-Impreso Uso de colores (de letra, de Fondo y de Líneas) 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 elección del medio de salida, impresora y las especificaciones de hardware para ella.

Formulario Pre-Impreso Tipo y características del papel: Gramaje Calidad Prepicado Continuo/hojas sueltas La elección depende entre otras cosas, del uso del formulario, interno o externo, nº de copias y $.

Resumen de las especificaciones de un Formulario Título Descripción Uso y Distribución Tamaño (especificado en pulgadas) Cantidad Diseño Colores Gramaje Nº formulario y Fecha

Diseño de Pantallas El diseño de la interfaz gráfica de un sistema es uno de los FACTORES que determina su éxito y aceptación por lo usuarios. Existen un gran números de sistemas que cumplen con la funcionalidad requerida, empero, no son usados por el mal diseño gráfico de sus interfaces (ineficiencia, poco atractivas, complicadas)

Diseño de Pantallas Consideraciones: Atractivas Eficaz (cumpla con las necesidades del Usuario) Eficientes Voluminosas (exceso de información) Complejas Inconsistentes con la lógica interna de los datos y operaciones. Inconsistencias con otros sistemas existentes

Diseño de Pantallas Consideraciones: Estandarización De diseño (lugar o distribución de la información y objetos (botones, logos, cuadros de dialogo, etc)) Operativa, la mantener las mismas opciones generales y el significado de éstas. Por ejemplo: botón Cancelar - Anular - Cancel

Diseño de Pantallas Consideraciones: Cuadros de dialogo Errores de Información Pregunta de Advertencia Contenido: claros y precisos, que definan inequívocamente el suceso. Forma: mantener ubicación, logos, sonidos, colores, y en lo posible tamaño.

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

Diseño de Pantallas de Ingreso de Datos Consideraciones: RESTRINGIR al operador sólo a las áreas de ingreso de datos. FACILITAR ingreso a través avance automático entre campos (uso TAB, mouse, enter) Destacar los Campos de Ingreso de Datos Rótulos de Campos Claros, evitar notaciones crípticas. Especificar el llenado de campos --/--/---- (dd/mm/aaaa) Diseño de sistemas de Codificación

Diseño 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 estándar, Entregar campos con valores por defecto Proveer de medios de abortar la operación Mantenga la consistencia (lógica y física) entre la pantalla de ingreso y el formulario de entrada utilizado.

Diseño de Pantallas de Ingreso de Datos Consideraciones: Incorporar validaciones durante el ingreso Ponga disponible las operaciones básicas de entrada (agregar, borrar, modificar) Evitar el ingreso de datos calculados (son utiles para la verificación manual de la entrada de datos) Facilite el desplazamiento entre pantallas y la solicitud de mayor detalle. El diseño de las pantallas debe ser chequedo con los Usuarios.

Diseño de Pantallas de Ingreso de Datos MENU El diseño de las opciones de menú, se realiza Top -Down. En el nivel superior se encuentran las operaciones lógicas y en el último nivel las operaciones físicas. Deben mantener la lógica de las operaciones y los datos, sin que esto se transforme en algo engorroso.

Tipos de Seguridad en las entradas/salidas Sobre lo Datos (ingreso) Sobre la operatividad del Sistema El ingreso de datos debe estar restringido sólo a las personas encargadas. Es decir, deben quedar en manos de los Responsables.

Tipos de Seguridad en las entradas/salidas Sobre la operación, los datos deben ser manipulados (vistos y operados) por los responsables y autorizados para ello. No todos los usuarios deben conocer toda la información manejada por el sistema, por ejemplo, un vendedor no tiene por qué manejar información del resto de los vendedores.

Tipos de Seguridad en las entradas/salidas Las especificaciones (procesos, salidas, entradas) del diseño lógico deben describir las restricciones correspondientes. Para restringir la entrada y operaciones, la forma más común es el uso de Password, otra forma es la implementación de un archivo de login.

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 implementación de éste tipo de archivos.

Tipos de Seguridad en las entradas/salidas Seguridad en las salidas Se refiere a asegurar que la información 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 impresión o después de ella)

Tipos de Seguridad en las entradas/salidas Medios: Guardar los informes confidenciales en áreas de seguridad. Generar sólo en número de copias requeridas o necesarias. Controlar el número de veces que ha sido solicitado el informe, registrando por cada vez (o después de la n vez) el usuario que lo solicitó.