DESIGN PATTERNS - LukeW · 4 Design Patterns Conversation Bill Scott Former Curator, Yahoo! Design...
Transcript of DESIGN PATTERNS - LukeW · 4 Design Patterns Conversation Bill Scott Former Curator, Yahoo! Design...
![Page 1: DESIGN PATTERNS - LukeW · 4 Design Patterns Conversation Bill Scott Former Curator, Yahoo! Design Pattern Library Jenifer Tidwell Author, Designing Interfaces Curator, UI Patterns](https://reader031.fdocuments.in/reader031/viewer/2022022709/5beab64709d3f260758c23a2/html5/thumbnails/1.jpg)
1
DESIGN PATTERNSDEFINING AND SHARING WEB DESIGNLANGUAGES
LUKE WROBLEWSKISOUTH BY SOUTHWEST, 2007
![Page 2: DESIGN PATTERNS - LukeW · 4 Design Patterns Conversation Bill Scott Former Curator, Yahoo! Design Pattern Library Jenifer Tidwell Author, Designing Interfaces Curator, UI Patterns](https://reader031.fdocuments.in/reader031/viewer/2022022709/5beab64709d3f260758c23a2/html5/thumbnails/2.jpg)
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
![Page 3: DESIGN PATTERNS - LukeW · 4 Design Patterns Conversation Bill Scott Former Curator, Yahoo! Design Pattern Library Jenifer Tidwell Author, Designing Interfaces Curator, UI Patterns](https://reader031.fdocuments.in/reader031/viewer/2022022709/5beab64709d3f260758c23a2/html5/thumbnails/3.jpg)
3
WHY DESIGNPATTERNS?
SHARED LANGUAGE
PATTERNRECOGNITION
![Page 4: DESIGN PATTERNS - LukeW · 4 Design Patterns Conversation Bill Scott Former Curator, Yahoo! Design Pattern Library Jenifer Tidwell Author, Designing Interfaces Curator, UI Patterns](https://reader031.fdocuments.in/reader031/viewer/2022022709/5beab64709d3f260758c23a2/html5/thumbnails/4.jpg)
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
![Page 5: DESIGN PATTERNS - LukeW · 4 Design Patterns Conversation Bill Scott Former Curator, Yahoo! Design Pattern Library Jenifer Tidwell Author, Designing Interfaces Curator, UI Patterns](https://reader031.fdocuments.in/reader031/viewer/2022022709/5beab64709d3f260758c23a2/html5/thumbnails/5.jpg)
5
http://developer.yahoo.com/ypatterns/
![Page 6: DESIGN PATTERNS - LukeW · 4 Design Patterns Conversation Bill Scott Former Curator, Yahoo! Design Pattern Library Jenifer Tidwell Author, Designing Interfaces Curator, UI Patterns](https://reader031.fdocuments.in/reader031/viewer/2022022709/5beab64709d3f260758c23a2/html5/thumbnails/6.jpg)
6
http://designinginterfaces.com/
![Page 7: DESIGN PATTERNS - LukeW · 4 Design Patterns Conversation Bill Scott Former Curator, Yahoo! Design Pattern Library Jenifer Tidwell Author, Designing Interfaces Curator, UI Patterns](https://reader031.fdocuments.in/reader031/viewer/2022022709/5beab64709d3f260758c23a2/html5/thumbnails/7.jpg)
7
http://www.welie.com/patterns/
![Page 8: DESIGN PATTERNS - LukeW · 4 Design Patterns Conversation Bill Scott Former Curator, Yahoo! Design Pattern Library Jenifer Tidwell Author, Designing Interfaces Curator, UI Patterns](https://reader031.fdocuments.in/reader031/viewer/2022022709/5beab64709d3f260758c23a2/html5/thumbnails/8.jpg)
8
eBay Pattern Engine
![Page 9: DESIGN PATTERNS - LukeW · 4 Design Patterns Conversation Bill Scott Former Curator, Yahoo! Design Pattern Library Jenifer Tidwell Author, Designing Interfaces Curator, UI Patterns](https://reader031.fdocuments.in/reader031/viewer/2022022709/5beab64709d3f260758c23a2/html5/thumbnails/9.jpg)
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?
![Page 10: DESIGN PATTERNS - LukeW · 4 Design Patterns Conversation Bill Scott Former Curator, Yahoo! Design Pattern Library Jenifer Tidwell Author, Designing Interfaces Curator, UI Patterns](https://reader031.fdocuments.in/reader031/viewer/2022022709/5beab64709d3f260758c23a2/html5/thumbnails/10.jpg)
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
![Page 11: DESIGN PATTERNS - LukeW · 4 Design Patterns Conversation Bill Scott Former Curator, Yahoo! Design Pattern Library Jenifer Tidwell Author, Designing Interfaces Curator, UI Patterns](https://reader031.fdocuments.in/reader031/viewer/2022022709/5beab64709d3f260758c23a2/html5/thumbnails/11.jpg)
11BILL SCOTT, DESIGNING FOR AJAX
![Page 12: DESIGN PATTERNS - LukeW · 4 Design Patterns Conversation Bill Scott Former Curator, Yahoo! Design Pattern Library Jenifer Tidwell Author, Designing Interfaces Curator, UI Patterns](https://reader031.fdocuments.in/reader031/viewer/2022022709/5beab64709d3f260758c23a2/html5/thumbnails/12.jpg)
12BILL SCOTT, DESIGNING FOR AJAX
![Page 13: DESIGN PATTERNS - LukeW · 4 Design Patterns Conversation Bill Scott Former Curator, Yahoo! Design Pattern Library Jenifer Tidwell Author, Designing Interfaces Curator, UI Patterns](https://reader031.fdocuments.in/reader031/viewer/2022022709/5beab64709d3f260758c23a2/html5/thumbnails/13.jpg)
13BILL SCOTT, DESIGNING FOR AJAX
![Page 14: DESIGN PATTERNS - LukeW · 4 Design Patterns Conversation Bill Scott Former Curator, Yahoo! Design Pattern Library Jenifer Tidwell Author, Designing Interfaces Curator, UI Patterns](https://reader031.fdocuments.in/reader031/viewer/2022022709/5beab64709d3f260758c23a2/html5/thumbnails/14.jpg)
14BILL SCOTT, DESIGNING FOR AJAX
![Page 15: DESIGN PATTERNS - LukeW · 4 Design Patterns Conversation Bill Scott Former Curator, Yahoo! Design Pattern Library Jenifer Tidwell Author, Designing Interfaces Curator, UI Patterns](https://reader031.fdocuments.in/reader031/viewer/2022022709/5beab64709d3f260758c23a2/html5/thumbnails/15.jpg)
15
SCOPE OF DESIGN PATTERNS
![Page 16: DESIGN PATTERNS - LukeW · 4 Design Patterns Conversation Bill Scott Former Curator, Yahoo! Design Pattern Library Jenifer Tidwell Author, Designing Interfaces Curator, UI Patterns](https://reader031.fdocuments.in/reader031/viewer/2022022709/5beab64709d3f260758c23a2/html5/thumbnails/16.jpg)
16
SAP PATTERN CONCEPT
http://www.sapdesignguild.org/editions/edition8/patterns.asp
![Page 17: DESIGN PATTERNS - LukeW · 4 Design Patterns Conversation Bill Scott Former Curator, Yahoo! Design Pattern Library Jenifer Tidwell Author, Designing Interfaces Curator, UI Patterns](https://reader031.fdocuments.in/reader031/viewer/2022022709/5beab64709d3f260758c23a2/html5/thumbnails/17.jpg)
17
![Page 18: DESIGN PATTERNS - LukeW · 4 Design Patterns Conversation Bill Scott Former Curator, Yahoo! Design Pattern Library Jenifer Tidwell Author, Designing Interfaces Curator, UI Patterns](https://reader031.fdocuments.in/reader031/viewer/2022022709/5beab64709d3f260758c23a2/html5/thumbnails/18.jpg)
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
![Page 19: DESIGN PATTERNS - LukeW · 4 Design Patterns Conversation Bill Scott Former Curator, Yahoo! Design Pattern Library Jenifer Tidwell Author, Designing Interfaces Curator, UI Patterns](https://reader031.fdocuments.in/reader031/viewer/2022022709/5beab64709d3f260758c23a2/html5/thumbnails/19.jpg)
19
HOW ARE DESIGNPATTERNS USED?
STYLE GUIDEREPLACEMENTS
SHARING BESTPRACTICES
![Page 20: DESIGN PATTERNS - LukeW · 4 Design Patterns Conversation Bill Scott Former Curator, Yahoo! Design Pattern Library Jenifer Tidwell Author, Designing Interfaces Curator, UI Patterns](https://reader031.fdocuments.in/reader031/viewer/2022022709/5beab64709d3f260758c23a2/html5/thumbnails/20.jpg)
20
WEB STYLE GUIDES
![Page 21: DESIGN PATTERNS - LukeW · 4 Design Patterns Conversation Bill Scott Former Curator, Yahoo! Design Pattern Library Jenifer Tidwell Author, Designing Interfaces Curator, UI Patterns](https://reader031.fdocuments.in/reader031/viewer/2022022709/5beab64709d3f260758c23a2/html5/thumbnails/21.jpg)
21
PATTERN LIBRARIES
![Page 22: DESIGN PATTERNS - LukeW · 4 Design Patterns Conversation Bill Scott Former Curator, Yahoo! Design Pattern Library Jenifer Tidwell Author, Designing Interfaces Curator, UI Patterns](https://reader031.fdocuments.in/reader031/viewer/2022022709/5beab64709d3f260758c23a2/html5/thumbnails/22.jpg)
22
TOO MUCH?
![Page 23: DESIGN PATTERNS - LukeW · 4 Design Patterns Conversation Bill Scott Former Curator, Yahoo! Design Pattern Library Jenifer Tidwell Author, Designing Interfaces Curator, UI Patterns](https://reader031.fdocuments.in/reader031/viewer/2022022709/5beab64709d3f260758c23a2/html5/thumbnails/23.jpg)
23
DOES IT WORKFOR CLIENTS?
FOCUS ONSOLUTIONS NOTRULES
ENCOURAGES GOODBEHAVIOR
REUSABLE
![Page 24: DESIGN PATTERNS - LukeW · 4 Design Patterns Conversation Bill Scott Former Curator, Yahoo! Design Pattern Library Jenifer Tidwell Author, Designing Interfaces Curator, UI Patterns](https://reader031.fdocuments.in/reader031/viewer/2022022709/5beab64709d3f260758c23a2/html5/thumbnails/24.jpg)
24
SHARING BEST PRACTICES
![Page 25: DESIGN PATTERNS - LukeW · 4 Design Patterns Conversation Bill Scott Former Curator, Yahoo! Design Pattern Library Jenifer Tidwell Author, Designing Interfaces Curator, UI Patterns](https://reader031.fdocuments.in/reader031/viewer/2022022709/5beab64709d3f260758c23a2/html5/thumbnails/25.jpg)
25
USER-CENTEREDGOALS
DESIGNCONSTRAINTS
RELATED PATTERNS
FINDING THERIGHT PATTERN…
![Page 26: DESIGN PATTERNS - LukeW · 4 Design Patterns Conversation Bill Scott Former Curator, Yahoo! Design Pattern Library Jenifer Tidwell Author, Designing Interfaces Curator, UI Patterns](https://reader031.fdocuments.in/reader031/viewer/2022022709/5beab64709d3f260758c23a2/html5/thumbnails/26.jpg)
26
USER-CENTEREDGOALS
DESIGNCONSTRAINTS
RELATED PATTERNS
BILL SCOTT, MIND MAPPING PATTERNS
![Page 27: DESIGN PATTERNS - LukeW · 4 Design Patterns Conversation Bill Scott Former Curator, Yahoo! Design Pattern Library Jenifer Tidwell Author, Designing Interfaces Curator, UI Patterns](https://reader031.fdocuments.in/reader031/viewer/2022022709/5beab64709d3f260758c23a2/html5/thumbnails/27.jpg)
27
TOP, RIGHT or LEFT ALIGNEDFORM LABELS?
![Page 28: DESIGN PATTERNS - LukeW · 4 Design Patterns Conversation Bill Scott Former Curator, Yahoo! Design Pattern Library Jenifer Tidwell Author, Designing Interfaces Curator, UI Patterns](https://reader031.fdocuments.in/reader031/viewer/2022022709/5beab64709d3f260758c23a2/html5/thumbnails/28.jpg)
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
![Page 29: DESIGN PATTERNS - LukeW · 4 Design Patterns Conversation Bill Scott Former Curator, Yahoo! Design Pattern Library Jenifer Tidwell Author, Designing Interfaces Curator, UI Patterns](https://reader031.fdocuments.in/reader031/viewer/2022022709/5beab64709d3f260758c23a2/html5/thumbnails/29.jpg)
29
Top-aligned Labels
eBay Express
![Page 30: DESIGN PATTERNS - LukeW · 4 Design Patterns Conversation Bill Scott Former Curator, Yahoo! Design Pattern Library Jenifer Tidwell Author, Designing Interfaces Curator, UI Patterns](https://reader031.fdocuments.in/reader031/viewer/2022022709/5beab64709d3f260758c23a2/html5/thumbnails/30.jpg)
30
Right Aligned Labels
• Clear associationbetween label andfield
• Requires less verticalspace
• More difficult to justscan labels due toleft rag
• Fast completiontimes
![Page 31: DESIGN PATTERNS - LukeW · 4 Design Patterns Conversation Bill Scott Former Curator, Yahoo! Design Pattern Library Jenifer Tidwell Author, Designing Interfaces Curator, UI Patterns](https://reader031.fdocuments.in/reader031/viewer/2022022709/5beab64709d3f260758c23a2/html5/thumbnails/31.jpg)
31
Right-aligned labels
Basecamp, 37Signals
![Page 32: DESIGN PATTERNS - LukeW · 4 Design Patterns Conversation Bill Scott Former Curator, Yahoo! Design Pattern Library Jenifer Tidwell Author, Designing Interfaces Curator, UI Patterns](https://reader031.fdocuments.in/reader031/viewer/2022022709/5beab64709d3f260758c23a2/html5/thumbnails/32.jpg)
32
Left Aligned Labels
• When data required isunfamiliar
• Enables labelscanning
• Less clear associationbetween label andfield
• Requires less verticalspace
• Changing label lengthmay impair layout
![Page 33: DESIGN PATTERNS - LukeW · 4 Design Patterns Conversation Bill Scott Former Curator, Yahoo! Design Pattern Library Jenifer Tidwell Author, Designing Interfaces Curator, UI Patterns](https://reader031.fdocuments.in/reader031/viewer/2022022709/5beab64709d3f260758c23a2/html5/thumbnails/33.jpg)
33
Left-aligned labels
Ad Connections
![Page 34: DESIGN PATTERNS - LukeW · 4 Design Patterns Conversation Bill Scott Former Curator, Yahoo! Design Pattern Library Jenifer Tidwell Author, Designing Interfaces Curator, UI Patterns](https://reader031.fdocuments.in/reader031/viewer/2022022709/5beab64709d3f260758c23a2/html5/thumbnails/34.jpg)
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
![Page 35: DESIGN PATTERNS - LukeW · 4 Design Patterns Conversation Bill Scott Former Curator, Yahoo! Design Pattern Library Jenifer Tidwell Author, Designing Interfaces Curator, UI Patterns](https://reader031.fdocuments.in/reader031/viewer/2022022709/5beab64709d3f260758c23a2/html5/thumbnails/35.jpg)
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
![Page 36: DESIGN PATTERNS - LukeW · 4 Design Patterns Conversation Bill Scott Former Curator, Yahoo! Design Pattern Library Jenifer Tidwell Author, Designing Interfaces Curator, UI Patterns](https://reader031.fdocuments.in/reader031/viewer/2022022709/5beab64709d3f260758c23a2/html5/thumbnails/36.jpg)
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
![Page 37: DESIGN PATTERNS - LukeW · 4 Design Patterns Conversation Bill Scott Former Curator, Yahoo! Design Pattern Library Jenifer Tidwell Author, Designing Interfaces Curator, UI Patterns](https://reader031.fdocuments.in/reader031/viewer/2022022709/5beab64709d3f260758c23a2/html5/thumbnails/37.jpg)
37
• Design Patterns asWeb Services
• Design Patternsintegrated into toolkits
• Design Pattern LibraryIntegration
IN THE FUTURE…
![Page 38: DESIGN PATTERNS - LukeW · 4 Design Patterns Conversation Bill Scott Former Curator, Yahoo! Design Pattern Library Jenifer Tidwell Author, Designing Interfaces Curator, UI Patterns](https://reader031.fdocuments.in/reader031/viewer/2022022709/5beab64709d3f260758c23a2/html5/thumbnails/38.jpg)
38
For more information…
• Functioning Form• www.lukew.com/ff/
• Yahoo! Design Patterns• developer.yahoo.com/ypatterns
• Drop me a note• [email protected]