This is maybe the strangest title I’ve ever wrote for an article. Because, in fact, I’m not used to write stuff about silhouettes… except may be talking about my tender wife… But actually, I would like to bring some light over a specific subject related to the Windows 8 Style. You must know, if you’re here, browsing the MSDN blogs, that Windows 8 will soon be released and will soon land on the shelves of our favorite retailers. Fine. And you are probably aware that Windows 8 comes with a brand new interface model, with stunning new design guidelines. That guideline specifies a lot of details about how to design elements, controls, spaces, and how to organize a clean layout, how to use hierarchical fonts, how to dispatch things in a full screen app, how to remove all those crap things that they call a button, and so on. These guidelines, advices and sometimes rules are just fine because they help us to understand what the main goal of Microsoft is, and what Windows 8 is aiming at: Create a user experience which will shorten the time required to “learn” how the apps work. Share among the apps a common experience that enforced the user’s confidence in the ergonomics and in the principles of all the apps that share the same profile. Let’s say the word now, the same silhouette.
The C shape.
So, you have downloaded the Developer preview, or the Consumer preview, or the RTM version of Windows 8, and may be all of those versions. You have been sneaking around, been haunting the Windows Store and you have downloaded a lot of Windows Store Applications. Yourself, you had played with the tools available to create all those terrific contents. Great! So, for sure, even if you’re short-sighted, you must have seen that a lot of apps share the same base layout that we call a C-shape model. That shape is designed to leverage the Windows 8 devices and to bring confidence to the user who will immediately recognize that shape through all the apps. The tools used to create those apps, Visual Studio and Blend, take benefits of that layout and propose templates based upon that C-shape. Let’s have a look to that shape.
See how that shape (in red in the images, obviously) comes over and over? Let’s try to analyze the statement of the C-Shape. First of all, Windows 8 is designed for touch first. That means that the main commercial target of Window 8, clearly identified, is to land in the tablet-like devices field (but without compromise the native PC/keyboard and mouse stuff experience), and proudly face the competitors. For that new experience, Microsoft chose to embrace new paradigms and to leverage the experience of the users. For instance, the guidelines say that an app should pan on only one axe, to avoid confusion, to provide a consistent rail to the content and to focus the user on the continuity of the subject he is looking at.
On the other hand, Windows 8 greatly depends on the edges of the display to provide information, interaction and navigation. To interact, the user will use the Application Bar, on the bottom of the screen, and to navigate, he will pull down the Navigation Bar from the top of the screen. Same thing for the left side of the screen, used to bring up the app switching function.
All those restricted areas are very useful and must be very persistent through the user experience. But another rules also says that the content is the most important thing in a Windows Store application. Everyone can feel there that all those bars should not overlay above the content, eventually preventing the user to access to the content he is looking for. That is why Microsoft recommends to use that C-Shape. Its main advantage is to manage enough room to the content, centered in the big available space in the middle of the display, without compromising the user experience, nor the interaction or the navigation.
In the above picture, you can see that the content is not hidden behind the Navigation Bar. And the clean empty space on the left is available for the App-switching bar. Even if it conveys another information: If you can see that empty space, you are at the beginning of the page.
The C-shape has been designed to help the designers to explicit the content of the applications without compromise, and to leverage the interface within the applications in the same way. Isn’t that cool?
Yes indeed, but every medal has two faces, and the bad news is that we deliver our brand new OS with tools. And, people do like tools. They like tools so much, that they often use them too literally. For instance, the samples delivered with Blend for Visual Studio 2012 are very useful to get the general idea and to find out how the stuff works. But too often, the designers and the developers working with that great tool take the samples for a “near-to-ship statement”, without taking the necessary time to try to create the real coffin for their great content.
But C-shape is great! So what, now?
Yes, as we’ve seen above, the C-shape is very explicit and cool. But the fact is that we can find a huge bunch of apps using that same pattern again and again, without too much of creativity inside. So what?
In fact, the C-shape is a guideline that fits quite well the device it has been designed to run onto, let’s say a Surface Tablet. But you can easily find with a bit of poetry your own use of the device, create your own paradigm, and get your own user experience inside. The goal of the Modern UI design is too bring the content to a ‘state-of –the-Art”, no matter how you do that, as long as it remains cool, clean, content-oriented, and sexy. That must be your goal, whatever you have read upon Modern UI design, C-shape, etc.
And if your design, the user experience you want to build, the story you want to tell does not fit into the C-shape, well, break that rule! Moreover, do it twice! The only thing you have to remind is to keep your interface persistent throughout the different screens. For example, if you want to have a nice empty space in the bottom of your layout, try to maintain that space in all your screens.
In fact, the real point here is not to follow the rules too blindly. For example, the Modern UI design guidelines are saying that you must avoid real-world metaphor, in order to leverage the authentically digital experience. Fine! But have a look to the app named Cocktail flow, in the Windows Store. Do you see those reflections, under the glasses and bottles? That is a real-world metaphor! See how the animations are just there for adornment? Is that Modern UI design? Certainly not! Is that cool? Damn yyyyeeeeesssss! You know what? Break the rules!
Another example: Download “My History Digest” and open it. You will soon see that you can scroll from the left to the right, as in all the other apps. You will also soon find out that in specific controls, you can scroll up and down, too. For sure, it’s a huge violation of the Modern UI guidelines. Yes. Can’t deny it. But you see how terrific is the application, how dynamic and fluid is the layout, how beautiful is the design. And guess what? It is in the store! That criminal app has made its way through all the validation process and finally made it because it is just amazing. You know what? Break the rules!
The great lesson here, and I think you already got it, is too be aware of the guidelines that rule the Modern UI experience, but also to be confident in your own skills and in your own vision. You know your job, you know your customer, and you’re able to define what is good for your app. You also know how to tell your own story. You’re in charge! But you must, in the same time, be relevant and adapt your layout to the user you’re aiming at, as long as the experience throughout the entire navigation remains consistent, clean and robust. In a very short time, there will be a huge amount of apps in the store and one of the main evaluation topic is the design/ look and feel. Be creative. It should be relevant on a large scale.