Interaction Objects Styles n We will cover chapter
Interaction Objects & Styles n 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. 1
Review: Donald Norman’s model n Seven stages n n n n 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 2
Traditional Interaction Styles Command Line n Menus & buttons n Query dialogues n Forms and spreadsheets n Boxes n Touch screens n WIMP: Windows, Icons, Menus & Pointing n 3
Review: Abowd and Beale framework extension of Norman… their interaction framework has 4 parts n user n input S n system core n output O output U I task input each has its own unique language interaction translation between languages problems in interaction = problems in translation 4
Command Line n Typed commands, function keys, macros associated with keys, etc. n Articulation difficult; Performance easy; Presentation usually non-existent; Observation impossible (without a GUI)! 5
Command Line n Advantages: Suitable for repetitive tasks; Flexible; Expressive (direct access to system functionality); Ideal for experts (KB shortcuts). n Disadvantages: Hard to learn and remember for novices; Inconsistent syntax. 6
Menus n Advantages: Set of options displayed on the screen n Interaction depends on recognition: easy to use n Command provided in context (graphical menus) n n Disadvantages: Uses up screen real estate n Bad design can make menus hard to use n Potential to loose context (text-based n 7
Menu Types n n n Cascading (hierarchical) Contextual (dynamic) Embedded Menu bars Option, toggle n n Pie, rectangular Pop-up Pull-down See ref. Ch. 3 for more 8
Buttons n n individual and isolated regions within a display that can be selected to invoke an action Push-button n Radio-button – set of mutually exclusive choices Check-button – set of nonexclusive choices Button palette n n 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 9
Menus n Design guidelines: Meaningful menu/button names n Allow multiple selection choices (KB, mouse) n Sensible order of items n Sensible groupings of items n Sensible hierarchical organization n Provide KB acceleration n n Thinking assignment: n come up with good and bad examples 10
Query Style n Advantages: n n n User is led through questions; Good for novices Suitable for command-line interfaces (use form fill if GUI is available) Disadvantages: n n n Restricted functionality Frustrating for experts (lack of control) Difficult to undo Loose context Sophisticated query languages (e. g. SQL) difficult to learn 11
Forms & Spreadsheets n Forms vs. Spreadsheets n n Advantages: n n n Consistency maintenance by constraint satisfaction Excellent for data-entry Easily learnable & usable as it mimics paper forms Preserves context Flexible filling Ease of correction Disadvantage: n screen real estate 12
Forms & Spreadsheets n Design guidelines: n Use good design/layout n aesthetically pleasing n easy to navigate n Make error correction easy 13
Boxes n A box is a rectangular screen area, usually a separate window, for messages, text entry, commands, selection and user control 14
Types of Boxes n List n n Entry n n A separate window for free form text entry Message n n A scrollable sequence of user choices that appear in a separate window A window for system feedback to the user, with limited user input options Dialog n A composite interaction object that mixes interaction styles and separates out a 15
WIMP n n 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. 16
Windows n Delineated areas of screen that behave like independent terminals designated areas: scroll, title, status etc n contain text and graphics n primary operations: move, resize, minimize, maximize, open, close n n Primary and secondary windows 17
Windows Tiled or cascading windows n Design guidelines: n Don’t overuse n Consistent appearance and behaviors within task n Different windows for different independent tasks n 18
Icons An icon is a visual image (an earcon is an auditory image) that represents an object that the user can access and manipulate. n 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). n Icons should provide “affordance”. n 19
Pointers Input device: mouse, trackball, arrow keys. . . n Input representation: cursor n Cursor “hotspot” n Using a cursor to convey information: n indicate mode n suggest next action n inform about system activity n 20
Menus Already discussed. n In WIMP the term menu is used broadly, to include various kinds of menus, buttons, palettes, toolbars, boxes, etc. n These are together called “widgets”. n Particular styles for these widgets and the way they behave make up the “look and feel” of a WIMP interface. n 21
Advanced Interaction Styles Gesture Recognition n 3 D Interfaces/Virtual Reality n Information Visualization n Speech Recognition & Generation n Tangible Interfaces n These are all suitable research topics for your report/presentation project n 22
Three dimensional interfaces n n virtual reality ‘ordinary’ window systems n n highlighting visual affordance indiscriminate use just confusing! flat buttons … click me! 3 D workspaces n n n … or sculptured use for extra virtual space light and occlusion give depth distance effects 23
interactivity easy to focus on look what about feel? 24
Speech–driven interfaces n rapidly improving … … but still inaccurate n 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? ” 25
Look and … feel n WIMP systems have the same elements: windows, icons. , menus, pointers, buttons, etc. n but different window systems … behave differently e. g. Mac. OS vs Windows menus appearance + behaviour = look and feel 26
Initiative n who has the initiative? old question–answer – computer WIMP interface – user n WIMP exceptions … pre-emptive parts of the interface n modal dialog boxes n n n come and won’t go away! good for errors, essential steps but use with care 27
Error and repair 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 ……… 28
Context Interaction affected by social and organizational context n other people n n motivation n n desire to impress, competition, fear of failure fear, allegiance, ambition, self-satisfaction inadequate systems n cause frustration and lack of motivation 29
Experience, engagement and fun designing experience physical engagement managing value 30
Experience? n home, entertainment, shopping n n n psychology of experience n n n flow (Csikszentimihalyi) (for examples see week 4 Resources) balance between anxiety and boredom education n not enough that people can use a system they must want to use it! zone of proximal development things you can just do with help wider. . . n literary analysis, film studies, drama 31
Designing experience n real crackers cheap and cheerful! n bad joke, plastic toy, paper hat n pull and bang n 32
Designing experience n virtual crackers cheap and cheerful n bad joke, web toy, cut-out mask n click and bang n 33
Designing experience n virtual crackers cheap and cheerful n bad joke, web toy, cut-out mask n click and bang n 34
how crackers work fill in web form sender receive email To: wxv From: . . recipient closed cracker page watches progress open recipient clicks cracker opens. . . very slowly message open sender cracker page joke links mask web toy 35
The crackers experience real cracker virtual cracker design cheap and cheerful simple page/graphics play plastic toy and joke web toy and joke dressing up paper hat mask to cut out Surface elements 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) 36
General lesson … if you want someone to do something … n make it easy for them! n understand users values n banking example p 154 37
Reading Assignments n Complete Chapter 3 3. 7: An interesting discussion of graphic design n 3. 8: Interactivity - Note the notion of “preempting” the user and what “modal dialog boxes” do n 3. 9: Social and organizational context of interaction: motivation, privacy, etc n 3. 10: Chapter summary n Chapter 4 n A Historical and Intellectual Perspective n 38
Exam 1 Friday Feb 18 th in class n Multiple choice or short answer questions on concepts and applications of concepts n Closed text, reference, papers, slides, notes etc. n Coverage: Lecture slides, reading assignments from text & reference, papers n 39
- Slides: 39