Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. An Introduction to Object-Oriented Systems Analysis and Design with UML and the Unified Process McGraw-Hill, 2004 Stephen R. Schach [email_address]
  2. 2. CHAPTER 17 <ul><li>USER-INTERFACE DESIGN </li></ul>
  3. 3. Chapter Overview <ul><li>Input and Output Devices </li></ul><ul><li>Consistency </li></ul><ul><li>Correcting Mistakes </li></ul><ul><li>Metaphors </li></ul><ul><li>Layout and Aesthetics </li></ul><ul><li>Dynamic Interfaces </li></ul><ul><li>The Unified Process and the User Interface </li></ul>
  4. 4. Input and Output Devices <ul><li>Major input devices include </li></ul><ul><ul><li>Keyboard </li></ul></ul><ul><ul><li>Mouse </li></ul></ul><ul><ul><li>Telephone </li></ul></ul><ul><li>Major output devices include </li></ul><ul><ul><li>Printer </li></ul></ul><ul><ul><li>Screen </li></ul></ul><ul><ul><li>Telephone </li></ul></ul>
  5. 5. Input and Output Devices (contd) <ul><li>A user makes a telephone call to a bank computer </li></ul>
  6. 6. Input and Output Devices (contd) <ul><li>The user wants checking account information </li></ul><ul><ul><li>The user presses 1 </li></ul></ul><ul><li>Now the user is asked for account number and “PIN number” </li></ul><ul><ul><li>The user enters these numbers correctly </li></ul></ul>
  7. 7. Input and Output Devices (contd) <ul><li>The user now hears the following choices: </li></ul>
  8. 8. Input and Output Devices (contd) <ul><li>The user want to know the account balance, but </li></ul><ul><ul><li>The user accidentally presses the 2 button </li></ul></ul><ul><li>The user now hears the following menu: </li></ul><ul><li>The user has no choice but to hang up the phone </li></ul>
  9. 9. Consistency <ul><li>Compare the three telephone menus </li></ul><ul><ul><li>To have the current menu repeated, the user is told to press 5, 9, or 3 </li></ul></ul><ul><li>This extremely poor design practice </li></ul><ul><ul><li>Leads to errors, frustration, and a strong negative attitude toward the bank </li></ul></ul>
  10. 10. Consistency (contd) <ul><li>In every printed report </li></ul><ul><ul><li>The date should always appear in the same place and in the same format </li></ul></ul><ul><li>Buttons on screens need to have </li></ul><ul><ul><li>The same size in all screens </li></ul></ul><ul><ul><li>Letters in the identical font </li></ul></ul><ul><ul><li>Consistent coloring </li></ul></ul><ul><li>Toolbars always need to be in the same place </li></ul>
  11. 11. Consistency (contd) <ul><li>Icons denoting the same functionality </li></ul><ul><ul><li>Must be identical on all screens </li></ul></ul><ul><li>The user interfaces of Macintosh applications are consistent </li></ul><ul><li>They can be used without studying the user manual, </li></ul><ul><ul><li>Because the same commands have the same meaning </li></ul></ul>
  12. 12. Consistency (contd) <ul><li>Consistency within an information system is insufficient </li></ul><ul><li>What is needed is consistency within all screens of all information systems used by that company </li></ul>
  13. 13. Correcting Mistakes <ul><li>There are two types of incorrect input </li></ul><ul><ul><li>Giving an incorrect command </li></ul></ul><ul><ul><ul><li>Example: Bank user presses 2 instead of 1 </li></ul></ul></ul><ul><ul><li>Supplying incorrect data </li></ul></ul><ul><ul><ul><li>Example: Bank user enters wrong PIN </li></ul></ul></ul>
  14. 14. Correcting Mistakes (contd) <ul><li>In a well-designed user interface, a user must be given </li></ul><ul><ul><li>A few tries to submit data correctly </li></ul></ul><ul><ul><ul><li>An unlimited number of tries is not allowed for security reasons </li></ul></ul></ul><ul><ul><li>The opportunity to recover from issuing an incorrect command </li></ul></ul><ul><ul><li>The opportunity to reconsider before an irreversible command is executed </li></ul></ul>
  15. 15. Metaphors <ul><li>The word menu was repeatedly used in the context of the bank user interface </li></ul><ul><ul><li>Until about 25 years ago, a menu meant a list of choices open to a diner </li></ul></ul><ul><li>Now this metaphor has become widely accepted </li></ul>
  16. 16. Metaphors (contd) <ul><li>A metaphor is a figure of speech in which a word used literally in one context is used to imply the same concept in a different context </li></ul>
  17. 17. Metaphors (contd) <ul><li>Example: A “menu” in the context of a restaurant is a printed card with a list of dishes from which the diner can choose </li></ul><ul><li>The word “menu” is used in the user-interface context to imply a list of choices </li></ul><ul><li>That is, the word is used </li></ul><ul><ul><li>Literally in the restaurant context, but </li></ul></ul><ul><ul><li>Metaphorically in the user-interface context </li></ul></ul>
  18. 18. Metaphors (contd) <ul><li>The desktop metaphor for user interfaces of operating systems includes folders, trash can, and files </li></ul>
  19. 19. Metaphors (contd) <ul><li>Other metaphors used in user interfaces of operating systems include </li></ul><ul><ul><li>Menus , and </li></ul></ul><ul><ul><li>D irect manipulation </li></ul></ul><ul><ul><ul><li>(Or point-and-click, or drag-and-drop ) </li></ul></ul></ul><ul><li>Operating systems make use of more than one metaphor at a time </li></ul><ul><ul><li>Users have no problems with mixed metaphors </li></ul></ul>
  20. 20. Metaphors (contd) <ul><li>Word processors also make use of more than one metaphor </li></ul><ul><ul><li>S heet of paper </li></ul></ul><ul><ul><ul><li>Menu choices like Cut, Paste, Page Layout </li></ul></ul></ul><ul><ul><li>Typesetting metapho r </li></ul></ul><ul><ul><ul><li>Terminology like Font, Tab, Footnote, Header, and Print </li></ul></ul></ul>
  21. 21. Metaphors (contd) <ul><li>The window metaphor </li></ul><ul><ul><li>Consistent with the metaphor are the </li></ul></ul><ul><ul><ul><li>Term: active window, and </li></ul></ul></ul><ul><ul><ul><li>Commands: Open, Close a window </li></ul></ul></ul><ul><ul><li>Inconsistent with the metaphor are the </li></ul></ul><ul><ul><ul><li>Feature: scroll bars, and </li></ul></ul></ul><ul><ul><ul><li>Commands: Resize, Minimize a window </li></ul></ul></ul>
  22. 22. Metaphors (contd) <ul><li>The window metaphor with scroll bars </li></ul>
  23. 23. Metaphors (contd) <ul><li>The icon metaphor </li></ul><ul><ul><li>A symbol that stands for a folder, a document, a spreadsheet, a program, a window, and so on </li></ul></ul><ul><li>Double-clicking on an icon causes it to open </li></ul><ul><ul><li>Point-and-click metaphor </li></ul></ul>
  24. 24. Metaphors (contd) <ul><li>The icon metaphor </li></ul>
  25. 25. Metaphors (contd) <ul><li>A graphical user interface (or GUI) </li></ul><ul><ul><li>Utilizes a combination of the metaphors already mentioned, including </li></ul></ul><ul><ul><ul><li>Windows </li></ul></ul></ul><ul><ul><ul><li>Menus </li></ul></ul></ul><ul><ul><ul><li>Point-and-click, and </li></ul></ul></ul><ul><ul><ul><li>Icons </li></ul></ul></ul><ul><ul><li>It often also utilizes other metaphors, such as </li></ul></ul><ul><ul><ul><li>Radio buttons, and </li></ul></ul></ul><ul><ul><ul><li>Check boxes </li></ul></ul></ul>
  26. 26. Metaphors (contd) <ul><li>Radio buttons and check boxes </li></ul>
  27. 27. Layout and Aesthetics <ul><li>Use whitespace freely </li></ul><ul><li>Figure with poor use of whitespace </li></ul>
  28. 28. Layout and Aesthetics (contd) <ul><li>The same figure but with better use of whitespace </li></ul>
  29. 29. Layout and Aesthetics (contd) <ul><li>Color </li></ul><ul><ul><li>Use as few colors as possible, and </li></ul></ul><ul><ul><li>Use them consistently </li></ul></ul>
  30. 30. Layout and Aesthetics (contd) <ul><li>Fonts </li></ul><ul><ul><li>Use as few fonts as possible, and </li></ul></ul><ul><ul><li>Use them consistently </li></ul></ul><ul><li>If variation is needed </li></ul><ul><ul><li>Use the same font in different sizes </li></ul></ul><ul><ul><li>Use the same size font but in boldface </li></ul></ul><ul><ul><li>Use the same size font but in italics </li></ul></ul>
  31. 31. Dynamic Interfaces <ul><li>One common user interface is sometimes inappropriate </li></ul><ul><ul><li>A user interface must be tailored to the skill level of its intended users </li></ul></ul><ul><ul><li>Also, different interfaces are needed to cater for users with more or less experience with the information system </li></ul></ul><ul><li>Switching to a more appropriate set of screen can be performed dynamically by the information system </li></ul>
  32. 32. The Unified Process and the User Interface <ul><li>The design of the user interface is an integral part of the Unified Process </li></ul><ul><ul><li>The use cases are the foundation for user-interface design </li></ul></ul>
  33. 33. Requirements Workflow <ul><li>Generalized use case </li></ul><ul><ul><li>The point at which the line from the Actor to the Activity intersects the rectangle models the user interface </li></ul></ul>
  34. 34. Prototyping the User Interface <ul><li>While performing the requirements workflow, the user interface is prototyped </li></ul><ul><ul><li>This is not a rapid prototype </li></ul></ul><ul><ul><ul><li>Rapid prototyping is not part of the Unified Process </li></ul></ul></ul><ul><li>Purpose </li></ul><ul><ul><li>To be sure that, after delivery, the user will be able to perform each use case effectively </li></ul></ul><ul><li>The prototype user interface may be a rough sketch that depicts just the user interface (screen or report) </li></ul>
  35. 35. User-Interface Design <ul><li>Design of a user interface using the Unified Process consists of five steps: </li></ul><ul><li>Step 1: Decide on the elements of the user interface </li></ul><ul><ul><li>Many of these elements will be attributes of the relevant boundary class </li></ul></ul><ul><ul><li>The designer starts with one actor and finds all the use cases in which that actor participates </li></ul></ul><ul><ul><li>For each use case, the elements are listed </li></ul></ul>
  36. 36. User-Interface Design (contd) <ul><li>Example: </li></ul><ul><ul><li>Buy a Painting use case of the Osbert Oglesby case study </li></ul></ul><ul><ul><li>The first paragraph of the description: </li></ul></ul>
  37. 37. User-Interface Design (contd) <ul><li>Nine elements of the user interface are clear from this paragraph </li></ul><ul><li>The remaining elements of the user interface can be deduced from the rest of the use case </li></ul>
  38. 38. User-Interface Design (contd) <ul><li>Step 2: Put together a preliminary design that incorporates just the bare elements themselves </li></ul><ul><ul><li>One way: Put the name of each element on a Post-it note and arrange the notes on a board </li></ul></ul>
  39. 39. User-Interface Design (contd) <ul><li>Step 3: Check that this preliminary version of the elements of the user interface is adequate </li></ul><ul><ul><li>The set of elements must provide all the information necessary for the user to perform the required actions </li></ul></ul><ul><ul><li>An outline of the help information for that screen is added </li></ul></ul><ul><ul><li>The user’s responses must result in all the necessary data being supplied to the information system </li></ul></ul>
  40. 40. User-Interface Design (contd) <ul><li>Step 4: The designer determines how to express those elements in terms of </li></ul><ul><ul><li>Metaphors </li></ul></ul><ul><ul><li>Aesthetic issues </li></ul></ul><ul><ul><ul><li>Such as font, color, and layout </li></ul></ul></ul>
  41. 41. User-Interface Design (contd) <ul><li>Step 5: Produce the prototype user interface </li></ul><ul><ul><li>First, sketch the various interfaces </li></ul></ul><ul><ul><ul><li>A pencil sketch encourages the client and users to suggest improvements </li></ul></ul></ul><ul><ul><li>Second, use a screen generator or report generator to generate the prototype user interface </li></ul></ul>
  42. 42. Iteration <ul><li>As the Unified Process proceeds </li></ul><ul><ul><li>The use cases are analyzed, designed, implemented, tested, and installed </li></ul></ul><ul><li>The user interface for each use case similarly undergoes iteration and incrementation </li></ul>