interaction objects styles l.
Download
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


  • 146 Views
  • 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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
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

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

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.
menus
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)
menu types
Cascading (hierarchical)

Contextual (dynamic)

Embedded

Menu bars

Option, toggle

Pie, rectangular

Pop-up

Pull-down

See ref. Ch. 3 for more

Menu Types
buttons
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
menus10
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
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
boxes
Boxes
  • 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
slide16
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.
windows
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
windows18
Windows
  • Tiled or cascading windows
  • Design guidelines:
    • Don’t overuse
    • Consistent appearance and behaviors within task
    • Different windows for different independent tasks
icons
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”.
pointers
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
menus21
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.
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

interactivity

interactivity

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

Experience, engagement and fun

designing experience

physical engagement

managing value

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

joke

links

open

message

watches

progress

recipient clicks

cracker opens ...

very slowly

sender

sender

recipient

opencracker page

web toy

mask

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