This site is a work in progress. Last updated January 2023.

Workflow Design

Streamline workflows, don't over-simplifify them.

“Forget the complaints against complexity; instead, complain about confusion.” Don Norman.

Types of Workflow

There are two types of workflow design, roughly representing the macro (experience focussed) and the micro (task focussed). Task Focussed Workflows:These are generally concrete workflows such as importing or manipulating some kind of data. The aim with these is clarity. You can achieve this by channelling the basics:

Feedforward - which has added importance in CxUX because of it's error prevention abilities, so don't skimp!
Feedback - which gives users confidence to continue on the workflow.
Inference - keep the user on track by correcting their errors, or automating sub-steps of the workflow to speed things up.

Before designing any task based workflow make a list of the above three items and write down how you will utilise each of these items to give the user the best chance of success. The Simple and Moderately Complex examples below demonstrate this kind of workflow. Experience Focussed Workflows:These are based around ways of working, the experience you would like the user to have. In essence you work backwards from the final experience and deduce workflows from that. Usually this is an interaction, or series of interactions that differ from the common way of performing a task and that makes this kind of workflow fertile ground for innovation. The Boss Level example below demonstrates this kind of workflow.With both these kinds of workflows, but more commonly for experienced focussed, there is the opportunity for short-circuiting - this is where you think of ways to streamline or automate parts of a workflow, this is best demonstrated by examples, which you will find later in this section.

Task Focussed Workflow Considerations

When designing your workflows, the following areas should be given due consideration. This is essentially a box ticking exercise to make sure you're giving your users a fighting chance! The (forthcoming) section on Context adds an extra dimension to this, but it's a good place to start.

Workflow Consistency

Note: there is more about consistency in the page on Interface Design.

If there are similar workflows already in existence in the app or in common usage elsewhere, make sure you stick to established workflows, that way there's little / nothing new for a user to learn before trying the new workflow. That said, if you have an innovative approach that is a clear improvement on the status-quo - a product differentiator, you should obviously feel free to deviate; just don't do it without reason it results in needless bottlenecks for users.

Visibility

If it's relevant to the workflow it should be readily available to the user, so check if all the required components are obvious, or are revealed as the user proceeds along the workflow. An example of failing at this would be to have two controls that are often used together be buried in separate hierarchies that need digging out.

Feedback

A user should know that the workflow succeeded or failed. If it failed, you should try to say why, and for bonus points, tell them what they did wrong. For a gold star, fix what they did wrong automatically and complete the workflow for them.

Recoverability

Make it safe to experiment, and/ or go wrong. At the most basic level you should support undo for everything. In essence it should be easy for users to try something, change their mind, and then backtrack in order to try something else. When users can work like this, they will trust your app more.

Familiarity

Workflows can end up hurting users if they do not conform to existing mental models and expectations based on past experiences. As soon as you deviate from norms, learning must occur, and, in general, users hate learning.I don’t mean to imply that innovation should never occur, it's half the fun of the job; but design standards exist for a reason, and are not intended to stifle creativity, but rather to aid users by decreasing the time and effort needed to complete a task by presenting them with familiar concepts. Why waste people’s mental energy on new UI elements they need to learn? If a new, more efficient way of completing an activity is possible, by all means try it, and if it works, keep it. But, don’t leave your users in the dark — help them learn the new pattern by understanding their expectations and clearly communicating information important to them, generally this can be done with feedforward and hints, so that they know what they can do next.

Assistance

Use tooltips, inline help, and hints to let users know what something does, or what they can do next. For example notice how hotkeys are (optionally) listed in the bottom left of the viewport to indicate to users what secondary actions they can perform.

Intuition

And now, I'm afraid, we've reached the part of the guide where you need to draw the owl.Only you can know how to short-circuit workflows in your app's domain, and you can only know this if you're an expert in that domain, or you've been talking to someone who is, as this part of product design is all about streamlining workflows by removing steps, or by creating new ways of working that for example automate tasks, or remove manual input phases from processes.Overall this is the one part of the CxUX world where individual or team brilliance can put clear distance between you and your rivals, and that's all about understanding the problem you're trying to solve and deducing faster ways of doing things and then weaponising your ego to convince yourself and others you can pull it off. The only advice I can give here is akin to a football manager saying to their team, "You see that round thing, kick it in the goal.".There are thankfully some good techiques for validating and testing usability and the efficacy of workflows such as the Human Processor Model, there will be more on that in another article, so even if you are't inspired, in theory you could test your way to sucsess.

Examples from Cavalry

A Simple Short Circuit:

Problem:A user gives the software an outcome to achieve, and the software must fill in the gaps.

Solution:An example of this in Cavalry is what happens when a user copies an image say from the internet, and pastes it into Cavalry because they want to use it as a background. In this situation, technically speaking, Cavalry needs to do a lot:

Save the pasted file onto the hard drive so we can import it into the Scene.
Import it into the Scene as an Asset.
Create a Shape layer to contain the image.
Create an Image Shader and assign that to the layer we just made.
Assign the Asset (the pasted image) to the Image Shader.

And all the user did was hit Paste. Are there times when users might expect your app to fill in the blanks, infer what they meant and save them the work?In short, give the user what they mean, rather then what they did. This is an example of using context to better the UX.

A Moderately Complex Short Circuit:

Problem:A user wants the same thing doing many times for some reason. For example, they have an animation that needs exporting in 70+ languages.
Solution:Instead of the standard way of making users manage this manually, Cavalry provides a feature for dynamic content creation, in essence a user can hook up a spreadsheet to their animation, and Cavalry will go down the rows of the spreadsheet creating a different animation based on the content of the spreadsheet rows. This can obviously save users huge amounts of time.

HelloWorld.mp4

Boss Level Short Circuit:

Problem:A user would like to quickly create a visually complex illustration, and then make changes to that content in a non-destructive way.

ComplexWorkflow.mp4

Solution:In this case the answer is something known as proceduralism (see below), which is as much a way of thinking as it is a technical implementation. Watch this demo as I build one of the header images for this site, and then right at the end, I make a change to the first step (the letter being 'stamped about') and it all just magically updates and works. This is a prime example of experience based workflows, and this way of working was planned before a single line of code was written on Cavalry, using a conceptual model to assure that the UX and system architecture stayed aligned — as there's quite a lot going on here, for example, when connecting the colours to the text, notice how each question mark is automatically assigned a different colour, notice how each random rotation is different, the same for scale.Is there a different way of thinking that you can bring to your domain? A fresh approach that save users time with common tasks? Are there automations/ insights/ ways of working with data that you can offer?

A quick note on proceduralism

Proceduralism literally just means doing the same thing over and over again. In psychology it’s how explicit memory (practicing a chord) becomes implicit memory (playing a song without even thinking about what you’re doing). It's something that’s performed again and again; a sequence, as oppose to something that has been done, and is fixed/ finished.
In computing, the advantage of this kind of set up is that you can go in and change things later.
Consider the workflow of adding a blur, then a pixellate in Photoshop, the user performs a sequence of events which has a fixed outcome. If you want to change the blur, you must effectively start again, as each step is 'baked in' as we choose it.In procedural software, instead of the user performing a series of events we describe a sequence of events that we want to see the outcome of, and the software performs every event from start to finish, whenever needed. The benefit of this is that we can go in later and change anything in that description of events later. This is one of the techniques you can use to achieve non-destructive workflows.
If you need a system where users are free to change any aspect of the work at any time, you should consider proceduralism as an approach to the problem you're trying to solve. Be warned, this way of thinking is the diametric opposite of guiding a user along a well marked path toward a goal, and thus procedural systems are much harder to learn than more linear systems.

Workflows and Flow

These two concepts get confused a lot because even though they are distinct, they are somewhat related and the word workflow frequently gets shortened to flow, but the distinction is important, so here are the definitions to help clear things up:Workflow - A series of steps a user is performs in order to achieve a goal or outcome.Flow - “A state in which people are so involved in an activity that nothing else seems to matter; the experience is so enjoyable that people will continue to do it even at great cost, for the sheer sake of doing it” - Mihaly CsikszentmihalyiAs a designer you want your users in a state of flow as they perform workflows in your app. Flow is an extremely important concept to understand and you can find out more about it in this talk by the great Mihaly Csikszentmihalyi. The way in which flow comes into play in workflow design is that in order to be in a flow state users need to be sufficiently challenged by what they're doing, but not stressed by the difficulty of doing it - so once again oversimplifying things can backfire in this regard as users will become bored, or worse, apathetic, and failing to provide a well designed complex workflow will result in users becoming anxious and stressed.To further befog the issue, as a result of the above confusion the term user flow has crept into the lexicon as a simile for Workflow. I blame flowcharts.

Once you've kicked the round thing in the goal, its time to move on to Information Architecture.

Google Sites

Report abuse