DENIM: An Informal Web Site Design Tool Inspired by Observations of Practice - PowerPoint PPT Presentation

Loading...

PPT – DENIM: An Informal Web Site Design Tool Inspired by Observations of Practice PowerPoint presentation | free to download - id: 21fd9-YTBiN



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

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

Description:

Graphic Design. Color, images, typography, layout. 7. Web Design Specialization ... Used by information architects rather than graphic designers ... – PowerPoint PPT presentation

Number of Views:87
Avg rating:3.0/5.0
Slides: 32
Provided by: tonytula
Learn more at: http://hci.stanford.edu
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: 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
About PowerShow.com