24374
>> Arjmand Samuel: Today Darlene will present the Metro design
principles. She's a designer with the Windows Phone design group, and
she will tell us all about what Metro is and how you can use it in your
apps. Darlene, you're next.
>> Darlene Wong:
[music]
All right.
All right.
>>: Did you do that commercial?
>> Darlene Wong: I did not. I wish I could take credit. This is not
working the way I thought it was going to. How do I get out of this
again? So as Guico [phonetic] said, I'm Darlene Wong. I'm a designer
with the Windows Phone Design Studio, and I'm going to talk to you guys
today about the Metro design story. And you guys are all app
developers, right? You guys have all developed apps.
How many of you have developed an app that's on the marketplace today?
Show of hands. Cool. So I'm really excited, because I'm glad that you
guys are here to hear me talk about design for one. So you guys must
all be really familiar with the Windows Phone UI and what that looks
like, tiles and lists and stuff. But there's a whole story behind how
we got there, how we got from 6.5 to seven. And so with my talk
tonight, I'm going to break it up into two parts. First, I'm going to
tell you the story how we got to Windows Phone 7, how we came up with
the Metro design principles, and I'm going to talk about what they are
and try to relate them to that story, and then we'll switch gears a
little bit and I'll talk more about the design language and those are
the actual controls, the motion and the parts of the UI, and I'll also
try to connect that to the principles. So hopefully that gives you a
better understanding of how to use them as you're developing your apps.
So many of you may have heard of the reset which happened a couple of
years ago with Windows Phone and that's when we moved from 6.5 to 7.
And if you remember, this is what 6.5 looked like.
And you know it looks so different from what we have today with Metro,
and just looking at it from a design perspective, just -- it's a more
iconographic style of design, and what that means basically is using
icons to represent things in real life.
So looking at just the bevel and the gradient, and besides all of that,
just in your contact list here, using -- instead of imagery to relate
who this contact, who this person is, we're using a little blue 3-D
man. And it really doesn't distinguish one contact from another.
And then here in the home screen, I guess, there's a little set of
playing cards that represent possibly games. There's an icon of a
photo that represents where your photos might live. And I never -I've never used 6.5. So I'm kind of just guessing at what this UI, how
to use this UI. As you can tell I'm struggling a little bit to kind of
understand how to use it.
There's nothing really wrong with this approach. But I think that the
design leads at the time recognize that there was something missing
here. This UI doesn't really communicate or say anything to the user.
It just -- it's there. And really when you take a look at some of the
embellishments they've put in there, like this box around the date and
time on the lock screen, I mean, what does that really accomplish?
What does that do? It ends up just becoming noise and blocking the
user from seeing content that maybe they're looking for.
So this is -- oops -- this is Albert Shem our studio design lead, and
he was one of the main voices in starting us off thinking about Metro.
So he and along with -- he wasn't the only one. We have many design
leads, researchers, designers.
A lot of really great thinkers that came together to try to point us in
a new direction. So Windows Phone wasn't the only one in the company
at the time thinking about good design.
There was Windows Media Center, which I think was in the mid-2000s, and
Bill Flora worked on it. And from here you start to see just a really
open claim design. You start to see open space, bold use of typography
here. Large font, and I referenced earlier the bevel and the gradient,
and I know here that you do see gradient. But I feel that here it
feels secondary, and it doesn't block you from really seeing anything.
Instead, this larger type really draws your eye in and it says start.
So obviously you're going to start there and your eye kind of moves to
the right with the horizontal navigation, and then as you pick your
menu item, you start using the menu vertically. So it's all really
clean, simple structured.
And then here, with the music library, you know, I think you could
think of it like if we did this, the iconographic way, you could come
up with a representation of an album title. You could have had a
picture of a CD. In a CD cover kind of peeking out and you could list
them down the page.
That might have represented albums, but here these are the actual album
titles. Album covers. And you can see them in a grid, and the grid
kind of helps put a lot of information in a smaller space.
And I know it's a subtle difference going from just an icon to the
actual album cover. But I feel like that subtle difference is a really
big one. It really gets the user to look at this UI in a different way
and think about interacting with it in a different way.
Then we have the Zune music experience. Again you see the clean
layout, the use of grid. But what I found interesting here was down in
this corner, the We Recommend. To me this is where we really started
talking directly to the user, right?
We said, hey, you know, we know you. From what you've listened to in
the past, we think you might like this. And we're starting to really
connect with the user. And something that they care about, the music
that they're listening to.
And then the Zune [inaudible] music player. What I feel is probably a
stepping stone, getting to that mobile UI. So we moved -- you can see
the huge difference between the more iconographic style of design to
the more infographic. And infographic, what we're used to today, not
just changed the design, look and feel overall, but I think that it
really changed the way that we thought about the experience that the
user was having.
We thought more about who they were and what was important to them. We
thought about what their journey was as they were using the phone. And
a lot of times when I talk about the UI, I think it looks so simple,
right? Maybe just make a title in a larger oversized font. Maybe you
just put some images in a grid.
But there's a lot more to that. It seems effortless. But there's a
lot of work and thought that went behind, that went into the thinking
behind this design.
And to get everyone on the same page of this new way of design
thinking, we came up with Metro design principles. We think of these
principles kind of as a golden rule. Not hard and fast rules. But
more like a guiding light. More like a direction that guides us
towards creating enjoyable and meaningful experiences.
So this is a poster that we have hanging up in our design studio. And
it basically states the five principles which I've highlighted in red.
And I'll go over them.
So the first modern and clean. Sometimes we call this clean, light,
open and fast. And basically this means to just clean up the clutter,
include only what's necessary. So like the examples I had just shown,
take advantage of that negative space, open space is okay. I think
that it helps the user focus their eye in on the actual content and
what is really important.
And you know, take a look at your existing designs, too. And try to
strip away what is not needed. If you can free your design from
clutter, the design starts to feel lighter. And if you focused your
user's attention in on that message, the user can more easily move
through the experience and they can get to their task faster.
Alive in motion. So motion is -- it's delightful. It's fun. And
motion -- a lot of the motion in our device actually teaches the user
something. It actually guides the user to how to use the UI.
Take, for example, panoramas and how those animate in. As they animate
in, you see the full image. You see the list passing by. Really,
briefly, and it's quick and subtle. But when it lands, it lands on the
left-most side of the panel. And you can see the text kind of trail
off and truncate off the side of the device screen.
And that kind of gives the user a hint that there's more. There's more
to the right. Look here. Look, discover. If you pan over you can
find it. And it's kind of fun. That sense of discovery.
And also think about the lock screen, that little bounce. It kind of
alludes to if you just swipe this up, you can find something. You can
unlock your phone. And all of this is instruction without words. It's
all just the subtle motion cues and it kind of makes the user feel
smart. You haven't told them anything but yet they figured it out.
It's pretty delightful.
Content. You hear this maybe a lot. Content not Chrome. And again
this refers to cleaning up some of that bevel and that gradient. It's
not to say that you can't use it. But maybe thinking about how you use
it, thinking about where it makes sense to use it. Because if it's a
little too gratuitous, if it's all over the place, sometimes it just
blocks the real intent from what the user's trying to get to.
And then celebrate typography. So typography can be useful and
beautiful. It's a way to -- it's a way to organize your content. Like
if you think about it, most types of content is text. Right? Like
this poster, for example. It's all text. But it's using text in a
smart way. It's very visual. Especially it can create that hierarchy
of start, where to start, how you want the user to move through the
content, what's most important.
And then finally authentic. This one, sometimes you hear it being
called authentically digital. And I think this is just another way of
saying you know we're a digital space. A lot of times with being more
iconographic, where you're trying to represent the world in a digital
space that you're trying to represent the real world, we get lost in
trying to just copy what's in the real world versus being authentically
what we are, which is a digital environment.
And there's got to be a better way, other ways of moving through the
digital space. Something that makes sense for the digital environment.
So these are our principles. And it's interesting to know that Metro
is actually inspired by wave finding signs. Wave finding signs in
airports, subways and Metro systems, hence the name Metro. And wave
finding signage actually has its roots in the Swiss-style of design.
Also known as the international-style of design.
And there's a whole history, you know, I think back in the 1950s and it
can go even further back to the 1930's. But back in the 1950s, there
was a whole history of designers, started with the Swiss but became
more of an international movement that they centered on the thought
that design could be simple but yet functional.
Swiss-style can be designed as the authentic pursuit for simplicity.
And it's devoted to minimal elements like typography and content as
opposed to the textures and the gradients and illustrations. It's a
fierce reduction of elements. Much like our principles.
I just thought this quote kind of embodied it perfectly. As you're
designing, it's not really how do I design this app, what else do I put
on. A lot of times it's just stripping things away and the simplest
thing, which is just the content or just the message, is really all you
need.
So you might be asking yourself what do wave finding signs have to do
with the phone UI. Like how do those two things relate? Well, I think
the Swiss style is a way to communicate to a really broad audience in a
clear and concise way regardless of language. For example, if you're
in an airport, you need to get to -- you're about to miss your next
flight and you need to get to your next gate right away. Without clear
signage, you could possibly miss your next flight. And the same thing
goes with the phone. If you're rushing to your next meeting and you
don't know where the meeting's at, you may not be able to get there as
quickly.
So these are just some examples of wave finding signs, just some
examples of how it embodies the Swiss design. What you can see here is
the use of color for organization. Here with this subway map. You can
see use of bold typography here to indicate direction where this subway
is heading.
And the Swiss style also talks about this grid system. And the grid
system I feel really provides that structure so that you can snap to a
grid and there still feels like there's organization without
necessarily having to explicitly give organization. These are some
like real examples of Swiss design. The Olympics logo, for example.
This is interesting because there could have been so many ways for them
to design this logo. I mean, it could have been a bunch of athletes
standing together in a circle. It could have been people holding
hands. It could have been a bunch of different flags from different
countries. But instead of all of that, they decided to go more
abstract. It's just a plain white background, bold graphic circles
that are interlinked, and I think you can pull a lot of meaning just
from these simple shapes and colors.
It's still to me represents the joining of something and difference,
there's different colors. So I think it's pretty successful.
This is some examples of brochures from the '72 German Olympics.
Again, really bold use of color and big typography but you can also see
use of the grid here, where all of these paragraphs are left aligned to
the bottom two, and it's super subtle. I don't know that a lot of
people actually pick that out.
But just that simple alignment really gives anchor and a structure to
the content. And, again, with the Olympics, use of metaphors to speak
without words. These are some icons that were created to represent the
different events.
So it's real easy to see what event do I want to see, gymnastics,
swimming, running, and you don't have to know whatever language the
host country -- you can tell just by looking at the image.
And, again, wave finding signs. It's real easy no matter where you are
to find the bathroom. That's probably the number one looked for sign.
And another reason we pulled inspiration from the Swiss-style is just
that it's timeless. You can still see evidence of Swiss-style today,
even though it's been around for 50 plus years. Movie posters use it.
Advertisements, packaging, posters. And none of them feels dated. It
still feels fresh and new.
So with all of that said, what does this really mean? Right? We
talked about all the inspiration and wave finding and this is a picture
here of a guy who is clearly not connected to his experience. He's not
enjoying the moment he's in. He's stopped trying to do something on
the phone. And so on top of all the principles, basically what we're
trying to say is these principles are like the foundation.
But what really makes our phone different? And we believe it's the end
user. And the end user's experience. And that's what really infuses
that life into the UI. We want to know what their story is. We want
to know what they care about. And we want to really connect with them.
So next I'm going to show you a video. It's a little bit dated. You
might be able to tell. But it's of Albert Shum, and he's talking about
this personal relevant connected, being personal to the user, giving
them the information that is relevant or most useful to them and
connecting them to those experiences.
[music]
>>: Back at Microsoft I looked at, wow, this is a candy store. We have
so much amazing technology. We have great gimmick, great experiences,
great e-mail experiences. And how do you bring that all together for a
user in a simple, seamless way. I think that really speaks to the
power of Windows Phone. Now saying we're going to connect all this for
you. You don't have to think about it. How do I bring it to the
users, presents you a way to navigate but also a way to interact with
the things that you care about. And that's really the new, fresh start
that we're bringing to Windows Phone. It's really stepping back and
saying: What I really wanted, what our consumers really want. And I
think that was really the approach to say, hey, if you can do anything,
what can we do? And looking at there's a lot of ideas about, hey, how
do you make smartphones smarter and how do you make it run faster,
graphics. But in some ways that's really not what users are looking
for. They just want a better experience. And we really said, hey,
let's think about that. What do people really want in their lives?
And we really key off of on those kind of thinking and start building
kind of what we start saying our design philosophy or making a
connection with our users. And bringing those insights to the design.
And really working with the engineering team to say, hey, what if we
could do this, and how would we build this? I think that was a really
great opportunity about how Microsoft, because we have this great
amazing technology, and I think bringing some insights with design we
can harness potential of creating a whole new phone experience for our
users. Windows Phone, what is it about, what makes Windows Phone
Windows phone and those are key things we think about, we think about
the end user as king. That's really important. It's really authentic,
we talk to real users out there and we spend a lot of time talking to
our users, not just to listen to what they do, but also saying hey we
have this idea, what do you think.
So really driving some of those insights but also making the design
come to life for them, and listening to how they use it but also
improving the design. I think that process of iterating and refining
and building, I think that really speaks to the craft and care and
passion we put into the product, that authentic [inaudible] comes
through. Hey, we have to take design, not just as a way to make it
look appealing, but I think we've got to think about making it
desirable. Where is that balance when you do something new you have to
ground it in something that people can understand. What do our users
see first? I think hopefully they'll see themselves's in the phone. I
think that's a really key part of how we design it.
It really focuses on making this phone your phone. We took that making
it personal so when you look at it the start experience, it's about
your content. It's about your people.
music. It's presented way up there.
It's your pictures.
It's your
And it's my phone it's going to be different than your phone and I
think that's a really key part, that personalized way of navigating to
things that you care about, the things that you want to share. The
things that you want to listen to and really I think those are the key
moments of what we first present. It's your phone.
>>: Wow.
>> Darlene Wong:
Yeah, I don't than what that is.
>>: Bad burn.
>> Darlene Wong:
How do I get it off?
>>: Close the window.
>> Darlene Wong: Sorry about that. That was pretty scary. Okay.
We're back. That was the design principle. So hopefully you learned
about where the principles came from, what they are. Now we're going
to talk a little bit more about the design language and this is
actually going through the controls. And so here on the left you can
see these are the principles, right? And really like I was saying
earlier, it's the foundation. It's not meant to bind you in any way as
you're developing apps. It's really meant to create that solid base
for which you can then spring off of and use all of these elements on
the right, the navigation, the touch gestures, themes and all of that,
and really use that to create an app that's unique to you.
So first off, this is our navigation model. It's a hub-and-spoke
model. And what that means is that we always start it at the start
screen, at the hub, and take you off on your merry way down your task
linearly. When you're done, you always go back to start before you
start a new task.
And we think this works because going back to the wave finding example,
it's really about knowing your way around. So if you're in an airport,
see a sign that says gate A is this way and you're walking this way,
you expect gate A to be at the end of wherever you're going. And then
eventually you come to a cross-section, and it says gate A is back
where you came from, you'd be pretty frustrated, right? And you'd be
lost. So I think that that's why this works. It's just an easy way
for people to know where they are at any point in time.
It gives them control over where they are. And then the page
structure. Again, if you've developed apps before you're probably
pretty familiar with this but the status bar at the top with the time
and status of the phone, battery life, connection and all that. The
application space is actually the entire middle and then the
application bar at the bottom, which can expand and minimize.
This again just shows the canvass, that the canvass extends beyond the
screen limits, and that's done purposefully to really create a sense of
space, an open sense of space. And then the grid. We talked about
this with the Swiss style of design. Having that grid really keep you
organized.
And this is our grid, but you can see that it's not restricting in any
way. You can actually break this up into any number of different ways.
It's really very flexible. And if you take some examples of real UI,
like our start screen and overlay the grid on top of that, you start to
see how it really does snap to this grid. And then you take another
screen in our UI, the app list, it still snaps to the same grid. And
the people -- it just kind of shows you that all of these screens, they
look so different, yet they're still rooted in the same grid structure.
And you're not limited to any one type of design.
And then orientation. What I just wanted to say
is just that there's portrait and landscape, and
your apps, you don't really have to -- you don't
both orientations. There's sometimes where your
better in one orientation, and it's fine just to
here about orientation
as you're developing
always have to use
app may just work
leave it that way.
For example, our start screen. It only works in portrait mode.
Because that's the way it looks best. It's presented best.
Alternatively, another way you could think about it is the calculator
app. If you use it in portrait mode it's a simple calculator. If you
turn it horizontally one way, I think it's a scientific calculator.
And I didn't realize this, but actually if you flip it and turn it
horizontal the other way it's a third type of calculator. So it's kind
of neat how you can actually use orientation to change up the way a
user would use your application.
Then again typography. We use Segoe, and Segoe, it's a default font.
You get it when you download the toolkit. It's a san serif font
meaning it's clean line. There's no curls or embellishments. And it's
created specifically for use on the device screen. So it looks best
both with a light background and a dark background.
And it's not to say that you can only use this font. You can
definitely use -- you can even use a serif font, the curlier more
decorative type of font. I have more examples New York Times and DC
Comics are examples of apps that successfully use serif fonts. It's
just more thinking about what makes sense for your app and just not
using it in a way that will make sense. Something that's not too over
the top, keeping it subtle but still using it as a way to bring that
personality into your app.
And then motion. Again, with all the motion, it's besides being really
interesting, pretty, it's, like I said earlier, used to communicate
something. And most of these are available in the toolkit. But like
turnstile here, it's used to go between large spaces. So jumping from
task to task or app to app. Continuum. This is once you're in -you're in an area like e-mail and you're drilling down. So then you
drill down to the list. And then are the animations actually playing
or are they not? They're not playing. They're supposed to play. I'm
sorry about that.
You want me to switch back to the PowerPoint? Hold on.
a video. There's some motion on these slides.
We did to see
>>: Just switch to PowerPoint down on the bottom ->> Darlene Wong:
I have it here.
>>: Just pick the zoom.
>> Darlene Wong: Here we go. Resume slide show.
out? It's not on the right slide.
No.
How do I exit
>>: I think resume ->>: You can right click the slide you want and then start ->> Darlene Wong: There we go. It's turnstile going into apps.
Continuum, drilling in, like an e-mail drilling into the actual e-mail.
Swivel. This is kind of more transient. So where you just need to
tell the user something quickly and then leave. And then a slide.
This is mostly used in wizard-type scenarios just to get from screen to
screen.
And then, of course, there's always custom animations. And here this
shows some custom animation. I think it's best to try to get some help
from someone who is experienced with motion design with -- when
creating custom motion. But it is possible. And just again thinking
about what makes sense for your app, what would be something that would
enhance the users' experience while they're using your app. And still
concentrate mainly on the content.
I can argue, these are icons, these are just really small set. We've
got hundreds of metaphors that we've created. And these are all icons
that are associated with some kind of action. They all mean something
and say something to the user. Imagery and photos, definitely it's
part of the Swiss style of design to use photos over images or over
drawings and illustrations. So definitely photos really bring a sense
of life and a sense of space here in the start screen really makes you
feel like you're starting off in a golf game.
And just the only thing to think about, though, too, as you uses
photography is just to remember that it's used in a way that enhances.
So like this one, the people are here on the right. And it leaves this
nice kind of dark open space so that the text is still readable.
So that's why this works, right? You've got this nice big image, which
is interesting to the user. But it doesn't block them from what
they're trying to, the menu that they're trying to use.
And then panoramas in pivots. So panoramas, with this we kind of
recommend that there's no more than three to five panels on this
panorama. Just thinking about -- this is really more a place for
people to navigate. I guess you could think of it like a magazine
cover, right? So usually there's a really big picture in the
background and each of the panels kind of represent that little blur,
that little tidbit that teases you into the app. It just tries to get
you interested just enough without telling you everything.
And then you would then dive in for more. So panoramas should only be
used in portrait view. And you can see how we just try to minimize all
the distraction. So like the system tray at the top's gone. The app
bar's minimized. And these are just more examples of other apps and
how they use panos.
And then pivots, which is very similar and just to give you an idea of
the difference, if a panorama is like the magazine cover, I sort of
think of pivots as the table of contents. It's much more about the
content.
And about the task, what you're trying to do with this app. With
pivots, you know, maybe no more than seven. Just really think about
the navigation and how your user is going to get around your app. And
here it's okay. I mean, the app bar is a lot more visible and stuff
like that. We're not trying to focus the user in on anything specific
here except that they're navigating through your app. And finally
tiles. So tiles are what we feel really differentiate us, the look of
our phone from other phones.
It's very unique to Windows Phone. There's a lot of functionality that
can go behind the tile. So there's live tiles. And with your apps you
can use a live tile to your advantage to surface things that you think
the user might need to know.
So, for example, if you -- I'm sure you've seen this apps, but like
news apps might surface the latest headline. A weather app might show
the temperature for a certain location. Maybe a shopping app could
show the latest sales. It's really up to you what you want to surface
to the user.
And it can be really customizable, too. I mean, you can really bring
it to life with your logo. If you want it to be customizable to the
user's theme, there are ways to do that. So that's basically
everything I wanted to tell you about the story of wave finding, how
the design principles and kind of going over some of the design
language.
But just as a little extra, I thought maybe it would be helpful to go
over some app examples, some real apps that we feel are designed well.
We could maybe talk about why we think that they're designed well and
point out what they do.
So here we have Amazon Kindle. Just curious, what do you guys think
like what of this UI do you think is Metro? It's got the grid, right?
It's got the list. And logo right up in the corner.
>>: Seems pretty Metro.
>> Darlene Wong: It is. But at the same time it's very Amazon. It's
really got their personality in there and it's the use of this image
here. It's a really recognizable image in the background here for
Kindle, right?
But it's not taking up the entire screen. It's kind of in the
background. It's kind of offcentered. But you know that it's there.
And it's just a really simple UI. It's just book covers as the way to
navigate.
It's a good balance, I think, of both Metro design and of Amazon's
personality.
And here's the example I was telling you earlier about DC Comics and
their use of the serif font. So their logo is this very recognizable
font. They've used it here again in the titles, which is good. But,
again, it's not gratuitous. They've only used it here, down here in
this part of the list they use Segoe. And everything's just very clean
and simple. The logo is small. And it feels very appropriate for the
type of app that it is.
With every note here, again, they're starting to go a little off, I
think, from exactly what is Metro. So they've got this really bold
start or splash screen, where it's very -- it's very obvious. This is
Ever Note it's their logo, it's their sign-in. But when you go in,
going from this really loud splash screen, they go to a really small
logo here and then everything under here is basically lists and stuff.
But they've customized their buttons. They've customized the color in
their list. They've done a few things a little different.
But it really says Ever Note, the color is very recognizable on that.
So it's still successful. It still works. With ESPN, it's basically
pivot. But there's a couple of small things that really differentiate
this and make it specifically ESPN.
One is the ticker down at the bottom here, which is obviously that's
not something that we do with the phone UI. But it's something they
added in, because it made sense for them.
And then also the design of the score boxes, where there's an outline
around it. And I know we've said a lot of times strip out all the
things that you don't need. But in this case this did feel right.
This did feel like it was something that was needed. In the New York
Times, this is the other example of a serif font. It works here. I
think it's a really simple layout for the newspaper. It looks like a
very simplified version of their website. Right?
All of their text is a serif font. But it feels appropriate for a
newspaper. They've got their breaking news up here at the top and the
use of their logo as the pano headline.
And then final example is the Bank of America app. And then, again, I
think this is my favorite just because it kind of really goes off of
the Metro design principles, as we stated earlier. Like there's the
use of gradient here, and none of these list styles are really Metro
list styles. But what's nice about it is that you still feel like
there's some hint of Metro here. It's still clean. It's still really
simple and pared down but it's a bank app and it's okay to be what they
are, which is they have to show you -- they have a lot of information
to show. And so they're going to surface it to you.
So I guess if there's any message that you take away from this whole
talk is that the Metro design principles are really just a set of
guidelines. And it's something that you think about as you're
developing. It's definitely something that you try to stick close to.
But it's not hard and fast. And it's really up for your interpretation
how it's best for your app to be designed.
So I hope this was really helpful for you and thank you for letting me
present to you. [applause].
>>: Do we do any questions?
>> Darlene Wong: I can do a few.
>> Arjmand Samuel: Any questions?
[inaudible].
>> Darlene Wong:
Do you guys have any questions?
No, I think we can do them after.
>> Arjmand Samuel: Okay. Let's stop the presentation. We'll stop at this point.