In the recent days an epocal change is becoming evident. If you tried to download the new Windows 8 Consumer Preview, available for free on Microsoft website, you know what I mean. The change, that is greatly focused on a new user experience, is driven by the growing power of portable devices that are becoming prevalent on common desktop and laptops. Up to the day before today, tablet PCs, smartphones, and generically speaking touch-enabled devices was expensive and not effective, but they are now something that common people start to take in serious consideration from the effectiveness perspective and also from the economical point of view.
As said, this change is mostly focused on a new user experience due to the fact that there is a shift of the attention from the business software to the consumer market. Never like today the wide availability of consumer application have been important and this, joined with the new touch paradigm requires a completely new set of rules to design the experience and the interaction of the user with your software.
Starting with this article, I aim to begin a new series based on my evolving experience with the new Windows 8 Metro Applications. As few people knows I have a graphical background that lives side by side with my programmer soul. During this series I would like to discover most of the wonderful tools behind Metro applications but in this article I would like to briefly switch off my programmer side to take in serious consideration the design aspects behind Metro.
The art of remove instead of add
Antoine de Saint-Exupéry, a french writer and aviator lived in early 1900, one day pronounced a famous sentence: "Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.". There is a deep truth behind these words and I know very few people that is able to embrace this concept when he is working on a project, no matter if he is drawing a furniture item or designing the user interface of the latest application.
Focusing on the software industry, what commonly happens is that a series of features are put togheter, they becomes a software with a complex user interface and most of the times the end-user is unable to use all these powerful features because they are hidden by the complexity or in the worst case they are simply unuseful. Have you ever asked yourself if all the features of your software are fully understand and used by your customers? I did this exercise and the result is mostly disappointing.
So, probably the "art of remove instead of add" is something you have to carefully evaluate. Generally speaking this does not apply only to the user interface of your next application, but it has to deeply permeate it with a careful evaluation on each single feature to understand if it is really useful and if it can be part of the whole. The question you have to ask yourself is simple: is it really useful? And the hard part is being brave considering unuseful something that people usually think as required.
As an example, think at an advanced search form, with lot of fields each one dedicated to the filtering of a specific property. You can search for the title, the abstract, the creation date and (why not?) for the deletion date, for the author, for the contributors, for the collection to which the item is part, etc... Omitting that a similar form can't be subject of an effective functional test, I guess that probably the end-user, after a moment of confusion, will write a word in the title field and then, pressing "Search", he will be unable to find what is searching for.
Google embraced simplicity and converted this complex form in a single field. Behind this field there is a complex syntax and logic, made of operators and of algorithms to effectively search, but people usually write one or two words in the textbox and it find what they need in the first ten results. Simple but not trivial. Embracing simplicity does not mean being trivial. It only mean to have the ability of hide the complication.
Watching to the consumer market, the simplicity become a must. The reason is that if your customer is a business company he will patiently call your helpline to ask you a question, but if the customer is a consumer he will simply delete your app to select another that does exactly what he need. To me, this is the main reason because, with the proposal of Windows Phone 7 and now with Windows 8, Microsoft worked on a series of guidelines that aim to become the standard of a new user experience language, a language that prefers the simplicity. Behind the "Metro Guidelines" there are a number of"pillars" that easily explain the way to the zen of the usability.
The pillars of Metro Style
Embracing a new style in designing an applications may be very hard, primarily because we are used to write our code leaving the aspect of the user interface to a set of "standard" components that leverage an user experience coming from ages ago. Few years ago Microsoft already tried to introduce a new way to design interfaces without a clear success, with WPF and Silverlight. I still remember the moan from people that just discovered the absence of a datagrid control in the Windows Presentation Foundation.
The proposition in leaving controls like the datagrid out of the games was a clear indication to people to search for a completely new user experience but unfortunately this call falled on a dry ground. The reason is to search in the absence of a proper guideline able to drive people to seamless change the feel about user experience.
With Windows Phone and now with Windows 8, Microsoft changes the strategy, proposing a slim set of rules called "Metro Design Principles". These guidelines are based on five pillars that can easily drive in embracing the change. Here is these pillars in my personal order of priority:
Be authentically digital
The first, and to me most significative pillar of Metro, is to be Authentically Digital. To understand the meaning of this sentence you have to recall the look and feel of applications in Windows, and of a number of websites still existing on the net. The problem is that you have to finally recognize the digital nature of the screen surface and this must only drive to the removal of every type of skeuomorphic design. Under this strange term is hidden a number of tecniques used to render the feel of materials, embossing, light effect and whatever else that imitate the real world. iOS devices like the iPad make a deep use of skeuomorphism and this pose them on the very opposite side of the Metro guidelines. The direction instead it to remove every kind of chrome in favor of content to valorize is together with the empty space between parts. Just remember the sentence from Antoine de Saint-Exupéry an recognize the emptiness as a value that isolate and point out your content.
Do more with less
If being digital is the most important pillar, doing more with less is probably the most difficult to achieve, and nothing more that removing instead of add may be the way to this pillar. I think it is important to stop yourself every time you decide to add something to your application and, instead, brainstorming to understand if the same feature cannot be added slightly changing something that still exists. This is to me the essence of doing more with less, having the ability of regroup your features in a way that remove the need of additional graphic elements. But please avoid to add strange semantic to the gestures of the user, just for the reason of omitting an element in the interface.
Be fast and fluid
Often, the key to make more with less is being fast. Having a number of elements on the screen, can be easily exchanged with having few elements if you can navigate through the application fastly and fluidly. Being fast make your screen larger and Metro offers a number of controls that leverage the use of fingers to improve fluidity without neglect the use of mouse. Thanks to these control it is really easy to create amazing interfaces, expand the size of the screen and adapt your content to the target resolution. Also you can use a set of transitions that helps to join together fluidly the various parts of your application.
Show pride in craftsmanship
I admit it take long to really understand what this means, but finally I've got the point. It simply states that your app must be polished and complete in every single feature. Complete does not only mean "working" but you have to care about details. The right margin, a perfect size for your fonts, a polished palette, a subtle animation to give the right feedback to the user. Every single aspect of the user interface contributes to the overall quality.
Win as one.
And finally, you have to be aware that your app live into an ecosystem. Thanks to a number of interfaces, a Metro application can easily share, search and pick, taking advantage of other applications and providing services to others. It is important you implement these interfaces to give an additional gear to your work.
Don't be afraid of emptiness
I know, lot of people when is about to create a user interface ask himself: what can I do to fill this hole? The problem isn't the hole per se, but probably its positions, the disposition of elements on the screen. Make things bigger, use the right color and positions and the hole easily becomes space. Your eye needs it at a degree you may be surprised.
I hope I've touched you curiosity with this long article and now you can experiment the new Metro principles by yourself. From the next time I will return to my programmer role to explore the beautiful features behind Metro.