The Mobile Spoon - Gil Bouhnick's Mobility Blog
Home Featured Posts Mobile Trends iOS Apps Contact Us About

May 3, 2012

Talking about Metro Style UI – Interviewing Rich Blackwell

Metro-Style-User-Interface

I had the opportunity to talk to Rich Blackwell, an experienced designer at Metia, a company that specializes in Metro style user interface. As a Metro fan, I found myself asking Rich about different topics that interests me about the experience of building Metro style user interface, especially when Windows 8 is just around the corner.

Metia had been developing websites and native apps using Metro style UI for quite a while and has been using different technologies such as HTML, Javascript/ jquery, TSQL, HTML5, Silverlight/XAML, Flash/ActionScript, Linq, C#, Objective C and more.

If you like Metro – I’m sure you will find Rich’s answers very interesting.


1. What is Metro and what special guidelines does it include?

The Metro design principles are based on the Swiss Style, defined by simplicity and the idea of “form follows function.” Metro places an emphasis on beautiful typography, fast and fluid interactions, simple structured grids, bold, vibrant colors and clean content, as opposed to heavy graphics and gradients.

So far, the bulk of our clients want to see the brightly colored tiles and icons. While designs focusing on grids and colored boxes fit squarely within the Metro design principles, there is still plenty of room to explore creative executions. Yes, Metro uses colored blocks, and as a designer, we want to push our clients to do much more.

Metro style design has a set of five guiding principles to help designers make the best choices when designing. Although these principles are the foundation for building Metro style apps, these guiding principles challenge, designers and our clients to take design risks. A few design elements were introduced, including prescribed use of spacing between flat brightly colored squares called tiles; use of icons; use of motion; and conservative use of text. Helping clients to understand how to push the boundaries of those concepts is part of what I love most about my job.

metro-xbox_498x280

2. With the upcoming Windows 8 and the unifications of platforms (PC, Tablets, and smartphones), how do you see Metro UI evolves?

It’s going to get busy. A lot of the businesses within Microsoft are just now starting to implement Metro into their product brands, so they are imagining their brands in new ways at the same time that they are thinking about the role of mobile devices in revolutionary ways. Over the next 18 months, we are going to see a renewed sense of experimentation and playfulness, which is what we love about Metro. I think that the heavy reliance on colored boxes will give way to some interesting plays on the ideas of space and content that are really innovative while still being fundamentally on brand.

3. What are your top 3 recommendations for a new developer seeking to create a Metro style app that will run multi platform? (including Windows 8).

1. Take the tutorials and familiarize yourself with the tools. There are a few changes, and the toolkit contains several helpful controls that will allow you to hit the ground running. I wrote my first custom Windows 8 app using HTML and JavaScript in under an hour after taking a quick tutorial and installing the toolkit.

2. Learn from and contribute to the community. Join an online discussion group. Don’t try to reinvent the wheel when you can use open source code. If you do something really cool, share it.

3. Determine whether you want to have a single set of views for all platforms and form factors or if you want to have a flexible layout that scales to each screen. Deciding this first simplifies the development approach.

facebook_Windows_Phone_7

4. As the metro style design guidelines can be very strict, did you encounter any limitations? (for instance, the need to create richer screens, etc.)
How did you solve them?

Well, there are certain aspects of Metro that are clearly defined, such as the border between the tiles. But there are other aspects that are highly interpretive. Our biggest challenge is in finding ways to differentiate Microsoft’s sub-brands from each other when a client is uncomfortable veering away from colored tiles. In time you will see that Metro is not restrictive at all.

5. From my experience, some people love Metro while some really don't. Do you think it might risk the success of Window 8?
What should Microsoft do to make Metro more popular?

We are getting some anecdotal evidence that women respond particularly well to Metro and Windows Phone. Given the influence that women have on the spending habits in the home, this could be a boon for Microsoft. The Metro interface is great because it’s very user-friendly. It’s difficult to make a mistake with Metro navigation, and it can be extremely flexible. The adoption of Metro is really just code for the adoption of Windows 8.

Some people struggle with Metro if they try to compare the interface to other interfaces and seek similarities that simply aren’t there. There’s a learning curve because Microsoft didn’t copy Apple and replicate the iPhone experience. Metro offers interactions that are excellent and make for ideal user experience, but may be unfamiliar. That period of learning can make some people uncomfortable. This is especially true when you consider how many people’s previous device was not an iPhone, but a Blackberry. It’s a massive adjustment. If Microsoft positions Metro properly, new users will understand that it’s an entirely new way of interacting with their digital content; and that will help them to overcome some of the initial adjustment to the interface.

windows8desktop_500x233

6. Windows phone is not yet a popular mobile platform, do you think it will change with the release of Windows 8?

One of the most popular things to say about Windows Phone is that no one likes it. I don’t know if that is accurate, though. From what we are seeing, the people who use Windows Phones usually like them – so the issue is not the quality of the phone or the interface – it’s about distribution and adoption. That’s not a phone issue – that’s a marketing issue. Microsoft needs to market the hell out of Windows Phone for it to take off so that they can gain ground on the other platforms.

7. What are the top 3 advantages of metro style UI comparing to other UI styles?

Every UI has its pros and cons. I can tell you three things that I really like about Metro:

· It focuses on the user and their content, rather than disruptive design elements like bevels, animations, and drop shadows.

· It respects our intelligence. Rather than simply handing us a style guide and telling us what everything needs to look like, Microsoft gave us Metro. Metro tells us what is important about human interactions, and gives designers the flexibility to design an interface that is exactly right for that product or service and its users

· It’s uniquely Microsoft. There’s an extraordinary amount of pressure for Microsoft to simply copy Apple or other popular tech companies. Microsoft has its own brand and identity, and I’m relieved that they decided to chart their own branding course. If people have an open mind to Metro, they might actually discover that there are aspects of Metro that are better than some of the interactions that Apple has put into the market.


Read more about Metro UI, here at the mobile spoon:

Microsoft's Metro UI is indeed everywhere. Want some proof?

Top 10 tips for building a Windows Phone app

Windows 8 Metro UI: Bold Move By Microsoft Or A Doom ? 3 Possible Scenarios


About Rich Blackwell, Designer, Metia

With 14 years of experience in marketing and advertising, Rich combines his extensive design skills with his ability to understand client objectives and develop effective strategies to meet those goals. He specializes in brand development, print and web advertising campaigns, marketing collateral, and website design. Rich has delivered compelling designs for clients such as Microsoft, Expedia, and LG Electronics.

About Metia

Digital marketing leader Metia/Seattle is the North American headquarters of global agency Metia Group, headquartered in London with additional offices in New York and Singapore. As digital craftsmen, Metia/Seattle blends a deep understanding of technology with strategy, creative, content, analytics and optimization. Their results-focused digital marketing solutions are used by brands including Microsoft and AT&T in websites, email, social, digital applications and other online communication programs. Visit www.Metia.com and www.twitter.com/metiasea.



1 comments:

Deborah Hanamura said...

thanks for the great interview!

Post a Comment

Note: Only a member of this blog may post a comment.

Popular Posts This Week

Follow by Email

The Mobile Spoon App