550 likes | 951 Vues
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
E N D
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 • 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
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
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
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
“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
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
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
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
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
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
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
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
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
“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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Types of Prototypes • Hand sketches and scenarios • Interactive paper • Programmed facades Source: The Essential Guide to User Interface Design by Galitz
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
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
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