Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I have an interface that I am currently working on that asks the user to make a choice of a single item. These items are divided into 3 separate categories and the client has insisted that each category has their own "Continue" button, to help illustrate to them that they are choosing from a particular category.

In the first 2 categories, there are 4 options, with the continue at the bottom. In the third category, there is only one option.

We are trying to determine whether to align the "Continue" button along the bottom with the others (shown below) Option 1 enter image description here

Or if we should let the place the button directly underneath the 1 and only option for the third category (shown below) Option 2 enter image description here

The advantage of Option 1 is visual consistency of the placement of the buttons. The advantage of Option 2 is less distance to travel with the mouse to click next if choosing the option in the last category.

I am leaning toward the first Option, which allows for visual consistency, but there has been some disagreement on whether that or mouse distance is more important.

Another point to consider if choosing the least mouse distance argument is that if the user chooses the first option in either of the first categories, they must travel this distance anyway, so it seems as only a mild inconvenience , if a it is considered an inconvenience at all.

So to reiterate, the question is: Which is more important, less mouse distance to travel or visual consistency?

share|improve this question
add comment

6 Answers

up vote 11 down vote accepted

Option 1 by far.

Please tell them that mouse distance is only one of many UX factors that need considered.

  1. Scan-ability - Knowing that the buttons are always at the bottom will cut out a lot of cognation and time for the user.

  2. 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 or bottom?

  3. Visual cleanliness. Symmetry has a calming effect and the opposite can cause visual clutter which causes stress and disorientation which leads to extra cognation for the user.

share|improve this answer
    
Exactly my thoughts, thanks for the support! –  Matt Rockwell Jun 15 '11 at 17:05
1  
Especially point #2! This is a great case of "premature optimization" or over-application of a rule. So they have to move their mouse, ONCE, a few extra pixels. That's a really small burden... –  Alex Feinman Jun 16 '11 at 14:46
add comment
  • 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 deceleration time - not the travel distance. Halving the distance won't double the speed of clicking. Users are also used to continue buttons at the foot of a form rather than somewhere in the middle. You're closer to that convention with option 1.

share|improve this answer
    
Great, thanks! Just needed some confirmation of my thoughts to pass onto the other members of the team. –  Matt Rockwell Jun 15 '11 at 17:05
    
To add: mose distance is an issue only on highly repetetive actions. The typcial application is heavy graphics editing / publishing; in all other case I'd say ask yourself if yiu're doing something wrong on a conceptual level - not just wiht the item placement. –  peterchen Jun 16 '11 at 13:37
add comment

Go with Design 2

From a usability standpoint, Design 2 is preferred for faster selection. From your sketch, Fitts Law predicts that Design 1 will take up to 80% longer to click than Design 2 for the one-option list when the others have at most 4 options. Because the user most likely selected an option just before selecting Continue, you know where the pointer is: right in the middle of the option. That’s how I performed the calculation.

With some caveats, I don’t expect a major usability problem with this form of visual inconsistency for any of the ways inconsistency can impact user performance.

  • I don’t think it’s any harder to learn “the button is at the bottom of the list” than “the button is at the bottom of the page.” (This is a case where each design is consistent and inconsistent in its own way).

  • Users are not going to have trouble finding the Continue button due to it being in different places with different lists. They select from a list and scan down and find the button. Finding the button would be problem if the task involved scanning sideways among the Continue buttons to find the right button.

  • With your clear and distinct design of the buttons, users are not going to confuse it with an option. They don’t need to rely on the buttons' positions on the page to know their function. They can see and read it easily.

  • Users may not recognize that all buttons do the same thing but that doesn’t matter. From what I can tell from the task, once the users are selecting options from one list, the other lists are irrelevant. Ultimately the user only selects the Continue button from the chosen list so they don’t need to know what the other ones do.

...Or Maybe Design 1

Design 1 might cater better to muscle memory that Design 2. If users use your app daily and repeatedly to the point where they’re really whipping through this page, it may be easier for them to get into the habit of zipping down to the bottom of the page for the continue button regardless of the number of options.

Some may find Design 1 to be more aesthetically appealing, so that might be another advantage. Personally I don’t, but if users clearly respond negatively to Design 2, then you can go with Design 1. That might be worth a second or two longer to click for the user.

Actually, Go with Design 3

Of course, if the user can make only one choice from a list, the solution is to have the selection of each option advance the user to the next step and eliminate the Continue buttons. The fastest click is no click, visual clutter is reduced, learning is easier, and you no longer have to worry about button consistency.

share|improve this answer
add comment

I would add that visual consistency is a good thing as long as the action buttons -- if far away from the copy that invokes the action -- are big enough to be easily clicked (Fitt's law). That seems to be the case here.

So in this case I think that both options work, as long as the buttons are large.

Then it would boil down to an aesthetic judgement on the page's appearance (ie, your preference).

share|improve this answer
add comment

Putting your 'continue' buttons at the bottom helps you visually distinguish them. I can't see past your blurring, but it looks as though it's hard to immediately tell between the product and the 'continue' buttons. But this isn't a problem if the button is always in the same place, every time - I just find it once, and never need seek it again.

That said, is having three buttons a great solution to your original problem in the first place? As a user, I usually expect the 'Next' button in any UI to sit in the bottom right. If I see the rightmost 'continue' button, I might just click it carelessly. Why exactly does the customer need to see selections from all three categories simultaneously?

share|improve this answer
    
It's kind of like 3 separate roads to take, that's why the client is insisting on displaying them all side by side like that. And when they click continue it is suppose to reinforce which path they have chosen. –  Matt Rockwell Jun 24 '11 at 11:39
add comment

Option 1 makes the most sense both from a usability and design point of view. Usability wise the button's consistent position allows the user to learn the position of the button and take action with less mental overhead.

From a design point of view this satisfies the repetition and alignment principles. All action buttons are aligned at the bottom and each category area has a repeated design with header at the top, action at the bottom, and options in the middle.

So not only is it functional but it looks good.

I would however make the buttons more contrasting since everything looks a shade of grey at a glance. From what I see, if there was no blurring it would be hard to quickly identify the action buttons.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.