: What do users remember the most, position or color of elements? I have a navigation menu with some buttons, that looks a bit like this (NOTE: Each button has a distinctive icon that differentiate

@Harper654

What do users remember the most, position or color of elements?


I will not come up with concrete suggestions, but a short comment on the headline: it is highly individual. Just like some people will say "I see what you mean" and others will say "I hear you" or something similar. Some people are tuned to visuals, some people are more tuned to sound.

Some people are more attuned to shape, others to colours. Just as you need to satisfy colourblind, you need to take into account that not all people see shape-and-colours as their primary clues to navigation (some people will identify a tree, an animal, a house by shape or colour; some will identify a car driving by by sound rather than shape and/or colour etc).

In this instance, it is of course a balance between the two (it would be fun to find out what kind users blunder into the wrong button. There might be a pattern there. Also, I think users with excellent computer skills will be faster at assuming where to find the right button.).

Since you cannot show us the actual buttons with the icons, it becomes difficult to suggest. One simple way could be simply to make the distance larger to the one "out", as @DA01 suggests. Sort of like MailApp:



Just a thought.

Edit

One experiment that is fun, is to present a handful of people a primitive mockup (The simpler the better: drawings, post-its on a wall, flip-over sketch, whiteboard etc) with buttons placed but not marked and identified. Then ask people what they expect the anonymous buttons will do. Sometimes, this can bring informative and very interesting results.

Vote Up Vote Down

@LarsenBagley460

I agree with both Johannes and DA01, they've both raised the points that I would with regards to positioning, alliteration etc.

But what I would like to add.

With already having icons for sign save and send, then the re-positioning alone of the send button should be plenty. I would suggest not changing the colour as there is no need and it's also a bit more of a drastic change for users.(Don't get me wrong I know they could cope but I don't think it's needed).

If the symbols are recognizable enough for people then the separation of the send button should suffice.

If your icons are less immediately recognizable i.e you have perhaps a disc or usb instead of the traditional floppy disc for the save icon,then I strongly suggest changing the colour as you've suggested, people understand that green means go.

Hope the users end up happy ;)

Vote Up Vote Down

@Reiling762

It also doesn't help that you're working with three four-letter words that all start with the letter 'S'. :)

Color is an immediate indicator that something is different. In your first example you really have no idea what any of those buttons do unless you really take the time to pay attention and read them, at a glance, they are far to similar to differentiate. A paradigm we use where I work is that we make our primary action a separate color from any less important or less permanent/finalizing actions.

But color isn't necessarily the make it or break it point either. Another valid strategy would be to associate an icon with every button (not just with the last two). That way you're creating another easily distinguishable difference in the elements.

As for your actual question, if the position is enough differentiation, I think that it certainly helps because the pattern of buttons is broken by the two smaller ones which forces you to really look at the differences in the buttons rather than ignore them. The added color only helps to accentuate this further, and personally, if possible I would add the color in as well, as that helps future proof it in case more options are added in later and the button may be missed more often again. Though, providing that changing the color is difficult to do, I would find the new positioning to be sufficient.

However what I think is probably much less relevant than what your users think or do, and if you have the resources to, I would try some various designs and test it with users to see which they prefer and for what reasons.

Vote Up Vote Down

@Shelley591

Things that can be used to differentiate buttons:


the labels (obviously)
color
size
order
location
proximity
shape/style


The more unintended damage an action may cause, the more likely you want to pick from more than just one of those options above.

Not knowing the user flow for these commands, I don't know if your suggestion is enough, but it's definitely an improvement over the previous as now you've moved the 'uh oh' action, send, away from the other two.

I'd maybe go a step further and use judicious proximity differentiation. Perhaps something as drastic as this:

-------- --------
| SAVE | | SIGN | DELIVER -->
-------- --------


I've used a number of differentiators here...proximity, style/type of button, and renamed 'send' to 'deliver' (see below).

One other challenge you appear to have is a massive case of alliteration. That may take some creativity to overcome that. For example, you likely never want to have two buttons side-by-side with the labels "delete" and "deliver" :)

Vote Up Vote Down