14

I understand that some libraries would force me to, but my question is general.

If I have a set of buttons at the bottom: Back, Next, Cancel?, (other?), then should their location ever change? If the answer is no, then what do I do about pages with little content? Do I stretch things? Place them in the lone upper left corner? According to Steve Krug, it does not make sense to add anything to GUI that does not need to be there.

I understand that there are different approaches to wizards - some have tabs, others do not. Some tabs are lined horizontally at the top; others - vertically on the left. Some do not show pages/tabs, and are simply sequences of dialogs. This is probably a must when the wizard is "non-linear", e.g. some earlier choices can result in branching.

Either way the problem is the same - sacrifice on the consistency of the "big picture" (outline of the page/tab + location of buttons), or the consistency of details (some tabs might be somewhat packed; others having very little content). A third choice, I suppose is putting extra effort in the content in order to make sure that organizing the content such that it is more or less evenly distributed from page to page. However, this can be difficult to do (say, when the very first tab contains only a choice of three things, and then branches off from there; there are probably other examples), and hard to maintain this balance if any of the content changes later.

Can you recommend a good approach? A link to a relevant good blog post or a chapter of a book is also welcome.

Let me know if you have questions.

Improve this question
0

5 Answers 5

Reset to default
20

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 move it between existing pages, or add new pages - but not too many. However, as others have also pointed out, don't split a page up arbitrarily to meet some artificial size requirements. If options logically go together keep them together.

Improve this answer
13

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 cases I've seen, the design of the individual pages isn't suitable for novice users.

Size

For a wizard, it's not just size - the user should have the impression he interacts with the same window all the time. This is commonly achieved through a header and other control elements in the same position throughout all pages, and same size.

Example: Installshield violates the "same window" metaphor pretty badly (though it's not too obvious): each page is a new modal dialog, centered on the primary monitor. So move the window to another position, click next, and bam, your window is back where it was. Aaaargh!

In a wizard, a changing form size is quite awkward for users. It's like holding his hand, but you are constantly dancing around him. In more serious terms: the user action (clicking "Next") has an unexpected side effect ("Window size changes"). This decreases the users perceived control over the software.

I'd argue that even for tabs, changing sizes are awkward. First, it looks shitty - which subjective. Second, if you position the window containing the tabs so that they are in the corner of a screen to reveal another document on your desktop, an you switch to another page, either part of your dialog vanishes, or it jumps further into the desktop, potentially covering other things.

(Full disclosure: I am working on an app which does that, and it's my fault. Watching users pull around that poor little dialog makes me cringe. It's one of those little speed-bumps that build up annoyance).

If the choice is between "a little crowded" and "almost empty", it's usually fine. Empty space looks good. Just having a large prominent window with a single input field makes a clear statement: this is your next step, and it's darn easy. That's exactly the message you want to send with a wizard.

Improve this answer
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 confused by blank space between the input controls and command buttons at the bottom, so I wouldn’t spread things out either. Space your controls to best indicate how inputs and instructions are related. As long as the step seems complete to the users, they won’t go thinking that something is missing. Wizards commonly have blank space above the buttons, and users understand that some steps take more space than others.

I think moving the buttons up to be directly under the input controls on sparse pages is likely to be more confusing. Users expect “final action” buttons to be in the bottom margin. Move them up to the middle and users may not immediately see them as “final action” buttons. Even more important is the point in ChrisF’s answer to allow users familiar with the wizard to click through it quickly.

Improve this answer
1

Personally, I would:

  • make the default action bigger (bold even, depending on the rest of the UI)

  • make the destructive option red and perhaps even not look like a button (e.g. "Login" forms where "cancel" looks like a link whereas the submit button looks like a real button)

Beyond that, I don't think they need to be the same size as long at the whitespace around the text of the tab is the same. However for consistency, the location of the button should remain the same, that way it trains users to expect the UI behaving a specific way.

Improve this answer
1

It depends on where the Next/Previous buttons are located. The most important thing is that they never change position. If they are located at the bottom right, as is quite common, this would also indicate that all the pages must be same size.
If the buttons are located at the top left, constant size is not important, but it might look a bit out of order to have the buttons before the content.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.