Task Flows and the Process of Designing Interactions
In my job as a UX design consultant, I work with any number of organizations—and often with their in-house designers. This means one of my biggest consulting duties is explaining myself. Why is something a good idea, or what is the best way to approach a task or problem. I derive the subjects of most of my columns directly from my work. The most common occurrence for me is that I’ve typed a long explanation of a process or created a design pattern for a client organization, and I realize that I’m repeating the same work for others. So, if I can generalize something, I try to share it.
A few years back, for this column, I wrote a series on what I called design tools, covering software, deliverables, and design methods that I commonly used. Lately, my six-year-old column “Tools for Mobile UX Design: Task Flows” has been coming up in discussions about this topic. While it’s not truly out of date, and I still agree with everything it says, it was a bit broad and offered almost too many options. So let’s dive into this topic again, and I’ll discuss some very specific tactics that really help organizations of all sorts get a handle on the design of interactions.
All-In-One
In the bad old days, before the UPA chutes-and-ladders chart, before the Polar Bear book, we had to make our own methods. Some I rather liked, within their constraints, like plotting combined flow charts and UI diagrams.
Never Draw First
I was a “genius designer” type, and did very well — we had metrics — just sketching out designs then building them. But it’s not a transferrable skill, and not scalable. Over time I have realized the most important first step is to create task flows, and task lists.
And try as hard as you can to NOT draw anything like actual UI.
Don’t Create a Site Map
This is old, and a bad practice. We also don’t even so much — yet — need a hierarchical view of the system, but to model how the user flows through it.
Model the Interaction
Think about how road trips worked in the days before online maps. Your parents might have gotten out a road atlas or one of those complex, folding maps, and highlighted the route they planned to take. Print maps show the existence, size, and relative location of all the elements within their scope.
The highlighted route showed the expected way your family would interact with the system—which turn to take and where to stop to eat, sleep, or take a tour.
Our system of design documentation must likewise be more than just mapped. You can’t just list every page and organize the documentation to describe the relationships between technologies, but must highlight the most likely paths users would take through the system.
Task Flow Tools: The Bulleted List
When creating a task flow, I’ve tried various tricks and tools for organizing data, both physical and digital, and I’ve settled on the bulleted list.
CR1457008
As a user, I want the ability to check for new software updates and install them to my connected device.
Precondition: A connected session with any supported device
The user chooses the Check for Software Updates function on the dashboard.
The system checks whether there is new software on Cloud Services, using its device ID.
If no, a message indicates that the software is up to date and no download is necessary.
If yes, an interstitial message box appears with details on the old and new software, a Download and Install button that downloads and installs the updated software, and disclaimers regarding issues with network connectivity and power.
Clicking the Download and Install button loads a progress-indicator interstitial—again including warnings regarding network connectivity and power—and showing the estimated total time for downloading and installing the software.
Once the download-and-install process is complete, a dismissible success banner appears on the dashboard.
Accounting for Complexity
This bulleted list represents the happy path, but in reality, all of the interactive systems that our users work within are complex. Even at this level, you can start addressing multiple ways into a system, user choice, errors and exceptions. Here’s the same, expanded, and branched.
CR1457008
As a user, I want the ability to check for new software updates and install them to my connected device.
Precondition: A connected session with any supported device
The dashboard loads.
PUSH
As soon as Cloud Services recognizes the device ID, check for new software updates.
If a new software update is available, load an interstitial message box with information about the update. The options are Download and Install or Remind Later—except when it is an urgent or required update.
Clicking Download and Install advances the process to the INSTALL step—see below.
Clicking Remind Later sets a flag that reloads the interstitial on each connection to the device.
PULL
The user chooses the Check for Software Updates function on the dashboard.
The system checks whether there is new software on Cloud Services, using its device ID.
If no, a message indicates that the software is up to date and no download is necessary.
If yes, an interstitial message box appears with details on the old and new software, a Download and Install button that downloads and installs the updated software, and disclaimers regarding issues with network connectivity and power.
INSTALL
Clicking Download and Install loads a progress-indicator interstitial, with warnings regarding issues with network connectivity and power and showing the estimated total time for downloading and installing the software.
Once the download-and-install process is complete, a dismissible success banner appears on the dashboard.
Boxes and Arrows
Then, we take this, and move it into a drawing. Directly. Make a box for each view, and leave the bullets underneath each one, then expand to make the interface and interaction explicit.
Cartoons or Icons
The next step in your design process is once again not a leap of faith to a pixel-perfect user interface, but another subtle segue from one mode of design to another. Take the flowchart you’ve created and start adding little pictures within each box.
And so on. This can be handed over to the UI designers, or you can start detailing out components and pages yourself, without ever a jump but a neat segue between each step.
Read More
Remember, the work of creating a task-flow diagram—and most of the artifacts that UX designers create—is not about creating an artifact for its own sake, but is part of the actual design process. Everything we do must be deliberate, conscious, and towards the ultimate goal of good product design.
Read the whole article at UXmatters.