What is wrong with my color selection?

Question

Our customer said they wanted a minimalistic user interface, with a Windows 8 feel. However, I am a developer and do not have any experience with user interfaces. So, I went ahead and found the color codes Microsoft uses and now it looks like a unicorn puked into my program.

There are really good UIs out there, I just cannot figure out what the problem with mine is. I did a "dark theme" to figure out if it was about placements, but guess it is not.

What is the main weakness of my design or color selection?

Explanation about the UI:

The buttons on the left are for selecting forms. The rest of the screen changes according to the form selection. I am using winforms, if it matters.

Answer 1

It may not be your color scheme -- it may be that in your layout, nothing "wins", and there is a lot of visual noise.

Every selection looks equal in importance, but I'm sure they are not all equal. Make your hierarchy of information visual. Maybe your default button should be larger than the other choices. Let the thing that is most important to the user win the bid for attention.

There is also little visual interest, because everything is a box. Provide some contrast by varying sizes or shapes.

There is a lot of visual noise. All those different colors are competing for attention. What if instead of making each of the left side items big colored boxes, you made them all gray, and only applied a stripe of color to the left edge? A lighter hand with color might help.

Or, hire a visual designer. :-)

Answer 2

The metro interface is actually made of one color in two shades, a dark one in the background and light one for the tiles. The dark color can be replaced by gray. You never get real black in any of microsoft's interfaces, and you don't get two different colors.

The other colors come from content displayed on live tiles - photos and videos, mainly, but also applications' specific colors - and they are usually less bright and less saturated.

If you take a look at the outlook or the office cloud designs, you'll see they follow the same rules (using white, grey and orange OR blue).

Black and bright colors are both very agressive on screen. You shouldn't use both at the same time.

Answer 3

I wouldn't use black as your background. It's way too much of a contrast between the content you have. Windows UI also has quite a colorful UI palette.

If you're looking for something minimal, but less "colors of the rainbow", I would look at alternative minimalism UI examples and take inspiration from those. Take a look at Mailchimp, Zendesk and Desk's UI. They are still minimal and very easy to understand.

So far your explanation for adopting the metro ui style is because you're users said they like it. They may like it for the Windows OS, but that doesn't mean you should copy it for your own app. It sounds like your users just want something simple and easier to understand.

Answer 4

Gradients Adding on to Linda's point, I would suggest use of a slight gradient to make each element a little softer than one bold color on top of another.

Visuals The Windows UI also makes use of bold white visuals to break up the monotony, which could help. Place a huge white icon in the middle of each of your buttons and add a small text on the bottom left corner with the description. Also, change up the sizes. The Windows UI does a good job of changing up the sizes so they all fit in together, but two elements next to each other are rarely the same sizes. They alternate between squares and rectangles.

Contrast The current contrast on the screen is making it a little bit of an eyesore. Use a colored background and overlay hues of the same color. i.e., instead of using red, blue, yellow, green use light blue, dark blue, purple, lighter purple, soft red etc. Colors that aren't totally opposite of each other on the color wheel tend to flow better when seen together.