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.

In the first part of this series we’ve looked at the steps that must be taken at the beginning of a project to ensure that a successful collaboration is possible later on. We set the foundations of our team dynamic by determining clearly defined roles and explained how each member’s contribution will work towards the common goal.We setup a rough project plan. Finally, our team agreed upon collaboration tools and other project conventions.

Our fearless UX-men team is now ready to dive deeper into their quest for a rewarding user experience. Their team dynamics will be put to the test through rounds and rounds of feedback sessions.

Will they survive to design another day? Read the epic conclusion to find out!

Superhero assemblies

Design superheroes should focus on their role and give others space to do their thing. Throughout, teammates should keep each other updated on their progress, the approach they’ve used, the research they’ve completed, etc. Jon Whipple explains the benefits of keeping research (used here in a loose sense) pervasive in his article What Designers Know:

Research functions as a lubricant, reducing friction around contentious issues and providing consensus among designers, developers, and clients. The upshot is that a clearly defined result, commonly understood facts, and relevant data make design discussions easier.

In sum: short, daily meetings keep everyone updated when work is done in parallel.

If these aren’t a good cultural fit, consider handoff meetings. During a handoff meeting the person who just finished a portion of a project (the information architecture for instance) presents her work to the rest of the team. She explains what she learned from the client and her research, and gives an overview of the process that she followed. This gives the team the opportunity to make suggestions and ask her questions.

Afterwards, she presents her work to the client and explains that she’s ready to pass it off to the next team member to continue the work. In Whipple’s words, handoff meetings: “distribute research throughout the organization.” This allows everyone to feel equally included in the whole process and also helps teammates better accept and respond to criticism.

Unless they don’t, of course

The ego battle

Despite your best efforts – in the midst of the combat – the much-feared moment inevitably arrives: the ego battle! He’d like it darker, 3 pixels to the left, and with smaller text. You’d like to crop his head off. Relax! First, listen carefully to his point of view. Practice active listening. You’ve spent 100hrs perfecting this and he hasn’t, so you’ll need to explain your ideas in terms that he understands.

Communication skills are a great investment for any designer. Another valuable investment is an “invisible armor.” As Melisa Angulo-Javier explains, UX-men tend to be empaths. While this quality can help us relate to the end users, it also makes us further inclined to take criticism to heart. There are a lot of advantages (both personal and professional!) to being able to momentarily distance oneself from one’s creation, not the least of which is that we tend to make more rational decisions when we are cool, calm and collected.

You’re using all the right arguments to defend your decision and your teammate is still not moved by your discourse? Take three deep breaths and consider that you might be wrong. Yes, even a hero is wrong sometimes!

Ok. You thought about it. Still don’t agree? Agree to disagree and seek a middle ground. Is there a way to validate the options with the client or the end-users? A/B tests are a great way for choosing between two solutions. You can also make a temporary decision and test later on to see if your/your colleague’s hunch was right. For example, if I want to validate that users will notice my “buy now” button despite it being on the small side, I’ll devise a test where the user must add the product to the cart. If most of my test users find the button without a problem, then the design is on the right track.

No design is perfect and no UX-man can predict user behavior with absolute certainty. Simply document questionable design decisions throughout the project and you’ll have a short-list of objectives for the next round of design.

Giving feedback

What if you were on the other side of that ego battle: the one giving criticism? Here are a few ways to ensure your feedback will be well received:

First, remember that you are not the universal measure of how good or bad something is. Temporarily trade in your superhero persona for a more humble character and show respect for your teammates’s point of view.

Second, reflect on the type of feedback you want to give/receive. As mentioned by Zenhabit’s Tim Samoff in his article How to Give Kind Criticism, and Avoid Being Critical: “using criticism to help someone improve, to see a change affected, or to contribute to a discussion, are all good reasons for doing it.” If your reasons for delivering criticism include: to hurt someone, to vent frustrations, to boost your ego, or to challenge others you should reflect on the option of keeping quiet.

Third, employ tact to make sure your criticism is well received. Use kindness to show that you are empathic to the challenges faced by your hard-working teammate. If your tone of voice says “attack,” the person receiving the feedback will likely adopt a defensive stance. A great strategy is to focus on making positive suggestions. In other words, suggest ways in which the work can be improved and the rationale behind it: “If we increase the text size, these long paragraphs will be easier to read,” instead of simply pointing out what’s wrong with it: “The text is difficult to read.” In general: good suggestions tend to be more specific, which ensures that they are actionable.

The motto of every successful team should be to take advantage of each member’s skills and to help improve their contributions, not disempower them. A happy ending is possible. We just have to put our aside our egos for the good of the project.

The end

This is the walking off into the sunset part. The mission is accomplished. Users are happy. The world is safe.

Together, you’ve faced the challenge of respecting one another while working towards a common goal. You’ve mediated heated debates and ensured everyone’s contribution was appreciated. You’ve survived every team meeting. Now’s the time to reap the benefits of an accomplished mission and strengthen the bonds you’ve just created.

Before we end, we need to bring our design superheroes together one last time to celebrate and reflect. A project retrospective is an often-overlooked step in the healthy life of every superhero team. A retrospective is a meeting held after the delivery of a milestone or after the completion of the entire project. Originally found in projects managed using SCRUM development methodology, this type of meeting is a good addition to any venture. Retrospectives gives every team member the opportunity to express what he thought went well, what he thinks could be improved and what he’s learned from the project. The team effectively brainstorms together on ways to improve team-dynamics and the project plan.

If you’ve made it this far, you’ve surmounted difficult challenges and bested feedback-wielding foes. You’re likely dying to share with the world the incredibly awesome work you’ve just done. Just don’t forget to share the credit…there is no “I” in “UX teamwork,” after all!

The author wishes to thank Kent, Dorothée and Lindsay. They’re continuously teaching her the meaning of a great design team!

Just like the X-men who only succeed by uniting their forces, the “UX-men” (and women!) must also learn to work together in order to pull off projects that are far greater than their individual skills. The challenges and benefits of such collaborations stem from the same source: the diversity in backgrounds and perspective.

Diverse teams, with different “design upbringings,” can make collaboration difficult. Designers tend to be emotionally attached to their own work, their own ideas and – like it or not – working in a team teaches them to adjust that attachment: to take feedback, value perspective and relinquish control.

But this is far easier said than it’s done.

This two-part article looks at how you can optimize your team dynamic throughout a project. The first part will examine the steps you can take at the beginning of the collaboration to ensure all parties know their role and start off on the right foot. The following article will navigate the last stages of teamwork from surviving clashing egos to improving your design alliance from one project to the next.

The heroic mission

The foundation of any superhero design team is not something to be taken lightly. Each hero’s role should be well defined and in tune with their respective talent and skills: their super power. By clearly outlining responsibilities early on we prevent well-intentioned, do-it-alls from attempting to do, well, everything.

Next comes the most important part – the one thing that unites our heroes – the mission. Ensure the team’s objective is well defined so that all members share the same measure of success. When re-designing an existing website, for example, success can be measured by looking for an increase in conversion rates or purchases; an increase in new visitors; a decrease in the frequency of support calls; or a decrease in visits to the help page.

To that end, give your team the context necessary to understand your client’s objectives. Bring everyone around the table at least once so that they can hear the business case directly from the client and have the opportunity to ask their own questions. This not only gives the team a greater understanding of the client’s needs, it also makes them more committed to the outcome of the project.

Finally, acknowledge that one superhero may not be enough to save the day. After the goal has been established, delineate how individual teammates will work together towards attaining that goal. For instance, I can design an awesome sign up page that entices users to register using a quick and effortless process. My teammate can write equally awesome, easy-to-read copy that will inform the users why signing up is a great idea. Together, we make a great sign-up form that no user can resist!

A winning strategy

Even the best teams don’t go into battle without a strategy. Start by writing a proper project plan using your team’s best estimates. Your plan should map out all work phases and highlight the ones that can be done in parallel. Remember to make time for the often-forgotten research, testing, and presentation of your work. Further, plan time to integrate the client’s comments – especially in the beginning!

For longer projects, consider separating the process into milestones. This ensures that you get periodic sign-offs from your client throughout the project. It’s no fun discovering that the wireframes you used to build the visual design were never actually approved by the client.

…and now he wants something drastically different.

Keep your plan updated and make it visible. For longer projects, post the project plan in a public area such as a conference room. This ensures that everyone has a clear idea of where they’re headed and helps them anticipate timeline problems before they arise. For example, when faced with the addition of extra work that threatens to put a team behind schedule, teammates can collaboratively devise ways to make up for lost time by simplifying (or removing) less-important features.

If you’re looking for a more high-tech way of keeping everyone up-to-date, Freelance Switch has a great list of web-based applications that can help you set up a kick-ass project plan and to share it with your team.

Lastly, the start of a project is a good time to ensure that all superheroes are well equipped with collaboration tools and, further, that they share the same conventions for organizing and sharing their files. When we work on a solo project, we might be tempted to give into the bad habits of un-organizing our Photoshop layers or working on files without uploading them to the cloud. There’s no place for this in a successful team as someone else must be able to pick up where you left off at any time. Make sure that all team members know where to go to access all work being done on the project. Set up a file naming convention that will be common to the team. Avoid naming your files “webdesign-v2-final.psd”. Once there’s a couple “final” and “now-its-really-final” files in that folder, no one will know which one is the latest version. Either use dates in your file names or archive older items.

The saga continues…

Congratulations! We’ve united our UX-heros under one noble mission; we’ve set up the foundations of successful teamwork such as well-defined roles; and we’ve equipped our team with the necessary tools to their project survival. Come back for the sequel wherein our heroes go head-to-head in a heated ego battle! Learn useful tips for receiving and delivering constructive feedback and ensure your team reaches a happy ending. See you Thursday!

UX Booth would like to thank Jeremy Keith for the photo used as this article’s lead image.

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.

The war within your organization is probably not this obvious.

The nature of the battlefield depends, in part, on your company’s business model. I work in a business-to-business (B2B) organization which means that the products that my employer sells are primarily targeted toward other businesses. Business-to-consumer organizations, on the other hand, sell their products directly to consumers. They can obtain actual feedback from actual users.

In general, B2B organizations don’t receive as much feedback from consumers as business-to-consumer (B2C) organizations. For example, consider point-of-sale (POS) software systems used in restaurants. When selecting POS software, procurement departments for these organizations likely have very different sets of purchasing criteria such as cost, maintenance fees, existing vendor relationships, etc. Usability may not be an important priority when selecting the software outright.

Cash registers are often sold to businesses, not consumers.

The problem here is that cashier feedback is at least two degrees of separation away from those who need it most. Without strong and consistent feedback from end users, it is unlikely the organization designing the POS software will recognize their own problems.

Another challenge that B2B software faces is that new software typically draws inspiration from existing software in the given industry. It is incorrectly assumed that because the current products are “getting the job done,” that they are models to be followed.

Every organization is different. The challenges you face in your company may not be the ones I face in mine. But hopefully my experiences in dealing with some of these complex issues might help you be better prepared for similar situations.

Battles you can (and must) win

In order to make an impact in your organization, there are certain key principles upon which you can’t compromise. Be confident and assertive when dealing with the following issues, but be sensitive to people’s perspectives as well. Remember that you need to build strong relationships with stakeholders now to support your cause in the future. As Howard W.Newton once said: Tact is the art of making a point without making an enemy.

Convince stakeholders that the problem exists

Sometimes business stakeholders are completely unaware of the issues that exist with their application’s user experience. Maybe nobody explained the application’s problems to them in detail. Or maybe someone did but it wasn’t very convincing or the consequences were not well understood.

One surefire way to prove a problem exists is to record users while they use the application. This technique allows candid feedback from the users, as you can see how they use the application first hand. Sometimes the results may surprise you.

If the user takes a different route – to go to a given page or to complete a certain action – instead of following the designed workflow, analyze why the user chose to take this path. Was the existing workflow not obvious? Was it cumbersome? Was it just easier to do it this way? The answers to these questions will help you gain insight into your users’ behavior & expectations. Some popular tools that can help capture this kind of feedback are Jing, Screenpresso, CamStudio, and Silverback.

Next, get the project team – including all stakeholders – in the same room and play the recorded user sessions. As a group, take note of various usability issues. What do they struggle with? Where do they make the most errors? Do they find the workflow confusing? Documenting even the most mundane problems in an application can get your stakeholders to pay attention to the application’s user experience.

Coming up with an agreeable solution

So you have demonstrated the problem exists; now prove a solution exists. Again, you cannot compromise here. Pick a specific part of the application that needs a makeover and build a high–fidelity prototype to demonstrate how it could be better. Be sure to communicate the difference between the complexity of the existing design and the simplicity of your new design. Some of the popular tools that can help in this area include: Balsamiq, Mockingbird, MS Sketchflow, MS Visio, and Hotgloo.

Help stakeholders visualize your solution by wireframing it.

Next, see if your end users like your redesign. The last thing you want is to get approval on a design that your end users don’t really care for! If possible, talk to a user or two to see what they think of your design and refine it as necessary.

Finally, present it to the team. This is a much better way to show the stakeholders how things can be improved from the current design and thus, get their buy-in easily.

Garnering support from the sales & support teams

In many B2B companies, the most knowledgeable people to talk to about real user feedback is the support team or help desk. These teams deal with angry and frustrated users every day, and can probably list the top five customer complaints off the top of their head! Be sure to incorporate the feedback from these groups in your design when possible.

Sales people frequently have a unique perspective on your business.

The sales and marketing teams typically have a large influence on product design and development. Talk to them about the findings from the user sessions and the feedback from the support team. If you can convince them how your application’s poor UX is affecting customer adoption and is creating negative experiences with the product, they will join your cause. It’s hard for management to ignore a sales team that says Our product’s design is keeping us from meeting our goals!

Winning the numbers game

The higher up you go in the chain of command at an organization, the less they care about esoteric product details. Managers usually want to know how much will this effort cost them, how much will it save them, and how long will it take before they see results. These are not unreasonable questions to ask, so you’ll want to phrase the benefits of good UX in terms they’ll understand: dollars and cents.

Poor design inevitably impacts a product’s development and support costs but often this can be difficult to quantify. As a consequence, design is often seen as “subjective,” when you and I both know its manifestations are anything but. Luckily, there are several articles out there that can help you quantify the effects of user experience on the bottom line: Usability cost benefits evidence, Constructing a User Experience: The Cost-Benefits Compass, and Calculating ROI on UX & Usability Projects. Take a look, spend the time, and make the case for improving your application’s design in a language your stakeholders will understand.

Battles that are okay to lose (even on purpose)

So far we’ve discussed battles you have to win – but everyone knows you can’t win them all! Any strategist will tell you that knowing which battles to lose is imperative to winning the war. Let’s look at a few.

Finding someone to blame

Some people in the team will always point the finger at someone else – nothing is ever their fault. If the design sucks, it’s somehow the Project Manager’s fault or the Business Analyst’s responsibility. Or they weren’t given enough time to come up with a better design due to tight project deadlines.

Pointing out who’s to blame for the product’s poor UX will get you nowhere. In fact, doing so is counterproductive and can only lead to distrust. Instead, focus on persuading the team to join you in a fight for a redesign. Let them know that their opinion matters.

Looking for progress

Change is hard for most people to accept – especially when they’re skeptical about its effects. Yes, you’ve been fighting the good fight in the name of UX, but don’t expect everybody to get on board so quickly. It may take awhile for your colleagues to see the value in building applications with better UX.

Be patient. Gently ease your team into the process of taking the user-centric approach. Make sure the team doesn’t lose momentum. If they do, act quickly and step in. Help your team see the goal (separate the forest from the trees).

Slow and steady wins the UX race.

Remember, you need everyone’s buy-in for this to work. Even if they are slow, as long as they’re steady and making measurable progress, you’ll win the war.

Becoming “that” guy

Although I received overwhelmingly positive feedback on the UX initiative I started at my company, I also received some snarky remarks from a few folks. The truth is, I made a conscious effort to avoid highlighting any specific product or team because I wanted this initiative to be a positive experience for everyone.

Not everyone sees it this way, of course. Tell your colleagues that you appreciate the fact that they take pride in their work and acknowledge that you’d be upset too if somebody implied you did a poor job. Help them understand that you are just there to help.

Defining yourself

Hopefully your effort will be an eye-opening experience in your organization. Even so, that doesn’t mean that management will champion a UX team right away. They still may want to see how this will pan out in the long run. So in the short term, you may need to do some of the work “for free” on projects just to show them how things are done.

Get out of your comfort level a bit to take on a new role that you had not signed up for. It’s okay to lose the battle of defining yourself.

Don’t be afraid to wear a different hat if you have to. If you’re an IA being asked to do Visual Design, do it. If you’re a designer being asked to do some requirements gathering or user interviews, do it. If you’re a developer being asked to do interaction design, do it. Never forget that your ultimate goal is to win the war!

Win the war

In the end, it’s all about perspective. When you find yourself fighting any of the aforementioned battles, take a step back and try to figure out whether it’s worth the fight. Consider what’s at stake. What matters the most is that you don’t lose hope or momentum. Once people see the benefits of your effort they’ll start asking for more, and then quickly realize that they’re going to need a bigger team to handle all requests moving forward. And that is a good problem to have.

It’s no secret to us: user experience designers speak their own language. From personas to user journeys, card sorts to wireframes, there’s a certain vernacular to our profession. It’s something that we learn over the years but that our clientele must overcome immediately.

Frustrated with the conventional deliverables used to communicate our work, I began to reconsider their presentation. What resulted is certainly not “conventional,” but – taken together – they are arguably more usable.

Personas are like resumés

Personas come in all shapes and sizes. Contrary to what they’re designed to do, however, rarely do they convey a good sense of the user. Most look like resumés: sterile and lacking in personality.

When was the last time you hired someone based on their resumé alone? Even with a resumé you still need to conduct an interview in order effectively gauge a prospect. Seeing someone and listening to their words reveals their personality – the key element missing from most personas.

So I started a searching for a better way. The first thing I did was move my deliverables online. This allowed me to link them together so that clients could click between them. For desktop projects I use Axure and for mobile and tablet I use Proto.io. Both of them are great tools as they create clickable, HTML-based output.

Next, I searched high and low for inspiration. This persona, created by User Insight, is definitely different. Therein, the user (Tina) does not consist of mere bullet points; she comes off as a real person. Jason Travis’s personas are infinitely more visual. Being picture-based, though, they lack any descriptive text whatsoever.

Inspired by these (plus adding my ideas and style) I tried to put together a new version of the traditional persona.

You can view a demo here.

This approach paints a much more holistic picture of a person. Not only does it include their goals, it includes important, ancillary information such as their worldview, what they are looking for and their motivation. Further, the overheard conversation adds just the right amount of insight into his/her life. The “questions” section helps identify the areas the target user is unsure of and the “life pieces” section makes the persona human-like with feelings and desires.

Sitemaps are like spiderwebs

Sitemaps are (as most of you know) used to “map” the major components of a website to a rather sparse-looking diagram. Because they’re so sparse, they also tend leave a lot to the imagination. This gives rise to common retort: “What’s this page do, again?” “Can you change this page to that?” “How about we scrap that page”

You know the routine. Because clients come to us for the visual thinking they often can’t turn these sparse diagrams into anything “useful” on their own.

This got me thinking: why not just put the thinking alongside the map?

You can view a demo here.

Even though it’s just a small difference, this approach pays off. It helps our clients understand the internal monologue that drives the narrative. Knowing the reasoning behind your decisions helps others understand (and agree) with your perspective.

User journeys are like electric panel diagrams

User journeys map the steps of a user, correlating goals (explained in Personas) with a site map to better illustrate how users will get things done. As a result, designers can make informed suggestions to the site’s information architecture.

The problem is that most user-flows are very dry. It is difficult to feel empathy with a user and their journey if all you see are boxes and arrows (similar to electric panel diagrams).

After scouring the internet looking for something better I found a couple of good approaches.

Jakub Linowski’s Grand Narratives & Play Points diagram offers a compelling yet easy-to–understand presentation based on wireframes.

Blueprint+ (Service Design Visual) is great because it includes the persona and a timeline.

Carlos Abler’s Multiuser WireFlows combines the two former ideas.

All of these are good but they all seemed to be missing something.

I’ve been always fan of recycling, so I thought there has to be a way to re-use the sitemap and display the user-flow on it. I also wanted to re-use my personas in order to create empathy for the user’s journey. This led me to the following presentation:

You can also view a demo here.

As you can see, I simply re-used my sitemap and added one of my persona with speech bubbles. In the speech bubbles I added the thoughts of the persona at every stage of their journey. This adds a human touch. The thoughts of the persona can explain to clients the reasons for the journey taken and the scenario puts these thoughts into context. It is simple but visually understandable way to show your user-flow.

Clients that already understand your sitemaps and personas will have no trouble seeing the two work together.

Prototypes/wireframes are like abandoned houses

Wireframes created in the absence of personas are broken. Yet we do this all the time. Why do we create personas if we don’t use them?

Looking for a better way, I saw a picture in the essay of Rósa Gudjónsdóttir:

I was fascinated by the idea of having my personas around me. I started to print my personas and stick them to the wall in front of me. It helped, however, the screen and the wall are two different worlds, analog and digital. No good.

I eventually placed my personas in the margin of my prototype to serve as a constant reminder of who my users are:

You can also view a demo here.

Not only does this help us to not design for ourselves, our clients and stakeholders are now constantly reminded who will use our design. The time and effort we put into establishing our personas is never lost.

Never stop learning

As I mentioned earlier, these ideas have helped me better convey my work to my clientele. They are not perfect, of course, nor were they intended to be. I am certain that it is possible to tweak them or in fact come up with even better presentations that work for you.

Are you also frustrated with common UX processes or deliverables? Don’t let the status quo get you. Always try to make things better, iterate and optimize. Surprise your users – err, clients – with something new and innovative as this is the way forward. If you’ve tried your hand at something different, be sure to share your result in the comments below!

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