CATEGORY
DID YOU KNOW WE HAVE A PODCAST?

Become a Better Marketer. Anytime, Anywhere.

Listen and learn on the go with Unbounce’s Call to Action marketing podcast. Tune in and get inspired in the car, while you cook, or at the gym.

Wayfinding Conventions: Design Your Landing Pages to Guide Visitors to Action

wayfinding-post
We rely on familiar visual cues to guide us – both in the real world and online. Image by Oran Viriyincy via Flickr.

To successfully travel from point A to point B in the real world, we rely on a wide variety of cues from our physical environment for help. Good signage prevents us from getting lost. It helps us reach our destination quickly, economically or easily.

Good signage, then, is like a great tour guide. Great tour guides inform people of where they came from, where they are now and where they’ll go next.

Marketers are like tour guides, except we call our tours the customer’s journey to purchase.

And just like in the real world, we rely on a series of wayfinding conventions – familiar visual cues – to guide our “tourists” towards the goal.

Here’s how you can use wayfinding conventions to help guide visitors toward the goal, create better experiences and increase conversion rates.

What are wayfinding conventions?

Wayfinding conventions are essentially rules and symbols that help us orient ourselves. They help us figure out where we are and what paths are available to us.

In the real world, we rely on cues such as street signs, traffic lanes, crosswalks and building numbers. Many of them are so ingrained in us that we only notice them in their absence.

Try the exercise below.

What might the rectangle below represent?

Figure B

Figure A.

Not sure? How about now?

Figure D

Figure B.

Okay, so it’s a door.

So, why did Figure A fail to do its job as a door?

Because most objects, like buttons on a landing page, have two jobs:

  • Job #1: Act like a door by opening and closing to provide a path between two divided areas
  • Job #2: Look like a door by using standard dimensions, symbols and affordances (such as a doorknob) expected of a door

These are wayfinding conventions.

Don’t make users think

The cost of Figure A failing to look like a door is that it makes us think (see: Steve Krug).

It disobeyed those rules that doors tend to follow, and would lead to an awfully frustrating experience for anyone in need of a bathroom.

womens-bathroom

When you make users think, you create friction and you reduce conversion rates.

Effective conversion optimization moves user from confused to informed, from frustrated to relieved and from lost to inspired. It optimizes for action.

To optimize for action, your landing pages need to include cues that acknowledge where users came from and where they should go next.

Use position and color to establish priority

Position and color, or structure and style, are among the first elements you should test on your landing page. They help impatient visitors understand what they can and should do as quickly as possible. Color and position establish visual priority.

Consider, for example, exit signs. Where are they located in a movie theater? And when you imagine an exit sign, what does it look like?

Probably something like this:

exit-signs

You immediately know where and what to look for.

That’s because exit signs use wayfinding conventions. They’re typically all caps, right? And they share that same exit sign typography and they’re almost always well above eye-level.

The same applies to your landing pages. Good cues provoke action, but they also help you call attention to page elements that are most important.

Evaluate your landing pages with this guideline.

What is the main goal of your landing page? Do all design elements support that goal? Do your buttons look like buttons? Do they contrast with the rest of your page and beg to be clicked?

A poor example of color and position

Consider the first step of investment company Vanguard’s onboarding process.

vanguard-560
Click for larger image.

Three gradient buttons tell us there are three actions that we can perform: go back, cancel, or continue.

But, there are a few issues:

  • The “Continue” button is isolated from the radio button inputs. Don’t make users search for a way to proceed. Buttons should be positioned in a way that allows users to immediately send their information, which is often at the bottom or to the right of inputs.
  • The step labels raise questions. Why is step #5 labeled “Next steps”? I thought the last step in the flow would be, well, the last step. You’re telling me there’s more? If elements of your landing page prompt questions, either answer them immediately or cut them from the page.
  • Counter-intuitive colors. We connote red with stop, pause, caution, and danger. And blood… JK. ;) Using a red button to “Continue” makes users stop, think and actually read the label of the button before proceeding.

A better example from Netflix

Netflix’s design incorporates a lot of red, but their landing pages do a better job of using color and position effectively.

The page makes it immediately clear where I should click to continue.

Netflix-560
Click for larger image.

Where could this page be improved?

Use clear, descriptive button copy

In the example from Netflix above, “Continue” fails to explain where the user will go after clicking.

Good button copy communicates to users what’s behind the door, or where their click will take them next on the tour. It needs to be transparent and anticipate (and answer) any questions the user might have:

  • What will happen if I click?
  • Will you let me learn more by downloading a PDF, or do I have to request a sales demo?
  • Will you ask for my credit card information, or can I just start my trial without one?
  • Is this form 1 of 1, or 1 of 4?

Avoid using buttons with mysterious or misleading outcomes.

Instead, opt for precise language, such as “Request Demo” over vague language such as “Get Started.”

buttons

“Get Started” may be more compelling, but it’s also misleading and likely to deliver a frustrating user experience when I realize I can’t actually get started right now (and instead must request a demo or contact sales).

Most importantly, it’s a missed opportunity to build trust.

To optimize for trust is to optimize for profit, not clicks.

Become a great tour guide (get out of the way)

The best tour guides are are often the ones that you don’t remember. They let the tour – the experience – do the work. Their voices don’t distract you from the city’s history and their pace is just right. It neither exhausts nor bores you. It’s all just right.

Similarly, using wayfinding conventions help to create an experience where the visitor forgets that there is a marketing and development team behind-the-scenes, hard at work trying to create a frictionless experience.

They don’t remember how many steps they took to create an account or complete a purchase – they just know that it was really easy.

And that’s what they’ll tell their friends.

Over to you – which wayfinding conventions do you use on your landing pages to help users find their way?

— Vincent Barr


wayfinding-post

About Vincent Barr
Vincent Barr is curious. He performs online marketing, web analytics, and split testing at MongoDB. He teaches digital marketing at General Assemb.ly. If you're curious, you can Visit VincentBarr.com and join his mailing list.
» More blog posts by

Comments:

  1. Daniel Daines-Hutt

    Great pointers Vincent

    Just building out a few new landing pages today so this is incredibly helpful

    Ambiguous button text can make a huge difference!

    A colleague just saw a 30% CTR increase by changing the button copy alone!

    Thanks again

    Daniel Daines-Hutt

    (0)
    Reply
    • Vincent Barr

      Thanks, Daniel!

      Awesome to hear :)

      I skimmed your website quickly and, in case it’s helpful, I listed a few of homepage elements that stood out to me as working well followed by a few suggestions for how you can improve performance further, below.

      Elements that are working well:
      -Webform: use of arrow to clearly indicate where a user should go to get started
      -Free tool: you encourage the user to *try* the tool right from the homepage before registering – which demonstrates confidence in your service and provides visitors with value that can build trust. Companies such as UserTesting, Optimizely, and HubSpot have had a lot of success with this tactic)
      -Social Proof: logos of where your product has been featured
      -Headline: clear, jargon-free, easy-to-read and short. Now that you’ve got the visitor’s attention, you then answer the ‘how’.

      Suggestions to improve performance:
      -Webform: move it above the fold; it *just* misses the 600px mark.
      -Webform: distinguish the user’s actual input from the placeholder text by setting the input font color to a dark grey/black. For example, when entering text into the Email Address field, users will expect the font color to change from light grey (placeholder) to a darker color (user input), providing them with feedback on their progress and a visual cue for when they can try submitting the form.
      -Webform: clear placeholder text when user focuses (clicks) on a field. This is in place on all fields except the first Website field. The problem with not clearing it is that it’s prone to breaking (e.g. user clicks at the start or middle of text string instead of after it), potentially compromising the user’s first experience with your tool.
      -Testimonial: To make this even stronger, I would add the title, company, and industry of the person praising your work.

      (0)
      Reply
  2. Ruth

    Great article. Thank you for posting!

    (0)
    Reply
  3. Yakov Kofner

    Hi Vincent, thanks for the article!

    We just launched https://www.SaveOnSend.com/ and are still sorting through a related question. When is it advantageous to augment symbols with some text explanation? Most of our users view us on small smartphones, so we went with a minimalistic design, almost without any text for core app functions. It does confuse some first-time users, but repeat users seems to love it. Have you seen similar examples and was there any 20/20 hindsight for those?

    Thanks!

    (0)
    Reply
    • vincent barr

      Yakov,

      Great question. I’m a proponent of simplicity, too.

      After looking at your homepage, I’m guessing one example case would be in the ‘Find a Provider’ section where you have icons for cash, bank, and credit card that may or may not be clear. So, I’ll use that.

      First, I would separate mobile from desktop users and be mindful that you’ll likely need to create two unique experiences.

      Then, I would use qualitative feedback from both audiences (Desktop and Mobile) to measure task completion rate and task completion time, which should answer whether users need additional text to help them sign-up.

      You can do this really quickly and affordably using remote user testing; I recommend UserTesting.com. In short, ask people to complete a few core tasks (e.g. ‘Image you want to send money and you’re seeking a Cash Provider. What would you do next?’) and see if/where users get stuck. Also, make sure to give attention to how long it takes them to complete the task, as that’s going to affect your visitor-to-member conversion rate.

      Third, here are my off-the-top suggestions.

      For desktop: you could just add labels below each icon without burning too much screen real estate. You could also use tooltips that provide explanations of what the symbols mean on hover.

      For mobile: 1) remove any cruft (e.g. ‘Sending Method’ becomes ‘Send’) to provide more real estate 2) create two unique experiences: one for new/logged-out visitors (symbols + text explanation, or just text) and one for returning/logged-in visitors (symbols). You could also test applying the same experience to Desktop.

      (0)
      Reply
  4. Vincent Barr

    Yakov,

    Great question. I’m a proponent of simplicity, too.

    After looking at your homepage, I’m guessing one example case would be in the ‘Find a Provider’ section where you have icons for cash, bank, and credit card that may or may not be clear. So, I’ll use that.

    First, I would separate mobile from desktop users and be mindful that you’ll likely need to create two unique experiences.

    Then, I would use qualitative feedback from both audiences (Desktop and Mobile) to measure task completion rate and task completion time, which should answer whether users need additional text to help them sign-up.

    You can do this really quickly and affordably using remote user testing; I recommend UserTesting.com. In short, ask people to complete a few core tasks (e.g. ‘Image you want to send money and you’re seeking a Cash Provider. What would you do next?’) and see if/where users get stuck. Also, make sure to give attention to how long it takes them to complete the task, as that’s going to affect your visitor-to-member conversion rate.

    Third, here are my off-the-top suggestions.

    For desktop: you could just add labels below each icon without burning too much screen real estate. You could also use tooltips that provide explanations of what the symbols mean on hover.

    For mobile: 1) remove any cruft (e.g. ‘Sending Method’ becomes ‘Send’) to provide more real estate 2) create two unique experiences: one for new/logged-out visitors (symbols + text explanation, or just text) and one for returning/logged-in visitors (symbols). You could also test applying the same experience to Desktop.

    (0)
    Reply
  5. Ashley

    I’m just building a landing page now for an eBook and after reading this I’m wondering if my CTA button should say Add To Cart or Download Now. The latter sounds more compelling but of course buyers need to go through the checkout process prior to download.

    (0)
    Reply
  6. Vincent Barr

    Hey Ashley, I would test it :)

    Feel free to email me: vincentvbarr@gmail.com.

    (0)
    Reply
Comments