Ajax Patterns - Bill Scott's Portfoliobillwscott.com/share/presentations/2007/target/AjaxPatterns.pdf · 4. interaction. • Every ... Interaction Persist PresentationModule Persist

Ajax PatternsRich interaction idioms

Bill ScottYahoo! Ajax Evangelist

[email protected]

1

mailto:[email protected]

mailto:[email protected]

background

2

background

2

background

2

background

2

rich patternsDrag 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. 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.

3

How to deconstruct patterns?• Interaction

event, timer, invitation

• Operationlookup, action, validate, message

• Presentationupdate to the interface

Interaction Operation Presentation

4

interaction.• Every pattern starts with an interaction

User event (event)System event (timer)

• Some patterns are about inviting interaction

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

focus blur resize move timeout select


5

operation.• Lookup. I can get information when I need it.

• Action. I can take action in context.

• Validate. I can prevent errors early.

• Message. I can communicate instantly.


6

operation. lookup.• I can get information when I need it

InteractionLookup

Operation Presentation

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.

7

operation. action.• I can take action in context

InteractionAction


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.

8

operation. validate.• I can prevent errors early

InteractionValidate


inline validate. validate then suggest. balloon error tip. character counter. live preview.

9

presentation


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. . Available. Selected. Slide-out. Popup Balloon.

10

Pattern-O-Matic

Interaction

11

Operation PresentationDesignPattern

Complete=++

11

Pattern-O-Matic

Interaction

11


Complete=Lookup ++

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.

11

Pattern-O-Matic

Interaction

11


Complete=Lookup

DropDown

UpdatesKeypress Auto

Complete++

11

Pattern-O-Matic

Interaction

11


Complete=Lookup

DropDown

UpdatesKeypressOnscrollEvent

Grid CellUpdates

AutoCompleteEndlessScrolling++

11

Pattern-O-Matic

Interaction

11


Complete=Lookup

DropDown


Grid CellUpdates

AutoComplete

HoverEvent

LightweightPopupShowsDetail

EndlessScrollingHoverDetail++

11

Pattern-O-Matic

Interaction

11


Complete=Lookup

DropDown


Grid CellUpdates

AutoComplete

HoverEvent


EndlessScrollingHoverDetail

SearchResultsRefined

SelectFilters

RefiningSearch

ContentModuleUpdates

++

11

Pattern-O-Matic

Interaction

11


Complete=Lookup

DropDown


Grid CellUpdates

AutoComplete

HoverEvent




SelectFilters

RefiningSearch


Persist PresentationInteractionPersistDesignPattern

++

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.

11

Pattern-O-Matic

Interaction

11


Complete=Lookup

DropDown


Grid CellUpdates

AutoComplete

HoverEvent




SelectFilters

RefiningSearch



UIReflects

OK Status

Save Button InlineEdit++

11

Pattern-O-Matic

Interaction

11


Complete=Lookup

DropDown


Grid CellUpdates

AutoComplete

HoverEvent




SelectFilters

RefiningSearch



UIReflects

OK Status

Save Button InlineEdit

Drag &Drop

Module

UIReflects

OK Status

PersistentPortals++

11

Pattern-O-Matic

Interaction

11


Complete=Lookup

DropDown


Grid CellUpdates

AutoComplete

HoverEvent




SelectFilters

RefiningSearch



UIReflects

OK Status

Save Button InlineEdit

Drag &Drop

Module

UIReflects

OK Status

PersistentPortals

Operation PresentationInteraction AjaxPattern++

11

How to Open up Patterns?

12

How to Open up Patterns?

12

How to Share Patterns?

13


13


PatternService

13


PatternService

Yahoo! service responds with a JSON

representation of a pattern. Allows anyone to mashup the

patterns into a corporate pattern library

13


PatternService

Yahoo! service responds with a JSON

representation of a pattern. Allows anyone to mashup the

patterns into a corporate pattern library

CorporateBrandedPattern

Site(mashup)

13

How to Organize?

14

How to Teach Patterns?

design principles for richness

Interaction InfoFeedback

15

principle. make it direct.

16


pattern. in-page action.

16

pattern. drag & drop.



16




16



pattern. inline editing.


16





16




pattern. in-context tools.


16




pattern. in-context tools.


16

principle. keep a light footprint.

17


pattern. in page action.

17


pattern. remembered collections.


17




17



pattern. rating an object.pattern. in page action.

17




17




17

principle. cross borders reluctantly.

18

principle. cross borders reluctantly.pattern. on-demand scrolling.

18

principle. cross borders reluctantly.pattern. on-demand scrolling. pattern. in-context expand.

18

principle. cross borders reluctantly.pattern. on-demand scrolling. pattern. in-context expand. pattern. inline assistant.

18


pattern. hover details.

pattern. in-context expand. pattern. inline assistant.

18




18




pattern. lightweight popup + lightbox.

18

principle. give live feedback.

19

principle. give live feedback.pattern. live suggest.

19


pattern. auto complete.

19



19



pattern. periodic refresh.

19




pattern. busy indicator.

19




pattern. live previews.

pattern. busy indicator.

19

principle. offer an invitation.

20


pattern. hover invitation.

20



pattern. tour invitation.

20


pattern. hover invitation. pattern. drop invitation.


20



pattern. tooltip invitation + hover invitation + cursor invitation.

pattern. drop invitation.


20



pattern. tooltip invitation + hover invitation + cursor invitation.

pattern. drop invitation.


20

principle. show transitions.

21


pattern. fade transition + self-healing transition.

21



pattern. slide transition.

21




pattern. active spotlight.

21




pattern. active spotlight.

pattern. zoom box.

21

principle. think in objects.

22

principle. think in objects.

pattern. shareable object.

22

principle. tie information to interactivity.

23


pattern. multi-variate views.

23


pattern. multi-variate views.

23

A look at the flip-side: Anti-Patterns

big ball of mud. meandering way. borg idiom. tiny targets. mystery meat.

buried treasure. hover and cover. pogo stick navigation. novel notions.

against the flow. metaphor mismatch. double duty. linkitus. blind type.

windows aplenty. animation gone wild. misguided misdirections. unmarked hazards.

missed moments. missing scene. one at a time. non-symmetrical actions.

24

How to make it easier to prototype?

25

anatomy of a drag/drop'#scratchpad-list img': { DragDrop: { dropTarget: '#idcard-mini div.icon, h2:contains(My Portfolio)', onDragOver: { ReplaceStyle: { removeClass: 'not-dragged-over', addClass: 'dragged-over' } }, onDragOut: { ReplaceStyle: { removeClass: 'dragged-over', addClass: 'not-dragged-over' } }, onDragDrop: { InnerHtml: { copyFrom: '$drag', onTrigger: { Fade: { opacity: {from:0.0, to: 1.0}, duration: 0.25 } } }, ReplaceStyle: { removeClass: 'dragged-over', addClass: 'not-dragged-over' } } }},

26


Reads like this:

Make all images in scratchpad draggable.

On drag over, change style to reflect hover. On drag out, restore style.

On drop (on valid target) copy the drag item’s HTML into the id photo area, then fade the dropped item from 0 to 100%

26


Reads like this:

Make all images in scratchpad draggable.

On drag over, change style to reflect hover. On drag out, restore style.

On drop (on valid target) copy the drag item’s HTML into the id photo area, then fade the dropped item from 0 to 100%

'#idcard-mini div.icon, h2:contains(My Portfolio)'

'#scratchpad-list img'

26

Behaviors ~ Patterns

Resize. Animate. Spotlight. Fade. Move. ToggleStyle. Style. ReplaceStyle. Show. Hide.

ToggleShowHide. Eval. Open. Close. ToggleOpenClose. InnerHtml. AjaxInnerHtml. Popup. DragDrop. Click. Dblclick. Blur. Focus.

Mouseover. Mousemove. Mouseout. Keydown. Keyup.

27

Documents

Ajax Patterns - Bill Scott's Portfoliobillwscott.com/share/presentations/2007/target/AjaxPatterns.pdf · 4. interaction. • Every ... Interaction Persist PresentationModule Persist