Monday, September 15th, 2008

Wireframing Ajax Interactions – Richard Rutter, @Media Ajax

Category: Conferences, Design

<p>Blogging from @media Ajax. Richard Rutter is talking about wireframing Ajax interactions.

“Wireframing Ajax is a Bitch” – Jeffrey Zeldman

Development Phases

Looking at standard development phases, as a background.

Lo-fi using stickies (post-it notes) to capture design features. Then lo-fi UI sketches. For some sites, this is where we would stop, no need to go any further because it’s obvious – can just go straight to detailed visual design.

Richard’s showing some detailed wireframes. These are actual web pages. ratemyarea.com – the final site ended up very different from the wireframe, but that’s fine. The wireframe contained all the basic content. Yes, CSS isn’t magic and they did have to re-code HTML and CSS, but still, can retain some things like usage of microformats.

Looking at sites like Kayak and Google Analytics with a ton of Ajaxy complexity. Can’t get a feel for this until you play around with it.

Reminder of the classic “what the customer really wanted” cartoon. (I forgot about that! And was pleasantly astonished to learn there’s a whole website dedicated to evolving the cartoon :)).

Specific Techniques

Patterns, Behaviours, Views, Notes.

Patterns – design that can be reused: e.g. headers and footers.

Behaviours – e.g. progressive disclosure. e.g. including a lightbox in the wireframe because it’s trivial for us to put it in there (using a standard library, without bothering to customise it at this stage), and it is significant to the interaction, so we can see if it feels right. e.g. on e-commerce site, adding to basket updates the basket field – doing this in the wireframe lets us see if users notice the update.

Views – Exploring/experimenting with views of particular interest. e.g. how a significant table or list might be ordered.

Notes – Embedding design notes inside the page, using CSS to toggle them on and off. e.g. simulate login/logout by stylesheet toggle (not real login). (a specific css class for “logged in” or “logged out”). See polypage library.

Related Content:

  • Ajax Learning Guide
    Chances are, you've been doing JavaScript and XML developer work in Lotus Domino for quite some time. This old/new approach is causing quite a stir in...
  • Ajax Learning Guide
    Are you a Web developer? The time has come to rethink your entire approach to developing Web applications. Find out about the Ajax approach...
  • Choosing an Ajax framework
    Your customers won't have to fear Ajax if they have the right tools to work with. Help them determine which Ajax-specific framework, library or...
  • ClearNova integrates Java and Ajax
    Making sure that Java-built Web services don't end at the server level, ClearNova has built a development environment that plugs Java into an Ajax...
  • Ajax everywhere: Which framework to choose?
    Writing and debugging Ajax, a JavaScript- and XML-driven development technique, can be difficult. In this tip, an expert introduces several frameworks...

Posted by Michael Mahemoff at 5:56 am
2 Comments

+++--
3.2 rating from 9 votes

2 Comments »

Comments feed TrackBack URI

And if I knew how to spell Jeffrey I’d be a better man. :/

Comment by tastypopsicle — September 15, 2008

Thanks, fixed that (along with half a dozen other live blogging typos :)

Comment by Michael Mahemoff — September 15, 2008

Leave a comment

You must be logged in to post a comment.