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 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 s + 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