In this presentation we'll discuss (sales)funnels. First off, what is a funnel, and how does the model work? Secondly, how can conversion (sales) be improved? By doing this we'll highlighting some of best practices from the user experience field (from covering visual design, interaction design to copywriting).
We'll discuss the best practices and examples per 'step' within an archetypical funnel model, namely: 1) product and landing pages, 2) order and payment details, 3) summary and check, and 4) confirmation.
In a more general sense, we'll discuss some interaction principles. Which patterns and conventions are appropriate in what scenario?
We'll also touch upon some of the dark patterns (tricks to exploit the user) that can be found in funnels.
The presentation will end with a check list for UX practitioners concerning copywriting that can be used to both improve the experience and increase sales.
Read the full article on: http://www.sodastudio.nl/kennis-ideeen/copy-en-conversie-lunchpresentatie
2. Inthispresentation
• The funnel model
• The funnel archetype
• Product and landing pages
• Order and payment details
• Summary and check
• Confirmation
• Applying the right interaction principles
• Dark patterns (don’t be evil)
• Check list
8. People tend to drop out though. E.g if they walk
into technical problems, or can’t find information,
have any doubt … hence a funnel.
Can’t find right
product info
Unclear errors in
ordering form
Hidden costs at end of
ordering process
9. It’s up to UX teams (designers,
copywriters, developers) to broaden the
funnel and increase conversion.
Can’t find right
product info
Unclear errors in
ordering form
Hidden costs at end of
ordering process
21. “One jar held ten cookies while the other
contained just two. Though the cookies and
jars were identical, participants valued the
ones in the near-empty jar more highly.
Scarcity had somehow affected their
perception of value.” – Nir Eyal
Scarcity
22. On Booking scarcity is all over
the place. There’s a sense of
urgency. (Up to the point that
it’s uncomfortable to look at.)
23. On eBay, the number of
viewers is shown, also driving
the sense of urgency.
24. On VakantieVeilingen,
winning an auction is key, the
actual product becomes
secondary. Winning at the last
second is the ‘rush’.
25. Pushing scarcity, and people’s “fear of missing
out” may seem nasty (especially when the
scarcity is artificially created by the site
owners)..
On the other hand, a case can be made for
showing availability, to give the customer a
fair chance to buy the product.
Ultimately, to manage a customer’s
expectations
Afterthoughts
27. When it’s actually sold out, give
the customer a chance to stay
up-to-date on new stock.
I.e CoolBlue offers the option to
be notified via SMS.
“Temporarily sold out”
28. Quantitative: How many customers have
bought your product?
Qualitative: What customers or businesses
use it? What’s their story?
Social proof
31. .. Which links to this Twitter
page (‘wall of love’). The reviews
you see here are curated, but
they’re authentic!
32. Kickstarter is all about the
numbers.
You’d want to fund projects in
large amounts, jump the
bandwagon. And, in many
cases, support the ‘new player’
in the field to excel with their
product.
34. Labels like “Most popular” make
choosing easy on Simyo.
Apparently, this option is
sufficient for most people.
35. In the funnel of health
insurance company Ziezo, the
price is updated according to
the user’s choices.
The total costs are always
shown, which makes it easier to
decide.
37. “Most people online are gorillas. When a
gorilla walks into an experiment, what they
say is ‘What do I do now? Where’s the
banana?’” – Seth Godin
Call-to-actions (CTA’s)
39. ‘Clickmagnets’
• Use words that trigger
• ‘Fast’, ‘easy’, ‘convenient’, ‘free’ et cetera
• (The offer has to be relevant in order to be effective
though.)
40. The3rdoption
Adding a trivial third option increases
conversion. (Supposedly, because user
feel in control.)
http://www.marketingfacts.nl/berichten/conversieknaller-de-extra-link-die-niemand-klikt-hobson1-effect
42. The insurance company Zelf
gives feed-forward about what
information is needed to
complete an order.
This is recommended if certain
parts are uncommon or hard.
Also, when completing an order
takes longer than average, it
might also be useful to manage
the customer’s expectations. I.e
“This will take about 30
minutes”.
43. Booking uses this to their
advantage. It just takes 2
minutes.
.. Same trick here. You don’t
need to many details to
complete a booking.
Promotingconvenience
44. Stepindication
• Emphasize on ‘Where am I?’ and ‘What’s next?’
• Apply ‘just’ enough, clearly demarcated steps.
• Splitting input into steps (and making the user
submit more often) avoids errors
• Splitting up forms and information keeps your
pages more digestible
• Label the steps consistently
53. Minimize‘escapes’
The Vodafone funnel uses
another header and footer
which contains a minimal
amount of outgoing links. The
focus is on making a purchase.
55. Defaults&shortcuts
To make going through forms lightning fast:
• Use smart defaults (i.e for a country dropdown), so
most users don’t have to fiddle with those inputs.
• Use shortcuts for entering information, i.e entering
postal code as a shortcut for city + street name. So
the number of input fields can be reduced.
58. Uporcross?
• Upselling:
“A sales technique whereby a seller induces the
customer to purchase more expensive items,
upgrades, or other add-ons [e.g] services or
products [or showing] other options.” – Wikipedia
• Cross-selling:
“[trying] to sell something else.” – Wikipedia
59. On Asos, the customer is
tempted to keep shopping so
that certain delivery options are
free (upsell).
60. On Coolblue, upsell/cross-sell is
done when adding a product to
your cart. Relevant upgrades
and extensions to that product
are shown.
61. In the KLM funnel, choosing
extras is a separate step in the
ordering process. The used
photography feels overly
‘stocky’ though..
62. Takingawaydoubt
• Answer questions that the customer might have on
relevant locations (FAQ’s are often clunky)
• Provide a telephone number, chats or other ways
for quick Q&A
• Make the user feel safe, highlight the SSL
certificate, possibly with the security provider
(Norton, MacAfee et cetera)
63. Coolblue always shows their
telephone number. (Moreover,
they are practically always
open.)
64. Accountmanagement
• Don’t force the user in creating an account, offer a
guest user option
• If an account needs to be created..
• Use e-mail als key identifier (not a username)
• Leave out password creation (i.e generate one
and send it via e-mail), otherwise, be clear about
your password criteria when choosing one
67. Summarizetheorder
• Summarize clearly, make checking quick and easy
• Provide all possible information
• Summarize the terms & conditions so the user
knows what he agrees with
• Make the submit (order) button feel ‘definitive’
70. Confirmation
• Thank the customer
• If appropriate: celebrate
• Summarize the order once again
• Explain the after-payment process (what’s next?)
• Give solutions for all possible process errors (i.e
what if the confirmation e-mail was not received, or
when customer details are not okay)
71. Car rental service YellowBrick
tells what the next steps are.
What to expect.
76. UIelements
Radio buttons
• Few options, mutually exclusive (i.e gender)
Check boxes
• Options that can be turned on/off independently
(i.e opt-in list for different types of newsletters)
Dropdowns
• 1 option, few options (up to about 15 options)
Toggles / Switches
• Either on or off
Option 1
Option 2
Option 3
Male
Female
Amsterdam
77. On Ziezo, the radio button
convention is used to further
communicate the component’s
affordance.
78. Tooltips
Guide the user with example input to prevent errors.
Even better: allow for multiple formats (i.e with and
without spaces)
80. “Error messages punish people for not
behaving like machines. […] It is time to design
and build machines that conform to our
requirements. Stop confronting us:
Collaborate with us.” – Don Norman
Error messages
81. Errormessages
• Explain what’s gone wrong
• Don’t ‘blame’ the user
• Provide solutions to the problem
• Avoid technical jargon
• Allow for different values: make the system more
forgiving if possible
82. Inlinevalidation
Inline validation means giving feedback
while the input field is active. This
makes your forms faster to go through,
and relieves some of the hassle.
On Bol suggestions are given
when common mistakes are
made when entering an e-mail
address.
83. Inlinevalidation
However, choose the moment for
feedback wisely. You don’t want to show
errors before the user has had the
chance to complete the input.
“This is no valid date of birth.”
89. A Dark Pattern is a type of user interface that
appears to have been carefully crafted to trick
users into doing things, such as buying
insurance with their purchase or signing up
for recurring bills.
Don’tbeevil
DarkPatterns.org
90. Don’tbeevil
• Provide sufficient information
• Avoid hidden costs, be transparent about price
• Don’t put something in the shopping cart without a
user’s consent, or check product options by default
• Avoid trick questions
91. On Hotels, the opt-in for
newsletter is phrased as a
double negative. “Check if you
do not want to receive..”.
Thus exploiting the user’s
mental model (the
convention).
Moreover, the text is pretty long
for something that’s fairly
simple.
92. On SeeTickets, the total price is
shown, but the check (by
default) makes it so that
additional costs can be added
further on in the funnel.
94. Checklist
• Use headings that are easily scannable
• Use bullet lists when appropriate. When using longer list, highlight the
important.
• Use one clear CTA on every page
• Label CTA’s with the right ‘weight’ (‘proceed’ or ‘buy’)
• Use natural language
• Use just enough copy, make it feel light
• Research the edge cases (i.e errors) and think about how to help the user in
those situations
• Don’t be evil