Support consistency or primary user journey?

Question

Here's my question.

Should a button with an important action such as "Preview" always have the same visual appearance and poisitioning or should it change according to the primary user journey?

Let's say for example that we have 3 buttons on an item on a page:

The item can be previewed, assigned and edited. The primary action is 'Preview', secondary is 'Assign' and tertiary is 'Edit'.

However, on another page the item preview is no longer as important. Here the most important action is 'Edit' followed by 'Assign' and then 'Preview' like this.

Now there are a lot of inconsistencies here since placement and colours have changed. Is that ok or should colours and placement stay the same?

Apparently, Apple changes colours and placement according to context: http://uxmovement.com/buttons/visual-weight-of-primary-and-secondary-action-buttons/

EDIT:

The two pages are quite similar, so the inconsistency might be confusing to users, however it might also clearify to them, which page they are on, so they don't confuse one page with another.

The buttons are not part of a flow as such, but can instead be compared to pinterest's buttons:

Answer 1

Consistency

First, let's define consistency (within desgin context):

Things that share similar semantics should be presented or act in a similar way.

And its misuse

Now consistency is one of the most often misused concepts in design, for two reasons:

• Designers adhere to the guideline ignoring the actual problem at hand. In other words, the consistency guideline is cognitive in its origin, but designers often apply it without thinking of the actual cognitive process a particular interface will trigger.
• Things have many dimensions - making one dimension consistent often breaks the consistency of another.

Your problem

My feeling is that you're trying to do good for the users, but when one design is clearly not superior to another you should question what you've tucked in.

Let's break it down:

• You have chosen to use colours for primary action seeking to guide the user eye to the likely action.
  • The use of colour in its own is an issue; since the colour semantic has to be processed by the brain. There is a research that suggests that people process a group of (3) buttons quicker if none is coloured.
  • What makes it worse is that the coloured action changes - which is confusing. Highlighting a business CTA that doesn't change ('Buy now') is fine, but your case is different.
  • In other words, by highlighting the primary action (consistency there) the coloured action changes (inconsistency).
• You are changing the button order.
  • This leads to disorientation and is a bit of a no-no.
  • You are making the primary action right-most (consistent sort order by importance), but you break the consistency of action position.
  • From a cognitive perspective, the brain would rather things to stay where they are than having to work out that the sort order is importance related; you also make an assumption of what is important for users.

Back to cognition

Now here is your task:

• There are three buttons.
• Users should quickly locate the right one.

Are 3 buttons in a row with short representative captions something that requires mental effort that needs a designer attention? Would anything you do improve efficiency to a non-marginal extent? Doubt this is a key design decision.

You should also remember that someone wishing to edit something is already primed towards the caption 'edit'.

The solution

So my recommendation would be to:

• Not use colours at all.
• Not change the order of items.

Just keep it plain and simple.

Answer 2

Great question Mattias.

I think you should lean toward consistency. In recent usability testing on our site we found that everyone accomplishes tasks differently and in a trial-by-error fashion. Consistency from page to page helped our users maintain a sense of clarity and made things appear more intuitive, even if it was an action they never performed on our site.

I also like the idea of highlighting the primary action button, but if we learned anything from the blue/white dress phenomenon it's that color is subjective. People see and register colors differently so it is difficult to depend on it as a primary means to send a "Wait! This isn't the button you think it is" message.

So, consistency combined with highlighting seems to be the most user friendly way to go. Of course, you won't really know until you test this, but those were our findings.

Good luck!

Answer 3

In principle it can be good design

Benefits

Highlighted buttons present a clear call to action or default action for users.

For example, it can be frustrating to users to pop up a dialog box and not have a primary button, because the user has no indication for the preferred flow.

Similarly, if a user fills out a long form and then is presented with 3 buttons if equal weight, the choice can create anxiety.

Costs

If the secondary buttons are frequently used (Ie there is no clear default flow), then highlighting introduces decision bias in the flow which may be undesirable.

If the pages are frequently used together and look similar, it can be annoying to users to not have consistent layout for the buttons.

If the buttons don't represent a call to action (eg if they appear inside a control island as part of a longer workflow) then highlighting one may be distracting to users because it diverts attention from the actual call to action (eg form submit).

---

While consistency is important in design, helping users get a job done effectively is more important so there is nothing wrong in principle with what you're suggesting.

But given the set of tradeoffs above, it's clearly a question of cost versus benefit so I'd suggest weighing the tradeoffs for your specific case and if it clarifies rather than confuses user workflow, it's a good idea.

Answer 4

My general answer is consistency; Consistency can prevent user confusion and not make the user think. Muscle memory will remember where the buttons are.

However - is there a reason why your users would expect the buttons to change? Is it something they might expect?

Why not try a lowfi prototype and see how your users respond - you should have an answer rather quickly.