18

I think in your case the wizard pattern is not a very good idea. I would recommend adding an extra button on your initial screen "ADD MORE DETAILS" above the SEND button (if you place the additional details below in small letters it will be probably missed). Add a label "OPTIONAL" so that users know they can skip the additional step. When the users select ...


10

Since horizontal space is limited, a vertical progress tracker might scale well in a mobile device as shown below. If the number of steps you have is less you can still keep a horizontal progress tracker but remove the text below it and use the title text as an indicator as shown below That said I am not a big fan of this since there is no textual ...


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 ...


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-...


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 ...


7

Jumps and Loops So, just be clear here, you have four user tasks which, with some limitations, can be completed in numerous sequences. Specifically, there’s 1) Create List, 2) Test List, 3) Set List Details, and 4) Display List. Obviously, the user has to create a list before doing anything else with it. Maybe there are some other limitations, such as the ...


7

Your "regular people" (i.e., your users) are generally correct. The first image you display does not tell me where I am. When I look at a mall map I don't care where I've been, I want to know where I am now so I can see how much further it is to the Cinnabon! If you use a two color scheme, given context this tells me I'm on Step 3: Adding an additional ...


5

Some improvements are: Remove agressive black border as it takes too much attention Use single grid, it creates simple visual structure Align numbers to the right for easy scanning and reading Remove repetitive 'Score'. It breaks the numbers reading Don't use too long empty lines Be careful with zebra-coloring the lines, as printed version could be hard ...


4

Yes you should give user control over the app, always! It is one of the points you check for in heuristic evaluation. I use ISO 9241-110 Ergomics standard for interactive dialog and controlability is one dedicated chapter of it. What happens, if one enters a wrong, but valid working email? How can I correct it, if I recognise the error? A Sidenote: Why did ...


4

I generally like the progress bar used on Udacity.com: I believe, it provides the information required in a modern fashion without having to use 1 - 2 - 3 -... (even though as pointed out, it might be the most understandable fashion). In this progress bar the blue blocks are completed, orange is current subject, grey is future. The progressbar at ...


4

I don't think it is a familiar flow, but it can work. There are a few points. Make sure your hierarchy between main steps and sub steps is very clear. Users must not think there are more steps than there really are. Also make sure there's a clear difference between a completed and an in progress step (like your image already has). The above mentioned ...


3

I would suggest playing with this in Microsoft Excel. It gives you the ability to try different combinations of things quickly, or even to create the same data, with different styles applied and compare side by side. Here is quick mock-up I did in less than 5 minutes. There are a ton of other combinations you could experiment, and I think with 30 min you ...


3

Alexey Kolchenko has made some good suggestions, specially regarding simplifying the grid to improve readability. I'd like to propose an additional measure for readability. Looking at your initial example, I noticed the "parent" groupings; that suggested to me visually distinguishing those groupings in some way to make them intuitive to the reader. My ...


3

Try using accordion steps if horizontal tabs are not fitting the screen width; many e-commerce websites like http://www.flipkart.com/ use them for checkout process. And the easiest front-end with jQuery


3

The header bar which shows the current step (Title "Step X" in your mock-ups) can have a representation of the previous and next steps. Maybe stacked frames which also indicate how many steps there are (done as well as upcoming). The top frame contains the number of the last and the next step. Like so: [1] Step 2 [3]] would mean you're on the ...


3

As a user, filling multiple contact forms is really annoying, irrespective of the UI. Why not restructure the entire contact form as a single page. There is a reason why every registration form is a single-page process, which is to ensure that the process of asking data from the user does not irritate him. Use the conventional 'required field (*)' concept, ...


3

Create a left to right steppers with titles, but here's the caveat: only show the title for the current step and do not number the steps. Do not number the steps. Showing the user that they have eight steps to go is a psychological disincentive. Imagine a personal trainer telling you that you'll be doing eight sets of an exercise before you start as opposed ...


2

You could try present the steps as ordered set. Top-to-bottom ordering sets the sequence of the steps, as it will be perceived by users. Each button contains some instructions, so the second-time users could select needed step, while first-time users are led by the top-to-bottom sequence. Also you can implement some principles of the instructional UI in ...


2

Progress and feedback: The effects of providing progress feedback to users is well documented and proven to increase task completion rates and overall satisfaction. The rationale hinges on the idea that users who perceive that they are making progress are more likely to complete the task. Consider the following metaphor: A friend tries to encourage ...


2

This is not a research, but a great article for input with lots of examples for progress steps: Progress trackers in web design


2

I myself like a pop-up in this situation. Leads to this pop-up... Note, I place "Create new group" lastly in dropdown list. Now the trick is to add yet another pop-up for the New Container. It should be no problem to have the three panels open at once. You could use an expanding pop-up to reduce clutter. Expands to... Good luck!


2

Do you have to show the number of steps for a single step process? Surely you only need the user to recognise a multi-step process when it IS a multi-step process - ie when there are 2 or more steps. My recommendation would be to abandon the single step indication all together.


2

I would say Accordion. Multipage may give issues when going back a step and losing form data, plus it's usually not possible for customers to 'look ahead' to what they have to fill in. It can feel too opaque, like you're expected to sign a contract but they're not letting you read it in its entirety. But a single page can seem daunting, especially if you ...


2

If question is - user needs to know what "Next" or "Previous" buttons take the action to ? then you can explicitly put a label in the button as shown or show a tool tip. You can use highlighting button or section/tab to display what tab or step is active currently.


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! ...


2

Beyond looking nice, there are other reasons why "steppers 2" can be good: Easy to keep track of progress Step titles tell you what information is required Greater sense of progress as you physically move down the form You can access other steps out of sequence (e.g. go from step 3 to step 1 immediately) However, as you said, step 2 has a list of varying ...


2

I think the way you display it now causes unneccessary confusion. You only mention adding details in the progress bar, which is something that can be easily overlooked. So it is unclear what the difference is between the two options and what changes if you continue by pushing next. If you add this missing info to your button, you'll clear things up. ...


2

The current state is far from ideal, but it is the best solution for the 👇problem. The fact that some password managers are having a hard time working with it is another problem :) This usually happens when the service starts offering other means of logging in, not only the email/password combination. For example services like Okta, or other corporate ...


2

Try putting the stepper navigation up top. Allow them to see the criteria values, and refresh as needed. Since the quality of the list is dependent on the criteria, you could attempt a persistent sidebar, similar to filtering in ecommerce. Material design has some simple patterns for steppers. This will get you some horizontal space to work with. Can you ...


1

I have to say, I agree with your product team. Although there is no rule that states that you must not exceed the number of steps required for a wizard. Ideally you should strive to keep the number of steps to its minimum (short and concise). This is to prevent user from dropping off half way when they are going through your wizard. Or worst going back and ...


Only top voted, non community-wiki answers of a minimum length are eligible