Lessons

Lesson Info

Interface Personality & Behavior Galleries

All right, so, thanks Jesse that was great. So, what I want to talk about something, is something that has been really important to me. And our digital products, you know, they're just about as much they have a look, as how they behave, right? So we have kind of look and behaviors, you know, two sides here. So, the functionality that fosters all the actions and these transitions are branding. So in the digital space we really can't kind of look at functionality and actions as separate things. You know, actions speak louder than words and everything. Before I dive too much into this, I wanted to kind of give you guys a quick little historical and cultural reference point. So, I want you guys to imagine that it's the year 1880. A couple things that happened during this time, for one, the drinking straw was invented, fun little fact, right? Also, Thomas Edison performed the first test of the electric railway. Hmm, good to know. (clicks tongue) So, imagine you're a student at the Massachus...

etts Agricultural College in the small town of Amherst, Mass. And you have just received your yearbook. And you see this illustration in the yearbook of kind of a bunch of students pouncing on a student. They tie him up, they take him outside, and then they kind of drag him underneath a well where they kind of get water all over him. So this is one of the first illustrated examples of hazing. So, fraternities, sororities, military groups, all kinds of social groups use hazing, and it's kind of through this weird abuse and humiliation that groups are forced to have this kind of right of passage, right? It binds these individuals through these kind of social rituals. We can look at other lighter examples of how humans throughout history have had a relationship with actions and behaviors. So think of, you know, musicians, athletes, you know, everything from Michael Jackson's Moonwalk, Elvis Presley's Gyrating Hips, I'm not even going to try to do that. Kaepernick's Bicep Kiss, you know, every time he scored a touchdown, also was showing I don't have any biceps, it's okay. Aaron Rodger's Discount Double Check, you know, every time he scored a touchdown, which is really interesting, think about that. He kind of created this signature move for himself that then was taken by a company to kind of use as, you know, a way to brand themselves. And now it became the Discount Double Check, right? So kind of very interesting levels of how, you know, motion was first designed to brand the athlete, that they then decided to leverage and brand a company. And even during the Olympics, we saw a lot of the Usain Bolt pose of his Lightning Bolt Pose. Thank, I'm so glad he did that, that was nice. That was perfect, something like that. Something like that. He might have done it a little better, but, Well, yeah Only because he just smashed a world record Exactly (Andy laughs) I'm no Usain Bolt. So, I really like this quote that says, form follows function that has been misunderstood. Form and function should be one joined in a spiritual union. You know, it's through these kind of customs, rituals, personal branding, or just plain old entertainment, that we kind of see that humans have had this really long relationship with gestures, motions, and behaviors. So, our identities are embodied in these actions and behaviors. So then it becomes no surprise that we would expect that kind of same level of relationship when it comes to all the digital products that we create and that we experience. Very simply, functionality is branding. You know, and as a designer crafting these relationships, it's really critical for me, you know, I kept when I was kind of showing that awful picture of me when I was really young, with my long hair, you know, back then, you know, I only saw my job as kind of defining the visual language, right? Essentially, handing over, creating these static points. Point A and Point B, you know, and that was my job. And now what we're seeing is that there's this kind of magical space in between those points where is an area that as designers, we should be thinking about. And also, as developers, they should be thinking about as well. This is kind of one of those areas where it's like a common space. You know, for the first time, you may like look at it where your developers are responsible for branding. And I remember when I kind of first talked to some of my developers about that, you know, it's like branding, ooh, that's your thing, you know? And that might be a lot of the initial reaction, but there's so much, you know, personality that's infused with that space that it becomes critical and understood that the entire team is now responsible for this. You can kind of look and think about just the signature moves that we're talking about with certain athletes or celebrities. And how there's kind of signature functionality or moments that happen with a lot of our products. I could say Facebook, and what might be something that comes to mind with Facebook? They have like the like button, right? Or Twitter, and Twitter has, you know, the hashtag. Pinterest has pinning, what is pinning? what is Pinterest without pinning? And you could also argue, you know, well, Andy, you know, there's so many people on Facebook, then of course liking was going to take off. It was just, you know, pure percentages. But I can ask you a question, when was the last time any of you poked someone? Cause you can do that too. Or at least you used to be able to, I think you can still poke people. Legally. We'll find out the answer if you can still poke people on Facebook, but, (sucks in breath) So, you know, we have all these new things and there's all these new products coming up. Everyone's probably familiar with Tinder, right, and how Tinder has this whole swiping motion. Any swipe can change your life, you know, they're kind of, as part of their tagline, that's part of their promise, you know, that is what they're kind of getting you to think about, the functionality itself. And now, you know, when I kind of work with clients or even see stuff on the Internet, I'll see things like, you know what, it's like Tinder, but for real estate. It's Tinder for recipes, it's Tinder for that. And instantly because of what they've done, you know what they're talking about. You understand that kind of quick choice decision, they've created a new type of interaction model, right? Now, has been part of their identity. Now, the other side of this, is sometimes you can't always use that functionality, it may be not be so important to like kind of build a brand off of, you know, it doesn't have to be quite such a symbiotic relationship. But there's this other level of just general interface personality, right? That the characteristics and the behaviors that make that product or experience unique. So, I like to call this interface personality and give it kind of a name, so that way when you're talking about it with your clients, you know, they now can know what you're talking about. There's like a vocabulary around it. Again, it's about building vocabulary. Because this is what happens a lot of times. I would go and I would talk with clients and they didn't have the vocabulary, so instead they would call it things like the wow factor. I need the wow factor, you know, that's what we're after here. Or, you know, that extra five percent, right, it's really missing that five percent, Andy. If we just add that, then we're really going to be there, you know. Or, my favorite, the special sauce, you know, it's just like, Andy, we need that special sauce, come on, we know you can do it. So what they're doing is they're really talking often about that interface personality, right? Because they're kind of still feeling like this whole thing is just this static comp. It's still just like, it might as well be a PDF online, right? There's not much difference. So, now you guys can kind of have that terminology, but what do we do with it? How do we kind of create a tool and a process to communicate that right from the beginning so there's something to build off of? So I like to create behavior galleries, right? So, behavior galleries are really simple. They're just a lightweight way to communicate and to find the interface personality of the product. And they're generated really kind of through this two step process. The first is to define your guiding principles, right? So, what does motion look like to you and to your clients? You know, what is going to be something that's on brand and off brand? There's a lot of different ways that you can define motion. It can be playful, can be pretty, you know, just standard, but still has like a level of personality. Like, talk to your clients about what that looks like. Now, of course, the question is, like, well where do you go? Where do you kind of like get some ideas of how to talk to them about that? Well, one place is Material Design, you know, they have some really great kind of guiding principles about how they looked at it, and a lot of them are very relevant, right? So, you know, although you may not be using the Material Design language, you still may want to look at them to see how they've defined that. Because, the key thing about these transitions and these motions, is we're all building off of metaphors. You know, we still have that relationship. This is something that Jesse talked about earlier, where we had that relationship to these real world materials. So, when we kind of think about things pushing, pulling, revealing, peeling back, flipping over, right? They're all these associations to materials that we likely have in the real world, squishing, all these types of things. So, there's kind of ways to look at that and kind of feel like, hmm, what is gonna feel right to us? (Andy clears his throat) Microsoft has also created a set of design principles for their Metro design language. Which I think are really interesting as well, and there's some really great ideas there. So definitely kind of check those out. And then, another great place is, to kind of look at the 12 basic principles of animation. This is from the book, The Illusion of Life by Frank Thomas and Ollie Johnston, and they are Disney animators. And so these are kind of, much more like fundamental ones, right? The others are gonna be a little more like heady, you know we look at Metro and Material Design, these are like, much more granular as far as like squashing and stretching and anticipation and just some really kind of key things that you can infuse to what feels right. Now once you have this, you're gonna want to find your inspiration points, right? It's time to kind of collect them all. And there's a lot of great places out there that you can go and start to find them. One place is Capptivate.co, so you kind of go to there, you're gonna see all these like really great transitions and effects. You're gonna be like, that's really interesting, I feel like there's something there. Another one is the UI Interaction Library. These are constantly being updated with new stuff, you know, so it's just like, hmm, there's something really cool there. This one is SIX UX, so it's basically little videos that are six seconds long that kind of show animations, transitions. Now, once you start to collect all these things, where do you put them all? So what I use is I like to use a tool called Dropmark. This is really great, so this is where I make my behavior galleries, right? I'll kind of get all of these samples, I'll create a, you know, a folder, a project name. And you can kind of see here, I'll just start identifying them. You know, like, what is this for? So, maybe there's like some transition inspiration, maybe there's some type of animation for data, some type of reveal inspiration, menu, just start like getting them all there. Right now it's just about kind of collecting and being inspired. You can then curate them and you can send them, you know, to your team and your client, right? You can put this as part of some of the user stories, right? You can also put in the guiding principles and this would be something that is also really important, you know, talk to your client about what those principles are, so that way there's a method to the madness almost, why these, like, what is this have to do with anything? You're trying to kind of guide them as to why you're making certain decisions. Now you don't have to use a tool like this. The other way you could do it is just say using a Google Doc, you know, get a spreadsheet, and start to, you know, list and capture certain links. And then, if you also want to kind of capture say screengrabs or, not screengrabs, like little video clips, or sometimes I'll even use my phone, you know, and you can upload little movies that you've made from your phone, being like, oh that's really cool, I want to capture that. Put that as part of it, so you don't have to rely just on stuff that you have a link to. You can upload actual files as well. So, whether using kind of Dropmark or Google Docs in combination with say a Dropbox. There's just these great ways to now have a place to organize that stuff. So, a couple quick tips when you're doing them. The first is, to add labels to your site map, so it's easier to communicate. This is something that we spoke a little bit about when we were reviewing our site maps. So you can kind of see here, this is the right way, and this is the wrong way. Now, you may have your own like numbering system, but the point is, now, when I'm kind of thinking about some of those transitions, I can say, you know, from 0.0 to 1. Right? And that's going to mean something. Knowing that nomenclature may change. So, make sure you're adding those and trying to give as much context as possible to those templates within the site map. The other thing is write the details as user stories, right? So, these just become part of that user story writing process. As a user, I would like to see a transition from 0.0 Home to 1.0 About. Now that's a captured story, now it's something that can be tracked. Now it's in the backlog, now it's real. Otherwise, it's just that missing wow factor. But now, we can kind of prioritize it, understand how important it is. And there's two ways I think to kind of introduce these types of things when it comes to working with developers. You know, one would be to set up an entire sprint. And this is sometimes you might be like, you know what, we're going to have this sprint dedicated to interface personality. This is going to be the interface personality sprint. And so the whole thing is just to kind of look at key areas where you feel like there's an opportunity to kind of make something come to life, right? The other way to do it is just to throughout, you know, your EPICS, as part of the components, just weave them in as part of some of the stories already. So, you know, it's going to be up to you and how you want to handle it, whether you want to integrate them just as you're going through the components, and kind of going through some of these EPICS, or if you want to save it and make it more of it's own sprint unto itself. The good thing about kind of working it into the components is that it's just going to keep building, right? And the good thing about kind of keeping it at the end, is then at least there's this sprint that's really like that becomes the priority, so it's just like everyone knows that that's when it's go time for that. When you have them, you know, make them your own. And this is going to be kind of a balance. Sometimes your gonna find just different code snippets. You're gonna find just different examples. Sometimes, you know, maybe it's good, and that's gonna be great. Other times you wanna, you know, personalize them a bit, you know, define what motion and actions and behaviors look like for your product. And when you're done with them, add them to your pattern library, right? So, we have all these elements in there, you know, we have these all atoms, molecules, we have all these kind of colors, typography, motion, animation, transitions, those should also be integrated into your pattern library. Because, think about it, it's a reusable thing, right? You don't want to have a same type of button style which is visually the same, but now also in different areas on the site, the way it transitions is different. That's gonna feel not thought through, right? So, put those in there and then developers can kind of go and grab them and there's an efficiency to that. And of course, make it a team sport, right? This is where it's not just about designers trying to do it, right? Developers are going to have their own ideas. Frankly, anyone on the team, including the client, may have these inspiration points. Add them into that behavior gallery, you know? This is something where everyone now is seeing stuff that might be inspiring. Now that doesn't necessarily say, it should be put in there for sure, right? You know, you may have some ideas and so you may need to kind of curate what feels right for that personality, but don't just consider this an isolated part of your job. So I've created a little bit of a growing list of these resources, so if you go to my site, andypratt.net interface-personality, you'll start to see where I kind of have just different examples, different sites that you can go to find personality. Some include just references, others include, you know, actual code snippet examples. And that will be continuing to grow and if there's any ideas that people have out there, I'm trying to add to it all the time.