>> Arjmond Samuel: Hi, everybody. Tonight we have -- we'll talk about the great user
experience that what we can do with Windows Mobile.
As we know, a great user experience. This is one of the prerequisites for downloads and
application usage. And tonight we have Corrina Black. Corrina Black, she's a user experience
design lead in the Windows Mobile design group. And she will tell us all about the user
experience we can do with Mango.
Without further ado, Corrina?
>> Corrina Black: Thank you. Yay. So before I get started, you guys are all -- is everybody
here like developers? I know you guys are. Any designers? How many of you use Expression
Blend? Everybody. How many of you guys are experts? One. Awesome.
So I'm going to be talking about -- I mean, I actually have 11 best practices, user experience best
practices that I'm going to be talking about today.
And they're going to be very specific. I'm not going to go into the Metro design principles or the
Metro design language in depth. I will talk a little bit about it. There are several presentations
that you guys can check out. Some were done at -- I think there was one done at Build by Brian
Agnetta that goes into the Metro design principles and the Metro design language. And so that's
kind of a good reference that you guys might want to check out, because I'm going to just kind of
breeze through that and really get to these best practices.
But you're going to -- again, it's definitely useful information, so be sure and check it out.
And with that, let's go ahead and get started and talk about these user experience best practices.
Again, I'm going to talk about 11. I said 10. But it's always good to add more, and I have a little
bit more time. I think I have 90 minutes.
So, first of all, I'm going to start out with a little bit of background and context, just to kind of set
the stage. So I'm going to show an example of an application that's not necessarily well
designed. It has a lot of really great functionality, but there are some things that this particular
developer might want to circle back on to make the experience really resonate with users,
increase downloads, increased user satisfaction.
Then I'm going to talk at a very high level about what makes for a well-designed user experience
for phone applications, or just experiences in general. Again, to set context, provide that
background information before we dive into these 11 best practices.
When I talk about the best practices, I'm going to work with a real application in a state where
it's not necessarily well designed. We're going to apply these best practices and make it well
designed in the end. And I am going to work primarily in Blend. So for those of you who aren't
experts, I think it might be interesting to learn a little bit more about Blend, let alone the user
experience best practices.
So background and context. So I'm going to show you, again, an example of an application not
necessarily well designed. It's called Meal Nirvana, is the developer of this application here.
All right. I'm good.
He actually did give us permission to use his application to kind of dig into user experience best
practices. We're working with him to make it a better experience. So I haven't actually met him.
Arturo, my coworker, my colleague has, so that's why I wanted to ask.
It has a lot of -- this particular application, again, Meal Nirvana, what it does is allow users to
pull this application out on the go, uses GPS to identify their current location, and it finds
restaurants near their current location that meet certain criteria that meet their particular needs
and desires.
It also allows users to calculate their restaurant expenditures. For somebody like me, that's really
valuable. As well as calculate tips. So a lot of really great functionality.
Again, I'm not picking on this application. Many phone applications are not necessarily well
designed. But let's go ahead and take a look at some examples of issues that make an experience
not necessarily well designed.
So I'm going to show this particular experience in Expression Design. That's what we're looking
at here. It's just easier to drill into these issues for me. So let's start with the application tile.
That's what we're seeing here. And the -- this is -- actually, it's start page tile. Excuse me. This
is the application icon for Meal Nirvana start page tile. And if you can see it well enough, it
actually does speak to great restaurant experiences. The problem is it's a little -- like the color
scheme is a little -- it's really hard to distinguish the various elements in this image unless you're
looking at it up close.
Another problem is Meal Nirvana, the text for this application, you can't really read it. And you
contrast that with these other application tiles, Twitter, Maps, my Outlook e-mail, Facebook, you
can clearly see what the application is and you can clearly see what the icon is. It's instantly
recognizable.
This can be improved to make it a little bit more instantly recognizable. And more in line with
the Metro design language, which these other application tiles or start page tiles adhere to.
So just one issue that I want to call attention to.
Another issue -- let me zoom out a little bit more. So we go from this application, the start page
tile, or this application icon, press on it. When you load the application, you'll see that this right
here is the loading splash screen. Again, a really great image.
But the overall aesthetic of that particular loading image and the application tile, they're just
really not jibing well together. It's not really a cohesive visual experience aesthetically. It's just
not working -- it's not working well.
And if we look at the opening page in Meal Nirvana, you'll see that it even gets worse. Overall,
it's just not aesthetically holding together.
So a couple more things. I'm not going to really dwell on this, but let's just talk about a couple
more things. So this page, again, this is the opening page for Meal Nirvana, the font that you're
seeing at the top, the panorama header is the Windows Segoe font that you get by default when
you use our controls or the project templates that we have available in Visual Studio or Blend. A
really nice font.
The body, the content in this application is using Comic Sans, not necessarily a nice font. Not
something that we would recommend. And it really doesn't work well with the font that you get
by default. Again, aesthetically, it's not holding together very well.
All right. A couple more things. So if we -- I'll zoom in a little bit here. These are our search
results, our restaurant search results that we're looking at in the middle panel. A lot of really
great information, what you need as a user. The problem that I want to call attention to is there's
no visual hierarchy in the information displayed here.
You could have, for instance, a larger font for Crooked Spoon, the restaurant name. And it
might -- it'll actually make things pop a little bit more for users. It will look a little bit more
visually interesting, just a better experience. You'll be able to instantly identify, okay, that's a
restaurant. You'll be able to see the various items in this list box a little bit more clearly.
Okay. One more thing. The alignment of information in this panel is ever so slightly
misaligned. If you look at Results Provided By Yelp, it's not aligning left with the image.
Something that seems really minor, but alignment actually, if the alignment is not well thought
out and planned and consistent and appropriate in an experience, aligning to a grid, it can
actually harm the overall aesthetic as well as the usability of your experiences. And we'll dig
into that more in a moment.
All right. I'll stop talking about this, and let's briefly discuss what makes for a well-designed
phone application.
Well-designed phone applications are just experiences in general, are useful, usable, and
desirable. Again, this is very high-level information. With respect to useful, these types of
experiences, applications for Windows Phone, they're going to solve a real user problem. In the
case of Meal Nirvana, it is solving a real user problem.
Imagine being out with your friends, maybe in an area that you're not familiar with and you
decide that you want to go to a restaurant. Wouldn't it be great to be able to pull out Meal
Nirvana and have it locate where you currently are and recommend restaurants near your current
location? Great functionality, right? Really useful.
An application, on the other hand, that makes farting noises, although fun in elevators, not
necessarily useful.
So to help drive this point home a little bit more, I'm going to show an experience, not an
application, but an experience nonetheless that's the opposite of useful.
This image here is a car. Me as a user of this car, I'm not going to be very happy, because I want
to go across the bridge or I want to drive to work, and somebody stole my tires, I'm not going to
be able to drive to work. Clearly it's not solving a problem. In fact, it's causing more of a
problem than it's solving by messing up your parking lot or your driveway. Not a great user
experience, right?
So, next, usable. Usable experiences with respect to phone applications, applications in general,
they load quickly, they crash rarely, and they're very performant. They're also very easy to
figure out. The flow is logical, it's natural, it's intuitive, and you don't need a manual to figure
out how to interact with these experiences.
The content in these experiences is also appropriate for the users and the tasks that they're going
to complete in these applications.
Again, an image, not an application. But an image to convey the opposite of usable. Actually, I
like this teapot. I think it looks quite nice. The problem is, is like you look at it as a user and,
you know, how do you pour tea out of it, right? If I hold on to the handle I'm probably going to
burn myself, do I grab around the metal edges of this teapot? It's metal. If there's hot tea in
there, I'm probably going to burn myself. I need a manual to figure out how to use this teapot. It
may look great, but it's not very usable, not a great experience.
So the last thing I want to talk about, again, high-level qualities of a great user experience are the
desirable qualities of an application experience. These are those qualities that really take your
experiences to the next level. They draw users in. These experiences might offer something
kind of new and novel.
I was just at -- when was I at the airport? This weekend. And I saw this guy, he had on his
phone his ticket for his -- his plane ticket, right? And the lady at the counter scanned it on his
phone. I totally wanted that. Like it's new, it's novel, it's really useful, it's interesting. Totally
cool functionality. I find it really highly desirable.
Desirable applications, when it comes to Windows Phone or just phone application in general,
are also going to fully take advantage of the hardware, for instance, GPS, the accelerometer, just
to give you a couple of examples, and specifically with respect to Windows Phone, they're going
to fully embrace the Metro design language and feel an overall part of the Windows Phone 7
application, Windows Phone application ecosystem.
One last image, again, the opposite of what we're talking about and not an application. Me, let's
imagine I'm a home buyer, this particular home is not something I'm going to find desirable at
all. Don't like the overall aesthetic, it's really messy.
If I lived in the neighborhood where this home was, because you can kind of see in the
background there's really a nice home in the background, I'd be a really unhappy neighbor
having this in my neighborhood because it's going to bring down the overall -- it's going to bring
down the quality of the neighborhood or the perceived quality of the neighborhood, right? Not
really desirable.
All right. Just a few fun images to kind of help convey these points. But let's dive right into the
11 user experience best practices now.
Again, I'm going to use a real application or an application in a not so well designed state, apply
many of these best practices to make it well designed in the end. Most of the work that I'm going
to do after discussing each best practice is going to be done in Expression Blend, a really great
tool, so it should be really interesting.
But let's first just take a look at the application that we're going to be working with.
So what it is is a weather application. It's called Weather Watch and it uses -- we'll imagine that
it uses, we'll just pretend, because I don't actually have it hooked up -- imagine that it uses GPS
and it will present like a five-day weather forecast as well as alerts for your current location and
images for your current location. So let's take a look a little bit deeper at what we have here.
So, first of all, this is the start page tile icon. Doesn't necessarily speak to weather. Clearly a
problem. The application icon as well doesn't speak to weather. Something we're going to want
to fix. The splash screen, although nice, that's the splash screen you get when you use our
project templates, as well as those application and tile icons; you're going to want to change
them. I haven't done that yet.
So this is the experience. This is a panorama control that we're using here from the topmost
experience of this application. This is the five-day weather forecast. You know, it's nice, it's
meaningful, it's giving me the information that I want, but it's a little weak visually. It's really
not embracing topography to the extent that it could.
These are the alerts. Useful information. The problem is is you're not seeing a lot of information
until you drill into a particular alert. It could be a little bit better. No page transitions. It's not
really exciting. Not really in line with like some of the Metro -- the Windows Phone native
applications or many of the third-party applications, something we might want to consider fixing.
And the last thing, again, it provides images of your current location.
Again, you can drill into the details for that image and kind of see a larger view of that image.
All right. So that's our application, and again we're going to apply these best practices to this
application to make it a better experience in the end.
All right. First best practice. Embrace topography. Can you guys see that? Is the red working?
All right. Because I have a version in yellow if I need it.
All right. So embrace topography and use font weight and size to convey hierarchy in your
experiences. [inaudible] to the Metro design language, native applications in general is a
celebration of topography. This is one of our core principles. We have five principles, Metro
principles.
Working hand in hand with that are the principles of authentically digital and content, not
chrome.
Many phone application expenses are just application experiences in general. They're presenting
textual information. Why unnecessarily decorate that textual information with gradients and
chrome and kind of just adornments that are really not very useful when it is oftentimes possible
to really embrace topography and use it to its fullest extent to make the experience beautiful and
more meaningful as well as more usable.
So let's go into Expression Blend and take a look at how we can embrace topography more in our
current Weather Watch application experience.
All right. So most people are familiar with Blend. You guys have all seen it. I don't need to go
into details about Blend, which is good, because we can move a little bit faster. Hopefully
there's more pizza at the end.
So this is the five-day weather forecast for the weather application. Again, it's a panorama
control. We're looking at the objects and timeline tool window. First panorama item, five-day
weather forecast. Next panorama item are alerts details. These are the two panels that we're
going to work on to embrace topography a bit more like you saw in the slide deck.
And to move quicker, I'm going to utilize an item template that I've created previously, and we'll
drill into the details of that item template a little bit more later.
So what I'm going to do, let's start with our five-day weather forecast. All of the information is
presented in a list box. I know you guys are all familiar with that. I'm going to right click on my
list box and I'm going to go to edit, additional templates, edit the generated item template, and
again I'm going to apply a resource that I've created previously. I'm going to use this -- right
now I'm currently using this local weather bad item template. Great name. I'm going to use this
local weather item template.
And instantly I'm embracing topography like you saw in the slide deck a heck of a lot more. I'm
presenting the same information. It's very clear to the user. It's beautiful. Very clear to the user
that today it's snowy. Not really. Or actually maybe it is. This is actually -- oh, no. This is -this is -- this is sample data. Sorry. Feels like it could be snowy out there.
Then you can also see like very in your face, very clear that tomorrow it's going to be overcast,
cloudy, clear, et cetera, et cetera. All of that important information is clearly conveyed and it's
beautiful. I'm celebrating topography. My experience is feeling more in line with the overall
aesthetic of our native applications.
So let's go ahead and do the same thing to our alerts list. Let's embrace topography more than
we are currently.
So, again, I'm going to apply an item template that I've created previously, right clicking on the
item, edit, additional templates. I'm going to select the item template, and I'm going to apply my
previously created alert item template.
And instantly we're seeing more information. It's more usable. The information is more
meaningful. And it's looking better. I'm going to do a little bit more. I'm actually going to
place -- I'm going to change the items panel from my list box to a wrap panel, so we see two
columns of information. More information and more beautiful at the same time.
So I'll do that quickly. Again, I've created this item template previously, so I'm going to right
click, edit, additional templates. I'm going to go to my items panel, apply resource, apply my
item's panel template. Now I'm utilizing two columns of information, more information
displayed. And it's more beautiful, again more meaningful as well.
All right. So the next thing I want to talk about is the best practice of using a grid system to
guide the layout of your interface elements. This grid that we're seeing here is the grid that we
use on the Windows Phone team to guide layout of our native application experiences. And we
have made this available on blogs for you guys to utilize as well.
So let's talk a little bit more about the principles. We've talked about three already. Again, there
are five Metro design principles. We've talked about authentically digital, content not chrome,
and a celebration of -- the importance of celebrating topography in your experiences.
The next one that I want to talk about that has to do with this grid that we're seeing here is clean,
light, open, and fast. This grid can help you organize your information for succinctly and chunk
it in more meaningful chunks.
It can also make it easier to take advantage of negative space in your interfaces. And one of the
benefits of taking advantage of negative space is users' eyes are going to be drawn to the
information on the screen that's probably most important that they pay attention to. So it can be
more usable as well as more aesthetically pleasing.
So let's go into Expression Blend and bring up this grid and align the information that we have in
our weather application to make it more aesthetically pleasing.
So I have this grid image. Again, this is available on blogs. It's simply a PNG. And Jeff Wilcox
has actually created something that you guys can use you while you're debugging your
applications, I'm not going to show that. Super cool.
>>: What's it called?
>> Corrina Black: I don't know.
>>: Metro Grid Helper.
>> Corrina Black: What's it called? Metro grid?
>>: Helper.
>> Corrina Black: Helper. It's really useful. I actually have it in this project, I'm just not going
to go into Visual Studio if I don't have to. Let's focus on design, and Blend is great for design.
All right. So my grid is already in my project. I'm just going to turn it on. Again, I've already
added it. You can download it off these -- Arturo Toledo's blog, and I'll provide links later.
I'm going to turn it on. I'm going to duplicate it to make it a bit brighter.
So here's our grid. And let's go to our weather information. Right away -- hopefully you guys
can see it. I can see it on my screen -- you'll notice that the alignment of the information at left is
not aligning nicely with the grid. And you kind of also see the information's just not chunked
nicely together. It kind all -- it kind of seems kind of random and haphazard in terms of how it's
laid out.
We're going to use this grid to -- as a great reference to help align things better and chunk things
a little bit better.
So I'm going to go into the item template that we applied just a moment ago, and I'm going to do
a lot of tweaking to that item template. You'll probably want do this yourself. You do it once
and you make the experience like top notch and you're done, you know, for that particular item
or that particular panorama panel, for instance.
So it may seem like I'm doing a lot of finessing. You're going to want to do the same thing.
Again, you do it once, and you're done.
So let's go ahead and go into the items panel and start tweaking things to align better to our grid.
Edit, additional templates. I'm going to go into the current one. Edit current. So this is the item
template, and I have some behaviors in here that we're not going to really pay attention to. I'll
talk a little bit about what you're seeing before I start tweaking things.
So this StackPanel down at the bottom contains the high and the low temperature, series of text
blocks. This StackPanel contains the high and the low information as well as today's day. Does
that make sense? This border is the vertical line that you see beside the day of the week as well
as the high and the low temperature.
And then this main StackPanel which kind of contains everything, if I collapse it, actually it's not
containing everything, is it. So this StackPanel at the top anyway contains my weather
description information as we're seeing here.
So, again, I'm going to use this grid to help me align things more succinctly and group things
much better.
So let's go ahead and start with -- oh, here's the outermost StackPanel right here. So if I collapse
that, turn that on and off, that's the thing that contains both the weather description and the high
and the low temperature and the day of the week.
All right. So first I'm going to fix the alignment at the left of the grid. I'm just going to make it
six. Actually, let's try 12. Again, I'm doing tweaking kind of manually to get the alignment to
look like I like.
You'll want to do this as well. You do it to one item template; it applies to every item in your list
box.
So the next thing I want to do is -- so I have the alignment at left looking good. I want to do -- I
think what I want to do is I want to align the top of the ascenders on my weather description
information with one of the rows in my grid here. So this first one looks like it's aligning.
Actually, they all look like they're aligning fairly well. Let's just move it up a little tiny bit. I'm
going to give it a negative 1 so that these ascenders that we're seeing align with the top.
The next thing I'm going to do is I'm going to grab the day of the week and the high and the low
temperature information, and I'm going to move it a little bit closer to the weather description
information that it's associated with.
So let's go ahead and give it a negative 12 margin. Grabbing the wrong one. Let's try that again.
Negative 12. That's the wrong one. All right. Bear with me here. I wanted to show you how to
do like editing of the item template. I actually have another item template if I can't get this to
work perfectly that I can apply.
Bear with me. All right. All right. So let's go ahead and -- I'm going to move the border up a
bit. That makes that vertical line. I'm also going to give my StackPanel a bit of padding between
that vertical line, the StackPanel that contains my day of the week and my high and low
temperature. I'm going to move it, so a little bit more padding between it and that border. So I'm
going to make it a negative 200 instead of negative 12. And let's try one more time.
Nothing's changing. All right. Let's try this. Let's do -- let's go like this. 24. Whoops. Let's try
14. All right. Heading in the right direction. 18. Again, you're going to want do this. You're
going to want to explore, bring this grid into your interface, make sure things are aligning nicely.
It will probably be an experience similar to what you're seeing here.
So next I'm going to move my day of the week and high and low temperature information up. I
like the padding between the vertical line and that information.
I'm going to give it a negative 12. I tried that and that didn't work. So let's select our text block
and move it up. Okay. That's looking better. All right.
So it's kind of -- this information is kind of nicely aligning with this row, it's kind of centering on
this row here. I'm kind of liking how things look. I'll do a little bit more spacing out of
information. Let's see. Actually, I think I'm going to leave it. Let's do that. All right. A little
bit more spaces out of information. It's looking better.
Let's play with the bottom margin to move each chunk of information, each item, in my list box
so there's a little bit more space between each item. As you can see, it's a little bit too tight here
between this overcast and this cloudy group of information. So a little bit much. Let's try that
again. 60 is looking pretty good. Let's try 58. All right. 56. Okay. We're getting closer.
So things are spaced out quite a bit more nicely. I have most items aligning nicely to the grid.
It's not absolutely perfect. I'm just going to go ahead -- I'll apply the data template where it is
perfect here in a moment, but I think you guys get the idea.
Again, you're going to want to go into your item template, bring up this grid and do a lot of
alignment of your information, modifying the properties for top margin, right margin, to get
things to align nicely to the grid.
Let's go ahead and step out of the item template. I'm going to use the bread crumbs that you see
at the top here to step out of this particular item template. And let's go into our alerts list and do
the same thing, and this I think will work a little bit more smoothly.
So I'm going to edit current. This is the information that makes up my alert list, and first thing I
want to do is take this alert title information and I'm going to set the margin at 0 -- it was
negative 13 for some reason -- so that everything's aligning nicely at left.
The next thing I'm going to do is give each item in this template a right margin. Actually, let's
try that again. Let's go to the topmost element in the item template. I'm going to give it a little
bit of spacing on the left so things align a little bit better. Let's try that again. Let's set the width
on this to 188. There we go. Getting better. Again, I'm just going to do some finessing until I
get things looking closer to the way that I want them to look.
All right. So not perfect, but I think, again, you guys get the idea.
One last thing, I'm going to change the margin between the alert title and the alert details
information so it's a little tighter so the information's chunked a little bit better.
I'm going to give it a negative 2 margin. A little bit more. And so that's looking good. A little
bit more tweaking. I'm moving the items, the alert titles so they align with the baseline of this
grid here. That's the thing that I'm aiming for, so it's getting close.
Let's set the bottom margin to adjust the subsequent items so they align also with the baseline of
a row.
All right. So we have things looking pretty close to the way we want them.
So I'll zoom out, step back out, and let's just take a look at what we have.
So things are aligning better to the grid. Things are grouped together, they feel like units of
information all chunked together a little bit more nicely. This is our weather description
information, our alerts information. The same applies here. Again, aligned a little bit more
nicely to the grid. Simply by using this grid, this PNG, bringing it into my project in Blend or
Visual Studio. I'm doing a bit of tweaking on the item template, and I'm getting a much better
experience.
Let me quickly -- just because I don't like what I've done here, I'm just going to apply -- you saw
how it's done, now I'm going to apply the resource that I created that's actually looking as I
intended things to look. Let's try that one more time. I picked the wrong one.
So I'm selecting my item template. I'm going to apply this alerts B item template. All right.
That's much better. So I'm going to do the same thing with the weather information. I'm going
to select this local weather B item template.
Okay. So things now, as you can see, are chunked much better. I could spend a lot more time
and get it to look like this. And you'll probably want to do this same thing in your application
experiences.
So let's turn -- delete these grids and take a look at what we have. So weather information and
our alerts information looking a lot better chunked. The alignment is great. It just feels better
aesthetically, right?
Okay. So let's talk a little bit more about grids before we move on. I've spent a lot of time on
that, but this is really important.
All right. So what we're seeing here is a big teller interface, you know those numbers, you
know, you go to get cash out of a cash machine? The bank teller interface on the left, everything
is perfectly aligned to a grid. The bank teller interface on the right, just two buttons are slightly
askew.
A man named Nome Tratinski [phonetic] from Ben-Gurion University ran users through a series
of tasks on both of these interfaces. The interface at left tested far better than the interface at
right. Something as simple as slight misalignment in an application interface or an experience
can hurt the usability of that experience.
So use of a grid cannot only improve the overall aesthetic of your applications experiences, but it
can also make them more usable. So it really is important to pay attention to.
All right. So the next principle -- the next best practice that has to do with the fifth principle of
alive and in motion is use animations, transitions, and effects to guide and delight your users.
These can really enhance the overall user experience. It can make it feel snappy, a lot more
exciting, as many of you I'm sure have experienced in Windows Phone. It can also improve the
overall usability of an experience.
So we're going to apply page transitions like you're seeing here using the Windows Phone
toolkit. We're also going to use this tilt effect that you're seeing here, again in the Windows
Phone toolkit, to help users understand that when they press on something and it tilts, they're
going to navigate to a new page. It's going to make it a little bit more usable, a little bit more
predictable for users.
Another thing that I'm going to do is I'm going to add an opening animation, custom animation to
my experience. I'm going to show you how to create a custom animation. And I'm going to use
some easing effects to make it a little bit more snappy, so that's what I'm going to do next, all in
Expression Blend.
So all right. So, again, I'm going to use the page transition and that tilt effect that you saw,
utilizing animations and transitions from the Windows Phone toolkit. How many of you -- I'm
sure everybody in the room -- have used the Windows Phone toolkit? Jeff? No way.
So, as you know, you need to download and install the toolkit. Let's start by adding page
transitions. And I'll talk about what you would need do. I've already downloaded and installed
the Windows Phone toolkit. After doing that, just for those of you who are calling in and
listening or watching this later, I would need to add a reference to the toolkit in my project.
I already had a reference. I was using the wrap panel. That's one of the really cool controls that
is a part of the Windows Phone toolkit. There are a whole plethora of other really valuable and
useful controls in there as well, so you'll definitely want to check it out.
Anyway, I already have my reference to the toolkit in here. So next thing that I'm going to want
to do to take advantage of page transitions is I'm going to want to change the root frame of my
application from the phone application frame to the transition frame that you'll find in the toolkit.
So after adding a reference, what I'm going to need to do -- and I'll just quickly walk through
this. I'm sure most of you have seen it, but let's just do it, because it's fun, right? So I would
need to, and I haven't commented out here, so I have -- I'm changing the root frame by
uncommenting it to this transition frame. Currently or previously it was this phone application
frame. I need to use the transition frame from the toolkit, so I just simply commented out the old
frame and uncommented the transition frame. So one of the first steps that I need to do.
The next thing that I'm going to need to do is I'm going to need to add a reference to the name
space in my XAML. So I'm going to split view so that I can see both the design surface and the
XAML. Let me move this up so we can see a little bit more of the XAML.
I'm going to go over to my objects and timeline tool window and select the top nodes that I can
navigate to the top of the XAML information.
So, again, I would need to add a reference to the toolkit name space. I already have that in here
because I was using the wrap panel. I don't have that on all pages in my application, so I'm
simply going to copy that reference to the name space and paste that in the other two pages that I
have for the image details and the alert information details.
Again, I'm going to split view. And I will just paste that reference into the top of the XAML for
each of these pages. So let's go to the alert details page, go to split view, and I'm going to do the
same thing. I'll go ahead and save everything.
So the next thing that you need to do is you need to add the XAML for the page that will enable
those page transitions. You can pull the XAML out of the toolkit examples. I actually created
resources, so I'm simply going to reference those resources for the page transitions, and this is
something that I would highly recommend you do, because it makes it a lot easier to leverage
those page transitions.
But let's take a look at my resource dictionary information just so we can get an idea of what the
page transitions XAML looks like.
So I have it down at the bottom here. This right here is one of the page styles that I created.
Actually, let me highlight the whole thing. I'm calling the panel slide page style. It's style for
phone application page.
There are transitions for navigating into a page, there are transitions for navigating out of a page,
and that's what I'm highlighting here. Transition out and in. There's transition out and in XAML
for backward button presses. I'm highlighting that here. As well as forward navigation. Maybe
you click on an item or a link and maybe a list box or an item -- you know, a command button in
one of your pages, that would be a forward navigation out of a page or even into a page. And
there are page transitions that you need to specify for those as well.
You'll definitely want to check this out if you haven't. Most of us in the room have. A little bit
more. There are a variety of page transitions that you can take advantage of. I just like quickly
undid the specification that I have here in the XAML, so you can take a look at what's available.
Let's try that one more time.
So there are role transitions, rotate transitions, slide transitions, swivel, turnstile transitions, and
then associated with each of these transitions are modes. So let's undo this. Let's just take a
quick look at what's available.
So there's slide down, fade in, slide down, fade out, a variety of modes that you'll need to specify
as well. Again, I created resources that I can leverage just to make it easier to take advantage of
these page transitions, and I would recommend that you do the same.
So let's go ahead and step out and apply these page transitions.
To do that, we'll start with mainpage.xaml. So I'm going to right click on the top node, the phone
application page, and I'm going to edit template, allow resource, and I'm going to use the panel
slide page style. I'm going to do the same thing for each of my pages here.
In the objects and timeline tool window -- whoops -- I'm going to right click and edit template,
I'm going to apply this resource in my resource dictionary. I'm going to use the slide page style,
do the same thing for my alerts details page, right click, edit template, apply the transition.
All right. I'm going to go ahead and build so we can just take a look at the current state before I
build that opening animation that we're going to do here in a moment.
So hit F5. All right. So we have that again on our alerts information and our images. So I press
on one of those. We see the nice slide transition. Again, a much better experience, more in line
with what you see with our native applications. It's simply as simple as referencing the
animations available in the toolkit.
Real quickly, before we create that opening animation, I'm going to quickly apply that tilt effect
to the list boxes for my alerts information and my image details. To do that I'm just going to go
into the list box and type the XAML that's needed. So toolkit, tilt effect is enabled, and I'll just
set it to true. And I will copy and paste that into the list box for my images.
All right. So I have the tilt effect in place. I'm not going to show it until the very end. Let's go
ahead and build that opening animation that I mentioned.
All right. So to do this I'm going to do this in mainpage.xaml. This is what contains my
panorama. This is where I want that opening animation to live. So in my layout root, I'm going
to lock my panorama so I don't mess with it, because I don't want to play with that. I want to,
again, add this opening animation.
So you can do this in Blend, lock your panorama, so you don't mess with any of the items in
there or accidentally move anything. It's kind of nice functionality. I'm selecting my layout root.
And I'm going to go over to the toolbox, select grid, double click to add it to my layout root
inside of this grid.
So I want to do an animation where weather and watch kind of slide out and kind of reveal that
panorama, this experience that we've been seeing, nicely, it's going to kind of fade out, so it will
be a nice effect.
So inside of this grid I'm going to place a StackPanel. Select StackPanel. Double click to add it
to the grid. In the grid I'm going to add two text blocks. Just double click on the toolbox item
for text block. And I'm going to change the background color for my grid to my custom
background color. And I'm going to have this grid fill all of the available space. I'm going to
right click on the grid. I'm going to say autosize to fill, so it's filling all of the available space.
And then I'm going to select these two text blocks. Actually, I'll select the first text block,
change the name to weather. The next text block, I can double click on the design surface. I'll
call it all caps WATCH.
And I'm going to set the font size for the first one to 120. I'm going to select both of these text
blocks. I don't want the text to wrap. It does by default when you select the control from the
toolbox. I'm going to type a W in a search box in the properties window. Let's try that one more
time. Select those text blocks, we have the WR in a search box. I can see the text wrapping
property. I'm going to set it to no wrap.
Next I'm going to select that second text block, delete my search information, and I'm going to
increase the font size for this information to 80 point.
Next I'm going to center my StackPanel. And I actually -- I think I'm going to change the control
type for that container, the StackPanel, from a StackPanel to a canvas, just to make easier to
position elements. Stack panels make it a little bit more difficult. Canvas allows me to freely
position things.
So I'll right click on the StackPanel and I'm going to say change layout type to that canvas. I like
where it repositioned the information. So I'll go ahead and leave it as is and I'll do a little bit
more finessing. So I think I'm going to have my weather. I'm just going to select that text block,
go on the design surface and move my weather to the position that I want it to appear.
I'll select watch and do the same thing. I think I'll go ahead and position it there. I'd spend more
time finessing the position in an application that I actually intend to deploy, but I think you guys
get the idea.
So the next thing that I'm going to do. I kind of have the basic layout. Now I'm going to do the
animation.
So to add an animation, you go -- again, you're in the objects and timeline tool window. You
click on the plus here. And I'm just going to call it Open. That's the name of my animation.
Then at .5 seconds in on the timeline here, I'm going to add a key frame for this first text block.
I'm going to go to 1 second, I'm going to add another key frame, click on the key frame button.
At this second key frame, I need to move the text to where I want it to appear at the end of the
animation. So I'm going to select my text for weather and move it to how I want it to appear at
the end of the animation. I'll select my first text -- or the watch text block. Create a key frame
again at .5 seconds. I'm going to step into the animation a little bit, not all the way to the end,
where weather finishes its animation. A little bit before that add another key frame, and I'm
going to move watch to where I want it to appear at the end of the animation.
The next thing I'm going to do is select my grid that has that background fill. And, again, I'm
going to add a key frame about where we're seeing. And then I will step out a little past the end
of the weather animation. I'm going to add another key frame. And then I'm going to set the
opacity here to 0.
So let's run our animation and see what we have. Go back to the beginning. Play the animation.
So looking close to what I want. There are these really cool easing effects that you can leverage
in your experiences to make things feel a little bit more alive and fun.
So I'll show you how do that. At the end of the animation for the weather text and the watch
text, I select those key frames at the end of that animation. And you'll see over in the property
window there are these easing functions. I call them easing effects. I can select an easing effect
to take advantage of here. There are a variety that you can choose from. You're going to want to
choose kind of the simplest and the cleanest of the easing effects that are available.
I'm going to choose this circle animation where it kind of starts out slow and then goes fast at the
end for my particular application.
And let's step back to the beginning and take a look at it now.
So it's a little bit more alive, right? With those easing effects, it kind of snaps out at the end.
Just a little bit more fun, a little bit more life in the experience.
Okay. So this, again, is going to be that opening animation, so I need to hook up so that this
animation runs at the beginning, at the beginning of my application loading.
To do that, I'm going to step out of the animation. I'm currently in timeline recording. I'm going
to step out of that by clicking this X, close storyboard. And then what I'm going to do is I'm
going to go into mainpage.xaml.
You can do this in many ways. There are behaviors available to kickoff animations. I'm just
going to do it in the code in the overwritten unnavigated to method. Not necessarily the right
way to do it. I'm really focused on the user experience. You guys are expert at code. You'll do
it the right way.
So in here -- let me save my changes. And my animation's called Open, and I'm just going to
call Begin when I navigate to this page. And let's go ahead and run our application. And we'll
see that we have that nice opening animation. We also have the nice tilt effect and page
transitions.
A much better experience. A lot more alive, more usable, more in line with the native
applications.
All right. So I have to do one thing. I need to change is hit testable to false so that I can actually
interact with the information behind it. I'll run it one more time so we can just take a look at it
again. Because it's fun, right?
Loading. Got to fix that splash screen. Not really working with the overall aesthetic, and we
didn't see my animation. Let's go into the -- I'm just going to try one change here. I'm going to
grab all of these key frames. I'm control clicking to select them all. And I'm just going to drag
them out a little bit. Clearly there's something going on. And we want to see it one more time. I
swear it will work this time. Promise. Better work.
Ta-da. Okay. Still not quite right. I would need do a bit of tweaking, but I think you guys get
the idea.
All right.
>>: Where did you name the animation? Where do you call it Open?
>> Corrina Black: How did I name it? So when I created the animation by clicking on this plus,
so I can create another now. I named it in here. You could also change the name in XAML.
Whatever is most appropriate for you. So I have it called Open. Or you could actually click on
this and then change the name over here. There are a variety of places where you can name your
animation.
All right. So I'll step out of this. And so we took a look at quite a bit of how you can animate
and, you know, like make your experiences a lot more alive and in motion.
Let's go back to the slide deck. I'm going to hide this. Another cool thing about Blend is you
can hide things. They'll still appear when you run your application, but it makes it easy, so easy
to design this stuff behind. So I'm simply going to hide that opening animation.
All right. Okay. So as I mentioned, that opening splash screen doesn't really jibe with the
overall aesthetic. So it's really important that I fix it, that opening splash screen that I have there
is, again, the one that you get by default when you use our project templates. Not ideal for many
reasons.
I'm going to show you a really easy way to create a splash screen that works nicely, you know,
with an experience. I'm just simply going to capture a screen shot using our emulator. There's a
nice screen shot capture functionality. And it will -- it's a very simple solution, but it's going to
work nicely, create kind of a seamless experience.
You might want to spend more time, if it makes sense for your particular scenarios and your
applications, designing, you know, a bit more intricate splash screen experience, maybe
something like what you're seeing here in the slides. This is a golf application, metrolinks. This
is the splash screen. After the application loads the splash screen jibes nicely with the opening
experience. But that's what you'll see.
So you might want to do something more like that. But this is one example of how you can
create a splash screen as well.
I'll go ahead and do it in Blend. And what I'm going to do, before that animation runs, I'm going
to capture a screen shot and use that as my splash screen, again using the emulator.
So I'm running my application again after commenting out that animation, that opening
animation so it doesn't run.
Okay. So to capture a screen shot, I need to run the emulator at a hundred percent. So I'm going
to change it to a hundred percent. Then I click on the double arrows to bring up the additional
tools. There's an -- you guys have all seen this, right, accelerometer? Okay. I'm not going to
talk about it. Cool accelerometer functionality to simulate your accelerometer so you don't have
to run your application constantly to test it. Same with the GPS. And, again, there's the screen
shot functionality.
So you click on the button to capture a screen shot. I'm going to save my screen shot to my
desktop. I'm going to call it 1. It saves it as a PNG. I need a JPEG. So I'll save it as a PNG for
now. I'm going to go ahead and move my emulator back to 75 percent so we can see it on
screen. And then I'm going to go to MS Paint, open that image, and just simply save it as a
JPEG.
So it was called 1.png. Open it, file, save as. I need it to be called -- I know this -splashscreenimage.jpeg. Again save to my desktop. So I've saved it. Then I'm simply going to
go to my desktop and I'm going to drag and drop that splash screen that I've just created into my
project to replace the old splash screen. Move and replace.
And let's go back to Blend. Turn the animation back on and I'm going to hit F5 and we'll take a
look. It's a much better experience. More seamless. It just feels better overall, and one method
that you can use again to create your splash screens. You don't want to use the splash screens
that you get by default with our project templates. You want something custom. So a better
experience.
All right. So next -- where are we with time? We have a half an hour? Is that right? Should I
move faster?
>>: A half an hour.
>> Corrina Black: Half an hour? Okay. I should move faster. All right.
So next -- I'll probably skip over things at the end. I don't want to take the full remaining half an
hour. But the next thing I want to talk about, again you get application and start page tile icons
with our project templates. You're going to want to change those to something more appropriate
for your application experiences. You're going to need to create a custom application and tile
icon no matter what, but don't use the ones that you get by default with our project templates.
I'm going to show you one method that you guys can use to create these, so I'm going to do it in
Expression Design. I believe you guys all have this tool available. And I'm going to use a
photograph and I'm going to trace that photograph. So I'm going to use it as a template to create
an icon in the style that you're seeing on screen here.
A quick and easy way to create icons that really work with the Metro design language and the
other -- the native application start page and application tile icons that we use.
All right. So I'm going to go to, again, Expression Design. I'm going to go ahead and close this
application flow.
So what we're seeing here is I'm going to just -- just for demonstration purposes I'm going to
create a shopping application icon using the shopping bag. You need to find an image that is
appropriate for your particular application concept. It needs to be meaningful. You know, for
shopping, a shopping bag or maybe money or maybe a shopping cart. For weather, you're
probably going to want something like -- potentially you'd want something like clouds and a sun.
I mean, we see that often.
Again, I'm going to create a shopping application icon just for demonstration purposes. But,
again, this is one method that you could use.
So to do it, I am going to select my pen tool. I'm going to use this image, this terrible
photograph that I captured using my camera and simply brought into Expression Design. I'm
going to use this as a template, and I'm going to trace it. So I'll trace all of the edges. I would
spend more time being precise if I were creating an icon that I intended to use in a shipping
application. But I'll move quickly here.
So now I'm going to create the handles. I'm going to click and then press the shift key and drag
to create this curved and straight horizontal like grab handles that we see here. I'll click again to
create the finish point for my handle. I'm going to again click and shift and drag to create a bit of
thickness for my handle.
I'm going to select the -- I hit the A key to bring the direct selection tool up so that I can
manipulate these points a little more precisely, so I'm just going to do a bit of manipulation to
make these handles a little bit thicker.
Select the handle, and I'm going to copy and paste to duplicate it. This will be the second handle
for my bag. Again, I'm going to select the A key or direct selection tool in the toolbox. And I'm
just going to manipulate these points a little bit more to make the handles look a little bit
different. Again, I'd spend more time in a real icon, but let's just do this quickly.
So what I did is I'm going over the properties now and I'm getting rid of the stroke. I just want
the fill. And so now I have my bag, the basics for my bag. And over here I have kind of
templates for the start page icon and the application icon.
I'm going to use those as a reference when I size this icon that I just created, so I'm going to click
and drag over the elements that I've just created to select them all. I'm going to move them,
position them over the top of my little templates here.
And then I'm just going to grab the corner point and shift and kind of drag in to size them
appropriately. And so I think that's about right. I would need to be a little bit more precise,
again, in my final application and tile icons. I'm going to duplicate this bag and again kind of
manipulate the size for my application icon, just kind of eyeing it.
So the next that I would need to do, I kind of have them both positioned appropriately, is -- I'm
going to select the rectangle tool and I'm going to trace the perimeter of this template. I'm going
to set the fill and the line to transparent. Then I'm going to go down here where we see this W
and this H. I'm going to unlink the width and height, and I'm going to set the width and height
manually to 173, about 173. That's the size that's needed for the start page icon.
Then I'm going to select all of those elements that I've just created by clicking and dragging over
the top of them, and then I'm going to right click and say export. And then I'm going to export.
I'm going to manually set the size to 173 by 173. I want it to be a PNG, a transparent PNG. It is.
I'm going to export to my desktop. And we'll just go to the desktop and see the effects.
So, as you can see -- I hope you can see. Probably not. I'm just going to -- let's just add it to our
application so that we can see it. It's not going to be appropriate for a weather application, but -let's see. I think background.png is what I want.
I'm just going to replace the existing background.png image with the one that I've just created.
And let's run our application and take a look at our new tile icon.
Again, not necessarily appropriate for weather application. We'll replace it with something that
is appropriate here in a moment. All right. So what I need to do actually is I need to uninstall.
Whoops. Uninstall and then rerun so that we can see the icon that we've just created.
Okay. I created this start page icon, so I'm going to pin to start so that we can see it. Again, a
transparent PNG. It's picking up the accent color. It looks like a bag.
One method that you might consider when creating Metro -- like icons for your applications that
align with the Metro design language.
I kind of like it for many of the types of icons that I might create, so, again, just something to
consider.
I'm going to quickly replace that icon that we just created with icons that I actually want in my
weather application. I'm using text for my application and tile icons. And text wasn't interesting.
I wanted to show you how to actually create a vector graphic. So now I have what I want, and
we'll take a look at it later.
Okay. So next -- all right. So the next thing, it's important to design with themes in mind and
utilize theme resources. You guys have all used theme resources? You guys all know? Oh, not
a lot of people? Hands? All right.
All right. So theme resources are available. There are theme resources for margins, for font
weights, for font sizes, colors, accent colors, background colors, that you can utilize in your
applications to help you create experiences that kind of align nicely with the native applications.
They're really, really useful.
I'm going to show you how to utilize real quickly the theme resources for colors. Users can
change certain aspects of the phone experience, as we all know. One example is they can change
the background color from a light to a dark theme. They can also change the accent color. Users
like it, you know, when their preferences are respected. So if possible. When it's not, in many
cases you might want to use the theme resources for the system colors so that the application
responds appropriately to the user's customizations.
More times, more often than not, I think, that's probably not appropriate. Maybe you have
branding that you're trying to express in your experiences so you need to hard code all of the
colors.
If you do hard code the colors, you want to make sure that things work when users set different
theme settings. You're going to want to test your application. Blend makes it really kind of
quick and easy to do that -- and I'll show you here in a moment -- to ensure that your application
is still usable.
So let's go ahead and just quickly take a look at kind of both situations in Blend. And I'll move
very quickly, I promise.
All right. So Blend has this devices tab. I'm sure many of you have seen it. It's really great. It
allows you to explore the effects of the various theme changes in this application while you're
designing -- developing your application. I've changed it to the light theme, the light background
color. And clearly I have a problem. I've hard coded most of my colors. I didn't hard code the
background color, so it changed. My panorama title text is white. So I have a usability problem.
It's actually worse if I go into the alert details page. I see absolutely nothing.
Again, if you are hard coding your colors, you're going to want to test. Blend makes it really
easy to test. You can test in my other ways as well.
So I have resources that I've specified in my application for the colors, these colors here. Again,
clearly I'm not buying into all of the resources that I've defined, so I need to do that to fix this
usability problem that we're seeing here. I'll get rid of this search term.
So in my layout root I'm just going to hard code the background color to one of the resources, the
background color resource that I've defined. So I have my custom background color. As soon as
I bind to that, my application is usable again.
I'll do the same thing in mainpage.xaml. I'll select my layout root, go into the color resources,
use the custom background color that I've defined, and my application is usable. Now I've hard
coded all of the colors. One approach that you can take.
Again, you might want to consider leveraging theme resources so that the application responds to
your users' preferences, their specific color settings.
So let's take a look at doing that. I'm just simply going to change my color bindings in my
resource dictionary so they map to theme resources.
To do that I'm going to go into my resources tab. And these are the four colors that I've defined
in my application. I'm going to select -- I'll start with the foreground color. Bring up the color
picker. I'm going to go into the color resources, and I'm going to scroll down until I see phone
foreground color. Soon as I do that we have a problem, but I'm going to -- haven't bound all of
the colors yet.
So I'm going to select my background color and do the same thing. Select phone background
color. I'm just going to do that really quickly for the other two colors that I have here. Again,
select color resources. I have a subtle color defined in my application. I'll pick the phone subtle
color. And then I will add a custom accent color. I'm just going to bind that to the theme
resource accent color.
All right. So now let's go ahead and take a look at the alerts information because I am -- unlock
my alerts or my panorama. Because I'm binding the title for my alerts information to that accent
color now, and let's just take a look at some of the effects of the theme changes. Let's go to the
dark theme. Everything's going to respond appropriately. Let's change the accent color to
magenta. Everything's responding appropriately.
It's kind of a fun experience. Users will enjoy it in many cases. Something to consider in your
expenses. These are available for your use. Yes.
>>: So the custom accent color, where did you define that?
>> Corrina Black: I defined that in this resource dictionary. So the question was the custom
accent color, where did I define that. So I defined it in the resource dictionary.
So I'll bring that up. And it's just a resource dictionary that I've added to my project. This
resourcedictionary.xaml. Let's go back to the devices tab and take a look at the XAML. In here
these are all of my applications resources, and at the top I have defined these solid-color brushes.
I could -- you know, there are many ways to do that. You could just type in the XAML, you
could actually use Blend to create these color resources as well. There are many ways to do it.
And then once you create them, you can bind to theme resources as well.
>>: But it seemed like it would save you time, then, from having all of your elements across all
of your pages and having to go and bind to the theme resources directly, you just bind to these
and then bind those to the ->> Corrina Black: Exactly. So the point was bind -- it's probably beneficial to bind all of your
color definitions to colors specified in a resource dictionary so that they're all defined in one
location so that if you do need to change them, for instance, like we just saw, change them so
they map to theme resources, you could just do it in one location. You don't have to go into each
and every single page and update the colors and do a whole bunch of testing.
So, yeah, it is a much better experience. And I would recommend that. I would recommend
using resource dictionaries as much as you possibly can. I tend to put everything in there.
Okay. So let's go back to mainpage.xaml. I want to call attention to something else just real
quickly. I'm going to run the application. As you can see, the weather details is not bound to the
system accent color. The reason is is I was actually trying to convey more information in that
weather detail information. So it's the colors -- you'll see here in a moment -- of that text is
changing based on the temperature range.
So -- okay, you can't see it because it's really cold here right now. Oh, there we go. So it's a
little bit warmer on Monday, or it's theoretically going to be a little bit warmer. I'll believe it
when I see it. So the color of that text is green.
It just makes it -- it's kind of a glance and go interface. I don't have to like dig into the details. I
can see that, oh, on Monday it's going to be cloudy and probably moderately -- you know, a
moderate temperature. All of the other days this week are going to be cold and rainy and clear,
clear and overcast. So that's why I didn't bind that to the accent color. I just wanted to call
attention to that.
All right. So -- okay. I'm going to have to jump around here because I'm running out of time.
I think this is important. I do want to talk about this really quickly. Two of the primary
application patterns, navigation patterns that are available in our Windows Phone applications or
that you will see in our Windows Phone applications involve panorama and pivot. It's really
important to understand when it's appropriate to use each, kind of the pros and cons of each as
well, so I'm going to talk really quickly about it, starting with panorama.
So we're looking at that golf application again. Panorama provides for kind of an immersive,
expansive, kind of inviting experience. It really is intended to draw users in. Primarily it should
be used at the opening level, the highest level of your application experiences. We highly
recommend that.
Some other things that are important to note. You will notice there isn't a system tray or system
information, status information. You don't see the time, you don't see the battery indicators at
the top here. You will find that we do this by default when you use our project templates as well.
That's what we recommend.
Again, panoramas are these immersive, all-encompassing expansive experiences. They should
really take up all of the experience. And think magazine cover. Really draw the user in. That's
all you should really focus on and see until you go deeper into the experience. It's intended to
tease you in deeper into the application.
You also notice -- or I hope you notice. I'm not going to be able to point to it because it's too
high -- there is this minimized application bar down at the bottom. And panoramas prior to this
latest release, we recommended not using application bars in your panoramas because, again, it
was intended to take up the entire experience, kind of the primary focus.
The reality is people need application bars, so we've -- there is now this minimized application
bar that is available so that you can still optimize for this kind of inviting, all-encompassing
experience but have the application bar commands available if you need them. We recommend
the minimized application bar.
It's also important to note that panoramas are not optimized for landscape orientation. And if
you use our project templates, by default they only -- they're set to portrait orientation. I always
say vertical. Portrait orientation. We highly recommend this. You're just not going to see a lot
of information if you allow users to change the orientation to landscape. So probably not the
best experience.
Okay. A couple of other things. Panorama. We recommend no more than five panorama items
so users don't get lost. Again, it's a magazine cover-type experience. Tease them in deeper into
your application to get to the meat of the content. You probably don't want your users to have to
pan forever to see, you know, all of the information that's available in these experiences.
And, Jeff, you can correct me if I'm wrong, but panoramas are not virtualized.
>>: Correct.
>> Corrina Black: So another thing to consider, if you have a bunch of panorama items, you
know, you're on page 0, page 1, negative 1, 2, and negative 2 are all in memory, so if you have a
bunch of controls and XAML information on those pages, you could run into -- potentially run
into performance problems.
Aside from that, again, just for a better user experience, don't go more than five.
So let's talk a little bit about pivot now. So pivot is this more focused experience. You'll see -- a
good example and usage of pivot you'll find in our Outlook, our Windows Phone Outlook
application. It allows you to kind of scan the different, you know, and kind of group the
different types of information. Like in Outlook, you know, you might want to look at all e-mails,
you might want to look at all unread e-mails, you might want to look at all read e-mails. There's
a variety of ways that you can pivot on the information.
A couple of other things that are important to note. The status bar is on by default here. This is
not that all-encompassing, immersive experience. Pivots can also be used both at the high level,
like you find in Outlook, and deeper within your application experiences. We recommend that
application bar, totally acceptable and appropriate full application bar in pivot experiences.
Pivot also works well at both -- in both portrait and landscaped orientations. You'll notice that
when you use our Outlook application.
Okay. The last two things. No more than seven pivot items. Pivot is virtualized, so you're on
page 0, only 1 and negative 1 are in memory; 2, negative 2, 3, negative 3 are not. So maybe less
performance concerns.
Regardless of that, you probably want a maximum of seven pivot items. You just, again, don't
want your users to get lost in your experiences. Maybe you need to rethink your information
architecture if you think you need more than that to provide for a better user experience. You
want users to be able to quickly find the information that's important. You know, it's a phone
application. They're on the go. They need to get to that stuff that's important right away.
Otherwise, they're probably not going to use your application. Yes?
>>: So a question online: How can one decide if their application needs a panorama or not?
>> Corrina Black: If it needs a panorama. I think like -- that's a really good question. So how
can you decide whether your application needs a panorama or not. Panoramas are beautiful,
right? I mean, we look at this here, you have this beautiful background image. You can have a
background image in pivot as well. But panorama is really optimized for this like beautiful
background image. It has kind of -- the information is nicely spaced out.
Again, it really does feel like a magazine cover. Very inviting. If you kind of want to draw
users in, you want this really beautiful experience and you have information kind of at deeper
levels that you can present to users, you might want to consider using a panorama. You
probably -- if you are going to leverage a panorama, you probably want to have, you know, some
beautiful graphics and a reason to utilize the panorama experience.
Another really great thing about panorama is it kind of has that parallax effect, so it's kind of fun
like when you're navigating the various panes in the panorama control.
So I think it's really -- like if you want to kind of tease users into your application experience,
show kind of a variety of information, it doesn't all have to be kind of the same information with
different pivots on that information.
You know, like we're looking at statistics here. When you get into statistics, you're probably
going to see a pivot with a variety of statistics available. When you get into recent, you're
probably going to look at the recent golf courses that you've been at or visited or may be
interested in visiting with maybe pivot, you know, like a pivot to kind of present that type of
information.
All of this information is not necessarily, you know, like the same type of information. And so
you're kind of teased into these different types of information.
I'm kind of all over the place, but does that answer the question?
>>: Yeah. Could you answer it from the flip side, though?
>> Corrina Black: Sure.
>>: When would you not want to use a panorama? Or have you seen examples of apps that just
said, oh, we have to have a panorama and it was just a bad idea?
>> Corrina Black: I think you probably don't want to use a panorama if you have the same -like one type of information that you're trying to present to users. For instance, in Outlook, it
really doesn't make sense. You're looking at e-mails, the same type of data. You do want a pivot
on that data differently to kind of optimize navigation. But it really doesn't make sense. Like
why would you -- why would you want a magazine cover for Outlook. I think -- that's one way
that I would think about it. Go ahead.
>>: It seems like in a panorama you always have a hint of what's on the next page.
>> Corrina Black: You do.
>>: And a lot of times, you know, that doesn't make sense if you have like, you know, page after
page of just data, and you have this little hint of something else there. It just kind of detracts, at
least that's what I've seen. And I've also wondered about the little minimize bar. Prior to
Mango -- application bar. Prior to Mango, could you even have an application bar?
>> Corrina Black: You could add it. We did not recommend that you add it.
>>: Oh, you could have.
>> Corrina Black: Yeah. You definitely could add it. So I hope I answered the question.
We're totally running out of time, and I have a lot more to go. But I think I'll just quickly -okay. I'll talk about some of these best practices and where you can get more information.
So it's really important that you understand how to use the back button. So in Windows Phone
back does two things: it dismisses transient UI and it takes the user back to the previous page
that they were on. It doesn't navigate them to an entirely new page and it doesn't drastically
change the content on the current page.
It's really important that this is understood in application experiences to provide predictable and
just quality user experiences for users. Really, really important. Peter Torres [phonetic] actually
has a really good blog post on that. I got a lot of the content from him.
Here we have great examples. Like look at our Windows Phone examples. For instance, the
People Hub. Great example of using the back button. I'm not going to go into details. You guys
can check out the slide deck later so I can move quickly. I swear I can do this in five minutes.
I do want to talk real quickly about in Mango you can modify the back stack. So I do want to
talk about that really quickly. And with respect to modifying the back stack, you do not want to
add new things to the back stack, as I just mentioned, absolutely not. It might make sense to
remove things from the back stack. Let's just take a look at one example here.
Also in Mango you can create deep link tiles. Let's imagine that we have a shopping application.
And the creator of this application has a wish list. Somebody -- a user can add items to this wish
list to encourage purchasing from this particular shopping site. This wish list would be really
valuable to add to the start page, right?
So let's imagine that that functionality is there. User clicks on this deep link tile to the wish list.
And they click on -- they finally decide to make a purchase, they click on buy. Really great for
the creator of this application. Then they would go to the billing information, they would go to
the -- you know, fill that in, click next, go to the credit card information, fill that in, click next.
They're finished. They've made their purchase.
It might provide for a really good user experience to go straight back to the wish list when the
user clicks back as opposed to presenting credit card and then billing information. This
information is dead. I mean, it's really kind of useless for users. No need to show it. To provide
for a better experience, it's appropriate in many scenarios to remove items from the back stack.
So real quickly I wanted to mention that, and Peter Torres has a really good blog post on that, a
couple of other examples in here.
You don't want transient UI to interfere with back button presses, and I will show you in our -- I
was going to fix this in our application, but I'll just show you. So whenever I click the back
button, we see that animation run again, that opening animation. Clearly a bad experience, right?
You could encounter similar situations, like oftentimes you'll find login UI. And at the initial
inception of an application experience, you don't want that to continually appear when users
press the back button. So you need to handle that.
One way to do that is to place the information in a popup -- I was going to do this -- and hide it
after the application first loads or after the user enters the login information that's required. So it
doesn't appear when the users press the back button.
And it's also important to make sure you're handling state appropriately. I'm not going to go into
details on this, because we have three minutes left. I do want to show you, because I think live
tiles are something that's really exciting in Mango -- let's just talk about that real quickly.
We have these live tiles, as we'll see here in a moment, that you can take advantage of in your
third-party applications. For instance, you know, so let's say in our weather application, wouldn't
it be great, you know, as users are browsing the start page if they could just kind of glance and
go and see the current weather details or the weather information? You could do that, right, with
these live tiles.
For other experiences -- like Allrecipes has a really great live tile. They show kind of -- it flips
over and it talks about like a recipe that you might want to make on any particular day or
something like that. It's kind of a nice experience. On the People Hub you see images
constantly updating. It's alive. It's really inviting. It's kind of glance and go, exciting. Just
really inviting.
So I'm just going to add it real quick, just because I think it's fun. Bear with me. So I'm going to
add -- I'm going to take advantage of live tiles, just really simple example here in my application.
I'm going to use my snippets that I have to move quickly, and I'll add them.
So this right here is a method where I'm loading my -- getting my weather data, my five-day
weather forecast, and binding it to my list box. In here I'm going to add -- I'm going to add
this -- I added a method, didn't I? Let's try that again.
In here I'm going to add this call to this method, then I'm going to add here in a moment this
method called update tile. And down here I'm going to add the method itself, update tile.
So in here I'm going to basically -- again, I'm getting the weather data, binding it to my list box
to present it to users. I'm going to grab today's weather information every time the application is
loaded and write that to the live tile so that you can kind of have that nice glance-and-go
experience.
So here's where I'm calling in my method that gets that weather data. This update tile method,
I'm passing -- whoops -- I'm passing in today's weather description as well as the temperature.
And down here in the method is super simple, a very simple example. I'm taking that description
and that temperature, I'm finding the live tile for my application, the first one. If it exists, I'm
creating tile data. I'm -- the back title for the tile data is Seattle. I would bind that if that was
actually hooked up to GPS to whatever location I'm at.
Then I'm writing the back content, weather is that weather description information and the
temperature. I'm just going to run it so we can see it, because it's way better.
Okay. Go to the start page. So this is the icon that I've designed for Weather Watch. Let's just
look at it. Imagine you're on your start screen looking at -- you know, looking for particular
application, you happen to glance at the weather tile and you see the weather details for today.
You don't need to open the application experience. A much better experience.
So, again, very simple example. You might want to consider leveraging background agents if it's
appropriate for your scenarios to have that information in your live tile update more constantly in
the background. Something else to consider. And I believe -- Jeff, do you have a post on that, or
does -- I think Peter Torres might have a post on that.
>>: Everybody does.
>> Corrina Black: Everybody has a post on it. So there's lots of information available.
It does make the experience much better. Definitely take advantage of it. Make your
experiences alive and in motion.
So with that -- two minutes over -- I'm going to go ahead and -- I think we're done. Does
anybody have any questions? Yeah.
>>: If I wanted to remove the text on the live tile, I mean, I just wanted the experience to be a
picture, is that possible?
>>: Yes.
>> Corrina Black: So the question is if I wanted to remove the text from the live tile and I just
wanted a picture is that possible. I actually -- I'm not sure. I don't see any reason user
experience-wise why that wouldn't be possible. But Jeff says that -- so Jeff Wilcox says that's
possible. So it is. It's possible. Yes.
>>: I was one of the people who didn't raise his hand when it came to Expression Blend. What's
the best way to learn how to use that tool? I find it [inaudible].
>> Corrina Black: Do you? There are a ton of really great tutorials on .toolbox that I would
recommend checking out.
I've done -- actually I have a walkthrough that I can give to you. If you're interested, I can e-mail
it to you. And a pointer to -- I just recently did a couple of sessions where I build this application
literally from scratch start to finish in an hour and a half using Blend. So that's what the
walkthrough covers. I can point you to that video.
And that's going to be on Channel 9. I think there are other really great Channel 9 videos that
talk about how to use Expression Blend, all of the cool functionality that's available in
Expression Blend. So Channel 9, .toolbox, MSDN. Our developer center has pointers to that as
well. I think .toolbox, that's -- I think that's a really great reference. But I can share more
information as well.
>>: If you can just share that with us, we'll post it after the fact so everyone can benefit from it.
>> Corrina Black: Okay. Awesome.
>>: That'd be great.
>>: [inaudible] blogs you had mentioned as well?
>> Corrina Black: I can do that. Yeah. I will definitely do that so you can make that available.
So Arturo has -- he's been doing a series of posts on a tour that he had done in Europe, so he has
the -- you know, that grid PNG available as well as the grid available in Expression Design.
Photoshop Illustrator, I think a variety of formats. I'll just say it real quick. It's ux.arturo.tv, but
we'll share the link and I'll share other blogs as well. Pete Torres, Jeff Wilcox, I'm sure
everybody knows those, but I think definitely, definitely good as well. Yes?
>>: Are there any best practices for dealing with localization and expanding text? Like we -- in
the weather app, you have it in alerts 1 or 2, but if I localize that to another language, you could
expand? What's the best practice on that?
>> Corrina Black: That is a really, really good question, are there best practices for dealing with
localization. I'm not an expert on that. It's definitely something that you need to consider.
I say that in phone applications it's really important to kind of minimize the amount of text that
you display. It's a phone. It's a small-form factor. People are on the go. So try to like take that
into consideration. Of course you do have to deal with localization. And there are blog posts -I'll find -- we'll find some examples to share. I'm not an expert at all. So yeah. Okay. All right.
Thanks. I hope that was good.
[applause]