Ajaxian

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

Posted by Michael Mahemoff at 5:56 am