1 Interaction Objects & Styles We will cover chapter 3 from the reference as well as sections 3.5 & 3.6 from the text; but quickly & selectively since this is 6620 material – so you should read these chapter and sections fully. We will cover chapter 3 from the reference as well as sections 3.5 & 3.6 from the text; but quickly & selectively since this is 6620 material – so you should read these chapter and sections fully.

2 Review: Donald Norman’s model Seven stages Seven stages user establishes the goal user establishes the goal formulates intention formulates intention specifies actions at interface specifies actions at interface executes action executes action perceives system state perceives system state interprets system state interprets system state evaluates system state with respect to goal evaluates system state with respect to goal Norman’s model concentrates on user’s view of the interface Norman’s model concentrates on user’s view of the interface

3 Traditional Interaction Styles Command Line Command Line Menus & buttons Menus & buttons Query dialogues Query dialogues Forms and spreadsheets Forms and spreadsheets Boxes Boxes Touch screens Touch screens WIMP: Windows, Icons, Menus & Pointing WIMP: Windows, Icons, Menus & Pointing

4 Review: Abowd and Beale framework extension of Norman… their interaction framework has 4 parts user user input input system system output output each has its own unique language interaction  translation between languages problems in interaction = problems in translation S core U task O output I input

5 Command Line Typed commands, function keys, macros associated with keys, etc. Typed commands, function keys, macros associated with keys, etc. Articulation difficult; Performance easy; Presentation usually non-existent; Observation impossible (without a GUI)! Articulation difficult; Performance easy; Presentation usually non-existent; Observation impossible (without a GUI)!

6 Command Line Advantages: Suitable for repetitive tasks; Flexible; Expressive (direct access to system functionality); Ideal for experts (KB shortcuts). Advantages: Suitable for repetitive tasks; Flexible; Expressive (direct access to system functionality); Ideal for experts (KB shortcuts). Disadvantages: Hard to learn and remember for novices; Inconsistent syntax. Disadvantages: Hard to learn and remember for novices; Inconsistent syntax.

7 Menus Advantages: Advantages: Set of options displayed on the screen Set of options displayed on the screen Interaction depends on recognition: easy to use Interaction depends on recognition: easy to use Command provided in context (graphical menus) Command provided in context (graphical menus) Disadvantages: Disadvantages: Uses up screen real estate Uses up screen real estate Bad design can make menus hard to use Bad design can make menus hard to use Potential to loose context (text-based menus) Potential to loose context (text-based menus)

8 Menu Types Cascading (hierarchical) Cascading (hierarchical) Contextual (dynamic) Contextual (dynamic) Embedded Embedded Menu bars Menu bars Option, toggle Option, toggle Pie, rectangular Pop-up Pull-down See ref. Ch. 3 for more

9 Buttons individual and isolated regions within a display that can be selected to invoke an action individual and isolated regions within a display that can be selected to invoke an action Push-button Push-button Radio-button – set of mutually exclusive choices Radio-button – set of mutually exclusive choices Check-button – set of non- exclusive choices Check-button – set of non- exclusive choices Button palette Button palette interaction has several modes like insert mode in vi, problem cause when you don’t know what mode you are in interaction has several modes like insert mode in vi, problem cause when you don’t know what mode you are in Palette makes set of modes and active mode visible to user Palette makes set of modes and active mode visible to user

10 Menus Design guidelines: Design guidelines: Meaningful menu/button names Meaningful menu/button names Allow multiple selection choices (KB, mouse) Allow multiple selection choices (KB, mouse) Sensible order of items Sensible order of items Sensible groupings of items Sensible groupings of items Sensible hierarchical organization Sensible hierarchical organization Provide KB acceleration Provide KB acceleration Thinking assignment: Thinking assignment: come up with good and bad examples come up with good and bad examples

11 Query Style Advantages: Advantages: User is led through questions; Good for novices User is led through questions; Good for novices Suitable for command-line interfaces (use form fill if GUI is available) Suitable for command-line interfaces (use form fill if GUI is available) Disadvantages: Disadvantages: Restricted functionality Restricted functionality Frustrating for experts (lack of control) Frustrating for experts (lack of control) Difficult to undo Difficult to undo Loose context Loose context Sophisticated query languages (e.g. SQL) difficult to learn Sophisticated query languages (e.g. SQL) difficult to learn

12 Forms & Spreadsheets Forms vs. Spreadsheets Forms vs. Spreadsheets Consistency maintenance by constraint satisfaction Consistency maintenance by constraint satisfaction Advantages: Advantages: Excellent for data-entry Excellent for data-entry Easily learnable & usable as it mimics paper forms Easily learnable & usable as it mimics paper forms Preserves context Preserves context Flexible filling Flexible filling Ease of correction Ease of correction Disadvantage: Disadvantage: screen real estate screen real estate

13 Forms & Spreadsheets Design guidelines: Design guidelines: Use good design/layout Use good design/layout aesthetically pleasing aesthetically pleasing easy to navigate easy to navigate Make error correction easy Make error correction easy

14 Boxes A box is a rectangular screen area, usually a separate window, for messages, text entry, commands, selection and user control A box is a rectangular screen area, usually a separate window, for messages, text entry, commands, selection and user control

15 Types of Boxes List List A scrollable sequence of user choices that appear in a separate window A scrollable sequence of user choices that appear in a separate window Entry Entry A separate window for free form text entry A separate window for free form text entry Message Message A window for system feedback to the user, with limited user input options A window for system feedback to the user, with limited user input options Dialog Dialog A composite interaction object that mixes interaction styles and separates out a subtask A composite interaction object that mixes interaction styles and separates out a subtask

16 WIMP Windows, Icons, Menus & Pointers Windows, Icons, Menus & Pointers Windows, Icons, Mouse & Pull-down menus Windows, Icons, Mouse & Pull-down menus Most common interaction style of today Most common interaction style of today Unlikely to be so in future due to trends like the move toward small handheld devices and pervasive computing. Unlikely to be so in future due to trends like the move toward small handheld devices and pervasive computing.

17 Windows Delineated areas of screen that behave like independent terminals Delineated areas of screen that behave like independent terminals designated areas: scroll, title, status etc designated areas: scroll, title, status etc contain text and graphics contain text and graphics primary operations: move, resize, minimize, maximize, open, close primary operations: move, resize, minimize, maximize, open, close Primary and secondary windows Primary and secondary windows

18 Windows Tiled or cascading windows Tiled or cascading windows Design guidelines: Design guidelines: Don’t overuse Don’t overuse Consistent appearance and behaviors within task Consistent appearance and behaviors within task Different windows for different independent tasks Different windows for different independent tasks

19 Icons An icon is a visual image (an earcon is an auditory image) that represents an object that the user can access and manipulate. An icon is a visual image (an earcon is an auditory image) that represents an object that the user can access and manipulate. Some icons are easily recognizable, others require a user to learn the association between the object and its representation. (see p.147 for some examples). Some icons are easily recognizable, others require a user to learn the association between the object and its representation. (see p.147 for some examples). Icons should provide “affordance”. Icons should provide “affordance”.

20 Pointers Input device: mouse, trackball,arrow keys... Input device: mouse, trackball,arrow keys... Input representation: cursor Input representation: cursor Cursor “hotspot” Cursor “hotspot” Using a cursor to convey information: Using a cursor to convey information: indicate mode indicate mode suggest next action suggest next action inform about system activity inform about system activity

21 Menus Already discussed. Already discussed. In WIMP the term menu is used broadly, to include various kinds of menus, buttons, palettes, toolbars, boxes, etc. In WIMP the term menu is used broadly, to include various kinds of menus, buttons, palettes, toolbars, boxes, etc. These are together called “widgets”. These are together called “widgets”. Particular styles for these widgets and the way they behave make up the “look and feel” of a WIMP interface. Particular styles for these widgets and the way they behave make up the “look and feel” of a WIMP interface.

22 Advanced Interaction Styles Gesture Recognition Gesture Recognition 3D Interfaces/Virtual Reality 3D Interfaces/Virtual Reality Information Visualization Information Visualization Speech Recognition & Generation Speech Recognition & Generation Tangible Interfaces Tangible Interfaces These are all suitable research topics for your report/presentation project These are all suitable research topics for your report/presentation project

23 Three dimensional interfaces virtual reality virtual reality ‘ordinary’ window systems ‘ordinary’ window systems highlighting highlighting visual affordance visual affordance indiscriminate use just confusing! indiscriminate use just confusing! 3D workspaces 3D workspaces use for extra virtual space use for extra virtual space light and occlusion give depth light and occlusion give depth distance effects distance effects flat buttons … … or sculptured click me!

24 interactivity easy to focus on look what about feel?

25 Speech–driven interfaces rapidly improving … … but still inaccurate rapidly improving … … but still inaccurate how to have robust dialogue? … interaction of course! how to have robust dialogue? … interaction of course! e.g. airline reservation: reliable “yes” and “no” + system reflects back its understanding “you want a ticket from New York to Boston?” e.g. airline reservation: reliable “yes” and “no” + system reflects back its understanding “you want a ticket from New York to Boston?”

26 Look and … feel WIMP systems have the same elements: windows, icons., menus, pointers, buttons, etc. WIMP systems have the same elements: windows, icons., menus, pointers, buttons, etc. but different window systems … behave differently but different window systems … behave differently e.g. MacOS vs Windows menus e.g. MacOS vs Windows menus appearance + behaviour = look and feel appearance + behaviour = look and feel

27 Initiative who has the initiative? old question–answer– computer WIMP interface– user who has the initiative? old question–answer– computer WIMP interface– user WIMP exceptions … pre-emptive parts of the interface WIMP exceptions … pre-emptive parts of the interface modal dialog boxes modal dialog boxes come and won’t go away! come and won’t go away! good for errors, essential steps good for errors, essential steps but use with care but use with care

28 Error and repair can’t always avoid errors … … but we can put them right can’t always avoid errors … … but we can put them right make it easy to detect errors … then the user can repair them make it easy to detect errors … then the user can repair them hello, this is the Go Faster booking system what would you like? (user) I want to fly from New York to London you want a ticket from New York to Boston (user) no sorry, please confirm one at a time do you want to fly from New York (user) yes … … …

29 Context Interaction affected by social and organizational context other people other people desire to impress, competition, fear of failure desire to impress, competition, fear of failure motivation motivation fear, allegiance, ambition, self-satisfaction fear, allegiance, ambition, self-satisfaction inadequate systems inadequate systems cause frustration and lack of motivation cause frustration and lack of motivation

30 Experience, engagement and fun designing experience physical engagement managing value

31 Experience? home, entertainment, shopping home, entertainment, shopping not enough that people can use a system not enough that people can use a system they must want to use it! they must want to use it! psychology of experience psychology of experience flow (Csikszentimihalyi) (for examples see week 4 Resources) flow (Csikszentimihalyi) (for examples see week 4 Resources) balance between anxiety and boredom balance between anxiety and boredom education education zone of proximal development zone of proximal development things you can just do with help things you can just do with help wider... wider... literary analysis, film studies, drama literary analysis, film studies, drama

32 Designing experience real crackers real crackers cheap and cheerful! cheap and cheerful! bad joke, plastic toy, paper hat bad joke, plastic toy, paper hat pull and bang pull and bang

33 Designing experience virtual crackers virtual crackers cheap and cheerful cheap and cheerful bad joke, web toy, cut-out mask bad joke, web toy, cut-out mask click and bang click and bang

34 Designing experience virtual crackers virtual crackers cheap and cheerful cheap and cheerful bad joke, web toy, cut-out mask bad joke, web toy, cut-out mask click and bang click and bang

35 how crackers work sender fill in web form To: wxv From:.. receive recipient closed cracker page open message recipient clicks cracker opens... very slowly joke links open cracker page web toy mask sender watches progress

36 The crackers experience real crackervirtual cracker real crackervirtual cracker Surface elements Surface elements designcheap and cheerfulsimple page/graphics designcheap and cheerfulsimple page/graphics playplastic toy and jokeweb toy and joke playplastic toy and jokeweb toy and joke dressing uppaper hatmask to cut out dressing uppaper hatmask to cut out Experienced effects Experienced effects sharedoffered to anothersent by message sharedoffered to anothersent by message co-experiencepulled togethersender can't see content until opened by recipient co-experiencepulled togethersender can't see content until opened by recipient excitementcultural connotationsrecruited expectation excitementcultural connotationsrecruited expectation hiddennesscontents insidefirst page - no contents hiddennesscontents insidefirst page - no contents suspensepulling crackerslow... page change suspensepulling crackerslow... page change surprisebang (when it works)WAV file (when it works) surprisebang (when it works)WAV file (when it works)

37 General lesson … if you want someone to do something … make it easy for them! make it easy for them! understand users values understand users values banking example p154 banking example p154

38 Reading Assignments Complete Chapter 3 Complete Chapter 3 3.7: An interesting discussion of graphic design 3.7: An interesting discussion of graphic design 3.8: Interactivity - Note the notion of “pre-empting” the user and what “modal dialog boxes” do 3.8: Interactivity - Note the notion of “pre-empting” the user and what “modal dialog boxes” do 3.9: Social and organizational context of interaction: motivation, privacy, etc 3.9: Social and organizational context of interaction: motivation, privacy, etc 3.10: Chapter summary 3.10: Chapter summary Chapter 4 Chapter 4 A Historical and Intellectual Perspective A Historical and Intellectual Perspective

39 Exam 1 Friday Feb 18 th in class Friday Feb 18 th in class Multiple choice or short answer questions on concepts and applications of concepts Multiple choice or short answer questions on concepts and applications of concepts Closed text, reference, papers, slides, notes etc. Closed text, reference, papers, slides, notes etc. Coverage: Lecture slides, reading assignments from text & reference, papers Coverage: Lecture slides, reading assignments from text & reference, papers