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:

• Andy Runton’s Owly
• Kyle Weem’s CSSquirrel
• Rembrand Le Compte’s Beardfluff
• Starline Hodge’s Candi
• Barry Deutsch&squo;s Hereville
• Brad Colbow’s The Brads
• Anything by Raina Telgemeier
• and of course, my own comics at RacheltheGreat.com

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:

• Understanding Comics: The Invisible Art
• Making Comics: Storytelling Secrets of Comics, Manga and Graphic Novels

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

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!

We put Facebook to the test with a panel of five remote web testers in early August, 2011, and listened to them voice their frustrations aloud as they navigated the site performing several assigned tasks. Although Facebook has taken steps to address some of the usability concerns we exposed, issues still remain.

All testers came from UserTesting’s on-demand panel, had over 100 friends, spent over 30 minutes on Facebook every day, and were Americans between the ages of 20 and 40.

Photo privacy controls

Nine months ago, managing the privacy settings of a Facebook photo album was a nightmare. Users had two options:

First was to click “Edit Photos” within the album. Our tests revealed this was far from intuitive. Users stated they were instead searching for a “lock icon” or an identifier next to the album. What’s more, the “Profile Pictures” album – the default album comprised of photos of a user – didn’t even have an “Edit Photos” option.

Second was to manage album privacy was to go to Privacy Settings → Customize Settings → Edit Album settings. The Privacy Settings page allowed users to set access for all “your photos, statuses, and posts;” however zero testers used default settings. The Edit Album link was buried in between larger buttons and other controls that were in bold font, which users struggled to find.

Privacy settings were not located in the right context when users needed to access them. One tester said it best: “The privacy settings can get really complicated… even if I’ve done one before, it’s been awhile, maybe I’ve forgotten or the way it’s done is changed.”

When Google+ launched, by contrast, it let users easily share each photo or post with whichever “circle” of choice.

Whether or not the release of Google+ was the catalyst or a coincidence, Facebook redesigned these pages in late August – just 3 weeks after our usability study. Users can now manage album privacy directly from their profile and change album privacy settings directly on their albums page. Further, users can set each status update or album its own privacy setting, inline with each post.

“Smart” friend lists

Google+’s circles were a direct response to Facebook privacy control woes, particularly managing friend lists. “Friend lists” are how you can organize your friends on Facebook. You can grant or limit access to friend lists you create to view albums, status updates, and availability in chat.

We asked users to enable only four of their best friends to see them online without instruction. To do this, they would have had to create a friend list, put these friends in the list, and then limit their availability in chat.

Easier to find

To create a friend list, users could formerly go to go to the Home page, click Friends in the left navigation column, then click Manage Friend List. If users accessed Friends from their profile, they must go to “Edit Friends.” One user did not assume the “Edit Friends” button would lead to a page to create and manage friend lists.

Friend lists are now easier to access on the left navigation bar under Friends.

Facebook’s friend lists were far from friendly.

…In the proper context

After completing the task users were still unsure about their success in creating a friend list. This was because the newly created list did not appear in the drop-down menu when selecting Custom privacy controls.

This has not changed. Furthermore – in chat – when users click “Limit Availability,” they can only see names of friend lists they have created, but are still unable to see who is in these lists or update them from here.

In September, Facebook created “smart lists” to automatically group close friends, family, coworkers, and schoolmates. For many users, these ‘smart lists’ are arbitrary, as sharing decisions are most often based on relationship comfort level –– not organizational ties.

Facebook chat

Coincidentally, our August study ran right after Facebook chat launched. We found that users were confused that friends appeared in their chat bar who were not online. One frustrated tester complained he could not feel certain that he could see all his online friends in the chat sidebar, since Facebook includes offline friends in the mix. When he realized he could not chat with friends who appeared in his chat list, he assumed that chat was broken.

Likewise, one woman was completely confused when she saw her daughter appear in the chat list, realizing this was impossible since she was standing there right next to her.

Users felt that some online friends were “missing” because they could not scroll up or down the list to make sure. Days after the launch, Facebook added a scrollbar. However, offline friends still appear in the list.

After the test, we asked users what features they wanted in chat (UserTesting provides customers four, written, follow-up questions after the video test). Five out of five users wanted the ability to be invisible in chat. The common reason was they did not want to be messaged by certain people at certain times. Interestingly, no one was interested in being “away” – one user commented that Facebook status updates have taken the place of “away messages” (of the AOL era) as an indication of our current state in life.

As there are likely millions of people who have Gmail open in one tab and Facebook in the other, Facebook could take note. (Facebook Chat is more comparable to Gchat than Google Hangouts, which has higher functionality for group chats.)

Where search meets social

Facebook identifies as a social discovery engine, not a search engine. However, as Facebook nears the one billion user mark, it’s become increasingly harder to find the right person, page, or app you’re looking for.

Users were asked to search for friends by current city and for statuses that contained the term “vacation.” Two users expected when they type something in search and press enter, they would go to the search results page. However, Facebook takes users to the first result that comes up. That would be like googling something and automatically being redirected to the first result.

As an example, when one user typed in “vacation” into the Search bar and pressing ENTER, he automatically arrived at the “Pet Society Vacation” app page.

We observed two users try to click the magnifying glass option in vain trying to perform an advanced search.

Little has changed with search since our original Facebook user study. To perform an advanced search, users must type in a term in the search bar, mouse down to “See more results,” then go to the left menu column to add more filters. Meanwhile, Google+ lets users easily search any person, page, and even content and has filters clearly on the results page.

Our suggestion? When users hover over the search magnifying glass, offer a drop-down menu to do an advanced search. This aligns well with what we observed. Further, when you press “Enter” in Search, take users to a search results page. If the first result that shows up in the results preview is what the user wants, the user could click on it – or press the down arrow, then enter – on their keyboard.

Conclusion

Move fast and break things is a great motto, but it just seems like when features of a very successful company lack usability – the general sentiment of the people is, “They don’t care about us.” Users in our original study expressed that Facebook made some things difficult on purpose as if they were being tricked for some ulterior motive.

Facebook has since taken conciliatory steps to address the issues exposed in usability tests, but their reputation as a top-down all-knowing power prevails. If Facebook wants to win the battle with Google+, they should humble their design decisions down to the needs of the user.

There’s a great line in the Postal Service song, This Place is a Prison, that states, “It’s not a party if it happens every night.” Although the singer specifically refers to a life of too much partying, it’s a good reminder that anything that happens too regularly loses its significance.

This same concept holds true in our navigation. As humans, our brains are wired to notice contrast, things that stand out from the norm. It’s why photocopiers employ big, green start buttons. It’s also the reason that the interface on my smartphone offers a collection of colorful icons instead of just text links.

When looking for Yelp on my iPhone, I’m not scanning for the word “Yelp;” I’m scanning for a red square. This is a much faster mental calculation than exhaustively reading each application’s name. It’s clear in both cases that the designers have put prioritization and visual language to work.

Defining our terms

Prioritization is the act of giving an element prominence relative to its importance in a (navigational) hierarchy. With regards to a navigational hierarchy, this is done by first considering each element’s relationship to its user’s goals.

Prioritization is the reason why items like “Settings” or “Profile” are typically less noticeable than the primary actions on a site or application. It can be communicated in a variety of ways, but essentially prioritization means that items of more importance should call more attention to themselves.

Harvest App prioritizes more regularly used links (Reports and Timesheets) over others (My Profile)

Visual language, on the other hand, involves using visual elements to convey meaning. Often times this is done through illustration or iconography, though any visual cue that reinforces the function of an element contributes to that application’s visual language.

By way of contrast, consider text-only navigation structures – especially those that use the same font size. Without introducing/incorporating a rich visual language, these structures don’t reach their fullest communication potential. Simple visual cues go a long way towards helping users parse information because they facilitate recognition over recall.

Some well-known sites and applications make use of the calendar icon.

Hobgoblins

Unfortunately, designers often do the exact opposite in their designs. In their desire for consistency they often force users to carefully scan each item until they find what they’re looking for. Emerson once termed this kind of foolish consistency “the hobgoblin of little minds.”

Let’s take a look at a few bad examples:

Craigslist

Craigslist offers both little prioritization and a non-existent visual language. Users are required to read nearly each entry on the home page before finding the link they’re looking for.

Jimmy John’s Website

Every time I order a sandwich on the Jimmy John’s website, I find myself carefully re-reading each navigation item. For the sake of consistency, every navigation item looks the same: red, black, and white. The sandwiches at Jimmy John’s are great; the navigation, less so.

Microsoft Metro UI

One of my favorite recent violators is the Microsoft Metro UI. This has been out for some time in the Windows Phone interface and will be arriving soon on the desktop with Windows 8. By making the home screen tiles all the same color with white lettering and white icons, the user has to read each tile instead of responding to unique icons and colors. (John C. Dvorak recently wrote a great piece about this in PC Magazine.)

Rdio iPhone App

The Rdio iPhone App interface makes the same mistake as the Microsoft Metro UI. While they do incorporate iconography, the consistency of color and size of the icons forces the user to closely scan each item. In an otherwise beautiful and successful app, I find myself repeatedly scanning the home screen options to find my desired action.

Apple iTunes

In Apple’s iTunes 10 (as well as its Finder), the sidebar items were converted from color to grayscale. In bringing consistency, Apple removed the contrast between each entry, thus requiring users to scan more closely and read labels to find the desired content. Previously, if you were looking for podcasts, you scanned for the purple icon. Now you have to scan for the word “Podcasts” because the icons run together.

iTunes 9 appears on the left and iTunes 10 appears on the right.

Path Sliding Menu

The Path iPhone app uses a similar sliding navigation to that found in Facebook app. There is one important difference, however, in that Path does not use icons with labels whereas Facebook does. Each time I open the Path navigation, I have to read each entry until I find the one I want. With Facebook, I’m reacting to the visual patterns and selection is much faster with less cognitive load.

Learning by example

So now that we’ve seen them, can we avoid these hobgoblins of consistency and create more effective navigation structures? Let’s look at some good examples:

Mint

Mint has long been viewed as an exemplary user experience and they have some nice touches in areas that use highly visual navigation. The “Ways To Save” tab in particular relies on a thoughtful collection of icons for navigating.

ESPN

The ESPN site has a variety of different navigation styles throughout, but I find the hover state for the primary navigation items to be particularly effective with its combination of photos, videos, and various text weights.

Volkswagen of America

When browsing the vehicle model options on the Volkswagen of America website, the dropdown navigation menu combines prioritization – Sedans before Convertibles – with visual language – an iconic version of each vehicle in varying colors.

Twitter Web App

The Twitter web app has a very simple interface with only a handful of links, but each is accompanied by a distinct and meaningful icon to set it apart and the most important action, composing a new tweet, is set apart in bright blue.

Instagram iPhone app

The buttons on the Instagram app effectively combine both prioritization and visual language. Each button is identified by its associated icon and the most important one (the camera) is centered and stands out with a blue background.

EPB Fiber Optics

The EPB Fiber Optics website makes good use of varying levels of priority within the top level navigation. The primary navigation items are all in black with the most important option (“Order Now”) set off in blue.

Guidelines for success

We’ve seen examples both good and bad, now let’s try to generalize a bit. The following guidelines can help us create more prioritized, visual navigation schemes:

1. Pay attention to User Goals and/or Conversions

   When trying to determine how to prioritize and bring meaning to your navigation, think in terms of your users’ primary goals and/or site conversions. Make those elements prominent and easy-to-understand.

2. Be Inconsistent

   Take inspiration from the photocopier: instead of striving to give all navigation items the same size and appearance, leverage inconsistency in your design so that the most important items receive the most visibility.

3. Use Visual Language, not just Textual

   Where it makes sense, use icons and other visual cues to bring additional meaning to your navigation instead of using only text. This will allow the user’s brain to process more quickly by relying on pattern recognition instead of reading.

4. Size (and Color) Matters

   Use size and color distinctions to differentiate more important links or buttons.

Final thoughts

With so many aspects to consider when designing navigation, it can be easy to fall back on convention and create more work for your users as a consequence. While there will always be situations where using these techniques doesn’t make sense, keep in mind that differentiation can be a powerful tool.

Not all navigation is created equal. By employing prioritization and visual language in your navigational elements, you’ll help users forget the navigation altogether. They way they can focus on the content they’re really after.

Picking up where my last article left off, I’ll now discuss how certain communication and user assistance strategies can be used to further improve your perceived credibility. Let’s jump right in!

Communicate effectively

Wherever possible, information should be presented using plain language and an appropriate tone of voice. Ensure that any information you provide (including product reviews, descriptions, comparisons, policies, or disclosures, etc.) is communicated in a way that helps users’ make decisions. That is, quite often, what they’re there to do.

Provide relevant product information

Customers can feel a little like Goldilocks when trying to choose the right retail site by way of its product descriptions – some are too flowery, others include a great deal of exaggeration, and still others are too technical to convey any real meaning.

Aim to get it just right. Provide product information that’s meaningful to your users. Convey relevant information that actually helps them to discern the pros and cons of their choice. If you’re in any way unsure, conduct user testing to test your hypothesis.

Lowes shows the advantages and disadvantages of a product, enabling users to make a rational buying decision.

Use product comparison tables

Though product comparison tables are common, the metrics used within them can be difficult to understand – especially when it comes to raw materials, ingredients, and industry-related jargon. Explain the meanings of all attributes – as either in-line help or tool tips – so that users can actually understand the advantages that one product might have over another.

On the Lenovo site, users can view additional information about a comparison attribute on mouse-over.

Guide users to product recall information

People are often none-the-wiser when it comes to product recalls. As usage of some products can prove hazardous, it’s imperative that you bring such products to your users’ attention.

Consider guiding users to product recalls using your site’s home page. Timely guidance shows that you not only care about your users’ safety and well-being, but that you can be trusted to do so in the future.

Target’s product Safety & Recall page reiterates its stand on consumer safety.

Explain terms and conditions

Lengthy terms and conditions often confuse and frustrate users. Explain your terms and conditions in plain language to help users better understand the experience you wish to provide. This includes your policies related to site usage, privacy, shipping, returns, repairs, warranty, discussion forums, and commenting. Throughout, use proper paragraph breaks, categorizations, labels, and a comfortable font size.

Topshop’s terms and conditions have been well articulated and categorized, making it easier for users to understand the various policies and limitations.

Explain international shopping

Though online retail sites have made it easier than ever for people to shop across borders, ambiguity surrounding basic things – such as time taken for international shipping, customs duties, and return policies – can make it difficult for users to actually proceed with cross-border online shopping.

Therefore, provide information such as what products are eligible for order internationally. Explain how an international order affects delivery times, a customer’s ability to return a product, get support on a product, etc.

If your business is based out of the United States and you comply with the U.S.-EU Safe Harbor program, let your European users know that you are in compliance with their privacy protection needs. Additionally, inform users about your policies and limitations around shipping goods to a restricted area, like a US Military address (APO/FPO/DPO).

Children’s place has an FAQ devoted to international shipping that answers some basic questions that users may have.

Provide reviews, both positive and negative

According to data released by Bazaarvoice in Talking to Strangers: Millennials Trust People over Brands, 84% of Millennials (people born between 1977 and 1995) say that user-generated content (UGC) has a significant influence on what they buy (compare that to 70% of so-called “boomers,” or folks born between 1946 and 1964). Because a huge chunk of users will likely base their opinion on what strangers’ feel about a product , its imperative that you display user-generated content in a straightforward, honest way. To avoid frustration, have a concrete policy concerning the moderation of comments, reviews, and ratings.

Make all user generated content (such as reviews) easy to comprehend. Provide a dynamic summary showing the percentage of negative and positive comments/reviews and give users the ability to sort and search for specific types of comments/reviews.

Sony allows users to filter comments and also provides a graphical summary of user comments of its own products.

Continuous assistance

The last credibility strategy is certainly not least: provide online shoppers with continuous assistance throughout their experience. Here are a number of ways to do that.

Prominently display contact numbers

Though contact numbers are displayed commonly on retail sites, many times they are difficult to come by during an “emergency,” such as before making a buying decision and during checkout. In these situations, it’s especially important to help users on their way. If you’ve got it, after all, why not flaunt it?

The customer care number on the Deals Direct site is shown at several places on product pages and persistently on the header.

Allow users to contact previous buyers

Despite their apparent trust in product reviews by strangers, users are occasionally skeptical. What if the marketing department’s “cooking the books?” To overcome such doubts, consider facilitating communication between a potential buyer and someone who has already purchased a product.

You could also invite frequent buyers or selected members of the community to support new users by guiding them through the buying process. Ask and answer-type of services and user-moderated communities are two examples of such efforts. Encouraging users to contact previous buyers will instill confidence that the information shared on your site is authentic and unbiased.

On the direct.tesco.com site, potential buyers can get feedback directly from actual buyers.

Provide help documentation

Help is commonly provided to users in the form of manuals, write-ups, articles, descriptions, and textual how-to’s on retail sites. But that’s old hat. These days, context-sensitive help, embedded, and inline help are quite common, as is live chat.

Because of the time it takes to read documentation, users are likely to prefer a quick how-to video. Research conducted by Nielsen has shown that video consumption across multiple platforms has risen globally. About 70% of global online consumers watch online videos, while mobile video is watched by 11% globally. Considering that the adoption rate for videos is significantly high among desktop users (and catching up among mobile users), consider providing demos, how-to- videos, and interactive presentations to help users quickly understand a product or service.

Made.com provides short product videos that describes the product and helps users to visualize how the product may look physically.

Respond to feedback

The absence of a timely and sincere response – especially to negative feedback and grievances on forums linked to your site – may give the impression that you do not really care about your users and their concerns.

Always respond maturely and promptly to negative publicity, without being defensive or rude. If you have made a mistake, there is no better way than to come clean. A show of aggression or indifference, on the other hand, is best avoided at all costs.

In this example from its Twitter page, a JetBlue representative responds to an aggrieved flyer by informing him proactively about its Customer Bill of Rights.

Conclusion

Over the past two articles, we’ve considered many factors that may enhance or detract from the credibility of your website. Whatever mechanisms you choose, ensure that they are sustainable in the long run. Credibility and responsibility are essential qualities to the trust in any relationship.

Finally, I leave you with a rough heuristic for improving your site’s credibility:

1. Reconsider your business’ actual stance on credibility and reflect this on your site through a mix of design and content.
2. Consider elements that are currently on your site that (might) affect its credibility.
3. Consider elements you could add or change on your site that would increase its credibility.
4. Triage everything: consider what’s the easiest or fastest thing and the hardest or slowest thing you could do. Features that are relatively easy to implement include showing the total cost of a product upfront or providing navigation cues to your shipping policy. The ones that require some amount of investment, organizational motivation, and approvals include: making actual changes to policies, creating product videos, defining a plan for social engagement, etc.
5. Put a plan into action.
6. Implement changes in a phased manner. Give it at least three months to have an effect.
7. Test your hypothesis using a combination of web analytics and usability testing.
8. Keep testing and make necessary changes based on feedback till you see actual changes in users’ behavior and your Return On Investment (ROI).

You can use the above points as the base to create a realistic site strategy that has credibility at its core.

To conclude, in Fogg’s words, “those who design for credibility gain a strategic advantage,” as credibility gives site owners the power to change users’ attitudes and behaviors.

Series references

• comScore Reports $50 Billion in Q4 2011 U.S. Retail E-Commerce Spending, Up 14 Percent vs. Year Ago
• Holiday wrapup: MarketLive Performance Index shows strong gains
• What makes a website credible?
• Data quoted from VeriSign Brand Tracking Research, 2009
• McAfee Secure Website Certification Leads to Increased Sales
• Ethical Consumerism Report 2011
• U.S.-EU Safe Harbor Overview
• Short-Term Memory and Web Usability
• Talking to Strangers: Millennials Trust People over Brands
• Familiarity and Trust: Measuring Familiarity with a Web Site, Jie Zhang and Ali. A. Ghorbani
• How People Watch – The Global State of Video Consumption

Retail site owners must invest in user research to better understand their users’ pain points and take appropriate, course-corrective actions. Specifically, they should focus on being more honest – both trustworthy and transparent – in order to increase customer retention. Paying special attention to the elements of their sites that customers associate with credibility can go a long way towards establishing and maintaining the trust they seek.

Credibility through design

B.J. Fogg of Stanford University‘s Persuasive Technology Lab states in his maxim for credible design that “to increase the credibility impact of a website, find what elements your target audience interprets most favorably and make those elements most prominent.” Interestingly, Fogg also compares the credibility of a site to its “believability.”

And what do users of retail sites have to believe in? That site‘s content, of course! Extending Fogg‘s maxim, everything on an eCommerce site – from its messaging strategy and operating principles to its assurances regarding security and overall tone of communication – has an impact on its believability. Every bit of copy works to either attract or detract your users.

In this two part series, I‘ll discuss changes you can make to your site to improve its perceived credibility. Note that I say perceived credibility. I won‘t get into business processes or talk about things like the importance of keeping your word – those are the fundamentals of good business and outside of the scope of this article. No, instead, I‘ll show you ways to better convey the credible, trustworthy business you already are.

The first article in the series – the one you‘re presently reading – explores both security and ethical concerns. The second part (to follow) discusses communication strategies. Combined, your organization will be well on its way to appearing more cool, calm, collected, and, yes, credible.

Address security concerns

Online security is a huge concern for eCommerce users. First and foremost, then, ensure your site is secure. Check mechanisms such as SSL (Secure Socket Layer) certificates, firewalls, encryption algorithms, etc. Double-check that you are using industry-approved security methods. Finally, make sure that you comply with the regulations of the Payment Card Industry (PCI) and the Data Security Standard (DSS) if they apply to your business.

Having done this, inform users about the tools that you have put in place to safeguard their experience.

Display trustmarks

Users who have subconsciously seen trustmarks (e.g. Verisign, TRUSTe) on their favorite retail sites may be hesitant to share information on a site that do not show them. Studies carried out by both McAfee and VeriSign independently show that online sales increase from 10% to 36% if a retail site displays familiar trustmarks. To assure hesitant visitors, consider showing the trustmarks across all pages – for example, in the footer.

If nothing else, it‘s especially important to display security seals at the time of payment processing. Other good locations include call-to-action buttons, and, if possible, next to your site‘s links on search results pages.

Explain the meaning of trustmarks

Users can‘t trust something they don‘t understand. Therefore, inform your visitors how they benefit by the inclusion of security marks on your site.

On the FreeTaxUSA site, security seals are displayed persistently on the footer, and users can read the descriptions by clicking on any one of the seals.

Explain other safety mechanisms

There are many retail sites that do not display trustmarks, even though their owners have taken great pains to secure them. If you cannot or choose not to display trustmarks, it never hurts to clearly explain your organization‘s overall stance on user safety in an open way. Consider highlighting the common types of fraud found in your line of business as well as the steps your users should take if they suspect something isn‘t right.

For example, the FedEx Customer Protection Center has a page dedicated to discussing common email frauds associated with the FedEx brand. It also informs users about the steps to take in the event of receiving such fraudulent missives. This is a commendable practice because it shows the organization behind the site cares about their safety.

eBay shows its buyer protection policy persistently and explains it in an easy-to-understand way

Clearly communicate your privacy policy

We‘ve all seen the sea of text that passes for privacy policies these days. Text-based white noise. Seeing this, many users may misunderstand your organization‘s intentions: why should they give you their personal information when you won‘t explain, clearly, why you need it?

Explain your policy around privacy as clearly as possible. Indicate what type of data you collect, where it‘s stored, why it‘s collected, and under what circumstances you might share it with others. Your frank disclosures will help eliminate ambiguity around your data collection methods.

Many retail sites show the TRUSTe seal indicating that their privacy policy meets a higher standard. A word of caution, though: if you are using such a seal, ensure that it is updated and verifiable else you may be seen as unreliable!

The Best Buy Privacy Hub provides a host of privacy-related information, including contact details

Address ethical concerns

Considering that there is a huge user base of ethical consumers out there (in the UK alone, ethical consumerism rose to £46.8 billion in 2011), your organization could benefit tremendously if it responds to some basic ethical concerns of users.

Fair-trade practices

A large number of users are concerned about the environmental, social, and societal repercussions of their spending. Many base their purchasing decisions on information like what ingredients or raw materials have been used in a product (e.g. chemical or organic), from where those raw materials were sourced (e.g. third-world, war-torn, or hostile nation), and what type of labor (e.g. child or oppressed) was used in its construction.

To address their concerns, provide details of how you source, manufacture, and distribute the products that you sell. Then be sure to then help users easily navigate to this information.

Green & Black‘s explains its stand on child labor using plain language.

Animal testing

If applicable, provide users with information regarding your stance on animal testing. Users have the right to know whether or not a product meets their ethical requirements.

Urban Decay‘s stand on animal testing and cruelty-free shopping can be viewed by clicking on the Leaping Bunny, Cruelty-free, or Marley Approved logos on its site.

Humanitarian campaigns

Many retail stores publicize their support of various humanitarian causes, usually funded in-part by their revenue from sales. Because of their soon-to-be-vested interest, users should know the impact of their forthcoming contributions.

If you participate in a cause, be transparent. Show how the collected funds have been utilized, what milestones have been achieved, and what benefits have accrued to the recipients.

Dermalogica‘s support for women entrepreneurship is communicated on its website. In addition, the organization provides a dedicated site for more-detailed information.

Aid decision making

Any effort to help users make a more rational decision – especially while they‘re shopping – reflects positively on your site. It indicates your willingness to be fair and increases your overall trustworthiness.

Overcome the problem of plenty

Users are often confused with the myriad options presented to them on a retail site.

To help them, provide tools for decision making such as price calculators, measurement tools, and/or high-quality product images. Some retailers have even created high-quality product videos to help familiarize users with their products.

Dell helps users to get choose the right product based on parameters like budget and primary usage.

Provide intelligent discount codes

Asking users‘ to memorize or recall an automatically generated voucher code – or, worse yet, to navigate to some other page to retrieve a code – during the checkout process may indicate a lack of seriousness on your part in actually helping them to obtain a discount. Users, for their part, also have a tendency to entirely abandon a site to go searching for voucher codes during the checkout process and getting distracted by competitors and affiliates along the way.

To overcome these challenges, Jakob Nielsen recommends that you “encode offers in special links embedded in your email newsletters and automatically transfer the coupon to the user’s shopping cart [on checkout].”

Discounts are automatically added while using a coupon code on Amazon.

Display the total cost

Ensure that you don‘t disappoint your users. Display a price breakdown that clearly delineates the sub-total, duties, taxes, and estimated shipping dates of a user‘s order as soon as possible. That way they can make informed decisions (about what they want) earlier in the purchasing process. Many retail sites offer a simple “ZIP code calculator” to compute the estimated taxes and shipping of the product in question.

The My Cart link on the HP site provides a clear price breakup. Users can calculate the shipping cost and estimated tax with the help of a tool, after which it is displayed persistently at mouse-over on the My Cart link.

Enable comparison shopping

This is especially important if your site offers a low-price guarantee. A brief, informal survey that I undertook revealed that most sites of this nature used hard-to-understand terms and arcane statements. This can easily be misconstrued as deceitful attempts to get users to purchase.

If you are indeed serious about offering users the best deal possible, explain (clearly!) how your guarantee works. Further, actually enable comparison shopping.

Users can navigate to the Tesco Compare site from the home page of Tesco, where they can compare, buy, and often earn Clubcard points for buying a product through the site.

In conclusion

Is your head swimming with ideas, yet? Well, hopefully not; we‘re only halfway done!

To be sure, some suggestions – like the ones pertaining to security – are “easier” to implement. Most retail sites already have these kinds of certificates in place. Others, though – such as the explanation of business ethics and/or providing decision-making tools – are more difficult. Establishing yourself as a credible business is hard work. It requires a strong motivation to explain altogether nuanced aspects of your organization.

But don‘t let that stop you. In the concluding part of this series, I’ll discuss various strategies you can use to further increase your retail site‘s credibility.

Related Reading

• Reducing shopping cart abandonment: How to minimize orphaned carts – Michael Bloch
• Shopping Cart Abandonment by Kevin Gold
• Customers Perceive Only Parts of a Checkout-page as Being Secure by Christian Holst
• Fundamental Guidelines Of E-Commerce Checkout Design by Christian Holst
• eCommerce & Shopping Cart Usability: 21 Best Practices
• Five Tips for Checkout by Mikael Jacobsson

For the uninitiated: a card sort involves a bunch of cards, each representing a different function and/or content-type from the site being studied. Users are then asked to organize those cards into groups that make sense to them. You can learn the vocabulary surrounding card sorting in our Complete beginner’s guide to design research or checkout Donna Spencer and Todd Warfel’s Card sorting: a definitive guide for something more comprehensive.

Open card sorts are particularly difficult to analyze because they produce a variety of content structures. Different participants will give different names to different groups. You can try and make sense of it by identifying common traits across participants but there is always some guesswork involved. “Person 1” put cards A, B and C in a group called “transactions” but “person 2” put cards A and C in a group called ‘cash” and B in a group called “transfers.” Are these the same thing, really?

Due to a phenomenon known as confirmation bias, it’s easy for researchers to unassumingly create a site “in their own image,” confirming their mental models rather than manifesting that actual content structures that exist. To bring rigor to the process, I’ll explain a way to analyse open card sort data using R, an open source statistics language.

First, let’s use Excel, OpenCalc, or any other spreadsheet program and prepare the results of our recently finished open card sort.

Preparing the data

Open your spreadsheet program of choice and create two column headers: Participant and Group. Next, create a column for each content/functionality card used in your sort.

Create a number of rows equal to the total number of groups that resulted from your study. For example, if two participants created three groups each, you’d have six rows. Assign a row to each participant’s group and then sub-divide these rows by participant. Figure 1 exhibits the final row/column structure more clearly:

Figure 1: example of cards entered into spreadsheet

In the screenshot above, you can see that the first participant (P1) created five (5) groups and the second (P2) created six (6) groups.

The columns other than “Participant” and “Group” are given names that correspond with your cards. Consider using abbreviations here because, later on, we’ll display these names in a chart where longer names are unlikely to fit well (16 characters is a good length). Column Q, for example, is called ‘See portfolio’ when it actually represents a page where users could view a portfolio of products online.

Next, mark whether each group contains a given card. If it does, that group-column pair gets a 1. If it doesn’t, it gets a 0. In the above example the cards “New_login,” “Name_supplier,” Change_contact_details,” “Change_security_questions,” and ”Change_password” appear as red, highlighted columns. Because they belong to the first participant’s fifth group – the row marked in red – they get a 1 where they intersect and a 0 elsewhere.

If the participant created a hierarchy, make sure each level has its own row. If a card was put into two or more groups by way of that hierarchy, make sure each cells gets a 1.

Save your spreadsheet and then double-check your data. Checking is of course a boring task but you need to be certain that what you’ve entered is correct – there’s no way to tell if you made a typo later on! Finally, delete the first 2 columns (“Participant” and “Group”) and then save the spreadsheet as a CSV (comma separated value) file.

Take note of where you put it; we’ll need it in just a moment.

Get your statistics on

The rest of the work is done in a program called “R.” R is a free download with versions for all major operating systems.

Once you have a working installation of R, fire it up and you’ll see that it uses a text-based interface. Don’t worry, because all the commands you need are here in this article. Just copy and paste the following code into R and press the enter key:

  compare <- function(x1, x2) {
      x3 <- x1 + x2
      ints <- sum(x3 > 1)
      uno <- sum(x3 > 0)
      return (ints / uno)
  }

  getJaccard <- function(data) {
  	l = length(data[1,])
  	jmatrix <- matrix(nrow=l,ncol=l)
  	for (i in 1:l) {
  		for (j in i:l) {
  			s <- compare(data[i], data[,j])
  			jmatrix[i,j] <- s
  			jmatrix[j,i] <- s
  		}
  		}
  	return (jmatrix)
  }

  cardsort <- function(filename, blocks) {
      filedata <- read.table(filename, header=T, sep=",")
      data <- getJaccard(filedata)
      colnames(data) <- colnames(filedata)
      hc <- hclust(dist(t(data)), method="ward")
      hc$labels <- colnames(data)
      plot(hc, main = Sys.time())
      rect.hclust(hc, k=blocks, border="red")
  }

Figure 2: The functions for card sorting copied and pasted into R

This code you just entered contains three functions: compare, getJaccard and cardsort.

The compare function works out the similarity of any two items by taking the number of times both were put into the same group and dividing by the same number plus the total number of times the cards were put elsewhere. This measure ranges from 0.0 to 1.0 with higher scores meaning greater similarity.

The second function, getJaccard, uses the compare function to create a matrix where each item's similarity to every other item is recorded. This is known as a similarity matrix.

The final function, cardsort, runs a cluster analysis on the similarity matrix to create a chart called a dendrogram. I've made sure the time and date are shown as the chart’s title, so if you run lots of card sorts you can tell when you did each one.

If all of this makes your head spin, the good news is that you only need to issue one more command to make it all work:

cardsort('/path/to/data.csv', numberOfGroups)

The cardsort function takes two parameters: (1) a string that indicates the location of the CSV file we created earlier and (2) an integer that indicates the number of groups to highlight in the dendrogram. You can pick any number between 2 and as many cards as you’ve analyzed. I tend to start with 3 and see what the main groups are, then repeat the analysis and increase the number incrementally until I feel happy that the groupings are making sense. In other words, play around with it!

In the example above, I've loaded a csv file called 'data.csv' and asked for 4 clusters. R then dutifully generates a chart:

Figure 3: The dendrogram with 4 clusters outlined.

Be sure to save a PDF copy of the chart by clicking “File” → “Save as…”

Using the results

Now let’s put our dendrogram to good use. Create a table with a number of columns equal to the number of groupings used in your chart. By way of example, the following table shows an information structure using the results of the above analysis. Next, title the columns with group names given by participants in your original study. It’s also possible to show people each group of cards and ask them what name they think summarizes the group succinctly.

The resulting groups and names are the foundations of your site’s IA as specified by its users. Remember that this information is just the starting point. Card sort data should inform the design rather than dictate it. Some elements – like “sign in” and “sign out” – often need to be available across our groups.

In sum, the results you achieve during any open card sort data are “fuzzy:” both qualitative and semantically inconsistent. Analyzing them in the rigorous, quantitative way that we’ve discussed helps remove researcher bias and point the way towards the perfect content structure.

The author wishes to thank Andrew Maier for his contributions to the structure and thinking behind this article.

Conceptual models are nothing new, but often become unintentionally obfuscated during the design processes. The design team, often dazed and confused, struggles to figure out why the product is now cluttered and unintuitive. A design thinking method I call “information surfacing” helps to remedy this problem. Information surfacing involves the prioritization of UI elements with an intent to manipulate user engagement.

Before we dive in, though, it’s important to differentiate information surfacing from information hierarchy. Information surfacing is more specific to the visual presentation of information on a single page or in a single instance. While it doesn’t involve categorization, per sé, it does involve decisions: such as which fonts to make bolder or which elements to show on mouse rollover. It’s all about which information you want to “surface.”

A method to the madness

The graphic designers among you likely have a leg up in this regard because you make these decisions on a regular basis – albeit for aesthetic purposes. Information surfacing goes beyond this, however, to communicate what a website is all about using the interactivity of our medium.

Sometimes it makes sense to group items under a drop down. Other times, it make more sense to have all option revealed to the users right away. The former will be appropriate for users that are familiar with top level categories whereas the latter is appropriate for novice users. The latter also helps teach users that they’re looking at an apparel site.

Two methods for designing a product display. The first design is appropriate for luxury products as a large image will engage the user on an emotional level. Hence, the price and buy now button are “submerged” in a hover while the image is “surfaced”. The second design works for a more price-conscious consumer. Hence the product image is subdued while the price and buy now button are “surfaced”.

Unfortunately, design is a contextual beast so it’s impossible to create a simple heuristic for information surfacing that would apply to all types of design projects. But that didn’t stop me from trying! Here’s a rough approximation of the method that I employ:

1. Identify user activities.

   Define exactly what type of engagement you want from your users. Don’t use broad phrases such as “I want users to connect with other users,” but rather “I want users to send emails to other users”. Likewise, don’t get too detailed. Ignore all functionality that a system needs to do on the back end. Focus on your users and what actions you want to encourage.

2. Define decision making information.

   With every action there is intent. Users must perceive information that is congruent with their intent before they will make a decision to act. Therefore, figure out which factors will motivate your users to engage in a given activity. In some cases it’s a familiar label on a button; in others, a comprehensive data grid. Learn about how your users make decisions. Are your costumers rational and price-sensitive or emotional and spontaneous? To be sure: no one just randomly clicks through a site.

3. Prioritize.

   This is the core of information surfacing. First, triage the activities you want users to engage in. Next, consider the natural discovery process for your users. Determine what buttons, links, icons, and contextual information users need to see right away, which ones to reveal later, on hover for instance, and which ones to hide altogether. Remember: users perceive first and act second.

4. Prototype.

   Once you have your elements grouped and prioritized create several high fidelity variations of your interface. Step back and ask: how would a user interpret this outside of the context of your website? What would be the first understanding about your site through the UI elements? What are the potential conceptual models that a user may infer from just the interface alone? If your answer is ambiguous – or if it has more than two possibilities – you need to go back to step one. Otherwise, your answer is also your marketing message; it’s what you tell users to think.

Let’s go for coffee

While this heuristic provides a good overview, it never hurts to see theory in practice.

In a hypothetical social site, users are given the opportunity to post images, share with other users, rate their content and follow them. To make things even more fun, let’s also allow users to ask other users out for a cup of coffee to discuss those images.

For every task we want our users to engage in – following, sharing, sending coffee invites – there is a unique information set that a user needs to be presented with first, to motivate them. To create the strongest sense of motivation the interface needs to “convince” the user to engage in an activity by delivering a decision-making context.

In our case we want to motivate users send coffee invites to one another. To do so, a user needs to see (a) another user’s profile picture, (b) how many images they have, and (c) how far are they located from him/her. This information, taken together, encourages the development of trust between two users and hence the motivation to share a cup of coffee.

Similarly, if we sought to “motivate” a user to follow another user we would need to present that user with (a) a profile picture of the other user (b) some sort of metric to indicate how credible that user is, and (c) their content – the primary reason you follow someone. Once again, we need to present the information necessary for the user to make a decision on whether or not to engage in this activity.

So far, all we have been doing is grouping data into information sets and assigning those sets to user activities. All that remains then is to identify which of those activities are more important to our goals. Is it allowing users to invite other users for coffee or is it following each other’s content?

The following interface emphasizes user inter-connectivity. Based more on a model of a dating site, the user profile picture is made larger and the user data is presented next to it, while the user’s posted images are grouped as series of small thumbs. For a site like that the marketing message could read something like, “Connect with other users in your area”.

Figure 1: A module that encourages meeting other users.

In Fig. 2 however, the focus is given to content consumption. The content is made larger, and only the information immediately relevant to that content is presented first. The information about the user posting the content is revealed only on mouse hover. This fundamentally changes the discovery process. The user is subconsciously encouraged to consume content. Only then is she given the opportunity to discover, using her mouse, who posted that content. In contrast, a site like this could also use the marketing message “Share and view cool pictures.”

Figure 2: A module that encourages browsing other users’s photos.

As you can see, different presentations yield drastically different interaction models.

So, what’s your story?

Information surfacing is a top-down, strategic approach to design. The designed product – or, more precisely, how users interpret that designed product – is the overall goal. This is in sharp contrast to the functional requirements document which constructs things from the bottom up.

Information surfacing goes even farther, though, providing interaction designers the tools they need to determine (1) if their design adequately addresses the problems at hand and, (2) what that design actually suggests to end users. The placement of every element inside of a graphical user interface projects narrative qualities within the applications we create.

So, what’s your story?

To understand what I mean it helps to give you some context. uberVU is a social-media-analytics platform that collects millions of points of data for its users:

One of uberVU’s core features is to display social media data in a way that can be narrowed down by filters: platform, gender, sentiment and location (highlighted in the screenshot below):

In our case, the location filter required special consideration. We read Christian Holst’s article on “Redesigning The Country Selector” – which included some great suggestions – but it didn’t exactly solve our problem.

Selecting a location in uberVU required progressive filtering. In other words, after a user selected a country (a challenge on its own) that user needed the ability to also select states within those countries, cities within those states, etc. With so many options available, we needed a way to show users where the most important filtering options (those with data) were. As if that weren’t enough, this filter had to allow users to go “back” a step while exploring, similar to how bread crumbs work for website navigation.

With our goals laid bare we set upon the challenge. What follows is the journey we took to find what we think is a pretty elegant solution to this interaction design problem.

Challenge 1: Make it instant

What if the user knows exactly what location they’re looking for? Easy. We solved this by adding auto-completion. After the user types 3 letters a suggestion appears.

This pattern works well in every case except when a search returns multiple results. If that happens it’s then up to the user to disambiguate. Not good. Say a user wants to filter the stream for London, UK. They’ve typed “Lon” and we’ve correctly guessed London…but to what London does the user refer? London, UK obviously comes to mind, but for those of you not from Canada you might be surprised to learn that there is a London, Ontario, too.Clearly, we should display at least 2 entries:

• London, United Kingdom
• London, Ontario, CAN

As you can see in the screenshot, there are actually many more Londons in the world. Ordering them from most to least popular makes things easier.

Challenge 2: Encourage exploration

Now for something even more challenging. While some users know exactly what they’re looking for, others will want the ability to explore their social media data. A person monitoring the launch of a product is curious where people are discussing that product. Wouldn’t it be nice if they could lead the expedition themselves?

Our solution employed a tree-like structure within the selection filter. To keep things less intimidating (we track thousands of locations, after all), we decided to initially display a list of continents. From there, we then decided to only display locations that contained data (mentions in social media) for the current user. This way the entire tree is relevant at every node. To drill deeper, users click on the arrow next to each location. As users drill deeper, each selection expands to display its sub-regions:

The only downside of this method is that you’re adding an extra scroll. When users put their mouse over this region they will scroll the location filter, and when the mouse is positioned somewhere else, they scroll the entire page.

Challenge 3: Highlight important data

Let’s keep in mind that this filter should help our users explore the locations we gather data from. And while displaying a tree with continents at the top is a good start, it does not by any means answer the question “What are the most important locations?” Our users needed a top 5 location list and that’s exactly what we offered them, a list of the most important countries based on the number of messages we collected from that specific place:

Challenge 4: Going back

Say you filtered the stream for London, UK. The page is refreshed, all the displayed mentions are from London, UK. What if you want to select UK again? What if you want to clear all filters and go back to the default state, where nothing is selected?

Our solution was to replace the Top location part with a location trail, similar to how breadcrumbs work for web page navigation. You can use this trail to track your steps all the way back to the default state. See the screenshot below:

In the next iteration of the location filter, we plan on also remembering the path to the location you selected for your next session. Next time you open the Location filter the continent, country & region are expanded to show you the whole trail to the location you last selected.

Le grand finale: Putting everything together

Although many designers champion simplicity, each solution thus far involved adding yet another item to the filter drop-down. In theory, this would over-complicate things but, surprisingly, everything fit together extremely well.

It’s quite complex but still very usable. We’ve amazing feedback from customers, so all in all we are quite happy with the result!

Lessons learned

We think the location filter we built is a great solution to a problem a lot of the web-apps have: progressive filtering by location. In that case, standard, off-the-self design patterns just wouldn’t do. And our users love it!

What’s more important than our solution, though, is the process we went through to synthesize it. Perhaps you’ve done the same:

1. Realize that just because everyone does something a certain way it doesn’t mean you should do it, too. Popular design choices may not apply to your particular use-case.
2. Layout the objectives of the design from the user’s point of view. Listen to customers to understand their pain points.
3. Make a list of all the elements you want to include. Make sure each element has a clear function. Don’t just add things for the sake of it. Get pragmatic.
4. Put everything together and see how it “fits.” Can you remove anything without jeopardizing the function of the element?
5. Launch, test, iterate!

This process opened our eyes to the fact that a lot of designers might just be recycling standard design patterns resulting in sub-optimal experiences. I know we’ve been guilty of this. Are there places in your web-app where you might be doing the same thing?

Take a look at your application’s key interactions, state their goals and honestly appreciate whether the standard solution you’re using does the job. If it doesn’t, get to work. Don’t look at it as yet another problem you need to solve but as an opportunity to create something amazing!

Out of total desperation I got up, walked around the office, and parked myself in the first empty conference room I could find. As soon as I sat down and opened my laptop my head was clear. I got my wireframes done in record time. This stark contrast – between the jackhammer at my desk and the 2001-Space-Odyssey-like womb in the conference room – truly amazed me.

Wait a minute, I thought. My cube-mate is going through some pretty intense personal issues right now…could that be affecting me? I quickly googled “picking up other people’s vibes” and was introduced to the fascinating world of empathy.

Voldemort didn’t have it

Empathy is defined as “the action of understanding, being aware of, being sensitive to, and vicariously experiencing the feelings, thoughts, and experiences of another.” It’s clearly a quality that – beyond being inherently human – is necessary for user-centered design. Designers must learn to naturally pick up on the unsaid. This, in turn, allows them to successfully read others’ needs and wants and have them reflected in their design.

However, there’s a dark side to empathy that is rarely discussed. UX Booth’s own Andrew Maier explains in his article about reducing noise, that “although office environments are designed to encourage creativity, their inhabitants can occasionally hinder it”.

“Sometimes we can become overwhelmed by empathy at work,” adds Judith Orloff, MD, an assistant clinical professor of psychiatry at UCLA and author of “Emotional Freedom: Liberate Yourself from Negative Emotions and Transform Your Life.” She stresses that “in the workplace, empathy has both an upside and a downside. People who are extremely empathic and sensitive need to be aware of both.”

The key, she says, is to pinpoint if you are a super sensitive person (or empath, as she terms them) and “be aware of the ways this wonderful trait serves you in the workplace. But be extra careful to protect your emotional and physical health, because empathetic people are, by definition, more vulnerable and open than their peers.”

All this talk of empathy may have you wondering if you’re an empath yourself. I know I did. If so, you’re in luck! Here’s the self-assessment test from Dr. Orloff’s book:

• Have I been labelled by coworkers as “too emotional ” or overly sensitive?
• If a coworker is distraught, does it affect my mood at work?
• Are my feelings easily hurt when a supervisor or peer delivers negative feedback?
• Am I emotionally drained when I have to work closely with others, and do I require time alone to revive?
• Do my nerves get frayed by office noise, machine noise, smells, or excessive talking?
• Do I prefer working quietly and off by myself?
• Do I overeat or need a hour hour cocktail to deal with work-related stress?

Corporate tsunamis

Ok, so: thanks to an unpleasant alcohol intolerance, happy hour cocktails are out of the question. Other than that, though, I checked every single box in Dr. Orloff’s self-assesment. I guess I am an empath! This revelatory experience made me realize that I sorely needed to find a way to carry peace and quiet with me everywhere I went.

Nowadays many companies are working hard at harnessing empathy during turbulent times, as Dev Patnaik, author of “Wired to Care: How Companies Prosper When They Create Widespread Empathy” explains. Humans have an intrinsic and sophisticated way of stepping into someone else’s shoes, but he maintains “the problem with business today isn’t a lack of innovation; it’s a lack of empathy.”

Related talks of an “empathy deficit” in our country point to our overly connected and financially stressful lives as the culprit. Patnaik says that “for many of the world’s greatest companies, it’s an ever-present but rarely talked-about engine for growth.”

My invisible armour

In my search for the right technique to achieve “mobile peace,” I came across a set of meditation classes from a Bay Area school called Psychic Horizons. They seemed simple enough. Their Foundation Classes are organized around five basic premises, the first one being “You can separate yourself from all the influences around you.”

This was music to my ears. There, I learned about grounding, centering, and setting energetic boundaries. For boundaries, the instructor recommended we visualize a rose (or any everyday object outside of our space) and imagine that that rose serves as an energy-catcher. This allows you to process the good “stuff” you pick up from others, but not the bad “stuff.”

Dr. Orloff calls this “shielding yourself,” and offers up a similar technique in her article “How to Stop Absorbing the Energy of Others.” She suggests you imagine an envelope of white light (or any color you feel imparts power) around your entire body: “think of it as a shield that blocks out negativity or physical discomfort but allows what’s positive to filter in.” She also recommends to walk away, practice vulnerability and meditate.

The day after the boundaries class I eagerly put what I learned into practice, imagining roses all around me. Upon walking into the office I did a quick inner checkup to see what I felt, and lo and behold, I felt calm, quiet and peaceful. I did not feel the typical stress that accompanied me only while I was physically in the office. And that helped me tremendously to get my work done, even amidst the angst around me due to corporate layoffs.

Suit up

Invisible armor isn’t all roses, so to speak. There are many shielding techniques out there, some as simple as crossing your arms or standing slightly sideways in front of someone who is particularly upsetting to you. Another involves going outside and touching the ground with your bare feet.

Yvonne Perry, a metaphysical teacher, poses that just like an electrical appliance needs grounding to operate, our bodies need to connect to the earth from time to time in order to function properly. “When you are grounded, you feel deeply connected to yourself and at peace with everything around you”, she states in her book “Whose Stuff Is This? Finding Freedom from the Thoughts, Feelings, and Energy of Those Around You.” Perry also offers up an interesting psychological perspective on why some people become empaths in the first place: “many empaths grew up with parents who were emotionally volatile.” Therefore, they learned to pick up on subtle shifts in energy to avoid conflict, she says.

The fact is that everyone has empathic abilities – whether they admit it or not – and that given the right environment those abilities can become your most trusted ally. As Dr. Orloff says “if you can find the right balance it will only bode well for your company and career.” Harnessing empathy has definitely become an ally for me, enabling a level of focus that I wasn’t able to reach before. Now, lets all go running barefoot in the park.