Interaction Models II Marti Hearst (UCB SIMS) SIMS 213, UI Design & Development March 11, 1999

Today l Review concepts from last time l For more information, see Olsen 98, Developing User Interfaces l Go through examples with tcl/TK l Discuss other interaction models

Event-based Interactions l 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 next close window bring window into focus open folder adjust scroll bar change size

Windowing Systems are … l Software libraries to create GUIS consisting of windows, and implement the interactive elements of those windows l 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 l 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 l 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 l 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 Manager Window manager deals with the “outer frame” of the window e.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 l 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 l 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 l Windowing system is generating events l Object model wants method (callback) invocation l 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 on resize widget ) scrollbar callback (invoked if mouse enter, mouse press, mouse drag on scrollbar) Window System Event Queue e e0 e1 e2 e3 e4... 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 Machine X displays the bits here Client Machine editor running here Network User can interact with the GUI here, even though it is running elsewhere

Examples using Tcl/TK l Code is written in the tcl scripting language l There are classes of widgets –button, listbox, checkbox, menu, etc l Each widget takes attribute/value pairs –text, label, color, command, borderwidth, etc l Each widget has a name –nesting is indicated with “.” –must start with a top-level window –the defaut root is called “.” l Frames are used to group widgets together

Create, display, and destroy a window containing a label frame.f label.f.l -text “this is a label” -border 4 pack.f pack.f.l destroy.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 "focus $b.ok ; break" % bind.prompt "focus $b.cancel ; break" % bind.prompt "set result 1" % bind.prompt "set result 0" % focus $f.entry...

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

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

Five Primary Interaction Styles (Shneiderman 98) l Direct manipulation l Menu selection l Form fillin l Command language l 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 Advantages visually presents task concepts learnability retention error avoidance encourages exploration high subjective satisfaction Disadvantages can 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 Advantages reduces learning time reduces keystrokes structures decision making easy to support error handling Disadvantages too many menus for complex tasks can be slow for frequent users consumes screen space requires rapid display rate

Menus l 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 Advantages simplifies data entry requires modest training convenient assistance (recognition vs. recall) allows for form- management tools Disadvantages consumes screen space

Command Language Advantages flexible appeals to “power” users allows user initiative allows convenient creation of macros Disadvantages poor error handling requires substantial training and memorization

Natural Language Advantages natural to specify (no need to learn syntax) less intimidating for novices Disadvantages can’t really be done yet requires clarification dialog may require more keystrokes (unless spoken) unpredictable results

Questions l What category does a toolbar or palette fall into? l What is the relationship between these interaction styles and widgets in a GUI system?

Summary l 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 l Events –associated with various types of input devices and actions –are handled one by one from a queue l Other Interaction types –menu-driven, command language, natural language, form- fillin –UIs should mix and match as appropriate for the tasks being supported