Interaction Models II

Marti Hearst (UCB SIMS)SIMS 213, UI Design &

DevelopmentMarch 11, 1999

Today

Review concepts from last time For more information, see Olsen 98, Developing User

Interfaces

Go through examples with tcl/TK Discuss other interaction models

Event-based Interactions Direct Manipulation/GUI

– the user is in control, instead of the computer

– more complex set of interactions than with command line interfaces»the user can do any of a number of

different things nextclose windowbring window

into focus

open folder

adjust scroll bar

change size

Windowing Systems are … Software libraries to create GUIS consisting of

windows, and implement the interactive elements of those windows

Software to create a program that allows the user to control the size and placement of these windows– called the Window Manager– in Unix which WM used is flexible

» there are many window managers for X» Linux allows toggle between two different WMs

– in most commercial systems there is only one choice

» MS conflates OS with WS

Widgets

A widget is a window in a graphical user interface – that has a particular appearance and

behavior– this appearance and behavior is

standardized over time»buttons, menus, scrollbars, text windows»canvas: more free form -- supports

creation of new widgets and more flexible actions like drawing and animation

Root Windows In most systems the root window

encompasses the entire display– when you right-click on the desktop

background, you bring up a menu corresponding to the root window

It is also convenient to refer to the top-most window of an application as the root window– e.g., the main window of an editor, of

powerpoint, as opposed to menu buttons on these applications

Window System Support for Widgets

Window system software provides the following functionality:– A set of resources associated with

each widget class»color, label, language,

– Routines to create and destroy instances of the widget

– Facility to support callbacks to run when events occur to an instance of the widget

Role of Window ManagerWindow manager deals with the “outer frame” of the windowe.g,. title bar, close window widget, icon bar, etc.

Application deals with the widgets inside the outer frame.The boundary differs in different systems.

Contrast Exceed application with NT application both under NT WM(same title bar and close widget, different status bar and scrollbar)

Callbacks Callbacks are nice from the

programmer’s viewpoint– only have to specify what to do if the event

occurs on the widget– don’t have to say when and where– use an object-oriented model

Examples:– callback for button

» start running the search, answer yes or no

– callback for menu» run the function associated with the menu item, e.g.,

open new file, run slide show

How the Window System Dispatches the Events

Windowing system is generating events

Object model wants method (callback) invocation

Event handler converts events directed to a window into method invocations

Application

Event Dispatching

Event Handler

WIDGET OBJECTS

button callback(invoked if mouse enter,

mouse press,mouse release on button)

window resize(invoked if mouse enter,

mouse press, mouse drag onresize widget )

scrollbar callback(invoked if mouse enter,

mouse press,mouse drag on scrollbar)

WindowSystemEventQueue

e

e0e1e2e3e4...eN

Running GUI Applications over the Network

X lets you run a GUI application on one machine and interact with it on another– you can’t do this in MS products

» I can’t run excel on my home machine and see and interact with it on my work machine

» I can do this sort of thing with X

Server MachineX displays the bits here

Client Machineeditor running here

Network

User can interact with the GUI here, even though it is running elsewhere

Examples using Tcl/TK

Code is written in the tcl scripting language There are classes of widgets

– button, listbox, checkbox, menu, etc Each widget takes attribute/value pairs

– text, label, color, command, borderwidth, etc Each widget has a name

– nesting is indicated with “.”– must start with a top-level window– the defaut root is called “.”

Frames are used to group widgets together

Create, display, and destroy a window containing a label

frame .flabel .f.l -text “this is a label” -border 4pack .fpack .f.ldestroy .f

The pack command tells the window manager where to place the various subwindows (widgets)

Create a row of buttons, each with a different kind of border relief

% frame .f -borderwidth 10% pack .f% foreach style {raised sunken flat ridge groove} { label .f.$style -text $style -relief $style -bd 4 pack .f.$style -side left -padx 4 }

This time we tell the pack command to pack the buttons to the lefthand side, one after the other, and to put 4 units of padding

around each one, in the horizontal (x) direction

Create a top-level window, make some frames, insert a label and an

entry form

% global result ; global rtext% set f [toplevel .prompt -bd 10]% label $f.msg -text “Please enter a name”% entry $f.entry -textvariable rtext% set b [frame $f.buttons -bd 10]% pack $f.msg $f.entry $f.buttons -side top -fill x

Add two buttons and do the layout(the commands attribute is the callback function)

% button $b.ok -text OK -command \ {set result 1} -underline 0% button $b.cancel -text Cancel -command \ {set result 0} -underline 0% pack $b.ok $b.cancel -side left

Place the mouse focus in the entry label. Force the user to attend to

the dialog box before doing anything else

% focus $f.entry% grab $f% tkwait variable result% grab release $f

Tell the system to print the name if the user enters one and presses Ok.

Otherwise don’t print anything.

% if {$result != 0} {puts $rtext

}

Add Keyboard Shortcuts...% pack $b.ok $b.cancel -side left

% bind .prompt <Control-o> "focus $b.ok ; break"% bind .prompt <Control-a> "focus $b.cancel ; break"% bind .prompt <Return> "set result 1"% bind .prompt <Control-c> "set result 0"

% focus $f.entry...

Using the Canvas% frame .c ; set c .c; pack .c% $c create oval 10 10 80 80 -fill red -width 4% $c create oval 170 10 250 40 -fill black -stipple gray25% $c create arc 30 30 100 100 -start 45 -extent 90 \ -style pieslice -fill green -outline black

Question

What is the relation to web browser interactions? – hyperlinks– forms– javascript pop-ups

Five Primary Interaction Styles

(Shneiderman 98) Direct manipulation Menu selection Form fillin Command language Natural language

– These are all in response to the baseline of command languages

– All types not appropriate for all tasks– Often useful to blend interactions styles in

one UI

Direct Manipulation

Advantagesvisually presents

task conceptslearnabilityretentionerror avoidanceencourages

explorationhigh subjective

satisfaction

Disadvantagescan be difficult to

program (especially error handling)

requires higher end equipment

non-sighted users

Visual representation of objects and tasks that can be manipulated in arbitrary orders by users

Menu Selection

Advantagesreduces learning

timereduces keystrokesstructures decision

makingeasy to support

error handling

Disadvantagestoo many menus for

complex taskscan be slow for

frequent usersconsumes screen

spacerequires rapid

display rate

Menus There are many variations

– pull-down– pop-up– command– cascading menus– iconic menus– tree-structured menus (site maps)

– pie menus (pop-up radial)

– multiple-column menus (common on WWW)

– Lots of studies have been done– how many items/to what depth– dynamically rearranging contents according to frequency– role of stable position within a pull-down menu– titling

Form Fillin

Advantagessimplifies data entryrequires modest

trainingconvenient

assistance (recognition vs. recall)

allows for form-management tools

Disadvantagesconsumes screen

space

Command Language

Advantagesflexibleappeals to “power”

usersallows user initiativeallows convenient

creation of macros

Disadvantagespoor error handlingrequires substantial

training and memorization

Natural Language

Advantagesnatural to specify

(no need to learn syntax)

less intimidating for novices

Disadvantagescan’t really be done

yetrequires clarification

dialogmay require more

keystrokes (unless spoken)

unpredictable results

Questions

What category does a toolbar or palette fall into?

What is the relationship between these interaction styles and widgets in a GUI system?

Summary Windowing systems

– software to manage and arrange windows» keeps track of current focus

– software to support handling of user-created events» complex GUIS are built up of hierarchically nested windows

Events– associated with various types of input devices and actions– are handled one by one from a queue

Other Interaction types– menu-driven, command language, natural language,

form-fillin– UIs should mix and match as appropriate for the tasks

being supported