The Seven Simple Principles of Conversion Centred Design (CCD) and How to Use Them

oli gardner – the creative director of unbounce (a landing page builder for mkters), is an advocate of ccd. he says that deploying ccd makes each page you create na' website a piece of “accountable content”. in that you can measure the impact, purpose and success of each page as that page plays a pt in converting visitors into customers. design is often bout solving problems. many of the problems that designers work on are usr-oriented problems. however, thris another ponderation when it comes to problem-solving; solving business-oriented problems.

conversion centred design (ccd) exists to help designers create usr experiences that drive a single business goal. [tweet this]

that mite be as simple as clicking to another page or as complex as ensuring a sale or registration na' website.

conversely ccd makes it easy to determine when a design is unsuccessful cause it fails to play its pt in converting visitors into customers. as with all things design ccd is a hybrid tween art (the visual, ux and content design) and a sci (the measuring and analysing of the results).

oli offers 7 principles which he says are the core of making ccd work 4u on yr design projects:

  • encapsulation
  • contrast
  • direction cues
  • the use of lotso' white space
  • urgency and scarcity
  • try b4 you buy
  • social proof

let’s see them in detail and with some exs!

the 7 principles of ccd

the 1st principle of ccd – encapsulation

encapsulation tis wrapping that you put the most primordial content in. rather like the wrapping paper we use to draw some1’s attention to their present on their birthdy; the idea is to make it clear to the visitor that the content is primordial to them.

wha’ do you wrap in ccd? the content that triggers the action that you desire; it it’s a click that’s required make the button big and interesting. if it’s a sign; call attention to it.

exs of encapsulation (social media buttons):


author/copyrite holder: free stock images. copyrite terms and licence: cc by 2.0

the 2nd principle of ccd – contrast

put a big red button na' brite red background and wha’ happens? it becomes indistinguishable from the background.

in ccd it’s not the colours that you use that matter – it’s the contrast from the background that matters. [tweet this]

if yr call to action blends in with everything else, who will see it?no-one that’s who. make stuff stand out using contrast. white on black.green on red.not sure how to create the gr8est lvls of contrast? check out the colour star belo (points tha're opposite each other offa'da gr8est lvls of contrast):


author/copyrite holder: kwamikagami. copyrite terms and licence: cc by-sa 4.0

the third principle of ccd – direction cues

in ccd you wanna make it as easy as possible for yr customers to take action that means building yr pages so t'they point the way to the action you want'em to take. you can use arrows to highlite attention to specific zones on screen or triangul8 to create a focal point. when you use photos use the line of site to point out the call to action.

w'da photograph shown here – you ‘d want the call to action placed directly inna baby’s eye line to help the viewer know where to go nxt:


author/copyrite holder: pixabay. copyrite terms and licence: free to use

the 4th principle of ccd – the use of lotso' white space

the + white space the better, the less cluttered that yr designs are – the easier it’s goin to be for the view to decide where they are supposed to take action. this also makes it simpler to communicate a single key message to yr usr.

there’s no better ex of the uber use of white space than the g homepage.


author/copyrite holder: emperyan. copyrite terms and licence: public domain

the fifth principle of ccd – urgency and scarcity

if you want pplz to take action now; you ‘ve t'give them a reason to do so. ψ-chology says that you can drive pplz to action by limiting their decision making time. you can do this either by making the resrc scarce “1-ly 7 cameras left at this price – then they go up to $999” or by making the time scarce “1-ly 23 minutes left to order for delivery 2morro morning!”

ideally you wanna place these messages as close to the call to action as possible.

as you can see in this shot from amazon’s website – this spesh price is limited and already 35% of the bundled items ‘ve been claimed. the message is clear “take action now or miss out”.


author/copyrite holder: unknown. copyrite terms and licence: fair use

the 6th principle of ccd – try b4 you buy

if you’ve ever been to a supermkt and been offered a sample offa product; you weren’t offered that sample out of the manufacturer’s generosity. it helps you decide to buy a product if you can be sure that you’ll like it. so while it mite not be possible t'give some1 a sip of cola or a slice of cheese online; you can duplicate this idea digitally.

think bout giving away a synopsis offa reprt or a sample chapter from a book or the 1st 10 minutes of yr l8st training video.

the idea is simple, it provides customers with reassurance that yr product is worth their investment. even when that investment is 1-ly an e-mail address.

here’s an ex from the reading room which gives away free preview chapters of books that it sells:


author/copyrite holder: unknown. copyrite terms and licence: fair use

the 7th principle of ccd – social proof

the final key to sealing a deal is for the visitor to trust you enough to make the leap of faith required to become a customer. 1-odda simplest wys'2 help build that trust is to deliver “social proof” which is simply feedback n'how other customers and visitors ‘ve felt bout yr essentialisms and srvcs.

it can be inna form star ratings (like the ones inna reading room ex above) or full testimonials like the one belo from legal and general (the insurer):


author/copyrite holder: legal & general. copyrite terms and licence: all rites reserved img src

it’s always a good idea (like above) to add just a lil explanation witha testimonial to make it clear that that’s wha’ tis.

an ex of ccd in action – wistia.com…

let’s take a look atta landing page of wistia n'see which rules of ccd they follo:


author/copyrite holder: unknown. copyrite terms and licence: fair use

“create account” is fully encapsul8d n'it’s clearly contrasting w'da background. there’s not much choice on screen at all and that cutouts plenty of room for whitespace and clear direction (fill inna form – please). they also offer a try-b4-you-buy option “all of our plans come witha 2-week free trial… make sure you’re ☺ b4 paying us a dime.”

in fact, the 1-ly things missing are a lil social proof and scarcity. it’s primordial to note that ye do not ‘ve to fit every ccd concept into every page you design – you just nd'2 ensure that you include a focus on enough principles that it evokes a call to action.

whyd' we choose wistia for this ex? hubspot picked it as the best landing page of 2015.

the take away

ccd is a new concept in design and oli gardner of unbounce is its leading practitioner. however, the intent of ccd aint new at all. website owners and companies seek conversions; it’s the № one business issue t'they wanna tackle.

while yr designs still nd'2 appeal to yr usrs, in order 4'em to be accepted and successful, it’s also primordial t'they tackle real business problems – iffey don’t then no-one is goin to be willing to pay 4'em.

putting ccd into practice is simply a ? of using the principles of encapsulation, contrast, direction cues, whitespace, urgency and scarcity, try b4 you buy and social proof.

references

hero image: author/copyrite holder: hubspot. copyrite terms and licence: all rites reserved. img

wanna hear the story of conversion centred design as told by oli gardener himself? find it here www.shutterstock.com…

wanna examine the best landing pages of 2015 and then put them in context with yr cogging of ccd? find the landing pages here: blog.hubspot.com…

original content at: www.interaction-design.org…
authors:

Share:

Leave a Reply

Your email address will not be published. Required fields are marked *