1 Designing Forms and Reports

2 Learning Objectives Explain the process of designing forms and reports and the deliverables for their creation Discuss general guidelines for formatting forms and reports Use color and know when color improves the usability of information(Speed, Accuracy and Satisfaction) Learn how to effectively format text, tables and lists Explain how to assess usability Explain interface design guidelines unique to the design of Internet-based electronic commerce systems

3 Where do we stand

4 Designing Forms and Reports System inputs and outputs are produced at the end of the analysis phase Precise appearance of forms and reports was not defined during this phase. During analysis, you focused on which forms and reports need to exist and their contents. Forms and reports are related to diagrams developed during requirements structuring. Input form will be associated with data flow entering DFD. Output form and Reports will be associated with data flow produced by DFD.

5 Designing Forms and Reports Key Concepts Form A business document that contains some predefined data and may include some areas where additional data are to be filled in. ex: product order, employment application, class registration sheets…. An instance of a form is typically based on one database record. Report A business doct containing only predefined data A passive document for reading or viewing data Typically contains data from many database records or transactions. ex: invoices, salaries,…..

6 Form Examples Paper-Based formDigital / Electronic form

7 Report Examples Paper-Based reportDigital / Electronic report

8 The Process of Designing Forms and Reports It is the user (customer) -focused activity It follows a prototyping approach 1. Requirements determination. During this process, several questions must be answered: Who will use the form/report? skills,edn level,business backgnd,knowledge,….. What is the purpose of the form/report? Personal/business When is the form or report needed or used?regularrly Where does the form or report need to be delivered and used? Government/business sector/…. How many people need to use or view the form or report? Single user/multiple users

9 The Process of Designing Forms and Reports 2. Prototyping Initial prototype is designed from requirements and completed semi-independently of the user. Focus on design: content and layout. Users review prototype design to whether accept the design or request changes If changes are requested, the construction- evaluation-refinement cycle is repeated until the design is accepted

10 Cont’d… In the past, inputs and outputs of all types were typically designed by hand on a coding or layout sheet. For example, Fig 11-2 shows the layout of a data input from using a coding sheet. Fig 11-3 shows an example of the same data input form as designed in Microsoft visual Basic.

11

12

13 Deliverables and Outcome Design Specifications - 1 An SDLC( Sys Dev Life Cyc ) phase helps you to construct a system. To move from phase to phase, each activity produces deliverable. In the case of designing forms and reports, design specifications are major deliverable and are inputs to the system implementation phase. Design specifications have three sections: 1.Narrative overview It contains an overview of the target users, tasks, system, environmental factors in which the form or report will be used.

14 Characteristics to Consider User experience, skill, motivation, education, etc. Task time pressure, cost of errors, etc. System platform, operating system, devices, etc. Environment lighting, sound, interruptions, etc.

15 Design Specifications Sample design Using visual development tools is preferred

16 Design Specifications Testing and usability assessment (Speed, Accuracy, and Satisfaction) Based on certain methods of assessment and measurements.

17 Formatting forms and reports

18

19

20 General Formatting Guidelines for Forms and Reports Highlighting Use carefully to draw user to or away from certain information. There are several situations when highlighting can be used: 1. Notifying users of errors in data entry 2. Providing warnings to users 3. Drawing attention to keywords. Blinking and audible tones should only be used to highlight critical information requiring user’s immediate attention Methods should be consistently selected and used based upon level of importance of emphasized information

21 Intensity Differences Boxing & All capital letters Font size, intensity, underlining, & italics

22 General Formatting Guidelines for Forms and Reports Color versus No-Color Benefits from Using Color Soothes or strikes the eye Accents an uninteresting display Facilitates subtle discriminations in complex displays Emphasizes the logical organization of information Draws attention to warnings Evokes more emotional reactions Problems from Using Color Color pairings may wash out or cause problems for some users Resolution may degrade with different displays Color fidelity may degrade on different displays Printing or conversion to other media may not easily translate

23 General Formatting Guidelines for Forms and Reports Displaying Text Display text in mixed UPPER and lower case and use conventional punctuation Use double spacing if space permits. If not, place a blank line between paragraphs Left-justify text and leave a ragged right margin Do not hyphenate words between lines Use abbreviations and acronyms only when they are widely understood by users and are significantly shorter than the full text

24

25

26 Formatting Guidelines Designing tables and lists 1. Use of meaningful Labels. 2. Formatting columns, rows and text 3. Formatting numeric, textual and alphanumeric data: 1. Use of meaningful Labels: All columns and rows should have meaningful labels Labels should be separated from other information by using highlighting Re-display labels when the data extend beyond a single screen or page

27 General Formatting Guidelines for Forms and Reports 2. Formatting columns, rows and text: Sort in a meaningful order Place a blank line between every five rows in long columns Similar information displayed in multiple columns should be sorted vertically Columns should have at least two spaces between them Allow white space on printed reports for user to write notes Use a single typeface, except for emphasis Use same family of typefaces within and across displays and reports Avoid using too much of fancy fonts ???? Why 3. Formatting numeric, textual and alphanumeric data: Right-justify numeric data and align cols by decimal points or other delimiter Left-justify textual data. Use short line length, 30 to 40 characters per line Break long sequences of alphanumeric data into small groups of three to four characters each

28 Use Tables for… reading individual(specific) data values Use Graphs for… providing a quick summary of data trends over time comparing points and patterns of data forecasting reporting vast amounts of data when only impressions are to be drawn Tables vs. Graphs

29 Example of a Tablular Report

30

31 Example of a Graph report

32 Line graph

33 Bar graph

34 Paper versus Electronic Reports Printer type used for producing paper report needs to be considered in design Laser vs. Inkjet : almost fast/ high print quality but expensive. Dot Matrix (Impact): Fast/inexpensive but low Print Quality. Ex: batches of phone bills.

35 Assessing Usability The main objective for designing forms, reports and all HCI interfaces is usability. Characteristics of Usability: 1. Speed: can you complete a task efficiently? 2. Accuracy: Does the output provide what you expect? 3. Satisfaction: Do you like using the output? Usability means overall evaluation of how a system performs in supporting a particular user for a particular task.

36 Design Guidelines Usability Success Factors Consistency: Consistency: Use of terms, layouts, colors, navigation, etc… Efficiency: Efficiency: formatting should be designing with an understanding of the task being performed. Ease: Ease: use of labels, hints, tool tips, etc… Format : Format : consistence entry/display (Proper data type, special characters) Flexibility: Flexibility: tabs, shortcuts, continue from the last unsaved step.

37 Table lists several factors in which variations in any item may influence the usability of a design.

38 Assessing Usability Measures of Usability Considerations Time to learn Speed of performance Rate of errors Retention over time Subjective satisfaction