11. User Interface 11. User Interface
DesignDesign
System Analysis And Design
Program: BSCS II (Advent Semester – 2014)
Lecturer: Rebecca Asiimwe
Email: [email protected]
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