3

I'm creating a mobile app that will be used by maturer people, 40 to 60 yo, so I've been searching for sober colors and I came to gray, the problem is, How much gray is too much gray? What colors should I try instead of gray?

Any advice is appreciated.

This is my mobile app:

mobileApp

These are all my gray stuff:

Gradient colors from top-bottom:

for the menu and search box I'm using #7f7f7f on the top to #b2b2b2 on the bottom;

the square around the codes: #e5e5e5 to #aaa

footer: #e5e5e5 to #F2F2F2

One color only:

menu buttons: #808080

footer buttons: #c1c1c1

"beam me up Scotty!"

  • 3
    You're asking the wrong question. You can use as much or as little gray as you need. Colors should be used to differentiate different parts of the site. If everything is clear and structured in all gray than that amount of gray is fine. If something isn't clear and structured then you need to rethink either the layout, or color, or something. Nobody is going to be able to tell you an exact percentage though. – Ryan Sep 9 '15 at 12:00
  • @Ryan indeed, I totally agree with you, I don't have much experience on designing websites so I started to think that it would be too much gray :/ +1 – Kyle Sep 9 '15 at 12:06
  • 1
    I edited your question slightly to follow our Critique Guidelines which will hopefully get you some more useful answers. – Ryan Sep 9 '15 at 12:23
  • @Ryan Thank you so much, Ryan, for paying attention and advising me :D – Kyle Sep 9 '15 at 12:36
  • 1
    this a question of taste and usability...I have seen websites and app that use predominantly gray but it does not take away from usability. Once the color is interfering with the usability or UX then you are using too much gray. If you want to break it up a little, and it seems like you do, otherwise you wouldnt have posted a question, you can always use white for the background.... – Stanley VM Sep 9 '15 at 14:11
1

Your issue isn't "use gray or not". Rather, there are several issues you need to think about and likely spend time tweaking before you even dive back into the issue of color:

  • contrast. your list? good contrast. The buttons at the bottom? Terrible contrast.

  • emphasis. Do you really want 'Save' and 'Delete' buttons to have the same emphasis (or in this case, lack thereof?)

  • white space. the app could be improved by considering adding white space. Give elements room to breath. This is especially important on mobile where 'hit targets' need to be larger. It's majorly important if your demographic is pushing 60 years old as dexterity can begin to suffer.

  • layout. I'm not seeing a lot of logic to the relation of elements on the page. Why is status to the right and below the time, for example?

  • accessibility. There are some accessibility issues here. Namely the font size is very small, and you are using only colors to indicate status (which won't work for anyone that is color blind).

  • "chart junk". There appears to be design elements that aren't necessary. Do you need all the gradients? Do you need the bold zebra stripes on the table? Rethink those. I think you can simplify the look even more.

I'd suggest you go back to the drawing board. Really play with some different ideas and layouts. Don't worry about color yet. Nail the layout first.

  • That was solid and concise, thanks for showing what I'm doing wrong, the buttons on the bottom are indeed faded, the font, and contrast :/ are off, thank you so much for sharing your concern +1 – Kyle Sep 9 '15 at 20:04
2

YES, your app is using to much grey

Deuteranopia is the common color blindness. About 6% of the male population will see status indicators as 'grey' and 'grey'.

I used Color Oracle to simulate the effect:

enter image description here

You should make the status indicator also distinguishable by using shape, icons or text label. E.g. checkmark for green (okay) and a cross for red (error).

  • I never thought about it, my red now looks a yellowish green, thanks for giving a heads up about color blindness +1 – Kyle Sep 10 '15 at 11:17
1

I feel like it drains the charm from any other colours used. I personally only stick to two different grays, both light, and never gradient them.

1

I don't think it's too gray; your red and green add some accent and adding more than this could end up being too much actually! You could use some black too, it could add a nice fancy touch and lot of contrast.

But what I find too gray is your buttons at the bottom; they seem to not be pure white on gray but light gray! This lack of contrast. My suggestion is to use a bold font in white, make your buttons' background dark gray or even black, and use an easy to recognize symbol for the delete/edit/save (eg. a X, a Pencil, a check mark.) Make these buttons wider! You have room for it.

Another suggestion: PUT THE DELETE button with a lot of space between it and the 2 other buttons to make sure the users don't press the delete by mistake! The Save and Edit can be close together, and the delete at the aligned totally to the right and far from these 2.

The other thing is the gray circle of the numbers and the numbers; that too lacks of contrast and is hard to read! Again you could add the background without gradient and in dark gray or black, with a big bold white number on top of this. Maybe you could even use the color status and make these numbers centered in a green or red square instead; that would define each line and status very easily!

Suggestion: you could also center vertically the content in your rows! That would leave more room around each elements in each row and will be easier to quickly identify what is what. The date could be bigger too if it's an important data on your app.

Finally, I like the light background like you did for different rows, it makes them very easy to differentiate and it's clear!

  • Thanks for your suggestions and tips, I really appreciated it, about the gray around the numbers I made them lighter, but I took a PrintScreen of the old one which is indeed too dark, anyway, that about the delete is really important, even though there's a confirmation popup asking if the user is sure about deleting it, but keeping it away is still important +1 – Kyle Sep 10 '15 at 14:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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