Lately I’ve been seeing briefs for Rich Internet Apps (RIAs) that require a certain number of ‘wireframes’?
RIAs are characterised by multiple interactions on one screen without a full screen refresh. One screen has many different states - Drop downs, fly outs, sliders, changing grids, the list goes on. They are just like a desktop app.
I get worried because most people think a wireframe refers to a Visio or PowerPoint diagram that is a flat file and has limited simulation or clear description of how interactions work on the screen. This is not sufficient as you need to create many very similar wireframes to show how the screen works. It can be done, as Steve Collins suggests, ‘You create lots and lots of wireframes, like a traditional cartoon animation, to show how all the screen states can change!’ A waste of time.
The night before last, when I was at Interesting South, the problem with traditional wireframes was hammered home. I was chatting to Twitter guru and coder, Brad Kellett (@bck) about how requirements get communicated to him. He basically said, ‘I usually get some crappy wireframes that leave too many options open. I am often unclear of how a client wants to put together.’
‘So how do you get an RIA right?’, I ask. ‘ Oh, it ends up in lengthy face-to-face interaction, while I try and work out what they need!’. He even said that he’d love a library of the hand gestures clients use to interpret how they think the RIA should be designed!
What he really needs is something much more detailed than just wireframes and interaction. The ‘wireframe’ has to realistically represent all the interactions that occur on one screen of an RIA! He needs a high res model of the interface.
Hi-res and Lo-res wireframes
Thanks to Steve Collins for putting this together for me. Firstly, Lo-res wireframes are the same as the wireframes that I see referred to in briefs, but with an RIA they are just not enough to communicate to a developer what to do with them. They have a valid use:
- laying out core page functionality
- representing major navigation items
- validating major components and structure.
Lo-res wireframes are critical to developing an understanding of potential application and site framework as well as building an understanding of major application interactions prior to developing hi-res wireframes.
Hi-res wireframes build upon the lo-res wireframes, they are used to:
- instantiate and test the understanding of application and site flow
- show to clients and potential end-users exactly what they are getting
- describe every screen interaction in detail to application developers and graphic designers to aid in building the application.
Hi-res wireframes can also be used as the foundation of a functional prototype for testers, designers and developers to test assumptions against. Testing against hi-res wireframes and prototypes can provide significant cost savings early in the project, militating against expensive and time-consuming changes late in the project lifecycle.
Axure have solved this problem with a fantastic tool that can be used to produce hi-res wireframes and is not much harder to use than Visio. You can even use it to run usability testing on the out put and it can be printed into a very clear spec document too.