Using Magic to Design the Web
The most interesting and entertaining lecture I went to at SXSW Interactive was titled, "Magic and Mental Models: Using Illusion to Simplify Designs" The lecturer, Jared Spool, started out talking about how he has attended several magic conventions recently. So how do magic and web design relate? I will talk about three magic tricks that Jared demonstrated that can be brought to the realm of design.
Act I: The Role of Mental Models
In the first Act, on the projector screen, Jared showed the audience six cards of Jacks, Queens, and Kings and asked us to pick one of them. Being my favorite card in the deck, I picked the King of Hearts. He then took one of the cards away and told us the card he took away was our card that we picked. Sure enough, the King of Hearts was gone! How did he do it? When he showed the cards a second time he put up different suits of Jacks, Queens, and Kings. Any card the audience picked would be gone and the others appeared to stay the same.
The trick is about keeping the magic behind the scenes. Google keeps its search engine magic behind the scenes. It doesn’t tell the user the thousands of processes it uses to generate the results. It just displays them. Netflix’s Recommendations hides the magic as well. The process of matching ratings is transparent to the user. All the user knows is "these are my recommendations"
Act II: The Role of Perception
Jared then called up a participant to the stage and asked him to sit in a chair facing the audience. Jared got out a screwdriver and attached a paper circle with black and white swirls. He faced the front of the circle toward the audience and turned the screwdriver on. He asked us to stare at the rotating circle for 10 seconds, and then look at the participant in the chair. Once we did, the participant's head seemed to shrink.
It’s all about perception. Jared noted a study that was done based on the ratings of several different websites. One of the variables was load times of Amazon.com and About.com. The users perceived the load times of Amazon.com to be fast and About.com to be slow, when the reality is the actual load time was opposite. Why did the users perceive them differently? It turned out, the users who took longer on their tasks navigating throughout the website, rated the sites as having a slow download time. These low ratings for About.com, proved to be usability issues rather than slow load times.
Act III: The Role of Delight
Before each act, Jared asked an audience member to think of an answer to a question that he asked. Before the person would say the answer, Jared would write down the supposed answer on a sheet of paper. He failed each time and crumbled each one of them up. Before Act III, Jared uncrumbled each sheet of paper and each one was correct. So why did he say they were wrong, and how did he get the answers right? It turns out the first one he wrote down was the last one he would do. The last one he did involved an audience member picking one card out of a deck and memorizing it. The trick was, the deck was filled with Aces of Hearts, so any card that was picked would be an Ace of Hearts. This is how Jared was able to write the first answer down and then write the other answers down from there.
The point is, to delight the user. Jared showed an example of delight by displaying a display box off of Flicker. The text read 'Would you like to embiggen your photo? The word 'embiggen' is the delight for the user. Another example of delight is when ITunes shows the color of your iPod when it's plugged in. Apple didn't have to program this in, but knew it would be delighting for the user to see.
With mental models, perception, and delight, we may design magical interfaces that truly surprise and engage the user. Let's keep these magic concepts in mind as we design human interactions and program for our customers.
