image.png

Decoding the use of grey in Visual Studio vNext

Visual Studio team have put out some UI updates to the vNext release. The thing that struck a chord with this update is how flat and grey it’s become, that is they’ve taken pretty much all colors out of the tool and pushed it back to a grey based palette.

Here are my thoughts:

On the choice of grey.

Grey is a color that I have used often in my UI’s and I have no issue with going 100% monochrome grey provided you could layer in depth. The thing about grey is that if it has to flat and left in a minimalist state it often will not work for situations where there is what I call “feature density.”

If you approach it from a pure Metro minimalist approach, then it can still work but you need to calibrate your contrast(s) to accommodate the end users ability to hunt and gather for tasks. That is to say this is where Gestalt Laws of Perceptual Organization comes into play.

The main “law” that one would pay attention to the most is the “Law of Continuity” – The mind continues visual, auditory, and kinetic pattern.

This law in its basic form is the process in which the brain decodes a bunch of patterns in full view and begins to assign inference to what it perceives as being the flow of design. That is to say, if you designed a data grid of numeric values that are right aligned, no borders then the fact the text becomes right aligned is what the brain perceives as being a column.

That law itself hints that at face value we as humans rely quite heavily on pattern recognition, we are constantly streaming in data on what we see; making snap judgment calls on where the similarities occur and more importantly how information is grouped or placed.

When you go limited shades of grey and you remove the sense of depth, you’re basically sending a scrambled message to the brain around where the grouping stops and starts, what form of continuity is still in place (is the UI composition unbroken and has a consistent experience in the way it tracks for information?)

It’s not that grey is bad, but one thing I have learnt when dealing with shallow color palettes is that when you do go down the path of flat minimalist design you need to rely quite heavily on at times with a secondary offsetting or complimentary color. If you don’t then its effectively taking your UI, changing it to greyscale and declaring done.

It is not that simple, color can often feed into the other law with Gestalts bag of psychology 101, that is to say law of similarity can often be your ally when it comes to color selection. The involvement of color can often leading the user into being tricked into how data despite its density can be easily grouped based on the context that a pattern of similarity immediately sticks out. Subtle things like vertical borders separating menus would indicate that the grouping both left and right of this border are what indicates, “These things are similar.”

Using the color red in a financial tabular summary also indicates this case as they are immediately stand out elements that dictate “these things are similar” given red indicates a negative value – arguably this is a bit of digital skeuomorphs at work (given red pens were used pre-digital world by account ledgers to indicate bad).

Ok I will never use flat grey again.

No, I’m not saying that flat grey shades are bad, what I am saying is that the way in which the Visual Studio team have executed this design is to be openly honest, lazy. It’s pretty much a case of taking the existing UI, cherry picking the parts they liked about the Metro design principles and then declaring done.

Sure they took a survey and found responded were not affected by the choice of grey, but anyone who’s been in the UX business for more than 5mins will tell you that initial reactions are false positives.

I call this the 10-second wow effect, in that if you get a respondent to rate a UI within the first 10seconds of seeing it, they will majority of the time score quite high. If you then ask the same respondents 10days, 10months, or a year from the initial question, the scores would most likely decline dramatically from the initial scoring – habitual usage and prolonged use will determine success.

We do judge a book by its cover and we do have an attractive bias.

Using flat grey in this case simply is not executed as well as it could be, simply because they have not added depth to the composition.

I know, gradients equal non-metro right. Wrong, metro design principles call for a minimalist approach now while Microsoft has executed on those principles with a consistent flat experience (content first marketing) they however are not correct in saying that gradients are not authentically digital.

Gradients are in place because they help us determine depth and color saturation levels within a digital composition that is to say they trick you into a digital skeumorphism, which is a good thing. Even though the UI is technically 2D they do give off a false signal that things are in fact 3D? which if you’ve spent enough time using GPS UI’s you’ll soon realize that we adore our given inbuilt depth perception engine.

Flattening out the UI in the typical metro-style UI’s work because they are dealing with the reality that data’s density has been removed that is to say they take on more of a minimalist design that has a high amount of energy and focus on breaking data down into quite a large code diet.

Microsoft has yet to come out with UI that handles large amounts of data and there is a reason they are not forthcoming with this as they themselves are still working through that problem. They have probably broken the first rule of digital design – they are bending their design visions to the principles and less on the principles evolving and guiding the design.

Examples of Grey working.

Here are some examples of a predominately grey palette being effective, that is to say Adobe have done quite well in their latest round of product design especially in the way they have balanced a minimalist design whilst still adhering to visual depth perception based needs (gradients).

image

image

Everything inside this UI is grouped as you would arguably expect it to be, the spacing is in place, and there is not a sense of crowding or abuse of colors. Gradients are not hard, they are very subtle in their use of light, or dark even though they appear to have different shades of grey, they are in fact the same color throughout.

Grey can be a deceiving color given I think it has to do with its natural state, but looking at this brain game from National Geographic, ask yourself the question “Is there two shades of grey here?”

image

The answer is no, the dark & light tips give you the illusion of difference in grey but what actually is also tricking the eye is the use of colors and a consistent horizon line.

Summary.

I disagree with the execution of this new look, I think they’ve taken a lazy approach to the design and to be fair, they aren’t really investing in improving the tool this release as they are highly most likely moving all investments into keeping up with Windows 8 release schedules. The design given to us is a quick cheap tactic to provoke the illusion of change given I am guessing the next release of Visual Studio will not have much of an exciting set of feature(s). The next release is likely to either be a massive service pack with a price tag (same tactic used with Windows7 vs. Windows Vista – under the hood things got tidied up, but really you were paying for a service pack + better UI) or a radical overhaul (I highly doubt).

Grey is a fine color to go full retard on (Tropic Thunder Quote) but only if you can balance the composition to adhere to a whole bunch of laws out there that aren’t just isolated to Gestalt psychology 101 but there is hours of reading in HCI circles around how humans unpick patterns.

Flattening out Icons to be a solid color isn’t also a great idea either, as we tend to rely on shape outlines to give us visual cues as to how what the meaning of objects are and by at times. Redesigning the shape or flattening out the shape if done poorly can only add friction or enforce a new round of learning / comprehension and some of the choices being made is probably unnecessary? (Icons are always this thing of guess-to-mation so I can’t fault this choice to harshly given in my years of doing this it’s very hit/miss – i.e. 3.5” inch disk represents save in UI, yet my kids today wouldn’t even have a clue what a floppy disk is? …it’s still there though!).

I’m not keen to just sit on my ivory throne and kick the crap out of the Visual Studio team for trying something new, I like this team and it actually pains me to decode their work. I instead am keen to see this conversation continue with them, I want them to keep experimenting and putting UI like this out there, as to me this tool can do a lot more than it does today. Discouraging them from trying and failing is in my view suffocating our potential but they also have to be open to new ideas and energy around this space as well (so I’d urge them to broker a better relationship with the community around design).

Going forward, I have started to type quite a long essay on how I would re-imagine Visual Studio 2011 (I am ignoring DevDev’s efforts to rebrand it VS11, you started the 20XX you are now going to finish it – marketing fail) and have sketched out some ideas.

I’ll post more on this later this week as I really want to craft this post more carefully than this one.