User Experience & Tools

[00:00:00]
>> Sarah Drasner: So Jeff Graham, who I work with on CSS Tricks, had this article called On Future Requirements, and I think what's really cool about this article is this table. Figuring out some of the end goals of your users, where they're trying to go and what they expect. Is a really good way of reimagining or reintroducing these concepts for yourself.

[00:00:24]
So many times we think of the site and we think of it this way right. We think about it like, I'm making this and putting this out. But what is it like for people to actually experience the site. So, as identify the user who is visiting your site, I expect that, describe the task so that explain the anticipated outcome.

[00:00:45]
And you would do this for many types of user that might visit your site. Because maybe their goals change. I do feel like some of the larger applications, sometimes it feels like there are product teams that own every page of the site. And they might not talk to each other.

[00:01:00]
Have you ever been on an application where you're like, why did it do that? It's because they're not actually experiencing the end to end of their product. Each area is focusing on that one specific. You know, page or goal and they're not really understanding that whole flow. So if you can be a user for your own site and try to put yourself in that mindset, you can kind of understand what places motion might be acceptable or how layout might adjust or how your goals on that site might adjust as well.

[00:01:37]
There's this great article about story maps. Again, this section could be a whole new course on its on as well. I think I do have a course on some of these things. And the story maps is like basically showing how you can plan out wire frames and drawings so that you're considering every step of the process and What it would look like from start to finish for someone using your site, and what they would expect or want at every step.

[00:02:06]
You can also create these kind of end-to-end website flows like I mentioned those UI kits exist on Shutterstock, iStock Photo. These wire frame kits also exist on the site too, so you don't have to make every little square in here and stuff. You can drop in pages so that you can play around with like, all right if they came to New York times and they clicked on this one area maybe they want to experience some, you know, food.

[00:02:35]
And maybe from food they wanna go here and so on and so forth. If you want to make these kind of user flows and work with pen and pencil, there are these things called UI stencils where you can kind of just draw them up really quickly. I like working with them maybe just because I like the stencils.

[00:02:52]
[LAUGH] Sometimes it's a little bit more motivating for me to create these website flows if I'm working with tools that get me excited. And there's no other reason for it but, except that I wouldn't do that task if I wasn't like excited about the materials. There's also stickers, that you can use as well.