Roman: This is 99 Percent Invisible. I’m Roman Mars.
Female-operated voice-over: Welcome to the Make It So index of interaction design.
Roman: Friends, our producer, Sam Greenspan has seen the color of the future.
Sam: I have seen it. You have seen it. We all know that the color of the future is blue.
Female-operated voice-over: Lesson one, future screens are mostly blue.
Roman: When science fiction becomes science fact, the team colors have already been chosen.
Sam: Pretty much science fiction is blue.
Female operated voice over: 1968, denim blue. 1976, Egyptian blue. 1979, ultramarine. 1980 powder blue.
Chris: Blue, it is inhuman, future looking, kind of mystical.
Sam: That’s Chris Noessel. Sci-fi aficionado.
Chris: There’s not a lot of blue in nature, right? There’s not a lot of blue food. So, I think there is something fundamentally inhuman about that color.
Nathan: Or unnatural.
Chris: Yeah. And that really fits the technologies of the future world.
Nathan: As contrast.
Sam: The other guy is Nathan Shedroff.
Roman: Also into sci-fi.
Sam: And like many sci-fi guys, their love of the art form takes on an obsessive quality. And here’s the thing, Chris and Nathan are also designers. Chris is with a firm called Cooper and Nathan is on faculty at the California College of the Arts, both in San Francisco.
Roman: Sci-fi obsession met design obsession and the resulting glorious nerd fest was a book.
Nathan: We’re the authors of the book, Make It So: Interaction Design Lessons from Science Fiction.
Sam: Make It So is a comprehensive compendium of real-world lessons that designers can and should and do take from science fiction. So, to give you an idea of how exhaustive their line of inquiry is, that lesson about future screens being mostly blue?
Female-operated voice-over: Lesson 1, Future Screens are Mostly Blue.
Sam: Nathan and Chris actually figured this out empirically. They built a database of more than 10,000 images from sci-fi movies.
Female-operated voice-over: 1982, royal blue. 1983, prussian blue. 1986 [inaudible] blue. 1990, periwinkle.
Chris: Then I went through and I sort of cropped out the key screens of interfaces, stuck them into Photoshop for a given year, shrunk them down to a single pixel and then pumped the saturation.
Female-operated voice over:1996, iris blue. 1997, aquamarine. 1999, baby blue. 2000, midnight blue. 2002, aquamarine again.
Sam: And from that, they could determine the average color of all interfaces from every sci-fi movie that came out in a given year. And when you lay those average colors next to each other, you can see–
Chris: 1968 to 2011, pretty much science fiction is blue.
Roman: There are some exceptions.
Female-operated voice-over: 1973, amber brown. 1977, tangerine. 1991–
Roman: For 1991–
Female-operated voice-over: Scarlet red.
Roman: The very red, Terminator 2.
Chris: But, for the most part, if you just blur your eyes and glance at it, you can see that it’s always blue.
Female-operated voice-over: 2003, dark cerulean. 2004, slightly darker baby blue. 2005, mint green. 2008, again with the aquamarine, slightly darker this time. 2009, pretty close to that baby blue from 2004. 2010, navy blue.
Roman: Of course, the point here is not to forecast what technology will actually look like.
Sam: Screens of the future may or may not actually be blue.
Roman: But sci-fi is about letting our imaginations run wild and create imagined worlds. And someone has to design the experience of characters moving through that imagined world. And even if your sci-fi world is a thousand years in the future, those choices are in constant dialogue with the present.
Sam: When Chris and Nathan started this project, they went back to the very first sci-fi film, Le Voyage Dans la lune (A Trip to the Moon) by Georges Méliès. It was actually one of the first films, period. It premiered in 1902.
Chris: And the thing that I noticed when I saw that movie was, wait a minute, where the hell are the interfaces? Um, because there aren’t any.
Sam: In this future as seen from 1902, you send people to the moon by putting them inside a giant canister, loading that canister into an enormous cannon. You light a wick and then, bang! that’s how you get to the moon.
Chris: The audience and even the filmmakers still had an industrial age paradigm. In their lives, they only ever encountered levers and buttons. Maybe, technology and electricity were kind of strange and off-putting things.
Roman: The 1902 audience did not require any type of UI for a lunar spacecraft, which tells you something about living in 1902. But Chris and Nathan say sci-fi doesn’t just reflect reality. Reality sometimes reflects sci-fi.
Chris: That when components of science fiction saturate the public imagination, it can affect how we design things. Case in point, one of Motorola’s first cell phones, The MicroTAC.
Nathan: And it was not a particularly successful phone.
Sam: Now, the MicroTAC was a flip phone that opened downward.
Roman: You have the device in your hand and the mouthpiece flipped down so you could talk into it.
Sam: And the MicroTAC wasn’t selling.
Chris: So, the Motorola engineers in Illinois took it down the road to the Argonne National Laboratory.
Nathan: And the Argonne engineers immediately said, “Oh, you made it wrong.” And the Motorola folks were like, “What do you mean? No one’s ever made one of these. How do you know it’s wrong?” “You know, like on Star Trek.” And they said, “It has to open up like this.”
Sam: The Argonne engineers just expected the phone to open upwards like Captain Kirk’s communicator. Downwards just felt weird.
Nathan: And they went back and made it open the right way and then–
Roman: And then the next generation–
Sam: Well, that phone went gangbusters and it was called The StarTAC.
Chris: Motorola accidentally happened into a system where their customers had been trained for 30 years of reruns on the right way to do mobile communication.
Sam: There’s actually a whole host of design lessons to take from Star Trek.
Female generated voice over: Lesson two. Establish a comprehensive visual syntax.
Roman: Star Trek, The Next Generation excelled at creating a holistic visual syntax. And it was probably thanks to extreme budget constraints.
Nathan: They didn’t have the production budget to just wire tons of surfaces with dummy buttons and have them lit individually so that they could control them. And as a cost-saving move, they sort of developed this idea of, well, we can just print out film and backlight it under surfaces and that can serve as the sort of wow factor of, man, there’s a lot of controls for this. It must be a starship.
Male generated voice-over: Working. Ready.
Roman: If you’ve seen one episode, you know what this looks like. A flat-screen with a black backdrop and a bunch of brightly colored buttons underneath a glass exterior. They’re everywhere on the ship. The bridge, the sickbay, engineering. They’re on the tablet computers.
Nathan: Essentially all of the controls show up that way.
Sam: They all have this uniformity about them that not only looks cool but also tells you from a very quick glance that it’s related to Star Trek. They even give the interface a name. LCARS.
Female generated voice-over: Accessing library computer data. This computer terminal provides full access to the LCARS computer net. It can be operated both by voice and keypad command.
Chris: I do have the definition for those curious. It stands for Library Computer Access/Retrieval System.
Nathan: There you go.
Roman: LCARS was the archetype of the image under glass paradigm that governs our virtual lives. And people really latched onto it. To this day, there are still people modding their computers and tablet devices to make them look like an LCARS device from the 24th century by way of the late 1980s and early ’90s.
Sam: But here is a really brilliant thing about Star Trek. Every single species has their own equivalent of LCARS. So, the Klingon race, for instance, it’s all red triangles. The Bajorins have the sort of bluish purple oval thing and the Borg have an array of green circles and green lighting everywhere.
Chris: It’s a symbiotic lesson for storytelling, right? Green equals Borg and wherever green creeps, you know, the Borg are. That’s sort of– essentially, a visual macro for an entire class of stories.
Nathan: It’s their own brand and they’re really good brand managers.
Chris: Yeah, they have good brand managers.
Sam: But Chris and Nathan are quick to point out that not everything we see in sci-fi is necessarily good or even feasible. From the minute we started our interview, they could not wait to go off on how much of a waste of time they think gestural interfaces are.
Roman: Think Minority Report.
Nathan: When you move your arms in space, that’s called cardio. That’s aerobic exercise and it’s tiring.
Female generated voice-over: Lesson three. Avoid gestural interfaces.
Sam: Supposedly, Tom Cruise had to keep taking breaks on the set because these things tired him out.
Roman: That future looked exhausting. Even if conducting your computer like an orchestra turns out to be a dead end, that bad interface of that imagined future can help you think about actual user interfaces of the present.
Sam: And that’s how we can get into apologetics.
Female-operated voice-over: Lesson four. Employ apologetics wherever possible.
Roman: Apologetics is a term borrowed from religion, primarily, is the practice of coming up with rational explanations to reconcile the apparent contradictions inside of a faith. Basically, making sense of the plot holes that surface when various religious stories are stacked on top of each other.
Sam: This can become applicable to sci-fi. If you just assume for the sake of argument that everything in sci-fi is there for a reason.
Chris: You can find some really interesting lessons in design. So, let’s consider Star Wars. Namely, that part when Luke and Hans Solo or in the Millennium Falcon blowing up TIE Fighters.
Luke Skywalker: Haha! I got him! I got him!
Hans Solo: Great kid! Okay, copy.
Sam: Now, if we were really in space watching these ships blow up, we wouldn’t hear anything.
Chris: I mean it only takes that moment where you have to describe it and you realize, wait a minute, they are fighting in the vacuum of space. Where exactly is the sound propagating?
Roman: Because sound is how our brain interprets the vibration of air molecules.
Sam: Of which there aren’t any in space. So, why do we hear these ships exploding in the film?
Chris: The easy answer would be, “Oh, that’s just Lucas trying to make something that feels right to people who were used to World War II film footage.” But in fact, if you imagine that scene without the audio, it’s a lot more miserable of a task to know where in 3D space are these TIE fighters around me, how would I find them? Sure, you could give me a screen. But that requires me that I take my eyes off of the action. You can give me a heads up display which might work but audio is 360 degrees. Much more than my– what is it? 120 degrees of vision? So, if that audio wasn’t there, then you would expect somebody to put sensors on the outside of the Millennium Falcon and provide 3D sound inside the gunner ship that would put that audio there.
Sam: So, the sound is an interface.
Chris: The sound is the main part of the interface there, right? Yes. Luke can look at this TIE fighter but he’s also aware that coming over his right shoulder is another one that as soon as this one explodes, he’s got to turn his gun and take care of. That’s vital to that interface of working. And you can only get there by trying to reconceive, why does that thing that seems broken would really work.
Sam: Okay. So, here’s another one. 2001, A Space Odyssey directed by Stanley Kubrick.
Chris: So, in 2001, Dr. Floyd is on a satellite and making a video call to his daughter back on Earth.
Dr. Floyd: Hello.
Dr. Floyd: How are you, Squirt?
Daughter: All right.
Dr. Floyd: What are you doing?
Dr. Floyd: Where’s Mommy?
Daughter: Gone to shopping.
Sam: And then you see his daughter start button mashing the controls on the videophone.
Roman: But strangely you don’t hear any of the buttons.
Sam: Now you can think, hey, that’s wrong. Was the sound designer sleeping on the job? But with our apologetics hat on.
Chris: But in fact, that’s the way it ought to work. If you had a system that was context-aware and that would include awareness of the identity of its user, it would say, “I’ve looked at this conversation. No one has asked at this little girl to push a button. She is a little girl of about five or six years old and it’s indiscriminate mashing. I can safely disregard this as input. It’s not a crisis. It’s not a selection of any sort.” So, if you were designing a system that was truly context aware, that’s exactly the way you would build it. And anyone who’s had to have a telephone call with a kid would know this, is actually the way it should be built.
Roman: And so, the inputs to the interface are just not getting relayed.
Sam: The interface is actively interpreting them.
Female generated voice-over: Lesson five. Interfaces should not just interpret but also report.
Chris: That’s only broken if you presume that the interface is a dumb capturing device like a television camera. If instead, you reconceive of it as sort of a real-time scanner, interpreter and presenter, you’ve got an opportunity there to actually interpret the information.
Roman: Let’s do one more. This one’s kind of tricky. But stick with it.
Female generated voice-over: Lesson six. Find the human factor in technological shortcomings.
Chris: For this lesson, we go to a movie called Logan’s Run, where there’s this interface called The Circuit which people of this post apocalyptic world used to find–
Nathan: Sex partners. It’s Craigslist.
Chris: It’s even weirder than Craigslist.
Nathan: It is so weird.
Chris: And actually–
Nathan: That’s saying something.
Sam: So, Logan is hanging out in his apartment of the future and he turns on this thing called The Circuit, which basically lets him tune in different people who are ostensibly available for coupling. Anyway, the thing about the Circuit is that it’s a really clumsy piece of technology. We can see that it takes kind of a long time to tune someone in and then it’s up to Logan to decide a quick yes or no as to whether he wants to pull that person into his apartment or send them back out into the ether.
Chris: As an interface, it’s unbelievably bad, for lots of reasons.
Nathan: Like the male gaze problem alone, in this case, is just morally reprehensible. But if you can get past that for a second, just notice that the circuit only lets you tune in one person at a time. And you have to give a quick yes or no answer as to whether you want that person coming into your apartment.
Chris: If he’s going along and he sort of says, “Oh, number one’s not good. Number two is not good. Number three is not good. Number 4– okay, well maybe, was it two or one that was better or maybe I can go back. But you don’t see a mechanism to go back.
Nathan: And to make things worse, there seems to be no ability to adjust the settings of what or who you might want. Like the first person that Logan tunes in is a guy and you can see right away that our hero does not want to pull him, or any other dude into his apartment.
Chris: Pardon my gender or sexuality binary here, but one of the most fundamental things you would name is what’s the gender of my possible partners. And that he didn’t have a single preference setting on this interface. So, it just seems horrible.
Nathan: But there is evidence that this design has some merit, if you can think of an apologetic for it. Listen:
I used to play this game with friends of mine called the 11th Man Game and the 11th Man Game or the 11th Woman Game depending on who you’re playing with, works as follows: When you’re sitting in a public place, you pick a doorway and you challenge that friend and you say, okay, I want you to pick one of the next 10 people to walk through that doorway to date or if you had that sort of friendship, have sex with and/or you will be forced to do that same thing with the 11th person.
Sam: Okay. So, you’re with me. You see person one. Yes or no. You say no, you get person two. Yes or no. You say no, you get person three.
Roman: You can’t go back and pick a previous person.
Sam: No going back. And if you say no all the way up through the 10th person, you have to take the 11th person. So, according to Chris when you start off playing the game–
Chris: And you begin to play this, people are looking at negatives. Oh, let’s pretend I’m playing with a heterosexual man. He’d be like, “Oh no, she’s too short or I don’t like her hair color,” or whatever. And eventually, they would get to eleven and go, “I didn’t expect that I’d be with a grandma.” And then he’d freak out or whatever.
Sam: But after playing for a while, there’s the shift in strategy from looking for reasons to reject someone to looking for reasons to accept someone.
Chris: Over time, the strategy shifts from that negative view to a very positive one which what is not wrong with this person but what is right with this person and then being satisfied with that choice. And over time, people begin to adopt that positive search mode.
Sam: So, if the designer of the Circuit’s computer wants Logan to find a mate that he’s going to be happy about and the limits of the technology are such that Logan can only specify yes or no and can’t go back to a previous choice.
Roman: Then displaying a throwaway candidate early on will make Logan more likely to find an acceptable choice sooner because he’s immediately primed to look for the positive attributes in the candidates that follow.
Chris: Tada! It’s super subtle and in fact, I think when I first started talking about this, I kept talking about how bad it was and then stumbled across this goodness, which is as good a way to get to apologetics as any.
Roman: I love this game of design apologetics because greater knowledge and awareness usually leads us down a path of miserable nitpicking. And I’m all for good criticism. But if you can apply a design solution to account for a bad design decision in a sci-fi movie, it uses the same critical muscle but in a different way and the apologetics are endless. Like for example, let’s take lesson number three about bad gestural interfaces. Maybe in the Minority Report world, people were really sedentary and these types of interfaces were the way to get people to get some freaking exercise.
Female generated voice-over: Strike lesson three. Gestural interfaces might be okay. Boom!
Sam: And that leads us to our final lesson.
Female generated voice-over: Lesson seven. Find your own design opportunities in science fiction.
Sam: Since talking sci-fi apologetics with Chris and Nathan, I can’t help but look for them everywhere now. I even found one that had escaped them. We had gone off on some tangent about the Star Wars prequels.
Chris: Queen Amidala has an interface for which we cannot apologize.
Roman: Which is ironic because I believe I deserve an apology for every aspect of the Star Wars prequels.
Chris: On her giant silvery spaceship and I’m sure it has a name somewhere in the Star Wars canon but I can’t remember. And she got this sort of big panel of controls. But when you review it, the three times that she uses an interface aboard the ship, they are for routing a hologram or a volumetric projection across the galaxy. Second time, she uses it is for summoning a star chart of a distant planet. I think it’s Kenosha. And the third is to land her spacecraft on Coruscant. But when you look at those interfaces, the actual interaction she has is to press the exact same button on the panel on the ship to do all three things and nothing else.
Roman: So, the gripe is that you see her using the same single button for very different tasks.
Nathan: Right. But I actually came up with my very own apologetic.
Sam: If she is the queen, she probably has a lot of underlings. And there’s probably someone somewhere off screen who does everything for her and this is the Make It So button.
Nathan: I like that. There’s like a computer management– communications management room somewhere on the ship and they’re just like, “Oh, she wants to do something.” But, I like that.
Roman: It would be hilarious if she pressed the button and a bell rang in another room. Ding ding ding ding.
Chris: Literally, a little bell on a string.
Roman: Yeah, a little bell. It’s her dinner bell, right?
Nathan: It would be the Jeeves button.
Chris: Right. Do that thing we were discussing vaguely.
Roman: 99 Percent Invisible was produced this week by Sam Greenspan, Avery Truffleman and me, Roman Mars. We are a project of 91.7 local public radio, KALW in San Francisco and the American Institute of Architects in San Francisco.