User Interface Software

1
User Interface Software

• The building blocks
• Preventing Errors

2
Agenda

• Applications to build applications
• Error Prevention
• Error types
• Slip types
• Error prevention guidelines
• Error recovery guidelines

3
Agenda

• Error types
• Slip types
• Error prevention guidelines
• Error recovery guidelines

4
User Interface Software

• What support is provided for building graphical
  user interfaces?
• Design tools
• UI toolkits
• GUI builder tools

5
Design Tools

• Prototyping or mock-up creators
• Example Apple Hypercard
• Allows control of simple card transitions
• More complex behaviors

on mouseUp play boing wait for 3 seconds
visual effect wipe left very fast to black
click at 150,100 type goodbye end mouseUp
6
Toolkits

• Library of software components and routines that
  programmer puts together
• X Windows X Toolkit Motif
• Macintosh Mac Toolbox, MacApp
• Windows Windows Developers Toolkit
• Java
• Abstract Windowing Toolkit (AWT)
• Swing

7
Widget

• Graphical user interface interactor object

8
Widget Hierarchy

• Widgets organized into inheritance hierarchy

Primitive
Button
Label
Scroll Bar
Text
Push Button
Toggle Button
Drawn Button
9
Widget

• Visual appearance
• Set of tailorable attributes
• Interactive behavior

PushButton Color BackGround int
MarginLeft int MarginRight int
BorderWidth Pixmap ArmPixmap Boolean
FillOnArm CallbackList ActivateCallback
10
Widget Use

• Set up widget attributes
• Create widget object (as child of parent widget)
• Define callback or event procedure for widget

11
Callback Routine

• Software procedure
• Invoked when particular action occurs to a
  widget, such as pressing a PushButton
• Procedure is invoked with event parameters

12
Example - X Motif
n 0 xmstr XmStringCreate("Color",XmSTRI
NG_DEFAULT_CHARSET) XtSetArg(argsn,
XmNlabelString, xmstr) n
XtSetArg(argsn, XmNbackground, red)
n colorbut XtCreateManagedWidget("colorbutton
", xmPushButtonWidgetClass,focusro
wcol, args, n) XtAddCallback(colorbut,
XmNactivateCallback,
colorChangeCB, id) void colorChangeCB(Widget
w, XtPointer userdata, XtPointer evtdata)
// Actions
13
Example - Java AWT
protected static void layoutPanel()
GridBagLayout gbl new GridBagLayout()
GridBagConstraints gbc new GridBagConstraints()
cpanel.setLayout(gbl)
gbc.fill GridBagConstraints.BOTH
gbc.weighty 1.0 gbc.weightx 0.1
gbc.insets new Insets(3, 3, 3, 3)
runbut new Button(" Run ")
runbut.addMouseListener(new RunButtonMouseListener
()) gbl.setConstraints(runbut, gbc)
cpanel.add(runbut)
14
Main Program Event Loop
voidCheckXEvents() XEvent xev while
(XtAppPending(_context))
XtAppNextEvent(_context, xev)
XtDispatchEvent(xev)
15
GUI Builder Tools

• Why build graphical (visual) interface with
  textual commands?
• Why not show what you want it to look like?
• Visual builder tools Visual Basic, Visual C,
  Borland Delphi, Symantec Cafe

16
Tool Methods

• Work area (interface being built)
• Drag and drop interactors/widgets onto work area
• Specify position, color, look, etc.
• Often provide Build/Test modes

17
Example dtbuilder (Motif)
18
Example Visual Basic

• GUI Builder with built-in access to other
  Microsoft products

19
Widgets in Toolbox
20
Starting VB

• Create Project
• New Project
• Standard exe
• Gives blank App w/ form

21
VB

• Useful elements
• Labels -- Properties
• Color
• Transparent/opaque
• Buttons -- Properties
• Caption (different from name)
• Set style to graphical to change color
• Image
• Picture properties allow selection of image file

22
VB - Programming

• Double-click item brings up code
• Several functions for form present
• Variable me refers to container (The form where
  the button/control resides)

23
Menus

• Menu Editor in pop-op
• Next button appends a line in which item can be
  added
• Indent button makes menu item into a sub-item

24
Errors

• Errors
• Avoiding and preventing
• Identifying and understanding
• Handling and recovering

25
User-Computer Dialog

• Three phases
• Read-scan phase -- Perceptual errors
• Think phase -- Cognitive errors
• Respond phase -- Motor errors

26
Perceptual Errors

• Result from insufficient or poor perceptual cues
• Display of objects that are visually similar
• Invisible or poorly expressed states
• Failure to capture users attention
• Lack of perceivable feedback

27
Cognitive Errors

• Caused by taxing the memory and problem solving
  capabilities
• Tax recall memory
• Lack of or poor mnemonic aids
• Inconsistency
• Lack of context or status info
• e.g., where came from in a menu
• Mental calculations and translations

28
Motor Errors

• Taxing the eye-hand coordination and motor skills
• Awkward motor movements
• Highly similar motor sequences
• e.g., double click, click
• Pressure for speed
• Require a high degree of hand-eye coordination
• Requiring special types of motor skills (type)

29
Example Study

• Examined experienced UNIX users over 20 months
• Individual commands had error rates of 3-50
• 12,117 error messages
• Most common 11 -gt 65
• 2517 repeated within 10 minutes
• Bad error recovery/help

30
Slips

• Automatic (subconscious) error that occurs
  without deliberation
• Examples?

31
Types of Slips

• 1. Capture error - Continue frequently done
  activity instead of intended one (similar starts)
• Type animation instead of animate
• Confirm deletion of file instead of cancel
• 2. Description error - Intended action has much
  in common with others possible (usually when
  distracted, close proximity)
• ctrl key caps lock key / Sun Mac

32
Types of Slips

• 3. Data driven error - Triggered by arrival of
  sensory info which intrudes into normal action
• Call to give someone a number, dial that number
  instead
• 4. Associative activation - Internal thoughts and
  associations trigger action
• Phone rings, yell come in

33
Types of Slips

• 5. Loss of activation - Forgetting goal in middle
  of sequence of actions
• Start going into room, then forget why youre
  going there
• 6. Mode errors - Do action in one mode thinking
  youre in another
• Delete file, but youre in wrong directory

34
Error Prevention Guidelines

• Eliminate modes or provide visible cues for modes
• Use good coding techniques (color, style)
• Maximize recognition, minimize recall
• Design non-similar motor sequences or commands
• Minimize need for typing

35
Error Prevention Guidelines

• Test and monitor for errors and engineer them out
• Allow reconsideration of action by user (e.g.,
  removing file from trash)

36
Error Recovery Guidelines

• Provide appropriate type of response
• Gag - Prevent user from continuing
• Erroneous login
• Warn - Warn user an unusual situation is
  occurring
• Bell or alert box
• Nothing - Just dont do anything (Careful, user
  must determine problem)
• Mac move file to bad place

37
Error Recovery Guidelines

• Responses (continued)
• Self-correct - Guess correct action do it
• Spell-check correction
• Dialog - System opens dialog with user
• Go into debugger on run-time crash
• Query - Ask user what shouldve been done, then
  allow error action as legal one
• Command language naming error

38
Error Recovery Guidelines

• Provide undo function
• Provide cancel function from operations in
  progress
• Require confirmation for drastic, destructive
  commands
• Provide reasonableness checks on input data
• Did you really mean to order 5000?

39
Error Recovery Guidelines

• Return cursor to error field, allow fix
• Provide some intelligence
• Guess what they wanted to do)
• Provide quick access to context-sensitive help