Upload
raya-anderson
View
29
Download
1
Tags:
Embed Size (px)
DESCRIPTION
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.) - PowerPoint PPT Presentation
Citation preview
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
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
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
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