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

February 26 2014

Tags: UX Design

January 27 2014


Pragmatic UX Techniques For Smarter Websites


What is “User Experience Design” exactly? Should you not start it unless you are fully dedicated, or should you embrace it in the process as soon as possible? Are all designers also user experience designers, or is it a separate expertise?

The debate is as old as the discipline itself, and while picking up a bucket of popcorn, sitting back and watching the drama is sometimes fun, let’s try to figure out which user experience techniques are useful for startups, in-house teams, big corporations and anyone who wants to improve their website, product or service.

Multiple Definitions Of UX

UX design is a broad and vague field, and most commentators say that it’s a superset of all of the other disciplines. Is there one definition to rule them all? In my opinion, no. Do the definitions provided below describe some aspect of your day-to-day activities? Most likely, yes.

Christina Vodtke, author of Information Architecture: Blueprints for the Web, recently tweeted the following:

Steve Psomas offers “The 5 Competencies of User Experience Design,” which encompass information architecture, interaction design, usability engineering, visual design and prototype engineering, with a list of activities and artifacts produced by each activity.

In “The State of User Experience,” Jesse James Garrett, author of The Elements of User Experience, defines experience design thus:

“The design of anything, independent of medium or across media, with human experience as an explicit outcome and human engagement as an explicit goal.”

Peter Merholz, author of Subject to Change, argues that UX is strategy, not design:

“A UX designer is coordinating, orienting, helping all of the other folks [designers] achieve some common goal, a singular intent… UX designers lead organizations to ensure that great experiences get out into the world.”

Dr. Leslie Jensen-Inman and Jared Spool established the Unicorn Institute to identify which skills UX designers need. They’ve found that managers need UX designers to have a holistic skill set, including front-end development, visual design, mobile integration, project management, information architecture, interaction design, copywriting, content strategy and user research. According to this definition, UX design is the Swiss Army knife of Web design.

Become A UX Practitioner

If you even remotely recognize yourself in any of the definitions above, then there’s a good chance you are already practicing UX design and that you could become a seasoned UX designer with a little more strategy, a dozen of relevant books (check out the links at the bottom) and 10,000 hours of practice. While that’s a compelling proposition, it obviously takes time.

iPad Wireframe
Disregarding the fact that it takes time to become a good UX practitioner, firms should still consider adopting UX techniques for their business in the meantime. (Image credit: baldiri)

Most businesses — especially small companies and startups — can’t afford to hire a dedicated UX designer, but that shouldn’t stop them from adopting some UX techniques. Trust me, it’s much easier than you think.

A Not-At-All-Definitive List Of UX Techniques

I like to divide the techniques into two main categories: learning about the website or application, users needs, business goals, the industry and the competition, and generating ideas, solutions and communication artifacts that will help to align the team and shape the product.


  • website analytics
  • cognitive walkthrough
  • heuristic evaluation
  • stakeholder interviews
  • SWOT analysis
  • user interviews
  • usability testing
  • ethnography
  • contextual inquiry
  • card sorting
  • affinity mapping


  • personas
  • brand persona
  • voice and tone
  • microcopy
  • navigation patterns
  • search patterns
  • content strategy
  • customer journey map
  • ideation workshops
  • tasks and use cases
  • workflows
  • page priorities
  • prototypes
  • UI patterns

Most of us, our stakeholders and, of course, our users need to see the results now — or, better yet, yesterday. Taking urgency into account, how do you determine which UX tool is your best shot at improving the experience of your product? In my experience, usability testing, interviews, journey mapping and microcopy tables are the most effective for quick and dirty UX improvements.

I’ve chosen these particular four because they don’t require you to create polished artifacts. And they can be used internally. The goal is to improve the user experience, not to create unrealistically perfect candy for your portfolio. That involves communicating your design decisions to other people.

Let’s focus on how everyone can improve the user experience in any project they are involved in.

Start With Empathy

While producing artifacts is a skill that is fairly easy to acquire, the most important soft skill one needs to develop as a UX designer is empathy. Empathy, however, cannot be practiced behind closed doors. To truly understand users, their challenges, their pain points as well as their dreams and desires, you need to go out and learn about them.

Observe them while they do their everyday tasks, tune into their habits or watch them as they interact with a system, whether through a screen interface or across multiple touch points. In short, to achieve a great UX, you need to learn about the user, and the best way to learn about the user is to watch them use your design.

Usability Testing

Start practicing UX by conducting usability tests in every project and for every major release. If you’re starting from scratch, a good measure is three rounds: before, during and preflight testing.

  1. Before
    With redesigns, knowing what’s wrong with the old system is helpful. Secondly — and people rarely do this — test the competition. Create an equivalent set of tasks for a competing website or application and test it. Running a usability test on the competition’s product will reveal a lot of opportunities to delight users and seize competitive advantages. Just by avoiding the errors discovered there, you will automatically provide a much better UX.
  2. During
    Transitional tests are usually done with prototypes. Have a fresh pair of eyes look at your concept and make sure you haven’t overlooked something. Expect this to be not the final confirmation, but rather a prevention of the kind of forehead-slappers that usually slip by if only insiders with domain-specific knowledge are involved. If you have the time and budget, conduct these at each major turn. These are the most important and the least used tests.
  3. Preflight
    The most commonly requested yet least effective are preflight usability checks. These are effective only if the main concept has already been tested and validated, because a preflight usability evaluation is merely supposed to uncover the few remaining bugs. However, if this is the first test on the project, then it will probably reveal much deeper issues, which could have been avoided altogether had usability tests been introduced from the start. Very often we have discovered that the sequence of registration steps is not logical to the user — for example, as a result of a rigid internal process of validating data. If the issue had been addressed early in the project, then development resources could have been allocated to better translate the system to the mental model of the user. On one occasion, we had to notify the client that the drag-and-drop interface for an essential action couldn’t be used on touchscreens. Fixing such a broken experience is usually postponed until the next release, and many times there’s no clear road map once a project has been delivered. In short, if you’d like to give usability testing a shot, do it before the redesign or in the early stages.

Usability Testing
Usability testing techniques are well explained in Steve Krug’s classic “Rocket Surgery Made Easy“, the sequel to the legendary “Don’t Make Me Think“.

Need recording software? Just use Silverback, which is dead simple to use and quite reliable. Remote viewers can observe sessions with Google Hangouts. In such cases, install Mouseposé to track mouse clicks and keyboard strokes. For offscreen recording, a set of GoPro cameras or a set of smartphones should work. If you opt for smartphones, make sure there’s enough space for an hour-long recording.

An easy way to record sessions on touch devices is with your laptop camera. Turn on the recording software, angle the laptop screen at about 45° and place the device next to the laptop’s trackpad. Another way is to strap a GoPro camera to the user’s chest or forehead, which is especially handy if you need to test in an unusual context.


By “interviews,” do I mean user interviews? Not exclusively. Apart from interviewing (in plain language) users and customers (the ones who are spending money on us), we should also interview stakeholders, managers and other team members, as well as domain experts.

There are many ways to interview people, but an interview is much like speed dating: Learn as much about the person as quickly as possible.

Unbiased Interviewees

When the user doesn’t know what the interview is about, you’ll get the most honest and least biased insights. No matter how disappointed they are in your product or service, the user might sugarcoat their answers if they know the purpose of the interview. The opposite could happen, too! On one occasion, we interviewed a user who was recruited by the very company we were redesigning for. Because he knew who we were, he couldn’t stop complaining about the price and value, so we wasted the interview listening to mere rants.

Even worse, you could end up writing down a lengthy list of feature requests. Back in 2007, I worked on a redesign of, at the time one of the 10 most visited websites in Croatia. One of the first usability test-interview hybrids we conducted ended with a couple of users recommending a Gmail log-in form right there on the home page. The craziest part was that the product team actually debated whether to do it. It was a nightmare, but we learned our lesson. Inviting users to specify the product is the highway to feature-creep hell. Our responsibility was to uncover users’ problems, habits and motivations and then design the product to match those findings — not to ask users to design it for us.

Focus on facts, not opinion. Pride and resentment are easy to spot and, depending on the situation, can be a pleasure to hear, but behavior patterns are gold. Of course, write down everything, but sport a poker face when users start talking about the bits that you find the most valuable to the project. This doesn’t mean being serious and cold. In fact, be enthusiastic — but equally enthusiastic — about everything they talk about.

How to Start?

Prepare more questions than you’ll be able to ask. This way, the conversation won’t end prematurely. We usually split our questions into two major groups:

  1. About the interviewee
    Learn about their daily life, general schedule, tedious and enjoyable errands, habits and patterns. You are looking for potential pain points, so the strokes should be broad. A good way to start an interview is to ask, “What does your typical day look like?” Depending on the context, the questions could be about life in general or just business.
  2. Specific to the domain
    Start with general questions, and then get more specific when you see there’s room to probe. For instance, ask, “What have you bought on the Internet lately?”… “And before that?”… “And before that?” Then ask for more detail about each experience, such as onboarding, findability and the checkout process. Remember to give every experience the same level of attention. Don’t focus too much on one particular experience; rather, try to identify patterns. With business interviewees, start with, “What was your most recent project?”… “And before that?” Then, unearth the patterns there.

Once you have spoken with users, use that data to create personas, journey maps, workflows and microcopy.

Customer Journey Mapping

Customer journey mapping is a collaborative activity to discover pain points and opportunities with a product. It’s conducted as a half-day or full-day session, with participants from all over the company. If your startup is small, then gather all of your advisors and mentors. If you are big, then bring in a person or two from customer support, billing, retail, marketing and strategy. Everyone should participate in the workshop, because it could be the perfect opportunity to synthesize all internal goals, connect different roles and give everyone a sense of ownership of the product, making for a cohesive UX.

Again, depending on the purpose and the goal, the maps may be more or less detailed. More importantly, be as objective as possible by gathering enough data about users (via website analytics, pools, surveys and interviews). By the time you become skilled in UX design, you will have used personas extensively in your customer journey mapping.

How do you do it? As an exercise, do it on your own first or with one or two colleagues who won’t roll their eyes the moment you introduce something new to the process. Take a sheet of paper big enough to accommodate a 9 × 6 grid of sticky notes; the paper used on flip charts is a good size. Gather a bunch of sticky notes and a marker or two and you’ll be good to go.

Draw a grid of three columns and six rows. It doesn’t need to be perfect, but if you find drawing straight lines to be challenge, I learned a trick at one of Eva-Lotta Lamm’s sketching workshops: Draw the lines by pulling the marker towards you, instead of from side to side. Label the columns “Before”, “During” and “After,” to represent time. The rows represent different aspects of the journey. Label them, too:

  • Activities
    For example, planning a family trip, asking friends, Googling top destinations, visiting websites, taking the trip, sharing photos, etc.
  • Thoughts
    For example, “Is this the right product for me?”
  • Feelings
    Frustration, delight, anxiety, relief, etc.
  • Touch points
    A friend, an AdWords ad, a TV commercial, the home page, a product page, a 404 page, etc. Be as detailed as needed.
  • Pain points
    Landing on the wrong landing page; not finding shipping details; etc.
  • Opportunities
    For example, populate the form with data that you can assume based on the visitor’s session data, such as location and currency.

Start using the sticky notes with just two simple rules: first, only one idea or comment for each sticky; secondly, stickies are expendable and affordable. Just add anything you can think of, and edit later once you’ve mapped all aspects of the journey.

Tweak this template to suit your needs, but I strongly suggest keeping “Activities,” “Thoughts” and “Feelings” because understanding what happens beyond our reach will lead to a better user experience.

Once the experience has been charted, use the pointing system of your choice to evaluate each touch point and generate a graph. If you need to present the map within the company, make a poster of it, focusing on storytelling. In this case, your notes and data will just be there for support.


How many times have you encountered an error message that basically means that recovery from the error is impossible? These things happen, because no one involved gave it a thought before the project was sent off to the developers to connect all of the wires. It ended up like that not because someone was lazy, but because it was on no one’s to-do list.

You can prevent this by adding a microcopy table to your project checklist. Microcopy is all of the instructional copy, small print and labels on a website. You want to communicate with the same voice, but adapt the tone to the audience, brand and context.

The easiest way to ensure that communication is consistent — and, more importantly, not to forget the critical bits — is to create a cheat sheet. I like to call such a guide a “microcopy table”. Example:

Voice and Tone
The industry exemplar is MailChimp’s “Voice and Tone,” created by Kate Kiefer, but yours need not be so sophisticated. Never mind the form at this point; focus on the content.

Create a List of Interactions

For starters, open a spreadsheet in Google Docs or on your computer and start entering user tasks, each on its own row. Start with common ones, such as registering, logging in and recovering a password, and then get more specific, such as uploading a photo and updating a status. Lastly, break down basic tasks into smaller bits, such as first name, phone number, VAT number and small print about shipping and handling costs. Where applicable, create two rows for each task, a success row and an error row.

The following columns are typical:

  • Tasks
    For example, logging in.
  • Type of communication
    For example, success or error.
  • User thoughts
    For example, “Why do I need to enter that?”
  • User feelings
    List the emotions that the user has or might have.
  • Communication tips
    What needs to be explained, and in what tone?
  • Draft copy
    For example, “We need this information so that we can suggest products that are relevant to you.”
  • Where does the user go next?
    Or what should they do? If you want them to take an action, include instructions in your confirmation message.

Once you start to think about microcopy, listing all scenarios is a quick and fun way to think about how people will use your interface, to prevent misunderstanding and to delight users by anticipating their reactions. For best results, make it a group exercise!

Don’t worry if you are not good at writing copy. More important than writing everything perfectly is to list all interactions. If you struggle with copywriting, simply hand over the table to someone who is comfortable with it.

Everyone Can Should Do It

No, seriously, everyone should. There is something life-changing about listening to how strangers view the world and watching them use the product of your labor. The first step is always the hardest, but it gets better with practice. At the very least, a different perspective will do you no harm.

If you need more practice or wish to dive deeper, join me at the “Pragmatic UX” workshop in Berlin this 17 February 2014.

Further Reading and Viewing

(al, il)

© Marko Dugonjic for Smashing Magazine, 2014.

Tags: UX Design
Sponsored post

January 08 2014


The Lean UX Manifesto: Principle-Driven Design


My colleague Ajay and I have been working at incorporating lean UX at the enterprise level for over two years. In studying it, I find that there’s a temptation to lay down rules, and if the rules aren’t followed… well, then, you can’t call it lean UX. At the end of the day, though, some lean UX is better than none.

If you were told to finish off the following sentence, how would you do it?

“You’re not practicing lean UX if…”

I asked that very same question on Twitter, LinkedIn and email to some lean UX thinkers out there. My personal conclusion is simple. Lean UX is a set of principles that may be used to guide you to better, more desirable solutions for users. It’s not a process in which each tool is rigidly applied.

Let me give you a real-world example. Co-location is a hot topic in the lean UX discussion. If you talk to experts and read their tweets and blogs, you might get the sense that if you’re not a co-located, two-pizza-eating team, then you can’t practice lean UX. I know that this is not the intent of authors of resources on lean UX, but it’s out there. Frankly, the situation is ideal, but if you work in a large company, it might not be the reality.

The value of co-location is obvious. As Jeff Gothelf describes in his book Lean UX: Applying Lean Principles to Improve User Experience:

“Nothing is more effective than walking over to a colleague, showing some work, discussing, sketching, exchanging ideas, understanding facial expressions and body language, and reaching a resolution on a thorny topic.”

I couldn’t agree more, but in one of my projects, it’s not a reality. Our team is spread across three states, two countries and three companies. We believe, however, that we can still practice the fundamentals of lean UX successfully despite this, and I believe we do. Our methods might make a purist cringe, but we have a measure of success (and also measurable success).

Discussing, sketching and exchanging ideas with colleagues has proven to be very effective. Image by Claire Murray.

So, what I really wanted to know when I asked the question above was, what are the absolute must-haves in order to be successful with lean UX?

Here are a few of my favorite responses to “You’re not practicing lean UX if…,” along with my reasons why (in brackets):

From Ha Phan:

  • “… your collaboration sessions with the team don’t include business goals and strategies.”
    [As much as I want to focus on solving user problems, it won’t fly if we don’t consider where we are headed as a business and whether the activity fits in.]
  • “… you’re not defining KPIs [key performance indicators] and integrating analytics into each release.”
    [Without a valid measurement, we can’t know whether we’re solving the problem. We have to be able to point to at least one number to know whether we’re failing or succeeding.]
  • … you implement every single step in the design process, instead of picking and choosing from the design toolbox.”
    [Lean UX is a set of principles and tools and should be applied as needed. We shouldn’t be ticking every box in a project management cycle.]
  • “… you’re creating long design specs for the vision of the entire product.”
    [Users do not interact with requirements documents, specifications and wireframes; so, the quicker we get to the end product, the better. Let’s not get bogged down by deliverables in the interim. Rather, let’s create the lightest thing we can in order to communicate how to apply the thinking to the end design.]

From Jeff Gothelf:

  • “… you are not managing towards outcomes (not outputs, feature sets, etc).”
    [At the end of the day, we need to consider the bottom line. Sure, we’re building products, but more importantly, we’re building a business. Asking whether what we’re doing will make money is important? And if it will make money, how?]
  • … you don’t have a willingness and the freedom or support to experiment.
    [This can’t be done without executive buy-in.]

From Melissa Hui:

  • “… you’re spending more time working on documentation than thinking about the design and collaboration with team members.”
    [This is similar to what Ha said, but this identifies an interesting danger. Working on documentation tends to be a one-person activity that takes away from valuable collaboration.]
  • “… your development team is not seeing what they’re building until they have to build it.”
    [The development team should be fully engaged and involved in the design process. Again, collaboration is key.]

The Lean UX Manifesto

After receiving these responses, I felt compelled to create a manifesto. The responses helped me to focus on the guiding principles behind lean UX. I like the ones cited above because they focus not on a particular tool, but rather on the seeds of innovation behavior. After reading all of the tweets and emails and then thinking about the current toolset, I boiled down the manifesto to what follows below.

I didn’t do it alone. I enlisted the help of two colleagues who I also consider mentors: Ha Phan, quoted above, and Ajay Revels, my lean UX partner in crime. Visit the Lean UX Manifesto website for more of the back story.

So, here is what we believe:

We are developing a way to create digital experiences that are valued by our end users. Through this work, we hold in high regard the following:

  • Early customer validation over releasing products with unknown end-user value
  • Collaborative design over designing on an island
  • Solving user problems over designing the next “cool” feature
  • Measuring KPIs over undefined success metrics
  • Applying appropriate tools over following a rigid plan
  • Nimble design over heavy wireframes, comps or specs

As stated in the Agile Manifesto, “While there is value in the items on the right, we value the items on the left more.”

How The Manifesto Works

Let’s take each of these in turn and see how we can follow the principles of lean UX.

Early Customer Validation Over Releasing Products With Unknown User Value

What if you worked at a company where usability testing just wasn’t done? Unfortunately, this is the sad state in which many of our fellow UX practitioners find themselves. How, then, do they follow the principles of lean UX?

With usability testing, we seek customer validation or early failure. Customer validation may be sought through other means as well. For example, does your company gather feedback from users? If that feedback is circulated, are you on the list of people who receive it?

Here are other sources of learning about customer needs:

  • Customer service representatives
    Their focus is on helping customers overcome experience issues. Try to speak to them regularly. They are likely documenting their calls, so see whether you can create some system for tagging experience issues that you can follow up on.
  • Sales representatives
    This is another group that is focused on the customer. They will understand what customer problems are out there to be solved. They’ll also know which features are important and which innovations customers want.
  • Website search data
    This is an invaluable source of customer desires. Search data can uncover website navigation problems and features or problems that customers are looking for.

Salespeople and customer service reps can be great sources of customer needs.
Salespeople and customer service representatives are great sources of learning about customer needs. (Image: Renato Ganoza)

Collaborative Design Over Designing on an Island

Design should not be a solo exercise. Being a design team of one is no excuse. I use the design studio process and adopt the role of facilitator. Gather team members who own a piece of the project, and host a design studio workshop. Include at least the following people (adjusting to suit your unique organization):

  • Domain owner
    Your subject matter expert
  • Requirements Owner
    A business analyst or the person who gathers and writes the requirements
  • Data provider
    A data analyst on hand who is familiar with the analytics and can pull the info you need
  • Technology owner
    A developer, someone who understands the technology constraints and design patterns
  • Product or business owner
    A product manager or the person who owns this piece of business
  • Designer
    The UX or visual designer or person who owns the design and can facilitate the design studio
  • Researcher
    The usability analyst or UX researcher or person who owns customer development and persona creation

Solving User Problems Over Designing the Next Cool Feature

When you’re handed a requirements document, a thought-out solution, a feature, a brief or whatever artifact you receive to inform your work, begin by asking, “What problem are we trying to solve?” Ideally, you should clearly understand the customer’s problem. Design is problem-solving, so if you don’t know the problem, you can’t design a solution. If you do this enough, then the stakeholders will understand that you’re more than just a wireframe jockey. You’re a professional problem-solver with a system for creating solutions that make sense.

Measuring KPIs Over Undefined Success Metrics

You can’t measure success if you aren’t… er, measuring. Avoid vanity metrics. I love Dave McClure’s pirate metrics:

  • Acquisitions
    Users come to the website from various channels.
  • Activation
    Users enjoy their first visit (a “happy” user experience).
  • Retention
    Users come back, visiting multiple times.
  • Referral
    Users like the product enough to refer others.
  • Revenue
    Users conduct some monetization behavior.

Applying Appropriate Tools Over Following a Rigid Plan

Lean UX should be a flexible process. As I started to develop the process steps for one cycle, I found myself overwhelmed with the number of tools being recommended. My advice, similar to what I’d say when creating a minimum viable product, is to apply the minimum tools required to get you to “pivot” or “persevere.”

Here are a few tools that I’ve found useful (not an exhaustive list):

  • provisional personas, right sized for the effort;
  • persona map (which we learned from Menlo Innovations);
  • assumptions, with the riskiest identified;
  • design studio;
  • paper prototyping in early stages;
  • digital prototyping (HTML preferred) in later stages;
  • guerilla design assessment (a better name for usability testing);
  • co-location wherever possible.

The design studio method is popular for collaborative design
The design studio method is popular for collaborative design. (Image:

Everything else should be applied as it makes sense. For example, if more customer development is needed, then take the time to interview as a team and to internalize customer needs. The lean startup world has no shortage of tools. Use only the ones that make sense to your project and that get you to a validated solution faster.

Nimble Design Over Heavy Wireframes, Comps or Specs

The goal is to release a product. Once it’s released, users won’t interact with the wireframes or requirements document as part of the product. They will interact with the product itself. So, try to spend less time on your design artifacts.

How can you lighten your wireframes?

  • Lighter annotations and more presentation
    I’ve found that if I take the time to present my unfinished wireframes to stakeholders, I will get valuable feedback sooner and save time.
  • Co-design
    If developers, quality assurance testers and business analysts are involved in the design, then they will share ownership and internalize the annotations. When this happens, you can pass off sketches as wireframes because team members will already understand the interactions.
  • Paper prototypes
    These serve a dual purpose. They get you to design validation (i.e. usability testing) sooner, but they also demonstrate the interactions. No need to write detailed wire annotations if the user can see the interactions firsthand.

It’s All About Principle-Driven Design

This all boils down to something that I call principle-driven design. As stated, some lean UX is better than none, so applying these principles as best you can will get you to customer-validated, early-failure solutions more quickly. Rules are for practitioners who don’t really know the value of this process, while principles demand wisdom and maturity.

By allowing principles to drive you, you’ll find that you’re more nimble, reasonable and collaborative. Really, you’ll be overall better at getting to solutions. This will please your stakeholders and team members from other disciplines (development, visual design, business, etc.). To quote the late Stephen Covey:

“There are three constants in life: change, choice and principles.”

That pretty much sums up lean UX.

(al, il, ea)

© Anthony Viviano for Smashing Magazine, 2014.

Tags: UX Design

January 02 2014


Up On The Wall: How Working Walls Unlock Creative Insight


Research wall, design wall, research board, ideation wall, inspiration board, moodboard, pinboard — Working walls are known by countless names. Underlying them all is a single idea: that physically pinning our sources of inspiration and work in progress, and surrounding ourselves with them, can help us to rearrange concepts and unlock breakthrough insights.

In their 2009 paper on creativity in design, human media interaction researcher Dhaval Vyas and his colleagues coined the term “artful surfaces” to refer to “surfaces that designers create by externalizing their work-related activities, to be able to effectively support their everyday way of working.” According to Vyas and his colleagues at the University of Twente (in the Netherlands), designers integrate these surfaces “artfully” and organize information in such a way that it empowers them to visualize and extend their work in progress.

Working Walls And Design Thinking

In this article, you will learn how displaying data and ideas on a large vertical surface can enhance your design thinking process. One of the first things to know is that the practice of using “working walls,” as we will call these surfaces from now on, is scarcely documented in scientific literature — hence, the need for a working definition of a working wall (redundancy intended). For the purpose of this article, we’ll define it as a large vertical surface on which ideas, data and work in progress can be displayed, rearranged and extended.

This design thinking tool being as powerful as it is, it comes as no surprise that a myriad of other fields have adapted and used it for years. But just how do working walls come into play in design thinking? Tim Brown, president and CEO of IDEO, defines design thinking like so:

“A human-centered approach to innovation that draws from the designer’s toolkit to integrate the needs of people, the possibilities of technology, and the requirements for business success.”

To further define this approach, The Institute of Design at Stanford (or has outlined five steps in the design thinking process:

5 steps of design thinking

It all starts with empathizing with the people you are designing for. Then, you define a clear perspective of the process by making sense of a large amount of information. You proceed with ideation, exploring a wide array of concepts and generating possible solutions. Prototyping involves building an object (or artifact) that a user can experience and give you feedback on. Testing is about triggering an actual response from your intended user.

Working walls can facilitate every step of the design thinking process, and they offer unique advantages to bolster creative thought. The tool can help us empathize with and gather input from users, define a focused approach based on a large amount of data, capture the ideation process, display a low-fidelity prototype that users can interact with, and keep track of the way we’ve tested our creative assumptions.

Hopefully, the following benefits and working wall templates will inspire you to create your own today.

1. Empathize: Enable Peripheral Participation By Users

Large vertical surfaces can be used to spark interaction with your intended users. Wall-sized displays allow for easy visualization and intervention, which makes them particularly useful for consumer research.

Vyas and his group spent over 250 hours studying design departments at universities and companies in the Netherlands and concluded that artful surfaces are “an important vehicle for peripheral participation in a project, allowing visitors to enter its context.”

They labeled this participatory environment a “creative ecology,” where users are free to interact via their inputs on working walls.

5 Guys Burgers and Fries, for instance, has been using working walls to invite customers to describe their dining experience.

5 Guys Burgers and Fries use working walls
(Image: Carly Baldwin,

Here’s a working wall template that you can use to gather input from your audience and to empathize with their wants and needs:

Working wall template

Try out some of these prompts:

  • Name one thing you love or enjoy about X?
  • Name one thing you hate or dislike about X?
  • What would you change about X?
  • How does X make you feel?

2. Define: Synthesize Key Findings By Detecting Affinities

Once you’ve collected information about your audience, pinning the raw data onto a working wall will help you to rearrange and make sense of it. This type of working wall displays what we call an affinity diagram. Although people have been grouping similar ideas under labels for thousands of years, it was Japanese anthropologist Kawakita Jiro who originally developed the affinity diagram in the 1960s.

The premise of an affinity diagram is that, at first glance, several points of our data might seem unrelated, convoluted or unclear. However, by grouping related concepts, we are able to detect patterns that will help define our design approach.

Consider private detectives. You’ve seen them in the movies and on television. The sleuth will often map out a suspect’s life on a sketching wall and proceed to make breathtaking connections. In this case, a working wall is used to find affinities along the subject’s journey (“What are some patterns we can expect this person to follow?”), to find affinities in the lifestyles of the subject and their peers (“What do we know about A’s relationship with B?”) and to solve fuzzy criminal cases in general.

Take the “gladiator wall” from Shonda Rhimes’ award-winning television show Scandal:

Gladiator Wall from Scandal
(Image: Scandal Moments)

Claire Danes research wall from Homeland
(Image: Esther James)

Here’s a working wall template that you can use to identify affinities in a fuzzy dataset:

Working wall template to detect affinities within a fuzzy dataset

These questions will help you get started with the template:

  • “How is data point A similar to data point B?”
  • “How are both A and B different from C?”
  • “Is there a category (i.e. label) that describes these data points well?”
  • “Why does a certain data point look isolated? Does this ‘outlier’ yield an interesting insight?”

3. Ideate: Stimulate Divergent And Holistic Thinking

Psychologist J.P. Guilford coined the term “divergent thinking,” which the Gale Encyclopedia of Psychology defines as “the ability to develop original and unique ideas and to envision multiple solutions to a problem.” This essential design skill is the key to ideation.

We could design several types of working walls to brainstorm, gather inspiration, and fully map out concepts and their relationships.

When brainstorming individually or in a group, stick notes at the top of the working wall to show all ideas. Then, using the affinity diagram method described above, identify which ideas are related, and categorize them accordingly.

Use sticky notes on top of a working wall
(Image: Oranaozchi)

To maximize inspiration for ideation, set up a “moodboard” layout on the working wall to collect ideas from different sources. Fashion designers, for instance, observe a phenomenon called “planned obsolescence,” which basically means that they design garments knowing that those garments will eventually become unfashionable.

This instability demands a disciplined creative process in which (almost) everything can become a source of inspiration. Fashion designers everywhere use inspiration boards to capture seasonal trends, textures, accessories, sketches and muses when ideating for their next collection.

Inspiration board
Fashion designer Christian Siriano poses with the inspiration board for his spring/summer 2014 collection. (Image: The Derek Daily)

Here’s a working wall template you can use to get inspired with ideating:

Working wall template for design ideation

Ask yourself these questions to get started with the template:

  • “Does this finding relate to the overall structure (such as the layout or grid) that I am trying to implement in this project?” (If so, include it as a source.)
  • “Is this particular aesthetic treatment (such as the use of color or typography) similar to the one I am trying to convey in this project?” (If so, include it as a source.)
  • “Is a particular functional feature associated with the utility I am embedding in this project?” (If so, include it as a source.)
  • “Does a certain mood (such as an atmosphere or emotion) in this source inspire what I am trying to convey with this project?” (If so, include it as a source.)

The working wall style we’ll explore next can help you map out a given concept and find important relationships between its subconcepts. Think about it: Doesn’t working on a large surface help you to visualize the big picture? What if you had enough space to add more concepts related to your subject? Working walls get it done.

This kind of big-picture reasoning has been called “holistic thinking.” According to psychologist Richard Nisbett at the University of Michigan, holistic cognition involves “an orientation to the context or field as a whole, including attention to relationships between a focal object and the field.”

This is the opposite of analytic thinking, whereby we pay attention primarily to the object and its categories, using rules (i.e. formal logic) to understand the object’s behavior.

East Asians tend to be more “holistic,” while Westerners are more “analytic,” according to Nisbett and his colleagues at the University of California (Berkeley), Seoul National University (Korea) and the Ecole Polytechnique (France) in a 2001 paper titled “Culture and Systems of Thought: Holistic Versus Analytic Cognition.” This groundbreaking research earned the team a grant from the National Science Foundation.

Evidence suggests that if you were raised in a society influenced by classical Greek thought, holistic thinking might not come all that naturally to you. However, product and service design is holistic by nature and, thus, requires stepping out of our comfort zone and transforming our mindset. Working walls are invaluable tools in this process.

Wartime generals, for example, have been using working walls to map out large-scale military intelligence strategies for decades. Winston Churchill kept some nifty underground chambers covered wall to wall with maps, thousands of color-coded pins and tiny annotations. These maps helped Churchill and his administration plan military advances, ideate different scenarios and think collectively about the best tactics to pursue.

Failing to see the big picture could mean the difference between victory and defeat in war and design.

Working wall in the military
“The Map Room” in the Churchill War Rooms. (Image: Kaihsu Tai)

Use the template below to map out a concept and its relationships. The width and marker of each arrow represent the strength and direction of a relationship, respectively.

Working wall template for mapping out a concept

Ask yourself these questions to get started with the template:

  • “Does concept A influence concept B, or is it the other way around?”
  • “How strong is the relationship between concepts A and B? Is there one?”
  • “If concept A influences B, is the effect reciprocal? Does A exert a stronger influence over B, or is the strength of their force upon each other equal?”

4. Prototype: Create And Change Prototypes Easily

You could combine elements on a working wall to create a prototype of a design solution. This low-fidelity version of the solution could make use of mixed media such as the following:

  • magazines;
  • books;
  • sketches;
  • screenshot printouts;
  • 3-D material, such as textures;
  • photos;
  • wireframes, blueprints and diagrams;
  • evidence from primary research;
  • evidence from secondary research;
  • text quotes that capture a mood;
  • other artifacts.

Interior designers combine elements on a working wall to create a scheme for a room. In the absence of a finished space, these boards serve as a low-fidelity prototype that gives the client sufficient clarity.

Working wall used by interior designer
Working wall for a cabana design in Vero Beach, Florida. (Designer: Erin Paige Pitts)

Here’s a working wall template you can use to create a low-fidelity prototype that users can give you feedback on:

Working wall to create a low-fidelity prototype that users can give you feedback on

And here are the questions to get you started:

  • “Into what major components can this product or service be broken down?”
  • “How can I show the user what the materials for a particular component will look like?”
  • “How can I show the user the flow of their interaction with the product or service once it is finished?”
  • “How can I give the user a glimpse of the final outcome? Would mockups, wireframes, sketches or blueprints help them to visualize it?”

Prototypes evolve, and unless we have a quick way to access previous versions of our own work, that sense of progress will fade and we’ll lose sight of the design decisions that took us from A to B in the first place. Second thoughts, insecurities and analysis paralysis take over. Understanding and being able to visualize our process give us the confidence that we are building on a strong foundation and give us the strength to justify our design choices.

Interaction designers, for example, must somehow navigate a dense jungle of user experience design, visual style, branding, layout, grids, typography and function changes. Working walls are an essential asset for succeeding in that.

The BBC UK published an amazing article explaining how it redesigned its website. It printed out every single screen of the old website and pinned it up on what the team now calls the wall of shame. The team gathered around this large vertical surface to prototype and pin new versions of its website. The result is a triumphant wallpaper-sized timeline of where the BBC used to be and where it stands now.

BBC-UK working wall
A New Global Visual Language for the BBC’s Digital Services,” BBC Internet Blog

Here’s a template to visualize prototype changes over time:

Working wall template for visualizing prototype changes over time

And here are the questions to get started:

  • “Into what major features can this product or service concept be broken down?”
  • “How does each feature currently look?” (Include this in the column for the version you are currently working on.)
  • “What elements will we add to this feature going forward?” (Include them after the plus sign in each of the arrows pointing to the next version.)
  • “What elements will we remove from this feature going forward?” (Include them after the minus sign in each of the arrows pointing to the next version.)

5. Test: Visualize And Validate Design Assumptions

Researchers in every field experiment and iterate on their results. In the previous step, we saw how to use a working wall to create and refine a prototype before introducing it to our target users. Stage five of the design thinking process, testing, can also be facilitated using a different type of working wall.

Startup founders use a “validation board” to visualize their prototype tests. The free canvas created by Lean Startup Machine helps you to display the different iterations (or pivots) that your design solution hypotheses have undergone. You can also classify your assumptions depending on whether they’ve been validated. As on other working walls, elements may be moved around as the process unfolds.

(Image: The Validation Board: A Free Tool for Testing New Startup Ideas From Lean Startup Machine,” Harrison Weber, The Next Web)

Use this working wall template to visualize and validate your design assumptions:

Working wall template to visualize and validate design assumptions

Here are the questions to get started with the template:

  • “Which assumptions haven’t we tested yet?” (Include them in the first column, labeled “Untested.”)
  • “How do we go about testing this assumption? How will we know whether it is true or false?” (Include this “experiment design” in the second column, labeled “Testing”.)
  • “Has this assumption proven to be true or false?” (Move the original sticky note in the “Untested” column to either the third or fourth column, depending on the result of the experiment.)


Working walls are invaluable tools for design thinking. They empower research, sense-making, ideation, prototyping and testing. Using wall-sized displays in our design process empowers convergent, divergent and holistic thinking — all essential creative skills.

I hope you’ve found inspiration in these different and innovative uses of working walls. The next time you start a design project, keep these templates and ideas close to heart.

Do you know of other effective uses and layouts for working walls? Comment away!

(al, ea)

© Laura Busche for Smashing Magazine, 2014.

Tags: UX Design

December 16 2013


Using Brainwriting For Rapid Idea Generation


When a group wants to generate ideas for a new product or to solve a problem, you will usually hear the clarion call, “Let’s brainstorm!” You assemble a group, spell out the basic ground rules for brainstorming (no criticism, wild ideas are welcome, focus on quantity, combine ideas to make better ideas) and then have people yell out ideas one at a time.

Brainstorming is often the method of choice for ideation, but it is fraught with problems that range from participants’ fear of evaluation to the serial nature of the process — only one idea at a time. Brainwriting is an easy alternative or a complement to face-to-face brainstorming, and it often yields more ideas in less time than traditional group brainstorming.

What Is Brainwriting?

When I teach my graduate course in “Prototyping and Interaction Design,” I start with a class on ways to generate ideas. Because brainstorming is a well-known and popular technique, I generally begin with a discussion on how to do good brainstorming, something that is very hard, and then introduce brainwriting as a worthy, and sometimes preferred, alternative to brainstorming. The term “brainwriting” often brings forth smiles and quiet laughter because it is a strange word.

Brainwriting is simple. Rather than ask participants to yell out ideas (a serial process), you ask them to write down their ideas about a particular question or problem on sheets of paper for a few minutes; then, you have each participant pass their ideas on to someone else, who reads the ideas and adds new ideas. After a few minutes, you ask the participants to pass their papers to others, and the process repeats. After 10 to 15 minutes, you collect the sheets and post them for immediate discussion.

In my experience, the number of ideas generated from brainwriting often exceeds what you’d expect from face-to-face brainstorming because you’ve reduced anxiety somewhat, followed a parallel process in which a dozen people may add items simultaneously, and reduced the amount of extraneous talk that happens during brainstorming, which takes time away from idea generation.

Instead of getting one idea at a time, lots of ideas can emerge simultaneously, if you let your participants “brainwrite” them. (Image credits: opensourceway)

When To Use Brainwriting

Brainwriting can be used in the following situations:

  • You have too large a group for effective brainstorming. You could conduct brainwriting at a conference of 500 people simply by leaving a large card on each seat, asking a question, and then having each audience member pass a card to someone else, and then repeat three times for a minute of writing.
  • You have quiet people in your group who are intimidated by traditional brainstorming.
  • You are working in a culture in which brainstorming about “wild ideas” or expressing ideas that diverge from those of senior management is not accepted.
  • Your time is limited. I’ve used brainwriting to brainstorm questions for a website visit when I had only 10 minutes to get feedback from the product team. I ended up with more than 50 different questions, without the fuss of having to set up a formal brainstorming session.
  • You don’t have an experienced moderator. Brainstorming, contrary to what many blog posts claim, is difficult to do well. Brainwriting, in contrast, requires that you be able to ask a question, read a clock and collect answers.
  • You are worried about loud or forceful individuals influencing others, as they might in traditional brainstorming.

Brainwriting can be used to understand how different groups view an issue. You might try to conduct separate brainwriting sessions with different internal groups. For example, if you asked groups to brainwrite about “What are the most important problems faced by our customers?” you might find that developers have a different perspective from the UX team, who have a different perspective from product managers. In my experience, the differences emerge more strongly through brainwriting than through face-to-face brainstorming.

brainwriting-6 -opt
Brainwriting can help you get a better understanding of how different groups or departments view a problem. (Image credits: opensourceway)

When To Avoid Brainwriting

While brainwriting is easy and accepted in many environments after a single demonstration of its productivity, you might want to avoid brainwriting in a few situations. There may be times when your colleagues find it difficult to express ideas in writing. If you are working on complex issues, then you might want to opt for small group brainstorming or another ideation technique that allows for clarification and discussion.

If you are forming a team, then you might want to opt for traditional brainstorming, because participants will be more familiar with that method (rather than the strange name “brainwriting”), and the social interaction will foster team-building. You might want to avoid brainwriting if you are in a culture with strict rules about which methods and procedures to follow. People who follow a highly structured product design and development process might find brainwriting a bit too radical.

How To Conduct A Brainwriting Session

My first suggestion is to search for “brainwriting” on the Web and peruse some of YouTube videos and short articles that describe brainwriting techniques and tips. There are several approaches to brainwriting: interactive brainwriting, the 6-3-5 method, the idea card method, and the remote spreadsheet method. We’ll cover the basic procedure for each of these techniques.

Interactive Brainwriting

Here are the basic steps for interactive brainwriting:

  1. Introduce the procedure.
  2. Hand out paper for each person to write down ideas.
  3. Provide a clear and legible problem statement. (You could print out a page with the statement at the top, project the statement on a slide, or write it on a board.)
  4. Describe the timing of the brainwriting (for example, three minutes for the first round, and two minutes for four subsequent rounds) and the process for passing the pages (for example, counterclockwise around a table). A page-passing process that is not clear could undermine the credibility of the method and waste time.
  5. Ask if anyone has any questions about the problem statement or the brainwriting process.
  6. Remind people to read the ideas quickly before entering their own ideas and to feel free to add, modify and combine ideas. Let people know that extra paper is around the room if they run out.
  7. Begin the rounds. Announce the end of each round, and ask people to pass their paper to another person.
  8. At the end of the session, collect the brainwriting pages and post them for comment, additional ideas or review.

Brainwriting 6-3-5

In brainwriting 6-3-5, six people are given a form and asked to provide three ideas for solving a problem in five minutes. Participants are invited to consider out-of-the-box ideas and to combine ideas with others. The ideas are written in silence to prevent participants from influencing each other. After the first five minutes, each participant passes a form like the one below to the adjacent participant, who then reviews the ideas and adds new ones.

The process is repeated six times, with a potential for 6 × 3 × 6 (or 104) ideas. In practice, I’ve found that people often come up with more than three ideas in five minutes, so you could create a 6-6-5 form.

Participants/Ideas Idea 1 Idea 2 Idea 3 Participant 1 Filters to reduce the size Search Elliptical browsers Participant 2 Tagging Concordance feature Automatic clustering of related data Participant 3 Break the list up into categories Provide a birds-eye view and zoom Most recently used feature Participant 4 Participant 5 Participant 6

A 6-3-5 brainwriting form. (Problem Statement: “How can we deal with extremely long lists in our application?”)

Idea Cards

This approach to brainwriting gets participants to write ideas continuously on sticky notes or cards and, as they finish a card, to place it off to the side. When other participants need inspiration, they can take a few cards from their colleagues and continue. Each card would hold only one idea.

A variation on this approach is the “one idea, quick pass,” whereby each person lists one idea on a sheet and then hands the sheet to another participant, who adds one more idea. If participants don’t have any sheets to look at, they can grab one off of a pile and continue writing. This continues until the leader of the session declares “The end.”

The Spreadsheet Technique

If you want to conduct remote brainwriting, you can use Google Spreadsheet as a brainwriting tool. You’ll need to set up a list of people who will participate and then ask each of them to enter ideas in a single column of the spreadsheet. As each person enters an idea in a cell, others would see the idea and use that as inspiration for new ideas. This process can foster a bit of mild competition if done in real time and can also be fun.

Practical Tips And Tricks For Better Brainwriting

Here are a few tips and tricks that I’ve picked up over the last 10 years or so of using the brainwriting method:

  • If you are using handwritten sheets, ask people to print or write legibly.
  • Ask people to be succinct but to provide enough information for the idea to be understood two weeks later.
  • Ask participants to do some easy homework to prepare for brainwriting (and brainstorming). Homework can make the sessions more productive. One example of homework would be to send your problem or question to participants and ask them to jot down or think about three ideas. Make the homework fun if you can.
  • Put the problem statement or ideation question on all of the sheets or write it on a board or slide if you are doing it remotely. If you use the Google Spreadsheet approach, put the question at the top of the spreadsheet.
  • Ask your participants to avoid jargon and acronyms that wouldn’t be understood in a week’s time.
  • Be clear about the rules for sharing idea sheets. If you have people pass them to others, designate the direction of passing the pages to avoid confusion.
  • Set a timer. Most smartphones have countdown timers that work well for brainwriting.
  • Mix brainstorming and brainwriting with other ideation methods. Brainstorming may generate few ideas, but sometimes the social aspects of brainstorming generate a sense of teamwork and creativity.
  • If you want to create an affinity diagram from the ideas, you could prepare pages with sticky notes and then remove them when you are ready to diagram. The image below shows six pages from a brainwriting session on the topic of how to improve remote collaboration. Each page would have six sticky notes on which participants can write ideas for the topic. After the brainwriting is complete, the notes can be organized into categories using the affinity diagramming method.

Using an affinity diagram to understand brainwriting data
You could use affinity diagramming to organize and interpret the data from brainwriting sessions. (Large view)

How To Sell Brainwriting To Your Colleagues

Brainwriting is easy to sell in most organizations and client settings. There are five ways to sell brainwriting:

  • The first selling point is its scalability. You are able to gather data from a few people on your design team to hundreds of people at a conference without great cost or detailed planning.
  • It does not require great facilitation or social psychology skills. All you need is a brief script, some cheap supplies or a remote tool like Google Spreadsheet, and between 10 to 30 minutes to conduct the session.
  • It is efficient. Unlike brainstorming, with its serial approach to idea generation, everyone is writing ideas at the same time.
  • While brainwriting is generally done in silence, each person is still stimulated from seeing other ideas.
  • Perhaps most importantly, the number of ideas generated from brainwriting generally exceeds those from brainstorming.

Enjoy your experiments with brainwriting.

Resources On Brainwriting

The resources listed below are a mix of videos, articles and books. My recent book, Brainstorming and Beyond, has a full chapter on brainwriting (and on brainstorming and braindrawing).

(al, ea)

© Chauncey Wilson for Smashing Magazine, 2013.

Tags: UX Design

December 11 2013


The Line Of Least Resistance


In chess, the psychological dimension that springs from a dialogue between two brains, two ideas, two strategic conceptions that depend on the personality of each chess player has long been somewhat of a romantic mystery. How do Grandmasters think? What strategies do they use?

More often than not, the most successful strategies are rooted in our own very nature. And common to most Grandmasters is that they almost never take the easy way out. A different, better alternative is always available, and they go looking for it. That creativity, that compulsion, that drive to look beyond what comes instinctively is what fuels successful strategies and explains why so few Grandmasters are out there.

(Image credits: Mukumbura)

For most of us, however, things are simpler. We tend to favor the shortest path, the easy way out, the shortcut. We cut through the middle of the park if we have to.

We’re naturally lazy. When we think, we search for the nearest pattern, and when we find the pattern, we don’t need to think anymore — we just follow the pattern. Our brains have evolved to be — borrowing Edward de Bono’s expression — “brilliantly uncreative.”

This preference for shortcuts is what Grandmasters naturally exploit. Playing on well-known weaknesses, automatisms or unconscious actions has long been a common strategy in chess.

When it comes to using and interacting with technology, that underlying behavior seems to hold. Users unconsciously look for the line of least resistance — la loi du moindre effort, as psycholinguist François Richaudeau called it. Richaudeau’s work revolved around words, but considering how vital communication, language and words are to the design of interactions, the core principles still apply: The shortest words will be those emitted, understood and read with the minimum of effort, and also those most frequently employed due to their more profound presence — or incrustation — in our memory.

We remember shorter words better. That’s because, according to Kenneth S. Goodman, we process graphic, syntactic and semantic information simultaneously. In doing so, users carry out cycles of sampling, predicting, testing and confirming as strategies to bring in “the most reliable prediction with the minimum use of the information available.”

The process isn’t specific to words and reading, though. It underlies our behavior and interaction with the world around us.

Framing it in this way seems to suggest the generalized idea that behavioral patterns are linked to common causes — a concept expanded by behaviorism to the extent that it proposes a predictable and reliable link between a stimulus and the response it produces. That generalization is largely refuted by the cognitive revolution on the grounds that prior knowledge and mental processes intervene between a stimulus and response to reduce the predictability of human behavior — or the response — given a stimulus. Essentially, we can’t predict behavior.

While that may hold true at a micro level, there are still plenty of common paths of action in the way we work — stimulus, sensory organs, interneuron, brain, processing, motor neuron, response. It’s still safe to assume that if we design an environment in which even the subtlest of details is sympathetic to how we, as humans, work and think, and with the singular purpose of easing the experience, then users will always favor that line of least resistance.

Is the environment we design sympathetic to the way we work? (Image credits: opensourceway)

Designing an experience from a perspective that is more closely related to how we naturally strategize, designing guidance through pattern prediction, as opposed to limit enforcement, might prove to be a more viable approach.

Let’s put that in perspective. Take decision fatigue.

We all make decisions every day. Some of them big, some of them small, some conscious and some so insignificant that they slip by us without our even realizing. And in a world in which we are constantly bombarded with information and media options, such as blogs, social networks, magazines and TV, the effects of so many decisions that we have to take day by day become increasingly obvious.

Our decisions, even those that are mere preferences between option A and B, gradually take their toll on our cognitive load. The mental processes of decision-making are strenuous; we have only a finite store of mental energy available to exert self-control.

Basically, we get tired if we make too many decisions. As a result, according to Barry Schwartz, one of three things is likely to happen: we end up making poor decisions, we become more dissatisfied with our choices, or we get paralyzed and don’t choose at all.

Interaction processes — regardless of the medium — are a prime example of decision fatigue in action. At a micro level, hundreds of small, subtle and, most of the time, unconscious decisions that we take every time we use an application, browse a website or even follow an ad can affect the way we experience the artefact that we’re interacting with.

At a macro level, thanks to what we know about decision fatigue, we can predict that users can be overwhelmed to the point of making a default choice or no choice at all, depending on the option they face. One example of this is Dan Ariely’s opt-in versus opt-out example for forms of the US Department of Motor Vehicles. It shows that we can basically predict how people will react in a very specific situation by controlling the design of the application form, paying close attention to the defaults.

This is a very specific prediction of behavior. We’re not normally used to thinking of behavior as being that predictable. But in a lot of situations, it is. Ariely calls it being predictably irrational.

Contextual cues — through signs or linguistic cues, because they have the potential to refer to a specific value system — can sometimes direct cognition in particular ways, either encouraging or discouraging certain patterns of behavior. Thus, it’s vital that user experience practitioners maintain complete control over and responsibly use all elements in an interface that could be used as contextual cues and predictors.

And one of the biggest cues at the disposal of designers is language.

We, as a species, have refined language through countless iterations over the span of millennia to such an extent that words are tied to complex experiences, rather than to singular instances, by way of symbolic representation.

The Power Of Words

In 1967, Paul Watzlawick described what later became a cornerstone of communication theory: meta communication. He postulated that every communication includes, apart from the plain meaning of words, more information: information on how the talker wants to be understood and how they see themselves in relation to the receiver of the information.

Language, as a clear manifestation of the cognitive capacity of the human mind, is only a medium to carry out acts of communication. That’s one of the reasons why H.F. Bradley once said that experience is basically incommunicable.

Still, there is always something to communicate — moods, annoyances, happiness, feelings, ideas. There is always something that we need to understand — a noise, a color, a sign, a danger, an emotion. There is always some medium that is familiar to us — a grammar, an artistic language, a chess board, an interface.

While context provides a window into how people behave, words have the power to steer people towards a particular pattern of behavior through frame manipulation.

Frame manipulation invariably affects users — admittedly, to different degrees. One prime example of how the context of options and the wording of a question affects behavior is Tversky and Kahneman’s famous experiment in 1981, which demonstrated systematic reversals of preference when the same problem was presented in different ways.

The experiment required participants to make a hypothetical decision, and the researchers tried to determine whether they could steer the participants towards an answer simply by wording the questions carefully.

The experiment proposed a hypothetical outbreak of disease with 60,000 predicted deaths, and participants had to choose between two programs:

  • Program A
    20,000 people would be saved.
  • Program B
    There is a 33% chance that all 60,000 would be saved, and a 66% chance that none of them would be saved.

Framing effect: second option

With these options, program A was a favorite among participants. But what happened when the same question was asked again, but this time, instead of counting the number of lives saved, counting the number of deaths? Here’s how the second option would have sounded:

  • Program A
    40,000 people would die.
  • Program B
    There is a 33% chance that none of them would die, and a 66% chance that all of them would die.

Framing effect: first option

This time around, the clear favorite was program B.

The interesting part is that the math is exactly the same for both: 40,000 out of 60,000 would die anyway. But with the first option, participants were given the choice of a gain: they were given the choice to save 20,000 people. So, the gamble was perceived as negative against the word “save.”

In the second option, participants were given the choice of a loss: 40,000 people would die, or they could gamble that none of them would die with a 30% chance.

Users were influenced simply by the wording. This later became known as the framing effect. The effect helps to explain why people are much more likely to buy meat when it’s labeled as 85% lean, instead of 15% fat. And it’s why twice as many patients opt for surgery when told they have an 80% chance of surviving, instead of a 20% chance of dying.

As the experiment demonstrates, words have the power to selectively influence a user’s perception of meaning. And, for most applications, words can also be used to elicit interactions.

Summing Up

Context is the barrier that makes or breaks a user’s experience. Those unconscious moments, every bit of information we discard on our way up an emotional peak, all of those fine details — they all could potentially lead to a sensible, sympathetic experience. A enjoyable experience is shaped only by context.

Some people use context and design great experiences, some don’t. Oliver Reichenstein calls it a continuum. That’s perfectly natural. We need to constantly make an effort to glance at the future once in a while — to permit ourselves educated dreams.

We need to permit ourselves to keep the vision going — from the ones whom we got it from, to the ones coming to get it. We all have the tools to do it. We just need to be responsible with them.

(al, ea, il)

© Sorin Pintilie for Smashing Magazine, 2013.

Tags: UX Design

December 03 2013


Efficiently Simplifying Navigation, Part 1: Information Architecture


Navigation, as crucial as it is to the user experience, is merely a means to an end — the end being to consume content. This is why users have very contrasting expectations about content and navigation. While content is supposed to be unique, surprising and exciting, navigating to it is supposed to be as simple and predictable as possible.

This series of articles, divided into two parts, is a four-step guide to efficiently simplifying the navigation experience, by analyzing the type and amount of content as well as choosing and carefully designing the right type of navigation menu.

Four Steps To The Ideal Navigation System

To build a usable navigation system, a website designer has to answer four questions, in this particular order:

  1. How do I best structure the content?
  2. How do I best explain the navigational choices?
  3. Which type of navigation menu is best suited to accommodate the choices?
  4. How do I best design the navigation menu?

The first two questions concern the structuring and labeling of content, which is often referred to as information architecture. Information architects typically visualize the results of their efforts in a site map diagram.

site map
A site map diagram gives an overview of the navigation structure of a website. (Image: Web Tuts)

However, for reasons that will be explained in detail during the course of this series, just providing a site map to navigate would not provide users with the best possible experience. Designing a custom navigation menu that properly accommodates, arranges and progressively discloses their options is also important, thus allowing users to comfortably find, browse and skip choices.

Designing such a navigation menu can be achieved by answering the third and fourth questions mentioned above, which refer to the interaction design of a navigation experience. The first two questions will be addressed in this first part, the latter two in the second article.

Structuring The Content

To properly structure the content of a website, first consider how users look for information, and then structure the content in a way that best aligns with those preferences.

How Users Look For Information

When a user is looking for something — be it a car, recipe, financial service, item of clothing, news article, fitness exercise, entertainment video or any other item or piece of information — they may or may not know the exact name of what they’re looking for. If we assume that users will always know the exact name of what they’re looking for, then we could argue that the best way to take them there would be to provide them with a large A-to-Z index or simply have them type in a search field.

Of course, things are not that simple. As will be explained in more detail in part two, even if users always knew the exact name of what they’re looking for, both an A-to-Z index and search have inherent interaction problems that make them inadequate as the primary or sole means of navigation. Moreover, users often do not know the exact name or do not even care about the item or its name; rather, they have a keyword or feature related to what they’re looking for.

The first step to safely guiding users to the right content, then, is to aggregate and categorize the types of items on the website.

Meta Data As The Foundation Of A Navigation System

The information collected about an item or piece of content is typically referred to as meta data — that is, information about information.

Without getting into specifics, items may belong to distinct meta data categories, whether a category is the political focus of a news article, the display size of a monitor, the director of a video, the collar type of a shirt or the degree of difficulty of a fitness exercise. Of course, multiple items may also share categories, such as price, popularity and publication date.

Users could browse content via these meta data categories. However, as we will see, giving users every possible way to browse content is not necessary or even helpful. Doing so would at best clutter the interface and slow down and complicate the navigation process and, at worst, would confuse, tire and annoy users to the point that they simply abandon the website.

Carefully consider whether and at which stage to show categories to users.

Three Types Of Meta Data Categories

To decide whether and when to present a meta data category, divide your categories into three groups: crucial, optional and irrelevant.

The challenge of information architecture is that classifying a category as crucial, optional or irrelevant very much depends on the preferences of the target audience, the website’s purpose and even the volume of content. However, once you’ve settled on a proper categorization, a few simple rules will help you decide when to show which categories.

Crucial Categories

Crucial categories are ones that would be important to all targeted users. These categories are rare, but there seems to be at least one crucial category for every item, which simplifies both the work of the designer and the navigation experience for users.

Determining Crucial Categories

A small selection of meta data categories for recipes might be “course,” “main ingredient,” “special diet,” “occasion,” “cuisine” and “cooking time.” Of these categories, the only crucial one would be “course.” Not everyone is on a special diet and not every meal is a special occasion, but almost everyone on any given day separates their meals into appetizer, breakfast, main dish, side dish, salad, dessert, etc.

Because the course would be important to all targeted users, it should be the first category presented to them.

“Course” is a crucial meta data category for recipes. (Image: Our Best Bites)

However, as mentioned, the target audience or website’s purpose might affect the classification of categories, especially on niche websites.

For example, “cuisine” would not be relevant to all users who visit a mainstream website about recipes. But if a website collects the best recipes from popular cuisines around the world, then “cuisine” could very well be a crucial category for the target audience, whether in addition to “course” or replacing it as the only crucial category. In any case, because “cuisine” is the main theme of the website, showing it first (instead of “course”) would be appropriate.

Niche websites have different crucial categories of meta data. (Image: Recipes by Nation)

Arranging Crucial Categories

The examples above address only single crucial categories. However, a set of items might encompass multiple crucial categories.

Take apparel. One crucial category could be the type of clothing, such as “shirts,” “pants,” “shoes” and “sweaters.” Another crucial, and mutually exclusive, category would be gender, “men” and “women.” A third could be the occasion, such as “casual,” “work” and “dress.” We could have more crucial categories, but we’ll leave it at that.

The question, then, is how best to accommodate and resolve potential conflicts between multiple crucial categories.

At first, placing all crucial categories on the same top level might seem logical. After all, they are all crucial. However, the opposite should be done. Crucial categories are best implemented one after the other, on succeeding levels. To better understand this, let’s look at the information architecture of the website shown below.

A horizontal bar is often used to list the type of products that a website offers. (Image: LL Bean)

A horizontal navigation bar lists the types of products available from LL Bean, such as “home accessories,” “hunting and fishing,” “outdoor gear,” “footwear” and “clothes.” However, the designers did something different for “clothes.” Clothes tend to fall into the categories of “men” and “women,” but rather than list a dozen types of clothes in the horizontal menu, the designers decided on a crucial category with fewer values. The user simply starts off with “men” and “women,” and then they get to see all of the types of apparel available in the drop-down menu, which allows for more options than the horizontal bar.

Using a crucial category with fewer values for the main navigation bar frees up space. (Image: LL Bean)

This presents a slight inconsistency in the information architecture, but the designers accepted it to free up space in the horizontal bar. The solution is fine as long as the inconsistency does not confuse users, which is unlikely in this case. However, placing the category “footwear” (which, understandably, distinguishes between footwear for “men” and “women”) on the same horizontal bar is not as sound a decision.

Crucial categories should be presented one after the other, not next to one another. (Image: LL Bean)

The problem with this solution is that two crucial categories have been placed on the same level. Both “Footwear → For Men” and “Men → Footwear” are direct paths. However, because both categories are crucial, users have to look through both anyway. But because they are placed on the same level, users are asked to choose between them, which undermines the assumption that both categories are crucial. Thus, one of the above paths could be removed — probably “Footwear → Men.”

Optional Categories

If multiple crucial categories exist, then the number of items might not necessitate their inclusion. If a website has no more than a dozen clothing items, then the designer could simply have users choose whether to see all clothes for men or women and be done with it.

In many cases, though, the opposite happens. Even after all crucial categories have been exhausted, an abundance of items might still be left. So, additional categories would have to be introduced to allow users to further filter the content. This is where optional categories come into play.

Optional categories are important to some but not all users. For example, two meta data categories for “cars” could be “number of doors” and “fuel type.” Some people are fanatical about fuel type and couldn’t care less about the number of doors. Others feel exactly the opposite.

Prioritizing Crucial Over Optional Categories

As a rule, optional categories should be presented after users have gone through the crucial categories.

However, many retail websites, such as for fashion and electronics, list brands (an optional category) on the same level as the type of product (a crucial category).

Crucial and optional categories should be shown on separate levels. (Image: Flipkart)

The problem with this approach is that if users select a brand on, say, a clothing website, they could be faced with hundreds or thousands of items, and they would still have to choose a type of clothing in order to narrow down the content. So, placing optional categories on the same level as crucial categories creates redundant paths, increases the complexity of choice and clutters the navigation.

Offering many filters is not bad. But rather than give users many navigational options at once from the outset, present them with a few crucial options first, and then, once they’ve exhausted those, introduce optional values.

Thus, in the example above, removing the brands from this level and having users select only a type of clothing first would be better. Then, on the next level, give users the option to select a brand.

Optional values should be presented only after users have selected crucial values. (Image: Flipkart)

Dynamic Filters

As mentioned, crucial categories should be presented one by one on succeeding levels. Optional categories are best offered all on the same level.

The only exception is that if the optional categories are mutually exclusive, then they should be shown on the next level in the same menu as the crucial categories. If the optional categories will likely be combined, however, then they should be implemented as dynamic filters.

In the screenshot below, notice how Sears lists crucial categories in the breadcrumb trail, while optional categories are implemented as dynamic filters.

Optional categories that are likely to be combined should be implemented as dynamic filters. (Image: Sears)

This distinction between crucial and optional categories can be explained as follows. Every category is a filter to the available content, while dynamic filters are dynamic because they enable users to select and change multiple values on the fly. In contrast, in a traditional, levels-based navigation system, the user would have to move from one level to the next to select a value. If the categories are crucial, then this would not be a problem, as illustrated above. But with optional categories, the situation is different.

When a user is looking for a shirt, many optional meta data categories can play a role: “brand,” “collar type,” “sleeve length,” “fabric,” “pattern,” “pockets,” “discount,” “price,” “rating,” “popularity” and so on. Knowing exactly which of these many categories a given user would be interested in is difficult. Someone could be interested in none, a few or all of them.

Rather than send users through all of the optional categories, one after another, regardless of whether they are interested in them, the designer could provide a list of dynamic, optional filters on the same level. Thus, users would be able to select only the categories they like.

In contrast, consider the website shown below, which does not distinguish as clearly between crucial and optional categories. Instead, it implements all categories as dynamic filters, including crucial categories.

Crucial categories should not be implemented as dynamic filters. (Image: Nike)

This lack of distinction leads to a couple of problems. First, it takes up vertical space and pushes the other optional filters down, requiring the user to scroll more frequently to view and alter the values.

Secondly, a dynamic filter is known as a “heavy metal” widget: It’s powerful but a hog on resources. Whenever a user selects a single value, the list of results is refreshed to match. This makes sense for providing feedback, but it does not make the interaction any faster. The same result could be achieved much more quickly simply by having users select the same crucial values from a traditional menu.

In fact, Nike’s designers do provide such a menu, allowing us to test this assumption and to compare the speed and efficiency of both interaction models within the same interface.

Crucial categories are best implemented in a traditional navigation menu. (Image: Nike)

Mutually Exclusive Categories

Dynamic filters are necessary only if the optional categories are likely to be combined. If the optional categories are mutually exclusive, then they should be implemented on the next level in the main navigation menu.

In the screenshot below, the Daily Express asks users a crucial question on the first level: to pick a topic of news, such as “finance,” “entertainment” or “lifestyle.” Then, on the main page of a selected section, users are given a digest of the latest news on that topic. Checking the three or four latest articles is all many users want to do. For those who want to delve into a particular topic, subsections are listed below the first level.

Mutually exclusive optional categories are best implemented as an additional level in the main navigation menu. (Image: Daily Express)

The subsections above can be regarded as mutually exclusive because an entertainment project is usually released either as a book or as a film or as a TV show, etc. Of course, combinations are possible; a book could be made into a movie or a stage play. But would users likely want to see a digest that matches these combinations? If so, then dynamic filters make sense.

Be aware that the answer to this question will depend less on the type of items than on the volume and diversity of items, as well as the particular interests of the target audience.

For example, users would probably not look for a breakfast recipe that is Chinese and low fat and Christmas-themed. Rather, they would look for a breakfast that is either Chinese or low fat or Christmas-themed. So, optional recipe categories are unlikely to be combined in general. However, if a website has thousands of recipes and the targeted audience has very particular preferences, then giving them the more powerful dynamic filters would be helpful.

A large and diverse amount of content as well as particular user interests could warrant dynamic filters. (Image: Food52)

Finally, consider a third group of meta data categories.

Irrelevant Categories

Irrelevant categories are categories by which no targeted user would likely want to browse the content. However, these categories are not irrelevant to the overall user experience.

Two meta data categories for a collection of articles could be “word count” and “image count.” If these categories were implemented as columns in a database, a content strategist could examine the values in these categories and conclude that most articles are too long and lack images, which could be a reason why many users abandon the website before they finish reading the articles. The content strategist could then discuss this matter with the designer or client, which could lead to improved content. Yet, while these categories might yield valuable information for the designer, users would likely not want to browse the articles by “word count” or “image count.”

In short, irrelevant categories should not appear on the website. They would be ignored, would clutter the interface and might even confuse users. The sheer volume of items, though, could turn an irrelevant category into an optional one.

For example, “word count” would usually be an irrelevant category by which to browse articles. But the website shown below has amassed so many articles over the years that the designers thought it necessary to add article length as an optional way for users to filter the content.

Sheer volume could turn an irrelevant meta data category into an optional one. (Image: Time)

The websites above that showcase recipes or apparel are suitable for explaining the subtleties and importance of prioritizing categories, because they typically require many meta data categories. But they do not illustrate one problem that most designers have to face at some point, especially when designing for a corporation.

Corporate Product Categorization

Most recipe websites collect recipes indiscriminately and then leave it to the designer to categorize them. But corporations often have their own internal way of categorizing products. This can lead to conflicting needs.

Consider first a crucial meta data category for cars. You would have a category based on size or lifestyle, with values such as “compact,” “wagon,” “sports car,” “sedan,” “limousine” and so on. This category is crucial because every type of car caters to a particular lifestyle, one that is important to almost everyone who drives a car. A compact, for instance, is small, cheap, easy to drive and easy to park in the city. A wagon has a lot of trunk space, well suited to families. A sports car caters to another distinct lifestyle. And so on.

Yet, many car companies categorize their models in their own way. BMW, pictured below, follows a number-based classification scheme (1, 3, 5, 7, etc.).

Sometimes, a corporation’s categorization works well. (Image: BMW)

While a corporation’s internal classification schemes can cause usability problems, BMW’s scheme actually makes the information architecture more usable. Despite being corporate, the scheme is quite well known to the general public, and the numbers progress logically according to car size, more or less in line with the common scheme of classifying cars as compacts, sedans, limousines, etc. In this case, anything other than the corporation’s categorization might alienate, rather than help, users.

This next example is not as straightforward. Opel likewise lists its car models according to its own internal naming convention.

Internal categorization is not always obvious to external users. (Image: Opel)

The problem is that the structure of this product line-up is not clear, and it is not made easier by the fact that users have to interact with a slider to see all of the models (although this problem relates more to interaction). Users have no easy way to understand how the products relate to each other and, thus, have no easy way to filter them according to preference.

If the categorization scheme does not work well for users, then a familiar external one must take precedence over the internal one.

Notice how Volkswagen (below) has its own way of naming and categorizing car models: “Jetta,” “Passat,” “Touareg,” etc. But the company prioritizes a common external categorization scheme over its corporate one. The result is a menu that is easy to understand and that enables users to focus on the part of the line-up that they’re interested in.

Prioritizing a common categorization scheme over a corporate one can make a navigation menu easier to understand. (Image: Volkswagen)

Of course, a client might not like to see their corporate classification scheme relegated to second place. However, as the information architect who has been hired to make the content on the website easily accessible, you are responsible to communicate this necessity to the client.

Explaining Navigation Options

Structuring the navigation options according to user preference is an important step in simplifying the information architecture of a website. But if users cannot understand their options in the first place, then even the most sophisticated structure will be in vain. So, take a moment to consider how best to explain the navigation options.

Give users only as much information as they need to understand their options. Anything more risks tiring them, cluttering the interface and slowing navigation, even to the point of abandonment.

Don’t give them too little information either. If users have to guess where links point to and then are disappointed by where they end up, they will soon lose confidence in the interface and leave the website.

Designers can choose from three methods to explain navigation options:

  1. labels;
  2. labels and pictures;
  3. labels, pictures and descriptions.

To choose the right method, assess how familiar the labels are to the target audience.


If the labels you would use are very familiar, then they alone will suffice. Large pictures and long descriptions are not necessary to explain what “jeans,” “shorts,” “shirts” and “jackets” are.

Labels suffice for familiar items. (Image: Rock Revival)

While keeping labels short is commendable, brevity should not be achieved at the cost of clarity. Acronyms and jargon, such as UX and BMI (body mass index), could work as long as the target audience is familiar and comfortable with them.

Sometimes, though, a term alone may be clear but the context in which it appears makes it ambiguous. Many websites of large organizations contain persistent horizontal navigation that points to aspects of the organization’s main work as well as context-sensitive vertical navigation that points to sub-departments. This can lead to duplicate labels. The University of Bath (pictured below), includes the label “Research” in the global horizontal menu at the top and in the narrower vertical menu on the left.

duplicate labels
Large organizations with many sub-departments are prone to duplicate labels. (Image: University of Bath)

While this could confuse users, careful design will avoid ambiguity. In the screenshot above, the menu heading “Explore the Department” is a good hint that the “Research” label below it refers to the department, not to the university as a whole. To be absolutely sure, we could lengthen the label from “About Us” to, say, “About This Department.”

Another way to give labels context is by adding numbers that indicate how many items are in a given category.

In some menus, the number of items in a category is displayed with the label. (Image: BJ’s)

These numbers are frequently included as values in dynamic filters.

In many interfaces with dynamic filters, the number of items in a category is displayed with the value. (Image: eBay)

While many users like seeing such figures, consider carefully when to actually show them. For instance, guessing how much content a website has just by looking at the home page is usually difficult. So, explicitly showing how much it has could win over users, because they would think, “Surely, this website has something for me.”

Quantifying the volume of content on the home page can persuade users. (Image: O’Reilly)

Of course, you probably wouldn’t want to disclose such a figure if your website does not have much content yet.

Likewise, when a user is browsing categories and is interested in a certain topic, they will want to explore the relevant category even if it has few items and even if another, less relevant category contains more items. If anything, displaying numbers at this point would slow down the browsing and clutter the interface.

In certain situations, statistics can impede users. (Image: Digistore, Ministry of Education, New Zealand)

The same goes for dynamic filters. Would users select a category according to the number of items it contains? If so, then displaying the numbers makes sense. If not, then the only kind of feedback you should give is to gray out or remove values that have zero items.

Otherwise, once users have selected a category, displaying the number of items in that category or, in the case of dynamic filters, displaying the number of items that match the selected values is useful information.

Icons are another type of element that is sometimes appended to labels. When well crafted and recognizable, they can be a very useful addition. While not necessary to explain the user’s options, icons makes it easier to process and distinguish between the options. In the screenshot below, I’ve removed the icons from the menu entries. Notice how the labels are still enough to explain the options. Everyone knows what “cars,” “motor homes,” “motorcycles” and “trucks” are.

Labels alone very often suffice but take longer to process.

However, putting icons next to labels makes it easier for the user to recognize and distinguish between the options.

Icons make it easier to process and distinguish between options. (Image:

Icons alone can cause confusion, though. Even if an icon is familiar, users might be uncertain about what it represents in a particular context.

Labels And Pictures

Labels and icons work well for familiar items. For less common ones, images are required. Consider brand names. In the screenshot below, car models are represented as plain text in the menu.

Brand names require more than just labels to be understood. (Image: Subaru)

However, I don’t know what a “Tribeca” or “Legacy” is. So, the labels are not enough to help me decide which product to explore. Labels with pictures, as shown below, are a better solution.

Labels and pictures are a better way to explain unfamiliar terms. (Image: Mazda)

When to use pictures or icons in navigation menus is an interesting question. Obviously, to explain a very specific item, such as “13-inch Macbook Pro” or “Samsung Galaxy Note 3,” nothing but an actual picture of the product will do.

Explaining a product category is not as simple. In some menus, the categories are explained with icons.

In some menus, icons are used to explain categories. (Image: Flipkart)

In other menus, those same categories are explained with pictures of actual products in those categories.

In some menus, pictures of actual products are used to explain the categories. (Image: Target)

For product categories, icons are more appropriate than pictures. A well-drawn icon makes a menu look much more professional than a recycled picture of a product.

Also, using a picture of an actual product to represent a category could raise questions among users, subconsciously. “Why does this particular product represent this category?” “Is this the best they have?” “Does the range of products center on this particular kind of item?” “If I am not looking for this kind of item, then is this not a good website for me?” These apprehensions would be reinforced if the first items they see in a category are very similar to the one they saw in the menu. An icon, by contrast, simply communicates that a category contains a certain kind of product, nothing more, nothing less.

The trick with icons, though, is that they have to be of a certain standard. An icon can easily look amateurish if not drawn well. And if it is not readily recognizable, it could even confuse users. So, while icons are better suited for product categories, if you’re not confident that you can make them professional and recognizable, then you’re better off with pictures.

Labels And Pictures And Descriptions

Sometimes, even labels and pictures are not enough to explain products. Service providers with complex solutions, such as banks, insurance brokers and ISPs, often give their products names like “50 Plus” and “Web on the Go.” A large picture of a married couple talking to a broker or a girl talking on her smartphone might not be enough to indicate the service being offered. For such products, a description of a couple of lines and a label and picture are most helpful.

Complicated products might require labels, pictures and descriptions to be understood. (Image: Naspa)

Headlines and titles of articles are a different kind of label that may or may not require accompanying images and descriptions.

Many authors suggest front-loading headlines with key information and keeping them as short as possible.

A common recommendation is to keep headlines short and to front-load them with key information. (Image: BBC)

While the headlines above are short and to the point, this style of writing has its risks and is not appropriate for every website.

The first question is whether and how to write descriptions. The BBC’s headlines are actually accompanied by descriptions, but I removed them in the picture above to isolate the headlines. The shot below restores the descriptions, which you’ll notice are basically verbose rewordings of the headlines, without substantially new information.

Descriptions should contain information not already conveyed by the headlines. (Image: BBC)

If headlines are supposed to be packed with key information, as they are above, then descriptions would not be required. If anything, users would be slowed down by reading them because they could just as well have navigated to an article after reading only the headline.

However, showing headlines alone or writing headlines in that style is not always best or even advisable. If an article is merely a short news report about an event, then a headline such as the BBC’s is a good choice. But if an article goes into more detail, then a headline, picture and description could be more effective and engaging.

The headline in the screenshot below is more catchy than informative, while the key information is delivered in the couple of lines below. Also, a picture has been added to set the tone of the article.

Labels, pictures and descriptions are often the best way to explain in-depth news articles. (Image: World)

Understanding what this article is about from the snippet is not hard. Moreover, by using the headline as an efficient attention-grabber and the descriptions to explain the article and the picture to set the tone, the entire snippet gives the author much more room not only to inform the user but also to convey the perspective of the article.

Finally, consider advice often given about headlines, which is to write them so that they are easy to understand outside of the context of the website. After all, a headline can appear in search engine results, in social media and in other articles. Some authors even go so far as to devise formulas for this purpose.

Many authors try to write headlines that are understandable beyond the original website. (Image: Baymard Institute)

Just be careful not to create redundant information when adding context to a headline.

The headline pictured above does not provide enough context because the website is about Web design, and multi-column layouts could play a role in home pages, menus, articles and more, not just in forms. So, “Form Field Usability” primarily adds context within the original website. Writing for outside context is not always necessary, though, because other people who refer to the headline will be eager to provide their own context.

Search engine developers know that users will eventually abandon them if search results do not meet the users’ expectations. So, they constantly work on increasing the relevance and success rate of their results, whether by adding rich snippets, pictures or previews or simply by improving their algorithms — that is, by adding context. Likewise, if a headline were to appear in the “recommended reading” section of another article, that article would provide the necessary context. Finally, in social media, a headline shared by a person or brand that someone follows is unlikely to be seen as ambiguous.

In Sum

Information architecture — that is, the structure and labeling of content — is the foundation of usable navigation. Designers can efficiently simplify a website’s information architecture by structuring content in a way that naturally narrows and supplements the navigation options of the target audience, as well as by explaining those options in a way that minimizes the cognitive load on users.

The recommendations given in this article can be summarized by the following two lists, broken down into “structuring content” and “labeling items.”

Structuring Content

  1. Collect and categorize meta data about the type of items you want users to navigate to.
  2. Group the meta data categories as crucial, optional or irrelevant. Crucial categories are important to all, optional categories are important to some, and irrelevant categories are important to no targeted users.
  3. Present only a single crucial category, with its values, on the first level.
  4. If the items on the second level do not exceed a certain amount, then additional categories are not necessary. Otherwise, offer the next crucial category, one by one, on each subsequent level.
  5. After exhausting all crucial categories, present a page that lists all items that match the user’s selection to that point.
  6. If the remaining items still exceed a certain amount, then present optional categories all on the same level.
  7. If the optional categories are mutually exclusive, implement them on an additional level. If the optional categories are likely to be combined, implement them as dynamic filters.

Labeling Items

  • If the label for an item is familiar, it will suffice by itself. Keep labels as short as possible, without sacrificing clarity. Present the total number of items on the home page and on the category page, but not in between. Consider icons, too, which make it easier to process and distinguish between the options.
  • If the labels are not familiar, consider adding pictures. Use icons to explain categories, but only if the icons are well drawn and recognizable. Otherwise, use pictures.
  • For complicated services and products, consider adding pictures and descriptions to the labels. The descriptions should provide genuinely new information and not just reword the labels. Also, be careful not to create redundant information when adding context to a headline.

Once you’ve simplified the architecture, users should be able to interact with the choices to their satisfaction. Thus, you will also have to design a navigation menu that accommodates the choices and that makes the interaction comfortable. The process of designing navigation menus will be discussed in part two of this series.

Further Reading

You might be interested in the following resources:

(al, il)

© Anastasios Karafillis for Smashing Magazine, 2013.

Tags: UX Design

November 19 2013


How Usability Testing Drastically Improved My Client’s App


Most designers spend too much time with their designs to be objective about them. The best thing any designer can do is to collect feedback from real users. Testing uncovers pain points and flaws in a design that are not otherwise obvious.

Recently, I had an opportunity to experience this firsthand when iterating on HelloSign, the iOS app that enables users to scan, sign and send documents from their phone using the built-in camera. Thanks to testing, the app went from four stars to a solid five stars after a redesign. We’ll look at how the app started, how we ran the tests and how the product ended up with five stars.

The Original Design

This app has four primary sections: authentication, welcome, document creation and document editing. The biggest changes we made to the app were on the authentication and welcome screens. We’ll first briefly review the original designs of these screens, as well as the document creation and editing screens, to understand how the app works.

Authentication and Welcome

The authentication and welcome screens are important moments in the user’s initial experience of the product, because we want to move the user from signing up or — if they already have an account on the HelloSign website — signing in to creating documents. The app was designed to complement the website, with the understanding that users would already be somewhat familiar with the product and would likely have a user name. Had this been designed as a standalone app, authentication would have been a secondary option, rather than a requirement.

The original versions of the sign-in, sign-up and welcome screens.

Document Creation

The document creation process consists, in essence, of a camera, with guides to position the document in the frame. In designing this process, we looked to the camera screens of the iPhone’s native Camera app and of Instagram, as well as to the framing markers found in products such as Schwab’s app for depositing checks and’s app for scanning credit cards.

Document Creation
The final document creation screens.

Document Editing

After creating a document, the user is presented with the editing screen. Here, they can modify the document by adding signatures, text, checkboxes and date stamps.

Document Editor
The final document editing screens.

User Testing

A few months after the initial version landed in the App Store, I was given an opportunity to iterate on the app. Before beginning, I decided to run a user test to better understand what in the app was effective and what could be improved.

While several user-testing services are available, such as Verify and uTest, I decided on because of the quality and value that you get for the relatively inexpensive price. Different testing services offer different benefits, features and options; review them for yourself, and select the one that best fits your goals and needs. With, you purchase a package of tests, and users will record videos as they go through whatever task you’ve assigned to them. You may also ask several follow-up questions of each user, such as, “What was the most frustrating part of your experience?” Conveniently, provides four very strong default questions that will suit most tests.

As explained by Jakob Nielsen, testing interfaces on many users is not necessary in order to identify issues; even three to five users might suffice. Because this app is for on-the-fly document signing, we ran a test that took users through a typical use case: creating, editing and sending a document. Follow-up questions were based on’s suggestions and queried users on ease of use, areas of difficulty and areas for improvement. You could ask many different questions. Once the tests were completed, after just a couple of hours, I could immediately identify several issues.

I reviewed each video twice. The first pass was merely to identify any glaring issues and to familiarize myself with the tester’s recording style. On the second pass, I paid closer attention, noting specific problems. During testing, most users won’t articulate problems they’re having, but the problems will be fairly obvious from their behavior. A problem is obvious when the user does any of the following:

  • pauses for a few seconds when trying to complete a task,
  • stumbles and has to backtrack in their steps or has to undo an action,
  • expresses audible frustration (a sigh or grumble),
  • takes a longer route to achieve a goal than expected,
  • fails entirely at a task.

While there are certainly many others, these are some of the most common indicators of a problem worth delving into. The more tests you run (with small groups), the more problems you will identify. Running a test after each new design iteration is highly valuable, if you can afford to do so. Some problems might affect only a small percentage of your user base, while others might affect the vast majority. Spend time prioritizing the problems that you identify according to your existing list of features, goals and user requests. Not every problem is worth resolving.

The Redesign

The goal of HelloSign’s redesign was to identify and fix any major problems for users. As mentioned, one can take forever to resolve every last issue; budget limitations kept our scope small.

What Did We Learn?

The tests revealed a major problem with the authentication screens. It seemed to be a stumbling block because most users weren’t clear about whether they were in the “sign up” or “sign in” state. Users often tapped back and forth between authentication states before understanding which screen was for signing up and which was for signing in.

We also discovered the following:

  • Creating pages was too repetitive a process.
    After taking each photo, the user had to tap “Add page,” take another photo and then repeat. This was tedious, and some testers remarked that the process felt unnecessarily repetitive, while others expressed audible frustration.
  • Users could not edit a date after adding one.
    One tester wanted to add a past date to a document. While a “date” object could be added to the document, it showed only the current date (i.e. of creation) and could not be edited. This was confusing and unnecessarily restrictive.
  • Markers for aligning the document during scanning needed refinement.
    Users had trouble lining up the document with the boundaries on the camera screen, with some expressing frustration and with many giving up.

Fixing Authentication

Our most substantial changes were to the authentication process, which was changed almost entirely. Dumping the user right into the sign-up screen, with only a “Sign up” button as a state indicator, proved to be confusing. During testing, most users seemed to expect this screen to let them sign in, not register. The revised screen added a step, forcing the user to explicitly select “Sign up” or “Sign in,” making it a conscious decision. An alternative solution could have been to add distinct labeling above the user name and password fields, because users typically read from top to bottom, although I was afraid that wouldn’t entirely resolve the issue.

Original vs. New Start Screen
The original (left) and revised (right) welcome screens.

After selecting one of the two options, users were brought to one of two nearly identical screens, the difference being only in the labelling of the button, “Sign up” or “Sign in”. As you can see in the revision, the layout was simplified and Google authentication was added. Despite both screens being the same, forcing the user to choose a path cleared up any confusion.

Original vs. New Sign In Screen
The original (left) and revised (right) sign-in screens.

Lastly, the home screen was heavily revised. While certainly clear before, it de-emphasized “Help” far too much and generally felt clunky and heavy-handed. The revision brought “Help” to the forefront and highlighted the “Scan” action, scanning being the primary purpose of the app.

Original versus final home screen
The original (left) and revised (right) home screens.

The Takeaway

Design is a highly iterative process, and all of the intuition in the world won’t help you to identify gaps in your product. As designers, we’re just too familiar with our own work to be able to easily spot where it fails. The only way to truly improve a design is to test it on real users and watch how they interact with it. Testing with a live app uncovered problems that led us to turn a four-star effort into a five-star product, with only a little work.

There are many ways to test a app, at an array of price points. It could be as simple as sitting down with a few friends and having each of them use your app for a few minutes, or as complex as hiring a moderator to bring in a variety of users to your office. There is also A/B testing, which can — and probably should — be done in conjunction with user testing. While user testing is great for big updates and for identifying major problems, A/B testing, which is less costly, is great for continually testing new ideas and underlying assumptions.

Remote services are inexpensive, and they structure the tests for you and free you from having to hunt down users. No matter how tight your budget or how simple the app, testing your design on real users is always worthwhile and will help you better understand where the product can be improved.

(al, ea)

© Joshua Gross for Smashing Magazine, 2013.

Tags: UX Design

November 11 2013


An E-Commerce Study: Guidelines For Better Navigation And Categories


Product findability is key to any e-commerce business — after all, if customers can’t find a product, they can’t buy it. Therefore, at Baymard Institute, we invested eight months conducting a large-scale usability research study on the product-finding experience. We set out to explore how users navigate, find and select products on e-commerce websites, using the home page and category navigation.

The one-on-one usability testing was conducted following the “think aloud” protocol, and we tested the following websites: Amazon, Best Buy, Blue Nile, Chemist Direct,, eBags, GILT, GoOutdoors, H&M, IKEA, Macy’s, Newegg, Pixmania, Pottery Barn, REI, Tesco, Toys’R’Us, The Entertainer, and Zappos. The pages and design elements that we tested include the home page, category navigation, subcategories, and product lists.

Throughout the test sessions, the subjects would repeatedly abandon websites because they were unable to find the products they were looking for. Indeed, the subjects encountered over 900 usability-related problems, despite the websites having been built for multi-million dollars. All of these usability issues have been distilled into 79 concise guidelines in a report titled “Homepage & Category Usability.” In this article, we’ll go over seven of the guidelines.

1. Don’t Make Parent Categories Shallow. (Also, Have Parent Categories.)

Issue observed: When the hierarchy of categories is just labels and headers, it breaks the expectations of users and forces them into narrower sections than they desire, preventing explorative product browsing.

Grouping subcategory options in drop-down menus and other areas is a vital part of making them both manageable and scannable; and most websites have done so. Surprisingly, though, on many of the websites tested, the top level of the drop-down categories was only text labels, not actual clickable elements. This conflicted with the expectations of the majority of the test subjects, who anticipated that the headers would be clickable.

The Pottery Barn website (larger view).

“I’d think that you can click all of it,” said a subject of Pottery Barn’s website (above left) when looking at the drop-down menu, “and that the black items will take me to a general page with all ‘Living room’ items.” Alas, upon hovering over the black heading, the mouse cursor changed to a text-selector rather than a pointing hand, and the subject concluded that it wasn’t clickable after all. The same type of shallow parent headings was found on REI’s website (above right).

Most subjects expected that these headings would be clickable and often tried clicking them, despite the cursor indicating unclickability. The subjects wanted to keep a fairly broad scope of products, in the hope of landing on a page that displays a curated set of subcategories that would assist them in selecting a more defined scope (as opposed to a page listing products). Making parent categories a part of the product hierarchy (and not just be shallow text labels) is critical in supporting explorative product browsing, so that users who haven’t fully decided what they want or who are looking for inspiration on what to purchase can dip their toes in broader categories before diving into narrowly defined ones. (left) and (right). (larger view)

On Pixmania’s website (above left), a subject tried to select the generic “Digital Cameras” category, instead of specific camera types. He didn’t want to specify a camera type subcategory yet because he was still unsure about the exact differences and hadn’t decided on his particular needs. On Amazon (above right), another subject hovered over “Shop by Department” and tried to click ”Movies, Music & Games,” which is orange when hovered over (Amazon’s hover style for links in the drop-down menu is orange and underlined), but nothing happened. She tried again before realizing that she had to choose one of the subcategories on the left.

On websites in which headings are actually selectable parent categories (i.e. part of the website’s taxonomy), the subjects often ended up relying on them for an initial overview of an entire category, and from there made informed decisions about which subcategories to select.

Larger view

This critical guideline isn’t limited to drop-down menus, but applies to any representation of a hierarchy of categories. Examples would be the categories displayed in the sidebar or in the site map of a product catalog, as well as permanently visible main navigation bar options (i.e. very top-level categories). In all of these cases, a parent category should exist and be selectable, as opposed to being a shallow text label.

2. Put The Same Subcategory Within Multiple Main Categories When Necessary.

Issue observed: When a subcategory could logically appear in multiple parent categories but appears only in one, users are often led astray.

Depending on your product catalog, you might end up with subcategories that users would expect to find in multiple parent categories. For example, users might look for a coffee table in both the “Living Room” and “Tables” sections, as well as in the “Accessories” subcategory of “Sofas.”

While the ideal solution is to craft a completely unambiguous set of top-level categories, this is not always realistic, and sometimes popular demand requires a fuzzy category to be introduced in the top-level categories. Therefore, to avoid the severe usability problem of users not being able find a subcategory where they expect (which often lead subjects to conclude that the store simply doesn’t carry the item), consider putting the subcategory in multiple parent categories. (larger view)

One subject was unsure whether she would find computer adapters in “Office” or “Computers & Tablets,” because the former describes a usage context, while the latter describes the type of product. Based on the subcategory options, she found the latter to be the correct one. However, in “Computers & Tablets” (above right), she was in doubt about whether to look in “Batteries & Power” or in the generic “Accessories.” Luckily, both led her to adapters. Also, notice how Best Buy has an “Ink & Toner” category within “Computers & Tablets,” as well as a “Printer Ink & Toner” category within “Office,” allowing users to find the category in any of the potentially matching parent categories.

Larger view

Consider the “Office” category in the Best Buy example above. All of its subcategories could be in other top-level categories, yet the “Office” section is presumably still needed to support the large portion of Best Buy’s customers who shop with a “home versus work” mindset. In these instances, featuring very important subcategories within multiple parent sections would be relevant (assuming that they semantically fit them equally well) because users will look in the one that best fits their context.

In terms of implementation, there are two main approaches to featuring the same subcategory in multiple parent categories. Our tests showed no conclusive evidence for one method over another. Each has its advantages and disadvantages:

  • You could put the subcategory in one place in the website’s taxonomy, and then simply link to that destination in the other parent categories (for example, in the drop-down menu). The user would then jump scope to the “real” category, regardless of where they access it from. This could cause confusion if the user knows they have clicked a link in a menu named “Office” but then landed in the “Electronics” section (as indicated by the breadcrumbs).
  • Alternatively, you could duplicate the categories so that each is a unique entry in the website’s hierarchy, with proper breadcrumb paths, etc. The downside here is technical complexity. Products must be tagged consistently across multiple duplicated subcategories; the search engine’s auto-suggestions must not suggest any one category more than once in a single search; and so on. Furthermore, implementing this requires canonical pages to be set up in order to avoid SEO penalties for the duplicate pages.

3. Consider Having A “What’s New” Category Or Filter.

Issue observed: Some users want to see what’s new in your store — say, to be inspired or when buying for a friend — without having to plow through previously browsed products.

“H&M is one of the websites that I check from time to time,” a test subject explained, “so I might pick ‘New Arrivals,’ like this, and see what new stuff they have.” Many subjects who had experience with a website or brand that we tested would look for a “What’s New” category. This was especially true if they cared deeply about the products and brand and already had a good idea of the product catalog and, thus, wanted to check out what had arrived since their previous visit.

Clearly, a “What’s New” filter-based category is a great way to support return visitors, so that they can easily identify what new products have arrived since their last visit. But there are other use cases for “What’s New.”

“New Arrivals” is particularly meaningful in seasonal industries, where the newness factor could be a major part of the purchasing decision.
“New Arrivals” is particularly meaningful in seasonal industries, where the newness factor could be a major part of the purchasing decision. (larger view)

In seasonal industries, such as clothing and groceries, “What’s New” helps users to see what’s currently fresh and in season. “What’s New” shouldn’t be taken too literally. For example, fresh figs aren’t exactly new because they are in stores every year, but they are new to stores around summertime, and most users would expect to find them in a “What’s New” type of section, regardless of whether they are technically new (for example, the SKU might be the same). Indeed, the category or filter shouldn’t necessarily be called “What’s New”; depending on the product type, a label such as “New Arrivals” or “In Season” might be more appropriate.

Unsure of what to buy for an eight-year-old nephew, a subject decided to open the “New” category because “kids often want the latest thing.”
Unsure of what to buy for an eight-year-old nephew, a subject decided to open the “New” category because “kids often want the latest thing.” (larger view)

Some gift-buyers want to see new releases to buy something interesting and novel. The recentness of a product also lowers the chance that the gift recipient already owns the product, which is particularly important when the buyer doesn’t know the recipient well.

Making “What’s New” a filter, rather than a separate site-wide category, is often a good idea, so that users can see new items within sections. This works well in several cases: for repeat visitors who want to check only the new items in a particular category; in seasonal industries where a user is interested only in what’s in season in a particular section, such as “Fruits”; and, last but not least, for gift-buyers who need to pick a section that’s relevant to the recipient before considering how to find the best item in that section.

“What’s New” can be integrated as an option in the filtering tools or as part of the category navigation (even if it’s actually a filter that’s presented as a subcategory). During testing, the subjects responded well to seeing it in both the filtering tools and in the category navigation of websites in seasonal industries. But they can clutter up category navigation quickly if not implemented carefully (i.e. if the options are not progressively disclosed as categories are selected). In industries in which newness isn’t as important, a filtering option would probably suffice.

4. Suggest Both Alternative And Supplementary Products On Product Pages.

Issue observed: Alternatives, substitutes, add-ons and accessories to the product that the user is currently viewing are unreasonably difficult to find without good upselling and cross-selling on the product page.

Upselling and cross-selling is great for business. And, when implemented appropriately, they can be great for usability, too. Suggesting supplementary products is great for users who are looking for add-ons or accessories to the product they are viewing, while suggesting similar products is great for users who are searching for alternatives or substitutes.

Larger view

“It’s like when you look for movies online. If I liked this one, then I might also like these. That’s pretty smart,” a subject explained when stumbling upon the “Similar Diamonds to Consider” on the product page for Blue Nile shown above. Suggesting substitute products is an effective way to keep the user on product pages that don’t match their criteria.

If the user arrives on a product page that turns out not to match their criteria, they will either give up and abandon or look for alternatives or substitutes. Luckily, most users are patient in the beginning and opt for the latter, but they will quickly grow tired if the only way to browse alternatives is to go back to the overview list of products.

This is where suggesting similar products helps. By listing alternatives and substitutes directly on the product page, the user can go directly from one product to the next. This much richer display of information about the product keeps the user engaged on the page and close to the “Add to Cart” button and checkout process. Good suggestions of similar products also help the user find alternatives or substitutes across the website’s entire product catalog, not only easing the browsing experience but also enhancing product findability (and enabling cross-sectional navigation via breadcrumbs).

Larger view

“Sometimes they have some looks or some ideas, or something,” a subject explained after scrolling to the end of the product page on Gilt shown above. While the “May We Suggest” suggestions are great, the subject had already found a dress (on the product page she was currently on) and wanted to complete her outfit with a pair of shoes to go with the dress. Unfortunately, Gilt offered only alternative products (i.e. other dresses) and not add-ons or accessories (shoes, jewelry, makeup, etc.).

While suggestions for similar products are great, they often aren’t enough. Users will often want suggestions of add-ons and accessories, too. After deciding to purchase a product, some users will want to buy additional — supplementary — products along with it, to “complete the look” or “finish the package.” A user buying a camera is likely to want a case for it. Yet finding such supplementary products is often a hassle. Even if the website has a subcategory for accessories, the user would have to go back to the product list, select the subcategory and apply the right compatibility filters (which works only for category browsing, not search).

With a list of add-ons and accessories directly on the product page, the user would easily be able to find products to supplement their purchase. Much like suggestions for similar products, suggestions for supplementary products ease the user’s browsing experience, enhance product findability, and — to a great extent — enable cross-sectional navigation. Not to mention its obvious business appeal.

Larger view

“When they say ‘Recommended for you,’ I assume they will fit,” a subject explained, referring to the camera cases displayed after adding a Nikon Coolpix pocket camera to his cart on Tesco (above). It turned out that one of the two recommended cases didn’t fit the camera.

When suggesting supplementary products, label them appropriately if compatibility is an issue in your industry. Many of the subjects assumed that any accessories suggested would be compatible with the product they were viewing or had just added to their cart. Only when the suggested products were explicitly labeled as being based on the behavior of other users (for example, “Other customers also bought”) did the subjects not assume them to be compatible. Be careful in labelling behavior-based suggestions for supplementary products as “recommended” if you can’t guarantee their compatibility with the product they are being suggested to complement.

Larger view

“Something which is similar that other customers visited or bought,” a subject mumbled to himself when glancing over the sidebar shown above. Tesco helps its users find both alternative and supplementary products by including lists of both “Others bought these alternatives” and “Customers who bought this also bought” in the sidebar of its product pages. (And unlike on its shopping-cart page, Tesco gets the labeling right here by clearly indicating that the lists are based on the behavior of other customers.)

Given that users want suggestions for both similar and supplementary products, implementing both on product pages is recommended. The lists don’t have to be located near each other, although they could be, as long as they aren’t mixed. The subjects responded poorly when the criteria or theme of the product suggestions was not clear. Therefore, keep suggestions for similar products and supplementary products in distinct groups, but be sure to have both.

While basing these suggestions on the behavior of other users can be effective, exercise care. Tesco’s suggestions for supplementary products consisted entirely of memory cards, even though many other relevant add-ons and accessories are obvious, such as cases, lenses and batteries. So, either manually curate the suggestions or have the system generate them based on a broad range of factors, so that a diverse set of complementary product types is shown.

5. List “Recently Viewed Items.”

Issue observed: Refinding a previously visited product becomes needlessly complex when the user has to rely on the browser’s native “Back” button or has to renavigate the categories or reuse search.

During testing, subjects often wanted to return to a previously visited item — sometimes to check whether certain features of the previous item were compatible with the new one, other times to compare two products before deciding on one to purchase, and still other times to return to a certain product scope from where they could use the breadcrumbs to climb back up the category hierarchy.

Whatever the reason, the subjects simply wanted to refind a previously viewed product. Yet, on websites without a “Recently viewed items” feature, the only ways to do this were through repeated clicking of the browser’s “Back” button (an option that occurred only to some subjects) or by searching for it or plowing through the product categories once again.

Larger view

When looking for a camera case on Pixmania (above), this subject realized that he needed the name of the camera he chose. He went back to the product page using the browser’s “Back” button, then reopened the drop-down menu, then opened the “Camera Cases” subcategory in a new tab. A list of “Recently viewed items” would have greatly simplified this process.

A list of “Recently viewed items” typically consists of a row of products that the user has previously visited. It is a kind of history-based breadcrumb trail (except that it typically includes only products, not categories or other pages). The list tends to be located towards the bottom of the product page — sometimes even in the footer — but is sometimes given more prominence in a sidebar.

However, the list should be available on all pages of the website (not just the product page), because returning to a previously visited item would be just as welcomed by users who find themselves lost on a category page. The footer has the benefit of being out of the way most of the time; and then when subjects wanted to change scope or refind an item, most scrolled to the bottom of the page, likely looking for cross-sectional navigational such as “Related Items,” and thus discovering the “Recently viewed items” list.

Larger view

On Tesco (above), refinding a previously visited product is made easy by the “Items you have recently viewed” list, which is integrated in the footer on all category and product pages. Compare how easy it was for this subject to check the camera’s dimensions with the previous Pixmania example.

Another location for the “Recently viewed items” list is the sidebar, as seen here on Crate & Barrel. (larger view)

With this list readily available throughout the website, users are assured that refinding products will be easy, and they are more likely to explore other items because they know that returning to a favorite won’t be a hassle. Combined with breadcrumbs, users enjoy a powerful combination that facilitates both history-based cross-sectional navigation and section jumping. Show “Recently viewed items” to everyone, then, without requiring users to sign in; the list should be session-based, functioning much like a shopping cart.

Because the list is automatically generated for users, a couple of privacy features are worth considering. While the vast majority of users will enjoy seeing “Recently viewed items,” a few will want to hide the items because they don’t want others to know or because they’re on a public computer. In such cases, consider two features: “Clear all” and “Disable list.”

6. Create Dedicated Pages That List Compatible Products.

Issue observed: Users have a difficult time finding compatible products and verifying their compatibility when the website doesn’t explicitly state their compatibility or link to the corresponding products.

Finding a spare adapter for your laptop or buying a camera and matching case might sound like trivial tasks, but during testing, it turned out to be extremely difficult for subjects, who had a completion rate of only 35%. This means that 65% had to give up or, worse, ended up purchasing a product that they believed was compatible but was, in fact, not.

Larger view

The subject above opened the camera page in a new tab, but even with the camera’s dimensions close at hand, finding a matching case proved to be tiresome, as he still had to open the page for the camera case, go to the specifications, locate the dimensions, compare it to the camera’s, and repeat this for every single case. After a few attempts he gave up, like 65% of the subjects.

Finding compatibility-dependent accessories can be difficult, which is why you should always suggest both alternative and supplementary products on a product page (see guideline 5), as well as list “Recently viewed items” (guideline 6). However, if the majority of accessories in your industry are strictly compatible with certain other products (regardless of whether you sell those other products), then consider also offering whole pages listing compatible products. Technology industries are ideal for this (due to the technical dependency between products), whereas it would be overkill for a clothing store (all clothes “function” together — the only “compatibility” factor is taste).

Larger view

“I’ll pick Nikon now — originally, I didn’t necessarily want one from Nikon — but I’ll do it now hoping to find an original camera bag so I know it will fit, because I’m not really keen on going back to find my camera dimensions and then compare to the bags,” a test subject explained. “So, unless it’s insanely expensive, I’ll probably take an original.” Subjects often gave up finding a compatible case that they liked and simply tried to find anything that would fit their camera. Using brand filters was often a part of that strategy, although it led some novice photographers to purchase incompatible cases, because they assumed that most Nikon cases would fit most Nikon cameras.

When dedicating whole pages to compatible products, then the page for, say, the “Nikon D7000 camera” would list all compatible accessories, such as batteries, cases and lenses. Going a step further, the page could even filter by product type, so that users can view “compatible ‘camera cases’ for ‘Nikon D7000’.” This enables users to navigate the product catalog vertically and to find (typically high-profit) accessories, instilling confidence in the accessories’ compatibility.

Determining compatibility across a catalog is a major undertaking, but with intelligent queries for each compatibility-dependent category, a lot of the work can be automated. The benefits of determining such compatibility are many. Besides the already mentioned ability to browse vertically across categories, it enables you to create powerful filters. Imagine one filter in the “Laptop Adapters & Chargers” category that allows the user to enter their computer’s model and see compatible chargers. Furthermore, it is also great for search engine optimization, because these compatibility lists can be presented as permanent pages, giving you several highly targeted and unique landing pages for each product, such as “Lenses for Nikon D7000,” “Laptop Chargers & Adapters for MacBook Pro” and “Covers for Kindle Paperwhite.”

When seeing these camera bags being cross-sold in their shopping cart, the subject above was disappointed by their looks (all black nylon). (larger view)

Had Pixmania established compatibility across its catalog, it could have linked to a list of compatible accessories — “See all 8 compatible cases for Canon PowerShot A2300” — at the end of this cross-selling section, providing a direct path to a complete overview of relevant cases.

Establishing compatibility across a catalog helps you to avoid plainly wrong matches.
Establishing compatibility across a catalog helps you to avoid plainly wrong matches. (larger view)

In Tesco’s shopping cart above, the subject tried to find a matching case for the camera she had just chosen, but she completely lost faith in the website upon seeing few related accessories and a lot of irrelevant recommendations, including a saxophone!

Compatibility-based pages should be cross-linked with the original product page, as well as with any “Compatible With” lists on the product pages of compatible items. Such pages could also appear in a user’s shopping cart and be included in the filters of all relevant accessory categories across the website.

Besides being great for cross-selling and SEO, dedicated pages of compatible products can be mined for data to create filters and to improve cross-selling recommendations. They would enable you to avoid suggesting incompatible products, which is critical because most users will assume that any product being suggested fits.

Larger view

“It fits ‘X60,’ but that’s not mine. I have an X61,” a subject said, referring to the top result above. He continued, “It fits all in the X60 series. Does that mean my X61 as well? I would go to Lenovo’s website and find out.” Confusion about which models are in a “series” was common, because a series’ name can be confused with a particular model’s name.

Just showing a list of compatible products for each model doesn’t always cut it because some models are organized into series as well. In the Newegg example just above, the “Lenovo ThinkPad X61s” model is part of the “Lenovo X60 series.” This hierarchy should be reflected in the dedicated pages of compatible products as well, because some test subjects mixed up a series’ name with a model’s name. Pages for compatible products in a series should link to all models in that series to clear up any doubts the user might have.

Lastly, dedicated pages of compatible products can still be meaningful even if the website doesn’t carry all of the products. For example, an electronics store that doesn’t sell Sony digital cameras could still have pages of compatible products for Sony cameras to help customers find accessories that it does sell. The same goes for websites that don’t even sell products from a given industry; for example, a website that sells apparels or bags but not laptops or electronics might still want to list compatible products so that users can browse only the bags that fit their particular laptop.

7. Always Link Contextual Images Directly To The Products Shown.

Issue observed: Users quickly grow frustrated when they spot a product in a contextual image but can’t navigate to it.

“I want this. What do I do?… I want this one,” one subject said, laughing out of despair while pointing and clicking at a coffee table shown in a contextual image on IKEA. While inspirational images can raise the aesthetic appeal of an e-commerce website and serve as an important vertical style-based navigation path, not directly linking to the products depicted in contextual images will frustrate users to no end.

During testing, the subjects were dumbfounded that a website didn’t simply link directly to all products depicted and that they had to hunt them down to learn more or to purchase them. This lowered their perception of the website, and some took it as a sign that the owners clearly hadn’t used their own website.

Larger view

“I don’t know how I found this cushions category. I wonder why there wasn’t a cushions category along with all the sofa options up there. But then I saw this image of a cushion down the page and thought that maybe I’m on the right track.” One subject said this while looking for cushions in the sofa category on IKEA’s website. As he scrolled down the “Sofas” subcategory page, he spotted an image containing a cushion, and while the image was actually cross-selling sofa covers, the “Cushions” category was linked to it as well.

Images tend to draw a lot of attention, and when users get stuck in first attempting to find a product, they tend to scan the page very narrowly for anything that looks like a path to the product they want. Therefore, contextual images should always link to the products depicted, even if the image is meant merely as inspiration for one of the products being shown. Users will still notice the other products in the image, especially if they are actively scanning for one of those product types. Even if the purpose of the image isn’t to promote that particular product, users will become frustrated if they can see the product but not access its page.

Larger view

Above, a subject saw a table that he wanted in the thematic “Seating Solutions” image, so he clicked it, but nothing happened. He then tried the “Save to list” button, assuming it would save all of the products shown and that he could then simply remove the other products. But that didn’t happen either. “Nooo… Arrgghhh, it only added the sofa. I would like to get the sofa table,” he said, hovering over and right-clicking the table in the image. He laughed in despair as he continued, “I want this. What do I do? I want this one [pointing at the table]. I expected it would save all of them when I used the button, but it only saved the sofa.” After searching for the table, the subject ended up abandoning the website.

If an item is not being sold, ideally it shouldn’t be depicted at all. In practice, this is easier said than done because contextual images sometimes contain products that were available when the photograph was taken but that now are not (or are not in all distribution channels — for example, a store might sell some products offline only, or an international website might ship certain products to certain regions). Discarding or reshooting an entire scene of multiple products is likely unfeasible if just one or two of the products are no longer available.

In such cases, replace the product link with a description, rather than just remove it entirely (as seen in the IKEA example above). The description could be as simple as “Discontinued,” “Available only in store” or “Not available in US store” — the vital part is to indicate that the user may not purchase the item. If the item has not been discontinued but is simply unavailable for purchase in a particular channel or region (as with IKEA above), then the description can point very persistent customers in the right direction. Better yet, if similar products are available, consider linking to them or to their categories.

Exploring how users navigate.
Larger view

In the image above on the left, one subject found the sofa in the header image interesting and clicked it to investigate further, only to be confused when presented with a list of products but not that particular sofa. In the image on the right, another subject was on the product page for a sofa. Upon inspecting the sofa images, she found that she very much liked the coffee table as well and wanted to know more about it. She looked around for links, but there weren’t any, not even in the cross-selling section further down the page.

Another way to solve this challenge is to mark up contextual images with direct links to the products being depicted, as seen above on Crate & Barrel, where clicking the “+” icon will open a quick preview of the pinned product.Another way to solve this challenge is to mark up contextual images with direct links to the products being depicted, as seen above on Crate & Barrel, where clicking the “+” icon will open a quick preview of the pinned product. (larger view)

Direct links are needed not only for contextual images. Header images and even some images on product pages would benefit from having direct links to the items being shown. For images on product pages, any products that are clearly depicted could be linked to either right below the image, by having a dedicated “get the look” cross-selling list, or at the very least in a generic cross-selling section on the product page. One could even experiment with tagging the image so that users can actually click right on the products they are interested in.

If They Can’t Find It, They Can’t Buy It.

In a time when more and more customers are accessing e-commerce websites through search engines and social media links that send them deep into a website’s hierarchy, enabling users to infer their current position in the hierarchy, to go to the generic parent category and to find related products is critical. Even customers who use on-site search will depend on the website’s taxonomy of categories to infer the available range of products.

No matter how much time you spend on the aesthetics, the product images and the optimization of landing pages, the customer’s overall experience will falter if the foundational e-commerce elements, such as the taxonomy of categories, aren’t solid.

Designing user-friendly category-based navigation is no easy task. It requires a solid information architecture, systematic labelling, a logical hierarchy, curated subcategory pages and a balanced home page design. Obviously, all of this can’t be covered in an article like this, but the seven guidelines we’ve looked at are low-hanging fruit; by following them, you can quickly improve the category navigation on a typical e-commerce website:

  1. Don’t make parent categories shallow.
  2. Put the same subcategory within multiple main categories when necessary.
  3. Consider having a “What’s New” category or filter.
  4. Suggest both alternative and supplementary products on product pages.
  5. List “Recently Viewed Items.”
  6. Create dedicated pages that list compatible products.
  7. Always link contextual images directly to the products shown.

One last note. During testing, it became clear that loosely executed categories can have more devastating consequences than “just” immediate abandonment of the website — it could permanently damage the brand. When the subjects couldn’t find a particular product type, they would often conclude that the website didn’t carry such items. Such fundamental misunderstanding leads not only to an immediate loss of a sale, but to future losses because customers won’t visit a store that they assume does not carry the type of product they are looking for.

(al, il)

Learn more guidelines about category and navigation usability in the (paid) report “Homepage & Category Usability,” by the author of this article.

© Christian Holst for Smashing Magazine, 2013.

Tags: UX Design

October 28 2013


Introduction to A/B & Multivariate Testing in Web Design

Advertise here with BSA

Anyone who is familiar with increasing website conversions has probably heard about A/B testing. It is a way for webmasters to display 2 variants of the same page out to their audience at random, and then gauge results based on user performance. A/B testing(or split testing) is very popular on sites where users are more interactive on the page. Think about projects like social networks, SaaS products, e-commerce shops, business portfolios, etc.

split testing ab dribbble shot philip clark

There is also a higher stage of this process called multivariate testing. Here you can include more than just 2 options which may range out to A/B/C/D+ testing. The concepts are all similar but you’ll need to run tests for longer in order to acquire accurate results. In this guide I want to introduce the idea of split testing and how webmasters or project directors can get started.

What to be Testing?

This is a common first question and it’s completely reasonable to ask. You want to think about areas on your webpage, newsletter, or other digital interface which could be improved for an easier user performance. Blog headlines, sidebar advertisements, main navigation links, anything which should be commonly accessed by users is fair game.

The goal is to see which of your 2 designs performs best in a general 50/50 split of your traffic. You want to determine the average percentage of users who click your headlines more frequently, or click on the quicker, or something like this. It’s all about “fixing” your website’s first impression to get users more interactive on the areas you want them to be interacting with.

Online Tools

I would recommend a list of tools, but many of them do charge money for a full account. SaaS products have become more relevant and it is often easier for webmasters to pay money to a 3rd party service and have them manage the backend.

If you want a free product then definitely try out Google Website Optimizer. Their old URL has gone down and the service is now combined into Google Analytics. But it is completely free to use and directly ties into your Analytics traffic results. This is the best way for a new tester to dive right into the process.

visual website optimizer vwo homepage layout screenshot

But when you know you want something more detailed, I would highly recommend Visual Website Optimizer. You can signup for a free plan which has some pretty relaxed limits. It does include a majority of the paid plan features – however you are limited to testing only 1,000 visitors per month. For high-traffic websites it’ll take a lot longer to obtain useful results. But on low-traffic websites this is a great way to start manipulating your interface and seeing how it affects conversion rates.

Newsletter Designs

Not every website needs to or should run a newsletter. But for larger communities it is the perfect way to keep people visiting over time. You can include new items for sale, free downloads, or recent blog posts. And it is a great way to check out the response from visitors onto your internal landing page(s).

A/B testing for newsletter designs is much more common than you might think. It is somewhat easier than testing a website, and it can be handled by many e-mail delivery services. Both Campaign Monitor and MailChimp offer split tests as a part of their system. You can build two distinct email layouts and have them divided into a rough 50/50 split out to your subscribers.

email newsletter ab testing split multivariate mailchimp diagram

Obviously your goal for testing here is the same as anywhere else. How can you redesign buttons, links, headers, and content to engage visitors into clicking through to your website? Once subscribers can flesh out your newsletter they will be more likely to actually read what it says. Maybe one of your links or headlines gets somebody curious and they go through your entire landing page.

Web copy is just as powerful as small design changes. Many case studies online talk about this minor difference which can have a tremendous impact on your conversion rates. Don’t try to assume minor updates are silly and will have no effect, because you may be surprised when you see the results!

Testing in Phases

I want to add that you can’t give up too easily on this stuff. Waiting around for 5,000 visitors may not be enough of an audience to completely gauge how you changes are working. Don’t be too steadfast to move onto your next idea without allowing enough time to pass.

The best way to manage your A/B testing is in phases of updates. Either look for small wins through single-element updates, or try updating a lot on the page and see which version of the layout works best. These two scenarios are both helpful and they can both be run using an A and B option. But what you are testing for will play a huge role in the process.

android ux ui testing mobile app screenshot dribbble

If you feel more comfortable doing minor changes between design iterations this is another solution. Just be sure that you leave time for enough visitors to check out the page and give you some helpful feedback. Writing down a full list of ideas can be a great start towards figuring out what you hope to test, and how these tests may improve the percentage of user interaction.

Related Websites

There are some really cool blogs online which discuss the ideas of A/B testing. Some include tips while others focus on case studies and real impactful results. Check out some of these links if you want to learn more.


There are plenty of similar online articles which delve into the A/B testing process. I would greatly recommend looking for case study articles in Google. These will provide context for what other webmasters have tested, and what the results were. It may actually save you time in the long run when brainstorming ideas that you should be checking out on your website. A/B split testing most likely isn’t needed for every website, but when understood properly it can provide value into any creative project.

Advertise here with BSA

October 23 2013


Smart Transitions In User Experience Design


Some websites outperform others, whether in their content, usability, design, features, etc. Details of interaction design and animation make a fundamental difference on modern websites. We’ll share some lessons drawn from various models and analyze why these simple patterns work so well.

When we design digital products, we often use design applications such as Photoshop and Sketch. Most people who have been in the business for a few years obviously know that design is more than just about visual presentation. Still, many continue to create static designs. Steve Jobs said this about design:

“It’s not just what it looks like and feels like. Design is how it works.

Our experience and impression of a product are shaped by a combination of factors, with interaction playing a fundamental role. No longer can we think of user interfaces as static designs and add the magic of interaction later on. Instead, we need to embrace the interactive nature of the Web from the very beginning and think of it as natural constituent.

Let’s look at some examples in which smart interaction, defined by subtle animation, gently improves the user experience.

Animated Scrolling

The blessing and the curse of the Web are hyperlinks. When you click on a link, it could take you anywhere, from a product page to the website of the creepy old puppet store down the street. The result is a loss of context.

One of the great things about the user experience of books is the linearity. Every chapter in a book builds on the last. You must read chapter one in a primer on economics to understand chapter two. When you skip a chapter, you are aware that you might miss something and, thus, lack some knowledge about the subsequent content. On the Web, and especially on long websites, this often happens subconsciously. By adding a scrolling animation, we can fix that:

Compare that to this:

Compare the default behavior of “name” anchor links with the animated behavior. Skipping content is not an unconscious action anymore; it’s a decision. In fact, Hope Lies at 24 Frames Per Second has a menu button for its mobile view that sends you to the top of the page, without any animation. It took me more than a minute to figure out what actually happened.

Takeaway: Abrupt changes in an interface are hard for users to process. Don’t leave them in the dark; always show what’s happening.

Stateful Toggle

As we saw in the last example, transitions help users understand the pace and flow of an interface. Nothing feels more unnatural than a sudden change, because sudden changes just don’t exist in the real world. Let’s look at another example: toggle menus. Users associate the “plus” symbol with the action of adding content or expanding an element. By rotating it by 45°, the plus becomes a cross, an interface element widely understood to mean “close”:

This simple transition completely changes the meaning of the icon. Such a small detail means the difference between having to guess what will happen next and knowing what the icon means in either state. That toggle is pretty user-friendly, if you ask me. Also, note that the plus sign always rotates in the same direction as the content, reinforcing the flow of information.

Takeaway: Make your website element understandable in each state.

Collapsed Forms And Comments

The comment forms on many blogs and news websites are not the happiest-looking elements. Why? Well, most of them are not exactly friendly, right? When you are ready to post a comment, you just want to start typing the comment itself and nothing else. Instead, a typical form asks you all kinds of other stuff first. It’s annoying.

To motivate people to comment more, we can collapse the form and show only the most crucial element: the comment field. When the user clicks on the field, you can expand the form accordingly. A real-world example of this progressive disclosure can be found on the New York Times’ beta website:

You could take this even further by setting the cursor’s focus to the comment field when the form expands. This approach has a problem, though: A key principle of interaction design is that an action should always happen close to where the interaction occurs (near the locus of attention). We could go one step further, then, and animate the comment field to orient the user:

You could even pin the comment field to the top, expand it accordingly and display additional fields below it.

As you can see, this reduces clutter and makes the comment form more inviting. But what about collapsing all of the previous comments, too?

By collapsing the comments, we get the scroll bar to represent the length of the article itself, instead of the entire page. A common practice is to automatically load comments when the user reaches the bottom of a page. We should avoid forcing the user to click unless there is a really good reason to.

Takeaway: Progressively disclose in order to reduce UI components to their essence. Reveal features as the user needs them.

Pull To Refresh

One of the most exciting interactions to emerge shortly after the introduction of the iPhone was “pull to refresh,” pioneered by Loren Brichter. It allows the user to update scrollable reverse-chronological content. You can see this concept in action in Twitter’s app. Once you’ve scrolled to the top of the stream of tweets, scroll a little further to refresh the stream.

Why does this work so well? Before pull to refresh existed, users had to hit the refresh button in their browser to load more content. By connecting the user’s desire of finding more content with the action of refreshing, the need for an explicit action became obsolete.

Takeaway: By connecting intent with action, the experience becomes more seamless.

Sticky Labels

Sticky labels are another subtle yet useful combination of a user-interface component and a meaningful transition. Check out Edenspiekermann’s use of this technique in its portfolio.

The project label scrolls along with the content, thus providing context for the images on the right, until the next project appears. This behavior is similar to that of the address book in iOS and is especially helpful for providing context in long sections. The transition offers both improved orientation and smooth context-based descriptions.

Takeaway: Use sticky labels for long sections in which descriptions or titles add valuable information to content that doesn’t fit in the viewport.

Affordance Transition

The concept of affordance derives from cognitive psychology and refers to particular characteristics of an object that guide the viewer.

In the context of user-interface design, the usability glossary (PDF) of the EU’s website defines it as follows:

“An affordance is a desirable property of a user interface — software which naturally leads people to take the correct steps to accomplish their goals.”

Ridges are often used to enhance affordance. Ridges around a button suggest that the button can be manipulated. This UX technique was widely popularized by the camera app in iOS.


iOS 6’s lock screen featured ripples around the camera icon, suggesting draggability. Apple removed it in iOS 7, apparently because users got accustomed to it, making the icon look more like a standalone button now. What happens is still the same, though: When you drag the button, the lock screen bounces up, revealing the camera underneath. This is a great technique to point users to features in an interface.

Takeaway: Give elements a high affordance to point users to features in an interface.

Context-Based Hiding

Google Chrome on iOS has had context-based hiding since it launched. This is what it looks like:

The basic idea is that the browser chrome and navigation controls hide automatically once the user scrolls down. As soon as the user scrolls up again, the controls reappear. This approach both enhances the contextual experience (focusing on the content itself) and increases screen space. The latter is, of course, particularly important on mobile devices.

The underlying assumption is that users will flow with the content that they’re consuming. As soon as they stop the flow, a change of context is likely required; thus, the navigation controls reappear. While this technique saves screen space, check whether the assumption holds up in your use case.

iOS takes this a step further. When you reach the bottom of a page, the controls expand again. It’s a good example of dynamically incorporating the needs of the user in an interface.

Takeaway: Use context-based hiding to enhance the user’s focus and save screen space.

Focus Transition

About a week ago, Nikita Vasilyev, a Toronto-based UI designer, came up with a pretty neat idea. He developed a script that animates focused elements. While still experimental, the concept is pretty interesting. Have a look at his video below. (And please put your earphones on — the music is epic.)

When navigating by keyboard, the user is often not clear on where the focus has moved to upon pressing the Tab key. Animation points them to the right spot on the page. The transition is subtle but has a big impact on orienting the user.

Takeaway: Orient the user, regardless of how they navigate.


These are only a few examples, among many others out there. The point is not to show the latest and fanciest interaction techniques, but rather to highlight how small interaction details can significantly improve the user experience.

If we are to design better digital products, then we need to challenge our current beliefs and see how interaction patterns can potentially ease the user’s life. I’m not saying we should reinvent the wheel, but it would be pretty naive to stop exploring. So, get out of your comfort zone. Keep exploring and testing.

If you like this article, you can follow me on Twitter, or join me for a bar of Swiss chocolate in Switzerland.

Which transition patterns have you found especially useful in your projects?

Further Reading

(al, ea)

© Adrian Zumbrunnen for Smashing Magazine, 2013.

Tags: UX Design

October 14 2013


Smart, Effective Strategies To Design Marketing Campaigns


Ever since I’ve been involved in the Web, I’ve been fascinated by little things that make a big impact. It’s one of the reasons why I started collecting and blogging about these details, which could in some way help others grow an audience. One recurring topic early on was launch and landing pages and the strategies that creators use to expand the reach of their websites, which led to a Smashing Magazine post titled “Elements of a Viral Launch Page.”

Another interesting recurring topic is the campaign page, which you’ll find either embedded in an existing website (Foursquare’s Game of Cones and Dropbox’s Great Space Race) or as a completely independent website (Iubenda’s Orwell Test) that redirects traffic back to the source. Such campaigns have varying goals, such as to drive traffic, to raise awareness or simply to get a single person’s attention.

In this post, you’ll learn what to look out for when creating your own small campaign and how these elements fit together in existing campaigns around the Web.

What Do We Mean By “Campaign”?

The word “campaign” is traditionally defined as a military or political operation that is confined to a particular area or involves a specific type of fighting and that is intended to achieve a particular goal. That’s exactly what we mean here: A campaign is a sustained effort that is slightly beyond your day-to-day business but still connected to it in some way.

Interestingly, a campaign can be carried out with little effort, if you closely monitor what is going on around you and your brand. In the wake of PRISM, we recently ran a small campaign called Orwell Test, trying to redirect some of the attention to Iubenda, an app that generates privacy policies.

This post contains my observations and a framework for coming up with new campaigns, which you can integrate in your own marketing activities. Thus, it will include subjective opinion to complete the picture.

9 Things To Look Out For

After the Orwell Test campaign, I have been thinking about some of the reasons why it worked and how to come up with even better ways to get the word out about our startup. Obviously, the main driver here was the timing with PRISM and people’s emotional response to its outrageous reach. (Anger spreads faster and wider than joy on social networks, according to a scientific study on Weibo.)


The campaign asked a simple question: Is your company any better than the governments that collect data without informing people? This way, we made a connection with what is happening right now. We made a connection to something that people are very upset about (we’ll discuss why that’s important in the section “A Little Viral Theory” near the end), and we challenged them to think about their own behavior.

So, what things can you take advantage of, and what are some great campaigns that do?

The Elements

  • Relevance
    Tell a story. What is happening now?
  • Cause
    Contribute to a cause.
  • Popular issue
    Geek out on a popular or niche topic.
  • Competition
    Host a competition.
  • Stats, stats, stats
    Infographics, shareable data, etc.
  • Content
  • Partnerships
  • Targeting someone or something
  • Creativity and innovation
  • Related fields
    Branch out into something related.

This list is not exhaustive, but it’s a good framework to start with, and the examples below will provide some perspective. To understand what your campaign should look like and to make it perfect, you will have to do a bit more homework and incorporate a few additional elements: analyze your target users, set a goal for the campaign, and add viral elements.

Other Key Elements

  • Persona
    Who are your target users? Build a persona.
  • Goal
    What goal would you like to achieve?
  • Virality
    Understand the viral loop and what it is caused by to maximize your reach. (Again, we’ll cover this in the “A Little Viral Theory” section.)

Now we’re ready to look at some examples.

1. Relevance

One of the easiest things to leverage is relevance. Something might be happening out there that you can add your own perspective to. The more relevant or innovative your contribution, the more attention you will be able to draw.

Orwell Test was born out of pure timing and our eagerness to work on something that people might appreciate. Another project that did an interesting job of capturing attention because of its content and name recognition was Prism Break, which was started by a Japanese developer and designer and posted in Reddit’s technology section and which has since taken on a life of its own.

Responding to short-lived events — for example, via Twitter — also has potential.



When Adobe was considering discontinuing Fireworks (which it did), Sketch invited people to look at its alternative, which it was offering at a 50% discount. Sketch’s tweet resulted in 33 favorites and 299 retweets!



The same thing happened with Tweetbot, which discounted its flagship app when Twitter killed off some versions of its TweetDeck app. Above is a humorous tweet by Paul Haddad, a member of the Tweetbot team. The tweet got 420 retweets and 152 favorites!

2. Cause

Another approach is to announce your support of a recurring event or cause.


Movember is a movement in which men grow moustaches in November to raise awareness about prostate cancer and to fund organizations that fight the disease. The movement is important to New Relic, which decided to donate $10 to the cause with every registration. New Relic ended up donating around $55,000 to the Movember Foundation and the Susan G. Komen foundation.

If we do the math, that’s 5500 new customers, if all of the registrations were legitimate. The campaign had a single landing page at, organized into various sections. (It has since been removed, unfortunately, but might come back in a new version. Do visit the 404 page there, though, a great example of an actionable landing page.)



The campaign’s home was a one-pager that explained the concept of Movember and why New Relic is supporting it (the Movember Foundation is one of its clients). Visitors were invited to sign up below each of those sections (“Create your FREE account!”).


To remind people to share, the website also asked visitors to consider spreading the word below the different sections. The page’s header contained the usual Facebook, Google+ and Twitter buttons.


The last section offered the visitor the alternative of supporting a female-oriented cause. Notice how the copy taps into the altruism theme discussed earlier. It’s hard not to participate when you can support by “just sharing.”

3. Popular Issue

Being relevant could also mean building the campaign on something very popular that people identify with (a form of relevance). Below are some campaigns based on very popular issues.

Crowdfunding is all the rage these days (deservedly so), and all aspects of it are being discussed in blogs and social media and even traditional media. Nintendo played with this concept for the launch of its Game & Wario game for the Wii U.



With Crowdfarter, Nintendo built its very own Wario-themed Kickstarter-like campaign, featuring “executive updates” by Wario himself. Visitors could preorder the game, and the page explained everything they needed to know about the upcoming release.

The pages were structured to obviously reflect Kickstarter (and similar websites): video at the top, social elements along the right, and details just below.

The most important part was that the goals and donation element were connected to the sharing elements. That is, visitors could “buy” into the campaign by sharing in social media.



When the campaign had been shared a certain number of times, Wario badges would be released for downloading. The last prize was a video of the gameplay.



Nike did something similar by tapping into a popular current topic. It built and released its Makers app in July 2013. Visitors could download the app and educate themselves on how to work with materials in an environmentally sustainable way.

Quite a few sharing elements were built into this campaign. The campaign lives at its own domain,, not a subdomain of The website was built with Tumblr to appeal to people who love the platform. It also includes a video explaining how this campaign could turn into a full-blown movement. (By the way, check out Tomasz Tunguz’s post on how to start a movement for your product.)

Marauders Map


The makers of Circle, a local social network app, created a small campaign website based on a Harry Potter-style marauders map to explain what its service does, which is to track nearby friends. (The marauders map was apparently the result of a Circle hackathon.)

4. Competition

People love to compete. And people love the chance to win something, however improbable the chance of actually winning might be. A competition is always an interesting basis for a campaign.

The Great Space Race


Dropbox understands the viral loop better than anyone. When it started out, it promised free additional storage for users who referred their friends as well as for the friends themselves. This not only incentivized existing users to share, but also enticed potential users to sign up because they would clearly be getting a better deal than anyone else. Earlier this year, Dropbox decided to run the Great Space Race, which would give free Dropbox space to everyone at a student’s school (more precisely, an extra 3 GB to the student for two years, plus the additional space their school had earned).

The campaign hinged on two elements: acquiring users and activating those users. Every invitation would earn two points towards free space for the student’s school, and new users would unlock four more points by completing the “Get Started on Dropbox” guide. The points would be converted into free space for everyone at the school for two years (to a maximum of 25 GB).


Right below the simple instructions appeared the school rankings for the student’s own country, and below that the international rankings, so that the student could see where they fit in and how far they had to go. (The competition is over, but the page is still available.)

Game of Cones


Foursquare built a campaign named Game of Cones, launched around the time when the “Red Wedding” episode of Game of Thrones aired, which dominated social media for a while. Foursquare’s competition was a battle in which the ice cream shop with the most check-ins in New York City or San Francisco would win the Iron Cone.

Foursquare combined a competition with a very popular phenomenon, Game of Thrones, working with HBO to bring this campaign to its users. The sharing aspect was a combination of rooting for the various “houses” — for example, Bi-Rite and Smitten — and sharing via the hash tag #SummerIsComing.


Users were incentivized to share by “choosing their allegiance.”


Getaround Racer


Getaround repurposed a racing game into a competition for its brand in which users could “drive with style, like 007.” The winner spent a day in an Aston Martin car, with a custom-tailored suit, had a five-star dinner and spent the night in a luxurious hotel.


Users could participate in the competition by sharing their racing time in the game on Facebook.

5. Infographics, Compilations And POV

An infographic is a great campaign tool, as we all know. It compiles a few interesting facts into an easily digestible (and, thus, shareable) format. One of my all-time favorites is the Web Trend Map by iA.


iA has become well known for these infographics, repurposing metro maps into what could even be considered as posters.

Time Machine


Foursquare’s Time Machine was an interesting partnership (with Samsung’s Galaxy S4) and a good example of emotional design. The time machine took users back in time in an interactive, visual way, showing what they’ve been up to and the places they’ve visited.

If the user changed cities, the machine would take them there as well, changing locations with a small spaceship animation.


After the user had completed and seen their own history, they could check out some interesting new places around them. To finish off, they could see a colorful infographic of their own journey, which they could easily share.


In a post titled “Why Your Marketing Campaign Sucks” on TechCrunch, Mark Suster singles out Flurry as an exceptional campaign marketer, and he introduces the term “point-of-view marketing,” which a campaign creator needs to follow in order to succeed. The gist is that it’s not all about you, but rather about why the campaign is newsworthy.


Flurry’s campaign was a simple blog post, “Christmas 2012 Shatters More Smart Device and App Download Records.” As Suster puts it:

“Flurry doesn’t talk about all of their analytics features and functions. They offer a point-of-view about their market. And they back it up with data. And journalists eat that shit up because it has all that they’re looking for: facts, charts, an angle, news, something that their readers care about, etc.”

The takeaway here is, are you painting the big picture, or just talking about yourself?

6. Content

Words. Images. Content. These form an integral subset of all of the other categories we’re talking about. All of them matter, the color choices, contrast, symmetry, balance. Yet they stand as a category of their own.

Justin Jackson perfectly captured the idea that content can be the message in his piece “This Is a Web Page.” He opens with the heart of the matter:

“There’s not much here. Just words.”

Those words garnered over 200,000 page views in just two weeks.

7. Partnership

We’ve seen partnership campaigns before. Here’s one GE pulled off on BuzzFeed.

Flight Mode


GE partnered with BuzzFeed to promote GE Aviation at the Paris Air Show. With BuzzFeed, GE created sponsored content related to aviation, and it provided a novel way to navigate the content, called “Flight Mode,” whereby users could fly towards the content they wanted to read.


It might not have revolutionized online reading, but it was a memorable campaign.

KitKat and Android

Most of you have probably seen this. The campaign launched after I had finished the final draft of this article, but I just had to squeeze it in.

Google and Nestlé have come together to promote the next version of Android, 4.4, by naming it Android KitKat, continuing Google’s convention of naming major Android releases after desserts. This dessert campaign includes an actual dessert: Android will be featured on KitKat packaging, and customers can win little prizes.

KitKat’s campaign website.

Android’s campaign website.

9. Narrow Target

An effective campaign could just as well target an extremely narrow niche audience.

“How Much to Make an App”

Ooomf is a service for people who are looking for developers and designers to make an idea happen. It recently released a side project and campaign titled “How Much to Make an App.”


The website helps users estimate the costs of a project. It targets anyone who types “How much does it cost to make an app” into a search engine. Additionally, Web professionals may send their customers this way to get an idea of what’s involved.


Sharing is enabled by the handy nature of the tool, which explains what is expected of the visitor to make their idea a reality. In general, the more useful something is to someone, the more likely they will share it.

Ooomf added two links to its website, one on the main landing page at the top, and a call to action to “submit your project” right on the website (plus a “learn more” link).

“Please Feature Us, TechCrunch”

Here’s a company that tried to increase its chances of being covered by TechCrunch by targeting the publication with a campaign page titled “Please Feature Us TC.”


The campaign never got Hipvite the coverage it sought; however, according to TJ Tan on Dribbble, it gave the company a nice flow of registrations (the app no longer exists). In an email to me, Tan explained that Hipvite’s primary goal was to attract early adopters to try out the product; the TechCrunch feature would merely have been a great bonus.



The team behind Nearbox wanted to meet up with Andrew Chen to discuss “growth hacking” in their area of interest (mobile). They sent him the Snapchat image above, along with the website they built. This is a great example of how to target an individual in a small campaign. They even asked people to tweet about it:

“Those guys from @Nearbox really want to meet @andrewchen”

It’s hard to turn down people who do things like this.

8. Creativity And Innovation

This next creative campaign is still running.

Hollywood and Vines

This campaign, called Hollywood and Vines, consists of a compilation of six-second Vine clips submitted from all over the world.


Sharing is encouraged via the usual social channels and with an email like this:

“Airbnb creates the world’s first film made entirely of Vines. Check out the project at #AirbnbHV.”

Solved by Flexbox

Creativity also means coming up with a great campaign name. “Solved by Flexbox” is a great name to support the CSS Flexbox campaign.


10. Related Area

One last option worth mentioning is to choose an area of focus that isn’t necessarily your core business, but where you can add unique insight or get a lot of views.



When Speakeasy launched its product to book locations for events, instead of a typical launch party, it threw 50 parties by getting promoters to use its ticketing platform for the same weekend. The incentive for promoters posed a problem; Speakeasy wanted to host a liquor giveaway, but that wasn’t viable because of the high turnaround time that spirit brands usually have. So, it decided to make its own Vodka brand and advertise it in its emails (and on a fake website), without any explanation.


The campaign’s results were impressive: media coverage in New York and Toronto, one weekend with 45 parties in three cities, and 5000 new users.


I’ll conclude with our newest campaign at Iubenda, named Litense. We tackled a subject related to what we do, open-source licenses, and added our expertise. Because we have some experience in creating legal documents, we attempted to redesign open-source licenses to make them instantly understandable and easy to use, both for their creators and their users.


We picked the catchiest name possible, Litense, made the licenses easy to scan and read, with the help of icons, and added a few descriptive sentences of what you can do with the licenses.

To make it even easier, we host the licenses on our own servers. All the user has to do is link to the license, which will pop open in a modal window over top their page.


At the bottom of the page, we list the various licenses, with an overview to help visitors make sense of the various clauses; it also contains the only link back to Iubenda’s website. We hope the service provides value to a lot of people, people who might need Iubenda’s other services at some point. We hope the project will draw a bit of attention to Iubenda’s vision of reworking legal documents for the Web.

A Little Viral Theory

Now that you know the ingredients of a campaign, let’s look at the recipe to make it effective. You’ll usually want to follow a few rules to make as big an impact as possible.

For starters, you’ll need to bake in a bit of a viral loop. In short, you’ll need to get a viral coefficient above 1.

viral coefficient = (average number of users invited by each active user who invites someone) × (proportion of invited users who actually join or become active) × (proportion of active users who invite others)

Ultimately, it comes down to eliciting a strong emotional driver that will get visitors to share. (If you’re interested in emotional design, check out Aarron Walter’s book on the topic and my earlier article). What’s the strongest driver on social networks? Anger.

Higher virality is achieved by eliciting strong emotions. Here are a few things you can do:

  • Make your content visual.
    Use images, infographics, videos, GIFs. Visual content is more engaging, faster to consume and faster to activate the response you seek.
  • Make the content interactive.
  • Personalize the content.
  • Create emotional stacking with lists.

Emotions aren’t the only thing that raises the viral coefficient. Other factors that motivate people to share are social benefit or ego appeasement.

  • Exclusivity
    The viewer wants to feel in the know.
  • Altruism
    The user wants to do something good.
  • Self-image
    How does the shared product represent the user?
  • Convenience
    Make sharing as easy as possible.

Now that we’ve covered the theory, let’s look at a recent and brilliant execution of it.

One Second on the Internet


Designly’s One Second on the Internet campaign taps into so many of the themes above, and the website has been shared like crazy. See for yourself with a live Twitter search.

Let’s review five reasons why this campaign is so effective:

  1. Visual content


    The highly visual content centers on the blocks of bright logos. The page has the feel of an infographic, because the size of each block correlates to the number of actions performed on that platform in one second.

  2. Interactivity


    The interaction is subtle yet important. The number in the top left of each section adjusts to the time the visitor has spent on the website relative to the block being viewed.

  3. Personal

    The page is not necessarily personalized, but it surely is personal. Designly is talking about everyday things: voting on Reddit, posting to Instagram, posting to Tumblr, Skyping, tweeting, uploading to Dropbox, searching on Google, watching Youtube videos, liking on Facebook, sending email. Hey, I do that!

  4. Emotional stacking


    The page starts with the smallest block (Reddit) and finishes with the biggest (Facebook). Then, we get a few mind-boggling (and very shareable) facts, before the invitation to click that email button.

  5. Convenient sharing


    Notice how the sharing buttons stay with you the whole time and how Designly’s URL sits in the bottom-right of the page?

Now What?

Now it’s your turn. Go create a great campaign with what you’ve seen here (and use one of Iubenda’s newly released licenses!). Also, don’t forget to tell us in the comments about the last thing that left a lasting impression on you. And feel free to link to any campaigns you may have done.

Further Reading and Links

Here are some links from the article you shouldn’t miss:

(al ea)

© Simon Schmid for Smashing Magazine, 2013.

Tags: UX Design

October 10 2013


Hand-Sketching: Things You Didn’t Know Your Doodles Could Accomplish


Is sketching by hand more than a nostalgic activity? How is paper any different from a screen, especially when hardware is becoming more and more sophisticated? Is improving your hand-sketching skills really worthwhile when high-tech software is advancing every day? What difference can a pencil possibly make?

Everyone seems to have a strong opinion about hand-sketching these days. Some absolutely hate the thought of putting their ideas to paper because they can’t draw to save their lives. Others couldn’t imagine their creativity surviving without it. Love it or hate it, there’s much more to a sketchbook than old-school charm.

Final Sketch

Here’s the thing. From personal experience, I know that sketching on paper has something powerful about it that takes my designs to the next level. I’ve spent hours in front of both computer screens and sketchpads, and something about the latter always keeps me going longer, thinking more clearly, progressing further and designing better.

To understand why hand-sketching makes such a difference for me and many designers I know, I did some research. Here’s what I found.

External Memory: Take A Load Off Your Mind, Literally

Cognitive psychologists have been studying the impact of sketching on brain functioning for years, and with good reason: Putting ideas to paper is a powerful way to extend one’s memory. Back in 1972, Allen Newell and Nobel Prize winner Herbert Simon studied long-term memory, short-term memory and — here’s where it gets interesting — “external” memory. They argued that representations such as diagrams and sketches serve our external memory and reduce the burden that we experience when recalling ideas and problem-solving.

Flexibility: Hand-Sketching Improves Your Ability To Restructure Ideas

Consider your initial idea for a project. At this point, it exists only in your mind. All of a sudden, you start giving it (physical) shape in what Jill Larkin and Herbert Simon call “external representations.” You’re basically pulling the idea from your mind and recording it somehow. As long as the idea is in your mind, the number of changes and improvements you can mentally process is limited. Your idea won’t get anywhere unless you manipulate and enhance it.

External memory aids, such as sketches and diagrams, can help us overcome the limited capacity of our short- and long-term memories.

Here’s where hand-sketching saves the day: It enables us to externalize our mental images and achieve something that Ilse Verstijnen calls “restructuring.” Verstijnen works in the Psychological Laboratory at the University of Utrecht and has coauthored several articles about the relationship between imagery, perception and sketching.

Restructuring transforms one configuration into another, and in scientific studies, advanced hand-sketchers score highest at restructuring when they are allowed to sketch. In an experiment by Verstijnen, sketchers were shown to be better than non-sketchers at modifying their initial ideas and coming up with novel changes.

Because of our brain’s limited processing capacity, externalizing our ideas on paper makes it easier to restructure them, transforming the initial structure into a new one.

Another study by researcher Zafer Bilda and his group at Bilkent University in Turkey compared designers’ cognitive processes when sketching on paper versus using software. The study identifies several significant differences: Designers who used paper changed their goals and intentions more frequently and engaged in a higher number of cognitive actions. Changing goals and intentions while sketching is vital because it enables you to pivot your initial idea and to be versatile in your approach.

Interestingly, these results may have less to do with the way we are wired than with the way we have been educated. Can you remember how you first learned to draw, how all of your design courses required physical sketchbooks? That’s right, most of us learned to sketch on paper — and this might actually have affected the way our brain deals with it.

Here comes another buzzword, from our friends in behavioral psychology: conditioning. If paper was one of the first creative stimuli in your life (to the point that, as soon as you saw a blank sheet, you felt the urge to scribble), then it should come as no surprise that your sketching behavior is different on paper than on screen. Regardless of your philosophy of human behavior, we can all agree on one thing: paper has been around far longer than the digital screen.

Don’t get me wrong: Developers of digital sketching devices out there are definitely raising their game and making the lives of many designers easier in exciting, innovative ways. Manufacturers are making the lighting, size and weight of tablets feel unbelievably similar to paper. They’ve come up with ways to make graphic tablets sensitive to stylus pressure and be capable of digitizing paper sketches instantly. As the technology becomes more sophisticated, we can expect better digital sketching experiences. WACOM, a graphic tablet manufacturer, invites sketchers to tag their creations on Twitter with the #madewithwacom hash tag.

Serendipity: Happy Accidents From Unfinished Strokes

When was the last time you sketched a perfect image? It’s safe to say that most of us do not aim for perfection with a pencil and sketchbook. And that is exactly what makes a pencil stroke different from a vector.

Jonathan Fish and Stephen Scrivener authored “Amplifying the Mind’s Eye: Sketching and Visual Cognition,” in which they introduce the idea that “indeterminacies in Leonardo’s sketches elicit mental imagery because automatic mental recognition mechanisms attempt to complete the missing parts and match precepts to memory images.”

Hand-sketching results in inconclusive strokes that open new doors to creativity.

Consider every time you’ve left unfinished strokes, gray ideas over top solid shapes, quick side queries, blank spaces, wobbly lines and figures. Happens all the time, right? These indeterminacies, or “flaws,” which reflect our indecision, are great pointers to new design directions. We lose these when we opt for pixel perfection.

Group Thinking: Connecting Brains Via Sketches

A group of scientists in the Netherlands, led by Remko van der Lugt, observed four idea-generation meetings in which participants used one technique that involved writing and another one that involved sketching. They concluded that sketching stimulates group creativity by enabling individuals to reinterpret their own ideas further and to facilitate other people’s access to those ideas once they are brought to the table.

Collaborating with others in generating concepts is easier when we share sketches that are flexible, unsettled and, thus, full of possibilities.

Not only does hand-sketching improve the idea-generation process, but it provides an effective, visual language that makes it easier for others to understand, comment on and integrate your ideas. This might be even more important in cross-cultural groups, for whom visual sketches can bridge gaps of understanding.

Effectiveness: Better Design Outcomes

Does sketching like a maniac guarantee a better design? The easy answer is no. The subtler answer is that, in certain circumstances, sketching like a mad person could result in a better design. Yes, you read that right.

A useful design mantra is, “I haven’t failed. I’ve just found a thousand sketches that don’t work.”

I ran into this idea while reading one of Maria C. Yang’s studies. She tracked the sketches of a group of engineering students in the idea-generation phase and measured the results according to their final grades and their performance in a contest. She found that the number of concepts that students generated, as evidenced by their sketches, correlated to better design outcomes as long as two things held true: first, the sketches included dimensions and, secondly, the sketches that were significantly tied to the outcome were generated in the first quarter of the cycle (i.e. they were early sketches).

Concentration: Ready, Set, Sketch!

Were you ever in the middle of a major design breakthrough and then were suddenly interrupted? Concentration is key for designers because the creative process is anything but straightforward. The process requires a strong and rare connection between our thoughts, hands and source of inspiration. Its rarity is, indeed, the reason why some of us don’t sleep.

Well, that and deadlines.

There is evidence that sketching aids concentration. Jackie Andrade, of the University of Plymouth’s School of Psychology, tested whether doodling correlated to higher levels of concentration among 40 participants, who tested while taking a telephone call. While we can define doodling as aimlessly sketching patterns and figures unrelated to the primary task, her discovery that it can reduce daydreaming, increase concentration and curb boredom is fascinating.

This helps to explain why some of us find value in carrying our sketchbooks everywhere, pulling them out in the least expected places and in the middle of completely unrelated events.

To recap, sketching stimulates us to a comfortable level — enough to keep us awake, concentrated and engaged. As if this weren’t enough, other studies have found that subjects who consume information on paper were significantly less stressed and tired than those who use screens. Researchers from the University of Gothenburg argued that those who were looking at screens may have been more exhausted because of the “dual-task effect.”

It makes sense. When using a computer, you have to not only complete the task itself, but also figure out your way around the hardware and software. For those of us who learned to sketch on paper, this learning curve feels a lot like stress. For those who are comfortable with graphic tablets and other sophisticated input devices, stress is probably not an issue.

Montessori education encourages children to learn concepts with all five senses.

Some believe that we reach deeper levels of concentration and develop richer concepts when our own hands are the hardware. Regina Rowland, who teaches the “Idea Visualization” course at the Savannah College of Art and Design, has a unique perspective on the matter:

What I noticed when we moved into the digital world was that exercises all started to look the same. All of a sudden, everybody was designing in Photoshop and the quality of the work started changing dramatically. Before, exercises had a character that was unique in each person. I don’t want to ditch digital; there’s stuff in digital that we could never do by hand. But I do think that when you learn how to experience the world in its visual form, you realize that it is important to have a real, multi-sensorial experience and not an abstracted version of the experience.

With digital, you are looking at a screen with 2-D shapes and no interaction. I’ve realized that students who go into a sensorial experience with letters and shapes learn better than those who abstract them.

Now, there are nerves in the tips of your fingers, and I believe that when people draw with their hands it makes a different impression in the brain. There are references to this idea in Montessori education: It is through sensorial experiences that you form structures in your brain, and therefore all their activities and teaching tools are things that children have to do with their fingers.

Talent: Enhancing The Graphic Library In Your Mind

What happens when you continually draw and connect symbols as you sketch? What happens when your brain tries to recall shapes that are appropriate to the idea you are trying to externalize? It isn’t hard to see that the better you become at translating imagery from your mind to paper, the more visual resources you will have to draw on and the easier it will be to retrieve them in the future.

Ian Storer, who lectures in the Department of Design and Technology at Loughborough University, came up with this idea of a “graphical library” that designers can combine and restructure to generate concepts. He states in his paper that “creative sketching and designing requires a body of knowledge to base new ideas upon.”

Would I like to nurture a powerful mind for design? Yes, please.

Hand-sketching forces you to access and cultivate a unique visual library in your mind. As much as I love computers, the Internet and the almighty search engine, would I like to nurture a more powerful mind for design? Yes, please.

Problem-Solving: Unlock Solutions With Visual Synthesis

It is fair to say that most of the problems we face as designers are confounding, fuzzy, indeterminate — the types of problems that common logic stumbles on.

I dare anyone to try to solve these types of problems using only simple paragraphs of text. Writing falls short for most design problems. Jonathan Fish explains this brilliantly in his article “Cognitive Catalysis: Sketches for a Time-Lagged Brain.” He compares our design problems to trees whose trunk and branches are vague or abstract descriptions and whose leaves are images that represent “depictive concrete thought.”

Jonathan Fish explains that our design problems are like trees whose trunk and branches are abstract (usually textual) descriptions and whose leaves are concrete depictions (i.e. images). Most design solutions aim to reconcile these.

He goes on to explain that when you try to solve a design problem that is full of uncertainties, “both description and depiction are interdependent.”

Niall Seery and his colleagues at the University of Limerick propose the best definition of sketching that I’ve ever read:

“Sketching is a sense-making tool which supports the synthesis of visual imagery.”

Ready to improve your flexibility, serendipity, group thinking, effectiveness, concentration, talent and problem-solving? The eight benefits we’ve covered here may be just a few sketches away!

(al ea il)

© Laura Busche for Smashing Magazine, 2013.

October 09 2013


Incorporating More Quiet Into The UX Design Process


Behind every successful design is a dynamic creative team, and it takes all kinds of personalities and skills to get the job done. However, the culture and expectations of a design agency are often largely centered on one outspoken, gregarious personality. Things such as group brainstorming, on-the-fly presentations and open workspaces have become the norm in most design agencies.

But the stereotypical extrovert is just one of the personalities that make up a successful team. A lot of people who excel at and are passionate about design — specifically UX design — are actually introverts. This means that, in fostering cultures that celebrate the extrovert, design teams could be losing out on the brainpower of folks who contribute at their highest level when they have quiet and privacy to focus.

So, how can we better balance our teams and elevate extroverts and introverts alike?

As introverted UX designers ourselves, we’ve been unsurprisingly passionate about finding answers to this conundrum. So, we set out to discover just how many designers tend to be more of the Lone Ranger type, and also uncover what makes them successful, what makes them tick and how they use their introverted qualities to round out their teams and create great designs and experiences.

We also uncovered some great anecdotes and debunked a few myths along the way. We poured over findings from a survey of more than 100 people about the topic, as well as six one-on-one interviews, a group discussion (ironically) with 20 UX designers and a handful of anecdotes from some of our introverted colleagues and friends.

Our goal in speaking with introverted designers and embarking on this project was not to publish a scientific study, but rather to collect stories and share how others with such similarities use their strengths and overcome obstacles. If you find yourself to be on the extroverted end of the spectrum, we hope to illustrate for you the differences in the way your introverted team members, users and clients communicate and work, so that you might find additional ways to use those differences in skills to everyone’s advantage.

Here’s what we learned.

So, What Is An Introvert Exactly?

Although there is no concrete definition of introversion, a common observation among experts is that introverts derive energy from being in solitude and are more comfortable with less stimulation. Originally categorized by Carl Jung, an introvert is defined as a person whose interest is generally directed inward toward their own feelings and thoughts, versus the extroverted focus on the outside world.

(Image: Mike Scarano)

In her book, Quiet: The Power of Introverts in a World That Can’t Stop Talking (the book that inspired our article and project), Susan Cain explains that introverts recharge their batteries by being alone, whereas extroverts recharge by socializing, and that “introverts often work more slowly and deliberately. They like to focus on one task at a time and can have mighty powers of concentration.” The solitude is what introverts crave, which fosters a strong combination of creativity and persistence.

Cain’s research on introversion paints a picture of a world in which introverts not only tend to possess incredibly valuable traits, such as persistence, concentration, insight and sensitivity, but make up a powerful force of the world’s most impactful thinkers — folks like Albert Einstein, Rosa Parks, Steve Wozniak, Charles Darwin, Steven Spielberg and Mahatma Ghandi.

Marti Olsen Laney states in her book The Introvert Advantage: How to Thrive in an Extrovert World that, if allowed enough downtime, introverts can use perseverance to focus deeply, think independently and foster creativity.

If you are wondering whether you fall into the introvert category, see whether some of the following qualities cited in Susan Cain’s “Quiet Quiz” resonate with you:

  • You prefer one-on-one conversations to group activities.
  • You often prefer to express yourself in writing.
  • You enjoy solitude.
  • People tell you that you’re a good listener.

It’s important to note that introversion and extroversion appear along a spectrum and are not two extreme and specific buckets of traits. People are complex, of course, and no two introverts or extroverts are exactly alike. We have met some introverts who are extremely outspoken, and some extroverts who describe themselves as antisocial or shy. Many extroverts find that they thrive just as well in long periods of focused solitude as their introverted counterparts.

Exploring UX Through The Lens Of The Introvert-Extrovert Spectrum

We were excited to apply the newfound idea of exploring which traits of introverts and extroverts play as strengths in our field of UX design in an agency or client-based setting. We began our research by facilitating a focus group-type conversation with 20 people in the UX field, asking them to identify themselves as an introvert, extrovert or ambivert (someone who possesses characteristics of both introverts and extroverts). We then asked them to share their stories and opinions on how they best work and what they find easy or challenging in the UX industry.

(Image: Mike Scarano)

Because a large part of any UX professional’s job is to study and evaluate processes that humans find either easy or hard, the differences in how all three types do their best work were naturally curious. While some felt energized by walking up to coworkers and initiating an organic conversation, others avoided such interaction by getting up at 4:00 in the morning just to be able to work in solitude.

Many introverts and ambiverts in the group mentioned the need to match the ease of their extroverted counterparts in taking a more persuasive and stronger stance with clients, or in being more at ease with the parts of the job that require a lot of socialization with clients and strangers. In fact, many even expressed pride in working hard to become a “converted extrovert”.

True, it’s important to practice getting out of your comfort zone and to be confident in expressing your ideas — but is attempting to change your introverted nature the only path to success for those who don’t possess strong extroverted skills? How can we become more successful by recognizing and utilizing our differences as UX professionals?

In addition to the focus group, and in order to discover how introverted UX leaders (particularly in a client-focused agency) succeed in their roles, we also conducted an online survey with people in the tech industry to identify candidates to interview. Because of Cain’s extensive research on the subject, we chose to ask the questions from her Quiet Quiz in order to determine who is an introvert, extrovert or ambivert. Of the more than 110 designers, developers, project managers and other professionals in the tech industry who took the survey, 55% were introverts, 31% ambiverts and only 14% turned out to be extroverts.

From that survey, we chose six leaders in the UX design industry who were willing to let us pick their brains in one-on-one interviews about what it takes to be successful as an introvert in a UX agency.

In our interviews, we discussed questions like these:

  • “What’s your ideal work environment?”
  • “How do you work best with your coworkers and clients?”
  • “What kinds of introverted qualities help you in your job?”
  • “Which qualities can be challenging, and how have you dealt with those challenges?”

We heard deeply personal stories about lessons learned when going against one’s natural tendency and pretending to be a gregarious and spontaneous conversationalist, and inspirational stories about how displaying quiet confidence can be effective when dealing with powerfully strong voices in a large meeting.

So many answers and experiences shared were so surprisingly similar that we knew we were on to something. We stumbled upon a subculture of sometimes proud, sometimes closeted introverted UX practitioners who all feel like they face similar challenges alone. Simply being asked questions about their job through the lens of introversion was enough to make most of our interviewees feel less alone and more empowered. We hope these findings inspire others in similar positions and enlighten all of us on the introvert-extrovert spectrum of the amazing differences in strengths we all possess, which, when combined, make up super-teams of UX professionals.

The Powers Of Quiet Confidence

Not surprisingly, the common threads in our own findings match closely with the introverted traits identified by Cain and other experts in the field. So many of these traits help a UX designer in their career. But before getting into some of the trends that we noticed in our one-on-one conversations, we should note that the following traits identified are also found in many who identify themselves as extroverts and ambiverts. No matter where we are on the introvert-extrovert spectrum, we all could stand to celebrate the side of us that usually takes the back seat — that silent yet powerful creative force that helps us to process and solve complicated UX problems.

The focus of our qualitative research was on finding commonalities among UX designers who strongly identify with an introverted lifestyle. We felt strongly about encouraging others to celebrate and appreciate their qualities. What do introverts do well that makes them natural-born UX people, and what can we learn about these talents in order to bring about better communication, better UX teams and, ultimately, better products in all of us?

Here are some solid strengths that we uncovered from conversations with introverted UX leaders.

Introverted UX’ers Are Great Listeners

Because they tend to be quiet, reflective and observant in their day-to-day affairs, the information-gathering skill of the UX designer is a natural-born capacity of the introvert. The interviewees we spoke with expressed gratitude that they possess the gift of anti-gab, instead feeling at home in the role of asking questions, observing conversations and deriving true meaning from their observations.

They Are Relatively Humble

Because they would rather avoid the spotlight, introverts are comfortable in the shadow, elevating those around them. Some of our interviewees are not inclined to be upset if they are not publicly acknowledged for their good work, just as long as their ideas are being put to good use.

They Make Great Problem-Solvers

Thinking through the intricacies of a problem is not mundane to an introvert. On the contrary, they tend to find it exciting, as long as they have the time to analyze and problem-solve in solitude. This is, of course, a great asset when combing through a large amount of data to figure out how to create a great user experience for a product.

They Enjoy Putting Themselves in Other People’s Shoes

Introverts tend to be naturally empathetic, which can be incredibly helpful in creating delightful experiences for end users.

They Over-Prepare

Introverts tend to take time to fine-tune their speaking points when presenting to clients. Additionally, they think ahead about possible questions that others might have about their work, instead of winging it and risking saying something they might regret later.

They Make Good Leaders

Contrary to the popular belief that extroverts make the best leaders, introverts also make great leaders — they just do it differently. Especially when running project workshops, our UX leaders prefer to lead through a more facilitative style, whereby they let others run with their ideas, gather consensus from all involved, and work through differences collaboratively.

They Can Read a Room

Their empathetic and sensitive nature helps introverts read a room and understand other people’s reactions and emotions. Many of our interviewees expressed gratitude that they possessed this ability to pick up on the feelings of those around them, and to understand the general emotional atmosphere in a client or team meeting. This has been a huge asset in their communications throughout their careers.

How Introverts Can Set Themselves Up For Success

In our own experience as UX designers and from speaking with other introverted UX designers, knowing that these introverted qualities can be leveraged as strengths is half the battle. Additionally, managing stress, preparing thoughtfully and organizing your workspace and workflow to maximize creativity and productivity are important elements of success for all designers. However, introverted designers in particular can set themselves up for success in a few additional ways.

Take Time to Recharge

A common trend we found was that, even when a day full of interaction with others has been enjoyable and successful (such as in workshops, user interviews, collaboration with clients and teammates, or travel), finding time to be alone in order to recover and “recharge your battery” is regarded by introverts as a crucial “survival mechanism.” One interviewee said, “I have a bank, and I need to spend time building up my reserves before and after travel. Being more self-aware of how these seemingly normal parts of the job can really pull on you after a while is helpful.”

Guard Your Focus Time

Of the more experienced UX designers we spoke with, most had formulated a strategy for building focus time into their day. Many noted that finding a quiet place to think at an agency can be tough, and that putting on their headphones is a good way to drown out the noise around them. One designer we interviewed takes regular 10-minute breaks when she feels stuck; another said that his best ideas come in a slow burn after a meeting, in the shower or when taking a break during the day.

(Image: Mike Scarano)

One introverted UX designer said she does everything she can to guard her thinking time ahead of travel and big meetings — she’ll actually block her calendar so that she can process and plan alone. Everyone we spoke with loves having time to think through a problem on their own.

Prepare Well in Advance So That You Don’t Have to Wing It

All six of the UX designers we interviewed take time to prepare — and often over-prepare — for occasions when they will be in the spotlight, whether running a workshop, speaking at a conference, or leading a roomful of clients to discuss a design. Their techniques include the following:

  • Make a checklist of items to do or discuss.
  • Plan ahead for what could go wrong or where people might get stuck.
  • Plan how to back up your ideas verbally before a meeting (“Always be thinking, ‘When this question comes up, this is what I’m going to say.’”)
  • Carve out some alone time, whether early in the morning, late at night, while commuting or by taking notes alone. Planning what you want to say and how to say it is helpful.

Seek Out an Environment That Is Equal Parts Quiet and Social

Almost all of our interviewees work best in environments that balance quiet space and social time with others. When asked about the office, most said they enjoy the open floor plan found in many design studios, as long as they are able to put on headphones or find a quiet area to focus without interruption. One UX designer said this:

“I actually like that there are not walls in the office. I like the culture and feel, but don’t always like that there’s no place to have quiet time. I like knowing there are people around, just not right next to me.”

How Best To Work With Introverts

‪Not surprisingly, introverts tend to prefer certain structures and ways of communicating over others. The most challenging type of communication is in large groups, in which more aggressive personalities, better suited to debating and persuading on the fly, tend to thrive.

Therefore, if you’re an extrovert, making the most of the time available and getting great ideas from everyone might mean honing in on the quieter folks in the room to note their comfort level. If you’re an introvert, effectively sharing your ideas could mean breaking down large client meetings into more frequent meetings with smaller groups, structuring workshops in a way that enables you to be a facilitator instead of a lecturer, and communicating in a style that comes more naturally to you.

Below are a few tips we gleaned from our conversations.

Introverts Thrive One on One and in Small Groups

Whether it’s a whiteboarding session with teammates, a one-on-one user interview or a planning session with clients, introverts are invigorated by working with one other person or in a small group. This contradicts the notion that introverts prefer to work alone all of the time. Said one interviewee:

“I like to collaborate. If you’re introverted, people think you just want to put your headphones on and hide, but that’s not true at all.”

All of our interviewees recognize the value and benefit of collaboration, but they just find that collaborating with one other person or in a small group to be of greater value and less of an emotional drain. Much like pair programming, one person found their groove by practicing pair design:

“I believe in the value of pair design: The two of us could come up with a better solution. I believe in that. We all take in a different perspective and remember different things, and working it through with someone is valuable.”

The prospect of having a more impactful voice by speaking with one or a few people, versus working in a larger group, in which the most outgoing voice usually wins, is enticing. Said one person:

“I like internal design meetings, brainstorming sessions, small team whiteboarding sessions, where you poke holes in ideas and challenge them… It’s a small group, and if you’re lucky, you get paired with people who don’t steamroll the entire process.”

After Collaborating, Introverts Need Time Alone to Process

Immediately after collaborating or interacting with others for a project, introverts get a lot of value from spending time alone to process their findings and to focus on their tasks:

“I like to gather, gather, gather, which is a social activity, then retreat to a cave, work on it, then bring it back. I need people and I gather info, but then I have to go be alone to work it out and process it and own it and come up with a solution to bring it back.”

This repetitive process of “gathering the pieces of the puzzle,” taking them back to process them in solitude, before coming back with more ideas was consistent with all of our interviewees, who view it as a crucial element of success in their jobs.

They Strongly Dislike Aggressive Communication Styles (But Realize It’s Sometimes Part of the Job)

When in a group in which a strongly opinionated voice is dominating the conversation, an introvert might naturally tend not to participate. Rapidly thinking on one’s feet when arguing a point is a skill envied by many introverts.

(Image: Mike Scarano)

“Debating doesn’t work well for me,” said one UX designer. “If I debate with you and you’re an extrovert, you’ll be perceived as the winner just because people will think you sound smart, and I’ll pull out of the situation.” Furthermore, the more sensitive and quiet style of introverts often clashes with the louder, more confrontational style of extroverts. One person said:

“I don’t like confrontation… I really avoid it as much as I can. I found it challenging in my work, where you really have to go up against someone or throw down a design decision and justify what you’ve made.”

However, dealing with clients or coworkers whose style is confrontational is sometimes unavoidable. Figuring out what they can do to make such situations go more smoothly is a key survival strategy for the UX leaders we spoke with, and their advice to other introverts out there is plentiful.

  • Listen first.
    When dealing with an extroverted or even pushy personality, use your listening skills to help put yourself in an authoritative position.

    “No one knows as much about the client as the client does… [When you] listen to them and hear their ideas, and make sure you have valid statements to back up your ideas, they will usually listen to you.”

  • Assume the role of a relayer of information, rather than the expert.

    This critical piece of UX design can make the task of relaying a recommendation assertively a bit easier.

    “It’s never what I think. It’s always about the user… I’m not saying no because you’re wrong and I’m right, but I’m just saying what we heard in the research. I’m not the expert on your product, but I AM good at researching what your users want.”

  • Saying “I don’t know” is OK.

    “It has taken me a long time to get to the point where a client asks a question that I don’t know the answer to and to be comfortable saying, “Gee, I don’t know. Can you explain more?” Or, “I’ll get back to you on that…” I’ve regretted saying something just because I felt like I had to have an opinion.”

  • Don’t be afraid to ask for help.
    When dealing with a confrontational personality, one person said:

    “In retrospect, I don’t think I did a good enough job at expressing how I was really challenged to deal with this person. I didn’t want to be perceived that I couldn’t do it… Being introverted has an aspect to that. It’s hard to admit vulnerability, and hard to know when it’s OK to be vulnerable.”

  • Leverage your extroverted teammates.

    “I love having extroverts on a team in situations where, if I’m stumbling on something, they’re usually able to pipe in. It’s nice to have extroverts who can make clients feel confident that we know what we’re talking about.”

Leveraging The Quiet Side In All Of Us

Perhaps you lie towards the extroverted end of the spectrum but you work with or lead a team that includes introverts and want to find out how to leverage the strengths of the entire team. Or perhaps you work with introverted clients or users and wish there was a better way to get more immediate feedback from them.

You can get some tremendous benefits from understanding the skills and challenges of your introverted counterparts and from, consequently, leveraging their strengths. Your natural talent at communicating with others clearly, engagingly and persuasively, coupled with the tendency of introverts to quietly analyze their surroundings while hunkering down on the details, can make for a super-team of people with diverse qualities and skill sets and capable of high-quality results.

Here are some ideas to get the most out of working with your introverted teammates.

Recognize When Assertiveness or Eloquence Is Being Mistaken for a Good Idea in a Large Group

If you find yourself contributing often or leading discussions in which important decisions are being made, especially when interruptions and fast or loud exchanges are happening, try to slow down the discussion and provide a clear opportunity for others to ask and get answers. Note whether everyone’s opinion has been voiced.

In “The Rise of the New Groupthink,” an article also written by Susan Cain, she states, “Decades of research show that individuals almost always perform better than groups in both quality and quantity, and group performance gets worse as group size increases.” Often times, the quietness of introverts in such settings indicates not so much a lack of interest or difference of opinion, but rather the challenge they face in matching the level of intensity in the meeting.

“Even if their intentions are good, but they’re more passionate and aggressive, it can make me shut down,” says one UX designer about the challenge of dealing with a confrontational style in meetings. Another explains that, “Nothing makes you feel more small than when others are talking over you.”

A big obstacle to getting all great ideas on the table could simply be the aggressive communication style of some participants.

Understand That Introverts Are Not at Their Best When Put on the Spot

Instead of being forced to share their ideas in meetings, where conversation happens on the fly, introverts are often much more effective when they have even a short amount of time to think through a scenario first. In an agency, where a lot of group thinking and brainstorming is required, distributing the agenda in advance would help. This gives introverts the time to thoughtfully prepare and to more easily contribute to the meeting.

Our own interviewees expressed appreciation that we sent out our questions ahead of time so that they had time to think about scenarios and answers. When asked how she best functions when working with colleagues, one interviewee resolutely stated:

“I’m not a huge fan of meetings, but a well-structured meeting is not a bad thing. I like to go into a meeting with a really clear idea of why we’re here and what we want to get out of this. How can I define the best way to utilize our time? If we can’t figure that out, I’ll reschedule.”

Take a Cue From Each Other

Sometimes simply recognizing each other’s soft skills can have a monumental impact on a team’s dynamic. Perhaps one person prefers to do the talking in contextual interviews, and another is more comfortable taking notes or organizing. Talking openly in order to know who prefers to take on which role in a project can make the working environment more pleasant and efficient.

Eventually, if we are open and humble enough to talk about our strengths and weaknesses with one another, we can take cues from how others work in order to become more comfortable employing those skills ourselves. For example, if you always want to work in a group to get things done, try out another method once: hold an initial and short group brainstorming session, then send everyone off to their “caves” to process the ideas by themselves, before coming back to discuss again. See whether this compromise of working together first and then in solitude is an asset to the group.

Likewise, your introverted counterparts are constantly observing the methods that come naturally to you as extroverts and are taking their own cues. As one introverted UX designer explained:

“[My extroverted colleague] just dives in. It came naturally for her to come in and set up a weekly meeting with the client. Now I do that, too — it seemed uncomfortable to me at the time. I appreciate how easy it is for her to network.”

Be Cool With Quiet

It’s very clear that the successful introverted UX leaders we spoke with got to where they are not by attempting to change their nature, but rather by recognizing and using those introverted qualities to their advantage. Expressing confidence with clients and backing up your own ideas do not have to come from being the most persuasive debater or from an aggressive style.

(Image: Mike Scarano)

One of the UX’ers we spoke with ended our interview by saying this:

“We need listeners. Be comfortable with your quiet. Be confident in your introversion. It’s not a flaw. I used to see it as awkward. Over time, I’ve come to recognize the strengths it offers.”

We couldn’t agree more.

Likewise, the UX world needs great communicators, multitaskers and risk-takers. We need people who are not afraid to shout out that UX makes the world a better place, who are not afraid to stir the pot by showing us exciting new ways to view our industry. To create a great and successful UX community, we need both loud and quiet, group work and solitude, intense singular focus and thinking on several planes at the same time.

In the very near future, we hope to hear about wildly successful designs delivered by UX teams that fully incorporate ideas from the quietest corners of the office, teams that respect both the quiet strengths and bold ingenuities that all personalities have to offer. Life is the richer for them.

(al, ea, il)

© Angela Craven for Smashing Magazine, 2013.

Tags: UX Design

October 04 2013


The Ten Commandments Of Efficient Design In Axure


Axure is a powerful tool for creating software prototypes quickly. Getting started with it is really easy; however, therein lies a danger. The tool is so intuitive that many users can be productive without undergoing any formal training. What they might not be aware of is that they probably aren’t using Axure optimally.

In my experience as a UX designer, I seldom draw a page and get it right the first time. Most of the time, I go through five to ten iterations. When your UX design is used as the blueprint of an agile project, you might need to keep the entire project up to date with the scope of development. Sometimes these changes will affect a dozen or more other pages. It is at these times when some of the less evident features of Axure can become huge time-savers.

I generally work in teams to create wireframes and prototypes. To do this, I make use of Axure’s “shared projects” functionality (“team” projects in Axure 7). Multiple people being able to work on a design project at the same time remains my favorite feature of Axure, but it does demand a tidy and structured way of working. You will undoubtedly find someone else working on a page that you’ve designed or yourself working on another’s page. I’ve written these commandments with Axure in mind, because that is the tool I presently work with, but I’m certain many of the principles apply to other tools.

This list of 10 commandments is what I’ve found to be crucial techniques to save time in the long run. This way of working does not always provide the quickest results in the short term, but it does allow for optimal flexibility further down the line.

I) Thou Shalt Never Use Two Widgets When One Will Do.

The most common time-consuming behavior that I see with beginner and advanced Axure users is the use of unnecessary widgets. I still catch myself making this mistake and have to remind myself constantly of this first commandment. Each widget that you add to your project will require a bit more work when you need to make changes in the future. All of these little bits of work start to add up after ten iterations. Below is a simple example of how two visually identical objects can be built up in different ways.

Larger view

Both examples show a situation in which someone uses a separate widget for the text and the button. When this person then wants to add onClick behavior to the entire object, they have two options. The first option is to add a hotspot over the group, which results in three widgets to maintain. The second option is to create the onClick interaction for both elements, which results in two behaviors to maintain.

Both of these options will cost unnecessary time when changes need to be made. A much leaner way is to create this object by adding text to a box widget.

Larger view

Your text can then be positioned using the “alignment and padding” tools. You will now have only one widget to maintain and will need to connect only one behavior to it.

Larger view

II) Thou Shalt Not Duplicate, But Rather Make The Object A Master.

When I find myself in a late stage of a design and realize that we need to change the main navigation on every single page, I experience tremendous joy. Not because I enjoy a big pile of repetitive work, but because all I need to do is edit my single master object and — presto — the whole project has been updated.

Using a master for the main navigation would seem to be quite obvious, but it pays to create a master for anything you use more than once. Whenever you find yourself copying and pasting a group of widgets, always remember that creating a master is probably better.

Larger view

After creating a master, such as the product tile above, if you decide to change the button’s label to “Buy now,” you will need to edit it only once to see the change in every instance of the master.

Larger view

Remember not to turn overly large groups into masters. The larger a group of objects, the higher the chance you will need a variation of that master at some point. Combining masters into another master is often better. This can be convenient when you need some variations of one master, with certain elements always included and other elements varying, as below:

Larger view

This base master has no pricing information included, but it can be combined with one of the other masters to create new masters for full product tiles.

Larger view

III) Thou Shalt Place Styles Before Masters.

Masters are great for creating reusable elements, but they do not allow for variations. Each instance of a master will be exactly the same as the others. This is where styles come in. Suppose you have a button design that needs to be replicated on multiple pages, but the labels on the button need to vary. Styles can help you achieve this easily. Every property of a button can be managed through styles; all you need to do is change the label.

Larger view

The affordance of buttons is often enhanced with mouseOver and related behaviors. These behaviors are often created in Axure by using dynamic panels. The different states are then placed in different panel states and selected with scripts. With this method, however, you would need to go into each of the panel states to change the copy of the button.

A much faster way of dealing with button behavior is to use the “Interaction Styles” dialog box. With this feature, simply set different styles for each behavior state, and then you would need to set the copy and size of your button only once.

Larger view

Larger view

Tip: Use the “Auto fit width” function, introduced in Axure 7, on your buttons. If you set up the left and right padding in your style, all you will need to change is the button text, and then the size of the button will automatically adapt.

Larger view

IV) Thou Shalt Keep Thy Project Organized And Shalt Name Clearly.

Axure provides many options for keeping things organized. Every element that you place on a page can be given a unique name. Pages may be named and organized in a tree structure. Masters may be given names and sorted in folders and so on. But why go through the effort of giving everything a clear name?

  • Keep things organized for yourself.
    When you have an elaborate page and you want to create an interaction with a dynamic panel, you will have to sift through a long list of elements to find the one you are looking for. You can use the search field — but only if you have thoughtfully named your items.
  • Allow for team members to step in.
    If, like me, you work in teams on your projects, unexpected things will always happen. You or your colleague could become ill or unexpectedly have to work on another project. It is critical, then, that the project be so clearly set up that the other can just step in and take over. Interactivity built by another can be particularly complicated to step into.
  • You will be sharing with third parties.
    In the average project that I work on, my wireframes get shared with at least 10 people. Some people will sit at a table with me and can be carefully guided through. Others, I will never meet and will have no idea of their understanding of wireframes. Ideally, a prototype should be viewable autonomously.

Several things I do to achieve this are the following.

Create a Landing Page

You could set up the home page of your prototype as a starting page that explains what people are looking at and how they can use it. Additionally, you could provide your contact information or links to flowcharts.

Larger view

Give the Pages Unique and Self-Explanatory Names

The prototype will be easier to understand if the page names are clear and explain what the pages are. People will also use these names in future communication. If, for example, a graphic designer works on a comp based on your design, they will likely use the same names for the pages as you did. If a page’s name is not unique, then different names for the page will appear.

Create a Flowchart of the Most Common User Flows

Most people don’t think of a design as a tree of pages; they think in terms of a flow of activity. You can create flowcharts in Axure to reflect the important user flows and to link the nodes to the relevant pages. You would then provide an extra way to navigate the prototype. (The names in the flowchart would be based on those in the site map. Thus, it would become evident whether you are naming clearly.)

Larger view

V) Useth Always Global Guides And A Grid.

Axure allows users to create two kinds of guides: local guides, which exist only on one page, and global guides, which are visible on all pages. The guides can be set up using the “Create Guides” dialog box. If you set up guides in, for instance, a default 960 grid, then consistently positioning elements over the different pages becomes a lot easier. Also, your team members will see these global guides in a shared project.

Larger view

Using a grid can help you keep your designs clean and structured. I usually set my grid to 10 × 10 pixels and create all of my objects with dimensions of multiples of 10; for example, a button of 60 × 20 pixels, and not 55 × 18 pixels. When you place these objects on the grid, everything becomes easier to align and will satisfy any obsessive-compulsiveness you may have. Of course, allow yourself to stray from the grid for special objects that need different dimensions.

Tip: In Axure 7, you are able to set up different sets of global guides for mobile and desktop pages. Here’s an example of a mobile grid I like to use:

Larger view

VI) Forgeteth Not The Import Tool.

In most projects, people create elements that are useful in other projects. Instead of reinventing the wheel for each project, reuse things that have worked in the past. Many of the basics will remain the same throughout projects, such as styles, guides and certain masters. Although copying and pasting objects from one .rp file to another is possible, not all information would be carried over. When you paste a button that has a particular style, that style will not be pasted along with it.

The best way to reuse elements is by using the powerful import function. This enables you to import pages and masters, but also styles and guides.

Larger view

Tip: Create a “mother” .rp file, in which you keep all of your standard masters, to import for new projects.

VII) Thou Shalt Keep Old Versions Of Pages.

I often find that I need to go back to an old version of a project. In the “good” old days (I won’t bore you with the reasons why “good” is in quotation marks), when I was often required to create wireframes in Visio, managing projects with many pages was difficult, so I would end up taking out the legacy pages. I would also save a new file every few days with an incremental number, so that I had some sort of history of the project. In other words, I ended up with a folder of hundreds of pretty large files, wasting space.

In Axure, keeping track of old versions is easy. Simply create a folder (or a page in Axure 6.5 and earlier) named Bin.

Larger view

Place old versions of pages in there, so that you can easily refer to them when you need to go back in time. When exporting, simply use the option to not export all pages. This way, you can share a clean version with clients and still have old versions be directly accessible.

Larger view

VIII) Thou Shalt Not Make Unnecessary Interactions.

First-time users of Axure are often impressed by the ease with which interactivity can be added to a prototype. When I started out, I couldn’t resist creating every possible interaction on my pages. However, in many cases, my designs could be clearly communicated without any interactivity — simply as still images. I now add interactivity only if the answer to one of the following questions is yes.

1. “Do I Need Interactivity to Communicate My Design Unambiguously?”

Could your design be interpreted incorrectly if you supplied only still images, instead of an interactive element? This might be the case for an interaction that relies on certain animations to be understood.

2. “Will This Interactivity Save Time in the Long Run?”

Would making an element interactive be quicker than showing different states on different pages? For example, creating and maintaining an interactive page with tabs would be easier than creating multiple pages for each tab.

3. “Do I Need to Convince Someone of a Concept for an Interactive Element?”

When I come up with what I believe to be the best solution for a problem, but I know it will be heavy to develop, then I need people to support the idea. I have found that making something interactive can help sell the idea.

But if the answer to all of these questions is no, then I prefer to create multiple versions of a page that simply show different states of an interactive element.

IX) Useth Font Icons Instead Of Images.

Another simple but often overlooked way to keep Axure projects manageable is by minimizing the number of images. To change the color of an icon image in a prototype, you would have to go through several steps. You would need to open an image editor, make the changes to the icon, export to a new bitmap, and finally import into your Axure project.

Another option would be to use an icon font. With one, you can change color and scale within Axure. A great source of basic icon fonts is CopyPasteCharacter, whose fonts work right out of the box on most platforms.

Larger view

With an icon font, you can add a graphic to a button and still obey the first commandment.

X) Previeweth Thy Prototype In The Browser Or On A Device.

Designers get frustrated upon learning that their prototype doesn’t look the same in the browser as it does in Axure. In particular, text spacing and positioning look off. What’s more, there are even differences between browsers. To avoid surprises, constantly preview your prototype in a browser or on a device if you are designing for mobile.

Even though you will never be able to eliminate all differences between Axure and the browser, there are some ways to limit them.

Text Wrapping

Here is how Axure wraps text:

Larger view

And here is how a browser wraps text:

Larger view

To prevent text from wrapping to the next line, make sure your text boxes have sufficient breathing space. The safest bet is to always give text the maximum amount of space that it might need. Thus, if you need to edit your text in the future, you won’t need to resize the text box; it will wrap the way text should.

Vertical Spacing

Vertical spacing can look significantly different between a browser and Axure. You can tweak the spacing in Axure until you find the setting at which the text will look good in the browser, but this is quite an effort with an uncertain outcome. The only way to be certain of the positioning of text is either to break up the copy into chunks or to convert the text to an image. The first option breaks the first commandment, unfortunately, although it is sometimes unavoidable.


A few of these commandments bring results in the short term, but most yield benefit in the long run. All will save time and, perhaps more importantly, keep your work pleasurable.

Larger view

I hope these commandments become as useful to you as they are to me. I’m certain that other people think other rules are more important, and it would be interesting for us all to hear about them, so post your ideas in the comments.

If you haven’t yet, try out the beta version of Axure 7. Some of the changes really help to keep one’s work organized.

One last point: These rules, like any others, are made to be broken. Never let them hinder your work. As smart designers, we need to know when to break the rules.

(al, il)

© David Morgan for Smashing Magazine, 2013.

Tags: UX Design

October 01 2013


A Case Study: How Your Product Can Benefit From User Feedback


Like many great ideas, ours was born of a problem. When I was a graduate student at MIT, I sat next to a classmate who is visually impaired. He would whisper to me to ask the time, even though he wore a watch — which prompted me to wonder how the blind tell time.

I later learned from my classmate that he had a talking watch that announced the time out loud when he pressed a button, but he rarely used it in public because he found it disruptive and embarrassing. After that conversation with my classmate, I went home and Googled “watch for the blind”. I couldn’t believe what I saw.

The only options for the visually impaired were the disruptive talking watch that my classmate had told me about and a tactile watch that required users to lift the face and touch the hands to read time. The latter option, I learned, was fairly fragile, and users could easily displace the hands.

I was shocked. Here we are in the 21st century, and we don’t have a product that makes it easy for everyone to tell time! Clocks and timepieces are all around us — from the microwave in your kitchen to the smartphone in your back pocket — but the digital display still fails to address one basic issue: We have to look at it.

Telling time, then, requires sight.

Our Methodology

I became determined to solve this problem. I began experimenting with prototypes, then brought those prototypes to users for feedback on how to improve the design.

This section explains the process we took, from concept to Kickstarter. We’ll go through our initial prototyping process, then explain how user testing transformed the way we approached the design, and conclude by detailing how we developed the final product.

Our First Prototype

When I set out on this mission, I knew I needed to get feedback from users as early as possible. As soon as I had the design on paper, I looked for user groups. But I quickly learned that the traditional approach to research and development — using a drawing or video demo to solicit user feedback — was impossible for this project. Because our target users are blind, we had to make the product and take it to them.

We also knew that we needed to take a different approach than designers who had come before us, because the fragile hands that have been used on timepieces for the blind can easily be moved out of place. We began experimenting with ball bearings as indicators, held in place with magnets.

Our first prototype was about as simple as you can get and was made of the last material you’d expect: Legos. We used fewer than 20 Lego pieces, plus small magnets and two ball bearings. We brought that to user groups — more on that process below — and once we confirmed positive feedback on our concept design, we refined the prototypes by printing parts with laser-cutters and 3-D printers.

Image: Lego Prototype
Our first prototype was made of fewer than 20 Lego pieces, plus small magnets and two ball bearings. (Large preview)

We also added actual watch movements to make working prototypes. Making the prototype work at the actual size of a watch, with standard watch movements and a standard watch battery, was important to getting accurate feedback.

Image: An early prototype of The Bradley
Another of our early prototypes was designed to fit your wrist. (Large preview)

User Testing

To find quality user groups, I reached out to organizations that serve the blind and visually impaired and attended meetings with their members. Each time, I brought one or two prototypes of my tactile timepiece and let them try it on.

With only a few prototypes to go around in the initial phases, these presentations to groups of 20 or 30 members proved to be frustrating. A limited number of people were using the timepiece at any given time, with others waiting impatiently to try the product. So, I began meeting with users one on one at their homes and businesses instead. Those meetings tended to be far more fruitful because users could take their time with the product and offer comprehensive feedback.

Image: Video of User Testing
This video shows our early research with the visually impaired, as well as some of our early prototypes and how users interacted with them.

Sound time-consuming? It was. But this user research, the process of meeting in person and creating prototypes, was also incredibly valuable — so valuable, in fact, that it completely transformed our approach to the design.

Sure, we made some small discoveries, like where to place the indicators. But the biggest thing we learned was something we didn’t expect. Through this process, we identified unique needs of our users that we hadn’t realized exist: We learned that they are as concerned with fashion and style as they are with function.

In almost every meeting with a person who is visually impaired, one of the first questions was always about the look, the material, the size and even the color of the watch — components that I hadn’t strongly considered in my original vision.

That user feedback changed everything.

The User Interview That Changed Our Vision

One woman who helped us works in the fashion industry and has a son who is visually impaired. As her son approached his 18th birthday, she wanted to buy him one of the only high-fashion accessories available to men, a nice watch. But she was dismayed to find that no fashionable watch for the blind exists. Everything she found was ugly or cheap or, worse, had a bulky design that called attention to the wearer’s disability.

This woman was thrilled to discover we were developing just the product she was looking for. She was so thrilled, in fact, that she borrowed a prototype to take home to her son.

The next day she returned to tell us that her son hadn’t even bothered to try on the watch. He didn’t want to wear a watch that was specifically for the blind, she said, no matter how convenient the technology.

In conversations with people who are visually impaired, we were surprised to hear this feedback again and again. They want to wear a watch that everyone else is wearing, not one specifically designed for someone with a disability. A product designed “for the blind” would accentuate the barriers and differences between the blind and the sighted. Wearers would be no better off with it than with the talking watch in the MIT classroom.

Similarly, we found that when presenting the timepiece to sighted users, portraying it as a “watch for the blind” that the sighted could wear as well garnered a rather lukewarm reaction. They were disenchanted with a product designed for the visually impaired.

When we instead introduced the watch to sighted users as an innovative, tactile timepiece that would help them tell time without having to look down at their wrist at inopportune moments — during long business meetings, less-than-magical dates or dinners with family — the response was much more enthusiastic.

So, we made a huge shift, transitioning from a timepiece for the blind to a high-fashion product designed to be inclusive, a product that would help everyone tell time easily. When users, whether visually impaired or sighted, fell in love with the fashionable design and innovative function of the timepiece first, then learning the motivation behind it later only boosted their interest.

Research, Insight and More Prototyping

As we gained insight from users, we continued to build prototypes, improving the design. Each time, we created a prototype that reflected what we’d learned.

After more than a year, we contracted a watch manufacturer to create a prototype that was more in line with what the actual timepiece would look and feel like. This prototype was made of the same materials that would go into the final product; so, more than ever before, our test groups were able to get a feel for how it would work and how it would feel on their wrist. We also modified many of our hand-made parts to be suitable for mass production.

All told, we went through 15 iterations in less than two years.

Below are three major improvements we made with each passing prototype.

1. Placement of Indicators

Early designs had both ball bearings — one for the minute and the other for the hour — on the face, like a traditional watch. But we learned from users that this made it difficult to distinguish the hour from the minute indicator. So, we moved one ball bearing to the side of the timepiece.

But which indicator would we move? We watched how test groups used the timepiece and realized that when someone checks the time, they typically already have a sense of the hour and are checking for the minute. That decided it for us: We left the minute indicator on the face of the timepiece and moved the hour to the side.

Image: Final prototype of The Bradley
Our completed prototype had a ball bearing on the face and another on the side.

2. Using Magnets Strategically

We also used the prototyping process to address what until now has been a major issue with tactile timepieces, that users can unwittingly move the indicators out of place.

Because we weren’t using hands, as other products do, this was less likely, but still possible. We engineered the timepiece so that the magnets hold the ball bearings in place. If they’re bumped or moved, they might fall out of position, but a quick shake of the wrist would set them back to the correct positions.

Over time, we also developed raised marks on the face to indicate the hours, with major marks at 12:00, 3:00, 6:00 and 9:00 textured to make them easier to distinguish.

3. The Look of the Timepiece

Because users were highly concerned with how the watch looks, we put a lot of effort into making it fashionable. We chose durable titanium for the body, with a choice of two wristbands, one a stainless steel mesh, the other a leather and fabric combo. We even ran a poll on our Facebook page to see which of our wristband colors was most coveted by our community.

While we had first focused solely on function, we’d now integrated another component that was essential to success: aesthetics.

Image: The Bradley in various colors
The body of ‘The Bradley’ is titanium, making it sleek, easy to clean and durable. Watch bands are available in a classic stainless steel mesh or in fabric and leather in three different colors.

Obtaining a Patent

When we realized we were truly onto something, we set out to obtain a patent — which led to a slew of other discoveries and ideas. We found designs for prototypes of tactile watches that already exist! None had truly succeeded in the marketplace, and most never even made it to market, but they served as inspiration nonetheless.

Image: Tactile patent design
The first design patent on record to use magnets and ball bearings was issued in 1959. (View more detailed drawings of patent no. 2915874.)

Image: Another tactile patent design
Another utility patent issued in 1998, patent no. 5805531, is similar to the one above. When we dove into the legalities, we discovered that the earlier patent covers what the latter patent claims, so the earlier patent invalidates the latter.

We hope that our designs serve as inspiration for designers in the future, too. Once our patent is approved — it’s now pending — we plan to make it available for free to anyone who wants to improve on our design.

Compared to other watches, our design is different in two main ways.

Structurally, the watch works differently. It has one ball bearing on the face and one on the side, while all other designs have two indicators on the face. This is a subtle difference but an important one because it enables the timepiece to accurately tell time without the two magnets interfering with each other. As explained above, it also makes it easier for the user to distinguish between the hour and minute indicators.

Aesthetically, our timepiece looks fashionable. Other designs are focused mainly on function, but our timepiece is also a fashion accessory.

Our Pivot: We Stopped Designing A Watch For The Blind

To solve the problem I’d set out to tackle, I had to forget about it. I had to focus on designing an innovative and fashionable accessory that everyone would love — and that everyone could use, too. That’s how our company got its name, Eone, and it’s how The Bradley became the timepiece it is today.

The minimalist tactile design of our timepiece addresses one simple issue we all face: Sometimes we aren’t able to look at our watch to tell time. Even if you’re lucky enough to have eyesight, you’ll no doubt find yourself in situations where looking at your watch would be rude or impossible. In these situations, touching your watch is a far superior solution.

While embracing this pivot last year, my team and I discovered Brad Snyder via YouTube. Brad trained for the Paralympics after losing his eyesight from an IED in Afghanistan less than a year before, and he went on to win gold and silver medals in swimming in the 2012 London Paralympics. Brad’s determination, work ethic and positive attitude inspired us. And we had something big in common: We both aimed to show the world that blindness doesn’t make it impossible to achieve amazing things. Brad has since become both our official spokesperson and the namesake of our first timepiece, The Bradley.

Our Pre-order Campaign On Kickstarter

Now that we’re ready to manufacture our first round of timepieces, we’ve turned to our users for support in funding the product that they helped us to develop. The response has been overwhelming! Months after investors balked at our request for funding, saying that the market for watches is too crowded, our supporters pre-ordered in droves.

We surpassed our funding goal of $40,000 on the first day of our Kickstarter campaign, and in the end we raised more than $594,000 — ten times our initial goal — from more than 3,850 backers. We are so grateful to our supporters for helping us show that you can create a product with beautiful form, while still offering exceptional, inclusive design and function.

(al, ea, il)

© Hyungsoo for Smashing Magazine, 2013.

Tags: UX Design

September 24 2013


Data-Driven Design In The Real World


As more designers and writers look to analytics to inform their decisions, many still struggle to implement their findings in a sustainable, ongoing way. Too often, testing and analysis are one-off activities, providing plenty of important-looking numbers but not lot of context or specific direction.

After more than five years helping content and design teams capture, measure and understand website performance data (client-side at Bazaarvoice and now at Volusion), I’ve learned a lot about connecting the dots between data and design improvements. Today, I want to share some of those lessons with you.

In this article, we’ll:

  • see what a good data-driven model looks like on paper,
  • look at a real-life example of the model,
  • share some resources to help you get started with testing.

Defining “Data-Driven” Design

Before we can talk about using data to improve design, we have to define what we mean by “data.” This will help with a very common challenge: no shared language between designers and writers and their analytics team and tools.

Qualitative Vs. Quantitative Data

In most Web-based projects, there are two general types of data, and you’ll often see these discussed in articles about website optimization:

  • Quantitative data
    Numerical data that shows the who, what, when and where.
  • Qualitative data
    Non-numerical data that demonstrates the why or how.

Most analytics tools, such as Google Analytics, provide a lot of quantitative data, such as who has come to your website, how they got there and what actions they took.

What these tools don’t tell you is why. Why does a certain group of visitors take one action, while a different group of visitors choose another? Why does one piece of content keep visitors on your website longer than another? That’s when we turn to qualitative data. Whereas quantitative data shows scale, qualitative data gives perspective. It helps us understand not just what happened, but why and how it happened.

“The qualitative/quantitative issue is really a misunderstood area in research, especially to people who haven’t been exposed to broad-based training,” says Dave Yeats, senior UX researcher at Bazaarvoice. In his over 10 years of conducting user research, Yeats has developed a greater appreciation for the qualitative side of things:

“I’ve come across too many instances of people dismissing qualitative research as ‘anecdotal’ because they don’t understand how non-numerical data is still data.”

A good data-driven model must include both. And a good working understanding of how the two relate to each other will not only provide better insights, but also improve communication between team members.

The Key To Success: Be Empirical, Be Specific

The very best data, be it qualitative (i.e. non-numerical) or quantitative (i.e. numerical), is always empirical. Empirical data is any type of information gathered through observation or experimentation. The best empirical data answers specific questions — because when data is specific, taking action on it becomes easier.

When looking for general empirical data, such as “metrics for the website” or “how the website is performing,” you can end up with data that, while interesting, doesn’t lead directly to specific actions. Or, as Google Analytics evangelist Avinash Kaushik colorfully puts it:

“All data in aggregate is crap.”

You can’t isolate variables when looking across big aggregated metrics (such as overall page views or downloads.) This makes it difficult to hypothesize about why you’re seeing what you’re seeing. There are just too many moving parts to know.

Plus, different portions of a website — indeed, even different pages within subdirectories — have different, smaller goals. Sure, they all feed into large site-wide goals, such as sales or downloads or content consumption, but optimization must happen within smaller visitor groups, traffic segments or groups of pages. Let’s look at an example.

A Textbook Example Of Good Data-Driven Design

To better understand how to focus on empirical data, both qualitative and quantitative, let’s look at a hypothetical problem for a content-oriented website.

Let’s suppose you run an online periodical or research website. Keeping visitors engaged is a big goal! You’ve been asked to make design and content changes that will help retain visitors. Where do you start?

You could log into your analytics account and check exit and bounce rates. For our purposes, we can define these as follows:

  • Exit rate
    The number of times a visitor leaves your domain from a page, divided by that page’s total views. Generally expressed as a percentage.
  • Bounce rate
    The number of times a visitor enters a domain on a page but leaves before viewing any other page in the domain, divided by the total number of views of that page. Also generally expressed as a percentage.

Upon sorting all of your pages by exit rate and then bounce rate, you find that two pages have much higher rates than the website’s averages. Based on this quantitative data, you look up the pages. One page contains a prominent link to a sister website — this means you’re intentionally sending people someplace else. You’re not as concerned, then, by the high exit and bounce rates on that page, because that page is designed to be an exit point. But the other page contains a long, important article and no direct, intentional reason to leave.

Why are visitors bouncing and exiting so often, then? Time to turn to qualitative data! “My favorite thing to do is combine observational research (watching somebody use a site) with in-context, self-reported data asking people about their presence,” says Yeats:

“‘What are you thinking about right now?’ ‘What is your response to that?’ This combination of observation, stimulus and probing for data paints the full picture.”

Yeats is right! This is a great opportunity for user testing. And because you’ve narrowed down your efforts to a single page (maybe a couple for additional context), testing becomes more practical. You’ll also be able to determine whether any design changes you make are working, because you’ve identified specific, empirical metrics that quantify success: exit and bounce rates.

Setting Your Data Up For Success

As you look to improve your use of data in making decisions about design and content, do the following:

  • Develop a common language with your analytics team or, if you’re also pulling the data, then with your analytics tool. Educate your team on specifically what you mean so that they understand the importance of the metrics you’re providing.
  • Use quantitative and qualitative data together — even if people are skeptical at first of the qualitative points.
  • Always use specific, empirical data — don’t offer “high-level” metrics. Find data points that answer specific design questions and, thus, illustrate whether design or content changes “worked.” (In our example, we used bounce and exit rates.)
  • Remember that success does not mean the same thing for all pages or types of visitors. Consider how returning visitors might have different needs from new visitors, or how visitors from an email might have different needs from visitors from organic search. Think about the goals of individual pages and subdirectories and how they might differ.

So far, we’ve talked about the best-case scenario for data-driven design: using quantitative data to identify issues and to benchmark current performance, and then using real-time qualitative user testing to understand why you’re seeing those numbers and how to improve them.

Case Study: Optimizing The Trial Page At Volusion

Now, let’s walk through a recent project that I worked on at Volusion, in which we applied these principles as best we could with the resources provided.

Case Study: Optimizing The Trial Page At Volusion

Volusion offers a free 14-day trial of e-commerce software, which helps us to introduce potential customers to the product and (ideally) convert those users into active store owners.

This is the primary conversion path for our customers, which means two things:

  1. Our key success metric for the corporate subdomain is the percentage of visitors who sign up for a trial and then convert their trial into a paying store.
  2. The trial registration page (where people sign up for a trial) is an important ending point for much of our traffic.

In the last quarter, our corporate Web team was assigned the goal of improving conversions for that page (and, hopefully, by extension, store conversions). To that end, we created a new registration page with more detailed product information, and then ran that in an A/B test against the then-current trial page.

First trial page
Our previous trial page provided a lot of information about the product and included a lot of different calls to action and places to click around.

Second trial page
Our newly designed trial page now includes some information about the trial (“No credit-card required,” etc.) and removes distractions.

“The theory was that more information would increase the audience’s comfort level with our product, and increase conversions. Of course, we didn’t want to overload the page and distract from the primary task. So, that was the balance: keep the call to action clear, while providing helpful decision-making information.”

Nathan Stull, Volusion’s website merchandising manager.

But after two weeks of testing, we saw no significant improvement either way. The pages essentially performed the same. We killed the test and asked ourselves why.

We would have loved to have gotten these pages in front of users, but that was out of scope (due to time limitations and cost). And as we started segmenting our audience in our analytics by source or location or other factors to help us hypothesize about their behavior, we saw differences in metrics for different groups.

We began to realize that what seemed like a good change for some people would likely prove unhelpful or even distracting to others. Trying to drive meaningful change across all demographics at once just wasn’t working. For example, some people would have landed on the registration form never having heard of us, while others might have returned to the website several times, already familiar with our product. We needed to narrow our test.

Fine-Tuning The Test

To get a more controlled group, we selected a subset of our pay-per-click (PPC) audience. Narrowing our test to this group served two purposes. First, it focused our test to a smaller subset that we could optimize for. Secondly, it meant that any conversion improvement would also give us more bang for our PPC bucks.

The subset we chose included only visitors from our PPC “remarketing” program. Remarketing in PPC is when you buy placement ads on a content network and then display them only to people who have previously visited your website but who did not take some action that you wanted them to take. This gave us a much clearer understanding of the audience, because we knew these visitors were already aware of Volusion and our products.

Now that we had identified the audience we wanted to focus on (how they came to us, where they were in the purchasing funnel, etc.), we could provide a lot of quantitative metrics to our designer and copywriter as they created the new trial page. In the absence of user testing, which, in this case, was cost- and time-prohibitive, this data provided some specific customer insights and ideas for improvement, including the following:

  • Visits by placement URL
    The placement URL tells us the location of the ad that the user clicked to get to our website. By looking at the audience demographics of the placement URL, you can learn about your remarketing demographic. Just put those websites into a third-party analytics tools, such as Quantcast or Alexa.
  • Other pages visited
    What other pages did they visit on our website, besides the trial registration page? This can help you understand what content would be helpful to feature on a page such as the trial page, so that visitors don’t have to search for it elsewhere.
  • Top visitor paths for non-converting versus converting visits
    How did this audience navigate our website? Did most of them sign up for a trial right away, or did they return to the trial page after conducting additional research? Are there navigation loops that suggest they want to learn something about our product that they are not finding?
  • Website search metrics
    What terms did the remarketing segment search for on our website? Is there a very common term that indicates an aspect of our product that we need to talk about in the trial form?

Most analytics products will provide you with metrics such as those listed above. Here’s how we found them.

Collecting Quantitative Metrics

At Volusion, we use Google Analytics and rely primarily on Google’s content network for our remarketing campaigns.

View of Google Analytics' left nav
(Larger view)

Visit counts by placement URL are available in the “Campaigns” section of Google Analytics, which you can find under “Traffic Sources” in the left-hand menu (as highlighted in the screenshot above). We just filtered the campaigns for “Remarketing” so that we saw only those campaigns.

traffic source and placement URL
(Larger view)

When you load this report, you can set the secondary dimension to “placement URL.” This option is available directly above the traffic results in the report (see the screenshot above). By default, this will tell you the number of visits and unique visits and the bounce rate by placement URL. Look for placement URLs that have high visit counts and a low bounce rate with high conversion rate. This signifies a good source (i.e. a lot of visits) of highly engaged traffic that converts rather than bounces.

Check out those websites to get a little qualitative information on your ideal demographic!

For the other metrics in our list (navigation paths, pages viewed, etc.), we set up an “advanced segment” in Google Analytics for the “remarketing” traffic demographic. This allowed us to view all of the reports available for only a subset of visitors — in this case, wherever the campaign equalled remarketing. In case you haven’t used custom segments, the Google Analytics website has a great explanation of how to use advanced segments.

If you’re also a Google customer but do not see AdWords data, then make sure to link your AdWords and Analytics accounts. If you’re not a Google customer, then similar data is available from all of the other major analytics providers: CoreMetrics, Webtrends, Omniture, etc. Your accounts person should be able to point you to similar reports.

Based on our research, we developed a new trial page (below), which includes a new screenshot, content changes, and icons that call out the product features we thought best speak to the remarketing demographic. We then reran our original trial page against this new one.

Optimized trial page
New trial page with content and features customized to the remarketing demographic. (Larger view)

Running The Successful Second Test

Over the next month, half of our remarketing traffic saw the original landing page, and half saw the newly optimized landing page.

The result? We saw a 48% increase in trial registrations for the new page!

But that boost in registrations was only half of our metric for success. Now, we had to see whether those users converted over to new paying stores. What if, for example, we saw an influx of new trial users who didn’t convert their trials over to stores? These new users would tie up our sales team and marketing efforts, while hindering our ability to convert qualified users into paying customers.

The trial lasts two weeks, so it would take at least that long for a trial-to-store conversion report to verify the quality of these new leads. We had to find another source of information to put our minds at ease.

Risk Management: Qualitative Data From Our Sales Team

When our sales team reaches out to trial users, they score the quality of the lead (i.e. the likelihood that the person will convert to a store) in our customer relationship management (CRM) system. (A CRM is a tool that businesses use to track all kinds of customer interactions, including sales and support tickets. Salesforce is probably the most common.)

The score is calculated using specific factors, such as whether the salesperson spoke verbally with the trial user, what kinds of questions the user asked, and whether the user already had an online store with another provider. So, while direct user testing for qualitative feedback was out of scope, we used these lead scores and qualitative notes from our sales team to draw conclusions about the types of visitors we were attracting. To our relief, the scores looked good!

When the first round of new trials reached their two-week limit, the trial-to-store conversion rate for this new page had improved by 57% — adding good news to the already significant increase in demos that those pages were bringing in.


In the end, we created a trial page that attracted more of the right kind of customers, or — in other words — more qualified customers and that, ultimately, led to more store purchases. This page is still live today. To see it, you have to be in the remarketing visitor demographic.

Our big take-away from this round of testing was that trying to optimize one page for all our traffic wasn’t leading to notable results. So we created different pages that catered to different users based on traffic source. If you visit Volusion’s website via any page, and then return by a remarketing source, such as an ad from Google Content Network, then you’ll see it on this special landing page.

We’re currently working on additional optimizations for different demographics, but today’s average visitor on their first visit will still see the original page. Depending on how they return later, they might see something different.

Applying Our Lessons To Your Work

As you apply some of these lessons to your work, do the following:

  • Tailor your landing pages to specific audiences. This will benefit both your customers and your business.
  • Identify the specific business goal of the test (for example, to improve the trial conversion rate of qualified leads), and clearly identify the traffic segment (for example, PPC remarketing traffic).
  • If you’re on the testing and analytics team, take specific demographics and data to your content and design team. (If you’re on the content or design team, demand details!)
  • Know what success looks like, and then get buy-in from everyone involved. Many pages, audiences and websites have multiple goals. You can’t achieve all of those goals at once. Make sure everyone agrees on the goal of this particular task.
  • Testing like this can be resource-intensive, so focus your efforts. We’re going to restrict this type of testing to our PPC traffic, at least in the short term.
  • Don’t just randomly test pages and elements.
    Inconclusive results from a poorly designed test can lead you in the wrong direction and even reduce your company’s interest in A/B testing. (For instance, we tried to test the home page and saw no actionable results, which hurt our credibility when we asked for more testing opportunities and more of our designers’ time.)
  • When you receive inconclusive results, don’t give up! Develop a new hypothesis about why, and then keep testing.
  • Remember that qualitative data is still data! It has great applications in discovering the “why” behind user behavior, and even in mitigating internal apprehensions about testing. (In our test, we used lead scores and notes from our sales team to support our claims; you could also use interviews and surveys.)
  • Focus on the empirical data!
    We didn’t distract our writer and designer with a 30-slide presentation on traffic trends for the whole website for the past five years. Instead, we isolated the traffic base to just remarketing, and then only provided metrics that would help the writer and designer create a page tailored to that audience.

Tools For Getting Started

A lot of tools are available to help you advance data-driven design in your organization. As mentioned, at Volusion, we use Google Analytics for our analytics and Google Experiments for most of our on-site A/B testing. They’re free and work great! Here are five other optimization and testing tools we love:

Last but not least, Internet, Mail, and Mixed-Mode Surveys is a great book for getting started with surveys and worth checking out!

(smk, al, il, ea)

© Ashley Moreno for Smashing Magazine, 2013.

Tags: UX Design

September 23 2013


A Five-Step Process For Conducting User Research


Imagine that this is what you know about me: I am a college-educated male between the ages of 35 and 45. I own a MacBook Pro and an iPhone 5, on which I browse the Internet via the Google Chrome browser. I tweet and blog publicly, where you can discover that I like chocolate and corgis. I’m married. I drive a Toyota Corolla. I have brown hair and brown eyes. My credit-card statement shows where I’ve booked my most recent hotel reservations and where I like to dine out.

If your financial services client provided you with this data, could you tell them why I’ve just decided to move my checking and savings accounts from it to a new bank? This scenario might seem implausible when laid out like this, but you’ve likely been in similar situations as an interactive designer, working with just demographics or website usage metrics.

We can discern plenty of valuable information about a customer from this data, based on what they do and when they do it. That data, however, doesn’t answer the question of why they do it, and how we can design more effective solutions to their problems through our clients’ websites, products and services. We need more context. User research helps to provide that context.

User research helps us to understand how other people live their lives, so that we can respond more effectively to their needs with informed and inspired design solutions. User research also helps us to avoid our own biases, because we frequently have to create design solutions for people who aren’t like us.

So, how does one do user research? Let me share with you a process we use at Frog to plan and conduct user research. It’s called the “research learning spiral.” The spiral was created by Erin Sanders, one of our senior interaction designers and design researchers. It has five distinct steps, which you go through when gathering information from people to fill a gap in your knowledge.

“The spiral is based on a process of learning and need-finding,” Sanders says. “It is built to be replicable and can fit into any part of the design process. It is used to help designers answer questions and overcome obstacles when trying to understand what direction to take when creating or moving a design forward.”

Research Learning Spiral
The research learning spiral is a five-step process for conducting user research, originated by Erin Sanders at Frog.

The first three steps of the spiral are about formulating and answering questions, so that you know what you need to learn during your research:

  1. Objectives
    These are the questions we are trying to answer. What do we need to know at this point in the design process? What are the knowledge gaps we need to fill?
  2. Hypotheses
    These are what we believe we already know. What are our team’s assumptions? What do we think we understand about our users, in terms of both their behaviors and our potential solutions to their needs?
  3. Methods
    These address how we plan to fill the gaps in our knowledge. Based on the time and people available, what methods should we select?

Once you’ve answered the questions above and factored them into a one-page research plan that you can present to stakeholders, you can start gathering the knowledge you need through the selected research methods:

  1. Conduct
    Gather data through the methods we’ve selected.
  2. Synthesize
    Answer our research questions, and prove or disprove our hypotheses. Make sense of the data we’ve gathered to discover what opportunities and implications exist for our design efforts.

You already use this process when interacting with people, whether you are consciously conducting research or not. Imagine meeting a group of 12 clients who you have never worked with. You wonder if any of them has done user research before. You believe that only one or two of them have conducted as much user research as you and your team have. You decide to take a quick poll to get an answer to your question, asking everyone in the room to raise their hand if they’ve ever conducted user research. Five of them raise their hands. You ask them to share what types of user research they’ve conducted, jotting down notes on what they’ve done. You then factor this information into your project plan going forward.

In a matter of a few minutes, you’ve gone through the spiral to answer a single question. However, when you’re planning and conducting user research for an interactive project or product, each step you take through the spiral will require more time and energy, based on the depth and quantity of questions you need to answer. So, let’s take an in-depth spin through the research learning spiral. At each step of the spiral, I’ll share some of the activities and tools I use to aid my teams in managing the complexity of planning and conducting user research. I’ll also include a sample project to illustrate how those tools can support your team’s user research efforts.

Clustering Your Framing Research
I like to write my research-framing questions on sticky notes, so that I can better prioritize and cluster them. The most important questions are translated into my research objective and captured in my research plan.

1. Objectives: The Questions We Are Trying To Answer

Imagine that you’re in the middle of creating a next-generation program guide for TV viewers in Western Europe. Your team is debating whether to incorporate functionality for tablet and mobile users that would enable them to share brief clips from shows that they’re watching to social networks, along with their comments.

“Show clip sharing,” as the team calls it, sounds cool, but you aren’t exactly sure who this feature is for, or why users would want to use it.

Step back from the wireframing and coding, sit down with your team, and quickly discuss what you already know and understand about the product’s goal. To facilitate this discussion, ask your team to generate a series of framing questions to help them identify which gaps in knowledge they need to fill. They would write these questions down on sticky notes, one question per note, to be easily arranged and discussed.

These framing questions would take a “5 Ws and an H” structure, similar to the questions a reporter would need to answer when writing the lede of a newspaper story:

  • “Who?” questions help you to determine prospective audiences for your design work, defining their demographics and psychographics and your baseline recruiting criteria.
  • “What?” questions clarify what people might be doing, as well as what they’re using in your website, application or product.
  • “When?” questions help you to determine the points in time when people might use particular products or technologies, as well as daily routines and rhythms of behavior that might need to be explored.
  • “Where?” questions help you to determine contexts of use — physical locations where people perform certain tasks or use key technologies — as well as potential destinations on the Internet or devices that a user might want to access.
  • “Why?” questions help you to explain the underlying emotional and rational drivers of what a person is doing, and the root reasons for that behavior.
  • “How?” questions help you go into detail on what explicit actions or steps people take in order to perform tasks or reach their goals.

In less than an hour, you and your team can generate a variety of framing questions, such as:

  • “Who would share program clips?”
  • “How frequently would viewers share clips?”
  • “Why would people choose to share clips?”

Debate which questions need to be answered right away and which would be valuable to consider further down the road. “Now is your time to ask the more ‘out there’ questions,” says Lauren Serota, an associate creative director at Frog. “Why are people watching television in the first place? You can always narrow the focus of your questions before you start research… However, the exercise of going lateral and broad is good exercise for your brain and your team.”

When you have a good set of framing questions, you can prioritize and cluster the most important questions, translating them into research objectives. Note that research objectives are not questions. Rather, they are simple statements, such as: “Understand how people in Western Europe who watch at least 20 hours of TV a week choose to share their favorite TV moments.” These research objectives will put up guardrails around your research and appear in your one-page research plan.

Don’t overreach in your objectives. The type of questions you want to answer, and how you phrase them as your research objective, will serve as the scope for your team’s research efforts. A tightly scoped research objective might focus on a specific set of tasks or goals for the users of a given product (“Determine how infrequent TV viewers in Germany decide which programs to record for later viewing”), while a more open-ended research objective might focus more on user attitudes and behaviors, independent of a particular product (“Discover how French students decide how to spend their free time”). You need to be able to reach that objective in the time frame you have alloted for the research.

Creating Design Hypotheses
In some projects, hypotheses may be expressed as written statements, which would then be taken into account when selecting methods. However, sometimes you’ll need to generate hypotheses in the form of design sketches, which would then be pulled into the research planning process and be used as stimuli in your design methods.

2. Hypotheses: What We Believe We Already Know

You’ve established the objectives of your research, and your head is already swimming with potential design solutions, which your team has discussed. Can’t you just go execute those ideas and ship them?

If you feel this way, you’re not alone. All designers have early ideas and assumptions about their product. Some clients may have initial hypotheses that they would like “tested” as well.

“Your hypotheses often constitute how you think and feel about the problem you’ve been asked to solve, and they fuel the early stages of work,” says Jon Freach, a design research director at Frog. Don’t be afraid to address these hypotheses and, when appropriate, integrate them into your research process to help you prove or disprove their merit. Here’s why:

  • Externalizing your hypotheses is important to becoming aware of and minimizing the influence of your team’s and client’s biases.
  • Being aware of your hypotheses will help you select the right methods to fulfill your research objective.
  • You can use your early hypotheses to help communicate what you’ve discovered through the research process. (“We believed that [insert hypothesis], but we discovered that [insert finding from research].”)

Generating research hypotheses is easy. Take your framing questions from when you formulated the objective and, as a team, spend five to eight minutes individually sketching answers to them, whether by writing out your ideas on sticky notes, sketching designs and so forth. For example, when thinking about the clip-sharing feature for your next-generation TV program guide, your team members would put their heads together and generate hypotheses such as these:

  • Attitude-related hypothesis
    “TV watchers who use social networks like to hear about their friends’ favorite TV shows.”
  • Behavior-related hypothesis
    “TV watchers only want to share clips from shows they watch most frequently.”
  • Feature-related hypothesis
    “TV watchers are more likely to share a highlight from a show if it’s popular with other viewers as well.”

3. Methods: How We Plan To Fill The Gaps In Our Knowledge

Once you have a defined research objective and a pile of design hypotheses, you’re ready to consider which research methods are most appropriate to achieving your objective. Usually, I’ll combine methods from more than one of the following categories to achieve my research objective. (People have written whole books about this subject. See the end of this article for further reading on user research methods and processes.)

Building a Foundation
Methods such as contextual inquiry, whereby you spend time with people where they live and work, help you build a strong foundational understanding of how they live and of potentially unmet needs.

Building a Foundation

Methods in this area could include surveys, observational or contextual interviews, and market and trend explorations. Use these methods when you don’t have a good understanding of the people you are designing for, whether they’re a niche community or a user segment whose behaviors shift rapidly. If you have unanswered questions about your user base — where they go, what they do and why — then you’ll probably have to draw upon methods from this area first.

Generating Inspiration and Ideas
Methods such as card sorting can help you understand how people organize and prioritize different types of information that’s important to them — as well as help you generate new ideas and concepts that could prove critical in your interactive designs.

Generating Inspiration and Ideas

Methods in this area could include diary studies, card sorting, paper prototyping and other participatory design activities. Once I understand my audience’s expertise and beliefs well, I’m ready to delve deeper into what content, functionality or products would best meet their needs. This can be done by generating potential design solutions in close collaboration with research participants, as well as by receiving their feedback on early design hypotheses.

Specifically, we can do this by generating or co-creating sketches, collages, rough interface examples, diagrams and other types of stimuli, as well as by sorting and prioritizing information. These activities will help us understand how our audience views the world and what solutions we can create to fit that view (i.e. “mental models”). This helps to answer our “What,” “Where,” “When” and “How” framing questions. Feedback at this point is not meant to refine any tight design concepts or code prototypes. Instead, it opens up new possibilities.

Evaluating and Informing Design
Methods such as usability testing can help us refine and improve existing design ideas and website or application designs, as well as uncover gaps in knowledge that we may not have considered. While what’s shown above is a formal usability testing lab set-up, there are many ways to conduct similar tests with a wide range of tools, both on site and remotely.

Evaluating and Informing Design

Methods in this area could include usability testing, heuristic evaluations, cognitive walkthroughs and paper prototyping. Once we’ve identified the functionality or content that’s appropriate for a user, how do we present it to them in a manner that’s useful and delightful? I use methods in this area to refine design comps, simulations and code prototypes. This helps us to answer questions about how users would want to use a product or to perform a key task. This feedback is critical and, as part of an iterative design process, enables us to refine and advance concepts to better meet user needs.

Let’s go back to our hypothetical example, so that you can see how your research objective and hypotheses determine which methods your team will select. Take all of your hypotheses — I like to start with at least 100 hypotheses — and arrange them on a continuum:

Ranking of Research Hypotheses
I like to write all of my research hypotheses on sticky notes, and cluster them to identify how they may be proved or disproved through different research methods.

On the left, place hypotheses related to who your users are, where they live and work, their goals, their needs and so forth. On the right, place hypotheses that have to do with explicit functionality or design solutions you want to test with users. In the center, place hypotheses related to the types of content or functionality that you think might be relevant to users. This point of this activity is not to create an absolute scale or arrangement of hypotheses that you’ve created so far. The point is for your team to cluster the hypotheses, finding important themes or affinities that will help you to select particular methods. Serota says:

“Choosing and refining your methods and approach is a design project within itself. It takes iteration, practice and time. Test things out on your friends and coworkers to see what works and the best way to ask open-ended questions.”

Back to our clip-sharing research effort. When your team looks at all of the hypotheses you’ve created to date, it will realize that using two research methods would be most valuable. The first method will be a participatory design activity, in which you’ll create with users a timeline of where and when they share their favorite TV moments with others. This will give your team foundational knowledge of situations in which clips might be shared, as well as generate opportunities for clip-sharing that you can discuss with users.

The second method will be an evaluative paper-prototyping activity, in which you will present higher-fidelity paper prototypes of ideas on how people can share TV clips. This method will help you address your hypotheses on what solutions make the most sense in sharing situations. (Using two methods is best because mixing and matching hypotheses across different categories within a research session could confuse research participants.)

Conducting the Research
You can conduct multiple methods when meeting with users. My preference is to conduct at least two different methods, moving from hearing people share stories about their lives to encouraging them to be creative in participatory activities.

4. Conduct: Gather Data Through The Methods We’ve Selected

The research plan is done, and you have laid out your early hypotheses on the table. Now you get to conduct the appropriate research methods. Your team will recruit eight users to meet with for one hour each over three evenings, which will allow you to speak with people when they’re most likely to be watching TV. Develop an interview guide and stimuli, and test draft versions of your activities on coworkers. Then, go into the field to conduct your research.

When you do this, it’s essential that you facilitate the research sessions properly, capturing and analyzing the notes, photos, videos and other materials that you collect as you go.

Serota also recommends thinking on your feet: “It’s all right to change course or switch something up in the field. You wouldn’t be learning if you didn’t have to shift at least a little bit.” Ask yourself, “Am I discovering what I need to learn in order to reach my objective? Or am I gathering information that I already know?” If you’re not gaining new knowledge, then one of the following is probably the reason why:

  • You’ve already answered your research questions but haven’t taken the time to formulate new questions and hypotheses in order to dig deeper (otherwise, you could stop conducting research and move immediately into synthesis).
  • The people who you believed were the target audience are, in fact, not. You’ll need to change the recruitment process (and the demographics or psychographics by which you selected them).
  • Your early design hypotheses are a poor fit. So, consider improving them or generating more.
  • The methods you’ve selected are not appropriate. So, adapt or change them.
  • You are spending all of your time in research sessions with users, rather than balancing research sessions with analysis of what you’ve discovered.

Conducting Research Synthesis
Our research teams prefer to externalize all of the data we’ve collected throughout the research process. This helps us to find fresh connections and patterns, which often lead to more powerful research findings.

5. Synthesis: Answer Our Research Questions, And Prove Or Disprove Our Hypotheses

Now that you’ve gathered research data, it’s time to capture the knowledge required to answer your research questions and to advance your design goals. “In synthesis, you’re trying to find meaning in your data,” says Serota. “This is often a messy process — and can mean reading between the lines and not taking a quote or something observed at face value. The why behind a piece of data is always more important than the what.”

The more time you have for synthesis, the more meaning you can extract from the research data. In the synthesis stage, regularly ask yourself and your team the following questions:

  • “What am I learning?”
  • “Does what I’ve learned change how we should frame the original research objective?”
  • “Did we prove or disprove our hypotheses?”
  • “Is there a pattern in the data that suggests new design considerations?”
  • “What are the implications of what I’m designing?”
  • “What outputs are most important for communicating what we’ve discovered?”
  • “Do I need to change what design activities I plan to do next?”
  • “What gaps in knowledge have I uncovered and might need to research at a later date?”

So, what did your team discover from your research into sharing TV clips? TV watchers do want to share clips from their favorite programs, but they are also just as likely to share clips from programs they don’t watch frequently if they find the clips humorous. They do want to share TV clips with friends in their social networks, but they don’t want to continually spam everyone in their Facebook or Twitter feed. They want to target family, close friends or individuals with certain clips that they, the user believes, would find particularly interesting.

Your team should assemble concise, actionable findings and revise its wireframes to reflect the necessary changes, based on the answers you’ve gathered. Now your team will have more confidence in the solution, and when your designs for the feature have been coded, you’ll take another spin through the research learning spiral to evaluate whether you got it right.

Further Reading On User-Research Practices And Methods

The spiral makes it clear that user research is not simply about card sorting, paper prototyping, usability studies and contextual interviews, per se. Those are just methods that researchers use to find answers to critical questions — answers that fuel their design efforts. Still, understanding what methods are available to you, and mastering those methods, can take some time. Below are some books and websites that will help you dive deeper into the user-research process and methods as part of your professional practice.

(al) (il)

© David Sherwin for Smashing Magazine, 2013.

Tags: UX Design

September 12 2013


Designing The Words: Why Copy Is A Design Issue


The relationship between copy and design has been covered many times on Smashing Magazine. Working in a content-focused industry, we need to keep this issue pretty close to heart; creating great copy is pointless if it is visually uninspiring or unreadable. Likewise, if the content doesn’t deliver, then even the most attractive page won’t hold the reader’s attention.

Yet much of the discussion so far has concentrated on issues such as microcopy — the small bits of text that instruct the reader on how to interact with the website — and the minutiae of user experience. This stuff is essential, of course, but in this article we’d like to broaden our focus to look at some of the fundamental mistakes behind bad copy.

We’ve chosen to do this for two reasons. First, we hope it will help budding writers out there avoid the most common pitfalls of the job. Secondly — and perhaps more importantly — we want to stress the importance of content as part of the user experience mix.

A while back, Elliot Nash discussed the responsibility of the designer. Designers “want control of the entire user experience,” he said. “We want to ensure repeat use, and high engagement — and to do so, we want to design every little piece of whatever it is we’re working on. After all, we are largely responsible for the performance of the result.” However, he argued, “most of us don’t want to own the work it takes to execute this full scale implementation.” For us, leaving the copy out of the equation is a fundamental error.

In practice, design is a process that should happen with content, not just for it, and the practice of creating a page full of lorem ipsum and getting the copywriter to fill in the blanks just doesn’t cut it anymore. The cross-discipline approach of using design as a way to clearly communicate information, known as communication design, is growing. However, no matter how clearly laid out a design is or how elegant the infographics are, our number one visual tool for relaying information to the audience is well-written text.

The Importance Of Editing

Bill Beard has written about the importance of using techniques such as multivariant testing to optimize microcopy. With large bodies of text, this becomes more of a challenge. Fortunately, authors, journalists and copywriters have been wrestling with this challenge for years, which is how we came up with the concept of editing. The main difference between editing and testing is that, rather than observing an average member of the public navigate your copy, you enlist someone who has a wealth of experience in working with the written word.

A lot of editing is nuts and bolts stuff: fixing the grammar and punctuation, removing repetition, and making text easier to scan. However, like many user-centered design practices, it also means delving into the fundamental assumptions behind your writing, addressing how you think about the words, your audience and yourself. It is this process that will turn a precocious but essentially terrible teenage poet into a good writer. Yet, looking at so much of the copy online, in magazines and on billboards, we can see that plenty of professionals out there haven’t yet mastered it.

Below are the three things that every writer and copywriter must learn to avoid:

1. Self-Importance

Of all the mistakes new writers make, this is probably the most understandable. When you begin writing, you want, first and foremost, to make your mark. Your writing isn’t just another entry in the world’s growing collection of largely unread manuscripts; it’s a definitive text that future scholars will paw over for hidden meaning for years to come. You’re the voice of a generation, damn it!

Copywriters face the same problem. By now, probably about half the words ever written were penned for marketing purposes, and you don’t want your work to be another drop in that increasingly deep ocean of marketing blah. You want to stand out, to be something special. That’s why you end up writing copy like this:

“It’s not a journey. Every journey ends, but we go on. The world turns and we turn with it. Plans disappear. Dreams take over. But wherever I go, there you are. My luck, my fate, my fortune.”

Believe it or not, this wasn’t written in the Moleskin of a sensitive teenager. It was written by professionals, advertising a globally recognized brand with a budget big enough to hire Brad Pitt to read it like so:

Both the poor souls behind this crime of an advert and the 15-year-old who writes poetry about how everyone is superficial except himself have the same problem. They both want to stand out, to draw prestige, to be memorable; however, whether due to youth or the fact that they sell scented liquid, they don’t actually have much to say.

So, how do you avoid doing this yourself?

One of the most common pieces of writing advice in the world is “Write what you know.” Conversely, it’s a good idea to know what you’re writing about. You will often save yourself a lot of trouble simply by asking, “Why would anyone want to read this?” The answer could be “because it’s useful” or “because it’s funny” or any number of other reasons, but you should be able to answer that question before putting words to paper. I’m sure no one asked why anyone would want to hear “The world turns and we turn with it.”

It’s a line that doesn’t actually tell the audience anything. It’s the sort of vacuous line that sounds meaningful but contains no information. You can argue that it’s making the case for Chanel No. 5 as a constant in an ever-changing world, but the portentous tone and the layering on of hilarious faux-meaningful truisms, such as “Every journey ends, but we go on,” drown out any point the text could have conceivably made.

The teenaged poet is likely to get better as they get older because they will learn more and will have more to write about. By the same token, if your copy is to carry weight, whether for an advert, marketing copy or a company website, then you’ll need to know what you’re trying to communicate and why anybody would want to hear it.

2. The Wrong Tone

Young writers are a lot like magpies, happy to steal anything that looks shiny and put it to use in their own creation. Studying Shakespeare in school? In it goes. Read Edgar Allen Poe’s The Raven and thought it sounded cool? You’re having that. Enjoy the teenaged banter in Buffy the Vampire Slayer? That goes in, too.

The result is a sort of Frankenstein’s monster of a writing style. And you know what? That’s fine. As with most things, imitation is a great way to learn how to write, and, with time, copying the good bits of others will mutate into something that conceivably sounds like your own voice.

The same is true of professionally written copy. When Barclay’s heard of cash machines being described as “holes in the wall,” it liked it and took it. World of Warcraft liked the Chuck Norris jokes (or facts) that were getting passed around a few years ago and so got Chuck Norris to appear in an advert based on them.

But if you don’t take tone into account when writing copy professionally, the results can come out a little on the weird side.

For example, check out Kingpin Social. This company offers courses in social interaction. Fair enough — plenty of people out there find it difficult to talk to others, and a company that offers techniques and training to help you overcome that difficulty would be welcome. The problem is that the website uses phrases like, “We will teach you to utilize proven social methodologies that will provide you with success in your personal, career or corporate relationships,” and “Every person deserves the confidence to achieve the optimal result in every social situation.” Imagine somebody using phrases like these in conversation; what opinion would you form of them?

A course like this needs to appear inviting to people who are worried about coming out of their shell, while also demonstrating that this company is made up of people who are good at speaking with others. Using words like “utilize” and “optimal” achieves the exact opposite effect.

The only reason anyone uses those words in marketing copy is to appear clever, and using words to appear clever is what bad teenage poets do. Never say “utilize” or “optimal” when you can say “use” and “best” instead.

Sometimes you end up with a patchwork effect — for example, using a simple, effective phrase like “What We Do,” and then following it up by telling readers that you are “a performance-based retail marketing technology and analytics company focused on helping retailers deliver relevant advertising that converts.”

In user-centered design, one often speaks of “personas.” A persona is a fictional character who represents the typical person you are designing for. You would think about their needs, their wants, the knowledge they will bring to your design, all of which will help you to construct a design around them.

A good way to avoid this pitfall in your own copy is to try the reverse. Think of your client’s business as a character you’re writing dialogue for. What sort of person is this business? What are their likes and dislikes? What sorts of things are they likely to say? Read the copy out loud. Does it sound like the sort of thing your imaginary person would say? If not, why not?

A particularly good example of this is the Scottish craft brewery Brewdog. Everything, from its website to its packaging, is written to sound like somebody you wouldn’t mind going for a beer with — passionate, funny and just a little surreal.

brew dog_2_mini
Brewdog — passionate, funny and just a little surreal…

The Dead Pony Club drink is introduced thus: “Being shot from a Hoppy Howitzer beats the hell out of trotting round a submissive paddock. That’s why the internal combustion engine got mounted onto two wheels.” But it avoids the territory of “The world turns” by adding, “This pale ale is chopped, tuned and ready to roll. Fuel up and hold tight, this little thoroughbred kicks like a mule.” However unpoetic the language, there’s never any doubt that the copy is talking about beer.

3. Self-Awareness

This is perhaps the hardest and most important thing for any writer to learn. It’s why many of us just don’t bother. We all dive in at the start without hesitation, enjoying the sheer joy of creation for its own sake and assuming that we’re producing pure written gold merely because we’re the ones doing it — until one day, it suddenly occurs to us, “What if I’m not any good?” Yes, I know, it was a surprise to me, too.

Some writers simply shake this thought loose and carry on as before. Many others stop right then and there, too paralyzed to ever dare setting down another word. However, every writer has to go through this step before they actually start being good. It’s when they start asking the question mentioned at the beginning, “Why would anyone want to read this?” and they start working to come up with a good answer. It’s when they start trying to read their work with eyes other than their own; and if you can’t do that, then copywriting really isn’t where you want to be.

Writers who struggle to overcome this obstacle are often so focused on selling their product that they forget the advert will appear in a wider context — with disastrous results. This is probably why Sony produced a series of incredibly racist billboard ads for its Playstation Portable. It’s also likely why American Apparel thought Hurricane Sandy was in any way an opportunity for social media marketing. At the time of writing, the Royal Bank of Scotland has just hit a marketing disaster because its campaign, which tells people to “Search RBYes,” doesn’t take into account that Google autocorrects “RBYes” to “Rabies.”

Sadly, teaching someone to “be more self-aware” is not really possible. Most of us learn to do it by making a lot of mistakes. But, more than anything, it takes a bit of imagination, the stuff that both copywriters and designers are supposed to have in droves. Of course, this doesn’t mean that designers now have to be fully proficient copywriters who can proofread and redraft words while setting layouts. Nor does it mean that copywriters need to be wizards with design software (although a little knowledge of the basic tools and concepts wouldn’t hurt). However, it certainly means that copywriters and designers need to work more closely together than ever before.


If you would like to learn more, we strongly recommend reading The Craft of Words, Part One: Macrocopy by the Standardistas, a great exploration of how design and copywriting intersect. All too often, design and copywriting take place in their own little bubbles, with each practitioner unaware of what the other is doing. But for the copy to be of any use, the writer needs to be aware of the context in which it will appear.

Front page image credits: Sean MacEntee.

(al, ea, il)

© Sam Wright for Smashing Magazine, 2013.

September 03 2013


Flat And Thin Are In


In the last several years, we’ve seen a rapid shift in software and app interface design, from 3-D and skeuomorphic to flat and minimal. Although this trend has become nearly ubiquitous, let’s take a moment to consider how we got here and what influence it’s having on interface design as a whole. Additionally, I’ll share some tips and considerations on designing flat interfaces.

Interfaces on a Windows Phone 8 and Apple’s iOS 7.

What Happened?

So, how did the collective consciousness swing from a love of all things textured, beveled and drop-shadowed to a desire for flat colors and simple typography? Many factors have fuelled this transition, but here are a few that stand out.

Information Overload

As a constantly connected culture, we deal with a nonstop flow of information, some of it important and relevant, most of it not. We are constantly evaluating, filtering and, of course, creating content, and it all gets pretty exhausting. In addition, much of our content consumption has moved to devices with small screens, thus exacerbating that feeling of overload. Becoming overwhelmed is all too easy, and a reduction of clutter in a user interface (UI) can create a little visual zen.

Free of clutter: Geckoboard‘s visualisations are designed to make key data easy to interpret at a glance.

Simplicity Is Golden

In a similar trend, a lot of disruptive Web apps and services are offering highly focused tools with extremely limited feature sets. Whereas traditional software developers tend to load their products with a glut of features to justify the high price tags, this shift towards focused micro-apps favors simplicity over feature set. Simpler apps mean simpler interfaces.

Beautiful and minimal: The Blue weather app by Oak.

Content Is King, Again

As so often happens when new devices and technologies enter the market, we become fascinated by what they can do and how we can advance interactivity. This interface frenzy is usually followed by a return to a focus on content. Media consumption, whether of text, audio or video, is probably the activity we engage in most on our devices, and for that use case, we just want the interface to get out of the way.

Technological Literacy

As smartphone and tablet adoption has rapidly penetrated all user demographics, concern about the obviousness of controls has reduced. Whereas we once feared that users might miss a button if it didn’t pop off the screen, we are now willing to explore subtler interactions. Windows 8 and Chrome for Android even support touch commands that start off screen, without any visual indicator.

Fitbit’s dashboard is a bright, bold, and easy approachable visual identity.

Technology’s Influence

Most software will be limited by the platform on which it runs. Screen dimensions and pixel density are the confining factors of hardware. A minimal interface demands a very limited design palette, which means that every element needs to sing. Typographic scale and font weight will largely determine both the aesthetics and usability of a flat design.

If your target devices can’t handle that level of nuance, you’re out of luck. As screen size and pixel density continue to increase on mobile devices, thinner and smaller type can be presented with better clarity. Of course, support for @font-face has also boosted the appeal of minimal typographic-focused designs.

Live sales monitoring with Wallmob: keeping track of the figures from any device that has a browser.

Responsive Design

With the proliferation of connected devices of various dimensions, UIs have had to become more fluid, and the responsive design movement has responded. While responsive design does not call for a particular aesthetic, one could certainly argue that flat UIs lend themselves to it more easily than many other styles. The other advantage of minimal design is the reduction in page weight and loading time.

To the point and weightless: OnSite. (Larger view)

Best Practices

OK, enough with the theory. Let’s get down to some practical considerations. Creating an effective minimal design is surprisingly challenging. As you strip away common UI tricks (drop shadows, bevels, textures and the like), you quickly realize how important the few remaining elements become. While the following tips are mostly universally applicable, they are especially relevant to flat UIs.

Before You Begin

As with any project, the first step is to ensure that your chosen style makes sense. Before diving into a flat design, make sure it aligns with your target users’ sensibilities and your target platform, devices and application type. Following a trend is pointless if it’s the wrong solution for your project.


The process you follow is pretty important, no matter what style you are adopting. Here are some ideas to keep in mind when aiming for simplicity.

  • When designing a minimal interface, I often seek inspiration from the pre-PC era, when designers and artists did more with less. This is a perfect opportunity to revisit some of the design greats, such as Josef Müller-Brockmann and Wim Crouwel. I also look to minimal painters such as Ellsworth Kelly, architects such as Mies van der Rohe and industrial designers such as Dieter Rams.
  • Walking away from the work is also helpful. Flat and minimal design is all about nuance. So, taking a break and coming back later with fresh eyes is often more effective than hammering away.
  • Comparing versions side by side is also helpful. After moving a line of type up and down by 5 pixels for 20 minutes, I’ll save two versions and compare them; the better option is quickly revealed.
  • Because the relative scale of objects plays such a critical role, check your design concepts on a variety of target devices early on to confirm that they work.
  • As you work, keep asking yourself, “Do I really need that?” Getting attached to an item that you find clever is so easy, but we must always look for elements to cut or simplify. Ditching something that you’ve put so much work into is always hard, but editing is critical.

Global Closet: an interactive game designed for National Geographic Education by The Workshop.


The grid plays a crucial role in so much of interface design, and no exception here. As you attempt to establish order and make usability intuitive across a project with a restricted set of visual elements, the grid is there to help.

  • The grid establishes more than visual order. Use it to define content and functional groups. You don’t always need a line or box to group a set of objects. Simple alignment and spacing can help the user understand an interface’s structure.
  • Try breaking the grid with elements of particular importance to really draw the user’s attention. Without fake 3-D trickery, basic layout principles such as scale and placement become the best elements by which to establish visual hierarchy.
  • Experiment with a denser grid than you are accustomed to working with. When you dramatically reduce the visual palette, you may find that the design supports a more complex structure without feeling messy. See what additional information you can convey through placement alone.

Live School iPad app by Rossul Design.


Obviously, color is always a key component of visual design. With minimal interfaces, it is even more critical.

  • Consider a broader palette. If you’re like me, then you feel that a narrower palette usually leads to a more functional interface. Ending up with an overwhelming rainbow is all too easy. Here’s your chance to really stretch; and with so few elements to work with, you can feel good about expanding the palette.
  • When setting the palette, test your selected hues across a wide value spectrum to make sure they behave in lighter and darker versions.
  • You’ll probably want to experiment with tone on tone and stark type. Experiment with your palette early on to ensure that you have enough range for both subtle and high-contrast elements.

TriplAgent‘s visual design makes use of a stunning color palette.


When it comes to flat content-driven websites, typography is the hero.

  • While serifs are certainly an option, san serifs almost always feel cleaner.
  • Look for a font family with a wide variety of weights and styles. You certainly don’t need to use them all, but a broad selection will help you define the hierarchy more sharply, and you might also find that certain weights render better in certain environments.
  • Don’t be afraid to pair fonts with extreme differences in size and weight to create visual order. Try pairing an oversized ultra-thin font for headlines with a small medium-weight font for the body.
  • Watch out for legibility in fonts. It sounds silly, I know, but you will be asking a lot from your chosen fonts, so make sure they have great legibility at any scale.

Clean and legible typography on Siteleaf.


In a flat UI, indicating that an element is interactive can be tricky. Here are a few methods I rely on.

  • Contrast is key. If the majority of the layout is white, then you could give interactive elements some color. If the design is primarily text-driven, then you could use simple iconography. If the headlines are large and all lowercase, you could make links small and all uppercase. You get the idea.
  • Conventional placement helps as well. If you use a slim chevron for a back arrow, place it in the upper-left corner, where users would expect to find the back button.
  • As you layer more features on the page, making every interactive element look like a button wouldn’t make sense. The interface should be as intuitive as possible. But in cases where interaction is particularly complex or unexpected, make it easy to recover from mistakes.
  • Drop-downs, modal windows, fly-outs and other layered elements can be troublesome to implement in a flat design. Leverage sharp contrast, borders or tinting to visually separate the levels of interaction.

Design elements presented in a simple layout and with optimal contrasts: Taasky.

Wrapping Up

I don’t believe in hard and fast rules in design. Seeing designers so heavily invested in creating extremely clean and simple user interfaces is pretty awesome. Does exploring flat design mean using absolutely no gradients or shadows? Of course not. In fact, some of the most intriguing work I’ve seen recently balances flatness and dimension by presenting content intelligently while keeping the interaction intuitive.

In this highly connected, information-rich and feature-packed digital world we live in, minimal design’s widespread resurgence is refreshing to witness. It is by no means the right solution for everything (no style is), but when applied thoughtfully and appropriately, it makes for a highly usable and enjoyable digital experience.

(al) (ea)

© Adrian Taylor for Smashing Magazine, 2013.

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

Don't be the product, buy the product!

YES, I want to SOUP ●UP for ...