This is the result of a 24h experiment I tried, to see the web in a different perspective. In an environment prone to distractions, finding applications that allow me to focus are a breath of fresh air.
So I’ve set my Mac OS to render everything in grayscale and continued my daily tasks as normal. Most of the apps I use daily are fairly simple, w/o many flashy buttons and call to actions. Mainly because most Mac OS apps follow simplicity patterns. Then I opened my browser…
The solid shaped interface elements on Facebook and vast areas of white space are a good solution against clutter. I see more and more big websites solving the problem of clutter. Then my eyes fell upon the boxes inside the columns. It’s a friend’s birthday? I must say “Happy Birthday”. A new friend request? A new like? That’s it, I was lost for 10-15 minutes. Extremely distracting, but I guess that’s the whole point of Facebook and why it became so successful, aside from other controversial stories.
Back to interfaces
The solid colors and well-defined interfaces elements on Facebook are fantastic for usability.
Let’s see Apple.com. Not surprising, a few similar patterns. Well-defined navigation elements, a lot of white space and clear calls to action. A really big part of screen estate are pictures of Apple products. The main focus is impossible to miss and a choice of pictures to which people can relate are a pièce de résistance. Apple.com looks just as good in grayscale as it does in colors.
Gmail (especially with Priority Inbox enabled), StackOverflow, Twitter, Google Reader and many other mainstream web applications seem to get it. I’m happy to say that people who advocate for clean design seem to have an impact on the major trends.
Designer websites
A place where I (used to) get my inspiration for interfaces is CSSRemix.com (now dribbble.com is numero uno), which is a showcase of creative websites. I must say that most of these websites lose their souls in grayscale. Even if most of the headers are huge, their impressiveness surely seems to die when viewed without colors. The message sent across to the reader loses its appeal.
There are a few exceptions like http://vladgeorgescu.com, but that’s mainly because the designer’s focus is on interfaces. When usability is at stake, art gets a second role. Gradients appears less and less, solid shapes rarely overlap and the user’s eyes are have a predefined path. That’s is one of the skills of good interface designers: they control the user’s behavior.
My current favorite topic. Mobile Interfaces
The principles noted above should be the guiding rules of ALL mobile applications. There is no place for mistakes on a screen that is the size of half my palm. No fancy gradients, no layer and layers of information, no noisy shadows. The mobile interface should look good in grayscale too, w/o arising frustrations.
Disclaimer
This short analysis is strictly about aesthetics. Usability is much more than just visuals, but because as human beings a big part of the information is received trough our eyes, visuals are an important factor. Usability also implies good composition. i.e. content. What to show? When to show? What NOT to show? What can I interact with?
If somebody tries this experiment and notices points, please share. I’m more than happy to listen.
