• Save

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Designing For Ajax

on

  • 61,138 views

Given for Easy7 SIGCHI-SI in Bangalore 1/5/2007 ...

Given for Easy7 SIGCHI-SI in Bangalore 1/5/2007

With the advent of Ajax, new patterns of interaction have emerged on the Web. Bill Scott provides insight on how to best take advantage of the power of Ajax technology for designing a great user experience through a series of best practices, summarized as eight key principles. Each principle and its nuances are illustrated in detail with real world examples and counter-examples from both inside and outside Yahoo!

Statistics

Views

Total Views
61,138
Views on SlideShare
58,955
Embed Views
2,183

Actions

Likes
262
Downloads
0
Comments
3

75 Embeds 2,183

http://talktalktalk.free.fr 1205
http://blog.dreamcss.com 480
http://looksgoodworkswell.blogspot.com 80
http://zankke.tistory.com 71
http://www.slideshare.net 52
http://iwaysdeveloper.wordpress.com 29
http://www.ajaxlines.com 24
http://chunghe.blogspot.com 22
http://www.linkedin.com 20
http://blog.juszczyk.biz 17
http://www.yago1.com 15
http://chunghe.blogspot.tw 14
http://in-cubed.blogspot.com 13
http://v-writes.blogspot.com 10
http://jujo00obo2o234ungd3t8qjfcjrs3o6k-a-sites-opensocial.googleusercontent.com 10
http://kesakoweb.wordpress.com 8
http://www.esidyo.com 7
https://www.linkedin.com 6
http://hrispd-portal 6
http://cafemorrison.blogspot.com 6
http://wildfire.gigya.com 5
http://technophobic.blogspot.com 5
http://paper.li 4
http://knightspirits.blogspot.com 4
http://www.ajaxfreak.com 3
http://techno-sphere.blogspot.com 3
http://www.looksgoodworkswell.com 3
http://platform001.mixi.jp 3
http://militarytournament.com 2
http://grancanario.com 2
http://www.lmodules.com 2
http://inf-proj.epoka.edu.al 2
http://cafemorrison.blogspot.com.ar 2
http://www.webjam2.com 2
http://www.dgmyspace.dumgal.ac.uk 2
http://www.pharmaconnectme.com 2
http://10.0.140.244 2
http://localhost 2
http://www.slidecrunch.com 2
http://test.yago1.com 1
http://www.ofertadeviajes.eu 1
http://valdeande.com 1
http://static.slidesharecdn.com 1
http://fernando-alonso.blog.com 1
http://uideveloper.tistory.com 1
http://s.deeeki.com 1
http://us-w1.rockmelt.com 1
http://209.85.129.104 1
http://cafemorrison.blogspot.in 1
http://blog.markerstudio.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

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…
  • As a management instructor I appreciate viewing the function of others. This is among the best demonstration on planning I have viewed.
    Teisha
    http://dashinghealth.com http://healthimplants.com
    Are you sure you want to
    Your message goes here
    Processing…
  • The last slide is incorrect, you can find this talk at:
    http://billwscott.com/share/presentations/2007/e7/
    Are you sure you want to
    Your message goes here
    Processing…
  • Hey Bill,

    Welcome to Slideshare! Great presentation.
    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 rich interaction Bill Scott Yahoo! Ajax Evangelist b.scott@yahoo.com
  • background
  • developer.yahoo.com/ypatterns
  • surfacing vocabulary
  • current patterns Breadcrumbs. Module Tabs. Navigation Tabs. Auto Complete. Pagination. Item Pagination. Search Pagination. Ratings and Reviews. Architecture of a Review. Rating an Object. Writing a Review. Drag and Drop. Drag and Drop Modules. Transition. Dim. Brighten. Cross Fade. Contract. Expand. Fade In. Fade Out. Move. Self-Healing. Slide. Highlight. Invitation. Cursor Invitation. Drop Invitation. Tool Tip Invitation. Hover Invitation.
  • rich 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. 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.
  • classic model. rich model. Http My Profile Response Server Photo Name Joe Smith Name Gender Male Gender Age 27 Age Http Submit Edit Request My Profile Server XHR Name Joe Smith Object Tim Jones Gender Male Age 27 Save
  • interaction. feedback. information. page Interaction Info Info Feedback refresh boundary
  • interaction + feedback + information = richness Interaction Info Feedback
  • Interaction Feedback Info design principles for richness
  • Interaction Feedback Info interaction principles
  • principle. make it direct. pattern. in-page action. pattern. inline editing. pattern. drag & drop. pattern. in-context tools.
  • make it direct Inline Editing Use inline forms where possible Use lightweight popups for ancillary information
  • make it direct In-context tools Same as context menus Only good for single objects Can actually slow you down
  • make it direct Use Drag & Drop where appropriate Not for simply setting an attribute Don’t construct artificial visual constructs
  • make it direct Use Drag & Drop where appropriate Not for simply setting an attribute Don’t construct artificial visual constructs Good for layout changes Needs transitions
  • make it direct Drag and Drop Modules - Interesting Moments Grid ID: Bill Scott & Eric Miraglia Date: Currently on beta.my.yahoo.com Nov-0 Mouse Drag Over Drag Over Drag Over Drop Drop Hover Mouse Down Drag Initiated Valid Target Invalid Target Parent Container Accepted Rejected Cursor CSS Move cursor Move cursor CSS CSS Move cursor CSS Move cursor CSS Move cursor CSS Move cursor Normal Cursor Normal Cursor N Tool Tip Drag Object Modules animates into the area Modules animates back to M Full Opacity Reduced Opacity Reduced Opacity Reduced Opacity & Invalid Badge Reduced Opacity just below insertion bar the home area t Module comes to rest in new Module comes back to rest M area at full opacity r Modules slide up in a self-healing transition to close hole Drop Target I Insertion bar is removed as first Insertion bar is removed a No insertion bar, just a gap No insertion bar, just a gap Insertion bar showing where it will drop No insertion bar, just a gap No insertion bar, just a gap & original holeframe of animation as first frame of animation a Take care of the interesting moments
  • Drag and Drop Modules - Interesting Moments Grid ID: Bill Scott & Eric Miraglia Date: Drag Over Drag Over Drag Over Drop Initiated Valid Target Invalid Target Parent Container Accepted CSS Move cursor CSS Move cursor CSS Move cursor Normal Cursor N Modules animates into the area M Reduced Opacity Reduced Opacity & Invalid Badge Reduced Opacity just below insertion bar t Module comes to rest in new M area a Modules slide up in a self-healing transition to close hole Insertion bar is removed as first I
  • principle. keep a light footprint. pattern. rating an object. pattern. in page action. pattern. remembered collections.
  • keep a light footprint Remove the “pain points” Shorten the path Keep actions immediate and light Use hover, blur, focus; avoid heavy events
  • keep a light footprint Design for engagement Use invitations & feedback Treat it like an impusle aisle Theory of fun
  • principle. cross borders reluctantly. pattern. on-demand scrolling. pattern. inline assistant. pattern. in-context expand. pattern. hover details. pattern. lightweight popup + lightbox.
  • cross borders reluctantly Rethink process flows It’s the user’s mental model, not the page model Every page jump is a mental speed bump
  • cross borders reluctantly Re-think paging Use scrolling for “owned” data Watch out for dual scroll bar issue Hybrid of paging & scrolling
  • cross borders relunctantly Use Overlays For more information Replace page transition When editing an individual, more complex item Be symmetrical Try not to disturb the page
  • cross borders relunctantly Use in-context expands For editing part of a collection Need to see surrounding context For managing content modules
  • cross borders relunctantly Use real-estate creatively Use slideouts Use in-place zoom Remember the backstage
  • key principle Interaction prefer direct, lightweight, in-page interaction
  • Interaction Feedback Info feedback principles
  • principle. give live feedback. pattern. live suggest. pattern. periodic refresh. pattern. auto complete. pattern. busy indicator. pattern. live previews.
  • give live feedback Keep the goal in mind Design for relevancy Is it narrowing or distracting
  • give live feedback Keep the goal in mind Design for relevancy Is it narrowing or distracting? Use feedback to boost confidence Let the user iterate where possible
  • give live feedback Shape user perception Make time pass faster Make application feel more responsive
  • give live feedback Prevent errors before-hand Ounce of preventive design worth pound of error-handling Use live-previews Look before you leap
  • give live feedback Let the user iterate where possible Keep feedback focused Use laws of proximity in context feedback Respect feedback bandwidth Reveal relevance just-in-time Avoid side-noise (periphial distractions)
  • give live feedback Keep feedback focused Use laws of proximity in context feedback Respect feedback bandwidth Reveal relevance just-in-time Avoid side-noise (periphial distractions) Use nuance
  • principle. offer an invitation. pattern. hover invitation. pattern. drop invitation. pattern. tour invitation. pattern. tooltip invitation + hover invitation + cursor invitation.
  • offer an invitation Discoverability No easy answer Use the hover to reveal interaction Use the familar to teach the new Tours are generally a band-aid Can’t flag all interactions
  • offer an invitation Bridge the new with the old Hyperlinks as actions Reveal with hovers Drop down clues
  • offer an invitation Make it inviting Treat it as a welcome mat Use hover, cursor, tooltip, and page Keep the noise down
  • offer an invitation Keep actions out of it Let the user feel free to explore Don’t proselytize
  • principle. show transitions. pattern. fade transition + self-healing transition. pattern. zoom box. pattern. slide transition. pattern. active spotlight.
  • show transitions Speak to the brain Understanding attention processing
  • show transitions Speak to the brain Understanding attention processing Sending the wrong message
  • show transitions What you can communicate... Speed up time Slow down interaction Show state change Show relationships between objects Focus attention
  • show transitions Keep it sane “Cut it in-half ” rule of thumb Use “contrast knob” approach Don’t overuse
  • key principle Feedback Provide invitations beforehand, transitions during, and feedback after interaction
  • Interaction Feedback Info information principles
  • principle. think in objects. pattern. shareable object.
  • think in objects
  • principle. tie information to interactivity. pattern. multi-variate views.
  • tie information to interactivity Think “deeper interaction” Multi-variate data
  • tie information to interactivity Think “deeper interaction” Multi-variate data Interesting relationships
  • tie information to interactivity Think “deeper interaction” Multi-variate data Interesting relationships Just-in-time information
  • key principle Info Think in objects, tie information to interactivity
  • key principles for richness Prefer direct, lightweight, in-page interactions Interaction Provide invitations beforehand, Feedback transitions during and feedback after interaction Think in objects and Info tie information to interactivity
  • developer.yahoo.com/ypatterns/ pattern library. yahoo! blog. yuiblog.com my blog. looksgoodworkswell.com this prez. ue.corp.yahoo.com/bscott/share/presentations/2007/e7