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 (abbreviated version)

Outline Windows on the Desktop Menus Pointing, Selection, and Direct Manipulation 15 February 2019 © Jeff Offutt

MDI vs. SDI Multiple Document Interface (MDI) One process runs multiple instances One program running, but two documents open 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 15 February 2019 © Jeff Offutt

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 15 February 2019 © Jeff Offutt

Outline Windows on the Desktop Menus Pointing, Selection, and Direct Manipulation 15 February 2019 © Jeff Offutt

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 15 February 2019 © Jeff Offutt

Ordering Menu Items Frequently used first (most common strategy) Chronological (time) Numeric Alphabetic “Important” items first (exit) 15 February 2019 © Jeff Offutt

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 15 February 2019 © Jeff Offutt

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 … 15 February 2019 © Jeff Offutt

Outline Windows on the Desktop Menus Pointing, Selection, and Direct Manipulation 15 February 2019 © Jeff Offutt

Object-verb vs. Verb-object Carr, “Programmers at Work”, pg 220 Originated at Xerox Parc : All commands should act on data that is already selected Think of this as “object-oriented” UI design Verb-object : Choose copy, system asks you what to copy User is in a reactive mode Object-verb : Choose the file, then copy User is in control Just like spoken grammar, do we say drink beer? beer drink? V-O is natural for command languages O-V is better for GUIs 15-Feb-19 © Jeff Offutt

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 15 February 2019 © Jeff Offutt

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 15 February 2019 © Jeff Offutt

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 … 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 in 1982 Remember that drag-and-drop mixes fine and gross motor skills 15 February 2019 © Jeff Offutt

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 15 February 2019 © Jeff Offutt