Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist

Bill W. Scott, Y! Ajax Evangelist

[email protected]

Principles and Patterns for Designing Rich Internet Applications

Designing for Ajax

Designing for Ajax

Background• Games, research, science,

military, biz

• Apps, frameworks,widget sets

• Developer, designer

• Object-oriented background

• Software architect, user experience manager

• Yahoo! Ajax Evangelist, Yahoo! Patterns Curator

• http://looksgoodworkswell.com

2

Designing for Ajax

Ajax at Yahoo!

• Acquisition of Oddpost led to mission to evangelize Ajax goodness throughout Yahoo

• Summer 2005 - Ajax Evangelism Team Founded• Doug Crockford - JSON, Y! DHMTL Architect• Iain Lamb - Founder of Oddpost/Y!Mail Beta• Me

3

Designing for Ajax

Yahoo! Pattern Library Release

4

http://developer.yahoo.net/ypatterns/

Designing for Ajax

yuiblog.com

5

http://yuiblog.com

Designing for Ajax

Yahoo! Patterns Discussion Group

6

http://groups.yahoo.com/group/ydn-patterns/

Designing for Ajax

Current Set of Patterns

7

Breadcrumbs. Module Tabs. Navigation Tabs. Auto Complete. Pagination. Item Pagination. Search Pagination. Ratings and Reviews. Architecture of a Review.

Rating an Object. Writing a Review. Drag and Drop. Drag and Drop Modules.

Transition. Dim. Brighten. Cross Fade. Contract. Expand. Fade In. Fade Out. Move.

Self-Healing. Slide. Highlight. Invitation. Cursor Invitation. Drop Invitation. Tool Tip

Invitation. Hover Invitation. Links. Alphanumeric Links. Text Links.

Designing for Ajax

Rich Design Patterns

Drag and Drop. Drag and Drop Modules. In Page Editing. In Page Custom Editing. Direct State Editing. Grid Cell

Editing. Inline Custom Editing. 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 Context

Progress. Inline Status. Character Counter. 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. Opacity Focus. Configurable Module - Faceplate.

Configurable Module - Flip It. Configurable Module - Inline Configure. Configurable Module - Slide Out Drawer. Slide

Out. Flip. Opacity Fade. Endless Scrolling. Expandable Paging Boundary. Fresh Content. Hover Detail. In Place Drill 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.

Collapse Transition. Slide Transition. Rich Internet Object. Available. Selected. Identifiable Object.

8

Designing for Ajax

Y! Patterns as a Platform (Web 2.0)

9

PatternService

Yahoo! service responds with a JSON

representation of a pattern. Allows anyone to mashup the

patterns into a corporate pattern library

Corporate BrandedPattern Site(mashup)

Designing for Ajax

Yahoo! UI Library

10

Tree Auto Complete Slider

Calendar MenuWindowing

Animation

XHREvent

DOM

Drag & Drop

Designing for Ajax

Designing for Ajax

• RichnessWhat is richness?

• Ajax PatternsDNA of an Ajax Pattern

• Principles Principles for Ajax Design

11

Designing for Ajax 12

Richness

Designing for Ajax

Defining Richness: Web in 3D

• Interaction Dimension

• Data Dimension

• Presentation Dimension

13

Interaction

Data

Presentation

event

response

Designing for Ajax

Classic Web

• Interactioncourse-grained

• Dataloaded with the page orobtained via refresh

• Presentation:page-based updates

14

Interaction

Data

Presentation

page

Data

refresh boundary

Designing for Ajax

Server

HttpRequest

HttpResponseMy Profile

NameGender

Age

Edit

Joe SmithMale27

My Profile

NameGender

Age

Photo

Submit

Classic Web Illustrated

15

Server

HttpRequest

HttpResponse

Interaction Data Presentationevent response

browser

Designing for Ajax

Ajax = Just-in-Time. Immediacy.

16

Just-in-time data

Just-in-time presentation

Just-in-time logic

Designing for Ajax

Ajax Model - New & Improved!

• Now with Deeper Interaction!

• Now with Just-in-Time Data & Just-in-Time Logic!★ XMLHttpRequest (XHR) is

the secret sauce!

• Now with Richer Interface!

• All dimensions are closer

17

Interaction

Data

Presentation

Designing for Ajax

My Profile

NameGender

Age

Joe SmithMale27

Ajax Illustrated

18

XHRObject

Server

Save

Tim Jones

send()

onreadystatechange

Interaction Data Presentationevent

response

browser

Designing for Ajax

AJAX vs Ajax

• AJAX = Asynchronous JavaScript and XML• Strict definition is using XMLHttpRequest (XHR) to retrieve

XML within a web page

• Ajax = The set of technologies that allow web applications to provide rich interaction, just-in-time information and dynamic interfaces without required page refresh

• The Secret Sauce• Ajax = XHR + DHTML (HTML, CSS, JavaScript) + Rich

design

19

XHR

Designing for Ajax

Other Remote Scripting Techniques

• Hidden IFrame• <img> src• <script> src hack• CSS href hack• JS to faceless Java applets• JS to faceless Flash• NO CONTENT Response• Cookies

20

Designing for Ajax

Ajax Patterns

21

Designing for Ajax

Rich Design Patterns

Drag and Drop. Drag and Drop Modules. In Page Editing. In Page Custom Editing. Direct State Editing. Grid Cell Editing.

Inline Custom Editing. 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 Context Progress. Inline Status. Character Counter. 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. Opacity Focus. Configurable Module - Faceplate. Configurable Module - Flip It. Configurable Module - Inline Configure. Configurable Module -

Slide Out Drawer. Slide Out. Flip. Opacity Fade. Endless Scrolling. Expandable Paging Boundary. Fresh Content. Hover Detail. In Place Drill 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. Collapse Transition. Slide Transition. Rich Internet Object. Available.

Selected. Identifiable Object.

22

Designing for Ajax

• Make a request

• Return a response

• And do it asynchronously

23

But What Can XHR Do?

XHRObject

request

response

Designing for Ajax

Anatomy of a Pattern

• Ajax design patterns contain three steps• Trigger (event or timer)• Operation (Ajax, remote scripting)• Update (presentation)

24

Trigger Operation Update

Designing for Ajax

Trigger

• Every pattern starts with• a user event• a timer event

25

mouseout hover keypress keydown mousedown drop filter choices mouseup drag click mousedown select

focus blur resize move timeout

Trigger

Designing for Ajax

Operation

• Lookup I can get information when I need it• Persist I can save in real-time• Validate I can prevent errors early• Invoke I can make things happen now• Message I can communicate instantly

26

Ajax patterns open the door to immediacy

Operation

Designing for Ajax

Operation. Lookup

I can get information when I need itAuto Complete. Deferred Content Loading. Dynamic Goal. Narrowing Choices. Refining Search. Live Search. Dynamic Filter. Detail Zoom.

Endless Scrolling. Expandable Paging Boundary. Fresh Content. Hover Detail. In Place Drill Down. On Demand Refresh. Periodic Refresh.

Resizable Modules. Scrolling Modules. Auto Form Fill.

27

Trigger LookupOperation Update

Designing for Ajax

Operation. Persist

I can save in real-timeDrag and Drop Modules. In Page Editing. In Page Custom Editing. Direct State Editing. Grid Cell Editing. Inline Custom Editing. Inline Tag Editing.

Popup Custom Editing. Slide-out Custom Editing. Inline Text Editing. Inline Reordering. Auto Save. Remembered Collection. Remembered

Preferences. Rating an Object.

28

Trigger Persist Updatepersist status

optional

Designing for Ajax

Update

• Finally, patterns reflect a visual change

29

Indication. Busy Indication. Cursor Busy. In Context Busy. In Context Progress. Inline Status. Transition.

Brighten Transition. Cross Fade Transition. Dim Transition. Expand Transition. Fade In Transition. Fade Out Transition. Flip Transition. Move Transition. Self-

Healing Transition. Collapse Transition. Slide Transition. Rich Internet Object. Available. Selected. Identifiable

Object. Slide-out. Popup Balloon.

Update

Designing for Ajax

Trigger

Pattern-O-Matic

30

Operation UpdateDesignPattern

Complete=Lookup

DropDown

UpdatesKeypressOnscrollEvent

Grid CellUpdates

AutoComplete

HoverEvent

LightweightPopupShowsDetail

EndlessScrollingHoverDetail

SearchResultsRefined

SelectFilters

RefiningSearch

ContentModuleUpdates

Persist UpdateTriggerPersistDesignPattern

UIReflects

OK StatusBlur Inline

Edit

Drag &Drop

Module

UIReflects

OK Status

PersistentPortals

Operation UpdateTrigger AjaxPattern++

Auto Complete. Deferred Content Loading. Dynamic Goal. Narrowing Choices. Refining Search. Live Search. Dynamic Filter. Detail Zoom.

Endless Scrolling. Expandable Paging Boundary. Fresh Content. Hover Detail. In Place Drill Down. On Demand Refresh. Periodic Refresh.

Resizable Modules. Scrolling Modules. Auto Form Fill.

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

Editing. Inline Text Editing. Inline Reordering. Auto Save. Remembered Collection. Remembered Preferences. Rating an

Object.

Designing for Ajax

Principles

31

Designing for Ajax

Principles for Ajax Design

1. Keep it direct2. Provide live feedback3. Offer an invitation4. Cross borders reluctantly5. Leave a light footprint6. Show transitions7. Think in objects

32

Designing for Ajax

Shift. Event granularity.

33

mouseout hover keypress keydown mousedown drop filter choices mouseup drag click select focus

blur resize move timeout

submit hyperlink

Designing for Ajax

Keep it Direct

34

1

Allow input wherever you output.

-Alan Cooper“

Designing for Ajax

Pattern. Drag & Drop

35

Keep it direct1

Designing for Ajax

Pattern. In Page Editing

36

Keep it direct1

Designing for Ajax

Pattern. In Page Editing

37

Keep it direct1

Designing for Ajax

Pattern. Resizable Content.

38

Keep it direct1

Designing for Ajax

The Patterns

39

Keep it direct1

Drag and Drop. Drag and Drop Modules. In Page Editing. In Page

Custom Editing. Direct State Editing. Grid Cell Editing. Inline Custom

Editing. Inline Tag Editing. Popup Custom Editing. Slide-out Custom Editing. Inline Text Editing. Inline

Reordering. Resizable Content.


Prefer interaction within the pageWhat about discoverability?

Keep it direct1


Prefer interaction within the pageWhat about discoverability? Use direct editing on page content

What about save/cancel?Avoid page jitter

Reduce the feeling of modes

Keep it direct1





Provide in-context toolsOnly good for single operationsCan actually slow you down

Keep it direct1





Provide in-context toolsOnly good for single operationsCan actually slow you down

Use drag and drop where appropriateNot for simply setting an attribute

Good for layout changes or containmentNeeds transitions

Keep it direct1

Designing for Ajax

Shift. Immediacy.

44

Interaction

Data

Presentation

page

Data

refresh boundary

Interaction

Data

Presentation


Provide live feedback2

…effective communication is a key factor in the success of your product.“

-Jesse James Garrett

Designing for Ajax

Pattern. Live Search, Live Suggest

46

Provide Live Feedback2

Designing for Ajax

Pattern. Auto Complete

47


Designing for Ajax

Pattern. Refining Search

48


Designing for Ajax

Pattern. Indication. Inline Busy

49


Designing for Ajax

Pattern. Indication. Inline Status, Character Counter

50


Designing for Ajax

Pattern. Deferred Content Load

51


Designing for Ajax

Pattern. Live Preview, Periodic Refresh

52


Office 12 Live Preview

Designing for Ajax

Pattern. Live Preview

53


Designing for Ajax

The Patterns

54

Indication. Busy Indication. Cursor Busy. In Context

Busy. In Context Progress. Inline Status. Auto

Complete. Balloon Error Tip. Deferred Content Loading. Dynamic Goal. Narrowing Choices. Refining Search. Live Search. Live Preview.

Live Suggest. Character Counter.



Keep the goal in mindDesign for immediacyIs it narrowing or is it distractingUse feedback to boost confidenceLet the user iterate where possible

Just-in-time data

Just-in-time logic


Designing for Ajax

Keep the goal in mindDesign for immediacy Keep the user engaged

Time passes fasterLook for engaging moments

Is it narrowing or is it distractingUse feedback to boost confidenceLet the user iterate where possible






Use live-previewsLook before you leap





Keep feedback focusedKeep it in context

Updating too many areas at once will be confusingShow dynamically what is relevant


Avoid creating feedback noise/jitter

Use live-previewsLook before you leap


Designing for Ajax

Shift. Deeper Interaction.

59

desktop

hover blur focus click key

shiftclick doubleclick drag dragdrop dragflipdrop

shiftdoubleclick tripleclick shifttripleclick

hover blur focus click key

shiftclick doubleclick drag dragdrop dragflipdrop

shiftdoubleclick tripleclick shifttripleclick

web

hover blur focus click

key shiftclick doubleclick drag dragdrop

hover blur focus click

key shiftclick doubleclick drag dragdrop

Designing for Ajax

Offer an invitation

60

3

Designing for Ajax

Pattern. Invitation. Hover, Tooltip, Cursor Invitation.

61

Offer an Invitation3

Designing for Ajax

Pattern. Invitation. Hover Invitation

62


Designing for Ajax

Pattern. Invitation. Hover Invitation

63


Designing for Ajax

Pattern. Invitation. Cursor Invitation

64


Designing for Ajax

Pattern. Invitation. Drop Invitation

65


Designing for Ajax

The Patterns

66

Invitation. Cursor Invitation. Drop Invitation. Tool Tip

Invitation. Hover Invitation.



Make it engagingUse lightweight events as a welcome matRediscover the hover



Make it engagingUse lightweight events as a welcome mat Keep actions out of it

Don’t make the user afraid to exploreDon’t proselytize

Rediscover the hover


Designing for Ajax



Get the actors involvedHover InvitationCursor Invitation


Tooltip Invitation





Get the actors involvedHover InvitationCursor Invitation

Use invitations to aid discoverabilityTwo challenges: idiom & feature

Adding signposts, always-on clues doesn’t scaleAdd tours, help pedals, tips, spotlights


Tooltip Invitation


Designing for Ajax

Shift. In-Page Interaction.

71

classic flow across pages

1 2 3 4

rich flow within page

1 2 3 4

Designing for Ajax

Cross borders reluctantly

72

4

Designing for Ajax

Pattern. Endless Scrolling

73

Rico LiveGrid

Yahoo! Mail Beta (Oddpost)

Cross Borders Reluctantly4

Designing for Ajax

• At the very least make your paging fast

Pattern. Live Paging

74


Designing for Ajax

Pattern. Inline Assistant

75


Designing for Ajax

Pattern. Inline Validation

76


Designing for Ajax

Pattern. Validate and Suggest

77


Designing for Ajax

Pattern. Overlays (lightweight popups)

• For introduction of features

• For giving instruction

• For revealing information

• For interrogative feedback

• For obtaining input

• For important interruptions

• For indication of status or progress

• For offering an invitation

78


Designing for Ajax

Pattern. In-Context Expand.

79


Designing for Ajax

Pattern. Slide Out.

80


Designing for Ajax

Pattern. Detail Zoom.

81


Designing for Ajax

The Patterns

82

Endless Scrolling. Expandable Paging Boundary. Fresh Content. Hover Detail.

In Place Drill Down. Inline Assistant. Inline Validation. Validate Then Suggest. On Demand Refresh. Resizable Modules. Scrolling Modules. Detail Zoom. Opacity Focus. Configurable Module-Faceplate.

Configurable Module-Flip It. Configurable Module-Inline Configure.

Configurable Module-Slide Out Drawer. Slide Out. Flip. Opacity Fade.



Rethink process flowsIts the user’s model, not the page modelEvery page jump is a mental speed bump



Rethink process flowsIts the user’s model, not the page model Rethink paging

Its the user’s model, not the paging modelUse scrolling for “owned” data

Watch out for dual scroll bar issue

Every page jump is a mental speed bump



Rethink process flowsIts the user’s model, not the page model Rethink paging

Its the user’s model, not the paging modelUse scrolling for “owned” data

Watch out for dual scroll bar issue

Plan for linking, crawling and back buttonNot everything is a single page applicationWhat will the user think the back button does?

Every page jump is a mental speed bump



Use overlaysFor momentary interruptionReplace page transitionWhen editing an individual, more complex itemBe symmetricalNot disturb the page



Use overlaysFor momentary interruption Use in-context expands

For editing part of a collectionNeed to see surrounding context

For managing content modules

Replace page transitionWhen editing an individual, more complex itemBe symmetricalNot disturb the page



Use overlaysFor momentary interruption Use in-context expands

For editing part of a collectionNeed to see surrounding context

For managing content modules

Use space creativelySlide, zoom, flip, lens, fade

Replace page transitionWhen editing an individual, more complex itemBe symmetricalNot disturb the page

Think of your backstage


Designing for Ajax

Shift. Lightweight Actions.

89

ok

heavy click-weight

light-weightactions

Designing for Ajax

Leave a light footprint

90

5

Take nothing but memories leave nothing but footprints.“

- Hiking trail sign

Designing for Ajax

Pattern. In Context Tools

91

Leave a Light Footprint5

Designing for Ajax


92


Designing for Ajax


• Microsoft Vista, Office 12Contextual Command Tabs

93


Designing for Ajax

Pattern. Live Ratings

94


Designing for Ajax

Pattern. Remembered Collection

95


Designing for Ajax

The Patterns

96

Auto Save. In Context Tools. In Page Action.

Remembered Collection. Remembered

Preferences. Auto Form Fill. Live Ratings.



Watch your click weightKeep actions immediate and lightCount “clicks”



Watch your click weightKeep actions immediate and light Design for engaging moments

Use invitationsKeep it fun, exciting and light

Treat it like an impulse aisle


Count “clicks”


Watch your click weightKeep actions immediate and light

Use lightweight eventsHoverBlur, focusClick. Avoid double-click


Count “clicks” Design for engaging momentsUse invitations

Keep it fun, exciting and lightTreat it like an impulse aisle

Designing for Ajax

Shift. Multiple Happenings.

100

page-based transitions

multiple transitions,single page

Designing for Ajax

Show transitions

101

6

Designing for Ajax

Pattern. In Context Progress

102

Show Transitions6

Designing for Ajax

Patterns. Scale, Zoom

103

Show Transitions6

Designing for Ajax

Pattern. Active Spotlight

104

Show Transitions6

Designing for Ajax

Pattern. Quick Spotlight

105

Show Transitions6

Designing for Ajax

Pattern. Fade, Self-Heal, Slide, Collapse, Expand

106

Show Transitions6

Designing for Ajax

Transitions

• Brighten. Raise importance• Cross Fade. One leaves, another enters• Dim. Lower importance• Expand. Open in context of others• Fade In. Good for adds• Fade Out. Good for deletes• Flip. Edit configuration• Animate. Change relationship, tweening• Self-Healing. After delete or “yank”• Collapse. Close in context of others• Slide. Similar to expand but child window

107

Show Transitions6

Designing for Ajax

The Patterns

108

Transition. Brighten Transition. Cross Fade Transition. Dim

Transition. Expand Transition. Fade In Transition. Fade Out Transition. Flip Transition. Animate Transition. Self-

Healing Transition. Collapse Transition. Slide Transition.

Show Transitions6


Speak to the BRAINUnderstanding attention processingSending the wrong message

Show Transitions6


Speak to the BRAINUnderstanding attention processingSending the wrong message

What you can communicateSpeed up time

Slow down timeShow state change

Show relationships between objects

Show Transitions6


Speak to the BRAINUnderstanding attention processing What you can communicate

Speed up timeSlow down time

Show state change

Keep it sane“Cut in half” rule of thumb

Use a “contrast knob” approachDon’t overuse

Sending the wrong message

Show relationships between objects

Show Transitions6

Designing for Ajax

Simple observations

• The more rapid the change the more important the event.

• Rapid movement is seen as more important than rapid color change.

• Movement toward the user is seen as more important than movement away from the user.

• Very slow change can be processed without disrupting the user's attention.

• Animation can be used to communicate where an object was and now is

112

Show Transitions6

Designing for Ajax

Shift. Page to Objects.

113

page

objects

Designing for Ajax

Think in objects

114

7

Designing for Ajax

The shift to objects

115

Page-Based Web Rich Internet App

Richer Model Document Rich Internet Object

Longer Lifecycle Transient Permanent

Community/Sharing

Bookmark Content, properties, and behaviors

Think in Objects7

Designing for Ajax

Pattern. Shareable Object

116

Think in Objects7

Designing for Ajax

The Patterns

117

Rich Internet Object. Available. Selected. Identifiable Object.

Think in Objects7


Rethinking the modelWhat is the user’s mental model?How to distinguish from content?

Think in Objects7


Rethinking the modelWhat is the user’s mental model? The power of sharing

Bloggable, shareable, findableHow to dial-in community

How to distinguish from content?

Collections

Think in Objects7


Rethinking the modelWhat is the user’s mental model? The power of sharing

Bloggable, shareable, findableHow to dial-in community

Web 2.0 as a platformRich objects fit the SOA modelCreates a good separation of concerns

How to distinguish from content?

Mashups

Collections

Think in Objects7


Questions?



Participate?

Designing for Ajax

Have You Seen a Cool Example?

• Tag It!• Use ‘ypatternexample’ tag in either delicious or Yahoo! My

Web2• Use additional tags to identify the pattern name you think it

belongs to• Write a comment about what is interesting about the

example or how to see the interaction

124

Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist

Documents