14

I am designing a mobile app in which there is at least one multi-step process. Throughout the app, I want the back button to mean back one step, but not up a level in information hierarchy.

During the multi-step process I want the user to be able to get out in one click, meaning a cancel button along with a back button.

The app will have content laid out, Pinterest style, and viewing each content item is not considered a step forward in a process, but a change in information hierarchy - it's like picking up a card off the table and reading it - so therefore I want the button that cancels the card to be the cancel, not back button.

In order to preserve consistency, this means I need to use the cancel button to end the multi-step process (which can include creating an account or creating a new content item).

My preferred design is version 2 where the cancel button is on the left, but when you're one step in, it becomes a back button and the cancel button moves over to the right. I want to know if people would find that jarring.

On the other hand I don't like the idea of there being no button on the left on step one (as in Version 1). This also means less precedent set for having cancel on the left, as it would be to cancel out of viewing a content item.

Thoughts?

enter image description here

Improve this question
8
  • As per the general user behavior, the Back button should always be on the Left side and the close or cancel button on the right side. Can you please provide more information about the app and screens.
    – Fasih
    May 2, 2016 at 12:02
  • 1
    At Step 1, is there nowhere where you would go back? What would be the behavior of the back button then?
    – njzk2
    May 2, 2016 at 15:23
  • 1
    Perhaps you should have a home button if you are going to use the back button to mean the same thing, for the sake of clarity and consistency.
    – Michael Lai ♦
    May 3, 2016 at 0:56
  • 1
    Seconded. If a button takes you all the way out of the process back to (some) home screen, use a home button (little house icon). This is intuitive and leaves no room for confusion with cancel (to which step?), delete, etc.
    – CompuChip
    May 3, 2016 at 6:20
  • 1
    I don't see why you would have only a close button on step 1. Just have only the back button. It's pretty intuitive that 'back from step 1' = 'quit', at least a lot more than arbitrarily moving the button based on page.
    – underscore_d
    May 3, 2016 at 10:07

7 Answers 7

Reset to default
10

What creates confusion i.m.o. is the back and the close button being on the same level in the visual hierarchy where as they act on different levels. Wouldn't it be more clear when the close button is visually more separated from the back button?

I would not recommend moving the previous/back button and replace it with a close button, because now the user can't trust his muscle memory anymore. You could consider displaying a next button alongside the previous button giving context to the buttons and the proces.

Instead of arrows you could also use text, making it more clear what will happen when the user clicks it.

A whole other idea is to use the native back-button on android so you don't need to worry about where to place it. But now I'm making the assumption (based on your sketches) your working on an Android app and I don't know if that's really the case.

Improve this answer
5
  • I am actually designing this for both Android and iOS. I won't be making any meaningful differences between the two versions; in particular I am not going to use the bottom bar for navigation, but rather contextual actions.
    – JClaussFTW
    May 3, 2016 at 0:52
  • As far as trusting muscle memory, the actual function of the button at the top left is effectively the same. It is to take you a step back from what you were doing. It's rather more a reflection of the spatial nature of the data that I would change it from "back" to "cancel" in form. Because going "back" when you're at the first step is dismissing the dialogue, its symbol should change, in my opinion. Does that make sense?
    – JClaussFTW
    May 3, 2016 at 0:54
  • @JClaussFTW Perhaps keep a back button (<) at top-left for consistency that steps back through the screens or back to where you came from. If, as dux's answer questions, you feel an overall "Cancel" button is needed (instead of backing at most three times), then perhaps this (X) can go in the bottom bar for the processes that need it?
    – TripeHound
    May 3, 2016 at 8:39
  • For emphasis of the 2nd paragraph: I don't really care where - as it's usually easy enough to adjust - but a given button should always stay in the same place. If you suddenly move it to the opposite side based on which page you're on... that's bad UX, as it's likely to confuse and annoy the user, as they risk clicking it accidentally and having to start again... all because - for some reason - you felt the button somehow looks better in different places, depending which page we're on... why exactly?
    – underscore_d
    May 3, 2016 at 10:05
  • 3
    @JClaussFTW Don't violate the expectations of your users. Android and iOS navigate differently, and trying to shoehorn one style into the other, or make your own, is guaranteed to frustrate either or both sets of users and get you lots of 1-star reviews.
    – Michael Hampton
    May 3, 2016 at 11:32
8

I would encourage you to consider whether a cancel button is truly necessary in this situation.

  • What is the likelihood that the user will wish to cancel their entire submission?
  • Is it more likely that the user would wish to change pieces of the submission more easily accessible using the back navigation rather than the entire submission?
  • Will other on-screen navigation allow the user to effectively cancel their work and end up in a more useful location than a cancellation confirmation page?

For some interesting thoughts on the matter see https://www.nngroup.com/articles/reset-and-cancel-buttons/.

Improve this answer
7

I find the second version confusing. I think that the same button should be placed at the same place in the different screens.

But I have to say that I find the first option confusing as well. To me, the button on the left should go back and the button on the right should go forward. Maybe it is a good idea to give us some more information of the rest of the screens.

Improve this answer
2
  • I'm realizing the problem with having the button in the top right is that, in a number of other contexts, there will be a "three vertical dots" button that gives you extra options like "report this post" and therefore it might not be good to have that button go in the same real estate.
    – JClaussFTW
    May 3, 2016 at 0:56
  • I was referring more to the context of the screens, not only the top bar. Try to keep the buttons at the same place for all the screens if possible. Consistency matters.
    – Dimitra Miha
    May 3, 2016 at 7:52
2

My answer only applies to Android, as I am lacking any long term usage experience with iOS.

Add step forward and backward buttons on the bottom (if this is a wizard like screen), Add the familiar "steps" dots on the bottom too. Provide swipe gestures to go forwards and backwards too.

Please do not attempt to create a general solution for Android and iOS! This will always end up confusing, especially the back button always confuses me when using an iOS device (they just happened to place it right at the corner where none of my fingers may reach easily).

Improve this answer
1

I think it's very confuse having the back and cancel button in the same bar.

I would suggest to add a bottom bar to navigate along the next/previous, so you can have a cancel button on the top consistently along the whole process.

Improve this answer
0

I suggest you to keep Version 1 because it will be same for android and IOS because as we know IOS doesn't contain back button so you don't need to change the design.

And people have psychology such that back button always remains in left upper side because majority designer use this standard.

So keep Version 1. Version 2 is confusing.

Improve this answer
2
  • 1
    Do you have any reference for your statement?
    – Benny Skogberg
    May 3, 2016 at 19:26
  • A written reference about back button placement which you can use as source for your "people have psychology such that..."
    – Benny Skogberg
    May 4, 2016 at 5:11
0

A third option is to use a button with an arrow to the left and up (⬑) on the left position in the first step of version 1. This conveys the information that clicking that button goes back to a previous state and that that state also one step back/up in the information hierarchy.

Improve this answer

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.