Interaction%20Objects%20

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 Normans 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
• Normans model concentrates on users 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
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
Menu Types

• Cascading (hierarchical)
• Contextual (dynamic)
• Embedded
• Menu bars
• 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
• 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 dont 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
• Dont 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
Speechdriven 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 questionanswer
  computer WIMP interface user
• WIMP exceptions pre-emptive parts of the
  interface
• modal dialog boxes
• come and wont go away!
• good for errors, essential steps
• but use with care

28
Error and repair

• cant 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

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
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