The importance of documentation and planning for user experience

November 25th, 2009 Posted by tyler in Reviews, Uncategorized

Last week I went to my first event for the Chicago Interactive Design & Development Group. It is graciously organized by Judi Wunderlich and provides an opportunity for Web professionals (and others) to come together and discuss various topics.

User experience expert – John Yesko, gave the latest presentation and the topic was “Rich User Experience Documentation – Beyond Static Wireframes.”

John got me thinking about documenting websites in slightly different ways than I am used to. While his presentation was extensive, I wanted to focus on just two of his points here.

Point #1 – In the beginning of a project you can not always start predicting what’s going to be on the site right away. This is especially true for sites with rich interactions including screens with many various states. It may be of critical importance to start by defining not only what kind of site it is going to be, but also emphasizing what kind of experience the user will have. I say ‘emphasizing’ because with multiple screen states the users will all have a different experience to some degree. Even with several types of experiences possible, we as designers should still plan to make the overall experience good and set up an appropriate framework. This is where concept mapping can become useful. According to Dan Brown, Author of Communicating Design, Concept maps/models are: “A diagram that shows the relationship between different abstract concepts. You can apply the concept modeling technique to explain different aspects of a website.” Here is an example John showed the group during his presentation.

Both diagrams are from the early stages of the same website but show differing possibilities of what the user experience could be like based on placing more emphasis on various categories within the site. These types of visual aids can be sketched out quickly to help nail down the kind of site you will be building and the experience you intend to deliver regardless of which screen state they may be viewing.

Point #2 - Once the concept maps have been done and you have some idea of what the site will be like, you’ll need to begin to detail out the specific screens as wireframes. And how will you present those with the rich interactions you’re planning on providing the user? How do you explain visually what pages will look if they have many possible screen states, animations, widgets, etc…?’ John went on to provide a number of great examples and boiled his message down fairly concisely.

He stated the importance of documenting all possible screen states both visually and with written annotations. But to also be as economical as you can by not just repeating various screens over and over with minor changes to each. One technique John mentioned was using call-outs. This is where you show one completed page and in the periphery you show portions of the screen in their alternate states. Of course there could be too many states to show in this way, and each screen may require its own technique but the key is to make sure you account for all possibilities so that the visual designers and coders understand the intent of the designers and architects who planned out.

John also covered other topics including the work flow of various design team members and how he has seen a change recently. He also talked about how the overall web design process is changing and why documentation is important. The examples shown above are just a few ways one can adapt the the new digital design landscape that is emerging. The entire presentation is available at his website http://www.yesko.com/.