Tag Info

Hot answers tagged

21

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


19

The location of the buttons should never change. The user will be expecting the location of the "Next"/"Finish" button to stay constant so that they can keep the mouse still and click through accepting the default options. If you've got some pages with a lot less content than others then it could be that there's too much content on the other pages. Either ...


14

My first suggestion would be to try to eliminate as many steps as possible. Really think about the flow, what's required, etc. Some tips to make a long process more friendly: Show a progress meter of completed steps If possible, allow users to jump back and forth to go back and correct a previous entry Give real-time feedback when an entry doesn't conform ...


11

Option 1 by far. Please tell them that mouse distance is only one of many UX factors that need considered. Scan-ability - Knowing that the buttons are always at the bottom will cut out a lot of cognation and time for the user. Who says the users curser will start from the top? Think about where your curser is right now? is it near the top? or the middle ...


10

The wizard style makes it clear that all steps must be completed before you can save the data. It guides the user through the process and, if done correctly, makes sure that they don't miss out any vital information. This is particularly true if you don't enable "Finish" until the last page of the wizard. Just having the tabs hides potential required ...


10

Wizard vs. Tabs Use a Wizard, when you want to guide the user through multiple requried steps. Use Tabs when the user can select an arbitrary tab, make changes, and then commit them without looking at the other tabs. I always find "Tabs with Back/Next" awkward. I understand the idea to provide a little "ramp" between novice and advanced users, but in most ...


9

Use wizard when: have ability to split process in well balances wizard steps collect and process data from previous step to use in next step want to complete and save some steps, to restore after cancelling Live examples: iPage domain registration Use form when: can put everything on single page without a mess can't split process due to technical ...


9

Depends on what you are trying to create. The main difference is that wizards generally imply sequentially order and require user to fill the required fields while tabs usually works with any order, but there are other issues to consider: Tabs Random order. Better if the user try to edit existing information. Better for intermediate/advanced users. ...


9

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


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

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

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


7

This are the most important I can think of: Break up the operations constituting the task into a series of chunks. Previous and Next buttons. Sequence Map that shows where you are in the steps at all times Read more on this topic at the Designing Interfaces Wizard page.


7

Your first example looks more like tabs than like a wizard. It's a bit confusing because wizard has the strict order of steps as opposed to tabs where you can visit sections in any order. Your third example could hardly be called wizard because the classical wizard shows only one step. In your case it's something like a form with groups of controls. So, ...


6

I agree with Kostya, the tabbed one doesn't look like a wizard and is confusing. My personal preference is to not show at all the particular page they're on. But I still like to provide some feedback on how many steps there are. I'd display Step 1 of 5, or show a nice visual progress bar, e.g.


6

I would show all three steps. but title them in such a way as to make them look simple - in particular make step 3 look like it's going to be a single button click. Titles inform the user upfront about what to expect. The terminology hints at being quick and easy. The final step acts as the goal. Step 1 should be simple information. Step 2 might have more ...


6

In a wizard where it's possible to get back to an earlier stage, I don't see any reason why the progress indicator shouldn't be clickable. It's not a question of "a display rather than a control", it's "a control as well as a display". It's always a display. If you make it clickable, you provide an alternative navigation method, which is more efficient than ...


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

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


5

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


5

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


5

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


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


4

I would put each step into a tab, in such a way that the tabs that are accessible at any point are enabled, the others disabled. In this way, the user can move freely around a correct mistakes without having to go several steps back etc. The enabling of the tabs still stops the user to go to steps that cannot be modified yet, because there is still ...


4

Assuming you’re talking about a desktop app with fixed-sized dialog-type windows with no scrolling, I don’t think you need to worry about filling each page to the same amount. It’s more important to divide the task into small cohesive steps that are consistent with the user’s ability to understand the task. If you do this, I don’t expect users to be ...


4

Option 1 by a mile. It looks nicer and the reading speed will be far higher. It's much quicker to take in that all three buttons say exactly the same thing. There is no confusion about whether the third button is an option or a continue button. With a small target like this continue button the time to move the mouse is dominated by the acceleration and ...


4

Short answer: the previous button should not act as the history's back button (if I understand your term correctly). Next and previous should navigate up and down the numerical sequence of steps. In scenarios like this, you should generally try maintain consistency in the user's expectation for how the system will work. In the case of a linear series of ...


4

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


4

I would say for three options use radio buttons. All options are clearly on the screen when the form loads and you only have one click to choose. For more complicated lists, perhaps those that are split up by category, I would use a drop-down to avoid overwhelming the user with form elements


4

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