Browsing the "geek" category...
Sketchnotes 2011: A Book by Eva-Lotta Lamm
German-born, London-based sketchnoter, Eva-Lotta Lamm, has been busy. Last year she attended a ton of UX and design conferences, and created sketchnotes of over 100 talks. She’s put them all together into a new book, titled Sketchnotes 2011, which launched this week.
In addition to her own sketchnotes (which are lovely to look at) Eva-Lotta has included a special guest section featuring 10 of her favorite sketchnoters, each capturing the same TED talk in their own style.
Guest sketchnoters include Amanda Wright, Bauke Schildt, Carolyn Sewell, Craighton Berman, Gerren Lamson, Len Kendall, Paul Soupiset, Timothy J. Reynolds, and Mike Rohde. Oh, and me, Matthew Magain. I’m honoured to be included among such talented artists!
The new book is $32 at createspace.com. Here’s a sample page:
Be sure to check out Eva-Lotta’s 2009-2010 book as well — she has some sample pages from this book online as a Flickr set.
Tags: eva-lotta+lamm, sketching, sketchnoting, visual+note-takingSketchnoting: The Art of Visual Note-taking (a comic)
I try to attend at least a couple of web/design/UX conferences each year. Not only do I always learn something, they’re a great opportunity to refine one’s sketching skills while sitting in the audience!
This practice of visual notetaking (or “sketchnoting”) has really gathered some momentum lately. Mike Rohde championed the idea in the US, and a bunch of designers and illustrators have taken the ball and run with it since (check out Eva Lotta-Lamm‘s talk about sketchnoting at the Czech WebExpo 2010 conference).
Recently I was asked to contribute an article about sketchnoting to a print magazine called Primarily English, put out by the Victorian Association for Teaching of English (VATE). Rather than write about sketching, I decided to sketch it instead. I’ve been reading a few graphic novels lately, so the end result was a four-page comic strip:
Although it was only short, I really enjoyed the process of creating a comic strip, and the flexibility that the format gave me to communicate. I hope you enjoy the final product!
Tags: sketching, sketchnoting, visual+note-takingGive 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!
