What Designers Can Learn From the Stage
or — How to Upstage Your Message and Annoy Your User
Ancient cultures learned about their world through storytellers. They learned about their gods and devils through ceremonies, rituals, performances — that is, experiences. Without being able to read, these experiences were the only way to learn how to be a good person in the eyes of the gods. They had to be accurate. Every tiny element had to support the stories and teachings. One didn’t dare distract the congregation with meaningless props, words, characters, movement, or costumes when teaching people how to avoid angering Zeus or avoid turning into a pillar of salt. Telling the right story was a matter of life, death, and eternal rivers of fiery damnation.
We still learn through experiences, but now they are mostly digital. And small. And getting smaller. They don’t fill an amphitheater or a cathedral. They fit in the palm of our hands or even sit on our wrists, which makes the stakes even higher for the storyteller. The smaller the space, the more amplified every element becomes — for both good and bad. We might not be preaching gospel, but the experience is just as important. You are asking them to read, explore, touch, swipe. That’s a privilege, and with great power comes great responsibility. You have their attention so don’t be “That Guy.”
Who exactly is “That Guy?”
“That Guy” is the one who annoys everyone by showing off. Stealing focus. Being over the top. As a designer, That Guy annoys the user by “acting” like their product or message is exciting. They spend a lot of time showing how exciting they are instead of concentrating on who’s on the other end. The posing and prancing upstages the real message. If you want the user to be excited — don’t “be exciting.” Make *them* feel excited. It’s a subtle difference but one that makes all the difference. “Acting” fun, popular, funny — it never works in the real world and it doesn’t work in design. It makes your app look fake and sad, just like your fake British accent. When we take the focus off ourselves as fancy pants designers, and think about what the user really needs, elegance appears. Making your user feel young and vibrant — dedication to the user’s desires, not your ego — has potential to engage them.
No Upstaging.
The literal meaning of “upstaging” describes when an actor moves upstage (up towards the back wall), therefore forcing the other actors to turn their backs to the audience. When you make your user sign up for something to get to content, or sit through exceptionally long, irrelevant ads, it’s annoying. You are forcing them turn in a direction they don’t want to go in. And they know you’re doing it on purpose. Not cool, man. Not. Cool.
Animations and Broadway Musicals
Shakespeare didn’t always write in verse. He often wrote in prose and only turned to formal verse when the message was so important, the emotion so high, that it could only be communicated in poetry. Broadway musical actors should only burst into song when the story and the emotions demand it. Use animations the same way. It’s singing for the sake of singing and it’s weird. It’s annoying, it’s distracting, and it’s why people hate lots of Broadway musicals. They’ll think “ooh look at that catchy song or that bouncing thingamabobber on my screen!” and forget your message.
So how do you decide to use animation or not? Can you tell the story without it? Then probably no. What seems contrary is that animation does not encourage interaction. Animations should be a reward for interaction, not the other way around. Videos that start automatically upon loading (I’m looking at you, Yahoo Screen) are horribly annoying. Anyone that’s gotten in a NY cab knows what happens when the loud video starts playing. In the cab — and I can say this with certainty — the video does encourage interaction — frantically poking the shut up and go away buttons as fast as humanly possible.
So — when do you need to sing your message rather than give a speech? Well, an example of a site that needs to sing their message Oakley’s Airbrake Goggles campaign: http://moto.oakley.com/. The animation (their “song”) blends seamlessly with the product message.
Oakley knows their customers kick up mud and rocks. Using animation, the impact of their product message strikes right, literally, in the face of their user. The page makes them feel like they’ll be protected. The exploding pair of goggles showing the components of protection breaks down the technology proving that the user will be protected. It doesn’t say “DUDE LOOK HOW MY COOL ANIMATION IS! LOOK HOW COOL OAKLEY IS FOR USING THE PARALLAX OF ALL PARALLAXES!” Oakley’s hardcore customers are serious about their fun and more advanced protection means they can push their limits farther. Dangerous flying rocks actually flying in their face communicates the message. Lesson: use animations for good, not evil. Or don’t use them at all. You risk your users coming away with bad show tunes in their head which makes everyone unhappy.
Never Work With Children or Animals
There is an old saying that performers should never work with kids and animals. They cannot be controlled. They will do what they want, when they want, and probably when you really need them to do something else. Unfortunately, as mobile designers, there are millions of factors about the experience we can’t control. From environmental distractions to basic reception issues, it’s out of our hands and in the palm of theirs. Connections will drop. Automatic notifications will distract from your experience. What are you gonna do? Design for the inevitable. Just like the goat will eventually crap on your stage, their network connection will crap out on your app. If (hopefully when) your user re-opens your app, do they have to log in again? Is any of their info saved? Or have you just left them with a pile of goat crap?
Don’t do this.
Upstaging, jerky actors have an old trick to pull focus away from their cast mates. They deliberately place a glass on a table like this:
WHY DID THEY PUT THAT THERE LIKE THAT?! WAS THAT A MISTAKE?! I CAN’T STOP LOOKING AT IT! SRSLY ZOMG! IT IS GOING TO SPILL ANY SECOND!! WHY IS THIS HAPPENING TO ME AND I CAN’T EVEN REMEMBER WHY I AM HERE?! Don’t have your users deciding if something on your site is a mistake or it has a bigger purpose. Are they supposed to be looking at it? Is the potential spill a part of the message?
Take this site from http://www.Bloomberg.com/politics for example:
Every time I see this layout, all I can think about is the purple. Even though I’ve seen it referenced at least 5 times, I *always* have the following thought: “Oh, I accidentally have text selected. How did I do that? Wait — it’s not all selected. Oh, that’s a design choice. Hm.” Also — every time I try and reference the site to a friend and can’t find it, I have to look up “wait, which politician is that about?” Yes, I did it for this post too.
Now let’s be clear — I’m very familiar with ‘ol Jeb and his shenanigans. But for the life of me, the purple highlighted text gets me every damn time. I don’t remember who it is or what it said. All I remember is the “is that selected text” hiccup, not the content. Every damn time.
Think about the things you push to the edge of the design table and if the choice supports the message or not. Otherwise your users will get distracted, asking “what” and “why” and “how” and “wtf?!” You’ve just upstaged your message again, even if you didn’t do it on purpose. Or did you? Or didn’t you? I CANNOT THINK ABOUT ANYTHING ELSE!
Thank Them.
What happens after the performance is also a part of the user’s experience. Some ancient cultures believed that gods were invoked and brought down into the performance/worship space. Applause at the end released the deities from the sacred space that had been created. For the audience, clapping was used as a confirmation that the gods were here among us, it was good, and they could go home now. Without applause, the gods would hang around and make trouble. When designing, don’t forget about acknowledgement. Remember to use appropriate confirmations to thank and reassure the user that all is well. They initiated that action successfully — yep. Give them a little animation or color change to make sure they know they are on the right track. Send them a well-designed confirmation email if they bought something from you or signed up for your newsletter.
Kate Spade’s email subscription confirmation feels sweet and personal. It’s just nice manners.
When designers stop showing how friggin’ awesome they are and just design useful things for their awesome users, they’ll be doing the gods’ work and the user will be thankful for the experience.
