1. Cooper Part III Interaction Details Designing for the Desktop
Jeff Offutt
SWE 632
User Interface Design and Development
Cooper Ed4, Ch 18
(abbreviated version)

2. Outline Windows on the Desktop Menus
Pointing, Selection, and Direct Manipulation
21 September 2018
© Jeff Offutt

3. MDI vs. SDI Multiple Document Interface (MDI)
One process 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
21 September 2018
© Jeff Offutt

4. Windows Are Rooms A dialog box is another room;
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
21 September 2018
© Jeff Offutt

5. Outline Windows on the Desktop Menus
Pointing, Selection, and Direct Manipulation
21 September 2018
© Jeff Offutt

6. Menus are Effective When
Users have little or no training
Users are beginners
Users are not familiar with terminology
Users need help making decisions
Use menus to teach beginners
A screen that only lists functions helps beginners, but slows down intermediate and advanced users
Creates a wall between users and functionality
21 September 2018
© Jeff Offutt

7. Ordering Menu Items Frequently used first (most common strategy)
Chronological (time)
Numeric
Alphabetic
“Important” items first (exit)
21 September 2018
© Jeff Offutt

8. 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
21 September 2018
© Jeff Offutt

9. 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 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 …
21 September 2018
© Jeff Offutt

10. Outline Windows on the Desktop Menus
Pointing, Selection, and Direct Manipulation
21 September 2018
© Jeff Offutt

11. Selection GUI operations have two parts:
Operation (verb)
Operands (objects)
Command Languages (CLs) often use natural speaking style : verb-object
GUIs should usually let the user select an object, then apply an operation : object-verb
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.”
I call this “a menu system with a mouse.”
21 September 2018
© Jeff Offutt

12. Support both mouse and keyboard use for navigation and selection tasks
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
Good!
Stupid
Better
Support both mouse and keyboard use for navigation and selection tasks
21 September 2018
© Jeff Offutt

13. 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
21 September 2018
© Jeff Offutt

14. Drag and Drop
Drag-and-drop is one of the most powerful direct manipulation idioms
The Web has decreased its use
Drag-and-drop is rare on the web
JavaScript allows it …
From the book : “Microsoft … pioneered some novel uses … movable toolbars and dockable palettes”
These were in the Xerox Star in 1982
Remember that drag-and-drop mixes fine and gross motor skills
21 September 2018
© Jeff Offutt

15. Summary Chapter 18 Primary and secondary windows
SDI is more usable than MDI
Design UIs with as few windows as you can
Menus teach beginners
Mixing fine and gross motor skills is hard
Help experts keep their hands on the keyboard
21 September 2018
© Jeff Offutt