Like all information graphics, user task flows are meant to be visual representations of abstract concepts. Specifically, they are meant to convey a path or paths that a user is meant to take through a website or application, a map, as it were. The most accepted and predominant visual format that information architects use for user flows generally consist of “boxes and arrows”, basically a series of shapes interconnected with criss-crossing lines illustrating a mental model of what the user paths are meant to be. Now, there have been several attempts to standardize user flow and process flow techniques, the most successful being UML or Unified Modeling Language- a standard created specifically for object oriented software engineering. From the Wikipedia entry:
UML combines best techniques from data modeling (entity relationship diagrams), business modeling (work flows), object modeling, and component modeling. It can be used with all processes, throughout the software development life cycle, and across different implementation technologies. UML has synthesized the notations of the Booch method, the Object-modeling technique (OMT) and Object-oriented software engineering (OOSE) by fusing them into a single, common and widely usable modeling language. UML aims to be a standard modeling language which can model concurrent and distributed systems.
UML is a great technique, but it biggest strength is also it’s biggest flaw: The fact that it is a visual shorthand requires the person viewing it to understand that shorthand. My preference has always been to keep things much simpler and provide a key for each flow I plot out as the majority of people viewing them wouldn’t know UML from UFC. Also, I’ve found that the stencils for UML schema come off rather stale and visually stagnant, something the graphic designer in me rebels against. I definitely think there is a place for UML, especially in work flows that involve multiple information architects and intense software engineering, but I feel that in the case of user flows specifically, it isn’t necessarily the best tool for the job.
Putting the user in user flows
Scrutinizing why UML isn’t the best method for creating user flows underscores the problem with the whole boxes and arrows technique for them in general- where is the user? What is the point in visually representing the path a user takes if the only indication of who the user is is a snippet of text? In the past I’ve represented different user paths by either breaking them out into a separate page or color-coding by user type, but when presenting to my team, or even worse, to a client, I always had to exhaustively explain what I was trying to represent. For a document that is intended to be self-explanatory this isn’t what I would call ideal. What I really wanted to do was create a flow that could stand on it’s own away from me, something that brought out the inherent narrative of how a user would actually experience the product rather than just a simple map. The solution? Comics.
The use of sequential art, or comics, in the UX field is not a new idea (heck, look at the airline safety cards that have been around almost as long as commercial air travel has), but it is one that has been getting more and more attention as of late since the release of Google’s Chrome comic by the writer/artist of the definitive study of the form Understanding Comics: The Invisible Art, Scott McCloud. I dug out my old dog-eared copy of Understanding Comics and read it again with an eye on how some of the principles Scott outlined might help me with my narrative user flow problem and came out with some very compelling reasons why it was perfect for my needs:
- Viewer identification
By supplementing or replacing individual boxes within a flow with cartoon representations of someone actually going through that flow, you immediately bring the user front and center. This can be especially useful when you have actual personas created for the project to guide your visual representation of that user. I’ve seen a lot of personas with actual photographs of people culled from stock photography collections, but I feel that a slightly more conceptual approach can actually be more effective as the viewer can identify with or place themselves into a slightly more cartoonish character. A photograph is a picture of one person, while a cartoon is representative of a type of person.
The more cartoony a face is, for instance, the more people it can be said to describe
- Emotional resonance (expression)
One thing that mere boxes and arrows simply cannot do at all is convey emotion. User Experience is inexorably linked with emotion, the fact that experiences can be described as ‘positive’ and ‘negative’ attest to this. Using comics to convey emotion or expression within a user flow again puts the user front and center. If a flow leads to satisfaction for a user, have your cartoon express it visually. Don’t just ask yourself what the user would do, ask yourself how they would feel as well.
Use your cartoon to express the emotions of the user
- Temporal progression
User flows by their very nature are a set or sets of step by step progressions. Using sequential art to introduce narrative emphasizes the temporal nature of these flows. Arrows tend to do the heavy lifting here, but with this method they can be used more sparingly, as in representing branching paths rather than connecting points to individual steps. Using panels or even imagery from left to right or top to bottom can convey this progression even more fluently.
Panels or images in a row can convey temporal progression more effectively than arrows
- Closure
Closure is our minds filling in the gaps, mentally completing that which is incomplete. Even in the boxes and arrows technique, closure exists- displaying what happens when a call to action is answered, for instance; The actual clicking of the button isn’t explicitly shown, but the viewer mentally completes that circuit and goes on to the next step. By expanding the visualization of a user path in the directions outlined above, the need for closure becomes stronger as the viewer becomes more personally invested in what they are looking at. Allowing the viewer to fill in the spaces in between steps informs them more completely of the interaction being described.
Closure is the phenomenon of observing the parts but perceiving the whole
Using comics as a way to tell a story in your user flows can be a powerful and effective communication tool that can speak to even the most unsophisticated viewer. In the second part of this article I’ll show you how I applied the above principles to a user flow for a mobile smartphone application I am currently architecting.
I remember being assigned Understanding Comics in school but never actually got a copy for myself. Shame on me, I know! Perhaps I’ll go run and get one today after work. Looking forward to the second article!