5. Mental Models
Class Introduction11:34 2
What is Interaction Design?05:21 3
Goal Directed Design11:44 4
Mental Models19:02 6
Micro Interactions25:02 8
What are Heuristics?03:12
Make it Clear Where You Can Take Action17:36 10
Help the User Understand What's Going On14:41 11
Stay on the Same Screen19:30 12
Invite Users To Do Things06:12 13
Use Semantic Motion to Aid Understanding13:49 14
Design Research27:21 15
Scenarios & Frameworks17:09 17
The best way to explain this is with an example. Early 2016, Fiat Chrysler Automobiles recalled over one million vehicles due to a new shifter design called the Rocket Switch Gearshift. And what this shifter design does is you press this button here, and then you click, click, click, and it shifts through the gears in that way. But then the shifter always returns back to the center position. The only indicator that you have of which gear you're in is that the PRN, it will be illuminated by a light. But there's no positional feedback. I mean, well, you're getting some indicators of which gear you're in, so what's the problem? Why the recall? What happened was people were getting out of their cars thinking the shifter was in park to have the car drive off without them. Oh no. (laughter) And this led to at least 100 crashes, 40 injuries. Possibly worse, though we can't prove that. Chrysler's official response to this was, "Gear selection is conveyed to the driver "by multiple sets of ...
indicator lights, "not gear selector position, and unless due care is taken "drivers may draw erroneous conclusions "about the status of their vehicles." (laughter) Which is a fancy way of saying driver error. It's your fault, right? It's not our fault that we designed this badly. That's like classic, classic bad design. If you're making something and the people you're making it for don't understand how it works, that's not their fault. But that's a classic mistake that a lot of designers make. It's hard, sometimes, right? You make something you think is really cool, and you put it in front of people and they just don't get it at all. It's kind of-- It stings. But over time you get desensitized to that pain I guess, and you really just start to approach it as solving problems almost like crossword puzzles or something. So anyway, Chrysler's fix was to implement additional warnings and to encourage people to please read their instruction manual for their car. Will this fix the problem? No. Of course not. Because the problem is not that people aren't reading their owner's manuals. The problem is that people are accustomed to positional feedback when changing gears. This is feedback that doesn't require you to look at the gear all the time to see which position it's in, and which gear you're in. And this is a well established convention that's been around for more than 50 years. This has been around for so long it's like etched into the public consciousness now. So you can't just change a convention like this and expect everything will be all right, because people have these sets of experiences built up and they take those experience into this new thing that you're making, and that's how they expect it to work based on their previous expectations. And that's what a mental model is. An internal representation of an external reality based on learning and experience. It's sort of like a cognitive shorthand. And, you know, this is just-- This is like a fancy way of just saying that based on what you experience in your life, you expect things to work in certain ways. And you're always, not consciously, most of the times not consciously, comparing your mental model with the real world. If the way something works lines up with your expectations, you'll understand how to use it. And if it doesn't, you will struggle. When it comes to mental models there's two things to differentiate. There's the system model, and the interaction model. The system model is how something works, and the interaction model is how to interact with it, how to use it. Engineers, the people that build products, usually have strong system models. They understand how it works, very well. But they typically have weak interaction models. So they'll know how an engine and a drive train works, but not how people drive their cars. While the average person will know how to drive their car but not how the engine connects to the drive train and the gears work. The average person prefers being comfortable over knowledgeable. And that's something that's really hard for engineers to understand. It's the job of a designer to come in and fill that gap between users and builders. So designers need to have strong system models and strong interaction models. So they're sort of like translators. And that is, by the way, why, in my opinion, it's a good idea for designers to know how to code. You don't need to do it everyday. You're never gonna be as good at it as engineers are. But you should at least have coded one project from start to finish. Like done the whole pipeline. Setup the database, wrote the code-- And not like some basic project either. Not like some five page site. Like do something with logins. Do something with user profiles. Do something with a shopping cart. And code it all yourself. It will take you a couple months, but after that you'll understand systems much, much better and it will make you a better designer. I was a front end engineer for two years early on in my career. And before that I did write some code too. Like back end code. PHP, setting up databases. And I was never as good at it as engineers are, but the knowledge that I gained from it was so valuable for me as a designer because now I understood-- Now I understand why an engineer sometimes gets kind of frustrated when I make some suggestion to him of how to change something. Because this thing that took me 10 minutes to change in Sketch takes them eight hours to change in code. It can only help if you have that understanding of the systems. The more understanding you have, the more experience you acquire, you just get better and better as a designer. This is a good system model, because it does work. But it's a bad interaction model. So again, mental model is how you think something will work based on learning and experience. The way to think about it is if you're creating something unfamiliar, base it in the familiar first. This is the original iPad Notes app. There's no reason why there has to be simulated leather here or three torn off pages here at the top. There are no pages on this screen. But when the iPad came out, it was such a completely new paradigm that people-- Can I have your notepad real quick? When it first came out, it was such a paradigm shit that we had to take an analogy from the real world and transfer it over to this digital world. So the iPad approximately has the form factor of this. So it has about that shape. And then if you make it look kind of like this, your brain makes the connection. "Oh, oh. This is a note taking app." Thank you. Same thing with the address book. I mean, there's no reason that there needs to be simulated pages here in the address book. There's no point for that, except that it helps people make the connection from their physical address book, that they've been using for many, many years, to this new digital address book. Of course, you know, the classic basing something in the familiar metaphor is the desktop. When computers with graphical user interfaces first came out it was totally new. Nothing like that had ever existed before. So there was a real challenge there to explain to people how to use it. And the analogy that they came up with is, well, let's use office metaphors. This is the top of your desk. These are files. These are folders. Here's a trash can that you can put stuff in that you don't need. That metaphor served us well for a long time. There is some debate in the industry now about whether it still makes sense to do it that way. But it's served its purpose of taking people-- Helping people make that cognitive leap. Or of course an even more classic example of mental models. This is one of the first cars. What does it look like? It looks like a carriage without a horse. If someone had rolled in with a brand new S class or something, that would have just broken-- that would have broken the frame of people. It would have been too far ahead of its time. Instead they bring out this and then people can make the connection. "Oh, this is like a carriage, "but doesn't have horses, and it also has lights. "Oh, I get that." And then after that you can start evolving that paradigm. So mental models can evolve over time. Once you've done some work to take people into a new paradigm. Once people have understood that this is a screen and you can tap something and something happens. Once people have understood that, you can then evolve that paradigm. You don't need the leather anymore. You don't need the pages. After there is a sufficient level of knowledge in the public consciousness. And that's how you get flat design. What people have been talking about for the last couple of years. Because the knowledge base of the general population has gotten to a point now where people just know that they can interact with certain things on a screen. So it doesn't need to look like a physical object anymore. And after a while those metaphors actually start holding you back. Because even though it looks like a book, it is still not a book. Some of those physical metaphors actually start-- Why not take advantage of some of the benefits that a digital interface brings you. But first you need to build up that knowledge. Speaking of the gear shift example, coming back to that. This is another way of evolving the gear shift. I saw this a couple of months ago when I rented a Dodge Ram. And it was really interesting because a couple of reasons. I actually think that this is a great example of evolving a paradigm and not sticking with something just because it's always been done that way. Because back in the day, when cars were originally made, the gear shift was literally connected to the drive train and you shifted the gear manually. But these days everything is done with electronics and sensors, so there's really no reason for the gear shift to take up all of that space in the middle. You can just have a nice bench here, or some more storage space. Of course because that mental model is so strong, most people still do it the old way. What I like about this one is when I sat in that car, it's so different from what you're used to that the first thing you do is like, "Huh?" Like your brain is like forced to be like, "Huh? What?" To like understand what's going on here. But then at the same time it's so easy to understand too. It's just a big knob that you can twist. It has an indicator, and just four settings. It's like so clear that after about a 30 second learning curve you're like, "Oh, okay. That makes sense." And then the rest of it is still the same. So without like changing the entire car, just changing this one specific thing. So that is something that works really well and is a great example of focusing on goals versus just the steps of doing something. That sort of brings us to this idea that you won't always be in a situation where you're creating an entirely new paradigm. Very rarely. But when you are, you gotta make sure that you teach people well. And you've gotta make sure that it's much better than what they're used to. A gear shift that looks just like a regular gear shift but doesn't move positions, that's not much better. And what I love about this example. This is an ad for the original iPhone. The iPhone was a completely new thing when it came out. And this ad is literally teaching people how to use an iPhone, because it had never been done before. It's so good. So the takeaway is if a mental model matches the behavior of an interface-- so if it works the way that you think it's gonna work-- you're gonna understand how it works. So when you're designing for this, if you understand people's mental models you can make better design choices, which enables people to understand what you're designing more quickly, and make better decisions. Questions? Going back to the mental model with the car and the drive knob. What makes those interactions more useful than the other drive thing without the positional feedback? That was the issue for the other one too. Yeah. The reason that I think it's more-- I mean, from an actual interaction standpoint, it's not a quantum leap like the iPhone was. But when you think about space allocation in a car. Like why does there need to-- If the drive train isn't connected to anything physically-- If the gear shift isn't connected to anything physically that's like right beneath the car there's no real reason for it to be there and take up like a square foot of space. You've seen a lot of car makers trying to solve that problem in different ways. Like the Prius has a little tiny gear shift at the top. So I think the benefit of this particular design is that it frees up space in the middle. As cars are getting more and more high tech and are adding more and more functionality, space is a premium. So turning the gear shift from something that's this big into something that's this big while still retaining the essential usability of it, I think that's a big win. Have you noticed that people's mental models may differ depending on their culture, their country, even demographics like gender? And if so, how does a designer even begin to figure that out? Well, yeah. A mental model is always based on an individual's experiences. If you've never seen a gear shift before, you're not gonna know how to interact with it, probably. It's totally true that it's dependent on people's experiences. The way you go about finding out about this stuff is research. So, user research. Which is coincidentally something that we're covering in segment three about how to do good research. Because it's all about understanding who you're designing for. As you're going deeper into understanding how these people that you're trying to solve problems for, you'll automatically uncover their expectations and their mental models of things. And that's how you design for it. So the cornerstone of every effective design is solid research.
Ratings and Reviews
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!
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!
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!