Use the principles from the funny pages to make your interface flow and your icons pop,or to show off your ideas for user experiences
So you're back at work, raring to get on with your job if only you didn't keep tripping up over those things that get in the way. Or you're nursing a hangover and wishing it was still the holiday break and cursing the things that make your job harder than it has to be to get things done. Either way, hacking together something that makes work easier, more productive or less frustrating is what this column is all about - but your own solutions don't have to look home grown.
If you've made a new year's resolution to spend a little more time on the look and feel of your tools, how about taking comics seriously?
We mentioned Scott McCloud's "Understanding Comics" briefly before; this is an excellent and in-depth guide to the principles of graphic storytelling, which turn out to be just as useful for how to make an application easy to understand and use.
It isn't just that icons are kind of cartoony, although the more you think about how to visually represent the tasks and tools you're abstracting as icons and buttons, the better your controls will work. It's also much better to understand how 'telling a story' on a page works by drawing the eye through the different panels rather than blindly sticking to menus and toolbars at the top or strips of controls down the side.
The same techniques you use to make a story move along on the page can also help you put together a program or a website where the flow to complete a task is natural rather than confusing. And that's what "Understanding Comics" is all about, which is why it's become one of the best web and application design books that never mentions programming or the web. (The sequel, "Reinventing Comics," talks a lot about web layout specifically for comics and is an interesting discussion of different approaches to telling stories online, but for design principles, start with "Understanding Comics.")
Another good resource to consider is Bill Buxton's "Sketching User Experiences," which you expect to address how to approach drawing user interfaces and offer up loads of examples. You'll certainly get both, but that's just a fraction of what's in this fascinating introduction to the whole world of design. It covers everything, from design elements of physical products like mountain bikes, orange squeezers and mice to case stories of the impact of design on Apple and Adobe's approach to coming up with new software products.
You'll learn as much about laying our your notes and ideas as you will about how to draw touch gestures so people can understand the interface you've come up with. There's a section on visual storytelling that sums up some of what's in "Understanding Comics," but you'll want to read both. Again, this is a beautifully designed book - especially the section reproducing several pages from the Moleskine notebook of Microsoft researcher Richard Banks - and you'll come away thinking about design in a completely different way.
(Buxton is a principal researcher at MSR and has been involved in the design of Windows Phone, but he also has decades of experience in touch interfaces and he founded the research lab at Autodesk.)
Comics aren't just useful for learning the principles of layout and thinking about icons; you can use them to tell a story about what you want to achieve with the tools you develop. If you're putting together tools that other people in your group are going to use, you could just send them an email explaining what they do. Or as Kevin Cheng suggests in "
See What I Mean
," you could grab their attention with a comic that dramatizes what you can achieve.
Remember the comic that Google used to launch the Chrome browser (drawn by Scott McCloud)? Adobe, eBay and other tech companies use comics to help design products and services like the eBay shopping cart, or in user research to find out what people think of a product before it's been built, or for marketing as a more engaging way of explaining what a service does. When he worked at Yahoo, Cheng drew comics to help the maps team work out what the local services they wanted to build should actually do and how they should work. Comics are everywhere; the instructions for IKEA and LEGO models are comics by another name.
Comics are fun and people are more likely to read them than a boring manual or a lengthy requirements document, but they also communicate stories very efficiently. Cheng proves that by starting every chapter with a short comic that gets across the key points of the chapter quickly and clearly; you can read through the comics to get a fast overview and then dive into the full chapters for more details.
It's faster to draw a comic than make a video. And they don't have either of the two big dangers of prototypes, where either people think the product is finished already or get too focused on the details of the prototype rather than looking at the bigger picture of the idea you're prototyping. You can do a before and after comic; the problem in the way things work now and how your product changes the story.
You don't need to be a great artist; if you can draw a stick figure, you can draw a comic (think of popular geek comic strip XKCD). "See What I Mean" teaches you simple tricks, like how to draw faces and leave enough room for your captions and speech bubbles (there's a chapter covering useful software and templates and the website includes more templates to help you get started), but it also teaches you how to put the story you want to tell about your software in comic form, and how to tell when that's a good way to get your point across.
There are plenty of examples of comics being used to explain products and Cheng works through the steps of making a comic to show the Square credit card reader in action. There's even a section to help you convince skeptics that comics can be useful business tools. Top tip: call them concepts and storyboards rather than comics!