Which is more important, less mouse distance to travel or visual consistency?

Question

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

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

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?

Answer 1

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 cursor will start from the top? Think about where your cursor 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 cognition for the user.

Answer 2

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

Answer 3

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.

Answer 4

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

Answer 5

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.

Answer 6

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?