1

DENIM: An Informal Web Site Design Tool Inspired by Observations of Practice

CS 376 – Research Topics in HCI

11/01/2005Tony Tulathimutte

2

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

3

Different Levels of Representation

Site maps Storyboards Pages

Schematics Mock-ups

4

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

5

Web Design Specialization

Information design Structuring related

information content

Navigation design Designing means of

accessing information around the structure

Information Architecture

Combines the above two

6

Web Design Specialization

User interface design Design of the navigation systems (i.e.

IE)

Graphic Design Color, images, typography, layout

7

Web Design Specialization Information design

was almost always done before graphical design Exception:

entertainment-oriented site with print background

8

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

9

Generalized Web Design Process

Geared toward presentation to client

Phases: Discovery Design Exploration Design Refinement Production

10

Discovery

Determine and clarify scope of the project

Consider the desires of the client Interviewing, observation, testing,

surveying Perform competitive analysis

11

Design Exploration

Solutions addressing pertinent problems are generated

Information architecture is established

Designers produce multiple ideas

12

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

13

Production Guidelines, specifications, all

prototypes sent to implementers All creative material established

14

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

15

Design Artifacts Site Maps Storyboards Schematics Mock-ups Prototypes Specifications and Guidelines Presentations Written Documents

16

Site Maps

17

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

18

Storyboards

Represents a specific interaction sequence

Characterizes some primary usage of the site

Limited in detail Also used internally

Adapted into “walkthroughs” for clients

19

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

20

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

21

Design Tools

Techniques used to produce the artifacts Sketching Design War Rooms Computer Based Tools

22

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

23

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

24

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

25

Study’s Implications for Web Tool Design

Use Informal UI Support transitions into later phases

Manage history and variations Integrate with paper

26

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

27

Semantic Zooming

Five Levels Overview Site map Storyboard Page Detail

28

Other Features

Built over SATIN Gesture Recognition

Manual + Keyboard Text Input Text Field Widgets Creating Links with Arrows

Navigational + Organizational Run Mode

29

DENIM Usability Study Supported both architecture- and

interaction-oriented 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

30

Future Work on DENIM

Scenarios User-created widgets The Designer’s Outpost WebQuilt Generation of medium-fidelity

prototypes

31

New Features in DENIM