• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Designing  Ajax  Principles And  Patterns For Designing  Rich  Internet  Applications
 

Designing Ajax Principles And Patterns For Designing Rich Internet Applications

on

  • 2,498 views

 

Statistics

Views

Total Views
2,498
Views on SlideShare
2,498
Embed Views
0

Actions

Likes
1
Downloads
121
Comments
1

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

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

    Designing  Ajax  Principles And  Patterns For Designing  Rich  Internet  Applications Designing Ajax Principles And Patterns For Designing Rich Internet Applications 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 event Interaction • Data Dimension Data Presentation response • Presentation Dimension Designing for Ajax 12
    • Classic Web page • Interaction 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 Server Photo Name Joe Smith Name Gender Male Gender Age 27 Age Http Submit 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 Server Name Joe Smith Tim Jones XHR Gender Male Age 27 Object Save 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 mousedown mouseout hover keypress keydown 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. Lookup Trigger Update Operation 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 Lightweight Drag & Content Search Drop UI Design Persist Onscroll Select Hover + + = Grid Cell Popup Persistent Refining Endless Hover Inline Auto Ajax Keypress Trigger Drop Blur Operation Lookup Persist Reflects Module Update Results Down Pattern Design Update Filters Event Updates Shows Complete Scrolling Search Portals Detail Edit Pattern Module OK Status Updates Refined 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 hover keypress keydown mousedown mouseout 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
    • 1 Keep it direct Pattern. Drag & Drop Designing for Ajax 34
    • 1 Keep it direct Pattern. In Page Editing Designing for Ajax 35
    • 1 Keep it direct Pattern. In Page Editing Designing for Ajax 36
    • 1 Keep it direct Pattern. Resizable Content. Designing for Ajax 37
    • 1 Keep it direct The 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. 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 Needs transitions Only good for single operations 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
    • 2 Provide Live Feedback Pattern. Live Search, Live Suggest Designing for Ajax 45
    • 2 Provide Live Feedback Pattern. Auto Complete Designing for Ajax 46
    • 2 Provide Live Feedback Pattern. Refining Search Designing for Ajax 47
    • 2 Provide Live Feedback Pattern. Indication. Inline Busy Designing for Ajax 48
    • 2 Provide Live Feedback Pattern. Indication. Inline Status, Character Counter Designing for Ajax 49
    • 2 Provide Live Feedback Pattern. Deferred Content Load Designing for Ajax 50
    • 2 Provide Live Feedback Pattern. Live Preview, Periodic Refresh Office 12 Live Preview Designing for Ajax 51
    • 2 Provide Live Feedback Pattern. Live Preview Designing for Ajax 52
    • 2 Provide Live Feedback The Patterns 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 Show dynamically what is relevant Look before you leap Avoid creating feedback noise/jitter Designing for Ajax 57
    • Shift. Deeper Interaction. desktop web click key focus hover blur click hover blur focus shiftclick doubleclick key shiftclick drag dragdrop doubleclick drag dragdrop dragflipdrop shiftdoubleclick tripleclick shifttripleclick click key hover blur focus click hover blur focus 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
    • 3 Offer an Invitation Pattern. Invitation. Hover, Tooltip, Cursor Invitation. Designing for Ajax 60
    • 3 Offer an Invitation Pattern. Invitation. Hover Invitation Designing for Ajax 61
    • 3 Offer an Invitation Pattern. Invitation. Hover Invitation Designing for Ajax 62
    • 3 Offer an Invitation Pattern. Invitation. Cursor Invitation Designing for Ajax 63
    • 3 Offer an Invitation Pattern. Invitation. Drop Invitation Designing for Ajax 64
    • 3 Offer an Invitation The Patterns 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
    • 4 Cross Borders Reluctantly Pattern. Endless Scrolling Rico LiveGrid Yahoo! Mail Beta (Oddpost) Designing for Ajax 72
    • 4 Cross Borders Reluctantly Pattern. Live Paging • At the very least make your paging fast Designing for Ajax 73
    • 4 Cross Borders Reluctantly Pattern. Inline Assistant Designing for Ajax 74
    • 4 Cross Borders Reluctantly Pattern. Inline Validation Designing for Ajax 75
    • 4 Cross Borders Reluctantly Pattern. Validate and Suggest Designing for Ajax 76
    • 4 Cross Borders Reluctantly 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 Designing for Ajax 77
    • 4 Cross Borders Reluctantly Pattern. In-Context Expand. Designing for Ajax 78
    • 4 Cross Borders Reluctantly Pattern. Slide Out. Designing for Ajax 79
    • 4 Cross Borders Reluctantly Pattern. Detail Zoom. Designing for Ajax 80
    • 4 Cross Borders Reluctantly The Patterns 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
    • 5 Leave a Light Footprint Pattern. In Context Tools Designing for Ajax 90
    • 5 Leave a Light Footprint Pattern. In Context Tools Designing for Ajax 91
    • 5 Leave a Light Footprint Pattern. In Context Tools • Microsoft Vista, Office 12 Contextual Command Tabs Designing for Ajax 92
    • 5 Leave a Light Footprint Pattern. Live Ratings Designing for Ajax 93
    • 5 Leave a Light Footprint Pattern. Remembered Collection Designing for Ajax 94
    • 5 Leave a Light Footprint The Patterns 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 Design for engaging moments Count “clicks” 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 Design for engaging moments Count “clicks” 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
    • 6 Show Transitions Pattern. In Context Progress Designing for Ajax 101
    • 6 Show Transitions Patterns. Scale, Zoom Designing for Ajax 102
    • 6 Show Transitions Pattern. Active Spotlight Designing for Ajax 103
    • 6 Show Transitions Pattern. Quick Spotlight Designing for Ajax 104
    • 6 Show Transitions Pattern. Fade, Self-Heal, Slide, Collapse, Expand Designing for Ajax 105
    • 6 Show Transitions 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
    • 6 Show Transitions The Patterns 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
    • 6 Show Transitions 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 Designing for Ajax 111
    • Shift. Page to Objects. page objects Designing for Ajax 112
    • 7 Think in objects Designing for Ajax 113
    • 7 Think in Objects The shift to 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
    • 7 Think in Objects Pattern. Shareable Object Designing for Ajax 115
    • 7 Think in Objects The Patterns 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