1. User Interface Design Components
Chapter 11 Handout

2. Objectives To understand principles for navigation and design
To understand principles for input design
To understand principles for output design
To have the ability to design a user interface

3. Introduction
Interface design is the process of defining how the users will interact with the system and how that system accepts inputs and produces outputs
Three main mechanisms
Navigation
Input
Output
Don’t forget about the GUI’s

4. Navigation Design
The goal is to make the system as simple to use—and so that the user hardly gives it any thought
Use the assumption that people will not read manuals
Use typical controls (like installation prompts)
Use clear controls

5. Basic Navigation Principles
Prevent mistakes
Use multiple menus
Gray out commands
Confirm important actions
Simplify recovery from mistakes
Allowing the use of UNDO
Use consistent grammar order
File-save
Copy-paste

6. Navigation Controls Languages Menus Direct Manipulation
Natural versus programming like SQL
Use of Office Assistant
Menus
Broad and shallow as opposed to narrow and deep
One rule—no more than 8 items and 2-3 mouse clicks or keystrokes to execute action
Grouping by interface objects (Customers, Orders) instead of by action (New, Update, Format)
Direct Manipulation
Windows Explorer, PowerPoint

7. Messages Error Messages Confirmation Acknowledgement Delay Help
First should explain the problem
Second, describe how to correct it
Third, provide button(s) for user response
Confirmation
Acknowledgement
Delay
Help
Polite versus impolite
Avoid humor and negative wording

8. Input Design Facilitates the input of data into the system and ???
Basic principles
Online or batch processing
Can you think of examples for both kinds?
Capture data at the source
Avoid multiple entry of same info
Can utilize source data automation [examples???]
Minimize keystrokes
Utilizing default values

9. Types of Input Text Numbers Selection box Input Validation
Completeness check
Format check
Range check
Check digit check
Consistency check
Database check

10. Output Design
Perhaps the most important part of system design because of its visibility and because of ????
Basic Principles
Understand report usage
Types of report—all general or specific, real-time or batch—look at business value of the report
Manage information load
Balance needed information as opposed to all information available
Minimize bias
Ie utilizing alphabetical or numerical listing
Graphical displays of bar chart information

11. Types of Outputs Types of Output Reports Media Detailed Summary
Turnaround document
Graphs
Media
Paper
Electronic—web, CD, others??

12. Now what? Well how do you go about actual creating the interface?
Do you just jump right in?
You could but….

13. User Interface Design Principles
First, user design is an art
You must make the interface
pleasing to the eye
simple to use
Minimize the potential for errors
One of the biggest challenges is managing space
That is, how do you include all the necessary information without overload the user (well see this in a little bit)

14. Six Main Principles Layout Content Awareness Aesthetics
User Experience
Consistency
Minimal User effort

15. Layout
The interface should be a series of areas on the screen that are used consistency for different purposed
Top area for commands and navigation
A middle area for input or output
Bottom area for status information

16. Content Awareness
Users should always be aware of where they are in the system and what information is being displayed
Including titles, and location menu
Ie Home>>GBA 577>>Lecture Slides
Also applies to form/field labels
Proper date formatting MM/DD/YYYY

17. Aesthetics
Interfaces should be functional and inviting to users through careful use of white space, colors, and fonts
Be careful of trade off concerning white space
Try to keep density of form low
Design of text should be kept to same size and type
10 point font is often preferred and no less than 8 point
Serif font best for printed reports, sans serif better for computer screens, headings
Color and patterns should be used carefully and sparing (10% of men are colorblind)—but of course there are always exceptions
Be careful of high contrast in colors

18. User Experience
Although ease of use and ease of learning often lead to similar design decisions, there is another tradeoff
Trying to negotiate between experienced users and novices (ie difference between full and partial menus)
Ease of learning – how quickly users can learn new systems
Ease of use – how quickly users can use the system once they have learned it

19. Consistency
Enables users to predict what will happened before they perform the function
Trying to make programs simulate windows or macs
Trying to make web interfaces similar to other models (Amazon)
Try to use consistent terminology
Customer versus client
Use the same terms/field names for both forms and reports

20. Minimal User Effort
Making the interface easy to use, actions should be no more than 3 clicks away

21. User Interface Design Process
Use Scenario Development
Interface Structure Design
Interface Standards Design
Interface Design Prototyping
Interface Evaluation

22. Use Scenario Development
An outline of the steps that the users perform to accomplish some part of their work
Think of the library project
Some users may need to find specific information
Others may need more general search results
One helpful tool is to think of processes and use modeling tools

23. Interface Structure Design
Defines the basic components of the interface and how they work together to provide functionality to the users.
This is similar to modeling in the user scenario—except that you draw out how each menu/screen is related to each other
Most similar to a Data Flow Diagram (DFD)

24. Specific Interface Standards
Interface Metaphors
Using a real world concept as a model for a computer system
Paper form or table
Online version of a check
Interface Objects
Applying an understandable name to the fundamental building blocks of a system
Shopping cart example
Interface Actions
Specifies the navigation and command style (menus), and grammar
Interface Icons
Be careful as some icons are not intuitive
Interface Templates
Designing the same appearance for each different page in the system

25. Interface Design Prototyping
A mock-up or simulation of a computer screen, form, or report.
Storyboard
Hand-drawn pictures of what the screens will look like
HTML Prototype
Language Prototype
How do you select which technique?

26. Interface Evaluation
The objective is to understand how to improve the design of the system before it is completed.
There are four main common approaches
Heuristic evaluation
Walk-Through evaluation
Interactive evaluation
Formal usability testing

27. Heuristic Evaluation
Examines the interfaces by comparing it to a set of heuristics or principles of interface design.
Checked separately by at least three members of the project team and then meet together to compare answers

28. Walk-Through Evaluation
A meeting conducted with users who will ultimately have to operate the system
This usually occurs in the interface design prototyping stage

29. Interface Evaluation
Users work individually with a member of the project team on a prototype of the model and discuss what their likes/dislikes
Provides additional information or missing functionality

30. Formal Usability Testing
Generally some type of scientific testing process that mostly can only be done with language prototypes
Can include surveys, video camera recording
It is very expensive and must include more than 5 users, but not really more than 10

31. Conclusion At this point you should be able to
Understand the navigation, input, and output design principles and techniques
Understand the fundamental user interface design principles.
Understand the process of user interface design
Understand how to design the user interface structure
Understand how to design the user interface standards