Bummer! This is just a preview. You need to be signed in with a Pro account to view the entire video.
UX Track: The Nuances of UX - Nick Finck44:22 with Nick Finck
When doing any kind of design work, the devil is always in the details. It is easy and often important for us to quickly rush through our wireframes and prototypes to meet a client deadline, but as professionals we must not overlook the subtleties that can turn a good experience into a great experience. This talk is about the little details we see in apps and websites we use every day, but often fail to notice. We fail to notice them because they provide for a much smoother user experience. You will learn how to design for these experiences even with a tight deadline and within a agile workflow. After this presentation you'll never look at another app or website the same again.
[? music ?] [The Nuances of UX Nick Finck] [Blend Conference 2013] 0:00 [Nick Finck] Hi I'm Nick Finck. 0:04 I work at a company called projekt202. 0:05 We're largely based out of Austin and Dallas. 0:07 I run an office out of Seattle. 0:10 [feedback] Oop, that's a little bit of feedback. 0:12 But I run an office out of Seattle, 0:15 and I'm the User Experience Director there. 0:17 And—well, they actually are a user research 0:19 and design company. 0:25 They also do development on the back end. 0:26 You can see scattered across the place. 0:28 We have all sorts of individuals working with us from all sort of different cities 0:30 and work with a number of different clients that you may have heard of. 0:35 For the sake of this talk 0:37 I decided to create a hashtag. 0:40 If you guys want to use that, that's probably the best way to keep track of this sort of stuff. 0:42 Obviously, you can't use your devices right now— 0:46 did I catch anybody picking it up right there? Okay. 0:49 But go ahead afterwards. 0:51 This is my first time giving this talk, 0:54 and I'm looking for some feedback. 0:56 So if it didn't quite work out then I want to hear what didn't work on it. 0:58 So definitely give me some feedback on that hashtag. 1:02 You can also find me at Nick Fink—or NickF on Twitter. 1:04 So overview—I'm going to talk about a couple of different things 1:08 as it related to the nuances of UX. 1:11 I'm going to start out with the details, 1:13 I'm going to go into some stuff about simplification, 1:15 and then we're going to talk about process. 1:18 It's going to be pretty critical, 1:20 and then we can do some conversation about research. 1:22 I'm not going to cover that too much because 1:26 if anybody's been to any talks in this track you've seen a hundred talks that mention research, 1:28 and some of them have gone into great detail on research 1:33 so I'm not really going to cover it in too much detail. 1:35 And then at the end—and probably the most important part— 1:39 is our job. 1:42 I'm going to talk about what we do as User Experience Professionals 1:43 and what we should be doing. 1:46 And I promise you, this is actually going to change the way you look at how you do your job, 1:47 and it's actually going to impact the world. 1:52 Crazy, hunh? 1:54 In just this one session, and everything is going to happen after that. 1:57 Okay, so let's talk about some design details. 2:00 So you probably read the description— 2:03 now I must confess I put the description up quite a long time ago, 2:07 and the talk has since kind of changed a little bit. 2:10 So as far as the technical details, 2:12 we're not necessarily going to walk through exactly how to that. 2:15 We're not going to show you, "Well, you need to do this CSS thing here, 2:18 and you need to do this wireframe over there." 2:21 But we're going to talk at a high level about the nuances 2:23 and what I mean by that. 2:26 So does anybody know this guy? 2:27 Rams—anybody? 2:31 Okay, thank God. 2:34 So a lot of this revolves around his theories and principles of design. 2:37 But basically Rams has this idea that we must pay attention to every single detail— 2:42 like every pixel matters, right? 2:48 Now that doesn't mean spend 6 hours moving around a pixel, right? 2:50 This just means that you know that that pixel must have a justification of being on the screen. 2:55 It must have a rationale for its existence to be there, right? 3:00 And this doesn't mean scrutinize over every pixel as a minutiae little element, 3:05 but just to kind of understand that if it doesn't need to be there 3:11 then get it the hell out of there, okay? 3:15 You know—if you don't need to have a box around something 3:17 why are we drawing boxes around stuff? 3:19 If you don't need to have an arrow somewhere because there's nothing to actually interact with 3:21 why is there a freaking arrow there, right? 3:24 So I want to show some examples of things that are kind of 3:26 subtleties of delight and detail, right? 3:30 Detail that nobody really sees. 3:33 They don't—they use the website, they use the app, 3:36 and it just kind of flies on by and is just like—you know— 3:38 whoa—you know—that was a pretty cool experience, 3:41 I'm not sure why. 3:44 Now somebody else may go, "Hey, did you see that website—that app 3:46 and did you see that it did this?" 3:48 And you're like, "Wait, what? It did what?" 3:50 And they go back to it and they check it and are like, "Sure enough it did that thing." 3:52 But they just didn't notice it. 3:55 Because I have a theory that if you design things right, 3:57 if you have a really good experience, 4:00 if you do really good design work 4:02 that your design is actually not going to be noticed. 4:04 Right? 4:07 It's the designs that have problems that get noticed. 4:08 It's the ones that are challenging or difficult to use 4:11 or the ones that are fortuitous and add too much content 4:14 and too much data that overwhelms the user. 4:16 But just the right balance of all that— 4:19 just the right balance of design, content media, everything else, 4:21 and then you get this seamless experience that people don't even actually notice. 4:25 They just absorb the information, and it was easy and they are on their way. 4:28 They got their job done, right? 4:32 So this is what I'm kind of talking about. 4:34 So here's an example. 4:35 This is Pinterest. 4:37 I'm sure some people have probably used it. 4:39 Does anybody know what nuance I might be talking about on this design here 4:41 as I'm scrolling through? 4:45 Continuous scrolling is a good example. 4:47 Actually I'm talking about the colors. 4:51 You notice how these images, as they're loading, 4:54 it shows color, and then it loads the image. 4:56 It uses the color that is actually the most prominent color in the image shows it. 5:00 It's a very subtle detail. 5:04 It's something that probably doesn't matter— 5:06 it's probably not something you want to spend a lot of time on. 5:09 It's definitely not something you want to postpone or delay a project for. 5:12 But it helps—kind of—push along this idea of a smooth transition. 5:15 Instead of showing an empty box or a little spinner, 5:22 it shows that—kind of—little subtlety of, 5:26 "Hey, there's going to be something here. It might be green." 5:31 And your eye gets drawn to it just as it starts to load up. 5:33 It's beautiful. 5:36 Here's another example. 5:38 Anybody use the Mint app on iPad? 5:40 This app has a little spinner capability. 5:42 So as you're tapping on this pie chart— 5:46 which by the way, I hate pie charts— 5:48 but that's what they use here. 5:49 But as you tap on stuff, information pulls up, 5:52 and the whole pie chart adjusts itself to where you're actually looking at the information. 5:54 So in normal pie charts if there is any form of interaction, 5:59 this whole thing actually moves around, right? 6:02 It jumps around, and now you have to worry about 6:05 this element that could be on the right, could be on the left, 6:07 and you have to kind of figure out all this design affordance for the white space. 6:11 And then you end up with all this weird and awkward white space, right? 6:17 And it looks like something was missing or a gap or something like that. 6:21 So this is designed with that in mind. 6:25 It is designed to have that element there 6:27 and to allow you to manipulate the data 6:30 to produce more data— 6:32 or manipulate the interface to produce data and—without adjusting the entire layout of something. 6:35 Does anybody use Paper as another app? 6:41 I apologize for this being kind of chunky. 6:45 The reflector app didn't work too well for this kind of animation—it was pretty heavy. 6:47 But basically, this is [inaudible] at its greatest, right? 6:52 It's like, "Oh hey, we're going to do a sketchbook and writing book little app. 6:56 So let's go ahead and make it just like a little notebook." 7:00 Like maybe you got at the conference here, right? 7:05 And it's actually nice to me because I feel like I'm actually interacting with something 7:07 that's kind of physical but I'm in a digital space, 7:14 and when I actually go in all the way, which I haven't done for any of this video here, 7:17 but it loads up full screen, and I have every— 7:21 what every other sketching and writing app does 7:24 is just full screen, right? 7:28 But this is—kind of adds a little moment of delight, 7:30 a little bit of subtlety about it. 7:33 You know—there's things in there like when you open up the book 7:34 it kind of snaps open. 7:38 It has—there is some kineticness of it. 7:40 It's not just a continuous—it just pops open. 7:42 It's actually like—when you open a book there's the weight of the book 7:45 and, depending on how far you open it, 7:49 then the flap kind of comes down. 7:50 So there's that kind of thought through. 7:52 And that does take a little bit of time and finesse, 7:54 but it adds to a more seamless product 7:57 versus something that's like, closed and then opened. 7:59 Right? Maybe there's a transitional state. 8:02 Another example that my former team worked on. 8:04 A CNN Money app—it looks nothing like this now 8:08 for a number of different reasons, for which I won't go into detail, 8:11 but mostly legal. 8:13 But this is what we call blades here. 8:14 Now I don't know if you can see, but there are these kind of columns here. 8:19 If you look really close there's this little drop shadow along the side here, 8:21 and I apologize I don't have a demo to actually show you of this—a live demo— 8:26 but those little things are called blades. 8:30 Now what you can kind of see on this other side 8:33 is you have a stack of blades and something that's kind of exposed, right? 8:36 This is sort of the everything behind everything, right? 8:40 And what they wanted to do is they wanted to have all this information— 8:44 they wanted to have social, they wanted to have stock information, 8:48 news information about a company that's out in the public on the wire, 8:52 and then also information that's also released by the company. 8:56 And they want to be able to compare all this stuff and also have your portfolio. 9:00 There's a lot of data coming at you at once. 9:04 And they're not even stock trading, they're just reading news about the company, right, 9:06 and reading information related to their financials. 9:11 So what we want to do is show a lot of data but also keep it kind of simple, right? 9:13 So what we did here is, these actually pull out. 9:19 Now if you've ever seen Facebook—I think—a couple other apps do this 9:23 they have like a slide out menu on the side. 9:29 Almost all of them you sort of tap this area right here— 9:31 you tap the actual bar and then it pops out to something like this. 9:35 And if you're lucky there might be a little animation to show it popping out. 9:41 Most cases it's kind of like one screen halfway and then full. 9:45 And that's it, right? 9:50 And what we've found is in those particular situations, 9:52 you—and then once you have it out—you tap off of it and the whole thing goes back. 9:58 In a lot of cases—almost every case I've seen— 10:03 for an app, it just is gone—it's tucked away immediately. 10:06 There is no transition, right? 10:09 This is actually designed so that it's more natural, more fluid. 10:12 There's probably like 100 states of all these animations. 10:17 So, for example, when I tap on the second one in 10:19 this second one comes out, right? 10:23 And then there's a little bar on the left, and there's a whole bunch of transitions to show it sliding out 10:27 and it's not just one next then another one, right? 10:32 It's actually like one, and then it shows a little bit more distance 10:35 and it kind of slows down at the end. 10:39 There's actually a pacing to the whole thing. 10:41 Nobody's ever going to notice that pacing. 10:44 But when it's not there, it—something's weird, right? 10:46 We can't put our finger on it. 10:50 It's just like, "That animation just kind of seemed weird. It kind of disappeared and it was out, and—you know." 10:51 But once you have that weird pacing added to it where it's fast at the start and slow at the end, 10:56 it just kind of smooths out. 11:01 Now you can actually tap on any of these and get a whole combination of different interactions— 11:03 2 finger swipe, 3 finger swipe—not necessarily—there's no affordance for that, 11:07 but the single tap actually does the same sort of thing. 11:12 So it's just an additional interaction element. 11:15 I wish I could show this to you. 11:18 I wish it was up there live, but it's just a thing of beauty. 11:20 And we didn't actually spend that much time on it. 11:23 The only difference was that we just communicated with our engineers 11:26 that were building this how we wanted that interaction to be. 11:31 Now you can communicate with a big deck of wireframes and throw it over the fence, 11:33 and frankly that's Waterfall, right? 11:38 And that's just receiving this massive amount of data all at once, right? 11:41 And a waterfall will freaking crush you if you stand underneath it, right? 11:46 And that is not good. 11:49 So instead we work with our engineers and tell them what our plan is 11:50 and they start giving us feedback in the early conceptional—the ideation phase, right? 11:55 And then they tell us how we should be thinking about this, 12:01 how we can and can't code this based on iOS limitations 12:05 on the platform itself, and then once we start getting into the design 12:08 and in the prototypes and into development 12:12 it starts to get more and more progressive, 12:14 and we start to see things and we start to get more feedback on, 12:16 "Okay, we actually want it to kind of bounce at the end a little bit. 12:19 Not like really obvious, like boing, boing, boing, but just a little slight bounce at the end." 12:22 And all that just adds this extra moment of delight 12:26 that again, makes it feel more natural. 12:29 Makes it feel more identifiable of stuff we had interactions with, 12:32 and it doesn't have to be skeuomorphic, it doesn't have to have stitched leather, for God's sake. 12:38 So another example is the CNN app. 12:41 This is also by the same team. 12:46 And this is an app that—there's a number of ways to do this inside of iOS 12:48 when you're designing these kind of modular tiles— 12:54 these little boxes of information. 12:58 These are stories. Each one of them you tap on, and it gives you another story— 13:02 if you haven't used it. 13:06 So one of the things was a lot of apps, 13:08 when you go from a portrait to a landscape mode 13:11 what they do is, they typically just—say you're in portrait mode, 13:14 you actually kind of have this area here with these 6—or whatever 13:20
You need to sign up for Treehouse in order to download course files.Sign up