presented by

Dante Murphy

State Mapping

It all started so humbly.

In the nascent days of the “interweb”, the metaphor of the “site” was appropriate because all you really did was go from one place to

another.

The journey was the experience, and the site map did a good job of describing it.

Now, the experience is a whirl of features

and functions…

[ auto-scrolling on mouse position

[ dynamic compare panel

[ AJAX-driven detail panel!

[ auto-position quick links

…that demand a better understand of the user of the system, and his needs and values.

So we started to create personas.

Then, we needed scenarios to help us

describe the actions of our personas over time.

It soon became evident that not everyone does

things in the same order, or for the same reasons.

Even though these representations of structure, person, and activity are

accurate, they each fail to fully describe a dynamic, multi-modal interaction.

1. Defining a concept

1One possible alternative is the State Map. Let’s look at some ways this method can add flexibility and value to our interaction design toolkit.

Simple objects, whether a doghouse or a website with static content, can still be defined by their structure.

The structure of a site like facebook barely scratches the surface of its value proposition.

Even understanding what all these pages mean and doesn’t adequately describe the interaction and engagement.

Complex, interactive systems can’t.

Understanding the elements and their attributesis not the same as understanding the system.

We know what each kind of car can do, but don’t immediately see the many ways they can be used by specific people in specific situations.

The real problem is that when you are here…

…you really are HERE.

Nearly every page, and more importantly every feature and function, is within a single click.

The whole must be greater than the sum of its parts.

To really define the concept, you need the specificity of the use case with the engagement and temporal context of the scenario. You need a state map.

Mapping a single journey.This diagram describes one of many possible journeys.

It’s a state map, but not a very interesting one.

A single line of interaction for a single targeted user shows how the activities align with the structure of the site.

Mapping multiple journeys concurrently.As we layer in the primary interactions of many targeted users along a

relative timeline, we begin to see the relationships that define a unified solution.

Multiple lines of interaction shows how activities relate to specific personas or segments. Plotting the activities on a relative timeline demonstrates how the same interaction may take place in a different context for a different segment.

Mapping the total ecosystem of interaction.Now we see not only the specific journeys that each individual takes, but also all of the inbound paths that influence them and all of the possible resultant

ancillary actions .

The finished state map, displaying a plurality of targeted personas, related interactions, and key business metrics and outcomes. The points of intersection describe not only a potential change in segment, but also a different state in which the same activity is performed.

22. Specifying a Design

Of course, once you’ve defined your concept, someone might just ask you to execute it.

Unlike the early days of interactive development, you can’t “just do it”. You have to design the details and lace them into a cohesive system or solution.

One way you can use the state map is to specify a design, either for developers to build or for the QA team to test.

Some tried and true methods for specifying a design.

a flowchart a wireframe

a prototype duh

Wireframes are too static.They only show a single view of the system at a time.In complex interactive systems, each wireframe is like a single frame in an action movie. What led me to this point? What will happen next? What the @#$* is going on here?

Flowcharts are too abstract.

They describe all of the possible pathways through a system, but with inappropriate detail. They focus on what the system can do, not what the user is doing. The symbolic language of flowcharts is very arcane.And most are much more complicated than this one.

Prototypes have problems, too.They only show a single instance of a single interaction at a time.They don’t demonstrate all the things that can happen, only what actually does happen.They tend to be expensive to build, either in resources or time.

Most prototypes end up like this one. Or should.

An example State Map showing how points are accrued for each activity

on a social interaction website for breast cancer patients.

* This diagram alone was the Business Requirements Document for points accrual in this system.

33. Evaluating Solutions

The State Map is also useful when comparing systems or solutions that do the same thing, but in different ways.

“Is everyone enjoying these silly images?”

Sometimes, you don’t have the answer.

Hard to believe, painful to admit…but true.

You know the players, even the plays…but what is the plan?

Whether for due diligence or inspiration, your next step is to look at various existing offerings and evaluate them against your research and instincts.

The first step is to identify the needs and values of each targeted persona and assign either a representative task or a solution.

Then we apply affinity mapping and annotation to identify solution modules or nodes.

Looking at each interaction in a scenario, you can plot the behaviors, capabilities, and limitations of each potential solution.

Use grouping and bounding where features are similar but not the same, and be sure to identify which key audiences are well served by each attribute.

Iterate for each scenario and soon all the modalities are accounted for.

As each solution layers in, gaps become evident and a favorite begins to

emerge.

Additional layers of information can be added if desired.

Of course, every tool has limitations, and the state map is not the answer to every problem. But it is a new way of managing the complexity of interactive applications and systems. I hope you will find it useful.

No lemon zester!?!

thank you for attending

State Mapping

Happy Motoring!