1 1 capítulo 6 output and user interface design prof. nelliud d. torres
TRANSCRIPT
11
Capítulo 6Output and User Interface Design
Prof. Nelliud D. Torres
22
Introducción
• El capítulo 6 describe las técnicas y procedimientos para manejar reportes, formas y otras formas de mostrar al usuario la información
• Output design se enfoca en las necesidades del usuario tanto para formas de output en pantallas o impresas. El user interface design se enfoca en la interación con la computadora. Esto incluye procedimientos y diseño de input.
33
CICLO DE DESARROLLO DE SISTEMAS
ANÁLISIS
MANTENIMIENTO
PLANIFICACIÓN
DISEÑO
DESARROLLOIMPLANTACIÓN
Especificaciones de Input, Output,
Processing y control
Aprobación del usuario
Pruebas, conversión, adiestramientos y documentación.
Vida útil
HCI – Human computer interface
Capítulo 2Capítulos 3 - 5
Capítulos 6 - 8
Capítulo 9 Capítulos 6 - 8
Capítulo 10
44
FASE DE DISEÑO
Systems design tasks
Output and user interface
designData Design
Systemarchitecture
55
Output Design• Antes de diseñar el output, uno debe hacerse las
siguientes preguntas:– ¿Cuál es el propósito de ese output?– ¿ Quién quiere esa información?, ¿ Por qué es
necesaria y cómo se va a utilizar?– ¿Qué información en específico va a ser incluida?– EL output va ser impreso, en pantalla o ambos? ¿Qué
hardware se va a utilizar para producir ese output?– Dependiendo de estas respuestas, así se trabajarán
las estrategias para el output design.
66
Output Design• Types of Output – Aunque muchos tipos de outputs se
muestran en reporte o en pantalla, las nuevas tecnologías proveen nuevas alternativas;– Internet-based information delivery (e-comerce, database) – Crear
pantallas Web fáciles de usar (user friendly). – E-mail – Para confirmar ordenes, reuniones, etc.– Audio – audio output, se pueden enviar por e-mail o incluirlo en un
documento.– Automated facsimile systems – Combinación del Fax con una página
web o una solicitud por e-mail para confirmar o notificar el status de una situación en particular.
• Faxback systems
– Computer output microfilm (COM) – Ahorra mucho espacio de almacenaje de documentos.
• Microfilm, microfiche
– Computer output to laser disk (COLD) – Los reportes o datos se almacenan en un disco óptico. El mismo propósito del microfilm.
77
Printed and Screen Output• Aunque muchas organizaciones tratan de reducir el
uso del papel y de los reportes impresos, solo pocas firmas lo han logrado hacer por completo.
• EL papel es portable e incluso en ciertas ocasiones necesáreo sobre todo en cuestión de firmas y cualquier cosa de índole legal.
• Turnaround documents – Son documentos impresos que vuelven al mismo sistema u otro sistema de la misma compañía. Ej: el Bill del telefono que imprime un talonario que el abonado devuelve con su correspondiente pago.
88
Printed and Screen Output
• Reports – Sea impreso o visto en pantalla, los reportes deben ser atractivos y fácil de entender. Debe tener lo que el usuario necesita. No puede tener muy poca información ya que no sería de valor al usuario, ni tener demasiada debido a que sería confusa y dificil de entender.
99
Printed and Screen Output
– Detail reports – Produce una o más líneas de output por cada record procesado. Pueden ser en extremo largos y en ciertas ocasiones podría ser mejor producir un reporte de excepciones (exception report). En el próximo slide se presenta un ejemplo de un detail report.
1010
EJEMPLO DETAIL REPORT
Detail lines
Títulos
Importante incluir número de página y fecha
1111
Printed and Screen Output
– Detail reports – Además de líneas, puede tener un campo control (control field) que controla la forma en que se va a ver los datos en el reporte. Un control break ocurre cuando un campo control cambia de valor y esto genera un proceso de calcular totales (totals) o subtotales (subtotals). Los subtotales pueden ser por un cambio en valor de un campo control o por cambio de página. Los totales van a final de la página. A continuación se muestra un ejemplo de un detail report detallado.
1212
EJEMPLO DETAIL REPORT-2
Control breaksen el
campo STORE
NUMBER
subtotales
Gran total
1313
Printed and Screen Output
– Exception reports – Son reportes que solo muestran aquellos records que cumplen una condición o condiciones en particular. En el próximo slide mostramos un ejemplo de un reporte en donde solo se muestran aquellos empleados que trabajaron horas extras en la última nómina.
1414
EJEMPLO EXCEPTION REPORT
1515
Printed and Screen Output
– Summary reports – Muchas veces la gerencia alta de una empresa desea ver los totales y no los detalles en un reporte. Por ejemplo, se puede desear ver el total de horas extras trabajadas por cada tienda sin necesariamente saber cuales fueron los empleados que trabajaron ese tiempo extra. A continuación vemos un ejemplo de este tipo de reporte.
1616
EJEMPLO SUMMARY REPORT
1717
Printed and Screen Output
• Involucrar al usuario en el diseño de los reportes– Como los reportes son los que muestran
información útil al usuario, son estos los que deben dar su aprobación e inclusive participar en su diseño.
– Para evitar problemas, se recomienda que se vayan mostrando los reportes según se van haciendo en lugar de esperar a que todos los diseños esten creados.
– Mock-up – Son informes prototipo que el usuario coteja para ver que modicficaciones, si alguna, requiere.
1818
Printed and Screen Output• Principios importantes en el diseño de un reporte
– Deben ser atractivos, profesionales y fáciles de leer.– Report headers and footers – Cada reporte debe tener
una parte de header y footer. En el header puede ir el título del reporte, fecha, página y cualquier otra información importante. En el footer puede ir la página, totales y cualquier otra informacíon que requiera mostrarte al final de cada página.
– Page headers and footers – Se puede incluir los títulos de los campos. Deben ser cortos, pero descriptivos.
– Column heading alignment – Son diferentes formas de alinear el texto con los títulos. Más adelante se muestran ejemplos.
– Column spacing – El espacio entre los datos. Hay que tener cuidado de no poner demasiadas columnas en un reporte o de poner demasiado espacio entre las columnas de datos.
1919
DIFERENTES COMPONENTES DE UN REPORTE
report header
page header
group footer
report footer
page footer
identifying fields
2020
ENCABEZAMIENTOS (COLUMN HEADING)
2121
Printed and Screen Output
• Principios importantes de diseño de reportes – Orden de los campos (Field order)
• Los campos deben mostrarse y agruparse en un orden lógico.
– Agrupar las líneas de detalle (Grouping detail lines)
• Es más facil evaluar un reporte en donde las líneas de detalles están agrupadas.
• A nivel de footer se pueden sacar sub-totales por grupo.
2222
Printed and Screen Output• Report Design Issues
– Si se tiene mucho detalle en la página, esto fuerza a los usuarios a buscar la información que necesitan (se les hace dificil)
– Estandarizar los reportes crea sentido de uniformidad y consistencia a los usuarios.
– Cuando un sistema produce multiples reportes, cada reporte debe compartir elementos comunes de diseño.
2323
REPORTE MEJORADOLa posición más común la omiten
No repiten el mismo número de store
Se omiten los ceros
2424
Printed and Screen Output
• Diseño de reportes tipo Character-Based– Character-based reports – Aún muchas
compañías hoy en dia producen reportes de este tipo. Es una forma rápida y barata de producir reportes largos por ejemplo de sistemas como nómina o finanzas.
– Printer spacing chart (Print Layout) – Una forma de filas y columnas en donde el analista indica la posición de los títulos y los datos.
2525
Printed and Screen Output• Printing Volume and Time Requirements –
A pesar de lo barato de los costos en equipo de impresión, existen costos escondidos (Total Cost of Ownership) si se emplean mal o se calcula incorrectamente el uso del papel por parte del sistema. Por lo tanto es importante para el analista determinar la cantidad de papl que se gasta en los reportes y el tiempo que se toma en imprimirlos.
2626
CALCULOS
– Length calculations – Asuma que la compañía tiene un total de 380 empleados en 6 tiendas. El papel va a tener 66 líneas disponibles por página. Seis líneas se reservan para los margenes inferiores y superiores (Top, Bottom) lo que da un total de 60 líneas de impresión por página. En el reporte, cada página comienza con 6 líneas de encabezamiento lo cual disminuye a 52 las líneas para imprimir información. Como son 380 empleados, se imprimirán 380 líneas. Cada una de las 6 tiendas tienen 3 líneas inferiores (footing) para un total de 18. Finalmente el gran total requiere 3 líneas adicionales. El reporte completo requiere de 401 líneas de detalles y totales. En el próximo slide emos un resumen de estos detalles.
2727
2828
LENGTH CALCULATIONS
2929
TIME CALCULATIONS
– Time calculations – Se puede efectuar dos tipos de cálculos.
• ppm (pages per minute)• line printers
A continuación se muestran dos tablas que calculan el tiempo requerido de impresión.
3030
LENGTH CALCULATIONS
3131
LENGTH CALCULATIONS
3232
Printed and Screen Output
• Output Control and Security– El Output debe ser preciso, completo y seguro.– Output security – Se debe eliminar
adecuadamente aquellos reportes que contienen información sensitiva.
– El departamento de IT es responsable por el control y la seguridad de los reportes.
– Muchas compañías han istalado estaciones de trabajo (workstations) sin disco duro. (epoca de las mainframes)
3333
User Interface Design• Aunque el output design envuelve un conjunto
separado de problemas de diseño físico, es parte integral de concepto mayor llamado user interface (UI)
• Consiste de todo el hardware, software, pantallas (screens), menus, funciones y y todas aquellas capacidades que afectan una comunicación de dos direcciones (two-way) entre el usuario y la computadora
3434
User Interface Design• Evolution of the User Interface
– Process-control – Método tradicional de responder las necesidades del usuario.
3535
User Interface Design• Evolution of the
User Interface– Dynamic,
enterprise-wide systems - Sistema descentralizado.
3636
User Interface Design
• Evolution of the User Interface– User-centered system – Hoy en día el
usuario interactua mucho mas directamente con la computadora (menus, aplicaciones (word, excel, etc.), SQL, Web, etc.) y necesita de interfaces que sea fáciles de utilizar y se atemperen a sus necesidades.
3737
User Interface Design
• Human-Computer Interaction– Desde el Prompt hasta el Graphical user interface
(GUI) (Ventajas y desventajas)– Dr. Clare-Marie Karat establece que esta época
computarizada, los clientes no solo tienen la razón sino también derechos.
3838
User Interface Design• Human-Computer Interaction
– Los derechos de usuarios según el Dr. Karat incluyen:
• Perspective: El usuario siempre esta bien. SI hay un problema con el uso del sistema, el problema es el sistema, no el usuario.
• Installation: Tiene el derecho de instalar y desinstalar sistemas de software y hardware fácilmente sin consecuencias negativas
• Compliance: Tiene el derecho de un sistema que se ejecute exactamente como se prometio.
• Instruction: Tiene derecho a instrucciones fáciles de seguir (con mensajes de errores apropiados)
• Control: Tiene el derecho de tener el control del sistema y ser capaz de poner el sistema a responder a un pedido.
3939
User Interface Design• Feedback: Tiene el derecho de un sistema que provea
información clara y precisa sobre la tarea que esta desarrollando.
• Dependencies: Tiene el derecho de conocer los requerimientos de equipo para cualquier sistema o programa que se vaya a instalar.
• Scope: Tiene el derecho de conocer las limitaciones del producto.
• Assistance: Tiene el derecho de poder comunicarse con el proveedor del producto y recibir respuestas que lo ayuden en su problema..
• Usability: El usuario debe ser maestro de la tecnología relacionada a software y hardware y no lo contrario. Los productos deben ser naturales e intuitivos de utilizar.
4040
User Interface Design• Aunque hay variedad de opiniones en cuanto al
diseño de interfaz, la mayoría de los analistas entienden que existen 8 principios básicos los cuales son:– Understand the underlying business functions – El
diseñador debe entender como funciona la compañía y como eso se ajusta a los diseños que está trabajando.
– Maximize graphical effectiveness – Los usuarios trabajan más efectivamente en una interfaz gráfica.
– Profile the system’s users – Debe poder utilizarlo tanto usuarios novatos como expertos.
– Think like a user – Debe ver el sistema según lo ve el usuario, eso ayuda grandemente en el diseño.
– Use prototyping• Storyboard – Productos para diseñar pantallas (Visio tiene esa
opción)• Usability metrics – SIstemas que pueden medir la interacción del
usuario y el sistema (como una especie de debug).
4141
User Interface Design– Design a comprehensive interface
– Debe incluir todas las tareas y comandos que necesita el usuario (véase ejemplo). Demasiadas opciones confunden al usuario y pocas opciones aumentan los sub-menus.
– Continue the feedback process – Aún cuando el sistema ya este operacional, se debe seguir monitoriando su uso y cotejar con el usuario cualquier problema que pueda surgir.
– Document the interface design – Todas las pantallas deben ser documentas para un uso posterior de parte de los programadores.
4242
User Interface Design• Guias para un buen User Interface Design
1. Focus on basic objectives – Facilitar al usuario los objetivos en lugar de enfatizar en la interfaz.
2. Build an interface that is easy to learn and use – Palabras claras, imagenes facil de recordar, etc.
3. Provide features that promote efficiency – Organizar tareas, proveer shortcuts, listas alfabéticas, valores default, duplicate value, lista de valores, etc.
4. Make it easy for users to obtain help or correct errors – Facil de buscar y resolver los errores.
4343
User Interface Design5. Minimize input data problems – Validación de
datos, mensajes de recordatorio, input mask, etc.6. Provide feedback to users – Poner mensajes en
un lugar lógico de la pantalla y ser consistente con ese formato.
7. Create an attractive layout and design – Uso de colores, efectos, animaciones, sonidos, hyperlinksteminología constante (erase vs delete), que los comandos tengan el mismo efecto en todas las pantalla (Back), etc.
8. Use familiar terms and images – Colores o patrones estándar (rojo = stop, amarillo = precaution y verde = go), Proveer key shortcuts, comandos familiares (Cut, Copy, Paste), proveer una pantalla Window-like, etc.
4444
User Interface Design
• User Interface Controls– Menu bar– Toolbar– Command button– Dialog box– Text box– Toggle button
4545
User Interface Design
• User Interface Controls– List box – scroll bar– Drop-down list box– Option button, or
radio button– Check box– Calendar control– Switchboard
4646
Input Design• Input technology a cambiado
dramáticamente en años recientes
• La calidad del Output lo determina la calidad del Input – Garbage in, garbage out (GIGO)– Data capture - Ej. Credit car
scanner o bar code readers.– Data entry – Entrar datos
manualmente
4747
Input Design• Input and Data Entry Methods
– Batch input – Casi siempre se ejecutan en un momento dado (fecha/hora)
• Batch – Ventajas / Desventajas
– Online input – Entrada de datos al momento.• Online data entry– Ventajas / Desventajas• Source data automation – Combina data entry con otros
m’etodos modernos como lo es el RFID.• RFID tags or magnetic data strips – Emiten una señal
que facilita la contabilizaci’on de inventario entre otras cosas.
• POS, ATMs – Point of Sale y cajeros automáticos.
4848
Input Design
• Input and Data Entry Methods– Tradeoffs
• Excluyendo el proceso de entrar datos automáticamente (EJ. Evaluación profesores), la entrada de datos manul es más lenta y cara que el batch input debido a que se ejecuta en el momento en que la transacción ocurre y casi siempre se hace cuando la demanda de los recursos de la computadora están altos. (Ej: Tellers)
• La decisión de utilizar batch or online depende de los requerimientos del negocio.
4949
Input Design
• Input Volume– Guias para reducir el volumen del input.
1. Solo pide los datos necesarios
2. No pidas datos que el usuario puede conseguir de otros archivos o que se puede calcular utilizando otros datos.
3. No pidas datos constantes.
4. Utiliza códigos
5050
Input Design• Input Volume
5151
Input Design
• Designing Data Entry Screens– El método más efectivo de entrar online data es
el form filling.– Guias para diseñar pantallas de data entry.
1. Restringe al usuario a los lugares en donde sólo se va a entrar datos.
2. Provee información descriptiva por cada campo y muestra al usuario en donde entrar los datos y cuales son requeridos y su tamaño máximo.
3. Muestre ejemplos de formatos en campos que así lo requieran.
5252
Input Design
4. Indica una tecla que finalize la entreda del dato por cada campo.
5. No le solicites al usuario que entre ceros a la izquierda en campos numéricos.
6. Lo mismo pasa con números reales que sean ceros (.00)
7. Muestra los valores default para que el usuario solo tenga que dar ENTER y el valor quede incluido.
8. Utilizar siempre un valor default cuando un valor es constante para la gran mayoría de los records.
9. Muestra una lista de valores aceptables para los campos con códigos y provee mensajes de errores que sean significativos.
5353
Input Design10. Proveer una forma de salir de la pantalla sin tener
que entrar el record en progreso.11. Proveer al usuario de una forma de confirmar la
precision de los datos antes de entrarlos en el sistema.
12. Proveer medios para que el usuario se pueda mover entre los campos de la forma.
13. Diseña la forma de la pantalla para que paresca el formato (layout) de entrada de dato (source document)
14. Permite al usuario add, change, delete y view records
15. Provee un método que permita a los usuarios buscar una información en particular.
5454
Input Design
• Input Errors– Reducir el número de errores de input, mejora
la calidad de los datos.– Un cotejo de validación de datos mejora la
calidad de los datos de input probando y rechazando cualquier entrada que falle en cumplir las condiciones especificadas.
5555
Input Design• Input Errors - AL menos se debe cotejar 8 tipos de validación
de datos.1. Sequence check – Cuando los datos llevan un orden en particular.
Se coteja que no se rompa ese orden.2. Existence check – Campos requeridos, por ejemplo el seguro
social.3. Data type check – Campos numericos (solo números) o alfabéticos
(solo letras).4. Range check – Valores mínimos / máximos.5. Reasonableness check – Es valido pero cuestinable. Por ejemplo
un cheque de 5,000,000.006. Validity check – referential integrity (coteja que un valor dado
exista en otra parte, por ej. El número del vendedor).7. Combination check – Cotejar dos o más campos para ver si los
valores son consistentes. ( Ej. desde:___ hasta:___)8. Batch controls – hash totals – Coteja totales del lote (batch) deben
coincidir cuando el lote se procesa en el sistema.
5656
Input Design• Componentes de un Source Document
–Form layout – El formato de la forma.–Heading zone – Usualmente incluye el nombre de la compañía, logo, título de la forma, etc.–Control zone – Contiene códigos, números, fechas, etc.–Instruction zone – Instrucciones para llenar la forma.–Body zone – Tiene la mayor parte de la forma y es donde se entra la mayor parte de los datos.–Totals zone – Donde se ponen los totales.–Authorization zone – Donde se firma para la autorización de la forma ya llena.
A conitunación se muestra gráficamente donde van en la mayoría de las veces estas zonas.
5757
Input Design
5858
Input Design
• Source Documents– La información debe fluir en una forma de
izquierda a derecha y de arriba hacia abajo para que sea equivalente a la forma en que los usuarios leen naturalmente.
– A continuación se muestran distintas estrategias para crear formas.
5959
Input Design – Caption Techniques
6060
Input Design – Caption Techniques
6161
Input Design – Caption Techniques
6262
Input Design• Source Documents
– Un reto al diseñar formas Web-based es que muchas personas leen e interactuan de una forma diferente con la información que aparece en pantalla vs una forma impresa en papel.
– El Dr. Jakob Nielson piensa que el usuario hace un “scan” de una pagina de donde saca palabras individuales y oraciones.
– Como resultado, los diseñadores de páginas Web deben utilizar “scannable text” para poder captura y mantener la atención del usuario.
– A continuación se muestra un ejemplo de una página web.
6363
Input Design
6464
Input Design
6565
Input Design• Input Control
– Every piece of information should be traceable back to the input data – Se debe saber de donde provino cada dato
– Audit trail – Indica quien actualizo el dato, desde donde y cuando.
– Data security – Proteje los datos de daños o perdida.
– Records retention policy – Los datos deben por ley y por politica de la compañía, guardarse por un periodo de tiempo.
– Encrypted – encryption – Se utiliza para data sensitiva. Evita que la lean otras personas.
6666
EJEMPLOS DE PANTALLAS DE GRUPOS DE PROYECTO
6767
EJEMPLOS DE PANTALLAS DE GRUPOS DE PROYECTO
6868
EJEMPLOS DE PANTALLAS DE GRUPOS DE PROYECTO
6969
EJEMPLOS DE PANTALLAS DE GRUPOS DE PROYECTO
7070
EJEMPLOS DE PANTALLAS DE GRUPOS DE PROYECTO
7171
EJEMPLOS DE PANTALLAS DE GRUPOS DE PROYECTO
7272
EJEMPLOS DE PANTALLAS DE GRUPOS DE PROYECTO
7373
EJEMPLOS DE PANTALLAS DE GRUPOS DE PROYECTO
7474
EJEMPLOS DE PANTALLAS DE GRUPOS DE PROYECTO
VSS Main MenuVSS Main Menu
Client Maintenance
Security Maintenance
Offer Maintenance
Inventory Maintenance
Welcome to the Video Sales SystemPlease Select an Option:
Employee Maintenance
Employee and Security :
Customer Relashionship :
Inventory Management :
Point Of Sale
Admin
Employee MantenianceEmployee Manteniance
Employee IDName Phone Number
Controls
Contracted Date
Add Change Delete
Add EmployeeAdd Employee
Employee Name
Address
Zip Code
Social Security User Name
House Phone Password
Company ID
Ok Cancel
7575
EJEMPLOS DE PANTALLAS DE GRUPOS DE PROYECTO
Add ProductAdd Product
Product Name
Description
Category
New Release
Cost
Main Actor Supporting Actor
ScanImage
Video Cover
Ok Cancel
Selling Price
Add OfferAdd Offer
Description
Controls
Number of Req Transactions
Sunday Monday Tuesday Wednesday Thursday Friday Saturday
Offer Name
Number of Req Transactions NR
Ok Cancel
7676
EJEMPLOS DE PANTALLAS DE GRUPOS DE PROYECTO
VSS System Point of SaleVSS System Point of Sale
$9.99Product IDVideo \ Product Name Type / Theme Price
JuanName Del Pueblo
Adress
Zip Code City
Member ID
Add New
Client
FindClient
FillSituationReport
AddNew
Video
CheckVideo
Select Desired Action
Client Information : Current Purchase :
Current Available Offers :
Total Purchase
EditClientInfo
PurchaseHistory
Phone
Other Information
Preferred Video Theme
Video \ Product Name Type / ThemeLast Purchases
ProcessSale
?
RemoveSelection
Payment Information :
Cash
Payment Amount
Payment Type
Delinquency
Inventory