Had someone ask me about Metro Interfaces for the web. (Eyes dart about room in scurrilous paranoid motion…) I’m going to say, that unless you’re ready to shift some thoughts just slapping a few tiles up for people to click … isn’t going to get you a Metro Interface for the web, and… (ducks for cover) you may not want to.
If you don’t know what a Metro Interface is, then you’re probably living under a rock or your not familiar with what everyone else keeps calling them “Windows 8” Interfaces, which, is kind of right – but not. Metro applies to a number of interfaces, like Zunes and Windows Phone 7, and yes… Windows 8.
But you really shouldn’t fall into the mind trap of thinking that because there are similarities it’s the same thing. Especially if you’re designing an app. Metro is more a set of guidelines to apply, to allow your app to work on several platforms better.
It’s also a bit of a way to design your app better regardless of the platform because at it’s core Metro has one design philosophy… make it easier for the user. Along with the philosophy comes the accepted paradigm that less is more, and don’t put things in there you don’t need.
So if you’re designing a web site, you need to start not with graphics or content… but an understanding of “What is it that my user wants to do?” – and just as importantly “What does my app do?”.
Most apps – be they web pages or desktop tools or whatever… have basically one central purpose or theme. One thing they need to do more than anything else to be useful to someone. If it’s a web page – there’s a specific message or purpose to it, like “I want to show off my…” [business] [self] [cookies]… whatever that is… that’s the purpose of the web page. That’s what people are going to come there for, and that’s all they really want to know about.
You can have sub-sections, but those sub-sections should have to do with the main topic. Because once again, that’s all they really want to know about.
A lot of web sites, even for businesses – are these very cluttered content messages. “We’re a [law firm] [bakery] [comic shop] [car dealer] [pump manufacturer] …’ and then there’s the stuff that differentiates them from everyone else… “with a [heart] [location] [experience] [drive] [cat] that makes us different.” because that’s what all good marketing tells you you need to do… be different.
And you can… you just… can’t be wordy. You need to really refine your differences, condense what your business means to people. And understand what that means. Most businesses, small businesses never really have to do this because it’s pretty organic for them. They’re small and they know their customers well and what a customer wants.
What they don’t often know – is what their customer wants when they get to their web page. So for that… they need to understand that what a customer wants, and what a customer wants when they ‘walk through the web door’ may be completely different understandings.
Web sites were traditionally a cross between a brochure and a store front in the early days of the web. As people became more web savvy they became more like a searchable index of goods and services. Some are very good at this (Amazon), some are not… (think any website you cursed because you couldn’t find what you were looking for…).
So for most people – they’re used to one experience on the web, or the other, or a combination of those two. That’s not a metro interface. You can make a metro interface that does that… but it’s not going to end well because it won’t do what a metro interface is really good at which is allowing the user to do what they expect to do – and do it quickly.
All the flickable, clickable screens in the world that slide, glide, tile and shift… will not change the fact that the user had to flick 6 times, click twice and then flick back 4 times to get where they were… to make a purchase. If the user’s fingers are tired and they get lost in the shuffling screens you will not be accomplishing your goal.
So know your goal. Know what it is your user wants to do – and what it is you want them to do. Then, and only then, can you really build a metro interface. This is because to really be effective you need something that a user can see – and go “Hey! that’s what I was looking for!” and go “Click”, or as close to that experience as you can make as possible.
If you look at most web sites – print the page out, and then with a red marker click all the links on it. You’ll be amazed at how many there are. How many of those are there so users can find other things? How many are there because users “might want to find…” or “we have some users who…” type links? I call these ‘fractional links” because they serve to fracture the users by intention and send them to specific sections. This isn’t a bad thing, it serves to categorize them and make it easier.
But… a more skillful approach would be to consider each of your primary “fractions” as needing a site specific to that need. So – a master Metro Interface, which serves to send the user to specific Metro sub-sites based on that need, as sub site which can be linked by the user directly, and allows them efficient access to their specific need. You really aren’t changing things much from a work flow perspective – just from the user perspective.
In some cases, a web site may have links which… frankly aren’t used, or are only used by a small sub set of users. Look at your web traffic. Look to where your customers go to, what’s the ‘final destinations’ for them? Your top 3 or top 6 should be on the page.
Everything else should be clean, clear and understood. No big “NEW” or “SALE!” blinkies (yess those still exist)… no funky scrollers that appear like a Times Square billboard that say “…ast day of sale! Hurry or you’ll miss this once and a l…”. No menu bars which have drop downs on drop downs. No “Search” box.
What??? No Search? No Ads? But… But… But…
Search you can probably get away with, by having a tile for that… because it’s a high traffic need item, and then use the other tiles or click/flick items as primaries that only have as much information as is needed for the customer to find what they need to do.
Don’t explain – don’t get contentish, that’s for the part of the site the user is going to. If you have to explain to a user what it is they’re about to click on… you probably failed in the Metro Interface. Updates to the tiles should be handled with very minimal content types. A “+1” or something akin to that to show there’s new items for them in this area.
So… why if the Metro Interface is so basic is it the rage? Because it works.
It’s very simple. People like simple. But to make something simple, it often needs to be very complicated to allow that. The complication comes in understanding the needs of the user. What are they looking for? How quick can I get it to them?
That…is the beauty of the metro interface for the web. If you can do it – do it. But first know your customer, or your efforts to make it simple will make users go “huh?” and that’s what you want to avoid.
