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 • 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