Designing for Ajax
Upcoming SlideShare
Loading in...5
×
 

Designing for Ajax

on

  • 1,127 views

 

Statistics

Views

Total Views
1,127
Views on SlideShare
1,127
Embed Views
0

Actions

Likes
1
Downloads
42
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Designing for Ajax Designing for Ajax Presentation Transcript

  • Designing for Ajax Principles and Patterns for Designing Rich Internet Applications Bill W. Scott, Y! Ajax Evangelist bscott@yahoo-inc.com
  • Background • Games, research, science, military, biz • Apps, frameworks, widget sets • Developer, designer • Object-oriented background • Software architect, user experience manager • Current: Yahoo! Ajax Evangelist • http://looksgoodworkswell.com Designing for Ajax 2
  • Ajax @ Yahoo Designing for Ajax 3
  • Yahoo! Pattern Library Release http://developer.yahoo.net/ypatterns/ Designing for Ajax 4
  • yuiblog.com http://yuiblog.com Designing for Ajax 5
  • Yahoo! Patterns Discussion Group http://groups.yahoo.com/group/ydn-patterns/ Designing for Ajax 6
  • Initial Set of Yahoo! Patterns Released on 2/13 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. Designing for Ajax 7
  • 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. Designing for Ajax 8
  • Yahoo! UI Library • Normalization (Event Utility) • Messaging (Connection Manager for AJAX) • Direct Representation (Animation and Position) • Direct Manipulation (Drag and Drop) • Rich Interactive Widgets (Slider, TreeView, Calendar, AutoComplete Designing for Ajax 9
  • Designing for Ajax • Richness What is richness? • Ajax Patterns DNA of an Ajax Pattern • Principles Principles for Ajax Design Designing for Ajax 10
  • Richness Designing for Ajax 11
  • Defining Richness: Web in 3D • Interaction Dimension Interaction event • Data Dimension Data Presentation response • Presentation Dimension Designing for Ajax 12
  • Classic Web • Interaction page course-grained Interaction • Data Data loaded with the page or obtained via refresh Presentation • Presentation: refresh boundary page-based updates Data Designing for Ajax 13
  • Classic Web Illustrated browser Http My Profile Response Photo Name Joe Smith Server Name Gender Male Gender Age 27 Age Submit Http Edit Request Interaction Data Presentation event response Designing for Ajax 14
  • Ajax = Just-in-Time. Immediacy. Just-in-time data Just-in-time presentation Just-in-time logic Designing for Ajax 15
  • Ajax Model - New & Improved! • Now with Deeper Interaction! Interaction • Now with Just-in-Time Data & Just-in-Time Logic! Data ★ XMLHttpRequest (XHR) is Presentation the secret sauce! • Now with Richer Interface! • All dimensions are closer Designing for Ajax 16
  • Ajax Illustrated browser My Profile onreadystatechange Name Joe Smith Tim Jones Server Gender Male XHR Age 27 Save Object send() Interaction Data Presentation event response Designing for Ajax 17
  • 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 XHR • Ajax = XHR + DHTML (HTML, CSS, JavaScript) + Rich design Designing for Ajax 18
  • 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 Designing for Ajax 19
  • Ajax Patterns Designing for Ajax 20
  • 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. Designing for Ajax 21
  • But What Can XHR Do? • Make a request • Return a response • And do it asynchronously response XHR Object request Designing for Ajax 22
  • Anatomy of a Pattern • Ajax design patterns contain three steps • Trigger (event or timer) • Operation (Ajax, remote scripting) • Update (presentation) Trigger Operation Update Designing for Ajax 23
  • Trigger • Every pattern starts with • a user event • a timer event mouseout hover keypress keydown mousedown drop filter choices mouseup drag click mousedown select focus blur resize move timeout Trigger Designing for Ajax 24
  • Operation Ajax patterns open the door to immediacy • 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 Operation Designing for Ajax 25
  • Operation. Lookup I can get information when I need it 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. Trigger Lookup Operation Update Designing for Ajax 26
  • Operation. Persist I can save in real-time 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. Trigger Persist Update persist status optional Designing for Ajax 27
  • Update • Finally, patterns reflect a visual change 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 28
  • Pattern-O-Matic Drag & Lightweight Onscroll Select Hover Content Search Drop UI Design Persist Keypress Trigger Drop Blur Filters Event Module + Operation Lookup Persist + Grid Cell Popup Reflects Module Update Results Down Update Updates Shows OK Status Updates Refined = Persistent Refining Endless Hover Inline Auto Ajax Pattern Design Complete Scrolling Search Portals Detail Edit Pattern Complete Pattern Detail Drag and Drop Modules. In Page Editing. In Page Custom Editing. Auto Complete.Editing. Grid Cell Editing. Inline Custom Editing. Direct State Deferred Content Loading. Dynamic Goal. Narrowing Choices. Tag Editing. Popup Custom Editing. Slide-out CustomZoom. Inline Refining Search. Live Search. Dynamic Filter. Detail Editing. Inline Text Editing. Inline Reordering. Auto Save. Endless Scrolling. Expandable Paging Boundary. Fresh Content. Hover Detail. In Place Drill Down. On DemandPreferences. Rating an Remembered Collection. Remembered Refresh. Periodic Refresh. Object. Resizable Modules. Scrolling Modules. Auto Form Fill. Designing for Ajax 29
  • Principles Designing for Ajax 30
  • Principles for Ajax Design 1. Keep it direct 2. Provide live feedback 3. Offer an invitation 4. Cross borders reluctantly 5. Leave a light footprint 6. Show transitions 7. Think in objects Designing for Ajax 31
  • Shift. Event granularity. submit hyperlink mouseout hover keypress keydown mousedown drop filter choices mouseup drag click select focus blur resize move timeout Designing for Ajax 32
  • “ Allow input wherever you output. -Alan Cooper 1 Keep it Direct Designing for Ajax 33
  • Pattern. Drag & Drop 1 Keep it direct Designing for Ajax 34
  • Pattern. In Page Editing 1 Keep it direct Designing for Ajax 35
  • Pattern. In Page Editing 1 Keep it direct Designing for Ajax 36
  • Pattern. Resizable Content. 1 Keep it direct Designing for Ajax 37
  • The Patterns 1 Keep it direct 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. Designing for Ajax 38
  • 1 Keep it direct Prefer interaction within the page What about discoverability? Designing for Ajax 39
  • 1 Keep it direct Prefer interaction within the page What about discoverability? Use direct editing on page content What about save/cancel? Avoid page jitter Reduce the feeling of modes Designing for Ajax 40
  • 1 Keep it direct Prefer interaction within the page What about discoverability? Use direct editing on page content What about save/cancel? Avoid page jitter Reduce the feeling of modes Provide in-context tools Only good for single operations Can actually slow you down Designing for Ajax 41
  • 1 Keep it direct Prefer interaction within the page What about discoverability? Use direct editing on page content What about save/cancel? Avoid page jitter Reduce the feeling of modes Use drag and drop where appropriate Not for simply setting an attribute Provide in-context tools Good for layout changes or containment Only good for single operations Needs transitions Can actually slow you down Designing for Ajax 42
  • Shift. Immediacy. page Interaction Interaction Data Data Presentation Presentation refresh boundary Data Designing for Ajax 43
  • “ …effective communication is a key factor in the success of your product. -Jesse James Garrett 2 Provide live feedback Designing for Ajax 44
  • Pattern. Live Search, Live Suggest 2 Provide Live Feedback Designing for Ajax 45
  • Pattern. Auto Complete 2 Provide Live Feedback Designing for Ajax 46
  • Pattern. Refining Search 2 Provide Live Feedback Designing for Ajax 47
  • Pattern. Indication. Inline Busy 2 Provide Live Feedback Designing for Ajax 48
  • Pattern. Indication. Inline Status, Character Counter 2 Provide Live Feedback Designing for Ajax 49
  • Pattern. Deferred Content Load 2 Provide Live Feedback Designing for Ajax 50
  • Pattern. Live Preview, Periodic Refresh 2 Provide Live Feedback Office 12 Live Preview Designing for Ajax 51
  • Pattern. Live Preview 2 Provide Live Feedback Designing for Ajax 52
  • The Patterns 2 Provide Live Feedback 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. Designing for Ajax 53
  • 2 Provide Live Feedback Keep the goal in mind Design for immediacy Is it narrowing or is it distracting Use feedback to boost confidence Let the user iterate where possible Just-in-time data Just-in-time logic Designing for Ajax 54
  • 2 Provide Live Feedback Keep the goal in mind Design for immediacy Keep the user engaged Is it narrowing or is it distracting Time passes faster Use feedback to boost confidence Look for engaging moments Let the user iterate where possible Designing for Ajax
  • 2 Provide Live Feedback Keep the goal in mind Design for immediacy Keep the user engaged Is it narrowing or is it distracting Time passes faster Use feedback to boost confidence Look for engaging moments Let the user iterate where possible Use live-previews Look before you leap Designing for Ajax 56
  • 2 Provide Live Feedback Keep the goal in mind Design for immediacy Keep the user engaged Is it narrowing or is it distracting Time passes faster Use feedback to boost confidence Look for engaging moments Let the user iterate where possible Keep feedback focused Keep it in context Use live-previews Updating too many areas at once will be confusing Look before you leap Show dynamically what is relevant Avoid creating feedback noise/jitter Designing for Ajax 57
  • Shift. Deeper Interaction. desktop web hover blur focus click key shiftclick doubleclick hover blur focus click drag dragdrop dragflipdrop key shiftclick doubleclick drag dragdrop shiftdoubleclick tripleclick shifttripleclick hover blur focus click key hover blur focus click shiftclick doubleclick key shiftclick doubleclick drag dragdrop drag dragdrop dragflipdrop shiftdoubleclick tripleclick shifttripleclick Designing for Ajax 58
  • 3 Offer an invitation Designing for Ajax 59
  • Pattern. Invitation. Hover, Tooltip, Cursor Invitation. 3 Offer an Invitation Designing for Ajax 60
  • Pattern. Invitation. Hover Invitation 3 Offer an Invitation Designing for Ajax 61
  • Pattern. Invitation. Hover Invitation 3 Offer an Invitation Designing for Ajax 62
  • Pattern. Invitation. Cursor Invitation 3 Offer an Invitation Designing for Ajax 63
  • Pattern. Invitation. Drop Invitation 3 Offer an Invitation Designing for Ajax 64
  • The Patterns 3 Offer an Invitation Invitation. Cursor Invitation. Drop Invitation. Tool Tip Invitation. Hover Invitation. Designing for Ajax 65
  • 3 Offer an Invitation Make it engaging Use lightweight events as a welcome mat Rediscover the hover Designing for Ajax 66
  • 3 Offer an Invitation Make it engaging Use lightweight events as a welcome mat Keep actions out of it Rediscover the hover Don’t make the user afraid to explore Don’t proselytize Designing for Ajax 67
  • 3 Offer an Invitation Make it engaging Use lightweight events as a welcome mat Keep actions out of it Rediscover the hover Don’t make the user afraid to explore Don’t proselytize Get the actors involved Hover Invitation Cursor Invitation Tooltip Invitation Designing for Ajax
  • 3 Offer an Invitation Make it engaging Use lightweight events as a welcome mat Keep actions out of it Rediscover the hover Don’t make the user afraid to explore Don’t proselytize Use invitations to aid discoverability Two challenges: idiom & feature Get the actors involved Adding signposts, always-on clues doesn’t scale Hover Invitation Add tours, help pedals, tips, spotlights Cursor Invitation Tooltip Invitation Designing for Ajax 69
  • Shift. In-Page Interaction. 1 2 3 4 classic flow across pages 1 2 3 4 rich flow within page 70 Designing for Ajax
  • 4 Cross borders reluctantly Designing for Ajax 71
  • Pattern. Endless Scrolling 4 Cross Borders Reluctantly Rico LiveGrid Yahoo! Mail Beta (Oddpost) Designing for Ajax 72
  • Pattern. Live Paging 4 Cross Borders Reluctantly • At the very least make your paging fast Designing for Ajax 73
  • Pattern. Inline Assistant 4 Cross Borders Reluctantly Designing for Ajax 74
  • Pattern. Inline Validation 4 Cross Borders Reluctantly Designing for Ajax 75
  • Pattern. Validate and Suggest 4 Cross Borders Reluctantly Designing for Ajax 76
  • Pattern. Overlays (lightweight popups) 4 Cross Borders Reluctantly • 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 Designing for Ajax 77
  • Pattern. In-Context Expand. 4 Cross Borders Reluctantly Designing for Ajax 78
  • Pattern. Slide Out. 4 Cross Borders Reluctantly Designing for Ajax 79
  • Pattern. Detail Zoom. 4 Cross Borders Reluctantly Designing for Ajax 80
  • The Patterns 4 Cross Borders Reluctantly 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. Designing for Ajax 81
  • 4 Cross Borders Reluctantly Rethink process flows Its the user’s model, not the page model Every page jump is a mental speed bump Designing for Ajax 82
  • 4 Cross Borders Reluctantly Rethink process flows Its the user’s model, not the page model Rethink paging Every page jump is a mental speed bump Its the user’s model, not the paging model Use scrolling for “owned” data Watch out for dual scroll bar issue Designing for Ajax 83
  • 4 Cross Borders Reluctantly Rethink process flows Its the user’s model, not the page model Rethink paging Every page jump is a mental speed bump Its the user’s model, not the paging model Use scrolling for “owned” data Watch out for dual scroll bar issue Plan for linking, crawling and back button Not everything is a single page application What will the user think the back button does? Designing for Ajax 84
  • 4 Cross Borders Reluctantly Use overlays For momentary interruption Replace page transition When editing an individual, more complex item Be symmetrical Not disturb the page Designing for Ajax 85
  • 4 Cross Borders Reluctantly Use overlays For momentary interruption Use in-context expands Replace page transition For editing part of a collection When editing an individual, more complex item Need to see surrounding context Be symmetrical For managing content modules Not disturb the page Designing for Ajax 86
  • 4 Cross Borders Reluctantly Use overlays For momentary interruption Use in-context expands Replace page transition For editing part of a collection When editing an individual, more complex item Need to see surrounding context Be symmetrical For managing content modules Not disturb the page Use space creatively Slide, zoom, flip, lens, fade Think of your backstage Designing for Ajax 87
  • Shift. Lightweight Actions. ok heavy click-weight light-weight actions Designing for Ajax 88
  • “ Take nothing but memories leave nothing but footprints. - Hiking trail sign 5 Leave a light footprint Designing for Ajax 89
  • Pattern. In Context Tools 5 Leave a Light Footprint Designing for Ajax 90
  • Pattern. In Context Tools 5 Leave a Light Footprint Designing for Ajax 91
  • Pattern. In Context Tools 5 Leave a Light Footprint • Microsoft Vista, Office 12 Contextual Command Tabs Designing for Ajax 92
  • Pattern. Live Ratings 5 Leave a Light Footprint Designing for Ajax 93
  • Pattern. Remembered Collection 5 Leave a Light Footprint Designing for Ajax 94
  • The Patterns 5 Leave a Light Footprint Auto Save. In Context Tools. In Page Action. Remembered Collection. Remembered Preferences. Auto Form Fill. Live Ratings. Designing for Ajax 95
  • 5 Leave a Light Footprint Watch your click weight Keep actions immediate and light Count “clicks” Designing for Ajax 96
  • 5 Leave a Light Footprint Watch your click weight Keep actions immediate and light Count “clicks” Design for engaging moments Use invitations Keep it fun, exciting and light Treat it like an impulse aisle Designing for Ajax 97
  • 5 Leave a Light Footprint Watch your click weight Keep actions immediate and light Count “clicks” Design for engaging moments Use invitations Keep it fun, exciting and light Treat it like an impulse aisle Use lightweight events Hover Blur, focus Click. Avoid double-click Designing for Ajax 98
  • Shift. Multiple Happenings. page-based transitions multiple transitions, single page Designing for Ajax 99
  • 6 Show transitions Designing for Ajax 100
  • Pattern. In Context Progress 6 Show Transitions Designing for Ajax 101
  • Patterns. Scale, Zoom 6 Show Transitions Designing for Ajax 102
  • Pattern. Active Spotlight 6 Show Transitions Designing for Ajax 103
  • Pattern. Quick Spotlight 6 Show Transitions Designing for Ajax 104
  • Pattern. Fade, Self-Heal, Slide, Collapse, Expand 6 Show Transitions Designing for Ajax 105
  • Transitions 6 Show 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 Designing for Ajax 106
  • The Patterns 6 Show Transitions 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. Designing for Ajax 107
  • 6 Show Transitions Speak to the BRAIN Understanding attention processing Sending the wrong message Designing for Ajax 108
  • 6 Show Transitions Speak to the BRAIN Understanding attention processing What you can communicate Sending the wrong message Speed up time Slow down time Show state change Show relationships between objects Designing for Ajax 109
  • 6 Show Transitions Speak to the BRAIN Understanding attention processing What you can communicate Sending the wrong message Speed up time Slow down time Show state change Show relationships between objects Keep it sane “Cut in half” rule of thumb Use a “contrast knob” approach Don’t overuse Designing for Ajax 110
  • Simple observations 6 Show Transitions • 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 Designing for Ajax 111
  • Shift. Page to Objects. page objects Designing for Ajax 112
  • 7 Think in objects Designing for Ajax 113
  • The shift to objects 7 Think in Objects Page-Based Web Rich Internet App Richer Model Document Rich Internet Object Longer Lifecycle Transient Permanent Community/ Content, properties, Bookmark Sharing and behaviors Designing for Ajax 114
  • Pattern. Shareable Object 7 Think in Objects Designing for Ajax 115
  • The Patterns 7 Think in Objects Rich Internet Object. Available. Selected. Identifiable Object. Designing for Ajax 116
  • 7 Think in Objects Rethinking the model What is the user’s mental model? How to distinguish from content? Designing for Ajax 117
  • 7 Think in Objects Rethinking the model What is the user’s mental model? The power of sharing How to distinguish from content? Bloggable, shareable, findable How to dial-in community Collections Designing for Ajax 118
  • 7 Think in Objects Rethinking the model What is the user’s mental model? The power of sharing How to distinguish from content? Bloggable, shareable, findable How to dial-in community Collections Web 2.0 as a platform Rich objects fit the SOA model Creates a good separation of concerns Mashups Designing for Ajax 119
  • Questions? Designing for Ajax 120
  • Designing for Ajax 121
  • Participate? Designing for Ajax 122
  • 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 Designing for Ajax 123