Chapter 11: User Interface Design
Objectives <ul><li>Understand several fundamental user interface (UI) design principles. </li></ul><ul><li>Understand the ...
Objectives (cont’d) <ul><li>Understand commonly used principles and techniques for input design. </li></ul><ul><li>Underst...
Overview <ul><li>Interface Design formalizes the interaction of the system with external entities </li></ul><ul><ul><li>Sy...
PRINCIPLES OF USER INTERFACE DESIGN
Principles of User Interface Design <ul><li>Layout </li></ul><ul><li>Content Awareness </li></ul><ul><li>Aesthetics </li><...
General Layout Navigation Area Status Area Reports & Forms Area
Layout <ul><li>Each area may be further subdivided </li></ul><ul><li>Each area is self-contained  </li></ul><ul><li>Areas ...
Content Awareness <ul><li>Intuitively answers the users’ questions: </li></ul><ul><ul><li>Where am I? </li></ul></ul><ul><...
Form Content Awareness Phone Numbers Area Name Area
Report Content Awareness First Record Area Second Record Area
Aesthetics <ul><li>Interfaces should be functional, inviting to use, and pleasing to the eye </li></ul><ul><li>In most cas...
Bad Aesthetics
User Experience <ul><li>Ease of learning </li></ul><ul><ul><li>Significant issue for inexperienced users </li></ul></ul><u...
Multiple Interfaces <ul><li>Microsoft Windows has multiple interfaces for the same functionality </li></ul><ul><li>Most us...
Consistency <ul><li>All parts of the system work in the same way </li></ul><ul><li>Key areas of consistency are </li></ul>...
Minimal User Effort <ul><li>Interfaces should be designed to minimize the effort needed to accomplish tasks </li></ul><ul>...
USER INTERFACE DESIGN PROCESS
5-Step UI Design Process
Use Scenario Development <ul><li>Use scenarios outline the steps performed by users to accomplish some part of their work ...
Interface Structure Design <ul><li>The interface structure defines  </li></ul><ul><ul><li>The basic components of the inte...
Windows Navigation Diagrams <ul><li>Like a state diagram for the user interface </li></ul><ul><ul><li>Boxes represent comp...
Sample WND
Interface Standards Design <ul><li>Interface standards  are basic design elements found across the system user interface <...
Interface Design Prototyping <ul><li>Mock-ups or simulations of computer screens, forms, and reports </li></ul><ul><li>Fou...
Sample Storyboard
Interface Evaluation <ul><li>Goal is to understand how to improve the interface design before the system is complete </li>...
4 Approaches to UI Evaluation <ul><li>Heuristic </li></ul><ul><li>Walkthrough </li></ul><ul><li>Interactive </li></ul><ul>...
NAVIGATION DESIGN
Navigation Design Basic Principles <ul><li>Prevent mistakes </li></ul><ul><li>Simplify recovery from mistakes </li></ul><u...
Common Navigation Menu Menu bar Grayed-out commands Drop-down menu Cascading menu
INPUT DESIGN
Input Design Basic Principles <ul><li>Online versus Batch processing </li></ul><ul><li>Capture data at the source </li></u...
Types of Inputs <ul><li>Free form </li></ul><ul><ul><li>Text box </li></ul></ul><ul><ul><li>Number box </li></ul></ul><ul>...
Input Validation Types
OUTPUT DESIGN
Output Design Basic Principles <ul><li>Understand report usage </li></ul><ul><li>Manage information load </li></ul><ul><li...
Types of Outputs <ul><li>Detail reports </li></ul><ul><li>Summary reports </li></ul><ul><li>Exception reports </li></ul><u...
NONFUNCTIONAL REQUIREMENTS
Non-Functional Requirements <ul><li>Operational Requirements </li></ul><ul><ul><li>Technologies that can be used (e.g. GUI...
Summary <ul><li>Principles of User Interface Design </li></ul><ul><li>User Interface Design Process </li></ul><ul><li>Navi...
Upcoming SlideShare
Loading in...5
×

Ch11

956

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
956
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
37
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Ch11"

  1. 1. Chapter 11: User Interface Design
  2. 2. Objectives <ul><li>Understand several fundamental user interface (UI) design principles. </li></ul><ul><li>Understand the process of UI design. </li></ul><ul><li>Understand how to design the UI structure. </li></ul><ul><li>Understand how to design the UI standards. </li></ul><ul><li>Understand commonly used principles and techniques for navigation design. </li></ul>
  3. 3. Objectives (cont’d) <ul><li>Understand commonly used principles and techniques for input design. </li></ul><ul><li>Understand commonly used principles and techniques for output design. </li></ul><ul><li>Be able to design a user interface. </li></ul><ul><li>Understand the affect of nonfunctional requirements on the human-computer interaction layer. </li></ul>
  4. 4. Overview <ul><li>Interface Design formalizes the interaction of the system with external entities </li></ul><ul><ul><li>System Interfaces are machine-machine and are dealt with as part of systems integration </li></ul></ul><ul><ul><li>User Interfaces are human-computer and are the focus of this chapter </li></ul></ul>
  5. 5. PRINCIPLES OF USER INTERFACE DESIGN
  6. 6. Principles of User Interface Design <ul><li>Layout </li></ul><ul><li>Content Awareness </li></ul><ul><li>Aesthetics </li></ul><ul><li>User Experience </li></ul><ul><li>Consistency </li></ul><ul><li>Minimal User Effort </li></ul>
  7. 7. General Layout Navigation Area Status Area Reports & Forms Area
  8. 8. Layout <ul><li>Each area may be further subdivided </li></ul><ul><li>Each area is self-contained </li></ul><ul><li>Areas should have a natural intuitive flow </li></ul><ul><ul><li>Users from western nations tend to read from left to right and top to bottom </li></ul></ul><ul><ul><li>Users from other regions may have different flows </li></ul></ul>
  9. 9. Content Awareness <ul><li>Intuitively answers the users’ questions: </li></ul><ul><ul><li>Where am I? </li></ul></ul><ul><ul><li>What am I supposed to be doing here? </li></ul></ul><ul><li>Content awareness applies to sub-areas within a form or window </li></ul><ul><ul><li>Related form fields (e.g. address information) are grouped together </li></ul></ul><ul><ul><li>Related report information (e.g. records) are grouped together </li></ul></ul>
  10. 10. Form Content Awareness Phone Numbers Area Name Area
  11. 11. Report Content Awareness First Record Area Second Record Area
  12. 12. Aesthetics <ul><li>Interfaces should be functional, inviting to use, and pleasing to the eye </li></ul><ul><li>In most cases, less is more (minimalist design) </li></ul><ul><li>White space is important </li></ul><ul><li>Acceptable information density is proportional to the user’s expertise </li></ul><ul><ul><li>Novice users prefer less than 50% density </li></ul></ul><ul><ul><li>Expert users prefer more than 50% density </li></ul></ul>
  13. 13. Bad Aesthetics
  14. 14. User Experience <ul><li>Ease of learning </li></ul><ul><ul><li>Significant issue for inexperienced users </li></ul></ul><ul><ul><li>Relevant to systems with a large user population </li></ul></ul><ul><li>Ease of use </li></ul><ul><ul><li>Significant issue for expert users </li></ul></ul><ul><ul><li>Most important in specialized systems </li></ul></ul><ul><li>Sometimes ease of learning and use of use go hand in hand </li></ul>
  15. 15. Multiple Interfaces <ul><li>Microsoft Windows has multiple interfaces for the same functionality </li></ul><ul><li>Most users prefer to use Windows Explorer for handling files </li></ul><ul><li>Expert users sometimes prefer the command line interface </li></ul>
  16. 16. Consistency <ul><li>All parts of the system work in the same way </li></ul><ul><li>Key areas of consistency are </li></ul><ul><ul><li>Navigation controls </li></ul></ul><ul><ul><li>Terminology </li></ul></ul><ul><li>Probably most important concept in making the system simple because it allows the users to predict what is going to happen </li></ul>
  17. 17. Minimal User Effort <ul><li>Interfaces should be designed to minimize the effort needed to accomplish tasks </li></ul><ul><li>A common rule is the tree-clicks rule </li></ul><ul><ul><li>Users should be able to go from main menu of a system to the information they want in no more than three mouse clicks </li></ul></ul>
  18. 18. USER INTERFACE DESIGN PROCESS
  19. 19. 5-Step UI Design Process
  20. 20. Use Scenario Development <ul><li>Use scenarios outline the steps performed by users to accomplish some part of their work </li></ul><ul><li>A use scenario is one path through an essential use case </li></ul><ul><li>Presented in a simple narrative description </li></ul><ul><li>Document the most common cases so interface designs will be easy to use for those situations </li></ul>
  21. 21. Interface Structure Design <ul><li>The interface structure defines </li></ul><ul><ul><li>The basic components of the interface </li></ul></ul><ul><ul><li>How they work together to provide functionality to users </li></ul></ul><ul><li>Windows Navigation Diagrams (WND) show </li></ul><ul><ul><li>how all the screens, forms, and reports used by the system are related </li></ul></ul><ul><ul><li>how the user moves from one to another </li></ul></ul>
  22. 22. Windows Navigation Diagrams <ul><li>Like a state diagram for the user interface </li></ul><ul><ul><li>Boxes represent components </li></ul></ul><ul><ul><ul><li>Window </li></ul></ul></ul><ul><ul><ul><li>Form </li></ul></ul></ul><ul><ul><ul><li>Report </li></ul></ul></ul><ul><ul><ul><li>Button </li></ul></ul></ul><ul><ul><li>Arrows represent transitions </li></ul></ul><ul><ul><ul><li>Single arrow indicates no return to the calling state </li></ul></ul></ul><ul><ul><ul><li>Double arrow represents a required return </li></ul></ul></ul><ul><ul><li>Stereotypes show interface type </li></ul></ul>
  23. 23. Sample WND
  24. 24. Interface Standards Design <ul><li>Interface standards are basic design elements found across the system user interface </li></ul><ul><li>Standards are needed for: </li></ul><ul><ul><li>Interface metaphor </li></ul></ul><ul><ul><li>Interface objects </li></ul></ul><ul><ul><li>Interface actions </li></ul></ul><ul><ul><li>Interface icons </li></ul></ul><ul><ul><li>Interface templates </li></ul></ul>
  25. 25. Interface Design Prototyping <ul><li>Mock-ups or simulations of computer screens, forms, and reports </li></ul><ul><li>Four common approaches </li></ul><ul><ul><li>Storyboard </li></ul></ul><ul><ul><li>Windows layout diagram </li></ul></ul><ul><ul><li>HTML prototype </li></ul></ul><ul><ul><li>Language prototype </li></ul></ul>
  26. 26. Sample Storyboard
  27. 27. Interface Evaluation <ul><li>Goal is to understand how to improve the interface design before the system is complete </li></ul><ul><li>Have as many people as possible evaluate the interface </li></ul><ul><li>Ideally, interface evaluation is done while the system is being designed—before it is built </li></ul>
  28. 28. 4 Approaches to UI Evaluation <ul><li>Heuristic </li></ul><ul><li>Walkthrough </li></ul><ul><li>Interactive </li></ul><ul><li>Formal Usability Testing </li></ul>
  29. 29. NAVIGATION DESIGN
  30. 30. Navigation Design Basic Principles <ul><li>Prevent mistakes </li></ul><ul><li>Simplify recovery from mistakes </li></ul><ul><li>Use consistent grammar order </li></ul>
  31. 31. Common Navigation Menu Menu bar Grayed-out commands Drop-down menu Cascading menu
  32. 32. INPUT DESIGN
  33. 33. Input Design Basic Principles <ul><li>Online versus Batch processing </li></ul><ul><li>Capture data at the source </li></ul><ul><li>Minimize keystrokes </li></ul>
  34. 34. Types of Inputs <ul><li>Free form </li></ul><ul><ul><li>Text box </li></ul></ul><ul><ul><li>Number box </li></ul></ul><ul><li>Selection box </li></ul><ul><ul><li>Check box </li></ul></ul><ul><ul><li>Radio button </li></ul></ul><ul><ul><li>List box (on-screen, drop-down, or combo) </li></ul></ul><ul><ul><li>Sliders </li></ul></ul>
  35. 35. Input Validation Types
  36. 36. OUTPUT DESIGN
  37. 37. Output Design Basic Principles <ul><li>Understand report usage </li></ul><ul><li>Manage information load </li></ul><ul><li>Minimize bias </li></ul>
  38. 38. Types of Outputs <ul><li>Detail reports </li></ul><ul><li>Summary reports </li></ul><ul><li>Exception reports </li></ul><ul><li>Turnaround documents </li></ul><ul><li>Graphs </li></ul>
  39. 39. NONFUNCTIONAL REQUIREMENTS
  40. 40. Non-Functional Requirements <ul><li>Operational Requirements </li></ul><ul><ul><li>Technologies that can be used (e.g. GUI, mouse) </li></ul></ul><ul><li>Performance Requirements </li></ul><ul><ul><li>User interface took kit speed and capacity </li></ul></ul><ul><li>Security Requirements </li></ul><ul><ul><li>Restricted user interface (e.g. an ATM machine) </li></ul></ul><ul><li>Political & Cultural Requirements </li></ul><ul><ul><li>Date formats, colors and icons </li></ul></ul>
  41. 41. Summary <ul><li>Principles of User Interface Design </li></ul><ul><li>User Interface Design Process </li></ul><ul><li>Navigation Design </li></ul><ul><li>Input Design </li></ul><ul><li>Output Design </li></ul><ul><li>Nonfunctional Requirements </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×