slide1 l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
A Tangible Interface for Collaborative Web Site Design PowerPoint Presentation
Download Presentation
A Tangible Interface for Collaborative Web Site Design

Loading in 2 Seconds...

play fullscreen
1 / 35

A Tangible Interface for Collaborative Web Site Design - PowerPoint PPT Presentation


  • 304 Views
  • Uploaded on

“ We interact with documents in two separate worlds: the electronic world of the workstation, and the physical world of the desk. Interaction styles in these two worlds do not resemble each other, functions available are different, and the interaction between the two is limited.

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 'A Tangible Interface for Collaborative Web Site Design' - Gabriel


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
slide1

We interact with documents in two separate worlds: the electronic world of the workstation, and the physical world of the desk. Interaction styles in these two worlds do not resemble each other, functions available are different, and the interaction between the two is limited.

- Pierre Wellner, Xerox Researcher, 1993

a tangible interface for collaborative web site design

The Designers’ Outpost

A Tangible Interfacefor CollaborativeWeb Site Design

Scott KlemmerMark Newman

Michael Thomsen

James Landay

31 January 2002

IUA, Universitat Pompeu Fabra

Barcelona, España

best practices for designing interfaces

W O R K P R A C T I C E

Best Practices for Designing Interfaces
  • Iterative design
  • Getting it right the first time is hard
  • Prototyping tools can be the key to success

Design

Test

Analyze

The Designers’ Outpost: Collaborative Web Design

web artifacts representations

Site Maps

Storyboards

Schematics

Mock-ups

W O R K P R A C T I C E

Web Artifacts/Representations
  • Designers create representations of sites at multiple levels of detail
  • Importance of intermediate artifacts

The Designers’ Outpost: Collaborative Web Design

information architecture comes first

W E B D E S I G N

Information Architecture Comes First
  • Interviews with 11 professional designers
  • Post-It notes on large surfaces
    • affinity diagrams
  • Brainstorming
    • collaborative
    • solo
  • Advantages
    • persistent
    • immersive
  • Difficulties
    • hard to edit
    • …to share
    • …to make digital

Contextual Design, by Hugh Beyer and Karen Holtzblatt

The Designers’ Outpost: Collaborative Web Design

slide6

Above: At a Silicon Valley design firm specializing in the customer service portion of web sites

Left: Collaborating on a project schedule at Hanna Hodge http://www.enteract.com/~marc/rettig.walls.72dpi.pdf

The Designers’ Outpost: Collaborative Web Design

physical virtual

P R A C T I C E

Physical? Virtual?

The Designers’ Outpost: Collaborative Web Design

designers outpost

I N T E R A C T I O N S

Designers’ Outpost
  • Combining...

affordances of paper and

advantages of electronic media

to support design practice

  • Electronic wall surface (72” Diagonal SMART Board)
  • Regular Post-it Notes
  • Computer Vision, Pen, and Physical Tools UI

The Designers’ Outpost: Collaborative Web Design

related work wall scale uis
Related Work: Wall-Scale UIs

PostBrainstorm, Guimbretière et al, UIST01

metaDESK, Ullmer et al, UIST97

Collaborage, Moran et al, UIST99

i-LAND, Streitz et al, CHI99

The Designers’ Outpost: Collaborative Web Design

design evolution of outpost

I N T E R A C T I O N S

Design Evolution of Outpost

PAPER PROTOTYPE

PAPER AND PIXELS

INTERACTIVE WALL

The Designers’ Outpost: Collaborative Web Design

design evolution of outpost11

I N T E R A C T I O N S

Design Evolution of Outpost

PAPER PROTOTYPE

  • Study
  • Two Users
  • Keyboard, Pen Tablet, Post-it note UI
  • Task: Off-campus Housing Web Site
    • Gave six pages of interview data
  • Findings
  • forgot “invisible” steps: underlining, button pressing
  • found keyboard confusing

The Designers’ Outpost: Collaborative Web Design

design evolution of outpost12

I N T E R A C T I O N S

Design Evolution of Outpost

PAPER PROTOTYPE

PAPER AND PIXELS

INTERACTIVE WALL

  • DESK TOO SMALL!
  • maximum 50 notes
  • wall is a better scale

The Designers’ Outpost: Collaborative Web Design

design evolution of outpost13

I N T E R A C T I O N S

Design Evolution of Outpost

PAPER PROTOTYPE

PAPER AND PIXELS

INTERACTIVE WALL

The Designers’ Outpost: Collaborative Web Design

hardware architecture

I N F R A S T R U C T U R E

Hardware Architecture

Touch sensitive SMART board augmented with two digital cameras

The Designers’ Outpost: Collaborative Web Design

video
Video

The Designers’ Outpost: Collaborative Web Design

interaction techniques

I N T E R A C T I O N S

Interaction Techniques

INK

ADD

LINK

REMOVE

SAVE

MOVE

MENU

The Designers’ Outpost: Collaborative Web Design

physical tools
Physical Tools

PENS

MOVE TOOL

ERASER

The Designers’ Outpost: Collaborative Web Design

moving electronic content
Moving Electronic Content

The Designers’ Outpost: Collaborative Web Design

denim sketching web sites

I N T E R A C T I O N S

DENIM: Sketching Web Sites
  • Sketch-based web design application
  • Outpost hierarchies become DENIM web sites
    • for further site development

Above: Sitemap View

Right: Storyboard View

The Designers’ Outpost: Collaborative Web Design

we changed denim

I N T E R A C T I O N S

We Changed DENIM

The Designers’ Outpost: Collaborative Web Design

design study setup

S T U D Y + F I N D I N G S

Design Study Setup
  • 15 professional bay area designers
  • Five teams

The Designers’ Outpost: Collaborative Web Design

design study findings

S T U D Y + F I N D I N G S

Design Study Findings
  • Three phase process
    • Brainstorming
    • Top-level information architecture
    • Drilling down and annotating
  • Two working styles
    • Facilitator / gate keeper
    • Open board
  • Paper as personal input

The Designers’ Outpost: Collaborative Web Design

hardware architecture23

I N F R A S T R U C T U R E

Hardware Architecture

Rear Camera Vision (640x480, 7fps)

The Designers’ Outpost: Collaborative Web Design

hardware architecture24

I N F R A S T R U C T U R E

Hardware Architecture

note9.jpg

The Designers’ Outpost: Collaborative Web Design

software infrastructure

I N F R A S T R U C T U R E

Software Infrastructure
  • Split into two pieces, connected by sockets
  • Vision in C++
    • Intel Computer Vision Library
    • CMU Firewire Driver
    • Realtime (~7fps) performance
  • Interface in Java, using SATIN

The Designers’ Outpost: Collaborative Web Design

sensing paradigms

I N F R A S T R U C T U R E

Sensing Paradigms
  • At least one object needs to be smart
    • pen, paper, or surface
  • Surface augmentation best enables informal document use
    • good for notes
  • Tool augmentation best forincluded objects
    • pens, move tool, eraser

The Designers’ Outpost: Collaborative Web Design

design history
Design History
  • Access earlier states
    • For exploring options
    • For education
  • Fluid Interface
  • Visual Timeline

The Designers’ Outpost: Collaborative Web Design

related work visual history
Related Work: Visual History

The Designers’ Outpost: Collaborative Web Design

main timeline close up
Main Timeline close-up
  • Visual Thumbnails
  • Branches

The Designers’ Outpost: Collaborative Web Design

main timeline
Main Timeline

The Designers’ Outpost: Collaborative Web Design

synopsis view
Synopsis View

The Designers’ Outpost: Collaborative Web Design

design study
Design Study
  • 6 professional designers
  • Physical/Electronic in Cycles
  • View All confusing

The Designers’ Outpost: Collaborative Web Design

summary and current work

S U M M A R Y

Summary and Current Work
  • Outpost supports, enhances current information architecture practices
  • Task oriented tangible UI
  • Brings vision to real world application
  • Versioning, capture essential
  • Support for distributed teams
    • Both on laptops and at boards

The Designers’ Outpost: Collaborative Web Design

papers and videos available at http guir berkeley edu outpost

The Designers’ Outpost

Papers and videos available at:http://guir.berkeley.edu/outpost

Scott KlemmerMark Newman

Michael Thomsen

James Landay

31 January 2002

IUA, Universitat Pompeu Fabra

Barcelona, España

slide35

Yellow - the color of alert, of highlighting - and a square, meant to contain a thought, a reminder. Like hypertext, they are a wayof making associations and combining them.

- Paola Antonelli, Museum of Modern Art Curator, 1999. Nominating the 3M Post-It note for a design award.