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

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

• CS 376 Research Topics in HCI
• 11/01/2005
• Tony 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

• Designers 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
• Doesnt 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
Studys 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 Designers Outpost
• WebQuilt
• Generation of medium-fidelity prototypes

31
New Features in DENIM