1 / 53

Graphical User Interface Design

Graphical User Interface Design. Fall 2006. © 2006 Christopher C. Whitehead Assistant Professor Columbus State University http://csc.colstate.edu/whitehead. What Comprises Good Design?. Understanding of: people, how we see, understand, and think

cree
Download Presentation

Graphical User Interface Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Graphical User Interface Design Fall 2006 © 2006 Christopher C. Whitehead Assistant Professor Columbus State University http://csc.colstate.edu/whitehead

  2. What Comprises Good Design? • Understanding of: • people, how we see, understand, and think • how information must be visually presented to enhance human acceptance and comprehension • how eye and hand movements must flow to minimize the potential for fatigue and injury • Must consider the capabilities and limitations of the hardware and software of the human-computer interface Source: The Essential Guide to User Interface Design by Galitz

  3. Guidelines for the Interface Design Process • Know your user or client • Understand the basic business function • Understand the principles of good screen design • Develop system menus and navigation schemes • Select the proper kinds of windows • Select the proper device-based controls Source: The Essential Guide to User Interface Design by Galitz

  4. Guidelines for the Interface Design Process (cont) • Choose the proper screen-based controls • Write clear text and messages • Provide effective feedback and guidance and assistance • Provide effective internationalization and accessibility • Create meaningful graphics, icons, and images Source: The Essential Guide to User Interface Design by Galitz

  5. Guidelines for the Interface Design Process (cont) • Choose the proper colors • Organize and layout windows and pages • Test, test, and retest Source: The Essential Guide to User Interface Design by Galitz

  6. “The user interface is the most important part of any computer system.” (Galitz, 2002, p. 1) • “The best interface is the one that is not noticed, one that permits the user to focus on the information and task at hand, not the mechanisms used to present the information and perform the task.” (Galitz, 2002, p. 4) Source: The Essential Guide to User Interface Design by Galitz

  7. Benefits of Good Design • Higher task completion rates • More efficient task completion rates • Reduced training costs • Improved customer service Source: The Essential Guide to User Interface Design by Galitz

  8. Definition of Graphical User Interface • A user interface is a collection of techniques and mechanisms to interact with something. In a graphical interface, the primary interaction mechanism is a pointing device of some kind. Source: The Essential Guide to User Interface Design by Galitz

  9. Advantages • Symbols recognized faster than text • Faster learning • Faster use and problem solving • Easier remembering • More natural • Exploits visual/spatial cues • Fosters more critical thinking • Provides context Source: The Essential Guide to User Interface Design by Galitz

  10. Advantages (cont) • Fewer errors • Increased feeling of control • Immediate feedback • Predictable system responses • Easily reversible actions • Less anxiety concerning use • More attractive • May consume less space Source: The Essential Guide to User Interface Design by Galitz

  11. Advantages (cont) • Replaces national languages • Easily augmented with text displays • Low typing requirements • Smooth transition from command language system Source: The Essential Guide to User Interface Design by Galitz

  12. Disadvantages • Greater design complexity • Learning still necessary • Lack of experimentally-derived design guidelines • Inconsistencies in technique and terminology • Working domain is the present • Not always familiar Source: The Essential Guide to User Interface Design by Galitz

  13. Disadvantages (cont) • Window manipulation requirements • Production limitations • Few tested icons exist • Inefficient for touch typists • Inefficient for expert users • Not always the preferred style of interaction • Not always the fastest style of interaction Source: The Essential Guide to User Interface Design by Galitz

  14. Disadvantages (cont) • Increased chances of clutter and confusion • The futz and fiddle factor • May consume more screen space • Hardware limitations Source: The Essential Guide to User Interface Design by Galitz

  15. “A graphical system consists of objects and actions. Objects are what people see on the screen. They are manipulated as a single unit. A well-designed system keeps users focused on the objects, not on how to carry out actions.” (Galitz, 2002, p. 24) • Persistence: the maintenance of a state once it is established. An object’s state should always be automatically preserved when the user changes it. Source: The Essential Guide to User Interface Design by Galitz

  16. Principles of User Interface Design • “An interface must really be just an extension of a person. This means that the system and its software must reflect a person’s capabilities and respond to his or her specific needs. It should be useful, accomplishing some business objectives faster and more efficiently than the previously used method or tool did. It must also be easy and fun to use, evoking a sense of pleasure and accomplishment not tedium and frustration.” (Galitz, 2002, p. 40) Source: The Essential Guide to User Interface Design by Galitz

  17. General Principles of User Interface Design • Aesthetically pleasing • Clarity • Compatibility • Comprehensibility • Configurability • Consistency • Control • Directness • Efficiency Source: The Essential Guide to User Interface Design by Galitz

  18. General Principles of User Interface Design (cont) • Familiarity • Flexibility • Forgiveness • Predictability • Recovery • Responsiveness • Simplicity • Transparency • Trade-offs Source: The Essential Guide to User Interface Design by Galitz

  19. Human Requirements vs Technical Requirements • “Human requirements always take precedence over technical requirements.” (Galitz, 2002, p. 51) Source: The Essential Guide to User Interface Design by Galitz

  20. User Interface Design Process • Gain a complete understanding of users and their tasks • Solicit early and ongoing user involvement • Perform rapid prototyping and testing • Modify and iterate the design as much as necessary • Integrate the design of all the system components Source: The Essential Guide to User Interface Design by Galitz

  21. Common Usability Problems • Ambiguous menus and icons • Languages that permit only single-direction movement through a system • Input and direct manipulation limits • Highlighting and selection limitations • Unclear step sequences Source: The Essential Guide to User Interface Design by Galitz

  22. Common Usability Problems (cont) • More steps to manage the interface than to perform tasks • Complex linkage between and within applications • Inadequate feedback and confirmation • Lack of system anticipation and intelligence • Inadequate error messages, help, tutorials, and documentation Source: The Essential Guide to User Interface Design by Galitz

  23. How to Measure Usability • How effective is the interface? Can the required range of tasks be accomplished. • How learnable is the interface? • How flexible is the interface? • What are the attitudes of the users? Source: The Essential Guide to User Interface Design by Galitz

  24. Know Your User or Client • Understand how people interact with computers • Understand the human characteristics important in design • Identify the user’s level of knowledge and experience • Identify the characteristics of the user’s needs, tasks, and jobs Source: The Essential Guide to User Interface Design by Galitz

  25. Know Your User or Client (cont) • Identify the user’s psychological characteristics • Identify the user’s physical characteristics • Employ recommended methods for gaining understanding of users Source: The Essential Guide to User Interface Design by Galitz

  26. Principles of Good Screen Design A well-designed screen: • Reflects the capabilities, needs, and tasks of its users • Is developed within the physical constraints imposed by the hardware on which it is displayed. • Effectively utilizes the capabilities of its controlling software • Achieves the business objectives of the system for which it is designed Source: The Essential Guide to User Interface Design by Galitz

  27. Interface Design Goals • Reduce visual work • Reduce intellectual work • Reduce memory work • Reduce motor work • Minimize or eliminate any burdens or obstructions imposed by technology Source: The Essential Guide to User Interface Design by Galitz

  28. Test of a Good Design • Can all screen elements be identified by cues other than by reading the words that make them up? • The best interfaces make everything on the screen obvious Source: The Essential Guide to User Interface Design by Galitz

  29. Elements of Good Screen Design • Upper-left starting point • Provide an obvious starting point in the screen’s upper-left corner • Screen navigation and flow • Visually pleasing composition • Balance • Symmetry • Regularity Source: The Essential Guide to User Interface Design by Galitz

  30. Elements of Good Screen Design (cont) • Visually pleasing composition (cont) • Predictability • Sequentiality • Economy • Unity • Proportion • Simplicity (complexity) • Groupings Source: The Essential Guide to User Interface Design by Galitz

  31. Menus • Major form of navigation through a system • If properly designed, assist the user in developing a mental model of the system • Must reflect the conflicting needs of both inexperienced and experienced users Source: The Essential Guide to User Interface Design by Galitz

  32. Menus and Navigation • In organizing a menu, the goal is to simply and effectively reveal its structure, while also reducing the number of actions needed to locate the target item. • Navigation • The most important element in system usability Source: The Essential Guide to User Interface Design by Galitz

  33. Menu Usage Guidelines • Menu bar • To identify and provide access to common and frequently used actions • Pull-down menu • For frequently used application actions that take place in a wide variety of different windows • Cascading menu • To simplify a higher-level menu Source: The Essential Guide to User Interface Design by Galitz

  34. Menu Usage Guidelines (cont) • Pop-up menu • For frequent users and frequently used contextual commands • Tear-off menu • For items sometimes frequently or infrequently selected • Iconic menu • To designate applications available and special functions within an application Source: The Essential Guide to User Interface Design by Galitz

  35. Selecting the Proper Device-based Control • Trackball • Joystick • Graphic tablet • Light pen • Touch screen • Voice • Mouse • Keyboard Source: The Essential Guide to User Interface Design by Galitz

  36. Choosing the Proper Screen-based Controls • Buttons • Text entry/read-only controls • Section controls • Combination entry/selection controls • Specialized operable controls • Custom controls Source: The Essential Guide to User Interface Design by Galitz

  37. Writing Clear Text and Messages • Do not use • jargon • abbreviations, contractions, mnemonics, or acronyms • hyphenated words • Use • short, familiar words • positive terms • complete words • consistent words Source: The Essential Guide to User Interface Design by Galitz

  38. Providing Effective Feedback and Guidance and Assistance • Instructions or prompting • A help facility • Contextual help • Task-oriented help • Reference help • Wizards • Hints or tips Source: The Essential Guide to User Interface Design by Galitz

  39. Creating Meaningful Graphics, Icons, and Images • Icons should be: • familiar • clear and legible • simple • consistent • direct • efficient • discriminable Source: The Essential Guide to User Interface Design by Galitz

  40. Choosing Images • Use existing icons when available • Use images for nouns, not verbs • Use traditional images • Consider user cultural and social norms Source: The Essential Guide to User Interface Design by Galitz

  41. Choosing the Proper Colors • Adds dimension, or realism, to screen usability • Draws attention because it attracts a person’s eye • If used properly, it can emphasize the logical organization of information, facilitate the discrimination of screen components, accentuate differences among elements, and make displays more interesting • If used improperly, it can be distracting, visually fatiguing Source: The Essential Guide to User Interface Design by Galitz

  42. Organizing and Laying Out Windows and Pages • Organize for meaningfulness and efficiency • Create groupings • Provide alignment and balance Source: The Essential Guide to User Interface Design by Galitz

  43. Testing the Interface • Identify the purpose and scope of testing • Understand the importance of testing • Develop a prototype • Develop a test plan • Design a test to yield relevant data • Solicit, select, and schedule users to participate Source: The Essential Guide to User Interface Design by Galitz

  44. Testing the Interface (cont) • Provide the proper test facility • Conduct tests and collect the data • Analyze the data and generate design recommendations • Modify the prototype as necessary • Test the system again • Evaluate the working system Source: The Essential Guide to User Interface Design by Galitz

  45. The Importance of Usability Testing • Developers and users possess different models • Developer’s intuitions are not always correct • There is no average user • It’s impossible to predict usability from appearance • Design standards and guidelines are not sufficient Source: The Essential Guide to User Interface Design by Galitz

  46. The Importance of Usability Testing (cont) • Informal feedback is inadequate • Products’ built-in pieces almost always have system-level inconsistencies • Problems found late are more difficult and expensive to fix • Problems fixed during development mean reduced support costs later • Advantages over a competitive product can be achieved Source: The Essential Guide to User Interface Design by Galitz

  47. Types of Prototypes • Hand sketches and scenarios • Interactive paper • Programmed facades Source: The Essential Guide to User Interface Design by Galitz

  48. Kinds of Test • A test is a tool used to measure something: • Conformance with a requirement • Conformance with guidelines for good design • Identification of design problems • Ease of system learning • Retention of learning over time • Speed of task completion • Speed of need fulfillment • Error rates • Subjective user satisfaction Source: The Essential Guide to User Interface Design by Galitz

  49. Test Characteristics • Usually formal • Created and applied intentionally and with a purpose • Usually based on some kind of criteria, an understand of what a good design would be Source: The Essential Guide to User Interface Design by Galitz

  50. Testing Techniques • Guidelines review • Heuristic evaluation • Cognitive walkthrough • Think-aloud evaluations • Classic experiments • Focus groups • Surveys Source: The Essential Guide to User Interface Design by Galitz

More Related