1

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?

enter image description here

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?

enter image description here

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: enter image description here

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

2
  • Sorry, can you give us more detail? I mean, why would someone go back or cancel on the same screen (unless this is a stepper with persistent info)? Going back usually cancels whatever action you have performed. Also, "Weiter" is German for "Next" or "Continue," right? If so, can you add an arrow pointing right or use the German word for "Back" instead of the arrow to maintain consistency?
    – Devin
    Jun 8, 2023 at 19:20
  • Hey @Devin, thanks for the input. I added some additional information in the first paragraph. "Weiter" is the word for "Next" indeed. We did write it out as we want more focus on that button, however maybe we could add the arrow in that button also?
    – Maharkus
    Jun 9, 2023 at 7:15

3 Answers 3

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.

1
  • I think you might be right, moving the cancel button out of the same menu is the better way.
    – Maharkus
    Jun 10, 2023 at 11:34
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.

4
  • Making the cancel button less prominent is a good point. Why should I put the cancel button in the middle though? Doesn't that give it more emphasis?
    – Maharkus
    Jun 9, 2023 at 8:08
  • @Maharkus no, exact opposite. Just Google primacy/recency effect.or better yet serial position effect to understand why. It's why in a nav of a website you'll notice that the left and right most actions are the most used. Jun 9, 2023 at 9:37
  • 1
    got it, super interesting concept. We will definitely play around with this!
    – Maharkus
    Jun 9, 2023 at 10:09
  • @Maharkus 🫡 happy hunting Jun 9, 2023 at 10:11
1

Ok heres what I recommend:

enter image description here

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.

1
  • 1
    Another good point. Cancel is a different thing and needs to be treated differently. I like your idea of adding labels aswell. Thank you.
    – Maharkus
    Jun 10, 2023 at 11:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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