“
Download
1 / 35

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


  • 290 Views
  • Updated 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.

Related searches for A Tangible Interface for Collaborative Web Site Design

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

P R A C T I C E

Physical? Virtual?

The Designers’ Outpost: Collaborative Web Design


Designers outpost l.jpg

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 l.jpg
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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg
Video

The Designers’ Outpost: Collaborative Web Design


Interaction techniques l.jpg

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 l.jpg
Physical Tools

PENS

MOVE TOOL

ERASER

The Designers’ Outpost: Collaborative Web Design


Moving electronic content l.jpg
Moving Electronic Content

The Designers’ Outpost: Collaborative Web Design


Denim sketching web sites l.jpg

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 l.jpg

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

We Changed DENIM

The Designers’ Outpost: Collaborative Web Design


Design study setup l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg
Design History

  • Access earlier states

    • For exploring options

    • For education

  • Fluid Interface

  • Visual Timeline

The Designers’ Outpost: Collaborative Web Design


Related work visual history l.jpg
Related Work: Visual History

The Designers’ Outpost: Collaborative Web Design


Main timeline close up l.jpg
Main Timeline close-up

  • Visual Thumbnails

  • Branches

The Designers’ Outpost: Collaborative Web Design


Main timeline l.jpg
Main Timeline

The Designers’ Outpost: Collaborative Web Design


Synopsis view l.jpg
Synopsis View

The Designers’ Outpost: Collaborative Web Design


Design study l.jpg
Design Study

  • 6 professional designers

  • Physical/Electronic in Cycles

  • View All confusing

The Designers’ Outpost: Collaborative Web Design


Summary and current work l.jpg

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 l.jpg

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 l.jpg

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.