1 / 31

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

DENIM: An Informal Web Site Design Tool Inspired by Observations of Practice. CS 376 – Research Topics in HCI 11/01/2005 Tony Tulathimutte. Initial Inquiry. Comparing methods of web design in early stages Pen-and-paper techniques vs. Web design applications (Dreamweaver, Fusion, etc.)

arlo
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related