Why Windows UI Matters: Part 2

This post comes into 2 parts:

1. Typography
2. Colors and Tiles (this one)

Following my first post about Typography in Windows 8, I would like in this post to talk more about colors and the tile concept in Windows Phone and Windows 8.x.

If you create a new account on your Windows 8.x, you will get the following start screen (on a 27")

First remark, it looks empty. We know the problem for a long time: this was designed for smaller form factors - Windows Phone but unfortunately we got it as-is on desktop.

Second remark, we also start to get a glimpse of the color problem with the Metro/Tile concept: It looks flashy.

Back in 2012, when Windows 8 UI was revealed, one of the first joke we quickly got on social networks was a comparison with an AOL screenshot from 1996:

And when you see this kind of comparisons immediately popping up all around, It should ring the bell...

But let's just zoom in the Windows 8 tiles area:

If you are a developer, designer or working on colorization, you will immediately see that some colors have been pushed close to the range #FF0000 or #00FF00 or #0000FF. Visually, colors on this screen are attacking us. 

Colors

I have put this image into the "Image Color Summarizer" by Martin Krzywinski:

RGB (Win8)

Value (Win8)

Saturation (Win8)

Hue (Win8)

If we pay more attention to the hue and saturation:

• For the hue: We are getting several spikes over the whole range. Red, Green, Blue, Pink are popping up.
• For the saturation: We are getting mostly high values, meaning that the image is highly saturated.

This is the immediate feeling we have when looking at this image. This is confirmed by some naive analysis. On Windows 8, dominant colors are coming from the tiles.

If we perform this kind of analysis with the front-page of an iPad, we will get completely different results: most notably, we won't get these spikes because it depends on the wallpaper image, so usually, we don't put a #FF0000 image on the background:

iPad "Start" Screen

On the iPad screenshot, we can see that icons are colorful, but they are not attacking us, because on the iPad the dominant color is coming from the background. The image is more desaturated than saturated, and we can effectively confirm that spikes don't spawn everywhere in the hue range:

Saturation (iPad)

Hue (iPad)

Again, I'm not an expert in design and UI interface, but I don't feel that vibrant hue/saturation fits well for a welcome/main desktop screen. I don't believe also that this is the only way to provide a flat design interface. Or is it because of its flatness that they need to over-exaggerate colors to make it less "emotionally flat"?

The use of different hues in the same image with lots of saturated colors could work for a one-time-visit website/logo... but for our welcome OS screen that we are visiting several times a day...it is nothing less than highly repulsive (hence one reason I have setup to boot directly on desktop and have never been using a single Metro app for 2 years). Checking a bit more about saturated color in design guidelines, I found one article "When to Use Saturated Colors?" by Curtis Newbold, and he recommends using saturated colors when:

• You need to attract attention: We don't need our start/welcome screem to attract our attention. No, thanks. We are using it mainly for working.
• You want to create an exciting atmosphere: don't think this is good either...
• You want to simplify emotional response: I believe that the emotional response so far for the start screen has not been good

But

Too many saturated colors next to each other can cause eye fatigue [...]

Probably we should insist more that we don't want our welcome/start screen to look like a shiny-marketing-website?

Tiles

But, this is not all about colors... Tiles are actually accentuating the problem. Instead of having colorful small icons, we get monochromatic big rectangles that are covering several hundred of pixels on our screen. We can't escape from the space they cover!

The background is completely hidden. We can't customize this. On our good old desktop (or hey, an iPad "Start" screen looks like our good old Windows Desktop with organized icons no?), we can put a wallpaper, and can have icons on top of it, but icons will not hide the wallpaper. On Windows 8 Start Screen, you really don't have the choice.

In Windows Phone 8.1, they are trying to get around this problem by allowing to put a background image in the tiles...not sure it is working better. Here, a screen shot of a Windows Phone 8.1, WP8 with a background Android, and finally, a screen shot from an Android device:

Windows Phone 8.1

Windows Phone 8.1 + Android bg

Android

Maybe for a phone, the Metro UI concept could make sense for some people. While, at the beginning, I found it  attractive and "distinctive", I felt quickly bored by the overall theming. Lots of tiles are using the main background color, so we have lots of applications that are a bit more difficult to distinct with others (only by the monochromatic white icon). We could choose to place icons based on their colors, but I'm usually placing icons based on their placement relative to my fingers. I'm also not particularly convinced by the horizontal/vertical black lines as it looks like less smoother than a clean continuous background.

I was not supposed to talk about next Windows UI, but let's be clear, when I saw some screenshots at Microsoft Build last year about making the tiles integrated on a new Franksteinesk Start Menu, I was frankly not really happy about the idea :

Windows 9 Tech Preview Leak (Source: WinFuture.de)

I don't know if you are like me about this, but I would really love our main Windows OS playground going back to some fundamentals:

• Just get rid of the Metro UI, tiles, colors... as they don't match with the overall UI of all other parts of the OS and applications we are using
• Better leverage on the desktop area. May be with virtual desktops, it could make more sense (at some point, it will look like an iPad!... oh boy, who could believe this?)
• Add more power to the Taskbar. Just one example: sub-folders/apps group (this is not new, I know!)

There are also a bunch of old Windows UI discrepancies floating all around that would deserve a separate post. Hope I will have enough motivation to write it, but I need to go back coding, enough blabla about UI design!