using design patterns to create cross platform web sites l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Using Design Patterns to Create Cross-Platform Web Sites PowerPoint Presentation
Download Presentation
Using Design Patterns to Create Cross-Platform Web Sites

Loading in 2 Seconds...

play fullscreen
1 / 39

Using Design Patterns to Create Cross-Platform Web Sites - PowerPoint PPT Presentation


  • 566 Views
  • Uploaded on

Using Design Patterns to Create Cross-Platform Web Sites James A. Landay University of Washington Intel Research Seattle With Doug van Duyne, Jason Hong, & Jimmy Lin @ UW Industrial Affiliates Meeting 2/26/2004 I-Land by Streitz, et. al. Design in the Ubiquitous Computing Era

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Using Design Patterns to Create Cross-Platform Web Sites' - johana


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
using design patterns to create cross platform web sites

Using Design Patterns to Create Cross-Platform Web Sites

James A. Landay

University of Washington

Intel Research Seattle

With Doug van Duyne, Jason Hong, & Jimmy Lin

@ UW Industrial Affiliates Meeting 2/26/2004

design in the ubiquitous computing era

I-Land by Streitz, et. al.

Design in the Ubiquitous Computing Era
  • Future computing devices won’t have the same UI as current PCs
    • wide range of devices
      • small or embedded in environment
      • often w/ “alternative” I/O & w/o screens
      • information appliances
    • lots of devices per user
      • all working in concert
  • How does one design for this environment?
    • Prototyping tools
    • Design patterns
informal prototyping tools

Denim

Outpost

Shopping cart

Suede

Damask

Crossweaver

Informal Prototyping Tools
outline
Outline
  • Introduction
  • Web Design Patterns
  • Cross-device Web Design with Damask
design solutions
Design = Solutions
  • Design is about finding solutions
    • unfortunately, designers often reinvent
      • hard to know how thingswere done before
      • why things were done a certain way
      • how to reuse solutions
design patterns
Design Patterns
  • Design patterns communicate common design problems and solutions
    • first used in architecture [Alexander]
      • ex. How to create a beer hall where people socialize?
design patterns7
Design Patterns
  • Not too general & not too specific
    • use a solution “a million times over, without ever doing it the same way twice”
  • Design patterns are a shared language
    • a language for “building and planning towns, neighborhoods, houses, gardens, and rooms.”
    • ex. BEER HALL is part of a CENTER FOR PUBLIC LIFE…
    • ex. BEER HALL needs spaces for groups to be alone…
web design patterns
Web Design Patterns
  • Now used in Web design
  • Communicate design problems & solutions
    • how to create navigation bars for finding relevant content…
    • how to create a shopping cart that supports check out…
    • how to make sites where people return & buy…
navigation bar k2
NAVIGATION BAR (K2)
  • Problem: Customers need a structured, organized way of finding the most important parts of your Web site
navigation bar k210

First-level navigation

Link to home

Second-level navigation

NAVIGATION BAR (K2)
  • Solution
    • captures essence on how to solve problem
patterns support creativity
Patterns Support Creativity
  • Patterns come from successful examples
    • sites that are so successful that lots of users are familiar with their paradigms (e.g., Yahoo)
    • interaction techniques/metaphors that work well across many sites (e.g., shopping carts)
  • Not too general (principles) & not too specific (guidelines)
    • designer will specialize to their needs
  • Patterns let designers focus on the hard, unique problems to their design situation
    • every real design will have many of these
process funnel h1
PROCESS FUNNEL (H1)
  • Problem: Need a way to help people complete highly specific stepwise tasks
    • ex. Create a new account
    • ex. Fill out survey forms
    • ex. Check out
process funnel h114
PROCESS FUNNEL (H1)
  • What’s the same?
    • logo, layout, color, fonts
  • What’s different?
    • no tab rows
    • no impulse buys
    • only navigation on page takes you to next step
process funnel h115
PROCESS FUNNEL (H1)
  • Problem: What if users need extra help?
process funnel h1 related patterns
PROCESS FUNNEL (H1) Related Patterns

(A1) E-Commerce

(A10) Web Apps

(A11) Intranets

(H1) Process Funnel

(H8) Context-Sensitive Help

(I2) Above the Fold

(K12) Preventing Errors

(K5) High-Viz Action Buttons

(K13) Meaningful Error Messages

outline20
Outline
  • Introduction
  • Web Design Patterns
  • Cross-device Web Design with Damask
example problem design for multiple devices
Example ProblemDesign for Multiple Devices
  • Hard to design for variety of devices
  • Use automatically generated UIs
    • results in UIs poorly optimized for device
    • last resort for users
  • Design each device-specific UI separately
    • rarely coordinated
    • tedious & time consuming
    • less time for prototyping
solution damask
SolutionDamask
  • Tool for designing multiple-device UIs
    • desktop web
    • cell phone
    • speech
  • Uses design patterns to retarget a device-specific UI to other devices
  • Compared to creating UI separately
    • at least same quality
    • more consistency
    • less design time
damask designing a user interface
Damask Designing a User Interface
  • Designer
    • sketches design
    • browses through patterns
    • merges device-specific pattern solution into design
damask designing a user interface26
Damask Designing a User Interface
  • Designer
    • sketches design
    • browses through patterns
    • merges device-specific pattern solution into design
damask designing a user interface27
Damask Designing a User Interface
  • Designer
    • sketches design
    • browses through patterns
    • merges device-specific pattern solution into design

Shopping cart

PC solution

damask designing a user interface28
Damask Designing a User Interface
  • Designer
    • sketches design
    • browses through patterns
    • merges device-specific pattern solution into design

Shopping cart

PC solution

damask designing a user interface29
Damask Designing a User Interface
  • Designer
    • sketches design
    • browses through patterns
    • merges device-specific pattern solution into design

Shopping cart

damask designing a user interface30
Damask Designing a User Interface
  • Designer customizes pattern instance to fit particular project
    • this creates another example of the pattern
    • tool keeps track of customizations to pattern instance

Shopping cart

damask retargeting a user interface
Damask Retargeting a User Interface
  • Designer picks another target device
    • tool instantiates pattern for target device, applies same customizationsto this instance
    • results in generated UI for target device
    • can tweak generated UI

Shopping cart

Cell-phone solution

damask retargeting a user interface32
Damask Retargeting a User Interface
  • Designer picks another target device
    • tool instantiates pattern for target device, applies same customizationsto this instance
    • results in generated UI for target device
    • can tweak generated UI

Shopping cart

damask retargeting a user interface33
Damask Retargeting a User Interface
  • Designer picks another target device
    • tool instantiates pattern for target device, applies same customizationsto this instance
    • results in generated UI for target device
    • can tweak generated UI

Shopping cart

damask more research issues
DamaskMore Research Issues
  • Creating patterns from previous designs
  • Retargeting part of design outside patterns
    • use model-based UI techniques
  • Showing relationships among device-specific UIs
    • sometimes want to apply changes globally & sometimes you don’t
  • Supporting multiple designers
    • especially tricky since design process in flux
design pre patterns for ubicomp
Design Pre-Patterns for Ubicomp
  • Can patterns actually lead design?
    • Pattern purists will say no – so let’s call ‘em pre-patterns
  • Can we find patterns from the most popular apps?
    • Mobile communication via cell phone
      • CONTEXT SENSISTIVE I/O (D6) – Use appropriate input & output modalities for current environment
        • e.g., in movie theater don’t use sound – use vibration/visual cues
        • e.g., in a car use sound
  • Can we find patterns that are found across several different ubicomp (research) applications?
    • We identified 45 ubicomp patterns & an evaluation with designers showed they helped improve designs
conclusions
Conclusions
  • Design patterns encapsulate design knowledge
  • Damask: a tool for designing, prototyping multiple-device UIs
    • uses design patterns to retarget one device-specific UI to other devices
  • Ubicomp design pre-patterns
    • attempt to lead design practice through research
  • Next steps
    • evaluate the success of designers using the DOS
    • finish building & evaluating Damask
    • continue exploring ubicomp pre-patterns
using design patterns to create cross device web sites

Using Design Patterns to Create Cross-Device Web Sites

  • Thanks!
  • More information

http://guir.berkeley.edu/damask

http://designofsites.com

model based ui techniques

Concrete

Interface

Model-based UI Techniques
  • Forces designer to start with abstract widgets
    • designers think in terms of concrete widgets
  • Does not handle radically differently structured UIs well
    • use patterns to address this issue

Abstract Model

Specialized Application Model

Specialization

Translation

Device profile