User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I recently updated to Marshmallow, and I'm not happy with the blue over white scheme in daylight conditions. My question is if it's just me, or if this is documented and studied somewhere?

If so, how can this be solved? I haven't found a way to change these colors.

Marshmallow Quick Toggle

Edit I have a Samsung Galaxy S6

Edit

  • Accepted answer for UX explanation
  • Bounty for solving my problem
share|improve this question
3  
You are in the future according to your clock and my clock. Spooooky! – stradled Mar 14 at 11:16
12  
@stradled, Nah, I'm just ahead of my time. :D – GUI Junkie Mar 14 at 11:18
    
To be honest, there are lots of ways to hack or customize the themes for non-apple phones (that don't seem to have such issues), and sometimes it is just the light or angle that you hold the phone, but it is weird that they didn't even check the basic colour contrast difference because the tools are there. Perhaps the speech command interface is just around the corner and none of it will matter? – Michael Lai Mar 17 at 22:03
up vote 38 down vote accepted

In short, NO, they do not have enough contrast.

According to Web Content Accessibility Guidelines (WCAG) they mostly do not have enough contrast. Only 1 out of 8 tests gets a pass.

enter image description here

But the dark blue text on light gray background mostly passes.

enter image description here


But there are other factors

In essence, we should be comparing icons to whole words, not individual letters. So using text-contrast tools might not give the right answer.

Spacing, amount and complexity These icons have ample whitespace. Not only inside the button itself, but also between the buttons. Paragraph text consists of many more symbols, densely packed. Even a title is usually a dozen or so characters versus just five icons By that metric, these icons are very large 'words', so they fall outside of the "Normal Text" and "Large Text" categories.

(fun sidenote, even the red text of that color contrast checker is bigger than the listed categories)

Forms and distribution Icons also tend to have different kinds of shapes. Letters/fonts tend to be line-based, single-object, and have a more consistent distribution. Whereas icons are more often multiple shapes (all except GPS in this case), and they have larger, more distinct shapes (triangle of the speaker, triangle of the arrow), and can ave very different weight distribution (compact speaker icon, hollow screen-rotation icon).

Size matters Based on what I said earlier (look at words, not letters) that difference is even stronger. If a line in a letter is thinner than one in a letter-sized icon, the difference is even larger with a word-sized icon. It's like comparing Chinese and English:

不 not, 年 year

While the symbols are more complex and need to be printed larger, you also need less.

Resolution matters Even in comparison to the text in your screenshot, and ignoring the difference in pixelsize between my PC and your phone. So what I currently see, what's big enough for me, might not be good enough for a phone.


My opinion?

While not unusable, it looks slightly too low contrast to be nice.

It's both too complex and not enough contrast. I don't as much mean the complexity of the icons, those are fine. Except perhaps the lock symbol on the screen rotation icon. Anyway - the complexity is in the color palette:

enter image description here

There are (at least) 8 main colors in that screenshot, some nearly indiscernible. Why are the bottom background, right half of the brightness slider, and the faded color of the GPS icon not the same? They should be and at a glance they seem to be, but as my palette shows, they're not.


A possible solution

enter image description here Here's a quick edit that both adresses contrast/legibility, and the unnecessarily large palette. It's also arguably easier to process and easier on the eyes because I unified each buttons' colors. And I believe it's more balanced due to not having the big void caused by much whitespace.

By increasing the amount of colored pixels, you increase the contrast of that object versus the background. This makes it much easier to discern the type of blue.

It also removes two colors; white, and light-ish gray. So now you've only got 3 colors for the background and buttons instead of 5. Furthermore it creates a slightly stronger link between used/unused options. The ⛭ and V menus are dark blue, and they're possibilities you currently don't use. So I've made that the inactive button color, whereas active settings are bright blue. (I just notice that the tickbox for auto-brightness could also be bright blue.)


Edit: Even simpler palette

![enter image description here Another tweak, replacing the bright blue with the dark blue, and using medium for the inactive buttons. Yet more simple, only 4 colors, but I feel it's a bit flat and faded overall - even after making the dark blue a bit more saturated. The difference between active and inactive toggles is easier to see now, but the link of 'unused' between inactive toggles and the ⛭ V menu options is lost.

share|improve this answer
18  
Option A falls into the classic dilemma (for users at least)... which is On and which is Off? When you have two, equally eye-grabbing color schemes, one to represent On and one to represent Off, it becomes confusing. Your alternative "simpler" scheme is very easy to glance at and recognize Location is turned off, because it's not prominent. – SnakeDoc Mar 14 at 15:25
1  
@SnakeDoc I agree, which is why I added that simpler version. Neither option is perfect, but they were just to show possible solutions for the problem at hand, not all problems. I don't have the time (in an unpaid critique), nor the information (this is just 1 screenshot) to redesign the whole phone UI in a consistent and holistic way. – PixelSnader Mar 15 at 6:36
    
Oh I wasn't taking a dig at you, I hope I didn't come across that way. Your "simpler" scheme is just about spot on from my (user) perspective. Colors are visually pleasing, the scheme makes it intuitive which colors mean what, and in general I'd use it on my phone. :) – SnakeDoc Mar 15 at 14:49
    
@PixelSnader - do you have a link to the Web Content Accessibility Guidelines (WCAG) contrast tool you used in the example above? Could not find it on their site. Thanks – stradled Apr 9 at 9:30
1  
@stradled I just googled 'color contrast checker' and picked the first one. There's a bunch around: webaim.org/resources/contrastchecker contrastchecker.com snook.ca/technical/colour_contrast/… – PixelSnader Apr 9 at 9:53

Your device is not stock Android.

That theme will be something that is set by your device manufacturer and not by Marshmallow/Google.

I agree that the colours are very pale and would be difficult so see in daylight. I am sure there is going to be a way to update/install a different, darker theme.

This is why people like the idea of going with Google devices few benefits are :

  • Updates are delivered to Google Products first (Nexus/Pixel etc)
  • No manufacturer gets to plaster their own branding or colours or themes etc on the operating system.
  • Google build the Android OS with their devices in mind, so the hardware often performs very well on their operating system, considering it might be a lower specification device.

I have a Nexus which runs Marshmallow and Stock Android which looks like this...

Google Nexus - Marshmallow Screenshot

A quick Google around, I found a theme called "Material Dark Theme" which works on Samsung Galaxy S6

http://forum.xda-developers.com/galaxy-s6/themes-apps/wip-material-design-theme-s6e-t3108155

enter image description here

share|improve this answer
2  
How is your answer adressing the problem? It looks like an ad for Google Nexus devices. – A.L Mar 14 at 14:45
2  
@a.l The question has changed A LOT since I answered, so now my answer just looks stupid... not too sure I like when that happens on this site. It makes much more sense as a general question now after all its edits, but certainly was not the question I answered – stradled Mar 14 at 15:44
1  
I think that the question If so, how can this be solved? has to been viewed from an UX perspective, not an Android perspective. – A.L Mar 14 at 15:46
3  
@stradled When a question is changed in a way that invalidates an answer, you should rollback that edit to the question. The asker can repost the edited version as a new question, since that's what it is. – David Richerby Mar 14 at 22:25
2  
@stradled I don't think the question changed much? All they did was clarify the phone brand a bit? At any rate, your answer is useful and I'd leave it up as is. You answered the specific question of "how can I fix this phone" while I went for a more general "how could the phone devs fix their interface". – PixelSnader Mar 15 at 8:38

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.