Browsing the "art/design" category...
Give Your Users A Hollywood Experience
I love the movies.
Going to the cinema is one of those experiences that can truly feel like you’re being transported to another time and place. When combined with a big bucket of popcorn and a choc-ice, a trip to the movies is one of those rare moments that borders on magical.
Except, of course, when the story sucks.
No amount of special effects or great acting can save a poor story. In his book Story: Substance, Structure, Style and the Principles of Screenwriting, Robert McKee suggests that the story is the single most important factor in determining the quality of a movie (or novel, or play, or whatever really). I would agree.
It turns out there’s a real science to storytelling, and in his book, McKee references hundreds of classic (and not so classic) movies in order to distil the essence of what makes a good story into a set of guidelines. I first read Story over 10 years ago, when I was harbouring ideas for writing a novel. It was a truly enlightening read, and I highly recommend it for any budding novelists or screenwriters.
Telling Stories To Our Users
How does this relate to User Experience Design? Well, when someone visits your website, you are in fact telling them a story, whether you intend to or not. So you better make it a good one.
Oh, and those visitors to your site? They’re not passive viewers, munching away on popcorn. They’re part of the story. They’re the protagonists, and you are the director.
I believe that, as designers, we can learn a lot from Hollywood’s finest.
Bringing Hollywood To The Web
Here are a few tips that McKee touches on in his book. He says:
- know your protagonist
- stick to the genre, and
- create gaps for the protagonist between their expectations and the result.
Let’s take a look at how we might apply each of these to the world of user experience design.
Know Your Users
McKee advocates really getting to know your protagonists, so that you can paint an interesting backstory and really get inside their heads. The same applies, of course, to the users of your website. In The Silence of the Lambs, Clarice Starling was the protagonist, and we come to learn quite a bit about her over the course of the movie. A lot of what we learn is courtesy of Hannibal Lecter, who asks her a lot of questions — about her past, her goals, and what keeps her up at night.
In the UX world, we call this data gathering exercise user research, and we use it to create personas, which are representations of our users. Here’s what one for Clarice might look like:
We’ve got her name, her age, occupation, hobbies, and most importantly her goals for using our product, and when and where she’s likely to use it.
There are a few different techniques for collecting this information.
- We can ask our users, like Hannibal did (“Quid pro quo, Clarice!”)
- We could also run a survey
- We might perform some one-on-one interviews
- We may even run some focus groups
The problem is, people don’t always do what they say they do. A more reliable way to collect data is to actually observe people using your site.
The Tools of Observation
We can do this in a number of ways:
- We can look at website analytics
- We can run an eye tracking study
- We can do some contextual inquiry, where you sit with someone and ask them questions as they work
- We can do some good old user testing
Stick To The Genre
The next tip that McKee gives in Story is to stick to the genre. Let’s consider another great movie — Se7en.
The reason it’s such a great movie is because it doesn’t try to be anything but a crime movie. There’s no unnecessary love interest, no supernatural element, no superfluous subplot. The director stuck to the conventions for that genre.
So what genre is your website? And do you stick to the conventions for that genre?
- If it’s a Corporate site, does it use the right colour palette?
- If it’s a Community site, are there tools that help people connect?
- If it’s a Content site, does the design support the content or does it get in the way?
- If it’s a Commerce site, does the design complement the products or compete with them?
Here’s an example of a website that I think does a good job of sticking to its genre:
Foodzie is a site for ordering gourmet food online in the US. It uses this lovely grassy green throughout, with rough edges and a home-made paper texture in the background. There’s a lot of earthy, organic imagery, which is a good fit for the stuff it sells.
Here’s a similar site, operating in Australia:
When you look at the foodo site, what stands out? Those cutsie, colourful illustrations that my 5-year-old daughter would love. But this isn’t a kids’ site! It’s for ordering expensive rhubarb juice and blue cheese! There’s a disconnect there — the site doesn’t follow the rules of its genre.
Mind The Gaps
Lastly, McKee talks about creating gaps between a protagonist’s expectations and the result. The theory here is that the protagonist is going about his business, them bam something happens which throws his or her world out of balance, and the story lies in the journey that the protagonist takes to get that balance back.
We can represent this in a diagram, like this:
Let’s look at Star Wars as an example. Luke is cleaning a rusty old droid, when unexpectedly, a hologram of Princess Leia appears. This is the first gap. It kickstarts his journey to find Obi Wan, who then tells him that his father was a Jedi knight who was killed by Darth Vader … another gap in expectations. Towards the end of this epic quest, when Vader tells Luke “I am your father” there’s another gap that needs resolving. You can see how this series of gaps forms a quest for our protagonist, as he continues towards his object of desire (presumably, to defeat the Empire).
Translating this to websites, each of those gaps occurs when our website does something that our user wasn’t expecting, usually not in a good way. So we want to minimise these gaps and avoid surprising our users. We don’t want them to feel the anguish that Luke feels when he learns who his father is — quite the opposite.
One way we can do this is to use mental models, which is a fancy word for how our users think our website should behave. The key is to make sure we design based on those mental models, and not on the underlying technology. Which is basically what user-centred design is all about.
Summary
To recap, we looked at a bunch of storytelling principles and how they can be applied to designing more compelling online experiences.
Those principles were:
- know your users
- stick to the genre, and
- minimise the gap between a user’s expectations of your website and how it actually works.
I definitely recommend you check out Robert McKee’s book, Story, and I encourage you to embrace some of the techniques I’ve mentioned here if you’re not using them already, to avoid your website becoming the Battlefield Earth of websites.
This post is based on a presentation I gave at Ignite Melbourne on November 31st, 2011. Thanks to Mark Mansour for the opportunity!
Grossly Informative
Last weekend I had the unique opportunity to participate in a social experiment: a full day event titled Grossly Informative: Conversations That Matter.
The workshop was the brainchild of Adrian Pyle and Dan Donahoo, and brought together a collection of interesting, opinionated individuals for the purpose of making (and consuming) a meal together. Fundamentally, the experiment’s goal was to answer the question, “How integral is a meal to the quality of conversation?”, although this is a simplification. The day was essentially a prototype of the events to come: preparing (and eating) the food, followed by a workshop discussing the format that future events should take.
I pulled together a sketchnote of the day, which captures my memories of the meal, a snapshot of the people involved, and the questions we tried to tackle. If the project intrigues you, I’ve penned some longer thoughts below on what I thought worked about the workshop, what didn’t, and what might be worth considering for future events.
The invitation
The invitation came in the form of an email. I received it well enough in advance that I couldn’t use “I’ve got plans” as an excuse. I didn’t really feel like I understood the concept well, but was honoured to be asked to be involved. I suspect once the format of these events is fleshed out some more, the invitation will become more elaborate. There’s certainly plenty of potential here — a box? An artifact? A postcard to write your thoughts on afterwards?
The people
Invitees to the workshop included designers, developers, government employees, poets, entrepeneurs, life coaches, and folks from a range of backgrounds. While there was a spectrum of age groups, most people were in their 30s, well-educated and articulate. I felt like the group got along extraordinarily easily, perhaps because there was so much common ground. I’d be curious how long it would take the same level of rapport to be reached with a more diverse group.
The purpose
For a good chunk of the day, I was a bit confused about the goals of the project. Partly, this was because I had family commitments in the morning and arrived late, so missed the all-important briefing at the start.
As I mentioned above, this was an experiment and a prototype of future meals, but I still couldn’t help feeling like the concept had huge potential that was being unrealised. At the very least, I’d like to see future events contain a theme of some sort, to guide conversations. I don’t know what that theme should be, but I’d hope that it would be ambitious (and different for each meal). Whether it be related to social issues, environmental issues, domestic issues … I’m not sure what would work best for each combination of individuals (if conversations became too political, it could get ugly). But by the same token, if the goal of the event is not ambitious, then it just becomes a pleasant meal with a collection of interesting people. I think the organisers should aim higher than that.
Not everyone agrees with me on this — several of the attendees I spoke with suggested that there was sufficient value having zero constraints, and letting the conversations happen naturally. While I agree that this could be valuable to some, it doesn’t align with the concept of nurturing “grossly informative” discussions, nor does it encourage “conversations that matter” (the tagline). To help an group of interesting, intelligent people realise its full conversational potential, the bar needs to be set higher. Much like in design, constraints can often form the spark of creativity, not limit it.
The meal preparation
Dan and Adrian guided proceedings, but very much played an observer role — including deliberately not leading the meal preparation (they provided ingredients, utensils, and a kitchen). Because the group contained a high number of mature, motivated, self-starters, the meal just happened. Teamwork, delegation … the factory line just fell into place and the resulting luncheon consisted of a delicious selection of pizzas with varied toppings, followed by a tasty fruit salad. The table was set, and Katie, one of the attendees, added a delightful touch with a short, thoughtful poem written on a coloured piece of card. In many cases these provided the spark for conversation.
Group dynamics
In the afternoon Dan and Adrian ran some more formal exercises designed to elicit our feedback on the structure of these events. As I mentioned, the group functioned surprisingly well. On occasion, the stronger personalities commanded the lion’s share of the conversation, but overall I think everyone had an opportunity to voice their thoughts and shape the conversation.
The capturing
One topic that arose during the workshop was how such an event should be captured. In particular, several noted that being “in the moment” often makes it impossible to capture the conversation, and a stream of Twitter updates documenting the conversations is unlikely to make for riveting reading. Videos of everything also seems over the top, but it was agreed that something like asking each attendee to write a blog post, reflecting on the event, seemed like a reasonable way to capture, promote, and continue the discussions had on the day. This post is my attempt at that.
Reflections
I’ve had a few days to process the first ever Grossly Informative event. All up, it was a very enjoyable day and a worthwhile experience — I met some interesting people and enjoyed a fabulous meal and pleasant conversation. Honestly, though, I can’t say I really had any “conversations that matter” or came away feeling “grossly informed.” Perhaps that is unfair, given the intention was very deliberately not for the workshop to be a platform for creating social change or solving the world’s problems, but rather a forum for discussing the concept. And perhaps it’s my fault for not guiding conversations that I had with people to such a degree.
All up, I think a structured meal like Grossly Informative has huge potential to facilitate understanding between individuals from different social, economic, ethnic and political backgrounds. Preparing a meal shortcuts the hurdles to striking up rapport with a stranger. With that in mind, I’d love to see the goals for the project set much higher than that of satisfying one’s curiosity. If a group of strangers are able to reach that level of understanding in an accelerated timeframe, then it seems only natural to me that the resulting dynamic should be harnessed for some grander purpose other than “because it’s fun” (which it was).
To me, the question of “How integral is a meal to the quality of conversation?” has been well and truly answered — the answer is: it’s crucial, but it’s not the only factor. I hope that future events will harness what we’ve all learned from the exercise, and use the information for something amazing.
Tags: grossly+informative, sketchnoteInterview with TED's UX Lead, Aaron Weyenberg
While I was at the Web Directions South conference in Sydney a couple of weeks ago, I interviewed Aaron Weyenberg for desktop magazine.
He’s a lovely bloke and a talented designer, and gave a talk on the topic of skeuomorphs (derivative objects that retains ornamental design cues to a structure that was necessary in the original —Wikipedia).
There are some nuggets in there, especially if you are thinking of following Apple’s lead and skinning your next web app or mobile app with photorealistic textures and surfaces. Read the full interview with Aaron on the desktop website.
Tags: design, usability, webdirections
