11. User Interface 11. User Interface

DesignDesign

System Analysis And Design

Program: BSCS II (Advent Semester – 2014)

Lecturer: Rebecca Asiimwe

Email: rasiimwe@technology.ucu.ac.ug1

Key Definitions

• The User interface helps users communicate with the computer and/or application

• The system interfaces define how systems exchange information with other systems

• User interface includes screen displays that provide navigation through the system, screens, forms that capture data and reports

2

User Interface

• The navigation mechanism provides the way for users to tell the system what to do

• The input mechanism defines the way the system captures information

• The output mechanism defines the way the system provides information to users or other systems

3

Principles for User Interface Design

• Layout

• Content awareness

• Aesthetics

• User experience

• Consistency

• Minimal user effort

4

Layout Concepts

• The screen is often divided into three boxes– Navigation area (top)– Status area (bottom)– Work area (middle)

• Information can be presented in multiple areas

• Like areas should be grouped together

5

More Layout Concepts

• Areas and information should minimize user movement from one to another

• Ideally, areas will remain consistent in– Size– Shape– Placement for entering data– Reports presenting retrieved data

6

Layout Example 1

7

Layout Example 2

8

Slide 9

Layout Example 3

Content Awareness

• This is ability of an interface to make user aware of the information it contains with least amount of effort

• All interfaces should have titles

• Menus should show

– where you are

– where you came from to get there

• It should be clear what information is within each area

• Fields and field labels should be selected carefully

• Use dates and version numbers to aid system users

10

Aesthetics

• Means designing an interface that is pleasing to the eye

• Interfaces need to be functional and inviting to use

• Avoid squeezing in too much, particularly for non experienced users

• Design text carefully– Be aware of font and size– Avoid using all capital letters

11

More Aesthetics

• Colors and patterns should be used carefully– Test quality of colors by trying the interface on

a black/white monitor– Use colors to separate or categorize items

12

User Experience

• Two types of users should be considered when designing interfaces

• How easy is the program to learn?• How easy is the program to use for the

expert?• Consider adding shortcuts for the expert• Interface should be designed for both users

13

Consistency

• Enables users to predict what will happen

• Reduces learning curve

• Considers items within an application and across applications

• Pertains to many different levels– Navigation controls– Terminology– Report and form design

14

Minimize Effort

• Minimize the amount of effort needed to accomplish a task

• Clicks rule– Users should be able to go from the start

or main menu of a system to the information or action they want in no more than three mouse clicks or three keystrokes

15

NAVIGATION DESIGN

• Navigation component enables users to enter commands to navigate through the system and perform actions

• Navigation is to make the system as simple as possible to use

• Basic principle– Prevent the user from making mistakes– Simplify recovery from mistakes– Use consistent grammar order

16

Types of Navigation Control

• Two hardware devices; keyboard and pointing devices

• Software approaches – Language (command and natural)– Menus; Most common today

• Should be designed with care, better to be broad and shallow

17

Message

• Used to prevent users from making mistakes

• System responds to a user and inform him or her of the status of the interaction– Error messages– Confirmation message– Acknowledge message– Delay message– Help message

18

INPUT DESIGN

• Basic Principles• Use online and batch processing

appropriately– Online-data input is done individually– Batch-inputs collected over sometime and

entered in a batch• Capture data at the source

– Paper collection into the computer– Source data automation– Capture data using trained entry operator

• Minimize keystrokes19

Types of Inputs

• Text ; text box used to enter text, have fixed length, scrollable and should be labelled

• Number; number box is sued to enter numbers. Date is a special form of number

• Selection box; enables user to select a value from predefined list arranged in a given order– 6 types; check box, radio button, on-screen list

box, drop down list box, combo boxes

20

21

Key Tasks in Input Design

• Six key tasks1. Design data entry and input procedures

2. Design source documents for data capture, or devise other data capture methods

3. Design input data records

4. Design data entry screens

5. Design user interface screens

6. Design audit trails and system security measures

22

Source Document Design

• Form zones– Heading zone– Control zone– Instruction zone– Totals zone– Authorization zone

• Source documents can be external or internal

23

Input Record Design

• Input record layout chart– To design and document batch input records– Multiple record designs are used for

transactions that involve constant and repeating data

• Constant fields (non-repeating data) • Repeating fields

24

Input Record Design

• Information flow on a form– Should be logical and easy to follow– Poor design results in forms that are difficult

to use, time-consuming, and prone to error

25

Screen Design

• Effective screen design guidelines1. Screens should be attractive and uncluttered

2. Information on a single screen should be displayed in a meaningful, logical order

3. Screen designs should be consistent

4. Messages should be specific, understandable, and professional

5. Messages should remain on the screen for an appropriate period of time

26

Screen Design

• Effective screen design guidelines

6. Special effects should be used sparingly

7. Users should receive feedback

8. Screen designs should be documented and approved as soon as possible

27

Screen Design

• Data entry screen design – Guidelines

1. Restrict user access to screen locations where data is entered

2. Provide a descriptive caption for each field and show the user where to enter the data

3. Show a sample format if one is required4. Require ending keystroke for every field5. Do not require users to enter special

characters

28

Screen Design

– Guidelines6. Do not require users to type leading zeroes

or trailing spaces for alphanumeric fields

7. Do not require users to type trailing zeroes that follow a decimal point

8. Display default values that users can accept

9. Use default values for constant data

10. Display a list of acceptable values for fields with a limited number of valid choices

29

Screen Design

– Guidelines11. Provide a way to leave the data entry screen

without inputting the current record

12. Provide an opportunity to confirm the accuracy of input data before entering it

13. Provide a means to move among form fields in a standard, or in another, order

14. Design the screen form to match the layout of the source document

30

Screen Design

– Guidelines15. Allow the operator to add, change,

delete, and view records

16. Design a method to allow operators to search for a specific record

31

Screen Design

• Graphical user interfaces– A GUI environment includes process control

and data control– A GUI environment is easy to use– Common features

• Menu bar• Toolbar

32

Screen Design

– Common features• Menu bar• Toolbar• Drop-down menus• Dialog, text, and drop-down list boxes• Option (radio) buttons• Spin bars

33

Screen Design

• Help screen design– Several methods to obtain Help

• Click a command button or toolbar• Press a special key

– Context-sensitive Help• Provides Help on the task in progress

– User-selected Help– Hypertext

• Uses links to display additional information on related topics

34

Screen Design– Design guidelines

• Provide a direct route for users to return to the program after Help is obtained

• Title every Help screen

• Use easy, simple, understandable help text

• Present attractive, uncluttered screens

• Provide appropriate examples

• Use hyperlinks

• Include contact data for persons or departments responsible for assisting users

OUTPUT DESIGN

• By output, we mean reports that the system

produces

• Reports can be on screen ( display),

paper( printed reports) or any other media

• Reports are the most visible part of any system

• Understand the report usage

35

BASIC DESIGN PRINCIPLES

• Understand report usage- reports can be

used for different purposes

• Manage information load- should provide

all the information needed to support the

task for which it was designed

36

37

Checklist for Output design

– Design process depends on– What is the purpose of the output?– Who wants this information, why is it

needed, and how will it be used?– What information will be included?– What format should be used?– When will information be provided, and

how often must it be updated?– Will simultaneous user access be

required?– Are security or confidentiality issues

involved that need to be considered?

Types of outputs

• There are different types of reports;– Detailed reports– Summary reports– Exceptional reports– Turnaround documents and graphs

• There are many different media used to produce these reports– 2 dominant; paper and electronic

38

39

Types of Outputs and Information Delivery

• Paper (Printed) output– Advantages/disadvantages of printed

output• Many people prefer to work with paper• Paper is portable• Printed output is expensive to

purchase, print, store, and dispose off• Printed output is outdated quickly

40

Types of Output and Information Delivery

• Screen(display) output– The screen is the most familiar output

device• Monitor• CRT (cathode ray tube)• LCD (liquid crystal display)• VDT (video display terminal)

– Graphical output allows various special effects and user-friendly features

– Screen output reflects immediate data changes

41

Types of Output and Information Delivery

• Other types of information delivery– Audio output– Automated facsimile and faxback systems– E-mail– Links to Web pages– Specialized forms of output

42

Designing Printed Reports

• Reports can be classified by content– Detail reports– Exception reports– Summary reports

• Reports also can be classified by distribution– Internal reports– External reports

43

Designing Printed Reports

• Detail reports– Lists detailed information about all items

requested– Provide the most information – At least one line of output is produced for

each record processed• Detail reports can be quite lengthy

44

Designing Printed Reports

• Exception reports– Show only records that meet a specific

condition– Useful when particular information is

required– Special parameter queries can be used to

select only the records that meet specified conditions

45

Designing Printed Reports

• Summary reports– Lists summary information about all items– Useful for upper-level managers who do

not require extensive detail

46

Designing Printed Reports

• Internal reports– Distributed within the organization– Usually printed on stock paper

• Blank, single ply, standard size• Less expensive• Can be used for many types of reports

47

Designing Printed Reports

• External reports– Distributed outside the organization– Might include statements, invoices, or

paychecks– Usually printed on special forms

• More expensive than stock paper• Paper must be changed for each report

printing job• Multi-part forms must be separated or

decollated

48

Designing Printed Reports• External reports

– Distributed outside the organization– Might include statements, invoices, or

paychecks– Usually printed on special forms

• More expensive than stock paper• Paper must be changed for each report printing job• Multi-part forms must be separated or decollated• Special forms can use preprinted graphics and

logos• Special applications, such as checks, require

special forms

49

Designing Printed Reports

• Designing the report– Most reports use graphical design

• Choice of typefaces and scalable fonts• More design flexibility

– Some reports are character-based• Printed on high-speed impact printers• Require printer spacing charts for layout and

design

50

Designing Screen Output

• Screen design considerations– Many print design principles apply to screens– Screens also need instructions and

messages– Users require immediate Help and feedback– Character-based screens

• Screen locations are plotted using columns and lines

• Use screen display layout forms• Messages typically on top or bottom line

– Graphical screens• Screen locations are plotted in inches or other

units• More flexible designs are possible

51

Designing Screen Output

• Character output– High-resolution monitors allow more flexibility– Display must be clear and easy to read– Fonts and typefaces must be chosen

carefully– Screens vs. printed output

• Information might need redesign for smaller screen

• Multiple screens might be necessary• Columnar or tabular designs are possible

52

Designing Screen Output

• Graphical output– Graphical displays can be very effective– Many formats are possible

• Pie charts• Maps• Bar charts• Area charts• Scatter diagrams

– Use descriptive titles, label each axis, and include a legend

53

Designing Other Outputs

• Output to tapes and disks– In an integrated environment, data transfer

is handled by interactive network design– In other cases, data transfer uses tapes or

disks• Output from one program can be input to another• An output file format is a data structure that can

be understood by another program or system• Tape or disk output design must calculate file

volume

54

Output Control• Output integrity

– Ensure output is correct, complete, & secure– Include appropriate titles and dates on

reports– Number pages consecutively– Identify the end of each report– Print/reconcile control totals/record counts– Review error reports for possible causes– Create error file to flag uncorrected/reentered

records

55

Output Control

• Output security– Protects privacy rights and proprietary data– Important tasks to carry out

• Control the number of report copies• Distribute reports only to authorized users• Store sensitive reports in secure areas• Label all pages of confidential reports• Burn/shred sensitive reports & other output• Inventory blank checks regularly• Store signature forms securely

The End