Home » design » Designing smarter phones–Marko Ahtisaari (Nokia) and Albert Shum (Microsoft)

Designing smarter phones–Marko Ahtisaari (Nokia) and Albert Shum (Microsoft)

Prerequisites (June 2015⇒):

Welcome to technologies trend tracking for 2015⇒2019 !!! v0.7
5G: 2015⇒2019 5G Technologies for the New Era of Wireless Internet of the 2020’s and 2030’s
Networked Society—WTF ??? v0.5
Microsoft Cloud state-of-the-art v0.7
• Service/telco for Networked Society
• Cloud for Networked Society
• Chrome for Networked Society
• Windows for Networked Society

Opportunity for Microsoft and its Partners in FY17:

As progressed since FY15:

Or enter your email address to subscribe to this blog and receive notifications of new posts by email:

Join 94 other followers

2010 – the 1st grand year of:

3.5G...3.9G level mobile Internet
• system-on-a-chip (SoC) and
reflective display technologies

Why viewed most (till Feb 1):

Marvell SoC leadership
Android 2.3 & 3.0
Hanvon's strategy
Welcome! or Home pages
Treesaver (LATELY #2!) and
IMT-Advanced (4G)
MORE ON THE STATISTICS PAGE

Core information:

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]

Nokia designer Marko Ahtisaari sits down with us to chat about innovation in the phone world, why the Lumia 800 looks so much like the Nokia N9, and why the future of interfaces won’t be voice commands but something he calls “sloppy gestures”.

… 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]

Albert Shum, one of the key thinkers behind the new Windows Phone 7 Series design, admits that 12 years at Nike doesnt sound like an obvious springboard to becoming director of Microsofts Mobile Experience Design team. In this video, Albert talks about the principles, thinking and user factors that went into the design of the completely reworked-from-the-ground up Windows Phone 7.

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.

Microsoft Windows Phone Start Screen -- 16-Feb-2010Dynamic 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
watch video [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
watch video [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
watch video [clickable in the original]

Conclusion

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]]

Panel Discussion at Nokia World 2011: http://events.nokia.com/nokiaworld/ titled “Designing smarter phones” with Marko Ahtisaari from Nokia and Albert Shum from Microsoft Nokia World is an annual conference and exhibition devoted to all things Nokia, that took place this year on the 26th and 27th October in London. The two days were packed with captivating talks, inspiring discussions, exciting surprises and fruitful networking. The event offered visitors to experience all new mobile products, services and innovations from Nokia and partners. Marko Ahtisaari heads the Design team and is responsible for user experience and industrial design. Albert Shum is the General Manager of the Windows Phone Design Studio.

Designing Smarter Phones [Steve Litchfield, David Gilson, All About Windows Phone, Nov 2, 2011]

Marko Ahtisaari

He [Marko Ahtisaari] described the designas 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”.

Albert Shum

… 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.

Design values
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 Peoplevalue. 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
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
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.

Discussion

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 Belfiore at Nokia World 2011: http://events.nokia.com/nokiaworld/ speaking about “Building a different kind of UI” Nokia World is an annual conference and exhibition devoted to all things Nokia, that took place this year on the 26th and 27th October in London. The two days were packed with captivating talks, inspiring discussions, exciting surprises, fruitful networking. The event offered visitors to experience all new mobile products, services and innovations from Nokia and partners. Joe Belfiore co-manages the Windows Phone team, heading up product definition and design. A huge consumer advocate, Joe has spent his career working to make technology products easier to use and to give people a more satisfying and “delightful” experience. The “Metro” design language of Windows Phone is a product of Joe’s team working over many years to revitalize design at Microsoft.

Building a different kind of UI [Steve Litchfield, David Gilson, All About Windows Phone, Oct 28, 2011]

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”.

Transport sign inspiration

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 design languageMetro 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.

Advertisements

5 Comments

  1. […] Nokia N9 UX [?Swipe?] on MeeGo 1.2 Harmattan [June 24, 2011] Follow-up: Designing smarter phones–Marko Ahtisaari (Nokia) and Albert Shum (Microsoft) [Nov 23, […]

  2. […] the detailed elaboration of that (with a lot of included text) in a separate post on this blog: Designing smarter phones–Marko Ahtisaari (Nokia) and Albert Shum (Microsoft) [Nov 23, […]

  3. […] 2010 – Jan 31, 2012] – Nokia N9 UX [?Swipe?] on MeeGo 1.2 Harmattan [June 24 – Oct 27, 2011] – Designing smarter phones–Marko Ahtisaari (Nokia) and Albert Shum (Microsoft) [Nov 23, 2011] – Best practice industrial and user experience design – Nokia and Microsoft [Dec […]

  4. […] (Windows Phone 7) value proposition [this same Experiencing the Cloud, Oct 26 – Nov 2, 2011] – Designing smarter phones–Marko Ahtisaari (Nokia) and Albert Shum (Microsoft) [this same Experiencing the Cloud, Nov 23, 2011] – Best practice industrial and user experience […]

  5. […] industrial and user experience design – Nokia and Microsoft [Dec 17, 2011 – Jan 31, 2012]- Designing smarter phones–Marko Ahtisaari (Nokia) and Albert Shum (Microsoft) [Nov 23, 2011]- Nokia N9 UX [?Swipe?] on MeeGo 1.2 Harmattan [June 24, 2011 – Aug 10, 2012]- Nokia […]

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: