One benefit of design systems is that they help ensure consistency across surfaces, platforms, and projects. The BBC claims that their design system, GEL enables them to “create consistent and delightful user experiences” while Salesforce highlights consistency as one of their four design principles. But what does consistency mean in practice and when can it create conflict in a design system?
In this talk we’ll take a look at the differing types of consistency (internal, external, and real-world) and how they work in digital and physical interfaces, and we’ll go a step further and dive into the myriad reasons that inconsistency can make sense, too. You’ll walk away with a framework for making better trade-offs when deciding for or against consistency.
So, our next speaker is Abi Jones and she is a designer and sprint master of Google. She also designed social systems for Myspace, as well as campaigns and e commerce systems. She's been around the block. Not only is she a problem solver in text base, but Abi is also an illustrator and she illustrated the second edition of Understanding Your Users, amongst other things.
So, multi talented, human here on stage to present to all of you. So, today, she is going to be arguable for and against consistency, which I love seeing talk title.
Do I have a thumbs up?
So, Abi requested a lot of applause, specifically, so I want to hear a lot of applause to welcome Abi to the stage.
Yes, I have slides. That doesn't move. That's really helping. Okay. Oh, yes, all right. Sound, too. Hey, I'm Abi Jones. Before I start talking, I want to ask if any of you have ever used the the reason of consistency to explain why a certain interface should be implemented? You're all horrible.
I've been told the spotlight is over here, but it's nice here because I can actually see all of you. So, I'm up here today to talk about reasons why consistency is helpful but also not to be consistent with your interfaces.
Before I do that, I have to give you a disclaimer because I work at Google, so you should know that, my opinions, they are not Google's opinions. Google is not claiming to be up here.
Today, I'm going to give you examples of brains, experimental aircraft, Google Docs and Q&A afterwards.
Put your hands in the air. Put your hands in your lap like this. You can close your eyes, if you want, and imagine a keyboard. If you're using a browser, can you open a tab, like, your laptop. What about making a rectangle? What if you don't want a rectangle, undo the rectangle. You probably developed pretty good procedural memory in using a keyboard. What is procedural memory? It's what we think of as muscle memory. You practice so much that you don't have to think about it anymore and thinking about it makes it hard to do that thing. It's not in your muscles, it's actually in your brain. It is partially stored in your cerebellum. That is the part of your brain back here. It doesn't just take place in one area of the brain.
We use procedural memory when we ride a bike, tie our shoes, type on a keyboard. And, so, if we think about Milt Thomson, this is him with test flights at Edwards airforce base. When we was doing test flights, the U.S. Space program was using these types of pods to land people from space. You can't see it, here's the outline. There's a lot of problems with using a command module as a spacecraft and returning to earth. You're falling through the atmosphere without control and you land using a parachute. Sometimes, astronauts would be hundreds of miles off course. NASA was working on some test aircraft.
The other issue with landing with these kind of pod things is that forces are in the wrong direction. So when astronauts are in the pods, they'd be laying backwards. You can actually withstand higher g force if it's eyeballs in versus eyeballs out. I never really thought about eyeballs out until I was reading about experimental aircraft. It feels like your stomach is in your throat, that is your stomach literally trying to go into your throat, just so you know what's happening.
Eyeballs in, easier to withstand. G force is coming in front of you. This is the M2 F2. It's not a light weight glider. It's made of steel core and aluminum and it's pilotable. It can land with it and somebody is coming in and experiencing g force in the front and they might be able to land in the right place.
A predecessor to the spaceship. These are from 1966. The space shuttle went into effect in the early 80's. There's a problem, though, these things don't have wings on the side so they're really unstable. They experience lateral oscillation. The engineers and designers knew it would have this problem, so they put a special wheel on the aircraft so a pilot could control the rudders. The rudders are on the back of the plane. The flaps are on the side.
So, they put them on these wheels and on the morning of July 12, 1966, Milton Thompson got into the wing of the airplane. It's 10 and a half by 11 feet wide. It's a really small aircraft. They're going to have them land. So what Milton went through, he did his checklist. Made sure all of his instruments were in the right place. We actually have video of this event.
So, not much better than the other spacecraft, at this point. Just being dropped through the air. But, the thing about it is it has a jet engine in the back of it where you can actually steer it. The bad thing about it was that as Milton was meeting maneuvers and leaning up, he felt like there could be a control ability problem with the aircraft so we moved the wheel to the side to reduce the oscillations that were happening and instead of getting a reduction in oscillation, it got worse and where he was expecting slight lateral oscillation, his aircraft starting bucking back and forth. This wouldn't have been that big of a deal, except that he was at 8,000 altitude and descending at 18, 000 a minute. Less than 30 seconds to go, what Milton had to do was ignore all of his procedural memory that he'd built up, training for this mission and instead, he reset everything to zero and stopped messing with it. Because you have P I O, the best thing to do is stop giving the aircraft input and instead, let it down off the oscillation on its own.
And so with less than 30 seconds to land, he let go. And landed. He ended up flying a half a dozen test flights for this specific aircraft. The final test with this aircraft ended as a spectacular crash from the other pilot. But what happened? What did the aircraft end up having longitudinal oscillation? Why didn't it work to control the amount of oscillation that was happening during the flight? Oh, here's the wheel. And here's the simulator. You can see the plywood on each side. It's built out of some old jets. And the problem is that, when they built a simulator, they hadn't designed any yet and so the engineering team used an old brake handle for another aircraft and stuck it in the same spot, but when you push the brake handle forward, it increased the ratio. Whereas when you push the wheel forward, it decreased the ratio.
It's kind of like complete, unexpected interaction there through something that's mediated through another interface. And, so, I have a feeling that very few of you are aircraft designers. But the reason you should care about this is that we design a lot of interfaces that have significant impact on people's lives, either because of the people making decisions about the health or safety or well being of other people or because you're designing software and tools that help people connect with their loved ones, make financial decisions or keep up with their own health.
We hear a lot about making interface intuitive. But really intuition means something has become part of your procedural memory and you can do it without thinking. Trying not to use the term, intuitive, it's something that doesn't really exist. Everything that we do is learned or a response to some sort of stimulation. I like to think about making software that's predictable, especially when it's software trying to do a job.
Today, let's look at a few different types of consistency and how it can help people. Three ways, are thinking of internal, external and a real word consistency. In internal and external consistency, we can look at color, typography, language, visual elements and layout and location and interactions. Layout and location and interactions were the main problems that Milton had.
There are benefits to having internal consistency and interface, it allows users to bootstrap initial learning.
So, let's look at a couple other examples in internal consistency. Here, we have sharing in Google Docs. You can see that on the top, I can hit the share item on the menu. When the mode pops up, which uses the same language, which is about sharing. If I want to use the mobile app, it doesn't say share, it says, add people. This is something really confusing. Somebody says, oh, wait a minute. Is there a difference? What happens if I add people verses when I share with people? It's not just about naming things, but about using the same language each time when somebody's going to perform similar action.
In the same menu, I can rename a document or share it. You can see from those two modals. One is share design, you never see them at the same time. And they're similar enough to each other, they use the same terminology and interactions and colors, that it's easy to get away with being inconsistent here. The reason it's important to start thinking more about consistency is that positive control is a depletable resource. So, think about how hungry you are right now. And the hungrier you get, the worse you will be at processing what happens when I talk. Or, any other information you hear. And it's the same with inconsistency. It's mentally taxing and having one that is consistent can help reduce the cognitive load on your users.
Let's take a look at versions of external consistency. Who here uses an iPhone? An android device? Any other kinds of phones? When I worked at Myspace, I used a Blackberry.
If you use an android device in 2016, you would see this emoji. I'm not an experienced emoji user. Technically, I'm a millennial. I feel nervous about using emojis. Maybe I feel nervous because I see this one as a nervous sweating.
So, at work work is tiny, too. It's not 10 feet tall. To me, the version, it'll look like sweating. One of our colleagues, we're always using nervous sweating.
And it was like, maybe it's just me interpreting it that way because I sweat a lot and it turned out that was the case because on an iPhone, it looked more like this. While you're laughing, not sweating. Or, sweating and sweating out of your eyes.
So, I have my own problems with emoji. I'm not alone in this. If you look at the grinning face, there's some research out there that there's a high variance how people interpret this grinning face. You can see the apple one has as negative reaction and the Google one has positive. They're sending completely different messages to each other, which is horrifying. And even within just the iPhone version of it, there's really wide degree of variance, some people would think, oh, super positive. And then a serious number of people say this is a very negative emoji, it's called grin. It's very problematic. You could send a message like, just went on a date.
But if your friend is on an android device, they see this.
So, external consistency is is consistence used to communicate with each other. It is bridging the knowledge gap. Your current knowledge point and there where you want to be in the future, here's the knowledge gap. So, think about something like Microsoft Word and you can see, at the very top of it, got some buttons, drop down menu for text, drop down menu to choose text size, which is similar to this other interface.
You were thinking about being externally consistent. Do I want to bootstrap learning from another interface and make it possible for all those users? So, think about elements of consistency, aside from typography, they're pretty much there. If Google Docs had used neon colors and used different language for the top menu items, like file, edit, view, insert, which are I have to say, the first five menu items on both of these UIs are exactly the same. Language is the same. Visual elements of the same, drop down menu and they are laid out and located in the same place and aside from the real difference in Google Doc, which is the ability to edit at the same time as collaborating with people, the interactions on these two interfaces are the same.
We don't want to underestimate the proficiency or efficiency of our users. Because the people who use our products, unless you spend most of the time at other people's houses or unless you own Pokémon. People kept using Facebook, YouTube and Snapchat. People who used Pokémon go were using as a much higher rate than they were any of those other applications which would have been a prime time for those applications to steal interactions from Pokémon go. I'm a big fan of using the same interactions across different interfaces, in part, because I rely on procedural memory a lot as a designer. It's important to be able to mindlessly build a new grid or design a new interface.
Does anyone here use Photo shop? Those are the lowest raised hands I've ever seen.
What about Sketch?
So, I switched about five or six years ago from Photo Shop to Sketch. The letter, r, for example, has vastly different meanings between Photo Shop and Sketch. When I tried using Principal, there was a moment I never read the instructions for anything. You open up software and you try using all the keyboard shortcuts you already know and you have this feeling of holding your breath, like, please let it work. Please let it work. Please let it work. Interaction was like this. It's a rectangle.
I was like, I like this.
It is really important. You can make 100 rectangles a day. If you don't have to think about how to make a rectangle at the time, that's really nice.
So, if you're thinking about making some design software, or making improvements to design software, make sure you understand what your users are doing and what they're using and try to take the shortcuts and the mental modal you already have and use it in your own software. So, you want to attract interesting users to your products. You just try to interpret users demands in the same way.
I feel good about putting it up there rather than saying it myself. But it wasn't it's not
So, these conceptually consistent interfaces are faster and more dependable. If you're a Sketch user and use Principal, it uses the same metaphors and shortcuts you're already used to. So you can see across interfaces. Photoshop, Sketch and Principal. The metaphors translate.
Real world consistency before I tell you all the reasons not to be consistent. One of my favorite applications is where you're at an office and you can get to try out interactions by doing things people do in offices, like drinking coffee.
The first time I used virtual reality I have to say, I've never used virtual reality at home. The first time I used it, I played this test game for V R skills. Can you turn off the sound? Thanks. So, I went to I was wearing this crazy headset and it's attached to a cord at the back of my head and I'm in a virtual reality room with 10 of my peers, very vulnerable feeling. I played this and I put headphones on. I was like, okay. Have my two joystick controllers. I poured myself a cup of coffee and I was paying attention to something else and I bubbled my coffee and the coffee, you know, virtual reality, I jostled it in the cup and I realized, oh, no, I need to hold this cup straight so I don't spill this coffee, which is ridiculous. But because the physics of the coffee were consistent with real world physics, my reaction to it was as though it was in the real world.
So, consistency, it builds from prior knowledge and maps to people's concept model of the world and it can close a knowledge gap. It's important to think about consistency and how to apply it because it's not mechanical. Software does not have to reveal the inner workings of a system to be able to provide it to people.
So there's inconsistency in the interfaces we create. So, the first reason for being consistent is technology should make things easier than they are in the real world. If your interface makes something is consistent, makes something harder to do, you haven't done a good job. You should be inconsistent and have a better metaphor. I mean page sliders, tab on a UI or thinking about a desktop. You should save or not save things to a folder called desktop and it is in no way a desk top. Think about Tinder, it's a metaphor for a different way about judging somebody's looks. You wouldn't want to apply this to adopting a baby or foster kid. For trying to figure out if you want to have sex with somebody, it can be helpful.
So, if you think about coffee, small, medium, large cups of coffee. But if you want people to think about your coffee in a really different way, you can call your cup sizes by different names. This only really works if you're planning on opening up 10,000 places around the world and dominating the industry.
You should be inconsistent when you want to have fun, not just when you want people to play games but when this is especially important and difficult crowded marketplaces where you need a bit of inconsistency.
And it should be inconsistent to use the advantages of technology. My favorite example of this is teleportation. Think about the pipes in Mario Brothers and how you use a pipe to get from one place to another. It's important to think about what makes the technology so special, what is different and start using that. With virtual reality if it is consistent with real life, what is the point of putting on goggles? If you can fly through the air, you can be teleported, you can instantly zoom around and blow things up or take things that are usually large and make them tiny. So, if you are designing virtual reality, let's say that consistency is more your enemy than your friend.
So, types of consistency, internal, external, real world consistency. Within interface consistency, we have six general areas that are important to us. You should be inconsistent when you have a better metaphor, you want to stand out or have fun or creating a project. You can know your users and your tasks and doing a little better than everyone else.
So, thank you.