designing for ajaxbillwscott.com/.../designingforajax-ajaxexperience.pdf · 2006-06-20 ·...
TRANSCRIPT
![Page 1: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/1.jpg)
Bill W. Scott, Y! Ajax Evangelist
Principles and Patterns for Designing Rich Internet Applications
Designing for Ajax
![Page 2: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/2.jpg)
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
![Page 3: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/3.jpg)
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
![Page 4: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/4.jpg)
Designing for Ajax
Yahoo! Pattern Library Release
4
http://developer.yahoo.net/ypatterns/
![Page 5: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/5.jpg)
Designing for Ajax
yuiblog.com
5
http://yuiblog.com
![Page 6: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/6.jpg)
Designing for Ajax
Yahoo! Patterns Discussion Group
6
http://groups.yahoo.com/group/ydn-patterns/
![Page 7: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/7.jpg)
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.
![Page 8: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/8.jpg)
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
![Page 9: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/9.jpg)
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)
![Page 10: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/10.jpg)
Designing for Ajax
Yahoo! UI Library
10
Tree Auto Complete Slider
Calendar MenuWindowing
Animation
XHREvent
DOM
Drag & Drop
![Page 11: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/11.jpg)
Designing for Ajax
Designing for Ajax
• RichnessWhat is richness?
• Ajax PatternsDNA of an Ajax Pattern
• Principles Principles for Ajax Design
11
![Page 12: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/12.jpg)
Designing for Ajax 12
Richness
![Page 13: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/13.jpg)
Designing for Ajax
Defining Richness: Web in 3D
• Interaction Dimension
• Data Dimension
• Presentation Dimension
13
Interaction
Data
Presentation
event
response
![Page 14: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/14.jpg)
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
![Page 15: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/15.jpg)
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
![Page 16: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/16.jpg)
Designing for Ajax
Ajax = Just-in-Time. Immediacy.
16
Just-in-time data
Just-in-time presentation
Just-in-time logic
![Page 17: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/17.jpg)
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
![Page 18: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/18.jpg)
Designing for Ajax
My Profile
NameGender
Age
Joe SmithMale27
Ajax Illustrated
18
XHRObject
Server
Save
Tim Jones
send()
onreadystatechange
Interaction Data Presentationevent
response
browser
![Page 19: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/19.jpg)
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
![Page 20: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/20.jpg)
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
![Page 21: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/21.jpg)
Designing for Ajax
Ajax Patterns
21
![Page 22: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/22.jpg)
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
![Page 23: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/23.jpg)
Designing for Ajax
• Make a request
• Return a response
• And do it asynchronously
23
But What Can XHR Do?
XHRObject
request
response
![Page 24: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/24.jpg)
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
![Page 25: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/25.jpg)
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
![Page 26: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/26.jpg)
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
![Page 27: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/27.jpg)
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
![Page 28: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/28.jpg)
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
![Page 29: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/29.jpg)
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
![Page 30: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/30.jpg)
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.
![Page 31: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/31.jpg)
Designing for Ajax
Principles
31
![Page 32: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/32.jpg)
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
![Page 33: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/33.jpg)
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
![Page 34: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/34.jpg)
Designing for Ajax
Keep it Direct
34
1
Allow input wherever you output.
-Alan Cooper“
![Page 35: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/35.jpg)
Designing for Ajax
Pattern. Drag & Drop
35
Keep it direct1
![Page 36: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/36.jpg)
Designing for Ajax
Pattern. In Page Editing
36
Keep it direct1
![Page 37: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/37.jpg)
Designing for Ajax
Pattern. In Page Editing
37
Keep it direct1
![Page 38: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/38.jpg)
Designing for Ajax
Pattern. Resizable Content.
38
Keep it direct1
![Page 39: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/39.jpg)
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.
![Page 40: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/40.jpg)
Designing for Ajax 40
Prefer interaction within the pageWhat about discoverability?
Keep it direct1
![Page 41: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/41.jpg)
Designing for Ajax 41
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
![Page 42: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/42.jpg)
Designing for Ajax 42
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
Provide in-context toolsOnly good for single operationsCan actually slow you down
Keep it direct1
![Page 43: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/43.jpg)
Designing for Ajax 43
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
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
![Page 44: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/44.jpg)
Designing for Ajax
Shift. Immediacy.
44
Interaction
Data
Presentation
page
Data
refresh boundary
Interaction
Data
Presentation
![Page 45: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/45.jpg)
Designing for Ajax 45
Provide live feedback2
…effective communication is a key factor in the success of your product.“
-Jesse James Garrett
![Page 46: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/46.jpg)
Designing for Ajax
Pattern. Live Search, Live Suggest
46
Provide Live Feedback2
![Page 47: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/47.jpg)
Designing for Ajax
Pattern. Auto Complete
47
Provide Live Feedback2
![Page 48: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/48.jpg)
Designing for Ajax
Pattern. Refining Search
48
Provide Live Feedback2
![Page 49: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/49.jpg)
Designing for Ajax
Pattern. Indication. Inline Busy
49
Provide Live Feedback2
![Page 50: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/50.jpg)
Designing for Ajax
Pattern. Indication. Inline Status, Character Counter
50
Provide Live Feedback2
![Page 51: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/51.jpg)
Designing for Ajax
Pattern. Deferred Content Load
51
Provide Live Feedback2
![Page 52: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/52.jpg)
Designing for Ajax
Pattern. Live Preview, Periodic Refresh
52
Provide Live Feedback2
Office 12 Live Preview
![Page 53: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/53.jpg)
Designing for Ajax
Pattern. Live Preview
53
Provide Live Feedback2
![Page 54: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/54.jpg)
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.
Provide Live Feedback2
![Page 55: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/55.jpg)
Designing for Ajax 55
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
Provide Live Feedback2
![Page 56: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/56.jpg)
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
Provide Live Feedback2
![Page 57: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/57.jpg)
Designing for Ajax 57
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
Provide Live Feedback2
![Page 58: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/58.jpg)
Designing for Ajax 58
Keep the goal in mindDesign for immediacy Keep the user engaged
Time passes fasterLook for engaging moments
Keep feedback focusedKeep it in context
Updating too many areas at once will be confusingShow dynamically what is relevant
Is it narrowing or is it distractingUse feedback to boost confidenceLet the user iterate where possible
Avoid creating feedback noise/jitter
Use live-previewsLook before you leap
Provide Live Feedback2
![Page 59: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/59.jpg)
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
![Page 60: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/60.jpg)
Designing for Ajax
Offer an invitation
60
3
![Page 61: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/61.jpg)
Designing for Ajax
Pattern. Invitation. Hover, Tooltip, Cursor Invitation.
61
Offer an Invitation3
![Page 62: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/62.jpg)
Designing for Ajax
Pattern. Invitation. Hover Invitation
62
Offer an Invitation3
![Page 63: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/63.jpg)
Designing for Ajax
Pattern. Invitation. Hover Invitation
63
Offer an Invitation3
![Page 64: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/64.jpg)
Designing for Ajax
Pattern. Invitation. Cursor Invitation
64
Offer an Invitation3
![Page 65: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/65.jpg)
Designing for Ajax
Pattern. Invitation. Drop Invitation
65
Offer an Invitation3
![Page 66: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/66.jpg)
Designing for Ajax
The Patterns
66
Invitation. Cursor Invitation. Drop Invitation. Tool Tip
Invitation. Hover Invitation.
Offer an Invitation3
![Page 67: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/67.jpg)
Designing for Ajax 67
Make it engagingUse lightweight events as a welcome matRediscover the hover
Offer an Invitation3
![Page 68: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/68.jpg)
Designing for Ajax 68
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
Offer an Invitation3
![Page 69: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/69.jpg)
Designing for Ajax
Make it engagingUse lightweight events as a welcome mat Keep actions out of it
Don’t make the user afraid to exploreDon’t proselytize
Get the actors involvedHover InvitationCursor Invitation
Rediscover the hover
Tooltip Invitation
Offer an Invitation3
![Page 70: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/70.jpg)
Designing for Ajax 70
Make it engagingUse lightweight events as a welcome mat Keep actions out of it
Don’t make the user afraid to exploreDon’t proselytize
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
Rediscover the hover
Tooltip Invitation
Offer an Invitation3
![Page 71: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/71.jpg)
Designing for Ajax
Shift. In-Page Interaction.
71
classic flow across pages
1 2 3 4
rich flow within page
1 2 3 4
![Page 72: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/72.jpg)
Designing for Ajax
Cross borders reluctantly
72
4
![Page 73: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/73.jpg)
Designing for Ajax
Pattern. Endless Scrolling
73
Rico LiveGrid
Yahoo! Mail Beta (Oddpost)
Cross Borders Reluctantly4
![Page 74: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/74.jpg)
Designing for Ajax
• At the very least make your paging fast
Pattern. Live Paging
74
Cross Borders Reluctantly4
![Page 75: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/75.jpg)
Designing for Ajax
Pattern. Inline Assistant
75
Cross Borders Reluctantly4
![Page 76: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/76.jpg)
Designing for Ajax
Pattern. Inline Validation
76
Cross Borders Reluctantly4
![Page 77: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/77.jpg)
Designing for Ajax
Pattern. Validate and Suggest
77
Cross Borders Reluctantly4
![Page 78: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/78.jpg)
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
Cross Borders Reluctantly4
![Page 79: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/79.jpg)
Designing for Ajax
Pattern. In-Context Expand.
79
Cross Borders Reluctantly4
![Page 80: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/80.jpg)
Designing for Ajax
Pattern. Slide Out.
80
Cross Borders Reluctantly4
![Page 81: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/81.jpg)
Designing for Ajax
Pattern. Detail Zoom.
81
Cross Borders Reluctantly4
![Page 82: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/82.jpg)
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.
Cross Borders Reluctantly4
![Page 83: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/83.jpg)
Designing for Ajax 83
Rethink process flowsIts the user’s model, not the page modelEvery page jump is a mental speed bump
Cross Borders Reluctantly4
![Page 84: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/84.jpg)
Designing for Ajax 84
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
Cross Borders Reluctantly4
![Page 85: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/85.jpg)
Designing for Ajax 85
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
Cross Borders Reluctantly4
![Page 86: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/86.jpg)
Designing for Ajax 86
Use overlaysFor momentary interruptionReplace page transitionWhen editing an individual, more complex itemBe symmetricalNot disturb the page
Cross Borders Reluctantly4
![Page 87: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/87.jpg)
Designing for Ajax 87
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
Cross Borders Reluctantly4
![Page 88: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/88.jpg)
Designing for Ajax 88
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
Cross Borders Reluctantly4
![Page 89: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/89.jpg)
Designing for Ajax
Shift. Lightweight Actions.
89
ok
heavy click-weight
light-weightactions
![Page 90: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/90.jpg)
Designing for Ajax
Leave a light footprint
90
5
Take nothing but memories leave nothing but footprints.“
- Hiking trail sign
![Page 91: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/91.jpg)
Designing for Ajax
Pattern. In Context Tools
91
Leave a Light Footprint5
![Page 92: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/92.jpg)
Designing for Ajax
Pattern. In Context Tools
92
Leave a Light Footprint5
![Page 93: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/93.jpg)
Designing for Ajax
Pattern. In Context Tools
• Microsoft Vista, Office 12Contextual Command Tabs
93
Leave a Light Footprint5
![Page 94: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/94.jpg)
Designing for Ajax
Pattern. Live Ratings
94
Leave a Light Footprint5
![Page 95: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/95.jpg)
Designing for Ajax
Pattern. Remembered Collection
95
Leave a Light Footprint5
![Page 96: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/96.jpg)
Designing for Ajax
The Patterns
96
Auto Save. In Context Tools. In Page Action.
Remembered Collection. Remembered
Preferences. Auto Form Fill. Live Ratings.
Leave a Light Footprint5
![Page 97: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/97.jpg)
Designing for Ajax 97
Watch your click weightKeep actions immediate and lightCount “clicks”
Leave a Light Footprint5
![Page 98: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/98.jpg)
Designing for Ajax 98
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
Leave a Light Footprint5
Count “clicks”
![Page 99: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/99.jpg)
Designing for Ajax 99
Watch your click weightKeep actions immediate and light
Use lightweight eventsHoverBlur, focusClick. Avoid double-click
Leave a Light Footprint5
Count “clicks” Design for engaging momentsUse invitations
Keep it fun, exciting and lightTreat it like an impulse aisle
![Page 100: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/100.jpg)
Designing for Ajax
Shift. Multiple Happenings.
100
page-based transitions
multiple transitions,single page
![Page 101: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/101.jpg)
Designing for Ajax
Show transitions
101
6
![Page 102: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/102.jpg)
Designing for Ajax
Pattern. In Context Progress
102
Show Transitions6
![Page 103: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/103.jpg)
Designing for Ajax
Patterns. Scale, Zoom
103
Show Transitions6
![Page 104: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/104.jpg)
Designing for Ajax
Pattern. Active Spotlight
104
Show Transitions6
![Page 105: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/105.jpg)
Designing for Ajax
Pattern. Quick Spotlight
105
Show Transitions6
![Page 106: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/106.jpg)
Designing for Ajax
Pattern. Fade, Self-Heal, Slide, Collapse, Expand
106
Show Transitions6
![Page 107: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/107.jpg)
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
![Page 108: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/108.jpg)
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
![Page 109: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/109.jpg)
Designing for Ajax 109
Speak to the BRAINUnderstanding attention processingSending the wrong message
Show Transitions6
![Page 110: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/110.jpg)
Designing for Ajax 110
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
![Page 111: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/111.jpg)
Designing for Ajax 111
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
![Page 112: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/112.jpg)
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
![Page 113: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/113.jpg)
Designing for Ajax
Shift. Page to Objects.
113
page
objects
![Page 114: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/114.jpg)
Designing for Ajax
Think in objects
114
7
![Page 115: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/115.jpg)
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
![Page 116: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/116.jpg)
Designing for Ajax
Pattern. Shareable Object
116
Think in Objects7
![Page 117: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/117.jpg)
Designing for Ajax
The Patterns
117
Rich Internet Object. Available. Selected. Identifiable Object.
Think in Objects7
![Page 118: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/118.jpg)
Designing for Ajax 118
Rethinking the modelWhat is the user’s mental model?How to distinguish from content?
Think in Objects7
![Page 119: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/119.jpg)
Designing for Ajax 119
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
![Page 120: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/120.jpg)
Designing for Ajax 120
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
![Page 121: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/121.jpg)
Designing for Ajax 121
Questions?
![Page 122: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/122.jpg)
Designing for Ajax 122
![Page 123: Designing for Ajaxbillwscott.com/.../DesigningForAjax-AjaxExperience.pdf · 2006-06-20 · Designing for Ajax Operation • Lookup I can get information when I need it • Persist](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/123.jpg)
Designing for Ajax 123
Participate?
![Page 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](https://reader035.vdocument.in/reader035/viewer/2022070903/5f65f27fbd0d3c321e3dbb5b/html5/thumbnails/124.jpg)
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