1 1 Capítulo 6 Output and User Interface Design Prof. Nelliud D. Torres.

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


– 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


– 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


– 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


– 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


• 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


• 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


• 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.

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


• 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


• 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 Controls– Menu bar– Toolbar– Command button– Dialog box– Text box– Toggle button

4545


• 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


6161


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


6868


6969


7070


7171


7272


7373


7474


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


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


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

1 1 Capítulo 6 Output and User Interface Design Prof. Nelliud D. Torres.

Documents

Transcript of 1 1 Capítulo 6 Output and User Interface Design Prof. Nelliud D. Torres.