1. System Analysis And Design
11. User Interface Design
Program: BSCS II (Advent Semester – 2014)
Lecturer: Rebecca Asiimwe

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

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

4. Principles for User Interface Design
Layout
Content awareness
Aesthetics
User experience
Consistency
Minimal user effort

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

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

7. Layout Example 1

8. Layout Example 2

9. Layout Example 3

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

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

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

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

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

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

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

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

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

19. 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 keystrokes

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

21. Key Tasks in Input Design
Six key tasks
1. 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 guidelines
1. 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 required
4. Require ending keystroke for every field
5. Do not require users to enter special characters

28. Screen Design Guidelines
6. 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 Guidelines
11. 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 Guidelines
15. 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

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

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

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?

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

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

56. The End