Monthly Archives: March 2014

The Fifth Element Movie Night Pre-Show

by

0

IMG_4454

For those who missed the first sci-fi interfaces Movie Night, my friend Reed stepped up and brought a multi-camera setup to the event and edited in post so you could vicariously see what it was like. Watch above, but if you’re more interested in reading, the transcript (edited because the messiness of the spoken word) appears below.

[0:00] INTRO

Hey, good evening. Thanks for showing up. This is actually a wild hair idea that occurred to me in the shower about three and a half weeks ago. My name is Chris Noessel. Every year for the past five years I’ve hosted a private showing in my home, and I thought, "How on Earth and I going to cram all the people I want to invite into my small living room this year?" I tried to work out the logistics and just failed. But fortunately I was able to contact The New Parkway and they said, "We love this sort of thing. And we have a slot open. And we have the film pre-licensed." So for all those reasons a big round of applause to The New Parkway.

[0:52] THE PROJECT

So I’m going to do one plug really quickly, if you’re not familiar. You’re here because you love the movie. I’m going to tell you a little about the project that this evening came about from. About six years ago my coauthor Nathan Shedroff approached me with this cool idea about a book. He noticed that the Motorola Star-Tac phone was surprisingly like the Star Trek communicator, and thought, "Hey, there’s probably a connection here." So over the course of about six years we collected every sci-fi interface that we could in an online database. We tagged that cloud with a database and wrote a book about the results. That book was published in 2012. We just went through our second printing where all of the errata (that many people here may have pointed out) is now corrected. In fact, one of the awards for the trivia contest is a copy of that second [printing].

[01:45] INTERFACE TRIVIA!

So, that’s what that project is about. Since just before the release of the book I’ve been hosting a website called scifiinterfaces.com where I’m slowly releasing that database that we built up and adding a few other things, so it’s actually quite a lot of nerdery all in one place.

IMG_4476

So I want to start up the evening. What we’re going to do is some Fifth Element interface trivia. What I need is 10 volunteers…

[No spoilers from the transcript! Answers to the trivia are in the video. If you want to try the questions yourself, put your answers in the comments before watching it, though all the awards have been given out.]

  1. Why is March 18 Fifth Element Day?
  2. How many cigarettes is Korben allowed each day?
  3. How many points does Korben Dallas have on his license when he gets in the taxi, and for extra credit, how does he know?
  4. What Big Label appears on this interface in the film?
    ZSA_blank
  5. What Big Label appears on this interface in the film?
    fifthe-attackdetection-008_blank
  6. What Big Label appears on this interface in the film?
    NF_blank
  7. What is Leeloo looking at when we see this close up of her eye?
    thefifthelement-eye
  8. What word is repeated three times in the encyclopedia?
  9. This image is associated with which entry in the encyclopedia?
    chimpanzee
  10. This image is associated with which entry in the encyclopedia?
    Napoleon
  11. Fill in the blank "This is a police patrol. This is not an exercise. Can you please spread your legs and _______________."
  12. In the pilot of sci-fi university, the weapon against ultimate evil is an example of what two interface principles?
  13. Can you name any of the four things that the design of the ultimate weapon tests for?
  14. What does it mean that the ultimate evil approaches Earth in exactly the right bearing and at exactly the right time to be stopped by a spinning weapon that cannot be aimed?

[21:06] SUCH INTERFACE

As you may have surmised, the blog covers individual interfaces in movies. I’m going to talk very briefly about one that appears in this film.

One of the reasons why I picked The Fifth Element to watch annually is that it has a number of great interfaces. On the blog there are 53, some of which contain multiple interfaces. It’s chock-full of interface goodness. We’re going to talk about this particular one. Note that this isn’t one of the great ones, this is one of the ones that could use improvement.

[22:14] 4 A DAY

So let’s take a little tour. When Dallas wakes up we see that his apartment sort of "comes on" after his alarm, and one of the things he does is he walks to this machine to get his cigarettes. At the very bottom it shows what his goal is. "TO QUIT IS MY GOAL." (That’s what the shirt says.) At the top is kind of a reminder. It says, "Quit smoking!" With "4 Refill" and "4™ a day." On the right side is this utterly inexplicable LCD display. I think those "1s" are meant to represent the cigarettes, but I’m not certain. And I think in the center is a huge, overblown "there are four left." Why on earth would you need that, when you can glance to the left and look? And the last thing. Is that the temprature of the cigarettes? Is it important that they stay at 27.5 degrees? Really, that makes no sense at all.

And then this is the interface panel that’s he’s got, the buttons that he has to push, and they make more sense. You’ll see Korben only presses the bottom one and it’s kind of useless.

Audience member: It’s a tiny humidor! [This is brilliant, whoever suggested it. But I looked, and it’s too warm!]

To explain why this is good, we have to dip down very briefly into persuasive design. Has anybody here every studied persuasive design?

[23:19] HOT SIGNALS IN THE PATH (poorly explained)

Awesome. Did you study under B.J. Fogg? B.J. talks about a principle called "putting the hot signal on the path." What that means is, when you are trying to provide a trigger for a user to get them to recognize an opportunity to change their own behavior, it needs to be a hot signal. Hot in this sense is one that gets the user’s attention readily. And that’s one of the problems with this interface. There are signals all over it to tell Korben, "Hey, you don’t want to keep smoking." There’s a surgeon general’s warning in the back. There’s that reminder of the goal.

But we also know that humans have a psychological capacity to habituate. You see something a number of times and you’ll stop seeing it anymore. (The other thing is that if the surgeon general’s warning is meant to persuade anyone, it’s behind four glass vials where it absolutely cannot be read. It’s a piece of misery.

I have one story to tell to illustrate the hot signal in the path. Back when I had a small apartment in Houston, we had an air conditioner that was located in the attic. It had a drain pan that actually dripped through a hole in the ceiling directly onto the head of the shower-er. That was freezing. I hated this thing. I thought, "Screw that." I took the hole and moved it to the side. (Oh wow you can’t see me there. I disappeared when that happened.)

This seemed to solve my problem. I had no cold water, I could enjoy my showers. But what ultimately occurred was that the water flooded the drain pan above me. My short term goal of not being frozen to death was actually a bad thing to design for. I should have left it above me because it was a hot signal in the path. (The irony there I hope you’ll appreciate.) The signal was in a place where I would encounter it, in a place the designers know I would be. And that’s what hot signals on the path are.

fouraday_comp

When we take that same principle and apply it to the interface, we want to stop the habituation by having this [the goal statement] be an e-ink display that changes every day. And [the surgeon general’s warning] be an LED screen that changes and doesn’t show text. You can’t read text there, through a glass vial. What you want to see back there is an image. And I borrowed one of the images from the Australian cigarette packages that are really gory and really gross and make you think twice. "What the heck am I about to smoke?"

[26:01] WRAP UP [Leaving off the transcript]

Okey doke. That’s all I’m going to leave you with. Because a) there’s beer and b) there’s a cool movie to watch. But if you dig this kind of thinking, there are four places you can get it.

[26:19] MOAR

[26:41] 3 quick announcements:

  • I have Movie Night shirts up at http://26253.spreadshirt.com/ (What’s that red cross-bar for? The site was down at the time.)
  • If you’re interested in trying some future thinking, come to Cooper’s Design the Future class, which I’ll be teaching.
  • Stick around for a post-show preview of the next sci-fi university

    • OK, we’ll see that start in about a minute. You guys enjoy the show.

FedPaint

by

4

Fedpaint_big

Students in Starship Troopers academy have access to desktop computing environments during class, including a drawing and animation program called “Fedpaint,” that had a number of very forward-looking features.

The screen is housed in a metal bezel that is attached to the desk, and can be left flat or angled slightly per the user’s preference. A few hardware buttons sit in a row at the bottom of the bezel. (Quick industrial design aside: Those buttons belong at the top of the bezel.) The input device is a stylus. (Styli had been in use in personal digital assistants for over a decade when the film came out, I don’t think they had been sold as the primary input for a PC.) When we first see Johnny using the computer, he is ignoring his citizenship lesson and using Fedpaint instead.

StarshipT_013

The main part of the interface is a canvas. Running along the left and bottom edges are a complex tool palette and color picker that is vaguely reminiscent of Windows 3.0 WIMP applications. It’s easy to tell which category and tool is selected. (What color is selected is unclear.) I’d even say that most of the icons, while a little ham-handed and completely lacking labels, convey what they would do pretty clearly. The tools also seem to be clustered logically with categories across the top left, tools in the middle left, a color palette in the lower left corner, and file operations across the bottom. That’s some reasonable and reasonably convincing layout design for a movie interface. Nowadays a designer might argue to hide the menus when not in use to maximize the canvas real estate, but the most common OS paradigm at the time was Windows 97, and the most advanced paint program, i.e. Photoshop, looked like this. (Major thanks to Hongkiat for keeping their museum of Photoshop interfaces.)

Using the stylus, Johnny sketches a flirty animation for Carmen. He draws each of their profiles in white lines. He then adds some flat color and animates the profiles (not shown onscreen) such that the faces get closer, their eyes close, and their mouths open in readiness of a kiss. He then sends it to her.

On her desk she receives a notification. (We don’t get to see it. Was she already in the program? Did the notification jump her there?) Carmen grabs her stylus and responds by adding to the animation. She sends the file back to him. He opens it and it plays automatically. In her version of the animation, the profiles approach as before, but as they near for a kiss, the female profile blows a bubble gum bubble that gets so large it pops and covers the face of the male.


StarshipT_019

What’s nice about this interface is that the narrative seems to have driven some innovation in its design. It’s half gee-whiz-circa-1997 of course but half character development as it tells us that Johnny likes Cameron, and Cameron is a bit playfully stand-offish in response. To make this work well narratively, communication of the animation back and forth had to be seamless, and that seems to be the reason we see the communication tools built right into the interface. If ever there was a case for why scenario-driven design for personas works, this is it.

What’s frustrating is that they skipped over the hard part. How does Johnny apply the color? A paint bucket tool is a reasonable guess, but it’s also error prone. How did he specify the number of frames and their speed? How did he ensure that the motion felt relatively smooth and communicative? Anyone who’s worked with an animation program knows that these aren’t trivial matters, and Starship Troopers took the narrative route. Probably best for the story, but less for my analysis purposes.

Still, the stylus-driven direct manipulation, the unique layout, and easy, social sharing were big innovations for the time. I don’t know that there’s much to learn from this today, since our OS metaphors have advanced enough to make this seem quaint at best, and social integration is now the norm. But credit where it’s due, this interface was ahead of its time.

Very slightly interactive news

by

1

StarshipT_001

One of the most unusual conceits of the movie is “Would you like to know more?” These consist of short video news sequences with overlaid graphics and narration. At the top of the screen the user can click one of three categories for different categories of video feed, and two functions. At the end of each video sequence the “user” is prompted to interact—should they want to learn more—by clicking the legend at the bottom of the screen.

StarshipT_002

The user here is ambiguous. It might be that the audience member is the user, but of course it’s not interactive. There’s probably room here for some other writer to investigate the narrative tactic/semiotics of using an interactive interface in a passive story.

At the top of the screen are menu headers labeled “FEDERAL,” “GALAXY,” “TOP NEWS," "ENLIST," and "EXIT." For the usability purist, the collection is problematic for a number of reasons.

  • The information categories aren’t parallel, and there’s no clear reason why they shouldn’t be. What’s the relationship between Galaxy and Federal?
  • The functions (enlist and exit) are not visually distinguished from content categories.
  • The current state of the interface is a mystery. Am I currently watching Top News or something else?
  • Why does the interface chrome persist? Aren’t they distractions from the content? Maybe they should appear just only for the few seconds it’s inviting the user to interact, and fade at other times.
  • While a fascist government would be happy to try and trick its users into clicking enlist, I can’t imagine what benefit they get from having them accidentally clicking exit to close the propaganda engine. These should not just be visually distinguished, but given different visual weight. They’d probably want enlist large and exit smaller, if there at all.

“Welp. All the links in Federal, Galaxy, and Top News are purple. I wonder what’s happening in ENLIST news? Oh hey, who’s that pounding on the door?”

StarshipT_005

The presence of the "EXIT" control implies that this is an application running in an operating system or media computer space. This opt-in news application with its small windows of time for interaction helps to paint a picture of a highly engaged and ready-to-respond audience, fitting for the mid-war society portrayed in the movie.

Only once do we see an unidentified and unseen "user" control a cursor to view more. In this sequence, he or she clicks on “more” after watching a clip on the bug homeworld Klendathu. (It’s worth noting/condemning that the clickable word “more” looks identical to the rest of the non-clickable text, offering no special affordance.) In response to the selection, the application shows a live video news feed from the conflict on Klendathu. Was it just good fortune that a live feed happened to be available at this moment? More likely the application and media coordination system are smart enough to know a live feed was coming up, and played the trailer in advance as an advertisement for the content, implying a well-coordinated propaganda/content management system.

Starship Troopers (1997): Overview

by

0

Release date: 27 June 2008, United States

StarshipTroopers_title

Starship Troopers follows Johnny Rico and his friends Diz, Carmen, and Carl, from humble beginnings together at school, into their participation in a war against the super evolved insect race called the Arachnids, or “Bugs.” Johnny, who is excellent at sports but poor with verbal and math skills, enters the infantry with Diz. Carmen’s scores and skills lead her to being a pilot aboard the war ship Rodger Young. Carl shows nascent psychic ability and winds up in military intelligence. In these roles they travel to the bug home planet of Klendathu to not only score a major victory in the war, but come of age in dealing with life and love.

StarshipTrooper_end

Fifth Element tees

by

0

overview

Major thanks to everyone who came out and joined me for the first ever scifiinterfaces.com movie night at The New Parkway in Oakland! It was a sold-out show, and while there were a few glitches, folks are telling me they had a great time and are looking forward to the next one. There will be a more detailed report once the pre-show video comes out. But in the meantime, this: If you didn’t win the trivia contest or weren’t able to attend, you can still get your hands on the “movie night” t-shirts I debuted there.

Allshirts

Head on over to the spreadshirt shop. It’s ugly (with the default CSS). It doesn’t have a custom URL or anything. It only has 5 products at the moment. But hey, that’s all part of the charm if you’d like to wear your sci-fi interface nerdiness with pride.

http://26253.spreadshirt.com/

P.S. I have no idea why the women’s KEEP CLEAR tee is not appearing in orange since I designed it like the Men’s tee, but I have a request with Spreadshirt now. Hopefully it’ll be fixed soon.

Berlin?

I’m thinking the Bay Area has an appetite for maybe two movie nights a year (let me know if I’m wrong) but I’d also love to try this in Berlin. Do you (or someone you know) know of a cinema in Berlin like the New Parkway that might be interested in my replicating this there?