Monday, September 15th, 2008
Wireframing Ajax Interactions – Richard Rutter, @Media Ajax
Category: Conferences, Design
“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:
And if I knew how to spell Jeffrey I’d be a better man. :/
Thanks, fixed that (along with half a dozen other live blogging typos :)