Transcript DENIM: An Informal Web Site Design Tool Inspired by

DENIM:
An Informal Web Site Design Tool Inspired by
Observations of Practice
CS 376 – Research Topics in HCI
11/01/2005
Tony Tulathimutte
1
Initial Inquiry

Comparing methods of web design in
early stages


Pen-and-paper techniques vs. Web design
applications (Dreamweaver, Fusion, etc.)
Hypothesis: Informal design techniques
work best for early design


Ambiguous
Natural
2
Different Levels of
Representation



Site maps
Storyboards
Pages


Schematics
Mock-ups
3
Ethnographic Study

Interviewed 11 Web designers




Varying experience and background
Asked to walk the interviewers through
an entire project
Collected artifacts and documents
relating to the design
Findings were validated by participants
4
Web Design Specialization

Information design


Navigation design


Structuring related
information content
Designing means of
accessing information
around the structure
Information
Architecture

Combines the above two
5
Web Design Specialization

User interface design


Design of the navigation systems (i.e. IE)
Graphic Design

Color, images, typography, layout
6
Web Design Specialization

Information design
was almost always
done before graphical
design

Exception:
entertainmentoriented site with print
background
7
Case Study: CAD Tools Suite

Designer’s process





Studied background materials, previous
versions + related software
~20 sketches on paper
Intentionally undetailed, bland layout
Visual design polished before coding begins
Sketches are abandoned once coding
begins
8
Generalized Web Design
Process


Geared toward presentation to client
Phases:




Discovery
Design Exploration
Design Refinement
Production
9
Discovery


Determine and clarify scope of the
project
Consider the desires of the client


Interviewing, observation, testing,
surveying
Perform competitive analysis
10
Design Exploration



Solutions addressing pertinent problems
are generated
Information architecture is established
Designers produce multiple ideas
11
Design Refinement




Iteration
Precise graphical + layout decisions
solidified
General templates produced to dictate
the design of different classes of pages
within the site
User testing w/ interactive prototype
12
Production


Guidelines, specifications, all prototypes
sent to implementers
All creative material established
13
Role of Collaboration



All designers worked in teams
Common group activities:
brainstorming, idea assessment,
integration of work
Occurs most frequently at the beginning
and end of milestones
14
Design Artifacts








Site Maps
Storyboards
Schematics
Mock-ups
Prototypes
Specifications and Guidelines
Presentations
Written Documents
15
Site Maps
16
Site Maps





Diagrams the structure of a site
Typically only used internally
Design often evolves over course of
project
Used most heavily by information
architects
No specific detail
17
Storyboards




Represents a specific interaction
sequence
Characterizes some primary usage of
the site
Limited in detail
Also used internally

Adapted into “walkthroughs” for clients
18
Schematics, Mock-ups,
Prototypes





Represents the content of a particular page
Schematics = more iconic than literal
Used by information architects rather than
graphic designers
Shown to clients with deliberate visual
ambiguity
Mock-ups and Prototypes are hi-fi versions of
schematics, meant to be taken literally

Prototypes are interactive
19
Presentations





Significant milestone
“A design process in itself”
Walkthrough was most commonly used
structuring technique
Doesn’t necessarily relate to actual
website design
Supplemented with formal emails +
concept briefs throughout the process
20
Design Tools

Techniques used to produce the
artifacts



Sketching
Design War Rooms
Computer Based Tools
21
Sketching


Used to rapidly draft early ideas in
discovery phase
All designers used sketching



Extent varied by designer and project
Only used internally
Sketches converted to electronic form
from scratch, then abandoned
22
Design War Rooms


Amounts to “collaborative sketching”
Organizing ideas into groups



Post-it notes on walls
Paper valued for its portability, ease of
use, spatial associations, low cost
Large surfaces allow for large-scale
organization
23
Computer-Based Tools





Photoshop, Illustrator, Director, Word
Earlier deadlines encouraged adoption of
these tools
“Hybrid” designers prefer graphically-oriented
tools; UI designers used Word and Visio
Designers attached to their tools of choice
Many programs often used


Makes synchronization more difficult
Disrupts flow of activity
24
Study’s Implications for Web
Tool Design

Use Informal UI



Support transitions into later phases
Manage history and variations
Integrate with paper
25
DENIM: Integrating Levels of
Representation




Pen-based system
Supports and encourages rapid
sketching and organization at high
levels of abstraction
Informal, intended only for use by
developers
Semantic zooming
26
Semantic Zooming

Five Levels





Overview
Site map
Storyboard
Page
Detail
27
Other Features

Built over SATIN




Manual + Keyboard Text Input
Text Field Widgets
Creating Links with Arrows


Gesture Recognition
Navigational + Organizational
Run Mode
28
DENIM Usability Study



Supported both architecture- and interactionoriented approaches
Problems with requiring zoom to navigate
around the site design
Feedback:



Scored only above-average on ease-of-use
Scored relatively low on ability to communicate
with clients
Did well otherwise
29
Future Work on DENIM





Scenarios
User-created widgets
The Designer’s Outpost
WebQuilt
Generation of medium-fidelity
prototypes
30
New Features in DENIM
31