1

DESIGN PATTERNSDEFINING AND SHARING WEB DESIGNLANGUAGES

LUKE WROBLEWSKISOUTH BY SOUTHWEST, 2007

2

Luke Wroblewski

Yahoo! Inc.• Principal Designer, Social Media

LukeW Interface Designs• Principal & Founder• Product design & strategy services

Author• Site-Seeing: A Visual Approach to Web Usability

(Wiley & Sons)• Functioning Form: Web applications, product

strategy, & interface design articlesPreviously

• eBay Inc., Lead Designer• University of Illinois, Instructor• NCSA, Senior Designer

http://www.lukew.com

3

WHY DESIGNPATTERNS?

SHARED LANGUAGE

PATTERNRECOGNITION

4

Design Patterns Conversation

Bill ScottFormer Curator, Yahoo!Design Pattern Library

Jenifer TidwellAuthor, Designing InterfacesCurator, UI Patterns andTechniques

Martijn van WelieCurator, Patterns inInteraction Design

James ReffellFormer Curator, eBayPattern Engine

http://www.lukew.com/ff/entry.asp?347

Luke WroblewskiArchitect, eBay PatternEngine

5

http://developer.yahoo.com/ypatterns/

6

http://designinginterfaces.com/

7

http://www.welie.com/patterns/

8

eBay Pattern Engine

9

• Repeatable design solutionsto common problems

• Work “positively” forspecific problems in specificcontexts

• Capture best practices thatsolve real user needs

• Between principles &guidelines

• A design vocabulary

WHAT ARE DESIGNPATTERNS?

10

Drag and Drop. Drag and Drop Modules. In Page Editing. In PageCustom Editing. Direct State Editing. Grid Cell Editing. Inline CustomEditing. Inline Tag Editing. Popup Custom Editing. Slide-out Custom

Editing. Inline Text Editing. Persistent Portals. Inline Reordering.Indication. Busy Indication. Cursor Busy. In Context Busy. In ContextProgress. Inline Status. Auto Complete. Balloon Error Tip. Deferred

Content Loading. Dynamic Goal. Narrowing Choices. Refining Search.Live Search. Dynamic Filter. Invitation. Cursor Invitation. Drop

Invitation. Tool Tip Invitation. Hover Invitation. Detail Zoom. OpacityFocus. Configurable Module - Faceplate. Configurable Module - Flip It.

Configurable Module - Inline Configure. Configurable Module - SlideOut Drawer. Slide Out. Flip. Opacity Fade. Endless Scrolling.

Expandable Paging Boundary. Fresh Content. Hover Detail. In PlaceDrill Down. Inline Assistant. Inline Validation. Validate Then Suggest.On Demand Refresh. Periodic Refresh. Resizable Modules. Scrolling

Modules. Auto Save. In Context Tools. Remembered Collection.Remembered Preferences. Auto Form Fill. Rating an Object.

Transition. Brighten Transition. Cross Fade Transition. Dim Transition.Expand Transition. Fade In Transition. Fade Out Transition. Flip

Transition. Move Transition. Self-Healing Transition. CollapseTransition. Slide Transition. Rich Internet Object. Available. Selected.

BILL SCOTT, DESIGNING FOR AJAX

11BILL SCOTT, DESIGNING FOR AJAX

12BILL SCOTT, DESIGNING FOR AJAX

13BILL SCOTT, DESIGNING FOR AJAX

14BILL SCOTT, DESIGNING FOR AJAX

15

SCOPE OF DESIGN PATTERNS

16

SAP PATTERN CONCEPT

http://www.sapdesignguild.org/editions/edition8/patterns.asp

17

18

• Title• Problem (situation)• Use When (constraints)• Solution• Why (rationale)• How (to apply)• Examples• Related Patterns• Accessibility• Code Samples

WHAT’S IN ADESIGN PATTERN?

Gathered from a survey of popular Web design pattern resources: VanDuyne, Landay, Welie, Tidwell, Lasko

19

HOW ARE DESIGNPATTERNS USED?

STYLE GUIDEREPLACEMENTS

SHARING BESTPRACTICES

20

WEB STYLE GUIDES

21

PATTERN LIBRARIES

22

TOO MUCH?

23

DOES IT WORKFOR CLIENTS?

FOCUS ONSOLUTIONS NOTRULES

ENCOURAGES GOODBEHAVIOR

REUSABLE

24

SHARING BEST PRACTICES

25

USER-CENTEREDGOALS

DESIGNCONSTRAINTS

RELATED PATTERNS

FINDING THERIGHT PATTERN…

26

USER-CENTEREDGOALS

DESIGNCONSTRAINTS

RELATED PATTERNS

BILL SCOTT, MIND MAPPING PATTERNS

27

TOP, RIGHT or LEFT ALIGNEDFORM LABELS?

28

Top Aligned Labels

• When data beingcollected is familiar

• Minimize time tocompletion

• Require more verticalspace

• Spacing or contrast isvital to enableefficient scanning

• Flexibility forlocalization andcomplex inputs

29

Top-aligned Labels

eBay Express

30

Right Aligned Labels

• Clear associationbetween label andfield

• Requires less verticalspace

• More difficult to justscan labels due toleft rag

• Fast completiontimes

31

Right-aligned labels

Basecamp, 37Signals

32

Left Aligned Labels

• When data required isunfamiliar

• Enables labelscanning

• Less clear associationbetween label andfield

• Requires less verticalspace

• Changing label lengthmay impair layout

33

Left-aligned labels

Ad Connections

34

Eye-tracking Data

• July 2006 study by MatteoPenzo

• Left-aligned labels• Easily associated labels with

the proper input fields• Excessive distances between

labels inputs forced users totake more time

• Right-aligned labels• Reduced overall number of

fixations by nearly half• Form completion times were

cut nearly in half• Top-aligned labels

• Permitted users to captureboth labels & inputs with asingle eye movement’

• Fastest completion times

35

• For reducedcompletion times &familiar data input: topaligned

• When vertical screenspace is a constraint:right aligned

• For unfamiliar, oradvanced data entry:left aligned

BEST PRACTICE

36

USER• Provide Information:

want to register,make a purchase,etc.

• Finish Quickly:no one likes filling informs

DESIGNER• Maximize completion

rates• Gather known data:

name, address,credit card

• Use a minimumamount of verticalscreen real estate

CONSIDER: RIGHT-ALIGNED LABELS

37

• Design Patterns asWeb Services

• Design Patternsintegrated into toolkits

• Design Pattern LibraryIntegration

IN THE FUTURE…

38

For more information…

• Functioning Form• www.lukew.com/ff/

• Yahoo! Design Patterns• developer.yahoo.com/ypatterns

• Drop me a note• luke@lukew.com