Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

March 19 2013

08:33

What's Your Comic About?: Communicating Complex Ideas With Comics


  

Comics are known to be one of the most powerful communication tools, and are a unique way to communicate — using both image and text to effectively demonstrate time, function, and emotion.

Today’s article is an excerpt from Kevin Cheng’s “See What I Mean” — a book that walks you step by step through the process of using comics to communicate, and providing examples from industry leaders who have already adopted this method. Enjoy!

When creating a product or feature, you undergo a product development process. For example, you might start by interviewing some existing customers or by running focus groups. You might create business and functional requirements that describe what you need. Then, when you’re ready, you begin designing and developing and iterating on the product.

Or perhaps you prefer to define products by first building a prototype, bypassing formal requirements. Everyone has their own preferred process. The process you follow and how strictly you adhere to it depend on the circumstances.

The same could be said of creating a comic: there isn’t one correct way to go about it.

The Comic Creation Process

I’ll present a process that includes all of the steps involved in creating a comic for a product, but it’s just one of many approaches. The more practiced you are at it, the better you will be at knowing which steps to spend the most time on and which steps you can combine or skip over entirely.

Intro 4.2
Multiple steps are involved in creating a comic for your product. Full view.

The process of creating a comic for your product can be broken down into the following steps. For larger projects, you might feel the need to create multiple comics that represent different personas and use cases. In the case of the comics we made for Yahoo, we created a total of three comics. Each comic represented very different use cases that resonated with different participants. The goal was to be representative, not comprehensive.

  1. Decide what your comic is about.
    Before creating the comic, you need to decide why you’re using comics and what to include in the story. What features do you want to highlight or, more importantly, which features can be excluded from the story? Who is the product for, and who will be reading the comic? The output from this step should be a few bullet points of things you want to highlight. If you were planning an essay or presentation, this would be the equivalent of writing the thesis or main talking points. This step is what we’ll talk about in detail in this chapter.
  2. Write the story.
    Once you’ve decided which aspects to highlight in the comic, the next step is to create a script. Just as a movie starts from the scripting phase, we’ll define the comic in words first before drawing the comic. The purpose of this step is to define the progression of the story. If the first step was to define the thesis, then this step would be to define the outline. You’ll define the characters in the comic, the settings of the story, and the dialogue that will be spoken either by narration or by the characters.
  3. Lay out the comic.
    Even when the story has been defined, a lot of decisions still need to be made about the composition of the comic. Just as photographers, filmmakers and painters must decide what parts of a scene to capture, each panel in a comic has to be carefully planned. Do you want to show the building they’re in? Should you show a close-up of the product? How much, if any, of the interface should you show? I’ve talked about how comics are powerful for representing movement and time. If comics are sequential art, then part of the process is deciding how to sequence the story in such a way that readers can follow it.
  4. Draw and refine the comic.
    Once you have prepared the basic sequencing and layout, you can put the finishing touches on the comic. I’ll cover some additional tips and tricks to augment the basic drawing techniques covered in Chapter 3, “You Don’t Need to Be an Artist.” A lot of tools also exist to make comic creation easier. I’ll share a range of resources, including drawing software and layout templates, to make the process of creating comics even faster.

Figure 4.1
The comic creation process.

To illustrate each of these steps more clearly, I’ll use an example and create a comic from start to finish. The example is a real product, but, to my knowledge, its maker hasn’t used comics in its product development or marketing. So, let’s pretend we’ve been asked to create a comic for it.

The Example: Square

Square is a little physical card reader that you can plug into the headphone jack of an Android phone, iPhone or iPad.

Figure 4.2
The Square credit card reader.

After plugging it in, you can accept payments from any major credit card with minimal set-up. It’s currently used by small businesses, coffee shops, street food carts, people selling items on Craigslist, people running garage sales and many others. This card-reading device and its associated software are free, but each time you run a transaction, a flat rate is charged to the merchant.

Square is an appropriate example for a number of reasons. First, the product spans many platforms, including mobile devices, tablets and a website. Secondly, the product has many use cases and personas, which is probably the case for many of your products. Finally, clear real-world interactions can be associated with the story of Square’s usage.

If you’d like more information on Square, you can look up the product on the official website. It’s worth mentioning that the founder of Square is also a cofounder of Twitter, where I used to work. However, my use of the product as this book’s example is done without any consultation or inside knowledge. We’ll go into detail with this example soon and continue doing so for the next few chapters.

Now that we have an example to work with, let’s start the first step of the comic creation process by answering the question, What’s the comic about?

Answering this question can be tricky. Instead of approaching it as one broad and vague question, breaking it down into a few logical steps might be easier. Once you have addressed these, narrowing down your comic’s story should be much easier.

  1. Define the goals of your comic.
    What do you want to get out of it? What is the next step you want the reader to take after reading the comic?
  2. Decide on the length of your comic.
    The length will dictate how much detail you can afford and how precise your messaging needs to be.
  3. Identify the audience of your comic.
    Your story may change depending on the audience’s level of expertise and the context in which the comic is delivered.
  4. Select a representative use case.
    Think of a scenario that shows off your product well. Once you’ve found that, the scenario will naturally help you narrow down the features to highlight.

The Goals Of Your Comic

Before thinking about what should go into the comic, start with what you want it to accomplish. If you know what actions you hope to inspire through the comic, then you can design the comic towards that goal. When Google decided to create its comic for Google Chrome, it had a clear goal in mind. It didn’t want people to focus on comparing features between browsers; instead, it wanted readers to gain an understanding of its technical motivations for building a Web browser from scratch.

The goal of the comic may vary, depending on whether it’s for a product that already exists. When using comics to describe products that haven’t yet been built, the goals may be centered on understanding and sponsorship. The comics we created at Yahoo were used to validate our product vision with potential users as well as with management. Our goal was to get feedback on how useful the product ideas were and to get support from management to start building the product as described in the comic.

Sometimes, the goal can be completely measurable. At Raptr, we used a comic on the home page to describe the product. Our goal was to help visitors understand our product, but we were also hoping to inspire a particular action: user sign-ups. Similarly, because Square is a product that’s already in the market, the goal of our fictitious comic should be to help merchants understand why it’s useful and, ultimately, to have them sign up to receive a Square device.

Defining the goal of your comic is a crucial step, but it shouldn’t be that difficult. If you’ve already decided to create a comic, chances are you have some idea of what you’re hoping to accomplish from it.

The Length Of Your Comic

After deciding what your comic is about, the next important factor to determine is how long the comic will be, because you need to know how much room you have to work with. I recommend a very short comic (three to eight panels) to illustrate an idea. At that length, it’s easy to consume, yet contains enough information for both internal and external communication. The comic should fit on the home page of a website, on a postcard or in an email to your team.

However, there are plenty of examples of longer comics. The Google Chrome comic was over 30 pages and fairly technical in nature.

Figure 4.4
A copy of the Google Chrome comic book.

Even at that length, it was much more digestible than a detailed white paper, and it had just the right balance for readability. The comic was available online, but it was also distributed in physical form to key developers and industry experts.

As a way to connect to its Japanese audience, the US Navy created a full manga (a Japanese form of comic book) in both English and Japanese to explain why its aircraft carrier would need to be docked in Japan for several months.

Figure 4.5
Manga for the US Navy’s USS Washington.

Given the widespread acceptance of manga as a medium for any topic, this seems like a great way for the US Navy to connect with its audience. A lot of people were interested in the carrier, so publicizing the comic wasn’t difficult. Many local and online press outlets wrote articles about the comic. When the book was released, there was a line around the block to get a copy!

Another proponent of long-form comics is Adobe’s Evangeline Haughey, who had been trying to find creative ways to encourage team members to read her user research reports and decided to spice up one of her reports by presenting it in comic book form. The comic was a handful of pages, and she printed it as a booklet, complete with a mock comic-book cover illustrated by her colleague Julie Meridian.

Figure 4.6
Adobe’s comic book cover.

One commonality among these examples of long-form comics is that they all feature a physical component to their distribution. If your ideas are complex or lengthy, consider a longer comic, but also think about ways to distribute physical copies. It’s surprising how hard it is not to read a copy of a comic that’s in your hand!

Long comics aren’t always appropriate, however. Akoha, a startup that uses trading cards to encourage good deeds, tried to use comics to explain its services in an innovative way. Unfortunately, it was a multi-page comic that few visited when coming to Akoha’s home page. By contrast, many companies, including Nectar, have used very simple three-panel comics on their home pages. These comics are easy to consume and immediately explain the product.

Figure 4.7
Akoha’s multi-page comic versus Nectar’s three-panel comic.

I love constraints. We’ve all witnessed their power. Presentations are constrained by time, and reports by number of pages. In film, the editing process is crucial to ensuring that a movie stays under a certain number of minutes. This process culls scenes that do not add depth to the story. These constraints may seem artificial, but you’ll find that they’re helpful because they force you to be creative and thoughtful. By constraining a comic to between three to eight panels, you’re forced to think about what features are most important to convey.

The Audience Of Your Comic

Aside from length, the Google Chrome and US Navy comics share something else in common. Both demonstrate a clear understanding of their audience and tailor the stories specifically to them. In the case of Google Chrome, the audience was technical enough to care about browser performance and engineering. With that in mind, Google was able to tell stories about JavaScript processing and browser caching.

The US Navy’s understanding of its audience — Japanese residents of Yokosuka — determined the format of its messaging. In fact, it was so successful in that campaign that people lined up around the street to get a copy of the manga. Who your audience is, where they’re from and what they know will influence the contents and delivery of your story.

Let’s say someone asked you, “How do I get to the nearest post office?” What would you say? Maybe something like:

“Turn left at the first light. Keep going until the stop sign, and then make a right on Main Street.”

These directions seem pretty straightforward. But what if you knew the person who was asking you? Let’s say it’s your cousin Joseph, who is a bit navigationally challenged. Then, you could give a few more details.

“Turn left at the first light, where the blue gas station is. Keep going — you’ll pass that playground we used to play at — and make a right when you see our old high school.”

What you’re doing is offering the right level of detail based on the person you are communicating the information to. We scope our conversations based on context and audience all the time without even realizing it. If you had answered the question in painstaking detail, it would be more like this:

“Insert your key into the ignition; turn it once until you feel the engine starting. Before you back out of the garage, make sure to check all your mirrors for any people or vehicles…”

… and so on. We don’t go into this level of detail because we implicitly understand and account for the audience’s level of expertise.

This consideration is important and yet insufficient. Beyond expertise level, we also need to consider the audience’s context. In the last example, I assumed that the person would be driving. But they might be a cyclist or a pedestrian. A cyclist would want to know the grade of the street; a pedestrian won’t care about one-way streets; and a driver wouldn’t be able to drive down stairs.

Let’s consider a business context. In The Design of Everyday Things, Don Norman discusses the concept of mental models — how people view a system. Norman uses a camera as an example. If you were to ask an engineer how a camera works, you might get an explanation of light, aperture and shutter speed. The comic for such an explanation might look like this:

Figure 4.9
How a camera works.

If you were to ask a layperson how a camera works, they might explain how to turn it on, how to focus and how to upload a picture. Then the comic might look like this:

Figure 4.10
How a camera works to a layperson.

Both of these comics are correct. They simply differ based on the expertise of the audience and the context of what the audience hopes to learn from the story. If you know your audience, you’ll have a much better idea of what your story should be and how to frame it. We can apply these considerations to our Square example, too. Square’s audience is merchants who have trouble receiving credit-card payments and might find Square useful.

The merchants need to own a smartphone, so they will presumably be reasonably tech-savvy. At the same time, they will only care that the device is easy to use and secure, and would be unlikely to understand (or care about) the detailed technical workings of the hardware.

Selecting A Representative Use Case

You now know who you want to read your comic and their context. The next step is to find a story that will help your readers understand why they should care! To accomplish this, find a use case that resonates with them and that addresses their problems. You may be telling the story of a problem that they didn’t even realize they had.

When Apple launched its video-conferencing application, FaceTime, people already had many competing and compelling products they could use. Skype, Google Talk and even Apple’s own iChat have free video-chat and even video-conferencing capabilities. One important distinction was that FaceTime is on a phone rather than a computer — but, given that you still had to be connected to a Wi-Fi network, this portability was limited.

Apple didn’t explain FaceTime’s differentiation through a list of features. Instead, it aired a series of short advertisements that showcased powerful human use cases — scenarios such as a father traveling abroad and conferencing with his family, and grandparents seeing their grandchild for the first time. Are these scenarios unique to FaceTime? Certainly not, but they were compelling and helped the viewer understand why the feature was important to them.

intro04-021 (1)
Find a use case that resonates with your readers addresses their problems.

Let’s go back to Square. What kind of use cases could we use for Square? Let’s list a few use cases for which we think Square would best help solve a problem.

  • Trade show,
  • Selling large items on Craigslist,
  • Coffee shop,
  • Garage sale,
  • Small merchant,
  • Food stand,
  • Massage therapist,
  • Musician.

Notice the commonality in these use cases? In each case, the user typically does not have an easy means of accepting credit-card payments but needs to do so or else lose business. For some, such as the coffee shop and small merchant, the user has an established business. For other use cases, such as the garage sale and the items on Craigslist, the individual would need to accept credit cards on occasion.

Still others are in the goods and services business, providing their service in varied locations such as conferences, craft fairs and people’s homes. Two themes arise from looking at these use cases: the advantage of Square’s mobility, and the ease of access to a credit-card payment system. Conceivably, we could create just one comic about the mobile use case, and it would naturally also describe the easy credit-card payment system.

However, if we were actually creating these for Square, having a separate comic for merchants would be beneficial, lest they think, “Well, that’s nice, but my shop doesn’t move around, so I don’t need a mobile solution.” For the purpose of this example, let’s create a comic for the use case of selling books at trade shows and conferences. Which of Square’s features should we highlight?

Perhaps listing all of the features would be useful:

  • Free app on iPhone, iPad and Android;
  • Free card reader that plugs into the mobile device’s headphone jack;
  • Accepts Visa, MasterCard, American Express and Discover;
  • Purchasers can use their finger or a stylus to sign on the phone or iPad;
  • If the card can’t be read, there’s an option to enter the number manually;
  • The card reader, website and mobile applications are well designed.
  • Money received is deposited daily to your bank account;
  • A flat fee of 2.75% is charged for all transactions;
  • The purchaser can get a receipt by email or SMS;
  • The vendor does not have to commit to a contract to order the device or to use the service;
  • From the website, the vendor can track all invoices;
  • All transactions are secure;
  • Access to full reports on what has been sold;
  • Regular customers can set up a tab.

Yikes! Those are a lot of features to include in a story. How will we create a comic that captures all of these points in only three to eight panels? We have more bullet points than panels! Luckily, we have a use case now to help us narrow down which features to highlight and which are less important. One important aspect is that the device plugs into popular mobile devices and accepts all major credit cards.

Whether you need to highlight the cost of the device (free) is debatable. You could argue that the comic is meant to get the reader interested enough to investigate, and you could subsequently explain the details in another medium. However, as we’ll see later, incorporating the cost into the dialogue is easy enough. Some details we can skip in the comic are the schedule for depositing money received, the fees and the lack of a contract.

All of these elements are important selling points for the product, but remember the questions that the comic should answer: “What is this, and why should I care?” Can you imagine if iPhone commercials talked about two-year contracts or even the cost of the phone?

Conclusion

Summing up, here are the features that seem most important to highlight for the mobile payment use case we’re addressing:

  • Free app on iPhone, iPad and Android;
  • Free card reader that plugs into the mobile device’s headphone jack;
  • Card reader accepts Visa, MasterCard, American Express and Discover;
  • Purchasers can use their finger or a stylus to sign on the phone or iPad;
  • The purchaser can get a receipt by email or SMS;
  • From the website, the vendor can track all invoices.

This list seems much more manageable. Can you see the story crystallizing?

We’ve decided that the goal of the comic is to get merchants to understand Square and to sign up for one. The audience for the comic is merchants who are technologically savvy. The problem we’ll address is the sale of goods at trade shows and conferences, with no easy way to accept credit cards. We’ll narrow the story to a person who wants to sell books at a conference. (As it turns out, Rosenfeld Media, the publisher of this very book, now uses Square to sell its books at conferences!)

We have finally narrowed down the feature list to just over a handful. Now we know what the story is about.

Editor’s Note: A special thanks to Kevin Cheng and Karen Corbett for providing us with this book excerpt (the entire book is available here). If you’re also interested in having your work featured on Smashing Magazine and in the Smashing Library, feel free to contact us anytime!

(al) (ea) (il)


© The Smashing Team for Smashing Magazine, 2013.

May 24 2012

13:30

Comics and UX, Part 2: Flow and Content

Comickers have long known the secrets of visual storytelling, and there is much we in UX can learn from them. Earlier this week I shared basic techniques comickers use to craft stories and lead their readers’ eyes. Today I will show you how to master flow and control the perceptions of your readers, how visual metaphor in UI can bridge language barriers, and why our definition of “content” needs revision.

Note: In this article, I will use “reader” when referring to people who would read comics and/or visit web sites, and I will use “user” to refer only to people in the context of visiting web sites.

We already covered grouping, proximity, pacing, and balance. Each of these is powerful enough on its own, but when combined masterfully, they allow you to control a reader’s perceptions. I’m going to show you how to weave these disparate pieces together to build a better experience for your users.

Flow

Taken together, all of the elements of cartooning create something called flow. A master of flow can make readers’ eyes dance across the page, even in unconventional directions.

Left to their own devices, eyes want to travel in a downward slanting direction across pages. This is why ad magazines have “v” shaped layouts. This is really only good for scanning. Both web designers and comickers don’t want readers to scan, we want them to digest, to understand, to listen with their eyes.

While there are very few rules in comics, one is that the Western reader’s eye always starts in the upper left side of the page. If there is no panel there, the eye moves downward and to the right in search of a place to start.

Illustration for Of Github and Pull Requests.

Using the above techniques, you can coerce the reader’s eye to take unconventional paths.

Comicking techniques in action

Now that you know the basics, let’s put these babies to use! We’re going to start by looking at some fairly high-level implementations where we can use visuals to replace words before moving on to show how proximity, temporal spacing, balance and flow can be used directly in a design.

Internationalization

An excerpt from an IKEA instruction manual.

When you rely more on visuals than text, your work can be understood across language barriers. Art is a universal language, and that’s why we see it used so much in international publications or handbooks like IKEA’s above. There’s even a set of international road signs used by countries complying with the Vienna International Convention. This way, when you cross country borders in Europe you know that there’s a railroad crossing ahead or that you need to keep an eye out for pedestrians– even if you don’t speak the language.

Sourced from the Merriam Webster Visual Dictionary (which is a really cool resource)

You’ll notice that these images are starting to form their own language, a visual vocabulary. They’re becoming symbols, with each symbol embodying a single idea. This is how writing began in Egypt and China. Similarly, it’s how our interfaces evolve.

Visual metaphor

A comic panel becomes an image that suggests an action which can be further simplified into an icon. Would the letters t-r-a-s-h resonate as much as this simple image? Sometimes, a “simple image” describes a complex action. For instance, this icon can mean trash, remove, delete, discard. On a list of favorites, it can mean “unfavorite this and remove it from my sight” – a very complicated concept! But we can use visual shorthand to get it across intuitively.

Real-world examples

Shopping cart inventory screen from Fab.com.

In this shopping cart inventory screenshot, we can see not one but two comic techniques at work: panelling and proximity. Notice how each item has its own box or panel separating it from the other. But also notice how the “your order” box is off on its own on the right, in the last section the user will look to when looking at a page in left-to-right eye movements. This makes sense since the designer wants users to first review their purchases then the information in the “your order” box before clicking “check out.” Imagine how much clunkier this would be if the “your order” box was on the left!

Also notice the “x” buttons in each item’s box. Here we see proximity and visual metaphor at work. The “x” here simply implies “remove” without the need to explicitly state it. The proximity of these removal buttons to the items they remove also lets users know what will be removed.

Dribbble.com’s home page features new submissions from users.

Dribbble.com uses proximity, visual metaphor and panelling as well. The white box that encompasses each “shot” contains three to four icons that show how many views, comments, and favorites the image has and if the image has an attachment. Interestingly, the creator’s name doesn’t appear inside this panel. It appears underneath the panel, but users can infer ownership by proximity. What the name is closest to, it must be related to.

Blue Cross Blue Shield’s home page exemplifies “flow.”

Blue Cross Blue Shield does a great job with their entire home page. It starts with a sweeping establishing shot – lots of space gives the user a chance to pause and absorb the site. The caption pulls them in and the “Shop for Health Insurance” box calls them to action. Right below that, three evenly spaced panels set a stable rhythm for their content, stressing that each article is of equal importance.

This page is a good example of flow, so good that I wanted to show you how easily its layout could be repurposed for a comic.

Content vs. Copy

Will Lieberson, editor at comic publisher Fawcett Publications, stopped by a barber shop late one night. While waiting for a shave, he noticed that a kid next to him reading one of his own comics! But then he realized that the boy was only reading the top panels of every page. When he tried to explain to the youth that you should read a comic’s page from top to bottom to get the whole story, the boy quipped, “I know, but this way is faster!” (citation: Steranko History of Comics, Vol 2, Page 15)

Panel of Fangs of the Fiend found at Stupid Comics

When your words and pictures are fighting each other for dominance – when you fill your page with information that doesn’t further the plot – readers start skimming, also known as scanning.

People don’t read, they scan…right?

Thanks in large part to Jacob Nielsen’s work, it’s a common heuristic that people don’t read pages, they scan them. This is, of course, a drastic oversimplification. We’ve trained readers to skim content by inundating them with terrible, fluffy, poorly prepared and badly placed content.

It’s a natural reaction to bad storytelling to just skip to the good parts.

Consider how our grandparents would pick and choose their reading materials. After carefully choosing their reading material, they sat down to digest their choices in full. They didn’t skim The Great Gatsby. They didn’t glance at the Wall Street Journal. They chose what they wanted to read, and they read it. Works were curated by slews of creators, editors, and reviewers to ensure that when audiences came, they were not disappointed. People would become outraged with creators and publishers over bad content!

It’s not that people have no patience. It’s that the bulk of online content providers have repeatedly failed to provide things worth spending time on. Now users have knee-jerk reactions. As soon as they land on a page, they turn their shields on – deflecting the ads, the talking dogs, the long intros, the fluffy copy – and begin searching for the meat, the ker-pow.

Users are like that little boy, reading the top panels of every page then moving on because life’s too short to slog through your crappy content.

Content strategists and user experience designers have tried to address this observed “people don’t read, they scan!” problem in a myriad of ways by optimizing microcopy, keeping things above the fold, A/B testing calls to action, etc. But we need to remember to keep an eye on the whole experience. Comics would not be the cultural cornerstone they are today if comickers had started optimizing the first panel on every page!

People don’t scan, they look

People aren’t reading web pages from top to bottom, but they are looking at the page. Humans are visual animals first. Images are often the first thing we notice on a page while words add an extra layer of abstraction that your brain has to decode.

I often hear presenters extolling the value of good content. But what they’re actually talking about is often just copy. Copy isn’t the only kind of content!

Back in ye olden days of the World Wide Web, text was the path of least resistance and images were seen as non-semantic and often garish substitutions for meaningful copy. But we’re living in the future now. We have all kinds of accessibility options at our disposal, from WAI-ARIA to HTML5 video’s subtitles to our good old friend alt text. We’re better equipped than ever to plan, design, and measure the effectiveness of visual content.

Content strategists and UX practitioners, I implore you to emulate the authors of the golden age of comics and lean on your graphics specialists. If you’re a one man UX army, remember to use Photoshop or a sketchpad from time to time, and try to stretch your visual communication skills with things like weekly challenges.

Conclusion

Many comickers evolve into storyboard artists and move on to work in cinema or animation. I evolved into a front end developer and UI designer. I still use my skills to communicate with words and pictures, just in a different medium. If you’re going to connect with your audience, you’ve got to learn the art of the flow, you’ve got to guide their eyes, and you can’t do that with mere words alone. Content strategists and copywriters often see the Internet as an endless document comprised of page after page of text and navigation. But I echo the words of Scott McCloud when I say: the Internet is an endless canvas.

Resources and thanks

You can get a better feel for graphic storytelling by reading comics like the fine ones below created by expert comickers:

Thanks to Kurt Busiek for helping me find the barbershop story and to Scott McCloud for putting us in touch.

Check out these classic books by Scott McCloud:

I love talking about sequential art and comics, so drop me a line! @CrowChick, Dribbble, My web ramblings blog.


The post Comics and UX, Part 2: Flow and Content appeared first on UX Booth.

May 22 2012

13:30

Comics and UX, Part 1: Cross-disciplinary Techniques

Comics, cartoons, sequential art. Each of these words implies the same thing: stories told with words and pictures. Much has been written about about how storytelling affects the user experience, but little has been written about how visual storytellers craft that experience. Today, I’m going to share the tricks of the trade that comickers use to lead a reader’s eyes across a page. You can use these techniques to tell stories, sell widgets, promote an idea, help users find what they’re searching for – the possibilities are endless! (And I promise there will be lots of fun comics.)

Note: In this article, I will use “reader” when referring to people who would read comics and/or visit web sites, and I will use “user” to refer only to people in the context of visiting web sites.

Long before I was a web designer, I was “Rachel the Great,” known in high schools around the world for my weekly comic adventures at gURL.com. (I even won an industry award for my work!) When comics could no longer pay the bills, I used my talents to jumpstart a career in web design.

What the flip do comics have to do with web sites? Quite a bit actually. Comics and websites both start as wireframes.

Both mediums tell stories and convey ideas using words and pictures. People will scan boring or confusing sites as well as comics. In both mediums, you have to either pull readers into a narrative or immediately offer up the meatiest part of the content, lest readers skip to the next page.

Because they have so much in common, many basic comic techniques apply equally as well to web pages. Let’s go over them!

Techniques and theory

There is a saying among equestrians: “Control the head, and you control the horse.” A reader’s eye is like a horse: both will roam if left on their own. The reader’s eye wants to gallop madly across the room and look at that shiny thing over there or that iPhone in your hand. Like the Red Queen in Through the Looking Glass, as creators we have to run twice as fast just to keep our readers in one place!

A good comic doesn’t lay itself out. It doesn’t magically fall from the artist’s pen fully-formed onto the Bristol board. There are scripts (content), layouts (wireframes), pencils (mockups), and inks (final designs) to do before the words are finally married to the pictures.

But the difference between a good comic and a great comic can be found in the place between the script and the pencils. Everything else is icing.

Panels: temporal snapshots

Generally speaking, a comic’s panel and frames act as a mini corral for the eye. Readers process each panel individually. Further, we know that everything inside takes place at the same time and at the same place.

Panels also work as a grouping device. Everything within a panel is related to each other, whether they be characters in a scene or random objects.

Excerpt from Beauty Is as Beauty Does, a comic I made for gURL.com

Proximity

Things close to each other seem more related than things farther apart.

Notice how the first panel is a picture of a woman and a boy. In the second panel, they’re a sister and brother or mother and son. The characters are exactly the same in each panel. The only thing that has changed is the distance between them. Your mind naturally infers a relationship based on proximity.

The same goes for panels. The eye naturally “jumps” to the next closest panel, even if it’s not in a “conventional” location or direction, even if the things in the panels don’t seem immediately related. Your brain fills in the gaps and makes inferences about those relationships.

For instance, in the first panel here we see a pair of Nine Inch Nails tickets. In the next panel, we see someone holding two slips of paper. We assume that those aren’t menus or bookmarks or business cards: we assume they’re the tickets!

Spacetime, whitespace, and pacing

As in the universe, so in the comic: time and space are irrevocably linked. Panels set the rhythm and pace of a page.

A comic with panels of equal size at regular intervals “sounds” like a metronome.

Tick tock, tick tock. The pace is neither fast nor slow. It’s like watching a sitcom as compared to a drama or an action film.

You can actually “slow” time in a comic by increasing the distances between elements.

A big splash of whitespace gives the impression of slowed time.

Likewise, many tightly spaced panels give the impression of quickly passing time.

Strong diagonals also give a sense of frenetic energy or an off-kilter situation.

Balancing words and pictures

A common comicker admonition is “show the story, don’t tell the story.” While it is possible to have a comic that consists entirely of pictures, a comic cannot consist solely of words. That would be a novel.

Andy Runton’s “Owly” is an all-ages comic devoid of dialog and text.

A good comicker works to balance words and pictures. Sometimes it makes sense to let words do the heavy lifting, especially when it comes to concepts that are difficult to explain with images, like facts and figures (although infographic artists show us that visuals can help with those, too!). However, when it comes to emotions and abstract concepts, pictures often can convey complex information much more succinctly.

There’s a lot going on in this short comic. A good author could put this scene into words, but it would take much longer for the reader to read and process the scene, whereas with pure visuals, you can digest what’s happening in a few seconds.

A good writer knows what an artist can show for them and leaves them room to do so. Likewise, a good copywriter knows the abilities of their designers and collaborates with them. Would an infographic say this better than a list of numbers? Would a video of the product in use be a good supplement to a step-by-step instruction guide?

Next up: flow and content

Each of these techniques is useful enough on its own, by when you combine them they become downright powerful. In the second, final article of this series we’ll combine these approaches to achieve better flow and more compelling content. See you soon!


The post Comics and UX, Part 1: Cross-disciplinary Techniques appeared first on UX Booth.

January 15 2012

10:00

1stWebDesigner’s Life #3 – Mind Reading & Doing The Whole Site

It’s time to get back to our funny project, 1stWebdesigner’s Life. We’ve received such great feedback from our #1 and #2 that we’ve decided to make it a really cool bi-monthly series to brighten your Sundays. We’re back with Webster (our superhero!) brought live by Jamie Sale!

Today we’ll talk about clients that think we can read their minds, and misunderstandings about what your job is and what it isn’t but your client may think it is. So let’s go through them.

Mind Reading

Doing the whole site

So, what could you do in these situations?

Do you remember that our goal here is to gain some insight from this comic? So, let’s go on this.

I don’t want you stealing my idea!

Many people think that an idea has value. Actually, we avoid talking about our own ideas with other people, fearing that they will just steal our next million dollar idea. But the truth is that until you implement your idea, it has no value at all. Even after implementation many people will just copy you, so success is not just about cool ideas.

Well, it may be hard to convince your client of this fact (if you find a way to do it, please, tell me).

So, your best bet here is:

  1. Position yourself as expert, someone who will help and make their idea even better with you great wisdom :)
  2. Guide your client by trying to find out at least the basic structure of their idea, and similar projects so you’ll know how to start

To check #1 there’s no easy path, you must know a lot about what you’re talking about. So if it comes to a cool project that needs awesome JavaScript enhancements, you need to know JavaScript so you can give good (and free) advice. The key here is to say like “why don’t you do X, Y, Z [cool suggestions related to what client have pitched to you] ? If you want I can do it for you for $[fair price here]“. Again, don’t fear the client stealing your implementation logic, they’ll be glad to know that you want to help with great ideas.

To check #2 you’ll need to be really updated with new ideas and upcoming projects. So if your client asks you “a way to send and receive messages to others with a unique identifier so only allowed person will see it” you may suggest her trying Gmail. Then as you’ve done several webmail clients before you’ll know the project’s size :)

But what I was supposed to do?

About the second strip, well, this one scares me even nowadays.

I used to work in a company where programmers were asked to (wait for it) insert products in their projects. Yeah, you read it right. A real company (actually I’ve seen others that work this way too) where programmers spend their precious time doing what a technician is supposed to do.

So, hold on, if a client thinks that you were supposed to add all their data, it’s not their fault. It’s yours.

What you have to do is to make it very, very clear, in the same way you won’t be designing their business cards, you won’t be adding content, or formatting their PC.

Your job is really clear to you, but you must explain what you believe your role to be to them, though they think you are they guy who knows everything about everything internet-related you won’t be doing such things.

It’s your turn!

Have you seen something like this? Do you have any fun stories to share? Just go on and comment! :)

August 29 2011

10:30

1stWebDesigner’s Life – Your New Must-Read Webcomic. What do you think?

After enjoying a good weekend it’s good to start your week reading some funny things, right? That’s why we bring to you our brand new webcomic: 1stwebdesigner’s life. The comic will not just be about common situations every web designer encounters, but we also want to give you some ideas about how to deal with those situations.

We’re inspired by many web comics and funny websites out there, like A Programmer’s Life, FMLife, Vida de Programador(pt-br), WebDesignerDepot’s Comic of the Week. But we surely won’t steal anyone’s idea. Everything written here is about things that I have experienced or reader’s submitted ideas :).

Oh, Tyron Love is the amazing South African cartoonist that brings this idea to life.

Characters

Our nameless Hero! (give him a name!)

It’s you, me, and everyone that suffer from web designing disease.

You have gone through hard times, haven’t you? But I’m sure you can laugh when remembering it, you know, that “better than google” client, that funny comment of your girlfriend, that site you have forgotten to test on IE. So this is it, always with a smile on his face and ready for the craziest clients that may come.

By the way, the client is another staff member:

Da Boss / Client

Basically he is someone who pays you to do technical work.

Many times they don’t know what they want, and think that what you do is just click a few times in a magic website generator and BOOM, new Facebook done.

More characters to go!

We have more people backstage just waiting to be published, but for our inaugural piece, we will have just these two characters. :)

1stWebdesigner’s Life #1 – Flash Banner

I bet you have seen something similar to this:

How to deal with this situation?

This happens not only with Flash, but I believe that iPads, iPhones, and iPods widespread made this issue pretty common.

First of all, you are the specialist. You have to know exactly which limitations each solution has, and how to deal with them. In this case, our hero has made the mistake of believing in what the client says.

Huge mistake, dear friend.

Of course, you don’t have superpowers (as far as I know), so you have to ask some questions. But you should keep in mind that your client doesn’t know what he is talking about when it comes to implementation.

Believe me, if he says “I want a flash banner” he thinks that only flash can solve his problem.

Well, you have basically two solutions for this:

  1. Ignore customer and do it your way – This is potentially dangerous if you aren’t the only one working on a project, although sometimes it is the easiest way.
  2. Educate your client - This can take a little time, but man, this will surely prove you know what you’re talking about. Your customer will understand why you’re doing the things you’re doing and if he takes the risk he will know what could go wrong.

Many times it’s good to explain to your client some of the common limitations of the application they’re asking you to use.

You know, if he wants AJAX, Flash, Hit counter, 20-steps buying process or any other solution part of the reason you are being paid is to explain why you’re using one solution over another, and what the pros and cons are of each.

Now, it’s your turn

So, do you have funny situations that want to share with us?

Or do you have a creative name for our hero? Yeah, it will be good to hear some advice!

Feel free to get in touch via comments, twitter, email. Share with us how your 1st web designer life is going.

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
Get rid of the ads (sfw)

Don't be the product, buy the product!

Schweinderl