About Face 2.0

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

• 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

Then
2
Windows History

• Xerox Alto (mid-1970s) from Xerox Palo Alto
  Research Center (PARC)
• Explore the potential of computers as desktop
  office systems
• Graphical user interface with what you see is
  what you get (WYSIWYG) and desktop metaphor
• Mouse, rectangular window, scrollbar,
  push-button, desktop metaphor, object-oriented
  programming, drop-down menus, Ethernet, laser
  printing
• Alto and its successor, the Star, were expensive,
  complex, slow, and commercial failures
• Microsoft object-oriented presentation and
  communication model in Multiplan (early version
  of Excel) and others
• Apple
• Lisa as a duplicate of Alto/Star accessible,
  exciting, too expensive, frustratingly slow
• Macintosh significant success
• Design, aesthetics, user-friendliness, etc.

3
PARCs Principles in Alto and Star

• Visual metaphors to aid user understanding of the
  system
• But recall that metaphors are limiting, too
• Avoiding modes
• More accurately, make modes clear, easy to
  change, and aligned with user mental model
• Overlapping windows
• Many human data artifacts are rectangular book
  pages, photographs, diagrams, etc.
• The metaphor of pages on a desk is limiting
• Too many pages, not enough space
• Pages get lost ? Microsoft task bar

4
Tiled Windows and Full-Screen Applications

• Tiling divides up the screen in a uniform,
  rectilinear tessellation
• Try right-clicking the Windows task bar
• It is easier to navigate between tiled
  windowseverything is visible
• But there is a great waste of screen real estate,
  the windows are too small, and moving one sends
  you back to the overlapped window idiom
• Full-screen, sovereign applications
• The task bar eases navigation between tasks and
  seeing what windows (applications) are running
• Consider the virtual desktop where the visible
  element is a window into a much larger desktop or
  is one of multiple virtual desktops
• Consider the multi-monitor computers
• Be willing to question the assumption of
  overlapping windows, without modes, informed by a
  global metaphor

5

• MS Word Window ?Arrange All tiles windows
  horizontally
• Notice how little of the display is content, and
  how much is window dressing (toolbars, frames,
  etc.)
• How to tile only the ones I need?

6

• PowerPoint tiles the windows with less overhead
• Marginally usable (mini-windows!)
• I often tile two windows to move slides between
  presentations
• Maximizing one separates them all

7
Multipaned Applications

• Multipaned applications combine the benefits of
  tiled windows with a sovereign, full-screen
  application
• Independent views (panes) that share a single
  window
• Adjacent panes separated by fixed or movable
  dividers or splitters
• Related information can be visible, reducing
  excise of navigation and window manipulation
• Examples Microsoft Outlook, Rational Rose,
  Framed web pages
• Especially useful for applications that provide
  navigation and/or building blocks in one pane and
  viewing or construction of data in adjacent panes
• Stacked panes or tabs are another form of
  multi-paned applications

8
PowerPoint is Multipaned
9
Rational RoseA Multipaned Software Design
Application
10
MS Excel with Panes and Tabs
Panes separated by splitters
Tabs
11
Choosing Your Windows

• Carefully choose what windows to use and
  understand why we make our choices
• Main windows and subordinate windows
• Imagine each window as a separate room in a house
• House main window
• Room document window, dialog box, etc.
• Dont add rooms (windows) to a house unless they
  have a special purpose that should not be served
  by existing rooms (windows)
• Purpose goal directed, but not necessarily for a
  specific task or function

12
A Dialog Box is Another Room

• A dialog box is another room have a good reason
  to go there
• It is poor design to have to interact with a
  dialog box to effect a change in a main window
  document
• For example, changing the the color of this text
• (see next slide)
• Putting the function in a separate dialog
  separates the function from the main flow towards
  a goal, instead of an integrated interaction with
  the data it manipulates
• Build functions into the window where they are
  used
• One of the most frequently violated design tips
• It is too easy for the programmer to think of and
  build one dialog box per function, and too hard
  to put controls on the document interface or to
  provide direct manipulation

AXIOM
DESIGN TIP
13
(No Transcript)
14
Necessary Rooms

• It is appropriate to provide a special place
  (dialog or window) to perform a function that is
  outside the normal sequence of events
• For example, purging a database
• Goal-directed analysis guides the separation of
  necessary rooms
• For example, in a drawing program, drawing tools
  are intimately connected to the drawing canvas,
  but clip art import functions can be separate, as
  can be functions to save and email the drawing

15
Windows Pollution

• The result of a window for every function is
  windows pollution
• Examples
• AOL
• Navigator email (a window to choose a mailbox, a
  window to sort mail in a mailbox, and a window to
  read a message)
• Most applications built in a Visual programming
  environment (it is too easy to create forms and
  dialogs)

16
Window States

• Top-level window
• Maximized zoomed to cover the entire screen
  (except for the task bar)
• Minimized iconized on the task bar or desktop
• Pluralized custom-sized (restored)
• Sovereign default maximized
• Transient default pluralized

The only two states a designer really needs to
consider
17
Why Minimize?

• Minimize to switch from one application to
  another
• Task bar is a better idiom, but not all operating
  systems have one and it costs screen real estate
• Note the number of steps and the amount of mouse
  motion to minimize one, maximize another,
  repeatedly
• ALT-TAB is much better than minimize/maximize,
  but obscure, not visual (now better than before),
  known only to power user, not consistent with
  Windows idiom (select on release of shifting key)
• Allows programs to remain in the state the user
  left them (maximized or pluralized)
• To find that hidden dialog
• To find the items on the desktop (there are other
  options to this)
• To walk through state of the programs on shutdown

18
Why Pluralize?

• Layout of multiple programs used in coordination
  by user
• Cascade, tile, etc.
• But how can I select which to tile and which to
  minimize?
• Program-to-program drag-and-drop
• Difficult with two sovereign applications,
  because they need screen real estate
• Useful for dragging between transient and
  sovereign
• For example, from clip art library to a drawing
• In Windows, drag an item to a minimized task bar
  application, which then opens that application
  window

19
Multiple-Document Interface (MDI)

• Artifact of single thread of control, single
  active window, resource-poor computers
• Multiple documents in one application
• Minimizing, maximizing and pluralizing within a
  master application window
• ALT-TAB or task bar for MDI?
• Perhaps having each document as a separate window
  is more appropriate
• Single-Document Interface (SDI) is preferred?
• MDI is appropriate in a sovereign application on
  the condition that
• There is only one type of document
• Minimize/pluralize functions are suppressed in
  favor of choosing fully maximized documents from
  the Window menu or from a set of tabs

20
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
21
Controls

• Concentrations of interface design and modules of
  code
• Good
• Shorten program development time
• Offer familiar affordances to users
• Not-so-good
• Discourage looking for better techniques
• Using controls does not automatically make
  interfaces good

22
Controls

• Directly manipulable, self-contained, visual
  screen idioms that allow communication between
  users and software
• Also called widgets, gadgets, gizmos, etc.
• A primary building block of GUIs
• Included in the parts bin with windows, menus,
  and dialog boxes
• A multitude of control-laden dialog boxes doth
  not a good user interface make
• It is too easy to build dialog boxes with
  controls
• It is too hard to build alternatives
• But the programmer may have to work hard so the
  multitude of users dont have to

AXIOM
23
Categories of Gizmos

• Imperative
• Initiate a function
• Selection
• Select some option or data
• Entry
• Enter some data
• Display
• Direct visual manipulation
• Controls that combine one or more of these flavors

24
Imperative Controls

• Issue a command (verb the action)
• Imperative Immediate action
• Menu items are also imperative
• Pushbutton is the quintessential imperative
  idiom
• Previously identified by rectangular shape and 3D
  shading affordances
• Now, can be mapped to arbitrary shapes (e.g.,
  HTML link hotspots behind an image) and are 3D
  only when pointed to
• Need pliant response visual feedback of the
  button being pushed (and, possibly, latching in
  pushed-in state)
• Evolved from a text-labeled rectangle on a dialog
  box to an icon-emblazoned square on a toolbar
• Butcon half button, half icon
• Difficult to find a meaningful icon for a verb
  look at some
• Use ToolTips to help explain the meaning

25
What are the actions?
26
Selection Controls

• Select one or more items from a group of valid
  choices
• No associated action
• Checkbox
• Select the item implied by the associated text
• The text is the operational element, not the
  visual checkbox
• Keep the checkbox square-shaped (a standard)
• Consider a latching butcon as a visual checkbox
  (vs. a textual checkbox)
• More conservative of space
• Beware of labels on state-changing (flip-flop)
  buttons
• Is the label the current state, or the command to
  change to that state?
• Instead of On/Off use Turn On/Turn Off

Checkboxes
Latching butcon checkboxes
27
Radio Buttons

• Radio buttons are mutually exclusive
• Only one can be selected
• (can only listen to one radio station at a time)
• Exactly one? Can none be selected?
• Groups of two or more
• Programmer must enforce mutual exclusion rules
• Select the item implied by the associated text
• The text is the operational element, not the
  visual checkbox
• OK to waste space if showing all available
  options or need visualization of mutual exclusion
• Keep the buttons round-shaped (except on X/Motif)
• Consider radio butcons
• Consider combutcons (drop-down list box)

28
List Controls

• Select one or more items (command, object,
  attribute) from a list
• Scrollable picklist, list box, list view
• Text items, graphic items, and combinations
• Multi-line text items to avoid horizontal
  scrolling?
• Never scroll text horizontally
• Text with identifying graphic associated with it
• Distinguish important text items in lists with
  graphic icons
• Text with selection checkboxes to earmark
  selected items
• Scrollbar
• Single or multiple selection (Shift/Ctrl-click)
• User add, delete list items In-place editing of
  list items

AXIOM
DESIGN TIP
29
Draggable List Controls

• Draggable List Controls (such as DragListBox)
  allows user to drag items
• To reorder them in the list
• Also provide automatic sort features
• To drag them to other panes or applications
• Drag and drop items between list boxes
• Items in the list as drop targets?

30
Draggable List Controls

• Draggable list boxes in Rational Rose
• Can drag tools between containers
• Can drag tools to reorder within a container
• Notice the graphics to complement the text
• Notice the horizontal scrolling
• And the dialog is not resizable to eliminate that

31
ComboBox

• Combination edit field (at top) with drop-down
  list box
• Unambiguous method of data entry in a list box
• Edit box shows current selection
• No multiple selection
• Conserves screen real estate
• One-click access to large amounts of information

32
Tree Controls
Remember most users dont understand hierarchies
33
Entry and Display Controls

• Entry controls enter new information (rather
  than selecting existing information)
• Text-edit field
• The entry part of a combobox
• Numeric entry controls
• Spinners, gauges, sliders, knobs, etc.
• Present nouns to the program

34
Bounded Entry

• Bounded entry restricts the range of values the
  user can enter
• Impossible to enter an invalid value
• Unbounded (e.g., edit) accept any user value
• Slider user drags pointer to select a defined,
  discrete input value
• Available settings immediately available (a
  combobox hides optional settings)
• Spinner Small edit field with two half-height
  buttons
• Use bounded controls for bounded input
• Show the range or allowed values and accept
  nothing else

?
AXIOM
Why not a slider here, too?
35
Unbounded-Entry Fields

• Text edit box
• Accepts keyboard entry
• Normal methods of concrete selection
• If the acceptable values are numeric, then
  consider a slider or knob, instead
• If the acceptable values are text strings, then
  consider a list control, instead

36
Validation

• Valid for a value is defined in the program
  context
• Accepting bounded data into unbounded controls
  causes user dissatisfaction
• Use a validation control
• For example, will only accept validly formatted
  dates, phone numbers, etc.
• Provide hints and guidance for what input is
  valid
• For example, put YYYY-MM-DD beside a date entry
  control
• Show validated-entry controls with a different
  border, different type face, different field
  background color, etc.
• (Recall Visually distinguish elements that
  behave differently)

37
Active/Passive Validation Edit Entry Processing

• Validated-entry controls attach functions to the
  edit to interpret and guide valid input and
  reject invalid input
• For example, reject certain characters, stop
  after maximum length, force certain date/time
  format, etc.
• Active validates during entry
• Passive validates after entry is complete
• Sense user pause and validate before complete
• Make clear to user the input was rejected and why
• Silently substitute the limit and move on?
• Garbage in, no output?
• Audible feedback?
• Soft, pleasant sounds for positive feedback,
  silence for negative feedback?
• Consider active input guidance toward valid
  values provide MM-DD-YYYY as default for date
  entry sense the format and auto-complete sense
  the text and auto-pick, etc.
• Accept values such as default or best fit

ToolTip for guidance
38
Consider Clue Boxes to Communicate Limits
Give a clue box
-20 to 20
Use a color different than a ToolTip?
39
Edit Fields and Output

• If you have data to output (and output, only), do
  NOT use a text edit box use a label
• Use non-editable (display) controls for
  output-only text
• If the user can change the output value, allow
  doing it in the same place use an editable text
  control
• Recall Allow input wherever you output
• For things that can be changed, but you want to
  discourage it or it is low frequency so you do
  not want the visual distraction, have select
  bring up an edit control

DESIGN TIP
ltselectgt
40
Rich Text Controls

• From Microsoft Foundation Classes A 'rich edit
  control' is a window in which the user can enter
  and edit text. The text can be assigned character
  and paragraph formatting, and can include
  embedded OLE objects.
• Does this deliver unnecessary excise?
• Will your program also implement the peer
  classes?
• Within the context of MFC's document view
  architecture, CRichEditView maintains the text
  and formatting characteristic of text.
  CRichEditDoc maintains the list of OLE client
  items which are in the view. CRichEditCntrItem
  provides container-side access to the OLE client
  item.

41
If you give me rich edit, give me rich space!
42
Display Controls

• Display controls modify how the screen looks
• Display and manage the visual presentation of
  information
• For example, scrollbars, screen splitters,
  paginators, rulers, guidelines, grids,
  groupboxes, dips/bumps (separators), etc.

43
Text Controls

• Text controls display a written message at some
  location on the screen
• Used to label other controls
• Used to output data that cannot or should not be
  changed by the user
• Assure that it really cannot be changeif it can,
  use an edit control

44
Scrollbars

• Use of a scrollbar to scroll window content is
  certainly appropriate
• Some good visual feedback is available
• Thumb as an affordance
• Position of thumb in scrollbar indicates location
  in document
• Size of thumb in proportion to scrollbar
  indicates relative size of the document
• Some other visual feedback is useful
• Specific page or item
• Total number of pages or items
• Title or description of page or item
• Some other useful functions
• Skip ahead by page, chapter, section, keyword
• Jump to beginning/end
• Set and return to bookmarks

45
Scrolling in Microsoft Word 2000
Scroll right
Splitter
Scroll up one line
Scroll up one screen (click above thumb)
Scroll up one object
Select browse object
Document location
46
Other Controls to Consider (or Not)

• Sliders
• Scrollbars are usually better at moving data in a
  display
• Dials
• Extremely difficult to manipulate with a mouse
• Thumbwheels
• Look and behave like the scroll wheel on a mouse
• Useful for panning and zooming
• Splitters
• Be careful with movable splitters
• Drawers and levers
• Panes that can be opened/closed in a single
  action
• Examples Internet Explorers History and Search
  panes, Help and New Document panes in MS Office