Monday, September 15th, 2008

Wireframing Ajax Interactions – Richard Rutter, @Media Ajax

Category: Conferences, Design

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

Posted by Michael Mahemoff at 5:56 am

3.2 rating from 9 votes


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.