Including Joe Belfiore’s “Building a different kind of UI” talk as well (for completeness): see that in the very end.
Marko Ahtisaari interview: Nokia Senior VP of Design [The Verge, Oct 31, 2011]
… the fact that he finds such harmony with Albert Shum’s Metro UI demonstrates the synergy that exists between Microsoft’s and Nokia’s design teams. As Marko explains while gesturing to his beloved Lumia 800, “What struck me so much is that when we got together, and looked at design principles that went into Metro, the design principles that went into this design language — it’s nearly identical, slightly different words. So great teams think alike.”
Nevertheless, Marko’s clear that innovation in the phone industry “isn’t done yet,” reminding me that it took 15 years for the automobile industry to standardize on the steering wheel as the dominant interface. While voice interaction like Apple’s Siri is an important development in the humane machine interface, Marko’s near-term interest is improving “design on the glass” via “sloppier gestures” that allow users to do something without requiring their full attention. He’s also exploring off-the-glass gestures, calling it a “key area where we’ll continue to innovate.” “The prototypes already exist,” he reassured me with a glint in his eye.
Suggested preliminary reading:
– Nokia to enter design pattern competition for 2011 smartphones with MeeGo [Dec 9, 2010]
– Nokia N9 UX [?Swipe?] on MeeGo 1.2 Harmattan [June 24 – Oct 27, 2011]
– Nokia Lumia (Windows Phone 7) value proposition [Oct 26, 2011]
Albert Shum on the Design of Windows Phone 7 [Feb 16, 2011]
Windows Phone Designer Seeks the Right Balance [Microsoft Feature Story for the press, Feb 16, 2010]
Before joining Microsoft two and half years ago, Shum met with J Allard, chief experience officer in the company’s Entertainment & Devices division, and Don Coyner, general manager of Microsoft’s Entertainment Experience Group. They talked about using design as a way to not just create new mobile experiences, but also to help shift the culture at Microsoft.
“The tone was, ‘Let’s mix some folks from Nike, from the entertainment world, and from the technology world and start thinking differently about how we design, build and launch products,’” Shum says.
The first result of that new approach is Windows Phone 7 Series, a new mobile experience that’s designed for a life in motion, Shum says. The new user interface aims to connect content from the Web, applications, and services into one simple experience. “It presents a way to navigate and interact with the things you care about. That’s really the new fresh start we’re bringing to Windows phone.”
According to Shum it took an open, diverse team to look out across Microsoft’s various entertainment offerings and bring them all together into the new mobile experience. The key to connecting the dots was to stay focused on the consumer.
“You know, everybody says simple is the new awesome,” Shum says. “OK, make it simple. But also make it emotional and relevantfor the consumer.”
That’s what the design, engineering and business teams set out to do with Windows Phone 7 Series, he says. Shum hopes consumers see that personal connection right from the revamped Start page.
Dynamic icons called “live tiles” display real-time content from users’ contacts and applications. The tiles are gateways to “hubs” of the content consumers care most about: people and social networking, pictures, games, music and videos, their workplace, and an application marketplace.
“We took the idea of making it personal so when you look at it with the Start experience, it’s all your content, it’s all your people, it’s all your pictures, it’s all your music,” Shum says. “I think that’s really a key part – that personalized way of navigating the things that you care about, the things that you want to share, the things you want to listen to.”
Metro Design Language of Windows Phone 7 [Microsoft Tutorial, Dec 10, 2010]
Metro Design Language of Windows Phone 7
Metro is the name of the new design language created for the Windows Phone 7 interface. When given the chance for a fresh start, the Windows Phone design team drew from many sources of inspiration to determine the guiding principles for the next generation phone interface. Sources included Swiss influenced print and packaging with its emphasis on simplicity, way-finding graphics found in transportation hubs and other Microsoft software such as Zune, Office Labs and games with a strong focus on motion and content over chrome.
Not only has the new design language enabled a unique and immersive experience for users of Windows Phone 7; it has also revitalized third party applications. The standards that have been developed for Metro provide a great baseline, for designers and developers alike. Those standards help them to create successful gesture-driven Windows Phone 7 experiences built for small devices.
Guiding Principles of the Design Language
There a few core concepts of the Metro design language which we’ll outline here. Each concept, or guiding principle, contributes to the look and feel of the whole system as well as the layout and frequency of elements used within the interface.
What’s covered in this video:
- Design inspiration for Metro
- Guiding principles of the Metro design language
- Examples of each principle in action[clickable in the original]
Principles of Design
Typography. Type is beautiful. Not only is it attractive to the eye, but it can also be functional. The right balance of weight and positioning can create a visual hierarchy. Additionally, well placed type can help lead you to more content.
Motion is what brings the interface to life. Transitions are just as important as graphical design. By developing a consistent set of motions or animations, a system is created that provides context for usability, extra dimension and depth and improves the perceived performance of the whole interface.
Content not Chrome is one of the more unique principles of Metro. By removing all notions of extra chrome in the UI, the content becomes the main focus. This is especially relevant due to the smaller screen size and gesture-based interactions.
Honesty. Design explicitly for the form factor of a hand held device using touch, a high resolution screen and simplified and expedited forms of interaction. In other words, be “authentically digital”.
Unique Components of the Interface
Following the guiding principles of Metro, the Windows Phone design team has come up with more than a few unique interface components. In this section you will see different Windows Phone 7 UI components in action.
What’s covered in this video:
- Fonts, colors and themes
- Interface navigation components
- Application level components[clickable in the original]
Signature Examples of Motion
At this point, you have seen examples of the signature animations in Metro. In this section, you will see each animation singled out, allowing you to see how the system of interactions is created and how the motions adhere to the guiding principles. Not only will this continue to illustrate the Metro design language but it will also help you design your use of motion in your own applications.
What’s covered in this video:
- Taking a look at interface level animations such as Live Tiles
- Application level animations such as Swivel and Zoom[clickable in the original]
In this lesson, an overview of the design language of Windows Phone 7 was provided. After a brief background, the guiding principles were explained and examples of the principles in action were given. You were also given a look at the unique interface and application level components and the signature animations that comprise the Windows Phone 7 interface.
Nokia World 2011 Panel Discussion: Designing smarter phones [NokiaConversations, Nov 8, 2011 [upload date]]
Marko Ahtisaari …
He [Marko Ahtisaari] described the design “as a reductionist process, leaving only what was absolutely needed“.
He went on to explain that just because the design process strips away all unnecessary elements, the result doesn’t have to be “de-humanising”. Things can always be reduced in such a way that they still feel natural, rather than “artificial and impersonal”. This is certainly reflected in the N9/Lumia 800, with its gently curved back and front glass.
Even though the design is stripped down to bare essentials, it isn’t boring to look at. Marko elucidated to the audience how the design looks very different from various angles. From the front or back, it’s a hard rectangle. However, the back has a “complex pillow-like curvature“, whilst the sides are semi-cylindrical. The curved glass screen complements the curvature by blending in smoothly with the body.
Marko went on to describe how the polycarbonate uni-body required “extreme product making”, and that it was not at all easy to manufacture. There was a lot of attention to the craftsmanship involved, and that each process was “extraordinary”. For those who don’t know, the body of each N9 and Lumia 800 is made from a single piece of polycarbonate, which is precisely milled to the required shape. There is a great deal of attention to ensure that no production marks are left on the body. He also commented that the final assembly (which is done by hand) was like “putting a ship in a bottle”.
… started by telling the audience that even though the partnership was only eight months old, “both teams have worked together very well“. He explained how each had introduced itself to the other by summarising its core values. Both groups soon saw that those values “aligned very well“, as shown below.
Common design values
Albert discussed the design principles of Windows Phone, citing the line “People First“, as we’d heard several times from Joe Belfiore; and matching with Nokia’s “Connecting People” value. He also explained that Microsoft has conducted lots of case studies, which enabled it to build four archetypal “personas”for which it is designing Windows Phone.
Another common value between the two teams is “craftsmanship“, balancing the needs of science and art. An example of this was working with Nokia to optimise the touch screen drivers for individual handsets.
Albert talked briefly about how important typography was to Windows Phone. It has to be “artistic, yet facilitate finding information quickly“. …
In-depth checking of typography in Windows Phone
Albert then reflected Marko’s reductionist point of view. He stated that the Windows Phone development studio believes in “Content, not chrome“. Furthermore, a design philosophy that his studio finds useful is, “You’re never done with a design until you’ve removed all you don’t need“. Therefore, a lot of the Windows Phone design process has been removing and simplifying elements. This is reflected in the set of Windows Phone icons, which was shown on the slide below.
The Windows Phone 7 icon set
Albert finished by discussing how Microsoft is trying to improve the Windows Phone ecosystem. One way is to “bring diversity to its services and applications“. Of course, he cited the software and services that are exclusive to Nokia as a way of doing this. The team are also looking ahead to other opportunities for expanding Windows Phone. To illustrate this, he showed a chart with phones, tablets, televisions and other nondescript devices.
After both had given their speeches, they sat down for a discussion about their views on user interface (UI) design. Marko opened with his view that UIs should allow people to have their “heads up again“, rather than down in their phones. This is the idea that UIs should give you quick glanceable information, rather than having you tap through applications. He believes that Live Tiles are a good way of achieving this, because information “bubbles up”when you need it.
Both of the designers agreed that Windows Phones need to be tried before you buy one. Albert made the analogy that you “wouldn’t buy a car without trying it first“.
They wrapped up the discussion by echoing Joe Belfiore‘s comment, that the Metro UI grid is a consistent way to present information to the user in each “Scene”. The mention of Scenes was the real piece of new information here. It turns out that this is the term given to the section of the UI that is currently on screen. One can think of an application page as a panorama, and we drag horizontally from scene to scene within the panorama.
Positive impressions: HTC Radar and Nokia Lumia 800 [Tero Lehto from Espoo [but not Nokia related], Nov 20, 2011, ]
The second Windows Phone 7.5 smartphone I played with is the highly anticipated Nokia Lumia 800. Microsoft held two events, Hello Helsinki for consumers and TechNet for developers and IT pros. There I had the chance to try Lumia 800, but just for about one hour, in two sessions. Even though Lumia 800 does not yet bring anything very special to the Windows Phone platform, I have to say it’s absolutely the best looking and feeling Windows Phone device so far. It’s almost as great piece of art as Nokia N9, and somewhat even better.
Lumia 800 has got very good reviews online. Many have written it’s probably the best smartphone Nokia has ever done. Of course, it’s good to note Americans haven’t got most of Nokia’s smartphones to the United States, and it seems they never got used to Symbian. Nokia N9 (MeeGo) is not shipping there either.
Lumia 800 has the same kind of nice polycarbonate chassis as N9, which means a special quality of plastic. In this case plastic is not a bad thing, because the device feels very robust and sturdy. And the material enables having very vivid colours of cyan, magenta and black. And if you scratch the device, the colour surface should remain the same, because all of the plastic material has been painted. The last argument is from Nokia, I haven’t actually seen that in real life yet.
Looking at hardware specifications, Nokia Lumia 800 is not the best WP Mango device available. HTC and Samsung have models with front cameras for video calls. HTC Titan also boasts an impressive 4,7 inch screen and faster Qualcomm Snapdragon 1,5 GHz processor.
I was disappointed to note Lumia 800 uses the same, very modest standard camera application of the Windows Phone platform. As mobile cameras are Nokia’s core know-how, I would have expected them to shine in this areawith the same kind of an application we’ve seen on MeeGo and Symbian. I took a few pictures live at the event, but I couldn’t figure the image quality based on that yet. However, in those dim light conditions the result did not look as good as what I’ve used to with N8 and N9 based on what I saw on the screen.
It’s clear Nokia can do a lot better than what Lumia 800 shows, and fortunately they are already working on this. I got to meet Albert Shum from Microsoft at the same event. He is the man responsible for the Metro UI of the Windows Phone platform. Shum told they have very close co-operation with Nokia. He has described his work on this YouTube video.
Even though Shum obviously couldn’t reveal any specific new features of future Nokia device, based on the interview I’m convinced we will see more personalisation and more features specific to Nokia. The camera application and integration to other parts of the OS are important. People centric features will become even more advanced. IM and VoIP will be integratedwith Lync and Skype support. Lync should come already before the end of this year, for Skype the schedule is more uncertain.
You could possibly see where people are, what they’re doing, invite them for a coffee based on your map location, or pictures taken with the camera could be shown on your map location, et cetera.
It’s also interesting to see which features will be specific to Nokia, and which ones will become available for all the vendors. I will blog more about the interview with Albert Shum if I have time later.
Nokia World 2011: Joe Belfiore – Building a different kind of UI [NokiaConversations, Nov 8, 2011 [upload date]]
Joe started with the assertion that “Windows Phone is about celebrating people”, quoting core values stated by the design team:
- “People first” – your friends and loved ones (and what they’re up to) should be front and centre in the interface. Being ‘people first’ is. Joe contends, fundamentally different to iOS, Blackberry, Symbian and other mobile operating systems, which all force an “application by application” basis.
- “Celebrate me” – Joe contrasted the effortless celebration of ‘you’ to Android’s customisability, where you have to put in quite a lot of effort in terms of homescreen tweaking and configuring. In Windows Phone, an awful lot is done for you.
- “Right here, right now” – instant display of the people, events and information that you need in real time, plus an awareness of searching for things physically close ro you in real life
Metro is, as you will have observed, and as Joe contends, “completely different”. It has evolved from other things that Microsoft have done. E.g., Windows Media Centre and Zune HD, and the name comes from the idea of taking the user on a journey. And, to set that up nicely, the visual style was inspired by metropolitan transportation signs – i.e. they do what they need to do, clearly and simply, “expressing typography, without unnecessary frills”.
The same is true of Metro UI’s textual elements and iconography, with the added aim to be “artistic” – Joe showed some examples of classic and modern art based on typography. Ideas above a mobile OS user interface’s station? Pretentious? Maybe, but we can absolutely see what Joe means and the overall effect is undoubtedly very stylish.
Metro UI certainly offers a different approach to the usual grids of largely static icons, though the cheeky resizing of the phones to give one a psychological edge made us chuckle!
Also important to Metro is “motion“, whether it’s your Xbox live avatar peeking out cheekily in your live tile, the lock screen bouncing when tapped to indicate what to do, the ‘busy’ moving dots or indeed the core kinetic scrolling of all the panes and content. Joe says that “motion makes so much difference, which is why comments based on screenshots don’t represent the whole ‘picture’…” He says that “the motion helps to create an emotional connection.”
Perhaps unsurprisingly, the Metro UI design is “getting better feedback from women and first time users”. The competing Android UI design “is like the web – it can accomodate lots of styles”. Joe defends Windows Phone in a direct comparison saying that Metro isn’t as constrained as some say and that the very consistency and the ‘airyness’ helps users, plus developers can create their own design, incorporating the Metro style without it getting in their way.