User Interface Design

User Interface Design

• Basic Principles of User-Centered Design
– Understand the underlying business functions
– Maximize graphical effectiveness
– Profile the system’s users
– Think like a user
– Use prototyping
• Storyboard
• Usability metrics
 User Interface Design
• Basic Principles of User-
Centered Design
– Design a comprehensive
interface
– Continue the feedback
process
– Document the interface
design
Switchboard
 User Interface Design
• Guidelines for User Interface Design
– Follow eight basic guidelines
1. Focus on basic objectives
2. Build an interface that is easy to learn and use
3. Provide features that promote efficiency
4. Make it easy for users to obtain help or correct errors
5. Minimize input data problems
6. Provide feedback to users
7. Create an attractive layout and design
8. Use familiar terms and images
 User Interface Design
• User Interface Controls
– Menu bar
– Toolbar
– Command button
– Dialog box
– Text box
– Toggle button
– Scroll bar
– Drop-down list box
– Option button
– Check box
– Command button
– Calendar control
 User Interface Design
• User Interface Controls
– List box – scroll bar
– Drop-down list box
– Option button, or radio
button
– Check box
– Calendar control
– Switchboard
 Input Design
• Input technology has changed dramatically in
recent years
• The quality of the output is only as good as
the quality of the input
– Garbage in, garbage out (GIGO)
– Data capture
– Data entry
 Input Design
• Input and Data Entry Methods
– Batch input
• Batch
– Online input
• Online data entry
• Source data automation
• RFID tags or magnetic data strips
• POS, ATMs
 Input Design
• Input and Data Entry Methods
– Tradeoffs
• Unless source data automation is used, manual data entry
is slower and more expensive than batch input because it
is performed at the time the transaction occurs and often
done when computer demand is at its highest
• The decision to use batch or online input depends on
business requirements
 Input Design
• Input Volume
– Guidelines will help reduce input volume
1. Input necessary data only
2. Do not input data that the user can retrieve from
system files or calculate from other data
3. Do not input constant data
4. Use codes
 Input Design
• Input Volume
 Input Design
• Designing Data Entry Screens
– Most effective method of online data entry is
form filling
– Guidelines will help you design data entry
screens
1. Restrict user access to screen locations where data
is entered
2. Provide a descriptive caption for every field, and
show the user where to enter the data and the
required or maximum field size
 Input Design
• Designing Data Entry Screens
– Guidelines will help you design data entry
screens
3. Display a sample format if a user must enter values
in a field in a specific format
4. Require an ending keystroke for every field
5. Do not require users to type leading zeroes for
numeric fields
6. Do not require users to type trailing zeroes for
numbers that include decimals
 Input Design
• Designing Data Entry Screens
– Guidelines will help you design data entry
screens
7. Display default values so operators can press the
ENTER key to accept the suggested value
8. Use a default value when a field value will be
constant for successive records or throughout the
data entry session
9. Display a list of acceptable values for fields, and
provide meaningful error messages
 Input Design
• Designing Data Entry Screens
– Guidelines will help you design data entry
screens
10. Provide a way to leave the data entry screen at any
time without entering the current record
11. Provide users with an opportunity to confirm the
accuracy of input data before entering it
12. Provide a means for users to move among fields on
the form
 Input Design
• Designing Data Entry Screens
– Guidelines will help you design data entry
screens
13. Design the screen form layout to match the layout
of the source document
14. Allow users to add, change, delete, and view records
15. Provide a method to allow users to search for
specific information
 Input Design
• Input Errors
– Reducing the number of input errors improves
data quality
– A data validation check improves input quality by
testing the data and rejecting any entry that fails
to meet specified conditions
 Input Design
• Input Errors
– At least eight types of data validation checks
1. Sequence check
2. Existence check
3. Data type check
4. Range check – limit check
5. Reasonableness check
6. Validity check – referential integrity
7. Combination check
8. Batch controls – hash totals
 Team Activity
• Refer to the Seminar Management System (Context diagram
on next slide)but assume that you are designing a desktop
system rather than a Web based system
• Create a switchboard design with control buttons that will
lead the administrator to attendees, instructors, seminars, and
seminar schedules and hotel venues.
• Allow the administrator to add, update, or delete records in
each area that you see as necessary.
• Develop the storyboards that show the proposed screens
• You may hand draw and present your designs on the flip chart
or use software of your choice (Visio, Dreamweaver, Word etc).
• Be prepared to present your prototypes in lab next week for
critique.
 eval_request
Print
Attendee Email Sys Vendor
com
pl eted seminar_notification
_ eva
l
scheduled seminar request_for_eval

n
Selected
instructor_reserved atio
n firm Hotel
no_instructor_available ki n g_co
b oo
est booking_denied
instructor_request qu
ki n g_re
hotel_request Proposed boo

hotel_reserved Seminar hotel_pmt_info Accounts

Seminar
hotel_options Management instructor_pmt_info Payable
Administrator
hotel_choice System
class_ro
no_hotel_avail SMS ster
available_inst
rs Seminar
final_roster
Instructor Info Registration
duled hotels_available
inst_sche System
inst_dates uled
d
sche
dates_avail & hotels Info*
email_addr
updates roster_sign-in

Instructor final_roster Attendee Info* * Transfer/Maintenance TBD