Gizmos: Canned Visual Design

1
Gizmos Canned Visual Design

• Cooper, About Face, Part IV
• Chapter 25 Imperative and Selection Gizmos
• Chapter 26 Entry and Display Gizmos
• Chapter 27 New Gizmos

2
Entry and Display Gizmos

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

3
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)
• Offer bounded gizmos for bounded input
• Show the range or allowed values and accept
  nothing else

?
Why not a slider here, too?
4
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 picklist, instead

5
Validation

• Valid for a value is defined in the program
  context
• Accepting bounded data into unbounded gizmos
  causes user dissatisfaction
• Show validated-entry gizmos with a different
  border

6
Edit entry processing

• Validated-entry gizmos 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.
• Hot validates during entry
• Cold 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

7
Consider ToolTips to communicate limits
Give a clue box
-20 to 20
Use a color different than a ToolTip?
8
Edit fields and output

• If you have data to output (and output, only), do
  NOT use a text edit box use a label
• If the user can change the output value, allow
  doing it in the same place use an editable text
  gizmo
• Allow input wherever you output (p. 177)
• 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 gizmo

ltselectgt
9
Rich text gizmos

• 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.

10
If you give me rich edit, give me rich space!
11
Display gizmos

• Display gizmos modify how the screen looks
• The adjectives of gizmo grammar
• For example, scrollbars, screen splitters,
  paginators, rulers, guidelines, grids,
  groupboxes, dips/bumps (separators), etc.

12
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
• Jump to beginning/end
• Set and return to bookmarks

13
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
14
New Gizmos

• Gizmos pack lots of complex user interaction
  behavior into a ready-to-use package
• Opportunities for rich direct manipulation,
  drag-and-drop behaviors, validated input, etc.
• Show dont tell use pictures, not words
• Huge list of ActiveX controls, Java Beans, etc.
  available
• Some of those in my default VisualBasic
  installation

• Document readers (Acrobat, HTML, RTF,
  multi-media, etc.)
• Browser
• Database query, forms, etc.
• Structure browsers

• Image browse/view
• Calendar
• Chart
• Speech
• Mail services
• Network access
• Complete applications as OLE objects

15
New Gizmos

• Examples from Cooper
• Sun gizmo to control shadow effects
• Space-able grid intervals
• Rubberweeks adapt to range of time scales
• Extraction gizmos extract form fields from free
  text entry

16
Visual gizmos
This no longer has a clickable map!