Position of Cancel and Back Button

Question

We have are building a room finder application where we have a back button and a cancel button. The back button goes back a step in the navigation, while the cancel button cancels the navigation. "Weiter" is the German word for Next and signals the next step. Usually that would mean showing the next floor on the building if the selected room is not on the ground floor. Which position should the buttons have?

The back button makes sense on the left side, as that is the direction for going back. The cancellation button however goes back even further, so it should probably be even further to the left, right?

But now the Back Button is quite centered, which doesn't seem intuitive.

Here's a screenshot of the whole context which the buttons are used in:

How can we place the buttons in a manner that makes sense to navigate?

Answer 1

What Kitanga Nday said is correct, and the rationale is sound and something you can and should use.

However, in this specific case, the addition of a destructive action breaks that concept.

Therefore, in order to keep it, I'd remove that cancel button and place it elsewhere on the screen. Otherwise, your users will face the issue of accidentally canceling their actions or getting confused about whether to go back or continue.

Additionally, having a combination of an icon on a button and a label on another button (which are part of the same parent element, e.g., navigation) can be really confusing.

I believe the best approach would be to place the cancel button elsewhere, perhaps below the navigation row, as a simple text link without the need for buttons to avoid spacing issues. Then, use labels for both buttons, and leave the space where the cancel button currently is as a gap between the "next" and "previous" navigation elements.

Lastly, consider accessibility. Think about how a screen reader will present this information in your language. In English, it would probably say, "Previous button. Cancel button. Next button." (or "Previous. Cancel. Next.").

Do you see the issue? "Previous button cancel" or "previous cancel next." Even though there's a missing letter in "cancel," the most important part of what the user will hear creates an incredible amount of cognitive load.

Answer 2

Your design and the thinking behind it is correct.

First and last buttons should preferably be actions. So anything taking you back should be on the left and forwards on the right.

Some good reading, Google serial position effect and primacy/recency effect. These are results of so e biases we exhibit. Primacy effect dictates that we remember things that come first in a list first and recency effect dictates the opposite: we remember the most recent things first. Everything in the middle is kinda left floating. You'll see it this in a lot of places, e.g., CTAs on a website.

Oh, just realised when I added the "additional reading", you want the cancel to not be as prominent, so puttin it in the middle should properly emphasize the correct actions: back and next.

Answer 3

Ok heres what I recommend:

The main idea is that prev/next are closely related to each other, while cancel is a different type of action. Therefore, you should separate the cancel away from the prev/next, putting cancel in the far left and the prev/next on the far right.

Next, I suggest putting a chevron inside the next button and placing text labels for each one. This makes it more clear what each icon is doing and adds consistency as now they all have an icon and text label, instead of one or the other.

Finally, this depends on your use case, but from my understanding the user may want to go back and forth from the floors. This would mean that the prev has just as much importance as next, so making the buttons the same size would be ideal. If the next button is such a primary action that it seems necessary to make it bigger, than ignore this info.