Wireframing RIAs

[Etienne]

Just when the idea of wireframe was starting to be accepted as the standard method for UX/IA designers, the Information Architect game changed again with the coming of Rich Internet Applications (RIA).

With AJAX, php or Flex, RIA became both really dynamic and interactive. From a UX design perspective, this is a real challenge as it becomes harder but also more important to wireframe them.

Wireframes vs prototypes
Prototypes are by far the best way to show an actual app working. However, wireframes are also efficient when it comes to telling the important story so not to focus on details that will come later on. When designing RIA, it´s best to start telling the story and then go on to functional wireframe so that the client knows exactly where you’re coming from and where you’re going to.

Getting to know your "personas"
Defining the personas that will use your app is the first necessary step to take, before even starting to wireframe. This means defining all the typical behaviours that your future users could adopt and in what context.

Guided wireframes
This raises a problem regarding wireframes. As static, basic documents, they lack the contexts needed to build changing apps.

Telling stories to clients is actually a good thing as they will only focus on scenarios and the general information flows, and not on the design that will come later on.

Prototyping interactions & dynamism
Once you´ve told all the possible scenarios to your client, you can start working on the actual design. Prototyping helps you to do just that as it lets you put things in context, creating the actual interactions and dynamism. Interactive prototypes are important to picture the objectives and of an rich internet app and what it can achieve.

But Prototyping a dynamic website or an app is essential for other reasons. With this in hand, you’ll be able to see (hence validate) the final design, but most importantly, to carry out user tests. Prototyping a RIA is also useful to follow up changes done during development.

Wireframes for scenarios and layouts, and prototypes for interactions and design can really improve the user experience of many complex dynamic applications or websites.