View
222
Download
0
Category
Tags:
Preview:
Citation preview
1
User Interface Design
CIS 487/587
Bruce R. Maxim
UM-Dearborn
2
Desirable Properties for Game User Interfaces
• Attractiveness– Graphics, sound, animation, etc.
• Usability– Easy to learn– Easy to use– Related to playability
• Usability is no longer an art and there are technical solutions to usability problems
3
Work vs Fun
• Work is less productive if software is really hard to use
• Games are not fun unless some difficulty is involved
• A button marked “solve the problem”– Great for work– Worst possible game design
4
Wrong Ideas
• Usability is not an issue for games, they are supposed to be challenging
• User can do whatever they want in games, so there are no goals
• If sales are good the UI must be OK
• No one is complaining, therefore there are no problems
5
Technical Usability
• It is not a matter of opinion or a list of things you are supposed to do
• Usability means easy to learn and easy to use
• If a system is hard to learn or hard to use, customers will eventually switch to other products
6
Developing Usable Games
• Write out the entertainment goal– What makes the game entertaining?– What needs to be difficult to make it fun?
• Identify difficulties that are not part of the entertainment goal and “fix” them using standard usability design concepts
7
Usability Design Process - 1
• Perform a task analysis– What does the user need to do?– Identify what the user really wants to do
(goals not commands)
• Choose system functions to support then user’s task– How can the system help the user do the
task? (not always obvious)
8
Usability Design Process - 2
• Set usability targets (e.g. learn basics in 15 minutes)
• Choose initial design for chosen functionality– Ease of learning, speed, accuracy– Usability guidelines
• Evaluate usability of the design• Correct problems and repeat evaluation until
no more problems identified
9
Principles of Good Design
• State and action alternatives are visible
• Conceptual model is consistent with system image
• Interface should include mappings that reveal relationships among task stages
• User should receive continuous feedback
10
Where is failure likely as users try to accomplish task goals?
• Users form inadequate goals• Users fail to find the correct interface object
due to poor labeling• Users might not know how to specify or
execute a desired action• Users receive poor feedback
11
Building novel widgets that match user task perceptions
• Recognize human diversity
• Use 8 golden rules of user interface design
• Prevent errors, if at all possible
12
8 Golden Rules of User Interface Design
• Strive for consistency• Enable short-cuts for frequent users• Informative feedback• Design dialogs to yield closure• Offer simple error handling• Permit easy reversal of actions• Support internal locus of control• Reduce short-term memory load on user
13
Data Display Guidelines
• Consistency• Efficient information assimilation by user• Minimal memory load on user• Compatibility between data display and data
entry• Flexibility of user control over data display
14
Getting User’s Attention
• Intensity (2 levels only)• Marking (e.g. underscore)• Fonts (up to 3)• Inverse video• Blinking (2 to 4 hertz)• Color (up to 4 standard colors)• Color blinking• Audio
15
Data Entry Guidelines
• Consistency• Minimal user input actions• Minimal memory load on user• Compatibility between data entry and data
display• Flexible user control
16
Factors affecting choice of evaluation methodology
• Stage of design• Novelty of product• Expected number of users• Criticality of interface• Cost of product and budget for testing• Experience of design and evaluation teams
17
Problems with Testing
• Can't guarantee perfection• When do stop repairing bugs and ship the
prototype?• Testing focuses on normal product use, not
extreme
18
Review Methodologies
• Expert Reviews• Usability Laboratory Approaches• Surveys• Acceptance Tests• Evaluation During Active Use• Classical Experimental Psychology
19
Expert Review Formats
• Heuristic evaluation
• Guideline review
• Consistency inspection
• Cognitive walkthrough
• Formal usability inspection
20
Usability Laboratory Approaches
• Think aloud
• Video tape
• Field tests
• Destructive testing
• Competitive usability testing
21
Surveys
• Focus on specific UI features• Plan statistical analysis before data collection• Consider on-line surveys to increase
response rates• Use semantically anchored Likert type scales
22
Acceptance Tests
• Must be based on measurable criteria
• Focus on user behavior and task completion
23
Evaluation During Active Use
• Interviews• Continuous user performance data
logging• On-line or telephone consulting• On-line suggestion box or trouble
reports• On-line bulletin board or newsgroup• User newsletter or conferences
24
Approaches to User Interface Design
• Human Factors: prototype and test
• Cognitive theory: production system
• Engineering models:– KLM (keystroke level model)– GOMS Models (goals, operators, methods,
selection rules)
25
Keystroke Level Model (KLM)
• Choose representative user task scenarios• Specify design to point that keystrokes defining
actions can be listed• List keystrokes (operators) required to perform task• Insert mental operators at points user needs to stop
and think• Look up standard execution time for each operator• Add up the execution times for the operators• Total is estimated time to complete task
26
Standard Execution Times
• K - key press (0.2 sec = 55 wpm)• P - point with mouse (1.1 sec)• B - mouse button press (0.1 sec)• BB - press and release button (0.2 sec)• H - home hands to keyboard or mouse (0.4
sec)• M - mental act of thinking (1.2 sec)
27
Inserting Mental Operators: Where does the user stop and think?
1. Initiating a process.
2. Making strategic decisions.
3. Retrieving a chunk from user’s short term memory
4. Finding something on the screen.
5. Verifying intended action is complete.
28
Mental Operators New vs Experienced Users
• New users stop and check feedback after every step
• New users have small chunks
• Experienced users have elaborate chunks
• Experienced users may overlap mental operators with physical operators
29
Delete a file by dragging icon to trash
1. Initiate delete. (M)2. Find file icon. (M)3. Point to file icon. (P)4. Press & hold button. (B)5. Verify icon reverse
video. (M)6. Find trash icon. (M)7. Drag file to trash icon.
(P)
8. Verify trash reverse video. (M)
9. Release button. (B)
10. Verify bulging trash icon. (M)
11. Find original window. (M)
12. Point to window. (P)
3P + 2B + 7M = 12.6 sec.
30
Placement of Mental Operators
• Hard to do - requires good intuition from designer
• Consistency in the number of Mental's assigned is more important than exact positioning
31
GOMS ModelGoals Operators Methods Selection Rules
Advanatges• GOMS models are executable• GOMS models allow simulated execution of user task• Provide a rigorous description of what user must
learn• Provide estimate of size or complexity of interface
(number of distinct methods and their length)• Can estimate both learning time (about 30 sec per
step and execution time (total of KLM operators)• Allow designer to evaluate the effect of reusing or
sharing methods among several tasks
32
This example is extracted from:
David Kieras, A Guide to GOMS Task Analysis,
University of Michigan Technical Report,
Spring, 1994.
33
User Goals
• Delete a file.
• Move a file.
• Delete a directory.
• Move a directory.
34
To accomplish goal of deleting a file:
1. Accomplish goal of dragging file to trash.
2. Return with goal completed.
To accomplish goal of moving a file:
1. Accomplish goal of dragging file to destination.
2. Return with goal completed.
35
To accomplish goal of deleting a directory:
1. Accomplish goal of dragging directory to trash.
2. Return with goal completed.
To accomplish goal of moving a directory:
1. Accomplish goal of dragging directory to trash.
2. Return with goal completed.
36
Generalized Methods
Method for accomplishing goal of deleting an object:
1. Accomplish goal of dragging object to trash.2. Return with goal completed.
Method for accomplishing goal of moving an object:
1. Accomplish goal of dragging object to destination.
2. Return with goal completed.
37
Sub MethodAccomplish goal of dragging item to destination:1. Locate icon on screen.2. Move cursor to item icon location.3. Hold mouse button.4. Locate destination icon.5. Move cursor to destination icon.6. Verify destination icon reverse video.7. Release mouse button.8. Return with goal accomplished.
38
Method for GOMS Model Construction
• Make a list of top-level user goals• Write a step-by-step method for accomplishing each
goal on list• Continue refining each step that is not a keystroke
level operator by defining it as a subgoal and add it to the list of user goals
• Continue processing user goals until list is empty (meaning that all user goals are defined in terms of keystrokes)
• If there are multiple methods to accomplish a goal supply decision rules to choose which method to invoke
39
User Interface Styles
• Direct manipulation – GUI (graphical user interface)
– WIMP (windows, icons, mouse, pull-down menus)
• Menus• Forms• Command language
40
Direct Manipulation Interface Characteristics
• Screen objects resemble physical objects
• Objects arranged in 2-D space
• Trades perceptual motor operations for linguistic operations
• Use of recognition in place of recall
• Expensive to implement
41
Direct Manipulation Interfaces Allow
• Novices to learn basic fundamentals quickly• Experts to carry out new tasks• Knowledgeable intermittent users to retain
operational concepts• Error messages are rarely needed• Users can assess progress to goals and make
changes instantly• Users experience less anxiety because systems is
understood and actions are reversible• Users gain confidence and mastery through their
sense of control over the system
42
Direct Manipulation Concerns
• Increased system resources
• Cumbersome actions
• Weak macro techniques
• History tracing is hard to log
• Visually impaired users at risk
43
GOMS Model for Direct Manipulation Interfaces
• Basic goal - minimize learning using a metaphoric device
• Basic method - find relevant object on screen and manipulate
Step 1. Search screen for an object to operate on
Step 2. Select it for manipulationStep 3. Move object on screen to destination
44
For direct manipulation interfaces you must ensure:
• Visual search (steps 1 and 3) works easily to find objects and their destinations
• Steps 2 and 3 must be fast consistent and easy to learn
• There must be a direct manipulation metaphor or analogy that is familiar to the user (e.g. desktop)
45
Problems with Direct Manipulation Interfaces
• Visual representations are more spread out than simple text - causing "off page" problems
• Users must learn meaning of components (e.g. icons) which are meaningful to designer and not user
• Visual representation may be misleading• Touch typists do better with a keyboard than
with a mouse
46
Icons
• The debate concerning text versus icons is an emotional one.
• The usefulness of icons depends on how quickly user can figure out their meanings.
47
Icon Design Guidelines - part 1
• Represent object/action in recognizable form• Limit number of icons• Make icon stand out from background• Be careful when using 3-D icons• Selected icons must be easily distinguished
from unselected icons
48
Icon Design Guidelines - part 2
• Icons unique from one another• Ensure harmony with family of icons• Design animation movement• Add detailed information if possible• Explore use of icon combinations to create
new objects or operations
49
Components for a Successful Virtual Reality Application
• Visual display• Head positioning and sensing• Hand positioning and sensing• Force feedback• Sound input/output• Other sensation• Cooperative and competitive VR requires
networking
50
Menu Architectures
• Single
• Linear sequence
• Tree
• Acyclic network
• Cyclic network
51
Menu Screen Display Types
• Text - single key
• Text - pointing device
• Icon - pointing device
• Radio buttons
• Check boxes
• Pull-down or pop-up
• Permanent (e.g. command bars)
52
GOMS Model for Menu User Task
Step1. Search screen for item matching part of task
description.
Step2. if match then
choose menu item
else
go to appropriate place in menu structure
Step3. if task accomplished then
return with goal accomplished
Step4. go to Step1.
53
For menu interfaces you must ensure:
• Search and matching (Step1) is easy• Items must be recognizable in terms of task
goals• Menu structure must reflect task structure• Minimum learning required for navigation
knowledge required (Step2)• Choosing items must be consistent and easy• Dealing with failure to match or other error
must be consistent and easy• Must have only one good navigation method
54
Menu Architectural Guidelines
• Breadth preferred over depth for submenus
• Provide means to move back up menu hierarchy (esp. to top level)
55
Menu Item Design Guidelines
• Command set small enough to fit within single menu• User always have access to all possible menu items
without having to refer to a manual• Logical presentation sequences (time, numeric,
alphabetic, physical properties, function/task organization, frequency of use, most important first)
• Icons harder to recognize than words for abstract concepts
• Avoid screen clutter• Don’t assume user will notice subtle cues (e.g. color
or border changes)
56
Making Selection Easy
• Provide command key bypasses for frequent commands
• Ensure consistent selection and navigation methods throughout
• Be aware of Fitt's law considerations for pointing devices
57
Fitt’s Law
• Formal statement of relationship between the size of a target and distance that user must move pointing device to hit the target– big targets are hit more quickly than small
targets – users move quickly at first and slow down
as they home in on the target
58
Supporting Learning in Menu Interfaces
• Don’t automatically rearrange menus (e.g. gray out inactive items instead)
• User mnemonic identifiers
• Allow BLT type ahead (single key strokes as well as use of pointing devices)
59
Menu Interface Design Guidelines - part 1
• Use task semantics to organize menu• Prefer breadth over depth• Show user position in menu system using
graphics, numbers, titles, etc.• Use menu titles in trees• Use meaningful item grouping• Use meaningful item sequencing
60
Menu Interface Design Guidelines - part 2
• Make items brief, begin with keyword• Use consistent grammar, layout, terminology• Allow type ahead, jump ahead, or shortcuts• Allow jumps to previous or main menus• Consider on-line help and novel selection or
display devices
61
GOMS Model for Form Fill-in User Task
Step1. Search screen for next field to be filled in
Step2. Move cursor to next field
Step3. Figure out what to type and type it in
Step4. if all fields correct then
indicate you are finished
else
move cursor to incorrect field and change entry
Step5. go to Step1
62
For form fill-in interfaces you must ensure that:
• Search (Step1) and thinking (Step3) are easy
• Cursor movement (Step2) and finished signal (Step4) are consistent and easy to learn
• Correction methods (Step4) are simple and easy to learn
63
Form Fill-in Design Guidelines
• Preserve similarities with existing paper forms• Do not force entry order• Provide on-screen navigation instructions• Use good graphic layout• Describe special entry formats• Apply validity checks and provide clear
feedback on errors
64
GOMS Model for Command Language Interface User Task
Step1. Think of and enter command verb
Step2. Think of and enter next argument
Step3. if more arguments then
go to Step2
Step4. if command is incorrect then
correct the command
Step5. Signal computer to process the command.
Step6. go to Step1
65
What makes a command language easy to learn and use?
• Easy command synthesis• User can think up command by analogy from
previously learned commands• Commands conform to simple rules rather
than lots of unique special cases
66
Command Language Design Guidelines
• Make command terms easy to remember• Provide easy command synthesis method and
abbreviation strategy• Provide simple, consistent command structure• Commands should be right grain size• Parsimony (no more commands than really needed)• Studies show a few commands are used a lot by
most users• Provide for command reuse (replay, re-entry,
macros)• Avoid unnecessary distinctions among commands
67
Command Language Abbreviation Strategies
• Simple truncation
• Drop vowel and use simple truncation
• First and last letters
• Standard abbreviations from other contexts
• First letter of each word or phrase
• Phonics (e.g. XQT for execution)
68
Dialog Boxes
• Combinations of all four interface styles (menu, form fill-in, direct manipulation, command line)
• User task model would also be a composite model
69
Dialog Box Design Guidelines
• Meaningful title• Top-left to bottom right sequencing• Proper clustering and emphasis• Consistent language• Consistent terminology, fonts, capitalization,
justification• Standard buttons• Error prevention by direct manipulation
70
Dialog Box External Relationship Design Guidelines
• Smooth appearance and disappearance• Distinguishable boundaries• Sized to reduce overlap problems• Displayed close to appropriate screen objects• No overlap of required items• Easy to make disappear• Clear directions to cancel or complete
operations
Recommended