Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

I have a navigation menu with some buttons, that looks a bit like this (NOTE: Each button has a distinctive icon that differentiate it from the rest, I didn't add them to the mockup but they are similar to Wins8 icons):

enter image description here

Some users have reported accidentally clicking Sign instead of Send, something that is just inadmissible. I'm now considering ways to differentiate the buttons more. One option is to move Sign to the right. The other, (probably adding to moving it) to change its color:

enter image description here

Is position good enough differentiation? Or should I consider using color as well? Adding a new color to this navigation has some impact in the overall palette and look, so it has a price I'd have to pay.

share|improve this question
2  
I wouldn't call this 'off topic' but this might make more sense migrated to UX. –  DA01 Jan 28 at 21:28
    
@DA01 Yes, I was considering it. The color part of things made me wonder, and finally thought: Can belong in both? I don't mind migrating it, though! –  Yisela Jan 28 at 21:35
    
Some of your users are going to have blue/yellow color blindness. Make sure these colors are distinct for them! –  keshlam Jan 28 at 22:59
    
@keshlam Definitely! I have a colorblind app in the taskbar to try the palettes :) –  Yisela Jan 28 at 23:02
    
I'd say neither. Smell is more memorable :) –  Scott Jan 28 at 23:38

4 Answers 4

up vote 5 down vote accepted

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.

share|improve this answer
    
Thanks! Just a note: The buttons do have quite distinct icons, I can't disclose the actual screenshots, and I didn't add them to the mockups... but people confuse them nonetheless! –  Yisela Jan 28 at 21:40
    
I figured they weren't true to life, though I couldn't infer if they did or did not have icons, thanks for clearing that up. –  Johannes Jan 28 at 22:27

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" :)

share|improve this answer

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

share|improve this answer

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:

enter image description here

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.

share|improve this answer

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.