Note: Postgame analysis now posted here.

This is the moment I’ve been waiting for. Jared Spool, the man himself is up on the dais of the big ballroom here. Funk jazz greeting everyone who walks in.

The last time I saw Spool was in NYC in 1998 or 99, and he rocked my world. Just as we were developing usability standards at GSI, he opened our eyes to a completely different way of thinking about creating Websites that are easy to use. Designing sites backwards. The Scent of Information. It changed the way I approach building or redesigning site since.

It’s funny. I think back then he had this massive beard. But no more.

Let’s get this party started!

Audible and visible! (there was some trouble getting all the A/V working)

Jared introduces himself as our cruise director. His first SXSW. We have one thing in common!

For the past few years, they’ve been looking at experience design.

Copies of the presentation available for a business card? You bet.

Experience design

Thinking about the entire experience that the user is going to have. They’re putting together a multi-disciplinary team with a complete skill set. Understanding social networks, metrics, design, marketing.

The skill no one’s talking about much is magic. And it’s very important.

The idea of magic is that it brings a certain level of delight you don’t get in other places. He found it accidentally through his son — who wants to become a professional magician. Jared’s been tagging along on the conferences.

You get to hear people talking about construction and delivery of magic, but there are a ton of parallels in presenting magic and experience design.

So he’s going to do some tricks, deconstruct them, and reconstruct them for interactive. Audience starting to wake up a little.

There was a mind reading lecture at the magic conference. Now Jared will try some mind-reading.

He’s working on an audience member, getting them to concentrate on their favorite color. He didn’t guess that the guy’s favorite color was blue.

Moving on…

Act 1: mental models

The basics of an illusion

he does a card trick where you have to think of one card out of six. Then he shifted to another slide saying is your card gone?

There were five different cards.

So he’s taking our premise and separating the user’s model, and giving them something completely different.

Teller: when magicians talk about tricks, they first talk about the effect. Using stage coins, it can look like you’re pulling coins out of thin air, but they are stacked in your hand the whole time.

Disney has their haunted house and created a very specific set of illusions that they want the users to have. The user walks out of the house thinking that there are ghosts, woman’s head in a crystal ball, etc.

So the imagineers are thinking about the trolley cars, high-powered lighting, mirrors, speakers. And it’s all highly specialized and technical.

The sound guy doesn’t think that he’s doing a good job if someone says, that sound was perfect at the last turn. He wants them to have the experience of being scared.

Same thing happens when you throw something out on your computer. But it’s an illusion. There are in fact, no files on your computer. Just a bunch of ones and zeroes spread throughout the disk. Nothing gets deleted, nothing gets added. Copying, pasting, moving. It’s all an illusion.

So when we build experiences like this — people don’t care about the technical. They only care about moving the files, etc.

Things we take for granted all the time fall into this category.

How Google processes a query. It’s highly technical, and talks about the ways processing centers transfer and handle all the searches on the east coast. What they’re doing behind the scenes is incredibly complex, but when you use the system, it’s just fast and simple. That’s what makes the experience.

That’s the division: between simplicity of what the user sees and the complexity of what is actually happening in terms of the underlying system, what their servers are doing, etc.

It’s not just Google.  At Flikr, the homepage is just flikr.com. If I go to a different page, it’s a different URL.

Humor; more of a wave than a particle. It takes longer to move through denser material.

Flikr’s URLs – the URLs are fairly simple, but the underlying technology is incredibly complex.

Netflix is trying to do something similar. The recommendation system looks at what you watch and tells you what you might like. The recommendation is based theoretically on movies you like, but it really looks at the movies you’ve rated and compares against all the other people that have seen and rated similar movies in similar ways.

People think it’s this thing where when you see something; perceived it just spits back similar titles. They’re trying to keep the complexity away, but having trouble relaying how cool the system really is.

This is the way mental models work.

Act II: The Role of Perception

More mind reading. Does Angela remember what she had for dinner? Yes? Concentrate. Does Jared have a beat on it?

She had Bar-B-q. You’d think he would have gotten that.

Jeff comes up to the stage. Jared puts him in a director’s chair. Measure’s Jeff’s head. He asks Jeff to stare at the back of the room for 45 seconds. Everyone else, stare at this swirling disc Jared’s holding. If you look straight at the disc, you’ll get a tunneling effect. Jared counts from 10 to one, then look at Jeff. His head appears to shrink. We did it again, and his head seemed to grow.

Freaky.

What he did was ‘muck’ with our eye muscles. Our eyes and brain are fighting to not be sucked into the vortex. But fighting against it, once we finally get a rest, looking away made his head seem to grow/shrink.

Starting with just a blank screen, then watching an arrow wipe across the screen. Then watching a countdown. Then a video of a tarantula.

Which was fastest? They were all ten seconds. It’s all about the perception of time.

It’s called "Perceived Performance." He had to do this when reformatting a disk in the ’80s. He had to find was to make it seem like it was going faster. He did this by adding a display that actually slowed down the system by adding a progress bar display. But it made it seem faster.

In a test of perceived download time, they took passionate users and tested related site performance against them. They would interview these people about what they wanted to do, and then tested their use.

So no two visit goals were the same. In the post visit interview, one of the things they asked about was the speed.

Even though all the users had different tasks and needs, they were very uniform in evaluation of the speed. They had never seen this kind of uniformity in the data. To figure out what the actual speed was, they timed the DL time of every page.

Thanks g-d for interns.

Plotting the data of perceived performance vs. actual performance, there was no uniformity of real speed. Amazon was actually the slowest, and about.com was actually the fastest. Completely the opposite of the perception.

So they started looking at other variables, put it in a big statistical model, and tried task completion. This was uniform. Task completion was much more important to the experience than actual time.

The more painful the experience, the slower the site felt.

If you go to see an action film that’s 2.5 hours, the time passes fast. But if you go see a church sermon for 45 minutes, it seems to take forever.

We have these differences in effect.

The neat thing about youtube is how they take advantage of this. They start to show the movie while the file is loading, which helps the perceived time it takes to load.

USA today has a bunch of links just above the fold, which makes users think that the page is ending there, but there’s a whole story under that. You just wouldn’t know it because of perception.

Login boxes work because the form fields are together. How far do you move these fields apart before they lose effective meaning.

Designers must understand how users perceive actions and presentation.

Now Jared’s doing a card trick. take one out of the deck and memorize it.

Writing down the card on a pad now.

Ace of hearts was the card.

Jared didn’t get it.

Act III: Delight

The Kano model is a 2d model used to described what makes something delightful. User satisfaction graphed against quality & capabilities.

Performance payoff: as we add more quality and capabilities, users generally become more satisfied.

The basic capabilities of the system can also only satisfy people so much.

Excitement generators, only a few capabilities, but the nature of these capabilities are so impressive, it rockets satisfaction.

Wait a second, he’s pulling out the "wrong’ answers, and they were really right — everyone is now delighted.

Lots of people have presentations with technical stuff, but who has presentations with Magic tricks. He wrote down all the guesses out of order.

You create one illusion, and it’s delightful.

One way is being whimsical.

There’s a local artist creating little fairy doors — repros of the people’s front doors that just appear. and people are delighted by it. One woman took her daughter into a store and asked her to explain that fairys don’t exist, and the clerk refused.

Twittter has error messages about cats fixing servers. Which explains the uptime.

On Flikr – a dialogue says "embiggen small photos to fill screen" The guy who made this is in the audience. I think that delighted everyone.

On the iTunes, it shows you not just a picture of an iPod model, but your iPod model as well. You may not notice it for a long time, maybe even until you get a second one. But it delights.

Your home page of Flikr features pictures of you and your friends.

On bestwestern.com, you search for a hotel city, it gives you choices, and when you’re done, it fills out all the fields. The coolest part is that they don’t have a hotel there. But they put that in their system as a suggestion just in case.

Delight by functionality:

The core of why people come to our systems.

Proflowers.com delights people because the flowers are amazing. Shipped direct via FedEx from the growers. Guaranteed for seven days of beautiful flowers. That makes the experience delightful.

Farecast is a travel site that keeps track of the fares. Their system will tell you if you should wait on the fare because it will be cheaper in the future. This is delightful.

This idea of delight is really quite important. We can try as much to make these elements as delightful as we want, but we have to make sure that basic expectations are fulfilled first.

Jared just bought a clock radio with great sound, but it lost five minutes a week. You have a basic expectation that the clock will keep time. The basic expectations need to be met.

What delights today becomes a basic expectation tomorrow. Eventually, you get used to things, and then expect them.

Wait— time for one more trick. With two volunteers.

Dan and woman facing each other with chairs in front of them, Dan’s counting ten cards into the chair. The woman does the same.

Recounting to make sure.

OK. Now two more folks come up to the front of the stage. each picks one card from natasha on stage. Looking at the cards, remembering, putting them back and now reshuffling. Dan looks in the envelope – nothing there. Now he puts the cards in and seals it.

Natasha does the same and they both take a seat.

Now we’re set up.

This is a trick about moving objects in space. Using a magic marker, he carefully moves one of the cars from Natasha’s envelope to Dan’s envelope. Did they feel it? Nope?

Now they get up, open their envelopes, and count the cards. Natasha has eight cards. Checking Dan’s, he’s got twelve cards. What the heck?

Eight of diamonds? It’s in Dan’s deck now.

Six of clubs? Yes!

One more thing: the way this all works — the user’s mental model is different from the designer’s mental model. There are all different ways we can design for magic.

uietips.com is where you can get all this in your inbox.

Related posts:

1. SXSW Postgame: Magic and Mental Models: Using Illusion to Simplify Design
2. SXSW Live: Design Eye for Southby
3. SXSW live: Frog Design kickoff party coverage
4. SXSW Live: Creative Collaboration: Building Web Apps Together