3

Currently have all buttons left-aligned in a dashboard. The alignment makes sense for filling forms. However, within a wizard and needed to add a 'Back' and 'Next' button, it makes sense to position those buttons like one would expect, back then next.

Is it okay to break button consistency? Button Layout

7

Clarity can trump consistency in certain situations.

For applications with changing contexts, there's lots of purposeful instances of design system inconsistencies.

I've seen examples of wizards where the < Back Next > buttons are positioned next to each other, as well as the approach you have below, and both seemed to work.

Test with your users, and see if they make slips (such as clicking the wrong button), as well as completion times.

Resilient design principles from Salesforce

This article (and accompanying talk) discusses how Salesforce prioritizes design decisions. They have a prioritized list, and their first principle is Clarity, with Consistency coming in at 3rd place.

enter image description here

I have found this to be a valuable resource when excessively trying to build consistency, only to find my user testing shows that breaking a pattern resulted in more clarity and less errors for users.

Either way, you might want to add more contrast to anchor the stepper to the bottom to differentiate from the form content above.

enter image description here

| improve this answer | |
  • That's a great list to hold on to, because I am familiar with exactly those cases of excessive consistency you described and this helps put things into perspective. – Big_Chair Aug 28 '19 at 12:27
1

I think the factor at play here has less to do with “Consistency” and more with the principal of “Proximity”. That being, items similar to one another should be placed near each other.

From a logical perspective, it’s easy to assume the user would associate “back” and “forward” with left and right corners. But users don’t typically take a logical approach when browsing, they just go with the visual flow. This is why proximity is so important, and why I don’t think you should separate the buttons.

As a primary example, consider a web browser, the application that uses this convention more than any other. These functions are always next to each other. It would seem pretty odd if back was at the left of the address bar and forward were far to the right.

As always, testing is important. Hope this helps.

| improve this answer | |
  • Thanks Andrew! Good point about proximity, that is definitely a key factor to the problem I am having. My concern with having the "back" and "forward" together is when they are right aligned to the container versus left alignment everywhere else. Will do more testing with the proximity and positioning. – andrw Aug 27 '19 at 19:29
0

Button consistency is more focused on the styling and behaviour of buttons rather than their placement, so in this case you are referring to the layout and position of components in different sections or areas of the application, which can be context sensitive as you have shown in the two different examples.

However, since consistency is based on the scope and context that you define and follow, there is no reason why what you are doing has to break consistency. What you need to do is define the rules and behaviour for:

  • Call-to-action (e.g. primary and secondary buttons) location on forms
  • Navigation buttons on wizards (and related design patterns)
  • Alignment and spacing within button groups

As long as there is a level of consistency between these design guidelines (and any others you need to account for), then you won't be breaking any rules. However, part of having a set of guidelines is to also allow you to break the rules when it makes sense to do so. The key here is to communicate your design rationale, whether it is through the application of the existing/conventional design patterns or creating new ones.

And as mentioned before, it is important to test the design with the users (with is probably the most important rule of all)!

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.