嚮導中的"後退"按鈕


0

我正在設計一個多步驟嚮導,在設計中,我包括了一個與單個步驟標記串聯的後退按鈕

back button

我們在內部進行了討論,建議您完全刪除後退按鈕,因為您可以單擊步驟本身,而在步驟上的標籤下劃線以使其更加清楚,它們也是鏈接。

我一直給人的印像是,最好以多步驟形式使用清晰的後退/前進按鈕。

  1. 應該保留後退按鈕(但考慮更改標籤以匹配上一步)
  2. 應該在步驟標籤上加上下劃線並刪除後退按鈕
  3. 後退按鈕應該位於表單底部嗎?但是不確定其位置

如果是第3點,那麼我不確定將按鈕放在哪裡。下一個按鈕當前位於左下角,直接在表單輸入下方,因為這會將按鈕保持在用戶的視線範圍內。但是,將下一個和上一個按鈕放在同一位置會感覺有些錯誤,因此我將按鈕放在頂部以

2

As per your design the "back" button looks weird and out of place being there, so I can see why somebody has thought to question it. However, I still believe if you are going to allow a user to navigate back, then there should be a clear way to do so.

I assume there is some sort of "Next"/"Continue" button on your form? (maybe at the bottom of each page). I would suggest that you work the "Back" button into that design. Have them next to each other, or at least on the same vertical alignment - "back" on the left side, "next" on the right.

With regards to highlighting the step markers, it won't hurt to make it more obvious that they are clickable, but I don't think it's overly important as an average user is just going to use "back"/"next" for navigation.

In addition, if the argument for not having a back button is that the user can click on the steps, then present the counter argument for not having a "next" button for the same reason. That will hopefully highlight how silly it is to suggest a dedicated "back" button isn't required.


In short, keep the "back" button but move it inline with the "next" button.


2

Excellent answer by Musefan. Also, the current placement of the "back" is usually reserved for going back to the previous view, not going back a step. This differs of course, but the affordance right now looks like the user would exit the wizard and go back to what they did before entering it.

Just a minor thing about the draft, right now it is very hard to distinguish between the current step and done steps. The only real difference is the text color being darker compared to light grey. Try working with the fill and border of the circles to highlight the contrast more between what the user has completed and is currently working on.


1

Should the Back Button Be Kept?

Yes.

There are two reasons to provide the back button:

  1. It follows an established pattern (Jakob Nielsen's usability heuristic #4). Many wizards offer a back button. Here are just a few examples: screenshot of GMAT prep wizard Windows 95 setup wizard mydlink setup wizard
  2. Offers users flexibility in interaction (Jakob Nielsen's usability heuristic #7). By allowing users to click on a step marker to go back to a previous step and allowing a user to click a back button, the UI provides users with multiple options.

Where Should the Back Button be Positioned?

I recommend looking to established patterns. Looking at the examples above, there are some that place it on the lower left of the screen while others put it just to the left of the "next" button.

There are pros and cons to each of these placements. I would recommend doing a quick set of user tests to understand which pattern would be best understood by your users.

reference: https://www.nngroup.com/articles/ten-usability-heuristics/