An Instructor's Outline ofDesigning the User Interface 4th .ppt

1、Copyright 2005, Pearson Education, Inc.,An Instructors Outline of Designing the User Interface 4th Edition,by Ben Shneiderman & Catherine Plaisant,Slides developed by Roger J. Chapman,Copyright 2005, Pearson Education, Inc.,Chapter 2,Guidelines, Principles, and Theories,Copyright 2005, Pearson Educa

2、tion, Inc.,Guidelines,Shared language Best practices Critics Too specific, incomplete, hard to apply, and sometimes wrong Proponents Encapsulate experience,Copyright 2005, Pearson Education, Inc.,Navigating the interface,Sample of the National Cancer Institutes guidelines: Standardize task sequences

3、 Ensure that embedded links are descriptive Use unique and descriptive headings Use check boxes for binary choices Develop pages that will print properly Use thumbnail images to preview larger images,Copyright 2005, Pearson Education, Inc.,Accessibility guidelines,Provide a text equivalent for every

4、 nontext element For any time-based multimedia presentation synchronize equivalent alternatives Information conveyed with color should also be conveyed without it Title each frame to facilitate from identification and navigation,Copyright 2005, Pearson Education, Inc.,Organizing the display,Smith an

5、d Mosier (1986) offer five high-level goals Consistency of data display Efficient information assimilation by the user Minimal memory load on the user Compatibility of data display with data entry Flexibility for user control of data display,Copyright 2005, Pearson Education, Inc.,Getting the users

6、attention,Intensity Marking Size Choice of fonts Inverse video Blinking Color Audio,Copyright 2005, Pearson Education, Inc.,Facilitating data entry,Smith and Mosier (1986) offer five high-level objectives as part of their guidelines for data entry Consistency of data-entry transactions Minimal input

7、 actions by user Minimal memory load on users Compatibility of data entry with data display Flexibility for user control of data entry,Copyright 2005, Pearson Education, Inc.,Principles,More fundamental, widely applicable, and enduring than guidelines Need more clarification Fundamental principles D

8、etermine users skill levels Identify the tasks Five primary interaction styles Eight golden rules of interface design Prevent errors Automation and human control,Copyright 2005, Pearson Education, Inc.,Determine users skill levels,“Know thy user” Hansen (1971) Age, gender, physical and cognitive abi

9、lities, education, cultural or ethnic background, training, motivation, goals and personality Design goals based on skill level Novice or first-time users Knowledgeable intermittent users Expert frequent users Multi-layer designs,Copyright 2005, Pearson Education, Inc.,Identify the tasks,Task Analys

10、is usually involve long hours observing and interviewing users Decomposition of high level tasks Relative task frequencies,Copyright 2005, Pearson Education, Inc.,Choose an interaction style,Direct Manipulation Menu selection Form fillin Command language Natural language,Copyright 2005, Pearson Educ

11、ation, Inc.,The 8 golden rules of interface design,Strive for consistency Cater to universal usability Offer informative feedback Design dialogs to yield closure Prevent errors Permit easy reversal of actions Support internal locus of control Reduce short term memory,Copyright 2005, Pearson Educatio

12、n, Inc.,Prevent errors,Make error messages specific, positive in tone, and constructive Mistakes and slips (Norman, 1983) Correct actions Gray out inappropriate actions Selection rather than freestyle typing Automatic completion Complete sequences Single abstract commands Macros and subroutines,Copy

13、right 2005, Pearson Education, Inc.,Automation and human control,Copyright 2005, Pearson Education, Inc.,Automation and human control (cont.),Successful integration: Users can avoid: Routine, tedious, and error prone tasks Users can concentrate on: Making critical decisions, coping with unexpected s

14、ituations, and planning future actions,Copyright 2005, Pearson Education, Inc.,Automation and human control (cont.),Supervisory control needed to deal with real world open systems E.g. air-traffic controllers with low frequency, but high consequences of failure FAA: design should place the user in c

15、ontrol and automate only to improve system performance, without reducing human involvement,Copyright 2005, Pearson Education, Inc.,Automation and human control (cont.),Goals for autonomous agents knows users likes and dislikes makes proper inferences responds to novel situations performs competently

16、 with little guidance Tool like interfaces versus autonomous agents Aviators representing human users, not computers, more successful,Copyright 2005, Pearson Education, Inc.,Automation and human control (cont.),User modeling for adaptive interfaces keeps track of user performance adapts behavior to

17、suit users needs allows for automatically adapting system response time, length of messages, density of feedback, content of menus, order of menu items, type of feedback, content of help screens can be problematic system may make surprising changes user must pause to see what has happened user may n

18、ot be able to predict next change interpret what has happened restore system to previous state,Copyright 2005, Pearson Education, Inc.,Automation and human control (cont.),Alternative to agents: user control, responsibility, accomplishment expand use of control panels style sheets for word processor

19、s specification boxes of query facilities information-visualization tools,Copyright 2005, Pearson Education, Inc.,Theories,Beyond the specifics of guidelines Principles are used to develop theories Descriptions/explanatory or predictive Motor task, perceptual, or cognitive,Copyright 2005, Pearson Ed

20、ucation, Inc.,Explanatory and predictive theories,Explanatory theories: Observing behavior Describing activity Conceiving of designs Comparing high-level concepts of two designs Training Predictive theories: Enable designers to compare proposed designs for execution time or error rates,Copyright 200

21、5, Pearson Education, Inc.,Perceptual, Cognitive, & Motor tasks,Perceptual or Cognitive subtasks theories Predicting reading times for free text, lists, or formatted displays Motor-task performance times theories: Predicting keystroking or pointing times,Copyright 2005, Pearson Education, Inc.,Taxon

22、omy (explanatory theory),Order on a complex set of phenomena Facilitate useful comparisons Organize a topic for newcomers Guide designers Indicate opportunities for novel products.,Copyright 2005, Pearson Education, Inc.,Conceptual, semantic, syntactic, and lexical model,Foley and van Dam four-level

23、 approach Conceptual level: Users mental model of the interactive system Semantic level: Describes the meanings conveyed by the users command input and by the computers output display Syntactic level: Defines how the units (words) that convey semantics are assembled into a complete sentence that ins

24、tructs the computer to perform a certain task Lexical level: Deals with device dependencies and with the precise mechanisms by which a user specifies the syntax Approach is convenient for designers Top-down nature is easy to explain Matches the software architecture Allows for useful modularity duri

25、ng design,Copyright 2005, Pearson Education, Inc.,Stages of action models,Normans seven stages of action Forming the goal Forming the intention Specifying the action Executing the action Perceiving the system state Interpreting the system state Evaluating the outcome Normans contributions Context of

26、 cycles of action and evaluation. Gulf of execution: Mismatch between the users intentions and the allowable actions Gulf of evaluation: Mismatch between the systems representation and the users expectations,Copyright 2005, Pearson Education, Inc.,Stages of action models (cont.),Four principles of g

27、ood design State and the action alternatives should be visible Should be a good conceptual model with a consistent system image Interface should include good mappings that reveal the relationships between stages User should receive continuous feedback Four critical points where user failures can occ

28、ur Users can form an inadequate goal Might not find the correct interface object because of an incomprehensible label or icon May not know how to specify or execute a desired action May receive inappropriate or misleading feedback,Copyright 2005, Pearson Education, Inc.,GOMS and the keystroke-level

29、model,Goals, operators, methods, and selection rules (GOMS) model Keystroke-level model: Predict performance times for error-free expert performance of tasks Transition diagrams Natural GOMS Language (NGOMSL) Several alternative methods to delete fields, e.g. Method 1 to accomplish the goal of delet

30、ing the field: Decide: If necessary, then accomplish the goal of selecting the field Accomplish the goal of using a specific field delete method Report goal accomplished,Copyright 2005, Pearson Education, Inc.,GOMS and the keystroke-level model (cont.),Method 2 to accomplish the goal of deleting the

31、 field: Decide: If necessary, then use the Browse tool to go to the card with the field Choose the field tool in the Tools menu Note that the fields on the card background are displayed Click on the field to be selected Report goal accomplished Selection rule set for goal of using a specific field-d

32、elete method: If you want to past the field somewhere else, then choose “Cut Field“ from the Edit menu. If you want to delete the field permanently, then choose “Clear Field“ from the Edit menu. Report goal accomplished.,Copyright 2005, Pearson Education, Inc.,Consistency through grammars,Consistent

33、 user interface goal Definition is elusive - multiple levels sometimes in conflict Sometimes advantageous to be inconsistent.,Consistent Inconsistent A Inconsistent B delete/insert character delete/insert character delete/insert character delete/insert word remove/bring word remove/insert word delet

34、e/insert line destroy/create line delete/insert line delete/insert paragraph kill/birth paragraph delete/insert paragraph,Copyright 2005, Pearson Education, Inc.,Consistency through grammars (cont.),Inconsistent action verbs Take longer to learn Cause more errors Slow down users Harder for users to

35、remember,Copyright 2005, Pearson Education, Inc.,Consistency through grammars (cont.),Task-action grammars (TAGs) try to characterize a complete set of tasks. Example: TAG definition of cursor control Dictionary of tasks: move-cursor-one-character-forward Direction=forward,Unit=char move-cursor-one-

36、character-backward Direction=backward,Unit=char move-cursor-one-word-forward Direction=forward,Unit=word move-cursor-one-word-backward Direction=backward,Unit=word,Copyright 2005, Pearson Education, Inc.,Consistency through grammars (cont.),High-level rule schemas describing command syntax: task Dir

37、ection, Unit - symbol Direction + letter Unit symbol Direction=forward - “CTRL“ symbol Direction=backward - “ESC“ letter Unit=word - “W“ letter Unit=char - “C“ Generates a consistent grammar: move cursor one character forward CTRL-C move cursor one character backward ESC-C move cursor one word forwa

38、rd CTRL-W move cursor one word backward ESC-W,Copyright 2005, Pearson Education, Inc.,Widget-level theories,Follow simplifications made in higher-level, user-interface building tools. Potential benefits: Possible automatic generation of performance prediction A measure of layout appropriateness avai

39、lable as development guide Estimates generated automatically and amortized over many designers and projects perceptual complexity cognitive complexity motor load Higher-level patterns of usage appear,Copyright 2005, Pearson Education, Inc.,Object/Action Interface model,Syntactic-semantic model of hu

40、man behavior used to describe programming database-manipulation facilities direct manipulation Distinction made between meaningfully-acquired semantic concepts and rote-memorized syntactic details Semantic concepts of users tasks well-organized and stable in memory Syntactic details of command langu

41、ages arbitrary and required frequent rehearsal,Copyright 2005, Pearson Education, Inc.,Object/Action Interface model (cont.),With introduction of GUIs, emphasis shifted to simple direct manipulations applied to visual representations of objects and actions. Syntactic aspects not eliminated, but mini

42、mized.,Copyright 2005, Pearson Education, Inc.,Object/Action Interface model (cont.),Object-action design: understand the task. real-world objects actions applied to those object create metaphoric representations of interface objects and actions designer makes interface actions visible to users,Copy

43、right 2005, Pearson Education, Inc.,Task hierarchies of objects and actions,Decomposition of real-world complex systems natural human body buildings cities symphonies baseball game,Copyright 2005, Pearson Education, Inc.,Task hierarchies of objects and actions (cont.),Computer system designers must

44、generate a hierarchy of objects and actions to model users tasks: Representations in pixels on a screen Representations in physical devices Representations in voice or other audio cue,Copyright 2005, Pearson Education, Inc.,Interface hierarchies of objects and actions,Interface includes hierarchies

45、of objects and actions at high and low levels. E.g. A computer system: Interface Objects rectory name length date of creation owner access control files of information lines difields characters fonts pointers binary numbers,Copyright 2005, Pearson Education, Inc.,Interface hierarchies of objects and

46、 actions (cont.),Interface Actions load a text data file insert into the data file save the data file save the file save a backup of the file apply access-control rights overwrite previous version assign a name,Copyright 2005, Pearson Education, Inc.,Interface hierarchies of objects and actions (con

47、t.),Interface objects and actions based on familiar examples.Users learn interface objects and actions by: seeing a demonstration hearing an explanation of features conducting trial-and-error sessions,Copyright 2005, Pearson Education, Inc.,The disappearance of syntax,Users must maintain a profusion

48、 of device-dependent details in their human memory. Which action erases a character Which action inserts a new line after the third line of a text file Which abbreviations are permissible Which of the numbered function keys produces the previous screen.,Copyright 2005, Pearson Education, Inc.,The di

49、sappearance of syntax (cont.),Learning, use, and retention of this knowledge is hampered by two problems Details vary across systems in an unpredictable manner Greatly reduces the effectiveness of paired-associate learning Syntactic knowledge conveyed by example and repeated usage Syntactic knowledg

50、e is system dependent,Copyright 2005, Pearson Education, Inc.,The disappearance of syntax (cont.),Minimizing these burdens is the goal of most interface designers Modern direct-manipulation systems Familiar objects and actions representing their task objects and actions. Modern user interface building tools Standard widgets,