Expand your prototyping knowledge

Wireframing Rich Internet Applications

Just as your User Experience and Information Architecture designers were beginning to enjoy a cosy working method, which involved drawing static wireframes, the game changed again with the arrival of Rich Internet Applications (RIA).

Technology tends to move faster than our design skills. Whether it’s AJAX, Flex, PHP etc., it became a challenge to improve the usability of these new applications. Wireframes and prototypes have thus become increasingly important in the realm of design.

Show, don’t tell

For complex RIA, prototypes are definitely the best way to express the structure, flows and layout of information. However, if you have a tight schedule, it might be better to start by ‘explaining’ to the client a narrative using a simple wireframe, before moving on to more functional prototypes.

Defining user behaviors

When wireframing RIA, a key step is to define ‘personas‘, meaning all the types of user behavior. Improving usability usually means imagining different narratives according to personas, and guiding users through tasks according to their needs and context.

Narrative wireframes

When using a low-fidelity wireframe to illustrate dynamic information like RIA, it’s essential to narrate the information. In other words, it’s best to build stories to illustrate non-linear apps.

This low-fidelity, narrative approach is actually a good way to introduce new ideas to clients. Presenting one dimension of information at a time allows clients to focus on one particular aspect of design, avoiding confusion and misunderstandings. The key here is to focus on general patterns and not the details.

Prototyping interactions & dynamic content

Once the foundations of the work is done, it’s important to move on to high-fidelity techniques, such as functional prototypes. Designing applications and leaving out interactions or dynamic data is like forgetting the cheese in a cheese cake… It doesn’t make sense! Dynamic, functional prototypes are essential to fully grasping the purpose of the RIA and what it can achieve.

Prototyping the actual app is also important for the client to see and validate the final design and not just the information flow. Another advantage of prototypes in RIA is to observe on-going changes during the development process.

Once brought together, these two techniques of wireframing and prototyping can significantly improve the usability of complex dynamic applications or websites.

Victor Conesa

About the Author

Victor is the Product Manager at Justinmind. His specialties include business analysis, usability, requirements management and prototyping. When not busy doing that he is known to eat or sleep.

Comments are closed.