Lessons
Class Introduction
11:34 2What is Interaction Design?
05:21 3Goal Directed Design
11:44 4Context
07:26 5Mental Models
19:02 6Affordances
07:52 7Micro Interactions
25:02 8What are Heuristics?
03:12Make it Clear Where You Can Take Action
17:36 10Help the User Understand What's Going On
14:41 11Stay on the Same Screen
19:30 12Invite Users To Do Things
06:12 13Use Semantic Motion to Aid Understanding
13:49 14Design Research
27:21 15Personas
20:53 16Scenarios & Frameworks
17:09 17Wireframing
21:51 18Interactive Prototypes
12:55Lesson Info
Use Semantic Motion to Aid Understanding
The last rule we're going to talk about is using semantic motion to aid understanding. So, the emphasis here is on semantic motion, right? So, motion that's connect. It's not just motion for the sake of motion. So why is this important? In this example, they just X-ed out of that window and it suddenly disappeared. The next example, they minimized the window and there is this connection there, right? If you just X out of the window, it's a hard cut, and when there is a hard cut, like there is when you just X out, it makes it difficult to understand the changes in the interface because there was a very abrupt change, like as fast as a blink of an eye and then the brain has to be like oh, wait, what just happened here, oh okay, right? And when it just happens once or twice, it's not that big of a deal but over time it increases the cognitive load. It makes people more tired more quickly. Also makes interfaces seem less natural, right? Like in the real, physical world there are no, almost...
nothing suddenly disappears, right? So, if you want to design digital products that are more akin to what people encounter in the real world, you want to make sure that the transitions aren't super hard. I guess something that only robots do. So, yeah motion can make it easier to make those connections between states if you do it right. So, for example, this is a fast one. You have to look at it a few times, but if you tap on this image row, you see it like, whoosh, it like, the image row expands, right? So it feels as if the interface is this fluid thing that's connected, like there is just another layer opening over it and you can make the connection between the two states. This example is even better. This is Facebook's old paper app. I don't think that's around anymore. But the motion design here is great because there is an immediate connection between the thing you interacted with and the transition to opening it up. There's no hard cut there, it feels, as if to reference something we talked about earlier how you imagine how your interface is just a bunch of layers that are moving and switching but they're all kind of connected. This is another cool example. If you deselect your billing address, a new form opens up and through that additional movement, because our brains, we have this thing in our brains called peripheral vision and what peripheral vision means is that you can focus really well on like, maybe three degrees of things in front of you. Everything else is kind of blurry, but the blurry stuff in this area of your vision, you're really responsive to motion, so if there's a saber tooth tiger coming your way, you're gonna see that motion really quickly or if there is some kind of better ad moving, you'll see that too and be super annoyed and frustrated because the banner just took advantage of your anatomy that you can't change and you're really actually trying to accomplish something else. So another topic. This is an example that's not good. Like, if you hit the launchpad on OSX, these icons just appear out of nowhere. Like, where are they coming from? If you imagine that the UI is connected and that it's similar to what's happening in the physical world, where in the physical world do stuff appear out of nowhere? It doesn't happen. I mean, it's not a big oversight. Only designers that geek out over motion will ever even notice this, but still. If you really want to focus in on those details and you do, that's important. A much better example of this is in Linux where if you click Show Applications, it pops up from the side. There's the connection there between the action that you just took and the new state. This is a cool example too. I got this from Dribbble and this is cool because it's not too much, all right? And so you have texture here to indicate that you can interact with it and when you interact with it, you get feedback right away and I really like that this interaction is so minimalist because it's very, very easy to do motion wrong. It's one of those things that people do wrong a lot because it's one of those things, especially because it's so new, it's really, really new and this type of interface design to do motion and so, and it's exciting, it's fun, right? And so people get carried away with it. So then you'll have stuff like this, right? Let's watch this one again from the start, like (laughs). So here, you click the menu at the top and it it goes foom, foom! (audience laughs) And these like, boxes, and they're flying, and yeah, it's very acrobatic and I guess it's for some kind of fitness product, so they wanted some dynamism in their site, probably. And the first time you use it, it's probably pretty fun, but imagine having to navigate the site 100 times, 200 times, right? And every time you have to sit through that four second animation to get the information that you want. Here's another example. You're scrolling and it's like, doing. Like, from the side. Like, it's kind of extra because you're trying to focus of on something here and then out of nowhere, this back to top thing just like, bounces up like ha, here I am! (audience laughs) You want to go back to the top? It's just too much, right? Like, to bring analogies from real life again, it's just if someone moves too abruptly in a social setting, it's just kind of not, it doesn't feel right, you know? Right. Kind of awkward. A much better example is here when you scroll down and it just slowly pops into view and what's cool about this too is that it pops into view in a place where it kind of interferes with the elements below it, so there's those, it's not intrusive, but it's also hard to miss. So what you don't want to do is stuff like this, right? (audience laughs) Like, this is not semantic motion. It looks cool, I mean, it looks great but it's not semantic motion. This is someone who, I don't know, needs to animate a cartoon or something, right? These are people who are in the wrong profession. So you never want to do animation just for the sake of animation, and you don't want animations to go on for too long. The real point of using motion in interface design is to bridge hard gaps, right? And make connections between states. It's not to just make stuff fly around like Iron Man armor or something, (audience member laughs) so semantic animation connects these two states. It's not animation for the sake of animation. If you're interested in learning more about this, I would recommend this article on A List Apart for designing interface animation. A great primer and I think Val has also wrote a book about this, wrote a book about the subject, but I haven't read it yet, so I can't say if it's good or not, but if it's as good as the article is, then it's gonna be a good book. Okay anything you would like to know? You just mentioned before that you wanted to say something about your worst mistake that you made (mumbles) Oh yeah, oh, thanks for reminding me. So I was wondering about that. No, it was just, I already said it. It was just this idea of that, you don't want to do animation for the sake of animation, right? It's just too extra. Oh, now I remember. So one of the hardest lessons that I had to learn early on in my designs is that nobody cares as much about that cool design that you made as you do. No one cares. People, normal people, non-designers, they want to get in, get something done, and then go back about their day, right? They don't care about this stuff that keeps them from getting done what they want to get done. So it's a really challenge for designers to learn that and to sort of approach design more as a craft like carpentry than an art form like sculpting, right? So a big part of maturing as a designer is letting go of your ego in that respect and realizing that you're here to aid people in accomplishing something and making them more effective. What's the best way to prototype emotion? Like, say I have this idea for a website or whatever and I'm just trying to figure out whether I should use GIF or learn Flinto to do it, or what do you when you design it? (sighs) Yeah, a question of tools. There are a lot of good tools out there, and tools change over time, right? So if I give a recommendation for a tool today and someone watches this video two years from now, the tools will have changed. With that said, the tools that I've tried out that I've found have the right mix of being quick to pick up and having powerful functionality, well, there's really only one. It's called Principle and it's one of the tools that I've recommended in the bonus material as well. It took me like, four hours to pick up on one weekend when I was working on something and the amount of motion that you can create in there is really, really powerful. The other tool that's been popular in the past is Adobe After Effects, but I'm not sure I would recommend using that. It's just so much, so much stuff and Principle has like, Principle is to After Effects what Sketch is to Photoshop, right? So because Sketch is this program that took like, because Photoshop isn't a software to make user interfaces with. We retrofitted it for that because there was nothing better out there at the time, right? But it's really for editing photos. I mean, it's named the Photoshop from photo shops back in the day where people actually went in and edited and made adjustments to their photos. So, and what Sketch did is it took out like 80% of the functionality of Photoshop and just left you with the stuff that you really need to do good UI design and Principle does something very similar for prototyping and animation. Flinto was good too. I tried Flinto, it was cool, but I like Principle a little bit better. But again, if you ask five different designers, what I would recommend is just try them out and see which one you like better.
Class Materials
Bonus Materials with RSVP
Bonus Materials with Purchase
Bonus Video: How To Get Better As An Interaction Designer
Bonus Video: Interaction Design Career Advice
Ratings and Reviews
NeeLee
After viewing this course, I have a ton of ideas to bring back to my current projects, and how I can improve my past projects, as well as best prepare for the future. Jamal's extensive experience and real-world comparative examples, helped paint the picture on how to put this course content to good use in my day-to-day design activities. I appreciate Creative Live's layout of limiting 2 questions per segment. This allowed for more time for content and I'm able to write down my questions to address and connect with Jamal offline. I'm also grateful that Jamal/Creative Live organized the course segments in a timely way that the course went fast but stayed memorable and understandable. The bonus materials are such an invaluable source of information! Jamal conveys his knowledge and passion for interaction design easily. You can tell he genuinely cares about paying his experience forward, by how he expresses his design approach and how he really listens when he's asked a question. He takes his time to think before he speaks in order to address the questions clearly so everyone can benefit. Thank you Jamal and THANK YOU CREATIVE LIVE!
Veronica Reyes
I really enjoyed this class. I've had some previous experience and training with interaction design, so this in depth course helped to re-instate core concepts and techniques as well as introducing more examples, tools, scenarios and resources that all in all made me more confident and excited about interaction design. Creative Live organized a seamless event, had delicious food, snacks and refreshments throughout the day and were very nice. Thank you CL!
Daniel Bell
This course was so much fun to watch. Jamal is a very engaging speaker and went into great detail while still being direct and to the point. The bonus videos are great! They feel like a behind the scenes look and he really goes off script to give detailed answers to questions like how to design your portfolio site. Great class!