1 Interaction Objects & Interaction Objects & Styles Styles We will cover chapter 3 from We will cover chapter 3 from the reference as well as the reference as well as sections 3.5 & 3.6 from the sections 3.5 & 3.6 from the text; but quickly & selectively text; but quickly & selectively since this is 6620 material – since this is 6620 material – so you should read these so you should read these chapter and sections fully. chapter and sections fully.
We will cover chapter 3 from the We will cover chapter 3 from the reference as well as sections 3.5 & reference as well as sections 3.5 & 3.6 from the text; but quickly & 3.6 from the text; but quickly & selectively since this is 6620 selectively since this is 6620 material – so you should read these material – so you should read these chapter and sections fully.chapter and sections fully.
2
Review: Donald Review: Donald Norman’s modelNorman’s model
Seven stagesSeven stages user establishes the goaluser establishes the goal formulates intentionformulates intention specifies actions at interfacespecifies actions at interface executes actionexecutes action perceives system stateperceives system state interprets system stateinterprets system state evaluates system state with respect to goalevaluates system state with respect to goal
Norman’s model concentrates on user’s Norman’s model concentrates on user’s view of the interfaceview of the interface
3
Traditional Interaction Traditional Interaction StylesStyles
Command LineCommand Line Menus & buttonsMenus & buttons Query dialoguesQuery dialogues Forms and spreadsheetsForms and spreadsheets BoxesBoxes Touch screensTouch screens WIMP: Windows, Icons, Menus & WIMP: Windows, Icons, Menus &
PointingPointing
4
Review: Abowd and Beale Review: Abowd and Beale frameworkframework
extension of Norman…extension of Norman…their interaction framework has 4 partstheir interaction framework has 4 parts
useruser inputinput systemsystem outputoutput
each has its own unique languageeach has its own unique language
interaction interaction translation between languages translation between languages
problems in interaction = problems in translationproblems in interaction = problems in translation
Score
Utask
Ooutput
Iinput
5
Command LineCommand Line
Typed commands, function keys, Typed commands, function keys, macros associated with keys, etc.macros associated with keys, etc.
Articulation difficult; Performance Articulation difficult; Performance easy; Presentation usually non-easy; Presentation usually non-existent; Observation impossible existent; Observation impossible (without a GUI)!(without a GUI)!
6
Command LineCommand Line
Advantages: Suitable for repetitive Advantages: Suitable for repetitive tasks; Flexible; Expressive (direct tasks; Flexible; Expressive (direct access to system functionality); Ideal access to system functionality); Ideal for experts (KB shortcuts).for experts (KB shortcuts).
Disadvantages: Hard to learn and Disadvantages: Hard to learn and remember for novices; Inconsistent remember for novices; Inconsistent syntax.syntax.
7
MenusMenus Advantages:Advantages:
Set of options displayed on the screenSet of options displayed on the screen Interaction depends on recognition: easy to useInteraction depends on recognition: easy to use Command provided Command provided inin context (graphical context (graphical
menus)menus)
Disadvantages:Disadvantages: Uses up screen real estateUses up screen real estate Bad design can make menus hard to useBad design can make menus hard to use Potential to loose context (text-based menus)Potential to loose context (text-based menus)
interaction has several interaction has several modes like insert mode in modes like insert mode in vi, problem cause when vi, problem cause when you don’t know what mode you don’t know what mode you are inyou are in
Palette makes set of modes Palette makes set of modes and active mode visible to and active mode visible to user user
10
MenusMenus
Design guidelines:Design guidelines: Meaningful menu/button namesMeaningful menu/button names Allow multiple selection choices (KB, mouse)Allow multiple selection choices (KB, mouse) Sensible order of itemsSensible order of items Sensible groupings of itemsSensible groupings of items Sensible hierarchical organizationSensible hierarchical organization Provide KB accelerationProvide KB acceleration
Thinking assignment: Thinking assignment: come up with good and bad examplescome up with good and bad examples
11
Query StyleQuery Style Advantages:Advantages:
User is led through questions; Good for novicesUser is led through questions; Good for novices Suitable for command-line interfaces (use form fill Suitable for command-line interfaces (use form fill
if GUI is available)if GUI is available) Disadvantages:Disadvantages:
Restricted functionalityRestricted functionality Frustrating for experts (lack of control)Frustrating for experts (lack of control) Difficult to undoDifficult to undo Loose contextLoose context Sophisticated query languages (e.g. SQL) difficult Sophisticated query languages (e.g. SQL) difficult
to learnto learn
12
Forms & SpreadsheetsForms & Spreadsheets Forms vs. SpreadsheetsForms vs. Spreadsheets
Consistency maintenance by constraint satisfactionConsistency maintenance by constraint satisfaction Advantages:Advantages:
Excellent for data-entryExcellent for data-entry Easily learnable & usable as it mimics paper formsEasily learnable & usable as it mimics paper forms Preserves contextPreserves context Flexible fillingFlexible filling Ease of correctionEase of correction
Disadvantage: Disadvantage: screen real estatescreen real estate
13
Forms & SpreadsheetsForms & Spreadsheets
Design guidelines:Design guidelines: Use good design/layoutUse good design/layout
aesthetically pleasingaesthetically pleasing easy to navigateeasy to navigate
Make error correction easyMake error correction easy
14
BoxesBoxes
A box is a rectangular screen area, A box is a rectangular screen area, usually a separate window, for usually a separate window, for messages, text entry, commands, messages, text entry, commands, selection and user controlselection and user control
15
Types of BoxesTypes of Boxes ListList
A scrollable sequence of user choices that A scrollable sequence of user choices that appear in a separate windowappear in a separate window
EntryEntry A separate window for free form text entryA separate window for free form text entry
MessageMessage A window for system feedback to the user, A window for system feedback to the user,
with limited user input optionswith limited user input options DialogDialog
A composite interaction object that A composite interaction object that mixes mixes interaction stylesinteraction styles and and separatesseparates out a out a subtasksubtask
16
WIMPWIMP Windows, Icons, Menus & PointersWindows, Icons, Menus & Pointers Windows, Icons, Mouse & Pull-down menusWindows, Icons, Mouse & Pull-down menus Most common interaction style of todayMost common interaction style of today Unlikely to be so in future due to trends Unlikely to be so in future due to trends
like the move toward small handheld like the move toward small handheld devices and pervasive computing.devices and pervasive computing.
17
WindowsWindows
Delineated areas of screen that Delineated areas of screen that behave like independent terminalsbehave like independent terminals designated areas: scroll, title, status etcdesignated areas: scroll, title, status etc contain text and graphicscontain text and graphics primary operations: move, resize, primary operations: move, resize,
minimize, maximize, open, closeminimize, maximize, open, close Primary and secondary windowsPrimary and secondary windows
18
WindowsWindows
Tiled or cascading windowsTiled or cascading windows Design guidelines:Design guidelines:
Don’t overuseDon’t overuse Consistent appearance and behaviors Consistent appearance and behaviors
within taskwithin task Different windows for different Different windows for different
independent tasksindependent tasks
19
IconsIcons
An icon is a visual image (an earcon is an An icon is a visual image (an earcon is an auditory image) that represents an auditory image) that represents an object that the user can access and object that the user can access and manipulate.manipulate.
Some icons are easily recognizable, Some icons are easily recognizable, others require a user to learn the others require a user to learn the association between the object and its association between the object and its representation. (see p.147 for some representation. (see p.147 for some examples).examples).
Icons should provide “affordance”.Icons should provide “affordance”.
Input representation: cursorInput representation: cursor Cursor “hotspot”Cursor “hotspot” Using a cursor to convey information:Using a cursor to convey information:
indicate modeindicate mode suggest next actionsuggest next action inform about system activityinform about system activity
21
MenusMenus
Already discussed.Already discussed. In WIMP the term menu is used In WIMP the term menu is used
broadly, to include various kinds of broadly, to include various kinds of menus, buttons, palettes, toolbars, menus, buttons, palettes, toolbars, boxes, etc.boxes, etc.
These are together called “widgets”.These are together called “widgets”. Particular styles for these widgets and Particular styles for these widgets and
the way they behave make up the “look the way they behave make up the “look and feel” of a WIMP interface.and feel” of a WIMP interface.
Gesture RecognitionGesture Recognition 3D Interfaces/Virtual Reality3D Interfaces/Virtual Reality Information VisualizationInformation Visualization Speech Recognition & GenerationSpeech Recognition & Generation Tangible InterfacesTangible Interfaces These are all suitable research topics These are all suitable research topics
for your report/presentation projectfor your report/presentation project
23
Three dimensional Three dimensional interfacesinterfaces
virtual realityvirtual reality ‘‘ordinary’ window systemsordinary’ window systems
highlightinghighlighting visual affordancevisual affordance indiscriminate useindiscriminate use
just confusing!just confusing! 3D workspaces3D workspaces
use for extra virtual spaceuse for extra virtual space light and occlusion give depthlight and occlusion give depth distance effectsdistance effects
flat buttons …
… or sculptured
click me!
24
interactivityinteractivity
easy to focus on lookeasy to focus on look
what about feel?what about feel?
25
Speech–driven interfacesSpeech–driven interfaces
rapidly improving …rapidly improving …… but still inaccurate… but still inaccurate
how to have robust dialogue?how to have robust dialogue?… interaction of course!… interaction of course!
e.g. airline reservation:e.g. airline reservation:reliable “yes” and “no”reliable “yes” and “no”+ system reflects back its + system reflects back its
understandingunderstanding“you want a ticket from New York to Boston?”“you want a ticket from New York to Boston?”
26
Look and … feelLook and … feel
WIMP systems have the same elements:WIMP systems have the same elements:windows, icons., menus, pointers, buttons, etc.windows, icons., menus, pointers, buttons, etc.
but different window systemsbut different window systems… … behavebehave differently differently
e.g. MacOS vs Windows menuse.g. MacOS vs Windows menus
appearance + behaviour = look and appearance + behaviour = look and feelfeel
27
Initiative Initiative
who has the initiative?who has the initiative?old question–answerold question–answer – computer– computerWIMP interfaceWIMP interface – user– user
WIMP exceptions …WIMP exceptions …pre-emptivepre-emptive parts of the interface parts of the interface
modal dialog boxesmodal dialog boxes come and won’t go away!come and won’t go away! good for errors, essential stepsgood for errors, essential steps but use with carebut use with care
28
Error and repairError and repair
can’t always avoid errors …can’t always avoid errors …… but we can put them right… but we can put them right
make it easy to make it easy to detectdetect errors errors… then the user can … then the user can repairrepair them them
hello, this is the Go Faster booking systemhello, this is the Go Faster booking system
what would you like?what would you like?
(user) (user) I want to fly from New York to LondonI want to fly from New York to London
you want a ticket from New York to Bostonyou want a ticket from New York to Boston
(user) (user) nono
sorry, please confirm one at a timesorry, please confirm one at a time
do you want to fly from New Yorkdo you want to fly from New York
(user) yes(user) yes
… … …… … …
29
ContextContext
Interaction affected by social and Interaction affected by social and organizational contextorganizational context
other peopleother people desire to impress, competition, fear of failuredesire to impress, competition, fear of failure
not enough that people can use a systemnot enough that people can use a system they must want to use it!they must want to use it!
psychology of experiencepsychology of experience flow (Csikszentimihalyi) (for examples see week 4 flow (Csikszentimihalyi) (for examples see week 4
Resources)Resources) balance between anxiety and boredombalance between anxiety and boredom
educationeducation zone of proximal developmentzone of proximal development things you can just do with helpthings you can just do with help
wider ...wider ... literary analysis, film studies, dramaliterary analysis, film studies, drama
32
Designing experienceDesigning experience
real crackersreal crackers cheap and cheerful!cheap and cheerful! bad joke, plastic toy, paper hat bad joke, plastic toy, paper hat pull and bangpull and bang
33
Designing experienceDesigning experience
virtual crackersvirtual crackers cheap and cheerfulcheap and cheerful bad joke, web toy, cut-out mask bad joke, web toy, cut-out mask click and bangclick and bang
34
Designing experienceDesigning experience
virtual crackersvirtual crackers cheap and cheerfulcheap and cheerful bad joke, web toy, cut-out mask bad joke, web toy, cut-out mask click and bangclick and bang
35
how crackers workhow crackers work
sender
fill in web form
To: wxvFrom: ..
receive email recipient
closedcracker page
open
messagerecipient clicks
cracker opens ...very slowly
jokelinks
opencracker page
web toymask
sender
watchesprogress
36
The crackers experienceThe crackers experience real crackerreal cracker virtual crackervirtual cracker Surface elementsSurface elements designdesign cheap and cheerfulcheap and cheerful simple page/graphicssimple page/graphics playplay plastic toy and jokeplastic toy and joke web toy and jokeweb toy and joke dressing updressing up paper hatpaper hat mask to cut outmask to cut out Experienced effectsExperienced effects sharedshared offered to anotheroffered to another sent by email messagesent by email message co-experienceco-experience pulled togetherpulled together sender can't see content sender can't see content
until opened by recipientuntil opened by recipient
excitementexcitement cultural connotationscultural connotations recruited expectationrecruited expectation hiddennesshiddenness contents insidecontents inside first page - no contentsfirst page - no contents suspensesuspense pulling crackerpulling cracker slow ... page changeslow ... page change surprisesurprise bang (when it works)bang (when it works) WAV file (when it works)WAV file (when it works)
37
General lesson …General lesson …
if you want someone to do something if you want someone to do something ……
make it easy for them!make it easy for them!
understand users valuesunderstand users values banking example p154banking example p154
3.7: An interesting discussion of graphic 3.7: An interesting discussion of graphic designdesign
3.8: Interactivity - Note the notion of “pre-3.8: Interactivity - Note the notion of “pre-empting” the user and what “modal dialog empting” the user and what “modal dialog boxes” doboxes” do
3.9: Social and organizational context of 3.9: Social and organizational context of interaction: motivation, privacy, etcinteraction: motivation, privacy, etc
3.10: Chapter summary3.10: Chapter summary Chapter 4Chapter 4 A Historical and Intellectual PerspectiveA Historical and Intellectual Perspective
39
Exam 1Exam 1
Friday Feb 18Friday Feb 18thth in class in class Multiple choice or short answer Multiple choice or short answer
questions on concepts and questions on concepts and applications of conceptsapplications of concepts
