Transcript Cooper Part III Interaction Details Designing for the Desktop Jeff Offutt http://www.cs.gmu.edu/~offutt/ SWE 632 User Interface Design and Development Cooper Ed4, Ch 18

Cooper Part III
Interaction Details
Designing for the Desktop
Jeff Offutt
http://www.cs.gmu.edu/~offutt/
SWE 632
User Interface Design and Development
Cooper Ed4, Ch 18
Context
Part II
Presented a lot of deep concepts
They take awhile to sink in, and some will
doubtless percolate in your brains for awhile
Part III
Explains how the concepts in Part II can be
applied to create more usable UIs
Helps us learn how to actualize the concepts
from part II
6-Nov-15
© Jeff Offutt, 2004-2014
2
Ch 18 : Window Behaviors
(history)
• Most GUI concepts were developed from 1963—1975
– Various academic researchers
1963 MIT PhD student Edward Sutherland introduced the idea
of navigating an entire window—Sketchpad
– IBM TJ Watson (theory only)
– Xerox’s Palo Alto Research Center (PARC)
• Invented : mouse, WYSIWYG, desktop metaphor, windows,
scrollbar, button, drop down menus, …
– NOT OO programming, as the book mistakenly says
• Xerox built Alto, then Star
– Expensive, VERY slow, not ready for prime time
6 November 2015
© Jeff Offutt, 2004-2014
3
GUI Concept to
Commercialization
• Apple took ideas from a Xerox demo
– Hired several Xerox engineers
– Sold the first commercially successful GUI computer
• Then MS (less then 10 people at the time) convinced
Apple to let them develop applications for Apple’s
computer
– Apple’s Lisa was successful, but a little expensive
• MS then reverse-engineered the code from the Apple to
create Windows
– But very badly — their engineers were not as good
– Ten years later, MS was convicted of theft, and paid a small fine
6 November 2015
© Jeff Offutt, 2004-2014
4
Historical Corrections
• Apple’s Lisa was not a failure, but the price (about $1200,
NOT $9995!) was too high for widespread home
adoption
• Multiplan was an unusable failure, so Microsoft bought the
forerunner of Excel
• OO started with Dave Parnas in early ’70s, and was
developed by language designers, software engineers, and
graphics programmers at universities through the ’70s and
’80s
– OO was adopted by the Mac in the late ’80s
6 November 2015
© Jeff Offutt, 2004-2014
5
GUI Window Principles
Many principles were developed by researchers at
universities and Xerox that are still in use
• Use of visual metaphors
• Program state should not change the behavior of the UI
– Drag-n-dropping files is move on the same drive, but copy on
different drives
– State-based behavior is okay IF the user knows the current state
• Overlapping windows is okay, tiled windows is not
– “Proving” this was a PhD dissertation around 1984
– Full-screen applications are okay when users only do one thing
• Multi-panes (eg, tabs) is a good compromise
– Introduced in X toolkit applications in mid-80s
6 November 2015
© Jeff Offutt, 2004-2014
6
Window Behaviors
Most concepts and principles in GUIS have been around
for more than 30 years …
It took awhile for hardware designers and marketing to
catch up to the research
Windows
Icons
WIMP =
Menus
Pointers
6-Nov-15
© Jeff Offutt, 2004-2014
7
Outline
1. Anatomy of a Desktop App
2. Windows on the Desktop
3. Menus
4. Toolbars, Palettes, and Sidebars
5. Pointing, Selection, and Direct Manipulation
6 November 2015
© Jeff Offutt, 2004-2014
8
Structures in Sovereign GUIs
Primary Windows
Contains content … slide content, text, spreadsheet
numbers, email message, … and primary controls
Panes
Primary content
Menu bar
Toolbars, panels, etc.
Secondary Windows
Contains support … dialogs, popout windows or
palettes, …
6-Nov-15
© Jeff Offutt, 2004-2014
9
Outline
1. Anatomy of a Desktop App
2. Windows on the Desktop
3. Menus
4. Toolbars, Palettes, and Sidebars
5. Pointing, Selection, and Direct Manipulation
6 November 2015
© Jeff Offutt, 2004-2014
10
MDI vs. SDI
• Multiple Document Interface (MDI)
–
–
–
–
One process that runs multiple instances
One Excel program running, but two documents can be opened
Users can only see one at a time
Navigation among documents is painful (excise)
• Single Document Interface (SDI)
– Each instance has a different process
– Two Powerpoint files can be viewed simultaneously
• MDI uses fewer computer resources
• SDI gives more flexibility to users
6-Nov-15
© Jeff Offutt, 2004-2014
11
Windows Are Rooms
• Metaphor : Each application window is a separate room
– Do not add a room unless it has a purpose
– Unnecessary rooms take up space and adds unnecessary
navigation (are formal living rooms necessary today?)
• Many UIs have too many dialog boxes
– We don’t have different rooms for toilets and sinks
A dialog box is another room;
have a good reason to go there
Provide functions in the window
where they are used
6-Nov-15
© Jeff Offutt, 2004-2014
12
Outline
1. Anatomy of a Desktop App
2. Windows on the Desktop
3. Menus
4. Toolbars, Palettes, and Sidebars
5. Pointing, Selection, and Direct Manipulation
6 November 2015
© Jeff Offutt, 2004-2014
13
Types of Menus
• Old fashioned list of functions taking up the screen
– Example : Patriot Web
• GUI menus
– Top menu bar
– Pop-up menu
– Drop-down menus
6-Nov-15
© Jeff Offutt, 2004-2014
14
Menus Are For Learning
• “Pedagogic vector” means a command or tool that helps
users learn the system’s capabilities
• Toolbars and icons are difficult for beginning users
– They do not explain their behavior without trial and error or
previous knowledge
Use menus to provide a
pedagogic vector
6-Nov-15
© Jeff Offutt, 2004-2014
15
Menus are Effective When
• Users have little or no training
• Users are beginners
• Users are not familiar with terminology
• Users need help making decisions
6-Nov-15
© Jeff Offutt, 2004-2014
16
Order Of Menu Items
1. Frequently used first (most common strategy)
2. Chronological (time)
3. Numeric
4. Alphabetic
5. “Important” items first (exit)
6-Nov-15
© Jeff Offutt, 2004-2014
17
Phrasing of Menu Choices
• Words should be familiar
• All screens must be consistent
• Every word must be distinct
• Start with a verb
• Phrases must be concise
• Use the keyword first
6-Nov-15
© Jeff Offutt, 2004-2014
18
Menu Conventions
• Disable menu items if they are not currently relevant
– Keep them visible, but “grayed out”
– Don’t mock users with a “made you look” action
• Checkmarks can show when items are turned off or on
– Firefox “Go” shows current page and Thunderbird shows “View
Display Attachments Inline”
• Flip-flop menu items show what is currently not available
– Confuses users who think it shows state, not potential action
• Icons on menu items help users find items quickly
– Pictures are faster to recognize, but text is more precise
6 November 2015
© Jeff Offutt, 2004-2014
19
Keyboard Accelerators
• Help users invoke a function from the keyboard
– All tools in a “collection” should have the same style and same
accelerators when possible
– Users must be able to find them
• Conventions from ancient history (early 1980s)
–
–
–
–
Ctrl-C, Ctrl-V
Ctrl-P
Ctrl-S
Ctrl-Z, Ctrl-Y
• Which commands should have accelerators?
– Let users define their own (power users!)
• PPT accelerators are a real mess …
6 November 2015
© Jeff Offutt, 2004-2014
20
Outline
1. Anatomy of a Desktop App
2. Windows on the Desktop
3. Menus
4. Toolbars, Palettes, and Sidebars
5. Pointing, Selection, and Direct Manipulation
6 November 2015
© Jeff Offutt, 2004-2014
21
Toolbars
• Toolbars are for knowledgeable users
– Not much help for new users – may detract from learning
– They offer a kind of shortcut
• Use menus to teach and to access seldom-used functions
• Use toolbars for fast access
– Unfortunately, new users tend to learn the toolbars and never
go to the menus …
• How do users know what toolbar butcons do?
– The icons are good for reminding, but not for teaching
Toolbars give experienced users fast
access to frequently used functions
6 November 2015
© Jeff Offutt, 2004-2014
22
Toolbar Tactics
1. Use icons, not text
• Text takes space and time
2. Types of buttons on tool bars
•
Momentary (traditional)
•
•
Latching
•
•
Push and it starts a function
Changes state—button stays depressed
Pop-ups
3. Tool bars should be customizable
•
•
•
Movable
Reshapable
Allow users to add, remove, and change size of buttons
4. Magnetic buttons “attract” the cursor when it gets close
6-Nov-15
© Jeff Offutt, 2004-2014
23
Tool Tips
• An old idea in the research literature in the 1970s
• Apple tried a version that always popped up (balloon help)
– It was a too intrusive for expert users
• Windows made them smaller and delayed activation
– They use the events “hover” not “mouseover”
– This is much more effective than balloon help
Use tooltips with all toolbar and
iconic controls
6 November 2015
© Jeff Offutt, 2004-2014
24
Outline
1. Anatomy of a Desktop App
2. Windows on the Desktop
3. Menus
4. Toolbars, Palettes, and Sidebars
5. Pointing, Selection, and Direct Manipulation
6 November 2015
© Jeff Offutt, 2004-2014
25
Direct Manipulation
• Direct Manipulation is about visual feedback, not just about
using a mouse
– Visual representation of objects
– Physical actions instead of text entry
– Immediate feedback from operations
• Cooper : “I’ve seen many instances of direct-manipulation idioms
implemented without adequate visual feedback, and these idioms fail to
satisfy the definition of effective direct manipulation.”
• That’s what I mean by “a menu system with a mouse.”
6 November 2015
© Jeff Offutt, 2004-2014
26
Mouse Ergonomics
• Fine motor skills : Using small muscles, such as in fingers
• Gross motor skills : Using large muscles, such as in arms
• Mixing fine and gross motor skills requires practice and
dexterity
– Hitting a baseball, throwing a baseball accurately
– Drawing, painting
– Moving the mouse a short distance requires fine motor skills,
moving it further requires gross motor skills
Avoid forcing users to mix fine and gross
motor skills
Design for users, not athletes
6-Nov-15
© Jeff Offutt, 2004-2014
27
User Level Language Hints
• Provide a way to escape from dragging
– Escape
– Any keystroke
– Chord-click-click right button to cancel
MS API does not define chord-click
Try to avoid mixing fine motor control (clicking) with gross
motor (dragging) as much as possible
• Provide visual feedback when grasping (selecting)
• Apply the principle of locality
– Put widgets that users will use adjacently in time adjacent in
space
• Avoid making users move between keyboard and mouse
6 November 2015
© Jeff Offutt, 2004-2014
28
Selecting Events
• Clicking uses fine motor skills, but dragging uses gross
motor skills
• The standard scrollbar requires a mix of fine and gross
motor skills
Stupid
Better
Good!
Support both mouse and keyboard use
for navigation and selection tasks
6 November 2015
© Jeff Offutt, 2004-2014
29
Selection
• Just as with command languages (CLs), GUI operations
have two parts:
– Operation (verb)
– Operands (objects)
• CLs often use natural speaking style : verb-object
• GUIs should usually let the user select an object, then
apply an operation : object-verb
• This makes selection very important
6 November 2015
© Jeff Offutt, 2004-2014
30
Discrete and Contiguous Selection
• Discrete data : Objects that are independent and need to
be selected independently
– Picture elements in a drawing tool
• Contiguous data : Objects that are grouped together in
lists or matrices
– Spreadsheet cells and words in word processors
• Whether data is discrete or contiguous sometimes
depends on user needs
– Files can often be selected in both ways
– Shift-left mouse for contiguous selection
– Ctrl-left mouse for discrete selection
6 November 2015
© Jeff Offutt, 2004-2014
31
Selection Styles
• Mutual Exclusion : Selecting a new object “unselects” the
previous object
• Additive Selection : Selecting a new object adds it to the
group of selected objects
– Usually implemented with a meta-key such as shift or ctrl
• Insertion selection allows a new object to be inserted
between existing objects
• Replacement selection allows a new object to replace
existing objects
The selection state should be visually
evident and unambiguous
6 November 2015
© Jeff Offutt, 2004-2014
32
Drag and Drop
• Drag-and-drop is one of the most powerful direct
manipulation idioms
• The Web has decreased its use
– How do you drag-and-drop in a Web interface?
– How do you program drag-and-drop in HTML?
• Use JavaScript …
• http://www.dhtmlgoodies.com/scripts/drag-drop-custom/demo-drag-drop-3.html
• From the book : “Microsoft … pioneered some novel
uses … movable toolbars and dockable palettes”
– These were in the Xerox Star circa 1982
• Remember that drag-and-drop mixes fine and gross
motor skills
6 November 2015
© Jeff Offutt, 2004-2014
33
Source-and-Target
• Selecting an object and dragging it to another object
– Moving documents among directories
– Not moving an object around on a background
• Dragging to a control
– Printer, trashcan, file archiving, compilers
– Receiver must be able to accept anything, or refuse objects it
cannot recognize
– Another instance of data integrity / immunity
Drop candidates must visually indicate
their receptivity
6 November 2015
© Jeff Offutt, 2004-2014
34
Visual Feedback
• The source-object must change appearance when
– The cursor is on its handle
– It is selected
• When an object passes over a possible recipient (“drop
candidate”), it must change its appearance to indicate that
it can accept the object
• Users need to know what happens if they “let go”
– Letting go is easy to do accidentally, so it should not cause
problems
– Always provide undo
6 November 2015
© Jeff Offutt, 2004-2014
35
De-sensitizing the Mouse
• Don’t move objects when users twitch while releasing the
button
– Desensitize the mouse after precise pixel movements
– GUIs often do this well, mobile devices (finger operated) often
do not
• Don’t let the heel of the thumb move the mouse on a
laptop keypad
– My old laptop turned the keypad off after 2 or 3 keystrokes
– My current laptop does not have that feature
• How do users move precisely 1 or 2 pixels?
– Add more resolution (mouse vernier)
– Use arrow keys for 1 pixel movements
6 November 2015
© Jeff Offutt, 2004-2014
36
Drag and Drop Summary
Users expect everything to be draggable
6 November 2015
© Jeff Offutt, 2004-2014
37
Summary Chapter 18
1.
2.
3.
4.
5.
6.
7.
8.
6-Nov-15
Primary and secondary windows
SDI is more usable than MDI
Design UIs with as few windows as you can
Menus teach beginners
Toolbars are for intermediate and expert users
Direct manipulation must give visual feedback
Mixing fine and gross motor skills is hard
Help experts keep their hands on the keyboard
© Jeff Offutt, 2004-2014
38