Hot answers tagged

77

Render the confirmation in a modal: This will highlight explicitly to the user that one more action is needed.


59

The back button is important. Users should be able to correct any mistakes and review what they have already entered. Also, I do not find the back button a reason users will not finish the form, on the contrary the back button will give them a sense of control and safety.


55

Allowed but not emphasized The key is to provide the ability to step back, but not encourage it. If it's over-emphasized, some people will feel compelled to review their work regardless. The example above shows a wizard that allows stepping back either through the progress indicator (click a number) or a subtle back link. A little background: Users are ...


49

The concept is fine, but "Finish" is ambiguous as a label. It's better to more specific about what will happen if you press the button, for example "Save and exit".


41

In my opinion it would be better to distinguish between creating and editing the business object. For creation a wizard is fine. Besides the next button it could also have a finish button if the current and all following wizard pages only had optional information as input. For editing an existing object a tabbed dialog could be a good choice, since allows ...


24

Left-aligned buttons below the fields would provide a clear path to completion. Luke Wroblewski discusses clear path to completion in his book "Web Form Design" (PDF that contains some of the images). Here is an example from the book on how alignment can make the path of completion clearer: Similar to the example above, you may consider having "Next" be ...


21

I don't like the words Submit Request - as a designer that is what pressing the button does. For a user, it is more-or-less as meaningless as Press This Button. I don't think Send Request is much better, possibly worse (where is the request going to be sent to?). I suggest Place Booking if that is what your system is about: booking a course somewhere. ...


19

Keep the Finish button There is nothing wrong with the Finish button because it provides an exit shortcut for users who want to save and finish the process early. Otherwise, users who want to edit just the first page of the wizard, should click 4 times next until they can save and close the form. That's 4 unnecessary clicks. Add a Stepper progress bar The ...


15

The Previous button should not act like the Back button. The Previous button means "go to the next-lowest numbered step"; the Back button means "go to the screen you were on before this one". In any given context they may have the same effect or different effects. So here are two paths the user could take. Step 1 Next→ Step 2 Next→ Step 3 Previous→ Step 2 ...


13

Change the behavior to fit the intuition You might want to change the behavior to fit the user intuition, instead of changing the design to "make the user understand" the behavior that you originally intended. If there are no major reasons for the details to be set in stone at that point (and they aren't, since apparently they can cancel it before the ...


12

There are some brilliant examples of start-up walkthroughs. Typically there are two types of start-up prompts, walkthroughs and coach screens. Walkthroughs These are usually slides, often with animations that contain an overview of features, ending in a call-to-action. Twine: One good example of animations is Twine, which makes you scroll through to the ...


9

Can you support auto save in this context? As long as users don't experiment with the data it would smooth the process. Make it even faster by providing a key sequence for the next button. If that would work, you can just have a status indication immediately adjacent to a 'next item' button, like the pattern illustrated below. If you need to allow undoing ...


9

You should really change the wording on your primary action buttons to make it absolutely clear. "Submitting request" or "Send request" is what your browser does when the user clicks a link or button, but "Pay for session" is what the user wants or has to do in this context to continue. By using a modal dialog you show the user that he has to complete the ...


9

It is definitely a good idea. I have used this approach - at a particular point in our wizard, the wizard has captured the important stuff it needed, so we allowed our users to finish the wizard early if they wanted too. I had to make sure the appearance of the Finish button was really obvious - some early usability testing showed some people didn't see ...


8

Any time that you as the designer have to ask the question "Is it intuitive"... it's not. Keep it intuitive, keep it simple, use existing conventions in your favor. Users know the function of Radio Buttons. They are a intuitive convention. Use them. Do not add confusion to users by reinventing the wheel.


8

You want to keep it as simple as possible. The way you have it with the 'Back' and 'Next' buttons requires additional thought by the user as you have realized ("why do I need to press two buttons for each question - yes and next?") A possible solution to this is to allow them to go back directly to previous questions if they want to make a change. Also, as ...


8

This is a good article about the wizard pattern http://ui-patterns.com/patterns/Wizard The best is your third option, to have Next and Back buttons at the bottom right, because the user will commonly use them, he will mainly use the Next button, and he will use the Back button if he forgot something or want to check something. The Cancel button should be at ...


8

I would say a wizard 'stepped' process, with a progress tracker, is perfectly viable on a tablet. The full screen format should lend itself nicely to tapping through a form. Some related points to bear in mind keep amount of steps relatively low but… don't make each step too long clearly indicate on the progress tracker which step the user is on allow '...


8

You say: I've decided for tabs (instead of a wizard) due to the fact that the user might not fill it all out in one go, but rather re-visit and edit it from time to time. So you have a hefty task where more will need to go into a handholding experience than even the typical wizard. In other words, you'll need to build in more prompts and explanations than ...


7

I have been struggling with the exact same problem. In my case, I had 10 steps and depending on which choices you make along the way, some steps are not applicable, and some have a different content and title. Let me first explain how I solved my specific case. After many discussions we basically decided to split up the wizard in steps and substeps. We ...


7

Some points for good labeling are: Short – 'submitted' vs 'uploaded_for_processing' Distinguishable from each other – bad: 'uploading' and 'uploaded', good: 'uploading' and 'submitted' Same styling rules – try not to mix verbs and nouns and use same case Understandable – user should know business process to match labels in UI to business phases For taking ...


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

First, answering your question, you should search for progress indicators on checkout processes. There you will most likely find what I also heavily researched the last months: Color coding (positive color, thus no red) is a good way to highlight the current step A friendly Google employee who was inhouse to give a small presentation about checkouts, ...


6

This really depends on what your users are used to. I had a similar situation in a recent project which also involved a wizard layout with a next button at the bottom. For a form on one of the wizard steps, the user had to choose one of 4 choices. Once the user chose the option, we were deciding between: Automatically moving the user to the next step of ...


6

I think the risk of your backend having some trash data (which you can get rid of) is much more acceptable than the risk that your user might lose some of her data from a catastrophic crash. Furthermore, having data can be useful enough to help the user experience with pre-filling previously filled inputs. Additionally, if you can get partial data on a ...


6

The Review stage is generally useful for verifying the data keyed in by the user in the previous steps. Best used in scenarios where the user cannot roll back the changes after confirming like, transferring funds to someone. However in less severe cases this step is redundant. Note that the over all goal is to give an opportunity to trace back and ...


6

No, it's not a good idea. Apart from the fact that nobody would expect it (principle of least surprise), it's already established that the back and forward buttons move through your browser history -- that is, pages that have already been visited. The forward button also has no ability to indicate, like a 'Next' button often does, whether proceeding at this ...


6

You should remove any buttons that are not available to the user. A disabled state implies that there may be some action that will re-enable the button. However, you need to make sure the user is fully aware when moving from pages with 'Back' buttons to pages with no 'Back' button - you could achieve this by changing the 'Next' button on the last editable ...


5

It is based on your requirement. Send all data to the server when user has completed all steps. If all the information(basic info, addresses, upload image) of the user are needed according to your requirement, then this is the best option. Just think for yourself, You are going to send a three set of data to your server. Then which of the following is ...


5

A tutorial which users can leave at any time and come back to is your best option. Demo values will only confuse users if the values aren't accurate. But, in a tutorial-wizard like manor you should show all the options, with demo values and a demo user. This way you introduce the features of the site, and your user will quickly get up to speed of what they ...


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