Designing for Ajax. Principles and Patterns for Designing Rich Internet Applications. Bill W. Scott, Y! Ajax Evangelist.

Transcription

1 Principles and Patterns for Designing Rich Internet Applications Bill W. Scott, Y! Ajax Evangelist

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 2

3 Yahoo 3

4 Yahoo! Pattern Library Release 4

5 yuiblog.com 5

6 Yahoo! Patterns Discussion Group 6

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

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. 8

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 9

10 Richness What is richness? Ajax Patterns DNA of an Ajax Pattern Principles Principles for Ajax Design 10

11 Richness 11

12 Defining Richness: Web in 3D Interaction Dimension Interaction event Data Dimension Data Presentation Dimension Presentation response 12

13 Classic Web Interaction course-grained Data loaded with the page or obtained via refresh Presentation: page-based updates page Interaction Data Presentation refresh boundary Data 13

14 Classic Web Illustrated browser My Profile Http Response Photo Name Gender Name Gender Age Age Joe Smith Male 27 Submit Edit Http Request Server Interaction event Data response Presentation 14

15 Ajax = Just-in-Time. Immediacy. Just-in-time data Just-in-time presentation Just-in-time logic 15

16 Ajax Model - New & Improved! Now with Deeper Interaction! Now with Just-in-Time Data & Just-in-Time Logic! XMLHttpRequest (XHR) is the secret sauce! Now with Richer Interface! Interaction Presentation Data All dimensions are closer 16

17 Ajax Illustrated browser My Profile Name Gender Age Joe Tim Smith Jones Male 27 Save onreadystatechange XHR Object Server send() Interaction Data Presentation event response 17

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 18

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 19

20 Ajax Patterns 20

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. 21

22 But What Can XHR Do? Make a request Return a response And do it asynchronously response XHR Object request 22

23 Anatomy of a Pattern Ajax design patterns contain three steps Trigger (event or timer) Operation (Ajax, remote scripting) Update (presentation) Trigger Operation Update 23

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 24

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 25

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 26

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 27

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 28

29 Pattern-O-Matic Keypress Onscroll Drag & Select Hover Trigger Drop Blur Filters Event Module + Operation Lookup Persist + Lightweight Content Search Drop UI Grid Popup Cell Reflects Module Results Update Down Updates Shows OK Updates Refined Status Detail = Design Persist Persistent Refining Endless Hover Inline Auto Pattern Design Ajax Complete Scrolling Search Pattern Portals Detail Edit Complete Pattern Drag and Drop Modules. In Page Editing. In Page Custom Editing. Auto Direct Complete. State Editing. Deferred Grid Content Cell Editing. Loading. Inline Dynamic Custom Goal. Editing. Narrowing Choices. Inline Tag Refining Editing. Search. Popup Live Custom Search. Editing. Dynamic Slide-out Filter. Custom Detail Zoom. Endless Editing. Scrolling. Inline Expandable Text Editing. Paging Inline Boundary. Reordering. Fresh Auto Content. Save. Hover Detail. Remembered In Place Collection. Drill Down. Remembered On Demand Preferences. Refresh. Periodic Rating Refresh. an Resizable Modules. Scrolling Object. Modules. Auto Form Fill. 29

30 Principles 30

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 31

32 Shift. Event granularity. submit hyperlink mouseout hover keypress keydown mousedown drop filter choices mouseup drag click select focus blur resize move timeout 32

33 Allow input wherever you output. -Alan Cooper 1 Keep it Direct 33

34 Pattern. Drag & Drop 1 Keep it direct 34

35 Pattern. In Page Editing 1 Keep it direct 35

36 Pattern. In Page Editing 1 Keep it direct 36

37 Pattern. Resizable Content. 1 Keep it direct 37

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. 38

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

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 40

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 41

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 Provide in-context tools Only good for single operations Can actually slow you down Use drag and drop where appropriate Not for simply setting an attribute Good for layout changes or containment Needs transitions 42

43 Shift. Immediacy. page Interaction Interaction Data Data Presentation Presentation refresh boundary Data 43

44 effective communication is a key factor in the success of your product. -Jesse James Garrett 2 Provide live feedback 44

45 Pattern. Live Search, Live Suggest 2 Provide Live Feedback 45

46 Pattern. Auto Complete 2 Provide Live Feedback 46

47 Pattern. Refining Search 2 Provide Live Feedback 47

48 Pattern. Indication. Inline Busy 2 Provide Live Feedback 48

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

50 Pattern. Deferred Content Load 2 Provide Live Feedback 50

51 Pattern. Live Preview, Periodic Refresh 2 Provide Live Feedback Office 12 Live Preview 51

52 Pattern. Live Preview 2 Provide Live Feedback 52

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. 53

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 54

55 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 Keep the user engaged Time passes faster Look for engaging moments

56 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 Keep the user engaged Time passes faster Look for engaging moments Use live-previews Look before you leap 56

57 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 Keep the user engaged Time passes faster Look for engaging moments Use live-previews Look before you leap Keep feedback focused Keep it in context Updating too many areas at once will be confusing Show dynamically what is relevant Avoid creating feedback noise/jitter 57

58 Shift. Deeper Interaction. desktop hover blur focus click key shiftclick doubleclick drag dragdrop dragflipdrop shiftdoubleclick tripleclick shifttripleclick hover blur focus click key shiftclick doubleclick drag dragdrop dragflipdrop shiftdoubleclick tripleclick shifttripleclick web hover blur focus click key shiftclick doubleclick drag dragdrop hover blur focus click key shiftclick doubleclick drag dragdrop 58

59 3 Offer an invitation 59

60 Pattern. Invitation. Hover, Tooltip, Cursor Invitation. 3 Offer an Invitation 60

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

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

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

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

65 The Patterns 3 Offer an Invitation Invitation. Cursor Invitation. Drop Invitation. Tool Tip Invitation. Hover Invitation. 65

66 3 Offer an Invitation Make it engaging Use lightweight events as a welcome mat Rediscover the hover 66

67 3 Offer an Invitation Make it engaging Use lightweight events as a welcome mat Rediscover the hover Keep actions out of it Don t make the user afraid to explore Don t proselytize 67

68 3 Offer an Invitation Make it engaging Use lightweight events as a welcome mat Rediscover the hover Keep actions out of it Don t make the user afraid to explore Don t proselytize Get the actors involved Hover Invitation Cursor Invitation Tooltip Invitation

69 3 Offer an Invitation Make it engaging Use lightweight events as a welcome mat Rediscover the hover Keep actions out of it Don t make the user afraid to explore Don t proselytize Get the actors involved Hover Invitation Cursor Invitation Tooltip Invitation Use invitations to aid discoverability Two challenges: idiom & feature Adding signposts, always-on clues doesn t scale Add tours, help pedals, tips, spotlights 69

70 Shift. In-Page Interaction classic flow across pages rich flow within page 70

71 4 Cross borders reluctantly 71

72 Pattern. Endless Scrolling 4 Cross Borders Reluctantly Rico LiveGrid Yahoo! Mail Beta (Oddpost) 72

73 Pattern. Live Paging 4 Cross Borders Reluctantly At the very least make your paging fast 73

74 Pattern. Inline Assistant 4 Cross Borders Reluctantly 74

75 Pattern. Inline Validation 4 Cross Borders Reluctantly 75

76 Pattern. Validate and Suggest 4 Cross Borders Reluctantly 76

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 77

78 Pattern. In-Context Expand. 4 Cross Borders Reluctantly 78

79 Pattern. Slide Out. 4 Cross Borders Reluctantly 79

80 Pattern. Detail Zoom. 4 Cross Borders Reluctantly 80

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. 81

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 82

83 4 Cross Borders Reluctantly Rethink process flows Its the user s model, not the page model Every page jump is a mental speed bump Rethink paging Its the user s model, not the paging model Use scrolling for owned data Watch out for dual scroll bar issue 83

84 4 Cross Borders Reluctantly Rethink process flows Its the user s model, not the page model Every page jump is a mental speed bump Rethink paging 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? 84

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 85

86 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 Use in-context expands For editing part of a collection Need to see surrounding context For managing content modules 86

87 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 Use in-context expands For editing part of a collection Need to see surrounding context For managing content modules Use space creatively Slide, zoom, flip, lens, fade Think of your backstage 87

88 Shift. Lightweight Actions. ok heavy click-weight light-weight actions 88

89 - Take nothing but memories leave nothing but footprints. Hiking trail sign 5 Leave a light footprint 89

90 Pattern. In Context Tools 5 Leave a Light Footprint 90

91 Pattern. In Context Tools 5 Leave a Light Footprint 91

92 Pattern. In Context Tools 5 Leave a Light Footprint Microsoft Vista, Office 12 Contextual Command Tabs 92

93 Pattern. Live Ratings 5 Leave a Light Footprint 93

94 Pattern. Remembered Collection 5 Leave a Light Footprint 94

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. 95

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

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 97

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 98

99 Shift. Multiple Happenings. page-based transitions multiple transitions, single page 99

100 6 Show transitions 100

101 Pattern. In Context Progress 6 Show Transitions 101

102 Patterns. Scale, Zoom 6 Show Transitions 102

103 Pattern. Active Spotlight 6 Show Transitions 103

104 Pattern. Quick Spotlight 6 Show Transitions 104

105 Pattern. Fade, Self-Heal, Slide, Collapse, Expand 6 Show Transitions 105

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 106

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. 107

108 6 Show Transitions Speak to the BRAIN Understanding attention processing Sending the wrong message 108

109 6 Show Transitions Speak to the BRAIN Understanding attention processing Sending the wrong message What you can communicate Speed up time Slow down time Show state change Show relationships between objects 109

110 6 Show Transitions Speak to the BRAIN Understanding attention processing Sending the wrong message What you can communicate 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 110

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 111

112 Shift. Page to Objects. page objects 112

113 7 Think in objects 113

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/ Sharing Bookmark Content, properties, and behaviors 114

115 Pattern. Shareable Object 7 Think in Objects 115

116 The Patterns 7 Think in Objects Rich Internet Object. Available. Selected. Identifiable Object. 116

117 7 Think in Objects Rethinking the model What is the user s mental model? How to distinguish from content? 117

118 7 Think in Objects Rethinking the model What is the user s mental model? How to distinguish from content? The power of sharing Bloggable, shareable, findable How to dial-in community Collections 118

119 7 Think in Objects Rethinking the model What is the user s mental model? How to distinguish from content? The power of sharing 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 119

120 Questions? 120

121 121

122 Participate? 122

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 123