Web 2.0 Expo 1 - Documenting Rich Internet Applications

Here is a quick update from the first workshop which I have attended at the Web 2.0 Expo in New York.

The speaker was John Yesko and the topic was how to document Rich User Interfaces from a User Experience perspective. In other words it was about how Information Architects or User Experience people work with wireframes and documentation in a time where web applications are becoming less HTML-ish and more interactive and fluent.

John Yesko provided a link to his presentation and his cases which can be found here:

Rich User Experience Documentation

Yesko’s presentation was very example based and therefore difficult to summarize easily. But in short, the overall point was that as user interfaces are changing so is the way that we need to describe these user interfaces for developers and clients. Yesko was building on a process model which is very similar to the way we work with website development in Hello Group. The process basically has four steps:

1. User experience brief (containing research, personas, etc)
2. Concept mapping
3. Site structure mapping
4. Wireframing

The most important changes due to Rich Internet Applications (RIA’s) are happening in the wireframing phase, but there are also important consequences for the user experience brief and the concept mapping.

Yesko’s overall point was that in the old days of simple HTML websites there were relatively small incremental steps from the wireframe to the design to the actual development. The design basically added color to the wireframe and the development basically put life and interaction into the design.

Today things are different.

Today, in the age of more interactive websites, wireframes have limitations, which means that the final design of the website will typically be qualitatively different from the wireframe. The design needs to take a step away from the wireframe in order to create a truly rich user experience. Similarly the final development of the website needs to take a step up from the final design. Designs are typically static pages in photoshop, whereas a final RIA website is a highly interactive entity with transitions, drag-drop functionality, mouse-overs etc. This means that compared to the old days there is a somewhat larger step from final design to final website.

This new situation means that UX people are faced with new challenges. First of all it means that we need to create better UX briefs and better concept maps, because if the foundation of the project is clear from the beginning, then there is also a greater chance that the overall strategy and philosophy of the projects will survive through the stages of wireframing, design and final development.

Secondly it means that we need to work with new ways of wireframing and documenting the information architecture of the website. Basically Yesko did not come up with a final solution on how to do this, but he provided several different examples. Overall, however, it comes down to moving away from a page based paradigm to a ”multiple states per page” paradigm. This can be done in many ways, but the most common technique is to “explode” the wireframe which basically means that you pull out certain page elements and work through the sub-functionality of this element. So instead of building a wireframe page by page, the wireframe becomes a document containing pages, sub-functionalities, process flows – basically whatever it takes to describe a rich user interface experience.

Personally I was happy to see that a person like John Yesko is grappling with some of the issues that we are also discussing on a daily basis in Hello Group. It shows that the entire UX community is aware of these challenges, but it also shows that there is still no standardized way of working with documentation of rich internet applications.