interaction objects styles l.
Skip this Video
Loading SlideShow in 5 Seconds..
Interaction Objects & Styles PowerPoint Presentation
Download Presentation
Interaction Objects & Styles

Loading in 2 Seconds...

play fullscreen
1 / 39

Interaction Objects & Styles - PowerPoint PPT Presentation

  • Uploaded on

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. Review: Donald Norman’s model. Seven stages

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Interaction Objects & Styles' - sibyl

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
interaction objects styles
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.
review donald norman s model
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
traditional interaction styles
Traditional Interaction Styles
  • Command Line
  • Menus & buttons
  • Query dialogues
  • Forms and spreadsheets
  • Boxes
  • Touch screens
  • WIMP: Windows, Icons, Menus & Pointing
review abowd and beale framework









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

command line
Command Line
  • Typed commands, function keys, macros associated with keys, etc.
  • Articulation difficult; Performance easy; Presentation usually non-existent; Observation impossible (without a GUI)!
command line6
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.
  • 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)
menu types
Cascading (hierarchical)

Contextual (dynamic)


Menu bars

Option, toggle

Pie, rectangular



See ref. Ch. 3 for more

Menu Types
  • 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
  • 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
query style
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
forms spreadsheets
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
forms spreadsheets13
Forms & Spreadsheets
  • Design guidelines:
    • Use good design/layout
      • aesthetically pleasing
      • easy to navigate
    • Make error correction easy
  • A box is a rectangular screen area, usually a separate window, for messages, text entry, commands, selection and user control
types of boxes
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
  • 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.
  • 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
  • Tiled or cascading windows
  • Design guidelines:
    • Don’t overuse
    • Consistent appearance and behaviors within task
    • Different windows for different independent tasks
  • 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”.
  • 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
  • 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.
advanced interaction styles
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
three dimensional interfaces
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



easy to focus on look

what about feel?

speech driven interfaces
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?”
look and feel
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
  • 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
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

… … …

Error and repair

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
experience engagement and fun

Experience, engagement and fun

designing experience

physical engagement

managing value

  • 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
designing experience
Designing experience
  • real crackers
    • cheap and cheerful!
    • bad joke, plastic toy, paper hat
    • pull and bang
designing experience33
Designing experience
  • virtual crackers
    • cheap and cheerful
    • bad joke, web toy, cut-out mask
    • click and bang
designing experience34
Designing experience
  • virtual crackers
    • cheap and cheerful
    • bad joke, web toy, cut-out mask
    • click and bang
how crackers work

To: wxv

From: ..

fill in web form

receive email

closedcracker page







recipient clicks

cracker opens ...

very slowly




opencracker page

web toy


how crackers work
the crackers experience
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)
general lesson
General lesson …

if you want someone to do something …

  • make it easy for them!
  • understand users values
    • banking example p154
reading assignments
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
exam 1
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