Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

User Interface Design

43,620 views

Published on

Reviewing Design portion of SDLC

Published in: Business, Technology

User Interface Design

  1. 1. IS 431 Chapter 9 User Interface Design Group 13 Jason Reifman Keni Osada Chris Verdin Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  2. 2. IS 431 Chapter 9 Introduction Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  3. 3. IS 431 Chapter 9 Introduction Who’s presenting what? Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  4. 4. IS 431 Chapter 9 Introduction What to expect from Chapter 9: <ul><li>Introduction of several fundamental user design principles </li></ul><ul><li>Overview of the user interface design process </li></ul><ul><li>Overview of the navigation, input, and output components that are used in interface design </li></ul><ul><li>Focus on Web-based interfaces and graphical user interfaces (GUI) </li></ul>Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  5. 5. IS 431 Chapter 9 Introduction Key Terms <ul><li>Types of Interfaces </li></ul><ul><li>User Interfaces - how the system will interact with external entities. [Focus of the chapter] </li></ul><ul><li>System Interfaces - how systems exchange information with other systems. </li></ul><ul><li>Fundamental parts of a User Interface </li></ul><ul><li>Navigation mechanism - provides the way for users to tell the system what to do. </li></ul><ul><li>Input mechanism - defines the way the system captures information. </li></ul><ul><li>Output mechanism - defines the way the system provides information to users or other systems. </li></ul>Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  6. 6. IS 431 Chapter 9 Principles for User Interface Design Goal Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  7. 7. IS 431 Chapter 9 Principles for 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>Minimize user effort </li></ul>Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  8. 8. IS 431 Chapter 9 Principles for User Interface Design Layout organizes areas of the screen or document for different purposes. <ul><li>Standard Windows or Macintosh approach for screen layout </li></ul><ul><ul><ul><ul><li>Navigation area (top) </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Status area (bottom) </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Work area (middle) </li></ul></ul></ul></ul><ul><li>Info can be presented in multiple areas </li></ul><ul><li>Like areas should be grouped together </li></ul>Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  9. 9. IS 431 Chapter 9 Principles for User Interface Design Layout continued… <ul><li>Areas and information should minimize user movement from one to another </li></ul><ul><li>Ideally, areas will remain consistent in </li></ul><ul><ul><li>Size </li></ul></ul><ul><ul><li>Shape </li></ul></ul><ul><ul><li>Placement for entering data </li></ul></ul><ul><ul><li>Reports presenting retrieved data </li></ul></ul>Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  10. 10. fig_09_02 fig_09_02
  11. 11. IS 431 Chapter 9 Principles for User Interface Design Content Awareness Users should always be aware of where they are in the system and what is being displayed. <ul><li>All interfaces should have titles </li></ul><ul><li>Menus should show </li></ul><ul><ul><li>where you are </li></ul></ul><ul><ul><li>where you came from to get there </li></ul></ul><ul><li>It should be clear what info is within each area </li></ul><ul><li>Be sure to select fields and field labels carefully </li></ul>Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  12. 12. IS 431 Chapter 9 Principles for User Interface Design Content Awareness continued… <ul><li>Be sure to select fields and field labels carefully </li></ul><ul><li>Content Awareness applies to the information a form or report contains. </li></ul><ul><ul><li>It is important to include the preparation date (the print or completion date) so the age of the info is known. </li></ul></ul>Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  13. 13. IS 431 Chapter 9 Principles for User Interface Design Aesthetics Designing interfaces that are pleasing to the eye. <ul><li>Interfaces need to be functional and inviting to use </li></ul><ul><li>Avoid squeezing in too much, particularly for novice users </li></ul><ul><li>Design text carefully </li></ul><ul><ul><li>Be aware of font and size </li></ul></ul><ul><ul><li>Avoid using all capital letters </li></ul></ul>Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  14. 14. IS 431 Chapter 9 Principles for User Interface Design Aesthetics continued… <ul><li>Colors and patterns should be used carefully </li></ul><ul><ul><li>Test quality of colors by trying the interface on a black/white monitor </li></ul></ul><ul><ul><li>Use colors to separate or categorize items </li></ul></ul>Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  15. 15. IS 431 Chapter 9 Principles for User Interface Design User Experience Designing the user interface with the users’ level of computer experience in mind. <ul><li>How easy is the program to learn? </li></ul><ul><ul><li>Usually a concern for Novice Users </li></ul></ul><ul><li>How easy is the program to use? </li></ul><ul><ul><li>Usually a concern for Expert Users </li></ul></ul>Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  16. 16. IS 431 Chapter 9 Principles for User Interface Design User Experience & new techology What the future holds for user interface. Microsoft’s Surface Touchscreen technology is becoming more and more prevalent. What type of effect will it have on business transactions? Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  17. 17. IS 431 Chapter 9 Principles for User Interface Design Consistency Enables users to predict what will happen next. <ul><li>* Probably the single most important factor in making a system easy to use </li></ul><ul><li>Reduces learning curve </li></ul><ul><li>Considers items within an application and across applications </li></ul>Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  18. 18. IS 431 Chapter 9 Principles for User Interface Design Minimize User Effort The interface should be simple and minimize the number of clicks or keystrokes to move from one part of the system to another. <ul><li>“ Three click rule” </li></ul><ul><ul><li>Commonly used by interface designers </li></ul></ul><ul><ul><li>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 </li></ul></ul>Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  19. 19. IS 431 Chapter 9 Overview <ul><li>Five step process </li></ul><ul><li>Whole Process is repeated until no improvements are found. </li></ul><ul><li>e.g. Prepare design >> D esign >> Evaluation </li></ul><ul><li>5 steps </li></ul><ul><li>Use scenario development </li></ul><ul><li>Structure design </li></ul><ul><li>Standards design </li></ul><ul><li>Design prototyping </li></ul><ul><li>Evaluation </li></ul>User Interface Design Process Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  20. 20. IS 431 Chapter 9 User Interface Design Process Use Scenario Development Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  21. 21. IS 431 Chapter 9 User Interface Design Process Use Scenario Development <ul><li>Simple narrative description </li></ul><ul><li>Describes ONLY the common use of system </li></ul>Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  22. 22. IS 431 Chapter 9 User Interface Design Process Interface Structure <ul><li>Defines basic components of the interface </li></ul><ul><li>Uses interface structure d iagram (ISD) </li></ul>Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  23. 23. IS 431 Chapter 9 User Interface Design Process Interface Standards <ul><li>Basic design elements that are common across individual screens, forms, and reports </li></ul><ul><li>Ensures consistency of interface across the system </li></ul><ul><li>5 elements </li></ul>Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  24. 24. IS 431 Chapter 9 User Interface Design Process Interface Standards 1. Interface Metaphor Set of user interface visuals, actions, and procedures from real world that is used as a model for the computer system. e.g. File and folder representation of operating system, Desktop representation 2. Interface Template Defines general appearance of all screens Defines standard placement and order for common interface action Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  25. 25. IS 431 Chapter 9 User Interface Design Process Interface Standards 3. Interface Objects Fundamental building blocks of the system such as entities and data stores e.g. Shopping Cart 4. Interface Actions Actions within interface objects e.g. add item, delete item, modify amount , etc 5. Interface Icons Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  26. 26. IS 431 Chapter 9 User Interface Design Process Interface Design Prototyping <ul><li>Simulation of interface </li></ul><ul><li>3 approaches </li></ul><ul><ul><li>Storyboard </li></ul></ul><ul><ul><li>HTML Prototype </li></ul></ul><ul><ul><li>Language Prototype </li></ul></ul>Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  27. 27. IS 431 Chapter 9 User Interface Design Process <ul><li>Storyboard </li></ul><ul><li>Hand drawn picture of screen </li></ul><ul><li>Hand drawn cartoon of flow of information </li></ul>Interface Design Prototyping Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  28. 28. IS 431 Chapter 9 User Interface Design Process <ul><li>HTML Prototype </li></ul><ul><li>Series of web pages created with HTML that shows the fundamental parts of the system </li></ul>Interface Design Prototyping Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  29. 29. IS 431 Chapter 9 User Interface Design Process <ul><li>Language Prototype </li></ul><ul><li>Design prototype built in programming language or programming tool (e.g. Visual Studio) </li></ul>Interface Design Prototyping Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  30. 30. IS 431 Chapter 9 User Interface Design Process Interface Evaluation <ul><li>Evaluation should be performed before the system is build </li></ul><ul><li>Identifying design problem saves time and money </li></ul><ul><li>Most evaluation involves 5 to 10 users </li></ul><ul><li>4 common approaches </li></ul>Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  31. 31. IS 431 Chapter 9 User Interface Design Process <ul><li>Heuristic Evaluation </li></ul><ul><li>No involvements of users </li></ul><ul><li>At least three members of project team check to ensure that the interface satisfies design principal </li></ul><ul><li>Walk-though Evaluation </li></ul><ul><li>Evaluated by operators of the system </li></ul><ul><li>Project team member walk through the interface with the user </li></ul>Interface Evaluation Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  32. 32. IS 431 Chapter 9 User Interface Design Process Interface Evaluation <ul><li>Interactive Evaluation </li></ul><ul><li>One-on-one evaluation by a user and a member of project team </li></ul><ul><li>Formal Usability Testing </li></ul><ul><li>Usually done for commercial software or product developed for large organization </li></ul><ul><li>Uses only language prototype </li></ul><ul><li>User test a system without any assistance </li></ul>Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  33. 33. IS 431 Chapter 9 Navigation Design <ul><li>What for? </li></ul><ul><li>Enable user to enter command and navigate though the system </li></ul><ul><li>Show messages to user about whether his or her action was success or failure </li></ul><ul><li>The goal is to make the system as simple as possible to use </li></ul><ul><li>Why navigation design is necessary? </li></ul><ul><li>For prevent mistakes by user </li></ul><ul><li>Simplify recovery from mistakes </li></ul>Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  34. 34. IS 431 Chapter 9 Navigation Design <ul><li>Grammar Order </li></ul><ul><li>Object-action order </li></ul><ul><li>Action-object order </li></ul><ul><li>Grammar order should be consistent throughout the whole system </li></ul><ul><li>Most system today uses object-action order </li></ul>Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  35. 35. IS 431 Chapter 9 Navigation Design Types of Navigation Control <ul><li>Language </li></ul><ul><li>Command language </li></ul><ul><li>Natural language </li></ul><ul><li>Menus </li></ul><ul><li>Menu bars, drop-down menus, pop-up menus, etc </li></ul><ul><li>Most common type of navigation today </li></ul><ul><li>Direct manipulation </li></ul><ul><li>User enter command by working directly with interface object </li></ul><ul><li>e.g., dragging file from folder to desktop </li></ul>Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  36. 36. IS 431 Chapter 9 Navigation Design Messages <ul><li>There are any types of messages (error message, confirmation message, etc) </li></ul><ul><li>Message should be easy to understand </li></ul><ul><li>It should requires acknowledgement by a user </li></ul><ul><li>It can be either text or icon </li></ul><ul><li>In case of error </li></ul><ul><li>It must explain corrective action as clearly and as explicitly as possible </li></ul><ul><li>In case of complicated error, it should display additional information to encourage users to take further action </li></ul>Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  37. 37. IS 431 Chapter 9 Navigation Design Messages Example of inappropriate error message Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  38. 38. IS 431 Chapter 9 Input Design <ul><li>What is Input Design? </li></ul><ul><li>Designing screens used to enter the information, as well as any forms users write or type information in. </li></ul><ul><li>What is the goal of input design? </li></ul><ul><li>To capture information for the system simply and easily. </li></ul><ul><li>Reflect the nature of the inputs and ways to simplify their collection. </li></ul>Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  39. 39. IS 431 Chapter 9 Input Design <ul><li>Basic Principles </li></ul><ul><li>Use Online and Batch Processing Appropriately </li></ul><ul><li>Capture Data at the Source </li></ul><ul><li>Minimize Keystrokes </li></ul>Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  40. 40. IS 431 Chapter 9 Input Design <ul><li>Online Processing </li></ul><ul><li>Immediately records the transaction. </li></ul><ul><li>Used when it is important to have real-time information about the business process . </li></ul><ul><li>Batch Processing </li></ul><ul><li>Collects inputs and enters them at a later time in a batch. </li></ul><ul><li>Used when real-time processing information </li></ul>Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  41. 41. IS 431 Chapter 9 Input Design <ul><li>Capture data at the source - is the most important principle of input design. </li></ul><ul><li>Why capture data at the source? </li></ul><ul><li>Eliminates duplicate work </li></ul><ul><li>Decreases processing time </li></ul><ul><li>Decreases cost </li></ul><ul><li>Reduces probability of error </li></ul>Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  42. 42. IS 431 Chapter 9 Input Design <ul><li>Source Data Automation – Using special hardware devices to automatically capture data without requiring anyone to type it. </li></ul><ul><li>Bar Code Reader – Supermarket checkout </li></ul><ul><li>Optical Character Recognition – Checks </li></ul><ul><li>Magnetic Stripe Readers – Credit Cards </li></ul><ul><li>Smart Cards – Credit Card Sized Calculators </li></ul><ul><li>Radio Frequency Identification Tag (RFID) – Broadcast its information to electronic readers. </li></ul>Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  43. 43. IS 431 Chapter 9 Input Design <ul><li>Minimize Keystrokes </li></ul><ul><li>System should never ask for information that can be obtained in another way. (retrieving from database or a calculation) </li></ul><ul><li>Lookups </li></ul><ul><li>Drop down lists </li></ul><ul><li>Default Values </li></ul>Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  44. 44. IS 431 Chapter 9 Input Design <ul><li>Types of Inputs </li></ul><ul><li>Data items linked to fields </li></ul><ul><li>Text – Used to enter text & can have a fixed length & can be scrollable. </li></ul><ul><li>Numbers – Used to enter numbers. Can automatically be formatted to currency or a date. </li></ul><ul><li>Selection Box – Enables the user to select a value </li></ul><ul><li>from a predetermined list. </li></ul>Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  45. 45. IS 431 Chapter 9 Input Design Types of Input Forms Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  46. 46. IS 441 Chapter 9 Input Design <ul><li>Input Validation (Edit Checks) </li></ul><ul><li>To prevent invalid information from entering the system </li></ul><ul><li>Completeness Check </li></ul><ul><li>Format Check </li></ul><ul><li>Range Check </li></ul><ul><li>Check Digit Check </li></ul><ul><li>Consistency Check </li></ul><ul><li>Database Check </li></ul>Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  47. 47. IS 441 Chapter 9 Input Design Input Validation (Edit Checks) continued Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  48. 48. IS 431 Chapter 9 Output Design <ul><li>Basic Principles </li></ul><ul><li>to present information so users can accurately understand it with the least effort </li></ul><ul><li>Understand Report Usage </li></ul><ul><ul><li>Read cover to cover because all information is needed. </li></ul></ul><ul><ul><li>Used as references to find information or to identify specific items. </li></ul></ul><ul><ul><li>Frequency is either Real-time reports or Batch Reports </li></ul></ul>Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  49. 49. IS 431 Chapter 9 Output Design <ul><li>Basic Principles continued </li></ul><ul><li>to present information so users can accurately understand it with the least effort </li></ul><ul><li>Manage Information Load – Give managers only the information they need and nothing more. </li></ul><ul><li>Minimize Bias – The order of presentation should match the way in which the information is used. </li></ul>Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  50. 50. IS 431 Chapter 9 Output Design Types of Outputs Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  51. 51. IS 431 Chapter 9 Summary <ul><li>User Interface Design Principles </li></ul><ul><li>The User Interface Design Process </li></ul><ul><li>Navigation Design </li></ul><ul><li>Input Design </li></ul><ul><li>Output Design </li></ul>Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End
  52. 52. IS 431 Chapter 9 The End Any Questions? Introduction Principles for User Interface Design User Interface Design Process Navigation Design Input Design Output Design Summary End

×