Interaction Objects & Styles

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.

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

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

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

5. Command Line • Typed commands, function keys, macros associated with keys, etc. • 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). • Disadvantages: Hard to learn and remember for novices; Inconsistent syntax.

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

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

9. Buttons • individual and isolated regions within a display that can be selected to invoke an action • Push-button • Radio-button – set of mutually exclusive choices • Check-button – set of non-exclusive choices • Button palette • 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

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

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

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

13. Forms & Spreadsheets • Design guidelines: • Use good design/layout • aesthetically pleasing • easy to navigate • 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

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

16. WIMP • Windows, Icons, Menus & Pointers • Windows, Icons, Mouse & Pull-down menus • 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.

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

18. Windows • Tiled or cascading windows • Design guidelines: • Don’t overuse • Consistent appearance and behaviors within task • 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. • 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”.

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

21. Menus • Already discussed. • In WIMP the term menu is used broadly, to include various kinds of menus, buttons, palettes, toolbars, boxes, etc. • 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.

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

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

24. interactivity easy to focus on look what about feel?

25. Speech–driven interfaces • rapidly improving … … but still inaccurate • 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?”

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

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

28. can’t always avoid errors … … but we can put them right 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 … … … Error and repair

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

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

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

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

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

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

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

36. The crackers experience • real cracker virtual cracker • Surface elements • design cheap and cheerful simple page/graphics • play plastic toy and joke web toy and joke • dressing up paper hat mask to cut out • Experienced effects • shared offered to another sent by email message • co-experience pulled together sender can't see content until opened by recipient • excitement cultural connotations recruited expectation • hiddenness contents inside first page - no contents • suspense pulling cracker slow ... page change • surprise bang (when it works) WAV file (when it works)

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

38. Reading Assignments • Complete Chapter 3 • 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.9: Social and organizational context of interaction: motivation, privacy, etc • 3.10: Chapter summary • Chapter 4 • A Historical and Intellectual Perspective

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