Improving an Existing UI Demo

[00:00:00]
>> Sarah Drasner: So Apply This To Real Dev. I did this like, okay, what if I was gonna redo a site? What if I was gonna change an experience based on animating and revealing information? So I'm on a trip exploring a city. Last year, I went to Spain. And I love Lonely Planet.

[00:00:16]
It has such great content. So I go to Lonely Planet. And I look up Barcelona, but I go there and down here I'm like okay which site to see. I think I'm gonna go to La Sagrada Familia. I've heard good things about that, so I click on that.

[00:00:31]
And what should I do next? Well if I go to this map section of La Sagrada Familia, there's a pub and something else that doesn't seem interesting and that's really it. This is a static JPEG, it's not explorable or anything. So I wanna find another site or maybe lunch and then another site and then dinner, right?

[00:00:51]
That's kind of what you do when you explore a city. But then I go back, and then it's different somehow, I don't know why. And then I go to Food and Drink. And these all look good, but I don't know if they're in the same area, and if I have to go across town for no reason, or what?

[00:01:07]
So then I go there's a map section, launch maps view. But really that has a few sites, but none of the food or any of the other stuff. So I'm like, all right, this is good content but I can't really navigate it the way that I need to for this trip.

[00:01:20]
So I go over Google Maps, and Google Maps is great because if I know where I'm gonna go, I know it can kind of locate that for me. I wouldn't be able to find La Sagrada Familia from here, if I go to Google Maps and be like show me cool things, it's like what.

[00:01:35]
Cannot find cool things like [LAUGH]. So I go to get La Sagrada Familia and cool, I say restaurants in the area and I find a bunch of restaurants in the area. But I don't really know, and like maybe bars and pubs, but between these two views, there’s no idea of each other.

[00:01:55]
They don't know each other. And I don't know another site from there either. And their content is not so good, so look at all of these 4.1 of what. It doesn't really show me what those are. I can send each one to my phone, which is really cool, but I'm sending one offs to my phone, right?

[00:02:18]
And yeah the content that's what the Google, a Google user five years ago, five star, I don't know [LAUGH], really? I'm not sure. So okay I made this demo. Here's a trip planner, I write La Sagrada Familia or just right in sites, and I can kind of navigate my way through different sites on this map.

[00:02:38]
And maybe I choose that one, and then it shows me food in the area and I can kind of go through each one on that map. And then I can maybe keep going and find transportation and other sites and other food. But then as soon as I'm done selecting a bunch of them, I can send all the itinerary to my phone.

[00:02:58]
And the only difference, we went through 20 different views on the other thing across two different sites. And the difference between the two is that we used animation to kind of guide the user, and show the user the information that they needed at the time and obscure the things that they didn't need, and that's really great, right?

[00:03:18]
We're not trying to understand everything at once. We're kinda dealing with things one at a time. The other thing I want you to think about with this demo is it's not something that was additive. The animation wasn't added on later. The animation was part of the experience. We didn't just create the whole thing and slap it on.

[00:03:38]
It was an intrinsic part of the UX. It was an intrinsic part of what we built out in the whole concept of what we were creating. So if animation is really important to your site, and it's doing a good job, it is a part of this site. It's not something that was additive, people can tell when they're having an additive animation experience.

[00:04:01]
They're waiting for something and to do something. Really animation should be helping you do something.