DENIMA Sketching Tool for Prototyping

Web and Desktop UIs

Mark Newman and Jimmy LinGroup for User Interface Research

UC Berkeley

July 8, 1999

Background: SILKAn informal tool for designing GUIs

DENIM goalsReal, deployable systemSupport for web site designExpanded capabilitiesEven more informal than SILK

SILK

Web Design Study

Visited design firms 4 Design houses, 1 large internet company

“Ethnographically-inspired” interviews with designers

4 “UI” Designers, 3 “Graphic” Designers, 4 Hybrids

Interviews focused on specific projects, artifacts

“Take me through a recent project” Artifacts were collected where possible

Design Specialties Information design

structure, categories of information

Navigation design interaction with

information structure

Graphic design visual presentation of

information and navigation (color, typography, etc.)

NavigationDesign

InformationDesign

GraphicDesign

Design PhasesDiscovery

Design Exploration

Design Refinement

Production

Assemble information relevant to project

Explore alternative design approaches (information, navigation, and graphic)

Select one approach and iteratively refine it

Create prototypes and specifications

(Hand off to implementers)...

Design Phases and DENIM

Discovery

Design Exploration

Design Refinement

Production

info

rmatio

nd

esig

n navig

atio

nd

esig

n

gra

ph

icd

esig

n

DENIM

oth

er

tools

Focus of DENIM: Early phase information and navigation design

Design Implications

Designers collect and structure large amounts of information

Need support for information designDesigners produce intermediate artifacts

Focus on creation of artifacts appropriate to design phase

Designers sketch to rapidly explore design alternatives

A sketch-based tool will be helpful in early design

Expression more important than precision

DENIM

DENIM

Basic Sketching

DENIM

Semantic Zooming

DENIM: Semantic Zooming

Site Map view: many pages visible but little or no page-level detail

DENIM : Semantic Zooming

Storyboard view: several pages visible, navigation apparent, some page detail

DENIM : Semantic Zooming

Sketch view: single page, all detail visible

ToolsPan and zoomPencils

Generic pencil for sketching “Event pencils” for sketching arrows

associated with particular eventsRubber stamps

For inserting components Built-in components (e.g. buttons) can be

sketched

StoryboardingComposed of panelsArrows represent transitions

between panelsExample:

Storyboarding

Transition arrows also represent different event types

Supported: Right click Double click Timer Mouse over/off Animation

3 sec

1

Edit…Delete

ConditionalsFor describing transitions that

depend on state of widgetsOne panel per condition

Components

Used for custom widgets and reusable sequences of panels

Internally structured as storyboards

Can have named eventsStoryboard1 - DENIM

cancel cancel cancel

done

Using componentsPick up component’s rubber stampStamp component into panel or

background

Built-in components (buttons, etc.) can also be sketched

Questions?

Design Specialties

Information Architecture

encompasses info & navigation design, also focuses on content

User Interface Design

also includes testing and evaluation

InformationArchitecture

User InterfaceDesign

ConditionalsCan collapse panels into stack to

save space

1 of 2