About Face 2.0

1
About Face 2.0
Section Three Interaction Details Part VI
Controls and Their Behaviors

• Chapter 25 Window Behaviors
• Chapter 26 Using Controls
• Chapter 27 Menus The Pedagogic Vector
• Chapter 28 Using Menus
• Chapter 29 Using Toolbars and ToolTips
• Chapter 30 Using Dialogs
• Chapter 31 Dialog Etiquette
• Chapter 32 Creating Better Controls

Next
Then
And
2
History of Commanding Computers

• Toggle machine code instructions into the
  computer
• Job control language and card decks
• Command line interfaces
• Had to remember the commands
• Sequential hierarchical menus
• Sequence of screens unfold a hierarchical command
  structure
• Visible hierarchical menus accessed by cursor
  motion or backslash command mnemonics
• GUI-based drop-down and pop-up menus

3
Menu Concepts, Background

• Command-line interfaces require the user to
  remember all commands
• Make commands visible/accessible in the display
• Allow command short-cuts for power user to
  remember often-used commands
• Hierarchies (multi-level nests) are hard for most
  people to understand
• Single level of nesting, maybe (monocline
  grouping)
• Pop-up menus and dialogs can flatten nested
  command choices
• If a menu needs to go deeper, pop up a dialog
  instead
• A cascading menu is a hierarchical menu Ugh!
• Toolbars and direct manipulation offer alternate
  command vectors

4
Menus are the Pedagogic Vector

• Offer multiple, parallel command vectors
• Learners and infrequent users use menus and
  dialog boxes
• Experienced users us toolbars, keyboard
  shortcuts, and direct manipulation
• Put frequent commands on toolbars
• Provide a pedagogic vector with menus and dialogs
• Good English descriptions
• Function and object
• No jargon
• Augment with description in status bar (often
  missed)
• Corresponding short-cut to move them to
  intermediate
• Safe to use and experiment CANCEL
• Complete access ALL application functions
• Organized present scope of capabilities and ease
  finding that occasionally used or obscure feature

AXIOM
5
Standard Menus May Not Be Correct

• The organization and naming of functions in most
  application menus is poor
• For example, they are function-oriented, not
  organized around goals and tasks
• Standards that encourage poor performance
• File
• Name exposes implementation model
• Edit
• Exposes the clipboard, a weak metaphor for
  manipulating information
• Help
• Is there useful help there?
• View, Insert, Format, Tools, Options, Window
• If these menu items fit, use them, but dont
  assume they fit

6
Butcon Image
Keyboard Shortcuts (Ctrl Accelerator)
Launches Dialog
ALT Mnemonic
Opens Cascade
Separator Groups Items
Most Recently Used List
7
Using the Standard Menu Items

• File menu
• Chapter 13 (Rethinking Files and Save) encourages
  hiding the save concept
• Automatically save work in progress
• Need not replace original copy on disk
• Reposition from File-centric to Document-centric
• Most recently used list is good shortcut
• Edit menu
• Cut, copy, paste, import, export
• Not a catch-all put other stuff in Options or
  Preferences dialog accessible from Tools menu
• Windows menu
• Switch between multiple open documents
• Arrange multiple documents on the screen
• Help menu
• Offer shortcuts from the Help menu

DESIGN TIP
8
Optional Standard Menu Items

• View menu
• Options that influence the way the user looks at
  the programs data
• Optional visual items such as rulers, templates,
  optional toolbars, or palettes
• Insert menu
• An extension of the edit menu
• If there are only a few items, consider putting
  them on edit menu
• Insert standard items (date, page number, etc.)
• Insert object from other applications or from
  file
• Settings menu
• Offer all settings here, including printer
  settings
• Or dont offer a settings menu

9
Optional Standard Menu Items

• Format menu
• Change properties of visual objects
• Probably better served by direct manipulation,
  but also put in this menu for pedagogy
• Include page setup here, not on File menu
• Tools menu
• Big, powerful transformers spell-checkers,
  goal-finders, etc.
• Power-user (hard-hat) items advanced settings,
  SQL editors, macros, template builder, ejector
  seat levers, etc.

10
Menu Item Variants
Latching Buttcon Image

• Disable (gray out and remove action for) menu
  items when they are not relevant to the selected
  data item
• Disable menu items when they are inapplicable
• Graphics on menus
• Use parallel visual symbols on parallel command
  vectors
• Hint at dialogs and cascades

DESIGN TIP
Cascade
Checkmark items
DESIGN TIP
Dialog
11
Menu Item Variants
Mnemonics (ALT)

• Accelerators
• Keyboard shortcuts using meta-keys
• and function keys (F1 F12)
• Use standard accelerators
• CtrlC for copy
• CtrlV for paste
• CtrlP for print
• CtrlS for save
• etc.
• Provide for daily use by a range of users
• Most-used get function keys and easy to remember
  meta-keystrokes
• Put them on the menus so the user can learn them
• Consider user-configurable accelerators
• Mnemonics
• Menu items underline key letters to use in ALT
  sequence
• Provide mnemonics for all menu items

Accelerator (Ctrl )
12
Cascade Menus

• A secondary menu pops up beside the top-level
  menu
• Allow lots of functions to be presented on a menu
  that would otherwise be too long
• Put only the obscure items on the secondary menu
• Hard to navigate
• Hard to remember where an item is
• Hard to mechanically navigate with the mouse
• Move off the menu line item and start over again
• A form of hierarchical menus
• Most users do not understand nesting
• One level, OK two as a last resort
• Different people organize things in different ways

13
Coupled with expanding menus, this becomes
intolerable!
New user? Start Here!
14
Expanding Menus

• Intention
• Dont overwhelm the user with too many choices
• Quicker to find frequent choices
• Try to anticipate and display only the most
  frequently-used menu items
• Display the rest after hovering a while or
  clicking the expansion icon at the bottom
• When displayed, visually distinguish
  normally-hidden from normally-shown by using
  indent
• Re-order menu items to show most frequently used
  on initial menu (frequent changes!)

15
Expanding Menus

• Problems with Expanding Menus
• It hides functions (destroys pedagogic vector and
  violates visibility principle)
• Yet another form of hierarchy
• It re-arranges choices (destroys consistency)
• Indenting destroys the button idiom
• Indenting adds visual noise
• It is hard to find how to disable them

16
Other Menu Item Variants

• Flip-Flop menu items
• Single menu item that alternates between two
  values/states (e.g., Hide/Unhide columns)
• Name it as a command, not a state (e.g., Hide
  columns now)
• Use checkbox menu items
• Bang menu items
• Do not put immediate commands on top-level menu
  items
• Compile!
• (pronounce ! as bang)
• Design tip Dont use bang menu items
• Use butcons on toolbars, instead

17
System Menu
System menu butcon

• Menu of functions to size, move, and close window
• Is it necessary, given the window caption bar
  butcons and the corner resizer and frame?

18
Correct Menus

• Organize facilities by goals and tasks, not
  functions
• Organization options
• Help to the far right used less and less as user
  gets proficient, but always there
• Broad scope to left, narrow scope to right
• An approach for document-centric applications

Program
Document
Pieces
Help
Properties Views Functions Access
Properties Views Functions Access
Properties Views Functions Access
19
Correct Menu Items

• Program menu
• Properties default settings, templates, current
  mode of operation
• Functions configuration of settings, toolbars,
  personalization items, etc
• Views and Access could be deleted
• Document menu (may be split into two)
• Properties of document under construction size,
  type, template, margin setup, page setup
• Views draft, presentation, resolution, etc.
• Also, list of multiple open documents
• Functions applying to whole document calculate
  spreadsheet, format text, etc.
• Access open, close, print, fax, email, most
  recently used documents

20
Correct Menu Items (continued)

• Pieces of the document
• Relate to a selected object text, table, image,
  etc.
• Properties of the selected object size,
  orientation,
• Views presentation style/format and functions to
  change them
• Functions formatting, rotation, etc.
• Access store and insert to and from other
  documents or files

21
About Face 2.0
Section Three Interaction Details Part VI
Controls and Their Behaviors

• Chapter 25 Window Behaviors
• Chapter 26 Using Controls
• Chapter 27 Menus The Pedagogic Vector
• Chapter 28 Using Menus
• Chapter 29 Using Toolbars and ToolTips
• Chapter 30 Using Dialogs
• Chapter 31 Dialog Etiquette
• Chapter 32 Creating Better Controls

Next
22
Toolbar

• Collection of butcons
• Button images instead of text
• Positioned around edges of workspace
• In a horizontal bar
• Adjacent to and just below the menu bar
• Adjacent to and just above status bar
• In a vertical bar along side of workspace
• May be floatable and torn off (undocked) to
  make floating
• Immediate, always visible commands (menu items)
• Solved problems with pulldown menus
• Always visible, single-click trigger
• Toolbars and menus are complementary idioms

23
Floating Toolbars
Note sometimes an icon is hard to find, so a
word works better for a butcon
24
Word 2000 Toolbars
25
Some Toolbars in Rational Rose(UML-based
software design tool)
26
\
27
Toolbars Are Not Menus

• Dont confuse a toolbar as a speedy version of a
  menu
• A parallel command vector, but not identical
• Toolbars provide experienced users fast access to
  frequently used functions
• Toolbars freed menus to teach

DESIGN TIP
Toolbars
Menus
One step away (at least)
Fast
For beginner to use and learn
For experienced user
Words can be precise, but must be read
Icons can be unclear, but are easy to recognize
Complete set of functions
Most frequent functions
Conserve space by using icons and limiting to
most frequently used
Folded to conserve space
28
Text vs. Icon Symbols

• Text is (should be) clear and precise
• It offers the information beginners need
• But it must be read
• Symbols are easy to recognize
• But they may be ambiguous
• Their meaning is learned outside the symbol
  recognition
• Must learn that means stop, but STOP
  stands alone
• Must be advance agreement on the meaning
• Using metaphor to allow a symbol to stand alone
• Use it if it works, but it usually does not
• Metaphors for nouns, perhaps, but for verbs?
• Using text AND symbols
• Expensive in screen real estate and visual
  clutter
• Consider ToolTips
• Disable butcons that dont apply to current
  selection
• Gray out, no pliant response

29
ToolTips

• As the mouse pointer passes over a toolbar icon,
  text pops up explaining the purpose/function of
  the button
• Serve as a memory jog, not a teacher
• Small, easy to see and easy to ignore
• Short delay avoids distractions
• Use ToolTips with all toolbar and iconic controls
• Also use ToolTips on other graphical idioms, such
  as butcons on dialog boxes, status bar items,
  etc.
• Does the Print ToolTip of Word go to far?
• Indicates current printer (exposes options)
• Indicates keyboard shortcut (teaching)

AXIOM
30
Other Controls on the Toolbar
Latching Butcon (also indicates state of
selection)
Momentary (imperative) butcon
Disabled
Drag control
Note items dont show pliancy as buttons until
the mouse points at them. Is this good?
Combobox
Listbox
Note pop-up menus on the toolbar?!
31
Toolbar Morphing

• May be hidden or made visible
• May be placed elsewhere
• For example, Powerpoints Drawing toolbar is
  across bottom, by default
• Floating, dockable toolbars
• Pop-up toolbars offer services for a given
  context
• Such as clipboard toolbar or picture edit toolbar
• Customizable
• Add and remove buttcons for menu commands
• Move buttcons and organize in groups (with
  separators)
• Edit or replace the icon for a button
• Define a hyperlink for a button
• Can also define new toolbars and customize menus
• Note default (as-shipped) toolbar is more
  marketing than frequently used items
• Appropriate for the beginner who doesnt know
  about toolbar customization?
• How does one share their customizations with
  others?

32
Windows Taskbar Special Purpose Toolbars

• Initially provided a way to manage running
  applications and display system status
• Start menu
• Entry point into a cascading menu of available
  programs, settings, and documents
• Quick Start toolbar
• Customizable area for dragging icons from the
  desktop
• Resulting butcon is a quick launch for the
  application or document

Start menu
Quick Start
Window Buttons
Status area (system tray)
33
Windows Taskbar Special Purpose Toolbars

• Window buttons
• Open/close tool for every running window on the
  desktop
• Application icon, document title, application
  name
• With ToolTip to help for long names
• Windows XP crowds multiple documents into one
  application icon Confusing!
• Status area (system tray)
• Hardware and background process status
• Left-click for configuration right-click for
  pop-up menu
• Clock (and date in a ToolTip)
• Optional toolbars for desktop items, web
  launcher, etc.

34
Homework

• Read About Face 2.0
• Chapter 29 Toolbars and ToolTips
• Chapter 30 Using Dialogs
• Chapter 31 Dialog Etiquette
• Chapter 32 Creating Better Controls