Design Patterns Lw
-
Upload
interactionpatternsorg -
Category
Technology
-
view
120 -
download
2
description
Transcript of Design Patterns Lw
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• [email protected]