Friday, May 12th, 2006

Ajax Experience Day 3: Bill Scott on Ajax Design (Patterns and Principles)

Category: The Ajax Experience, Usability

<p>Update: Andre Charland also has notes from this session.

Bill Scott’s talking about designing for Ajax – principles and patterns – at The Ajax Experience. Yahoo really gets patterns and their significance to interaction design, and Bill and his colleagues have been contributing many Ajax patterns and related components to the community in the past few months.

BACKGROUND

Worked on game, always interesting to see transition to a new platform.

Worked on Rico, it’s still going on and there’ll be a major version upgrade soon, although Bill’s no longer involved.

Evangelising Ajax at Yahoo!

Internally, Yahoo has about 60-80 interaction design patterns.

Now 20-30 Ajax patterns, guessing there will ultimately be 100 but who knows.

There’s also the patterns at AjaxPatterns.org, includes software design
patterns as well as the interaction style patterns (which is the main style of
the Yahoo patterns).

Designing pattern service over REST API. Mash up the patterns. (MM – I’ve been
talking to Bill about doing the same with AjaxPatterns, and hopefully other
collections will go the same way.)

Yahoo! UI Library – Tree, Calendar, Animation, XHR, etc.

Q: Will have technical system design patterns as well?
A: No, beyond the scope. However, the point is to have some umbrella to hang things on, could then say “this is how Dojo implements it” etc.

Q: How about the distinction between single-page-style desktop replacement
apps versus web-style apps.
A: The patterns do address both types….

PRINCIPLES

  • Keep it direct
  • Provide live feedback
  • Offer an invitation
  • Cross borders reluctantly
  • Leave a light footprint
  • Show transitions
  • think in objects

Yahoo Mail Beta – People treat it as a desktop app, so it’s obvious from the start that things can be dragged, without being told.

In Page Editing. Prefer Interaction within the page. When NetFlix put editable review stars on, in 2000 or so, people said can’t combine input and output. But now we think of the read-write web, can have “invitations” to let people know something’s editable, etc. The key issue is discoverability. Have been done well on the desktop, but still learning how to do with Ajax.

In-context-tools can be used for this too. e.g. Backpackit. Verbs (“Edit”, Trashcan) turn up next. With backpackit, sometimes want to click several items, which is a hassle as things start moving around. Almost want to say “turn Ajax off” and just select the items yourself. (MM – Same problem with Odeo, which is actually more of a problem as there’s a slowish fade effect every time you delete a single item.)

Kayak – good example of autocomplete. Also in Yahoo! mail engine.

Refining Search pattern (MM – cf Live Search pattern). Keeps showing result as user refines it.

Indication pattern. Get live feedback, e.g. Yahoo! Answers – “You have 98 characters left”.

Deferred Content Load (MM – cf Multi-Stage Download).

Live Preview pattern. e.g. E-Commerce site shows product change as you set colours etc.

With these live feedback patterns: Keep the goal in mind. Design for immediacy. Google Suggest – Can be useful looking for technical stuff because you can see what other people have looked up. Most users are searching for results and not terms. Are you really narrowing down or just distracting with info along the way. Use feedback to boost confidence. Let the user iterate where possible.

Bill’s showing a very cool 2×2 matrix of tag clouds (ie 4 tag clouds). Desktop versus Web, Old versus New. Each tagcloud shows the kind of interaction used, e.g. “Click” is very high on the web, “Dragging” used to be very low and is now higher etc.

Invitation > Hover Indication. (cf Popup). Amazon does this with book – maybe it’s not good from user experience perspective, but Amazon drives things via sales as well, maybe this really does work for encouraging sales.

Invitation > Cursor Indication.

Keep actions out of it. Don’t make users afraid to explore – want to make users feel safe. So not good if you’re popping things up, making big actions in response to hover, etc – then, user will feel frustrated, afraid to navigate around the page freely.

So stuck with the tension between being subtle and discoverable.

“Crossing borders reluctantly”. Boundaries refers to “page boundaries” – Classic flow in pages versus interaction in a single page. Ideally, stick within the same page and avoid the refresh. Pagination – often bad, at least make it fast, Ajaxify it if you’re going to paginate. Every page jump is a mental speed bump. Bill’s “Death To Scrolling” article – use scrolling instead of pagination. Particularly compelling when you want to check items, which is always confusing with pagination (if you go to next page, are the currently checked items still checked). Paging, supporting browser history, etc. (cf Unique URLs).

Use space creatively. Slide, zoom, flip, lens, fade. e.g. Rico accordian.

Remembered collection. e.g. Keep adding to a shopcart.

Watch your click weight. Count “clicks”.

“Show Transitions” What we think of Ajax visually – zooming, spotlighting, fading, etc. (cf One-Second Spotlight pattern and other one-second effects). Added a bunch of transitions to Yahoo! patterns.

0′Reilly book: Mind Hacks. Recommended reading. Hack 37: Some people have problems with the part of their brain that processes visual information. They can’t see things as such, but if something thrown towards them, they’ll reflexively duck. What’s going on? Second part of the brain dealing with this kind of visual processing. Same as advertising that shakes back and forth, drawn to look at it. So – we can use this for good. Transitions get to that part of the brain. Bill notes he wrote about this recently on his blog.

Can’t just include effect on page and think it’s going to communicate, you’ve got to think first what you want to communicate

Users get familiar with effect. One guideline someone uses: Decide on what you’re trying to communicate, then provide the appropriate effect for it.

Shareable Object. e.g. What’s happening with the patterns – treat the patterns as objects. Mash them up how you want to.

Rethinking the model – what’s the user’s mental model. How to distinguish from content? Creates community, sharing, etc. Web 2.0 as a platform. Yahoo’s Event Browser – move map around, see events going on.

Q: How do you design, whiteboard them, etc.
A: Created storyboard notation. Along top of grid, have various event states that can happen. Can map out what you want to do. This area is challenging. Earlier on, created toolkit to animate wireframes.

Q: Accessibility.
A: Important, taken into account, very interested.

Q: Flash?
A: Working with Flash evangelist. All these patterns fit well with Flash. Initial blog of principles got a lot of attention from the Flash community.

Q: Save/Cancel and Undo functionality?
A: In the case of inline edit, undo mightn’t apply because it’s too small. If text editing, Undo seems natural. Tricky in other areas. Refresh, Back Button.

Q: Have you looked at basic interfaces versus richer – eg. For Yahoo Mail, would you use the new rich Beta or the existing UI?

When Yahoo Mail rolls out, will still offer older version, one reason is bandwidth. Same with photos. With mail, nice thing is you’re not forced to drag-and-drop – even from accessibility perspective (not just for novices) it’s important. Animation – do I have to watch this animate? If you’re going to have a transition, do it very quickly, e.g. hundredth of a second.

Related Content:

Posted by Michael Mahemoff at 8:56 pm
4 Comments

++++-
4 rating from 35 votes

4 Comments »

Comments feed TrackBack URI

Woh! It started me thinking how much preparation is necessary in designing even a simple UI. Accept my sincere appreciation for the wonderful article.

Comment by demandpoint — May 13, 2006

[...] Ajaxian » Ajax Experience Day 3: Bill Scott on Ajax Design (Patterns and Principles) (tags: ajax patterns javascript) [...]

Pingback by Collum’s Column » Blog Archive » links for 2006-05-15 — May 15, 2006

[...] I was looking forward to Bill Scott’s talk on Yahoo’s usability patterns effort all along and he didn’t disappoint (My notes on Bill’s talk). He gave plenty of examples and I especially liked his screencasts. I learned a few things about Yahoo’s approach and also some interesting ways to present pattern material. Whereas I separated out principles from patterns, Bill explained a principle and outlined several related patterns. As Bill mentioned in his talk, he’s spearheading an effort to help people mashup the patterns. I’ve already demo’d a couple of examples of this, using only the AjaxPatterns: The AjaxPatterns Reader and the AjaxPatterns Portal Demo. Bill’s plan is for all of us (Yahoo, AjaxPatterns, and other collections) to expose pattern data as JSON (most likely, JSON-P), so people can combine them how they please. Writing some JS code, you’ll be able to say “Give me the HTML for the solution of Cross-Domain Proxy”. [...]

Pingback by Software As She’s Developed - The Ajax Experience, May, 2006 (SF) Wrapup — May 17, 2006

[...] Bill Scott on Ajax Design (Patterns and Principles) Session notes from Ajax Experience Day 3: Bill Scott on Ajax Design (Patterns and Principles) via Ajaxian (tags: ajax patterns yahoo interactiondesign ria) [...]

Pingback by links for 2006-05-20 at disambiguity — May 20, 2006

Leave a comment

You must be logged in to post a comment.