People in Pictures: 8 Techniques for Humanizing Diagrams
Abstract diagrams are essential tools for designing complex web sites. Site maps, flow charts, and concept models help visualize elaborate structures and explore transactions, interaction, categorization, and navigation.
While you may keep these diagrams to yourself, using them only as a brainstorming tool, sharing them with other members of the team can yield useful insights. At the same time, abstract diagrams are not easy for everyone to digest, even ones that lean toward the more concrete end of the spectrum like flow charts. Employing techniques for making abstract diagrams more accessible can separate productive discussions from a waste of time.
One of the most accessible concepts is “person”. Giving readers a human character to relate to in the diagram can help them put the rest of the story in context.
But this diagram is about structure! How can I show people when roles, responsibilities, and impacts are either irrelevant to the story or implied by the structure itself? Whether you incorporate people into the picture is up to you, but considering the diagram from this perspective can open up new insights. Here are some ideas on how to incorporate people into different kinds of diagrams.
1. Swim Lanes
Positioning the flow over a set of swim lanes is really the brute force approach to humanizing a flow. To provide a quick introduction, swim lanes are columns or rows that define areas of responsibility. Steps in the flow appear in the lane of the person, entity, or system who is responsible for performing the task described.
The illustration shows the process for making coffee in the morning. My son sometimes likes to help me. Swim lanes depend on (a) explicit definition of role and responsibilities and (b) a clear delineation between steps. Reality, no doubt, often challenges our ability to represent a process in terms of swim lanes. When there are problems with the grinder, for example, sometimes Dad intervenes.
2. Transitions
In flow charts, I sometimes use avatars as nodes to represent transitions between people or roles. The “step” in this case is a new person taking ownership of the process.
A diagram with people embedded as nodes communicates the hand-offs between different roles.
3. Relationships
In a concept model, using a person as a node conveys a broader range of relationships, beyond that of “transition,” limited only by the structure of the diagram.
Concept models describing domains without people embedded can feel detached from reality, as if these ideas exist only in the imagination of the designer. Embedding people in these models clarifies how people relate to, interact with, and are impacted by the concepts.
4. Participation
The three previous techniques assume a direct connection between a person and a task or concept. Relationships between a role and an activity may not be so black and white. Other people can get involved in other ways. Diagrams can represent these nuanced relationships with proximity and scale.
By placing avatars near tasks, the diagram implies some kinds of participation. In this case, Dad and Son go to buy the beans from the Roaster (in green). With the right layout, you could create “orbits” around a node in the flow chart or concept model to suggest that different people have roles relative to the task.
5. Level of Effort
Sometimes, diagrams need to show more concrete kinds of participation. Most project teams need to quantify participation. A visualization similar to the previous one may be used instead to show how much effort something takes.
Positioning “level of effort” avatars adjacent to steps can help people reading the diagram understand the commitment. In this case I’ve used “Harvey balls” to indicate relative levels of effort. Putting them next to an avatar and using the same color creates a visual connection that tells the story.
You might, of course, visualize level of effort by changing the size of the step or using some other technique. But the purpose here is to humanize an otherwise abstract set of concepts.
6. Perspectives
In flow charts that represent individual screens, rather than tasks, a screen may take on a different form depending on who’s looking at it. In other words, the screen itself may vary depending on the user.
7. Reactions
Give your diagram a comic book feel by incorporating characters adjacent to the diagram providing commentary. I use clip art freely available on the web. DesignComics.org offers multiple facial expressions for about half a dozen characters, so my diagrams can show a range of emotions.
8. Benefits
If no other approach makes sense, consider at least expressing the benefits to various people involved in the process. If working on a site map or concept model, relate the content to user needs to justify a particular approach to categorization or prioritization.
The brute force method would be incorporating a key off to the side, stating benefits for each user group. To employ a more subtle approach, you could categorize benefits (eg: “cost savings”) and use those to label important steps or concepts.
In this case, the son benefits because he likes helping out in the kitchen, and Dad benefits because he can make the coffee just the way he likes.
Where are all the people?
Not every picture needs a human element. In thinking through abstract structures or flows, however, you might forget where, how, and when people get involved. Forcing yourself to incorporate people into a diagram could shed light on the concepts in a way you hadn’t considered previously. Moreover, adding people has the added benefit of giving readers a sympathetic entreé into the picture.
Thank you for this great article with many useful ideas! I can see ways to use them right away.
I would also like to elaborate a little bit. I’ve used the idea of people as nodes myself to model the relationships between people who are working together toward a common goal, in addition to each of their related nodes. For example, in a process in which two people interact to process loan applications, you can model the interaction of the two roles. You can also model a network of relationships with other roles each person is connected to. An example is a customer service rep interacting with a caller; the caller has a network of relationships that are relevant to the CSR, such as the agent who sold the caller the product, the policyholder of the policy the caller is inquiring about, the beneficiaries on the policy, etc. Each of these relationships might need a different view of data (as to your point #6 in your blogspot regarding perspectives. These modeling techniques would be useful in many contexts: workflow system design, multi-channel service design, etc.
I’ve also modeled a variation of personas in which there are two people interacting in a work environment. This approach was derived from a sociological understanding of work; put another way, I was attempting to model the social nature of a lived work experience. It’s an extension of The Integrated Model of Distributed Work (see David, G., Chand, D., Newell, S., & Resende-Santos, J. (2008). Integrated collaboration across distributed sites: The perils of process and the promise of practice. Journal of Information Technology: Special Issue: Global Sourcing, 23(1), 44-54.)
Thanks again!!
Jen,
Thanks for your comments! I’d love to see some examples of your models.
Your thoughts highlight an important distinction: some models are inherently human. If the assignment is to describe the working relationship between two people, then the picture must include the human element.
The purpose of my post (and I may be splitting hairs here) was to encourage designers to find ways to inject humanity into their abstract models. That is, make diagrams more accessible for people who might struggle with the abstract by incorporating sympathetic characters for the read. Presumably, even the most abstract concepts can trace back to some human need or motivation, even if it’s not abundantly apparent on the surface.
Dan, Great explanation and presentation of options. Thinking about how some of these ideas could be used… the level of effort is really interesting for something like a registration or ecommerce flow and what elements produce the most friction, depending on order and presentation. That’s hard to get across sometimes.
Really like the idea of integrating user comments into the flow, half way between a comic and a flow. Also makes the flow diagram more useful to a broader audience, which is often the challenge with these, and why we end up telling the story of how it works in different ways, creating another “deliverable,” often a presentation of some sort, to showcase the corresponding human experience.
[...] EightShapes, LLC :: People in Pictures: 8 Techniques for Humanizing Diagrams – [...]
Congratulations, Dan!
An useful form to explain a complexity work.