Content Over Chrome

(The views expressed are by someone who once fainted at the sight of CSS and has tapped out numerous times when looking at Visual Studio; viewer discretion advised. )

Content over chrome

<p><a href=”http://vimeo.com/39659547″>The Longest Street in the World</a> from <a href=”http://vimeo.com/secondstory”>Second Story</a> on <a href=”http://vimeo.com”>Vimeo</a&gt;.</p>

The first thing one should think about when creating touch applications on Windows 8. At one of the Developer sessions one of the Windows team members say that before you begin your app you should write what your App is best at. I’m not going to tell you that (because it’s kind of silly).

So what does this phrase mean? What is its essence (please read this in your worst French accent)?

<p><a href=”http://vimeo.com/43428799″>Bing for Surface v2</a> from <a href=”http://vimeo.com/stimulant”>Stimulant</a&gt; on <a href=”http://vimeo.com”>Vimeo</a&gt;.</p>

Well basically it means that most of the interaction will take place on the screen from within the app. Windows Phone does this to a point but they have the App bar on screen; in Windows 8 the App bar is hidden. What this means for a designer or a developer is that the second question they must ask themselves is what controls and navigation elements need to be in the app and what should be delegated to the app bar.

Another aspect about Content over Chrome is the lack of “Chrome” in the program itself. You could think of chrome consisting of things like borders where controls are put and design flourishes; things added to enhance the look but not the function. Its why when a developer creates an app for Windows or Windows Phone it looks naked and why people complain about white space and lack of information density.

Part of the issue for anyone creating a Metro Modern application is that you really have to think about both what the app does and how it does more than if you were making a desktop app or a program for iOS and Android. Windows touch apps will be on more than just a tablet and users will not just be using touch for interaction. Developers should avoid trying to dump every control into the App bar; Metro means for you to meld controls into the content, the idea is direct manipulation and not using the bar to navigate.

For me the best example on how to understand how this type of program could work is to look at applications that have put the controls and content together. Also look at some of the applications built for the Microsoft Surface 2 aka PixelSense. There are two reasons I say this; one, because the touch gestures used are the same as Windows 8 and RT. Two, because PixelSense is a great example of an Immersive experience and the idea of not having chrome. So to that end the videos here are to show off examples.

2 comments
  1. The whole Content over Chrome is really just a marketing pot hole of b.s. I’ll explain why in a few parts.

    Firstly – The genesis of Microsoft’s approach to the Modern Swiss / Style of design actually comes more from Magazine / Desktop publishing in that a lot of the early prototypes of the design fixated on how one could take desktop publishing principles and apply it to interactive digital mediums such as touch or desktop software whilst at the same time propping up the web CSS grid styled layout(s) (circa 2007). That’s fine for solutions where content does take on more of a dominance in the way information is grouped. It doesn’t however translate as easily as people assume towards digital software for a number of reasons the first and most important of all is that it comes back to usability & accessibility.

    The assumption today with UI design is we are designing software for “normal” but when you look at a lot of the data round cognitive development in all ages from children to adult alongside how conditions like ADHD, Dyslexia etc are either diagnosed or undiagnosed then well the whole reliance on typography starts to become questionable – intrinsic cognitive load vs extraneous cognitive load.

    Secondly, Chrome at times helps guide the experience in a lot of different ways in that it helps shaping principles around proximity, affordance, cognitive dissonance, constraints and whole bunch more (space also becomes defensible in that through containment can lead to clear indication of ownership etc). It’s not a case of “chrome is bad” its often a case of repetition of similar designs of chrome in turn create a sense of fashion overload, meaning “oh i’ve seen this chrome a thousand times, boring.. – attractive bias or perception of new in turn wins out resulting in existing chrome UI becoming less appealing.

    Metro as a style has positives when it comes to dept of processing but I think with the abundance of colors and depth surrounding symbology it can get lost when it comes to recognition over recall in that our ability to scan, identify and process is kind of weak at best right now with the current style.

    There are positives and negatives to this topic overall though it comes down to density and user base you’re targeting and whilst scaling back on features or depth around the UI fits in with a sense of assumed Aesthetic usability they in turn can be off putting and frustrating for users – especially with 17years of habitual usage in place ( old vs new users meets change management 101).

    I just worry that people assume Microsoft marketing around Metro principles = well researched and thought out science. It’s far from that as they are really still in experimental stage(s) of these ideas and methods of approach (but always keep in min Metro = Desktop Publishing and basic Web Reading experiences).

    My other worry is that developers assume they dont need a UX Practitioner in their design team, as if to say “well i read UX on MSDN, boom we gotz UX baby” as no.. all you got was a theme not UX.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: