Your SlideShare is downloading. ×
0
Designing for Ajax
Principles and Patterns for Designing Rich Internet Applications




                                  ...
Background
• Games, research, science,
 military, biz
• Apps, frameworks,
 widget sets
• Developer, designer
• Object-orie...
Ajax @ Yahoo

        Designing for Ajax   3
Yahoo! Pattern Library Release
                http://developer.yahoo.net/ypatterns/




                     Designing fo...
yuiblog.com


http://yuiblog.com




                     Designing for Ajax   5
Yahoo! Patterns Discussion Group


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




                                       ...
Initial Set of Yahoo! Patterns Released on 2/13




                          Breadcrumbs. Module Tabs.
                  ...
Rich Design Patterns

            Drag and Drop. Drag and Drop Modules. In Page Editing.
              In Page Custom Edit...
Yahoo! UI Library
• Normalization (Event Utility)
• Messaging (Connection Manager for AJAX)
• Direct Representation (Anima...
Designing for Ajax
• Richness
 What is richness?
• Ajax Patterns
 DNA of an Ajax Pattern
• Principles
 Principles for Ajax...
Richness

           Designing for Ajax   11
Defining Richness: Web in 3D
• Interaction Dimension
                                     Interaction   event


• Data Dim...
Classic Web
• Interaction                                             page

 course-grained                        Interac...
Classic Web Illustrated
                       browser
                                   Http
    My Profile
             ...
Ajax = Just-in-Time. Immediacy.
                                          Just-in-time data




Just-in-time presentation
...
Ajax Model - New & Improved!
• Now with Deeper
 Interaction!                                        Interaction
• Now with...
Ajax Illustrated
                                         browser
    My Profile

                                onreadyst...
AJAX vs Ajax
• AJAX = Asynchronous JavaScript and XML
• Strict definition is using XMLHttpRequest (XHR) to retrieve
  XML ...
Other Remote Scripting Techniques
• Hidden IFrame
• <img> src
• <script> src hack
• CSS href hack
• JS to faceless Java ap...
Ajax Patterns


          Designing for Ajax   20
Rich Design Patterns


         Drag and Drop. Drag and Drop Modules. In Page Editing. In
         Page Custom Editing. Di...
But What Can XHR Do?
• Make a request
• Return a response


• And do it asynchronously

          response


           XH...
Anatomy of a Pattern
• Ajax design patterns contain three steps
• Trigger (event or timer)
• Operation (Ajax, remote scrip...
Trigger
• Every pattern starts with
• a user event
• a timer event
   mouseout hover keypress keydown                 mous...
Operation
Ajax patterns open the door to immediacy
• Lookup I can get information when I need it
• Persist I can save in r...
Operation. Lookup

I can get information when I need it
  Auto Complete. Deferred Content Loading. Dynamic Goal. Narrowing...
Operation. Persist

I can save in real-time
 Drag and Drop Modules. In Page Editing. In Page Custom Editing. Direct
 State...
Update
• Finally, patterns reflect a visual change
         Indication. Busy Indication. Cursor Busy. In Context
         ...
Pattern-O-Matic
 Drag &                                   Lightweight
 Onscroll
  Select
  Hover                          ...
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
...
Shift. Event granularity.




                               submit hyperlink




           mouseout   hover keypress key...
“
                                          Allow input wherever you output.
                                             ...
Pattern. Drag & Drop                        1 Keep it direct




                       Designing for Ajax                ...
Pattern. In Page Editing                        1 Keep it direct




                           Designing for Ajax        ...
Pattern. In Page Editing                        1 Keep it direct




                           Designing for Ajax        ...
Pattern. Resizable Content.                        1 Keep it direct




                              Designing for Ajax  ...
The Patterns                                    1 Keep it direct




          Drag and Drop. Drag and Drop
         Modul...
1 Keep it direct


Prefer interaction within the page
What about discoverability?




                                    ...
1 Keep it direct


Prefer interaction within the page
What about discoverability?
                                     Use...
1 Keep it direct


Prefer interaction within the page
What about discoverability?
                                     Use...
1 Keep it direct


Prefer interaction within the page
What about discoverability?
                                     Use...
Shift. Immediacy.




                         page

       Interaction                                           Interact...
“
                                          …effective communication is a
                                          key fa...
Pattern. Live Search, Live Suggest                        2 Provide Live Feedback




                                    ...
Pattern. Auto Complete                        2 Provide Live Feedback




                         Designing for Ajax     ...
Pattern. Refining Search                        2 Provide Live Feedback




                           Designing for Ajax ...
Pattern. Indication. Inline Busy                        2 Provide Live Feedback




                                   Des...
Pattern. Indication. Inline Status, Character Counter            2 Provide Live Feedback




                             ...
Pattern. Deferred Content Load                        2 Provide Live Feedback




                                 Designi...
Pattern. Live Preview, Periodic Refresh                        2 Provide Live Feedback




                               ...
Pattern. Live Preview                        2 Provide Live Feedback




                        Designing for Ajax       ...
The Patterns                                       2 Provide Live Feedback



               Indication. Busy Indication.
...
2 Provide Live Feedback


Keep the goal in mind
Design for immediacy
Is it narrowing or is it distracting
Use feedback to ...
2 Provide Live Feedback


Keep the goal in mind
Design for immediacy
                                                     ...
2 Provide Live Feedback


Keep the goal in mind
Design for immediacy
                                                     ...
2 Provide Live Feedback


Keep the goal in mind
Design for immediacy
                                                     ...
Shift. Deeper Interaction.




                   desktop                                                          web
   ...
3
Offer an invitation




                  Designing for Ajax   59
Pattern. Invitation. Hover, Tooltip, Cursor Invitation.            3 Offer an Invitation




                             ...
Pattern. Invitation. Hover Invitation                        3 Offer an Invitation




                                   ...
Pattern. Invitation. Hover Invitation                        3 Offer an Invitation




                                   ...
Pattern. Invitation. Cursor Invitation                        3 Offer an Invitation




                                  ...
Pattern. Invitation. Drop Invitation                        3 Offer an Invitation




                                    ...
The Patterns                                       3 Offer an Invitation




               Invitation. Cursor Invitation....
3 Offer an Invitation


Make it engaging
Use lightweight events as a welcome mat
Rediscover the hover




                ...
3 Offer an Invitation


Make it engaging
Use lightweight events as a welcome mat
                                         ...
3 Offer an Invitation


Make it engaging
Use lightweight events as a welcome mat
                                         ...
3 Offer an Invitation


Make it engaging
Use lightweight events as a welcome mat
                                         ...
Shift. In-Page Interaction.

       1                  2   3                    4




classic flow across pages


       1 ...
4
Cross borders reluctantly




                 Designing for Ajax   71
Pattern. Endless Scrolling                    4 Cross Borders Reluctantly



 Rico LiveGrid




                          ...
Pattern. Live Paging                        4 Cross Borders Reluctantly


• At the very least make your paging fast




  ...
Pattern. Inline Assistant                    4 Cross Borders Reluctantly




                            Designing for Aja...
Pattern. Inline Validation                    4 Cross Borders Reluctantly




                             Designing for A...
Pattern. Validate and Suggest                    4 Cross Borders Reluctantly




                                Designing...
Pattern. Overlays (lightweight popups)                    4 Cross Borders Reluctantly


• For introduction of features
• F...
Pattern. In-Context Expand.                    4 Cross Borders Reluctantly




                              Designing for...
Pattern. Slide Out.                    4 Cross Borders Reluctantly




                      Designing for Ajax           ...
Pattern. Detail Zoom.                    4 Cross Borders Reluctantly




                        Designing for Ajax       ...
The Patterns                                    4 Cross Borders Reluctantly




             Endless Scrolling. Expandable...
4 Cross Borders Reluctantly


Rethink process flows
Its the user’s model, not the page model
Every page jump is a mental s...
4 Cross Borders Reluctantly


Rethink process flows
Its the user’s model, not the page model
                             ...
4 Cross Borders Reluctantly


Rethink process flows
Its the user’s model, not the page model
                             ...
4 Cross Borders Reluctantly


Use overlays
For momentary interruption
Replace page transition
When editing an individual, ...
4 Cross Borders Reluctantly


Use overlays
For momentary interruption
                                                    ...
4 Cross Borders Reluctantly


Use overlays
For momentary interruption
                                                    ...
Shift. Lightweight Actions.




                              ok




heavy click-weight




                              ...
“   Take nothing but memories leave
                                           nothing but footprints.
                   ...
Pattern. In Context Tools                        5 Leave a Light Footprint




                            Designing for A...
Pattern. In Context Tools                        5 Leave a Light Footprint




                            Designing for A...
Pattern. In Context Tools                           5 Leave a Light Footprint


• Microsoft Vista, Office 12
   Contextual...
Pattern. Live Ratings                        5 Leave a Light Footprint




                        Designing for Ajax     ...
Pattern. Remembered Collection                        5 Leave a Light Footprint




                                 Desig...
The Patterns                                   5 Leave a Light Footprint




                Auto Save. In Context
       ...
5 Leave a Light Footprint


Watch your click weight
Keep actions immediate and light
Count “clicks”




                  ...
5 Leave a Light Footprint


Watch your click weight
Keep actions immediate and light
Count “clicks”
                      ...
5 Leave a Light Footprint


Watch your click weight
Keep actions immediate and light
Count “clicks”
                      ...
Shift. Multiple Happenings.




page-based transitions




                                   multiple transitions,
      ...
6
Show transitions




                   Designing for Ajax   100
Pattern. In Context Progress                        6 Show Transitions




                               Designing for Aj...
Patterns. Scale, Zoom                        6 Show Transitions




                        Designing for Ajax            ...
Pattern. Active Spotlight                        6 Show Transitions




                            Designing for Ajax    ...
Pattern. Quick Spotlight                        6 Show Transitions




                           Designing for Ajax      ...
Pattern. Fade, Self-Heal, Slide, Collapse, Expand                6 Show Transitions




                                  ...
Transitions                                        6 Show Transitions


•   Brighten. Raise importance
•   Cross Fade. One...
The Patterns                                       6 Show Transitions




               Transition. Brighten Transition.
...
6 Show Transitions


Speak to the BRAIN
Understanding attention processing
Sending the wrong message




                 ...
6 Show Transitions


Speak to the BRAIN
Understanding attention processing
                                              W...
6 Show Transitions


Speak to the BRAIN
Understanding attention processing
                                              W...
Simple observations                               6 Show Transitions


• The more rapid the change the more important the
...
Shift. Page to Objects.




       page


                          objects


                          Designing for Ajax...
7
Think in objects




                   Designing for Ajax   113
The shift to objects                                      7 Think in Objects




                           Page-Based Web...
Pattern. Shareable Object                        7 Think in Objects




                            Designing for Ajax    ...
The Patterns                                   7 Think in Objects




               Rich Internet Object.
               ...
7 Think in Objects


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




          ...
7 Think in Objects


Rethinking the model
What is the user’s mental model?
                                               ...
7 Think in Objects


Rethinking the model
What is the user’s mental model?
                                               ...
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 addition...
Upcoming SlideShare
Loading in...5
×

Designing for Ajax

975

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
975
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
43
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Designing for Ajax"

  1. 1. Designing for Ajax Principles and Patterns for Designing Rich Internet Applications Bill W. Scott, Y! Ajax Evangelist bscott@yahoo-inc.com
  2. 2. 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
  3. 3. Ajax @ Yahoo Designing for Ajax 3
  4. 4. Yahoo! Pattern Library Release http://developer.yahoo.net/ypatterns/ Designing for Ajax 4
  5. 5. yuiblog.com http://yuiblog.com Designing for Ajax 5
  6. 6. Yahoo! Patterns Discussion Group http://groups.yahoo.com/group/ydn-patterns/ Designing for Ajax 6
  7. 7. 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
  8. 8. 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
  9. 9. 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
  10. 10. Designing for Ajax • Richness What is richness? • Ajax Patterns DNA of an Ajax Pattern • Principles Principles for Ajax Design Designing for Ajax 10
  11. 11. Richness Designing for Ajax 11
  12. 12. Defining Richness: Web in 3D • Interaction Dimension Interaction event • Data Dimension Data Presentation response • Presentation Dimension Designing for Ajax 12
  13. 13. 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
  14. 14. 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
  15. 15. Ajax = Just-in-Time. Immediacy. Just-in-time data Just-in-time presentation Just-in-time logic Designing for Ajax 15
  16. 16. 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
  17. 17. 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
  18. 18. 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
  19. 19. 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
  20. 20. Ajax Patterns Designing for Ajax 20
  21. 21. 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
  22. 22. But What Can XHR Do? • Make a request • Return a response • And do it asynchronously response XHR Object request Designing for Ajax 22
  23. 23. 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
  24. 24. 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
  25. 25. 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
  26. 26. 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
  27. 27. 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
  28. 28. 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
  29. 29. 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
  30. 30. Principles Designing for Ajax 30
  31. 31. 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
  32. 32. 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
  33. 33. “ Allow input wherever you output. -Alan Cooper 1 Keep it Direct Designing for Ajax 33
  34. 34. Pattern. Drag & Drop 1 Keep it direct Designing for Ajax 34
  35. 35. Pattern. In Page Editing 1 Keep it direct Designing for Ajax 35
  36. 36. Pattern. In Page Editing 1 Keep it direct Designing for Ajax 36
  37. 37. Pattern. Resizable Content. 1 Keep it direct Designing for Ajax 37
  38. 38. 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
  39. 39. 1 Keep it direct Prefer interaction within the page What about discoverability? Designing for Ajax 39
  40. 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 Designing for Ajax 40
  41. 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 Provide in-context tools Only good for single operations Can actually slow you down Designing for Ajax 41
  42. 42. 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
  43. 43. Shift. Immediacy. page Interaction Interaction Data Data Presentation Presentation refresh boundary Data Designing for Ajax 43
  44. 44. “ …effective communication is a key factor in the success of your product. -Jesse James Garrett 2 Provide live feedback Designing for Ajax 44
  45. 45. Pattern. Live Search, Live Suggest 2 Provide Live Feedback Designing for Ajax 45
  46. 46. Pattern. Auto Complete 2 Provide Live Feedback Designing for Ajax 46
  47. 47. Pattern. Refining Search 2 Provide Live Feedback Designing for Ajax 47
  48. 48. Pattern. Indication. Inline Busy 2 Provide Live Feedback Designing for Ajax 48
  49. 49. Pattern. Indication. Inline Status, Character Counter 2 Provide Live Feedback Designing for Ajax 49
  50. 50. Pattern. Deferred Content Load 2 Provide Live Feedback Designing for Ajax 50
  51. 51. Pattern. Live Preview, Periodic Refresh 2 Provide Live Feedback Office 12 Live Preview Designing for Ajax 51
  52. 52. Pattern. Live Preview 2 Provide Live Feedback Designing for Ajax 52
  53. 53. 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
  54. 54. 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
  55. 55. 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
  56. 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 Use live-previews Look before you leap Designing for Ajax 56
  57. 57. 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
  58. 58. 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
  59. 59. 3 Offer an invitation Designing for Ajax 59
  60. 60. Pattern. Invitation. Hover, Tooltip, Cursor Invitation. 3 Offer an Invitation Designing for Ajax 60
  61. 61. Pattern. Invitation. Hover Invitation 3 Offer an Invitation Designing for Ajax 61
  62. 62. Pattern. Invitation. Hover Invitation 3 Offer an Invitation Designing for Ajax 62
  63. 63. Pattern. Invitation. Cursor Invitation 3 Offer an Invitation Designing for Ajax 63
  64. 64. Pattern. Invitation. Drop Invitation 3 Offer an Invitation Designing for Ajax 64
  65. 65. The Patterns 3 Offer an Invitation Invitation. Cursor Invitation. Drop Invitation. Tool Tip Invitation. Hover Invitation. Designing for Ajax 65
  66. 66. 3 Offer an Invitation Make it engaging Use lightweight events as a welcome mat Rediscover the hover Designing for Ajax 66
  67. 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 Designing for Ajax 67
  68. 68. 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
  69. 69. 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
  70. 70. Shift. In-Page Interaction. 1 2 3 4 classic flow across pages 1 2 3 4 rich flow within page 70 Designing for Ajax
  71. 71. 4 Cross borders reluctantly Designing for Ajax 71
  72. 72. Pattern. Endless Scrolling 4 Cross Borders Reluctantly Rico LiveGrid Yahoo! Mail Beta (Oddpost) Designing for Ajax 72
  73. 73. Pattern. Live Paging 4 Cross Borders Reluctantly • At the very least make your paging fast Designing for Ajax 73
  74. 74. Pattern. Inline Assistant 4 Cross Borders Reluctantly Designing for Ajax 74
  75. 75. Pattern. Inline Validation 4 Cross Borders Reluctantly Designing for Ajax 75
  76. 76. Pattern. Validate and Suggest 4 Cross Borders Reluctantly Designing for Ajax 76
  77. 77. 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
  78. 78. Pattern. In-Context Expand. 4 Cross Borders Reluctantly Designing for Ajax 78
  79. 79. Pattern. Slide Out. 4 Cross Borders Reluctantly Designing for Ajax 79
  80. 80. Pattern. Detail Zoom. 4 Cross Borders Reluctantly Designing for Ajax 80
  81. 81. 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
  82. 82. 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
  83. 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 Designing for Ajax 83
  84. 84. 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
  85. 85. 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
  86. 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 Designing for Ajax 86
  87. 87. 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
  88. 88. Shift. Lightweight Actions. ok heavy click-weight light-weight actions Designing for Ajax 88
  89. 89. “ Take nothing but memories leave nothing but footprints. - Hiking trail sign 5 Leave a light footprint Designing for Ajax 89
  90. 90. Pattern. In Context Tools 5 Leave a Light Footprint Designing for Ajax 90
  91. 91. Pattern. In Context Tools 5 Leave a Light Footprint Designing for Ajax 91
  92. 92. Pattern. In Context Tools 5 Leave a Light Footprint • Microsoft Vista, Office 12 Contextual Command Tabs Designing for Ajax 92
  93. 93. Pattern. Live Ratings 5 Leave a Light Footprint Designing for Ajax 93
  94. 94. Pattern. Remembered Collection 5 Leave a Light Footprint Designing for Ajax 94
  95. 95. 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
  96. 96. 5 Leave a Light Footprint Watch your click weight Keep actions immediate and light Count “clicks” Designing for Ajax 96
  97. 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 Designing for Ajax 97
  98. 98. 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
  99. 99. Shift. Multiple Happenings. page-based transitions multiple transitions, single page Designing for Ajax 99
  100. 100. 6 Show transitions Designing for Ajax 100
  101. 101. Pattern. In Context Progress 6 Show Transitions Designing for Ajax 101
  102. 102. Patterns. Scale, Zoom 6 Show Transitions Designing for Ajax 102
  103. 103. Pattern. Active Spotlight 6 Show Transitions Designing for Ajax 103
  104. 104. Pattern. Quick Spotlight 6 Show Transitions Designing for Ajax 104
  105. 105. Pattern. Fade, Self-Heal, Slide, Collapse, Expand 6 Show Transitions Designing for Ajax 105
  106. 106. 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
  107. 107. 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
  108. 108. 6 Show Transitions Speak to the BRAIN Understanding attention processing Sending the wrong message Designing for Ajax 108
  109. 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 Designing for Ajax 109
  110. 110. 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
  111. 111. 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
  112. 112. Shift. Page to Objects. page objects Designing for Ajax 112
  113. 113. 7 Think in objects Designing for Ajax 113
  114. 114. 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
  115. 115. Pattern. Shareable Object 7 Think in Objects Designing for Ajax 115
  116. 116. The Patterns 7 Think in Objects Rich Internet Object. Available. Selected. Identifiable Object. Designing for Ajax 116
  117. 117. 7 Think in Objects Rethinking the model What is the user’s mental model? How to distinguish from content? Designing for Ajax 117
  118. 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 Designing for Ajax 118
  119. 119. 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
  120. 120. Questions? Designing for Ajax 120
  121. 121. Designing for Ajax 121
  122. 122. Participate? Designing for Ajax 122
  123. 123. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×