Mobile

Landing Page

Checklist for

Optimisers

Props to @contentverve & @aschottmuller


I got invited to PageFights — run by one of the coolest companies on the planet IMHO — after meeting with Oli Gardner and Peep Laja in Berlin recently. I really enjoyed hanging with a big crew of fellow speakers, hackers and analytics geeks and we drank beer, laughed at ourselves and the stuff we work with. I enjoyed doing it and I was delighted to get the invite from Unbounce.

So let me give something back.

In order to review the sites submitted for the test, I wanted to have a key set of points, noting what stuff was weak, good or could be improved instantly. So I had to have a checklist to flag up stuff during my preparation (about an hour) and wanted something I could refine and use again.

So here we go — the stuff I look at on mobile landing pages and mobile experiences generally:

(1) Being Really Responsive
(2) Device Compatibility & Layout
(3) Usability
(4) Performance
(5) CTA Hierarchy
(6) Copy
(7) Device & Location aware
(8) Finger & Thumb friendly
(9) Contact Method Friendly
(10) Company, Contact, Social Proof
(11) Forms Optimisation

(1) Being Really Responsive

The word responsive is misused. It’s just a fucking attribute — like ‘My socks are grey’ or ‘My car is slow’. It says something about your layout technology but not whether your customer experience is crap.

There’s responsive and there is *really responsive*. In a retail store, being responsive is like saying “Hey, we have carpet in our store!” — it doesn’t quantify or guarantee a decent experience.

Common Problems:

(1) Breaking Bad

The layout breaks oddly, on one or more device classes (or individual devices) in a way that doesn’t make sense to the user and the goal of the page. It may be technically responsive but the visual hierarchy may be completely wrong. Technically responsive but not responsive to user, device and goal. Check your breakpoints, layout and orientation with real devices.

(2) Not Testing Stuff

Not testing the devices that represent the majority of your customers. If you cannot ‘see’ the experience on say, iPhone 4, 5, 6, 6+, can you really say ‘We have a great experience on iPhone’. Usually what people mean here is ‘We have a great experience here on my fucking iPhone” — which is not the same, you dolt.

(3) Broken Stuff is Bad

Some of the pages submitted had horrible rendering issues on iPhone. It’s like having a dead carcass in your retail store or fries and ticket stubs littering the floor — it looks unprofessional and sets the design up to not be seen as ‘credible’. You’d be surprised how small errors, rendering issues, messages, spelling mistakes and language can impact conversion.

(4) Scroll cues

If you want people to scroll, the device viewport on first load is important, because you may not ‘see’ that there is stuff below. Having an overall page layout that encourages scrolling is one area and getting the initial scroll is another. Don’t forget to provide jumpoff points at the end of the complete scroll — i.e. navigation, footer, read more, persona based options etc. etc.

And when you don’t test your pages, you miss things. For example, my favourite scrolling idiocy is when a map or other page object interrupts the scroll and ‘uses’ my scrolling action. I have to notice this, stop and then find an awesomely tiny sliver of the backdrop I can get my finger onto, so I can scroll around the darned map or other thing you’ve expanded to full width. Harumph.

(5) Put on the customer shoes

If you don’t review the entire journey from the SERPS page (i.e. Google Search page) or advertising creative to the site, you are missing contextual information. The search page, creative or driver of the visit needs to be seen in context with the whole journey. To see how ‘responsive’ the process feels and how good it looks, you need to see things, check things, test things, obsess over things.

Imagine if I was in charge of new clothing at a department store and said “I don’t need to visit any of the stores to see how the spring collection looks. It’s gonna sell and I’ll check at the end of the quarter.” Doesn’t happen.

You’ve got to be all over the total experience of this new clothing range to make it a success and I would visit and obsess over every detail, to enhance the performance. What honestly makes you think you can get away with NOT doing this online is beyond me.

Experience the stuff you build using their devices, their context, their network connections and knowledge of their goals, tasks, fears, worries and barriers. Don’t tell me the experience is good — please go ahead and bloody prove it!

(2) Device Compatibility & Layout

Yes — I’ve mentioned this above but it goes deeper than just the layout.

Let’s take one simple example that continually grinds my gears. Not selecting the right mobile input type and keyboard for entering data on a form. Not being device aware.

If you leave spell check enabled when I enter a bit of data (for example, my license plate number) then it’s going to annoy me by trying to spell check the word or phrase. If you pick the wrong input type for a piece of data, it makes it harder for me to complete or press submit on your form. I learn to loathe your form. If I have to use it, that loathing will deepen. The purity and depth of my disdain will be plain to see.

Device compatibility means also working with the input controls and UI of the phone — the way you design apps, for example, will be different in some subtle but important ways across iPhone and Android platforms — because the way the phones ‘work’ in terms of the chrome, operating system and hardware are different.

So — this is why just taking screenshots of your process with a pretty little iphone shell round it isn’t enough. You need to test every element, click, interaction, error, option — stuff that people can do — in order to ensure it makes sense for that device. The viewport (screen size) makes a huge difference to how your landing page, site or product is perceived — so you have to experience how it looks and can be interacted with.

If you want to test stuff, draw up a list from Google Analytics (or other packages) of what your top Desktop Browsers, Tablet Devices and Mobile devices actually are on your site. I’m working on an article now for how to do this, so watch out for it. When you’ve got your list, test it. Most companies have employees, friends and family who’ll have one or more of the devices. Just ask round, post a message.

If you can’t get your hands on devices — try an open device lab near you. This is a free service where people donate their old handsets, so a lab can be made for people to test their shizzle. Very useful and you’ll probably meet some cool people too, when you’re there. www.opendevicelab.com

If you want to test real devices but don’t have a device lab, get something very very cool. Rent one remotely. Yes — you can rent a phone sitting in a server cabinet in downtown San Jose, or Bogota, or London — or Berlin. Keynote has racks all round the world with phones and tablets connected to the local network providers for 3G and 4G (you can also use their own wifi). The point here is I’m controlling a real phone, in a real other country and city — so I can do things like use GPS, search for stuff, visit the local Apple App store and install stuff or send text messages to local numbers. It’s as real as being there.

Keynote is good but I’ve had the odd glitch with devices. Still — they have enough of a range (and duplicates) in many locations that this isn’t a problem.

I haven’t used a new one yet — called Appthwack — but it’s a lot cheaper for unfettered access to a bunch of real mobile devices. Don’t wuss out — I’ve given you every way you can get hold of real handsets. Oh and turn of the wifi — use a data connection instead (unless wifi is a real scenario, of course).

See http://www.keynote.com/solutions/testing/mobile-testing and http://www.appthwack.com

I’ve built some mediocre stuff, some good stuff and some great products over the years and the great stuff? That was when people darned well cared about this stuff enough to test that their care had been rewarded. A data driven culture also rewards through that feedback loop.

It’s not enough to think your shizzle is working — you have to prove it. I’d love to see a car salesman using an attribution model to explain their low monthly figures. Marketing has to be more like sales — and prove it.

And those teams that I’m most proud of building — that outperformed the average — They sweated attention to detail for every little tiny interaction all the way up to the helicopter view of the product. OCD? Yes. Quality product. That too.

(3) Usability

This is a big topic area and I could write an entire article on this subject alone. One simple bit of advice — please test stuff with people. My slide decks have heaps of advice here for doing Guerrilla Testing, particularly for mobile.

This stuff works and yes it takes time. However, it’s the time you save by not wasting scarce development resources on stupid stuff people can’t or won’t use anyway that underwrites ALL the cost. It’s a lot cheaper to not build bad things than it is to rebuild, rework, redesign sub optimal designs.

If you don’t do it, you’re stupid or arrogant — nobody likes their product being critiqued (just watch Gordon Ramsay’s TV shows) but you have to listen, swallow and respond to feedback, not your inner whiny egotistical voice that you keep hearing.

Triple your effectiveness by ensuring you have really great analytics tracking and also qualitative feedback (session replay, NPS, surveys, VOC, feedback, user testing) as part of the mix. Test as early with people as possible, during prototype stage (paper onwards) and test often during the product lifecycle.

Key usability problems I encounter are listed below. This isn’t an exhaustive but a BIG TIP ->

If you seriously want to get mobile usability and forms in particular — to the best in class — then you need to read and watch everything by this guy — Luke Wroblewski (www.lukew.com).

This is a secret I tell every optimiser that hasn’t heard of him — he’s helped me with mobile and forms work more than any other writer, practitioner or UX specialist around. Nuff said.

(1) Zoomed out — some (or all) of the pages are zoomed out on the device or fail to render within the viewport (i.e. are off screen). This is usually from not having the site serve a mobile optimised page.

(2) Customer view — your page sucks on the first load with the customer viewport (i.e. landing page, homepage, other page). So that nice layout the designer produced — it doesn’t match the fact that your audience uses iPhone 4's mainly. Get with the data and the testing.

(3) Navigation, Scrolling, Visual Hierarchy — we touched on some of these but it’s worth expanding here. Make sure your navigation is usable (test it) and always have jumpoff navigation at the end of a long page (footer, next steps, CTA, onbound navigation, links). The visual hierarchy (the flow of the design, the sections, titling, words, framing, the whole layout experience is also vital.

(4) Size of controls, placement and spacing. Calls to Action are important but a word for all general controls. If you put links, buttons, elements that are ‘clickable’ too close together on the page, you are discriminating against people with fingers. Unless your target market is unsuccessful Yakuza gangsters, it’s a doomed strategy. So — controls should be big enough to see, have clear space around them, be placed in an area where they can be prominent enough to get seen and most importantly, not get in the way of clicking on something else, even when using thumbs. Those biased to using their thumbs will also have trouble using your site if you’ve placed stuff far away from ‘thumb reach’ during common site interactions. Microsoft and Apple recommend 0.25" and 0.3" respectively for minimum size. And again, this is a rendering issue too for you — it might be clickable and easy to use on one handset type yet fail on another.

(5) Device orientation may vary — there are some ways of figuring this out and storing the data in Google Analytics if you really want to know. Just ensure your lovely design looks and works OK in landscape and portrait orientation, particularly for tablets.

(6) Forms — mobile forms suck because the threshold is even lower on mobile for someone to bail. And most companies do bad forms on desktop, which means they carry all that baggage to mobile. You need to optimise forms on mobile in a big way and there’s too much to cover here. Quite simply, one of the most underrated areas for tweaking, improving and measuring impact of conversion changes in the universe.

(7) Redirection and Layout. If you’re deciding to ‘send’ people to a dedicated mobile site or a specific layout, you have a duty to make sure that this ‘selection logic’ is working correctly. If your breakpoint and layout decisions or your redirection to a mobile site doesn’t work correctly, this will hammer the experience.

Here is one of the problems that plagues dedicated mobile sites. Let’s say I visit the Google Search Results Page — and click on a sitelink underneath my main brand organic search result. I’ve picked ‘Contact Us’ and the website then redirects me to m.website.com. Did it redirect me to the Contact page? Nope — it left me at the homepage.

If people are asking for the contact us page, you need to send them there. And this requires some analytics (data) and smarts around how to make the redirection relevant. You may not have the same pages on your mobile site, but please try to care about where you send people — when redirecting. Strangely enough, caring about the links people click and the relevance and utility of where you send them — is good for business.

(2) Flow handling — I’ve seen some deliciously idiotic stuff on mobile. Michael Aagard showed me a wifi registration form that guess what, mailed you the login verification! So if you had no data connection, you couldn’t get the mail and use the wifi. If you’re designing a product, it is a set of interlocking interactions, like a large chain. This means working all the paths and interactions, to get problems out of them. And noticing what’s wrong starts with measuring stuff that’s bad.

Another example is where offline (SMS, email, other) is used to verify something. If this doesn’t happen in the timeframe and you’re running out of time or have a high level of urgency with your task, this sucks. Ensure all the elements of the chain are strong — pull them, try to break them, test them.

If you look at some of the reference service designs out there, which are wonderfully choreographed yet give a sense of frictionless ease — it’s not luck or accident. That stuff takes hard design work, measurement and optimisation. I watch what people like Airbnb do and they get lots of nodding from me. Hard work and smarts drives seamless and high quality experiences.

One link in the chain is email — and if it doesn’t arrive, gets in the wrong tab in gmail or stuck in the spam folder — you’re hosed. Two things matter in email —

(1) Are they getting delivered and if so, ‘where do they arrive’ in the view of the email clients you are sending to

(2) What are the email clients, webmail services and mobile devices you are sending to and how does your stuff actually render in the target?

For (1), Lyris, Returnpath and Email on Acid all offer deliverability services. Just one word of warning about this area — stay focused on getting regular audits of your deliverability and for key campaigns. When you pre-test campaigns (like I did at Lovefilm) I often found stuff hitting spam filters, which meant that if I HAD sent the full email batch out, it would have porked. And I would have known nothing about it. Everyone would have blamed someone else and we’d have learned less than nothing.

For (2) Litmus is a very popular solution and Email on Acid, Lyris and Returnpath offer testing services. You send your mail to one ‘seed’ address or inbox — and it is spawned and sent to all the targets. You get a snapshot of what it looks like when delivered. Oh boy. Most people don’t know because they never get to see what the customer sees. Broken images with no clues, bad rendering, non mobile aware layouts, zoomed text — ugh.

So — step 1 to email happiness. First, make sure you test with the targets. Use excel and your sending domains to roughly group them into clusters you know about. That at least gives you some idea of the biggies to test. Use Litmus, Email on Acid or one of the others to test your core templates.

If you haven’t got responsive email templates yet, sadly shake your head and circle back to working on those. Really. If you don’t have a big mobile audience then great, you can probably still survive a bit longer. For everyone else on the planet, start using templates that render on mobile, tablet AND desktop nicely. My twitter timeline has a few posts about responsive email designs.

Step 2 — Once you’ve made sure it’s actually going to render, then send it out to the deliverability service.

Step 3 — Make sure it passes the edge network filtering for spam.

Step 4 — Make sure it’s not sent to the spam folder

Step 5 — Good chance it might arrive and look ok — Send it now, baby!

Step 5 — Wow — it arrived, it rendered ok, they can read it.

Apologies for the digression into email but if your freaking business relies on an activation, onboarding, thank you, confirmation, or any email which requires an action to make things work, generate revenue or reduce costs — then you have to make sure it delivers fast, reliably and looks great on MY device.

(8) Context. The biggest one of all. In Mobile, Context is Everything.

Where people are, what device they hold, what data connection they have, how noisy it is, what urgency level they have, what the goal or task is, the time they have to do this within, the real end-user experience and everything that a lab is not.

If you’re not trying to understand the context in which you product is used, you’ll make bad design choices. It’s also useful business information. I remember when we discovered at Belron that a great deal of mobile traffic was from consumer wifi networks. That led to us exploring how mobile devices (on the sofa, basically) were being used as an immediate and direct response to TV advertising. With some analytical smarts and measurement tech, the company was able to use this as a great way to test the efficacy of advertising creatives, lengths and content. Knowing that our assumptions were wrong actually led to a better business strategy.

One really good tip here, particularly for multi-channel/platform retailers — is to run a ‘Diary Study’ of participants using your (or competitor) products & sites. This way, you can collect data about what devices they use in which contexts, to perform tasks and achieve goals.

(8) Maximising Device & Location personalisation. You get all this lovely data and don’t use it. We saw a page today about local services — but it didn’t do anything with my location (GPS) or IP address to make the page more relevant. Use the device capabilities your customers have to the maximum — aim for the best possible device experience on the most popular handsets and use the most enhanced device capabilities you can (progressive enhancement of the experience).

(4) Performance

One of the most underrated optimisation areas IMHO, performance is not a problem that will simply vanish, as we see higher data speeds on mobile. Does 4G not solve my mobile site being slow for consumers? Nope.

So we all understand the performance problem of your page being ‘too big’. It’s too large (in kilobytes or megabytes). And the poor wee mobile device struggles to get it down to the device on the poor data networks we still have. In London, I rarely get reliable data connections, particuarly on trains and moving vehicles. This is a big factor in conversion. If you can’t get page payloads (the weight of each interaction) down to a reasonable size, customer experience suffers unless they have great connections.

The second problem is latency. Let’s imagine I start writing letters to Peep Laja in Austin, Texas. He and I write quickly so we can dash out our reply in an hour, as soon as we get the letter. The time it takes for us to have an entire discourse over several letters is influenced by the postage time. If it goes airmail, it might only take a couple of weeks to get there. If it goes by ship, it might take 6 months. Of course, we can make the letters longer to save time but the biggest factor is always the postage.

Now think about your mobile device sending packets. The size of the page you need to get to the mobile device is going to influence the time it takes quite rightly. However, the number of page elements you download on each page (and how you render them) directly affects performance. Like the postage in the letter writing example, the connection of your phone to the mobile phone mast and then onto the internet incurs a delay. This is called latency and it adds up for every object you pull down. Two pages of 100Kb, one of which has 5 objects and one of which has 90 — will show markedly different performance to the user.

So — lesson over. You need to keep page weight down but also the ‘chattiness’ of your site and the number of objects loaded for each interaction. Please use www.webpagetest.org to check desktop & tablet performance and mobitest.akamai.com for mobile devices.

Performance work is boring to most people (so I have found) but it’s also lucrative. If you need examples, mail me — but I love the work that Stuart Mcmillan at Schuh has put into their mobile experience. By focusing on everything, including performance, they’ve made big gains by making stuff faster as well as having a great responsive experience. I have found a lot of companies who ‘go responsive’ but don’t realise the performance drag has killed the experience. Responsive also means responsive performance on the device the customer holds.

(5) CTA Hierarchy

There’s all sorts of advice around. One button on a landing page. As many buttons as you like. Green buttons. Orange buttons. You need to split test with your call-to-action buttons (as one ingredient in the recipe) — is my core advice for those that think the rules have been found.

What useful stuff can I tell you?

Well — every page should have a primary action that the page is designed in mind for. This is the key business driver or outcome that you are seeking and you need a design pattern for this across your site. This is the main one — on a product page for ecommerce, for example, this would be the ‘Add to Cart’ or ‘Add to Basket’ button (partnered with the other controls — size, colour etc.)

A secondary CTA on this page might be ‘Add to wishlist’ — which remains a button but maybe more washed out, greyscale but most importantly recessive from the primary CTA. In plain speaking, it has to fade into the background ‘more’ than the primary CTA.

A tertiary CTA on this page might be ‘Save for later’ and in this case, we’d use a hyperlink.

Hopefully that helps you understand — there may be many actions and interactions you’d like people to have but there is a business layer that tends to get missed off designs and wireframes — “What primary action do we want these people to take?”. If you haven’t worked that out, as well as the secondary and tertiary actions, you need to work on this.

As much as there is a visual hierarchy in many designs we use (newspapers, web pages) there also needs to be a CTA hierarchy and one that reflects the business strategy.

On mobile landing pages, I think you need a strong primary CTA (I have no problem with it being repeated, particularly if you have different use cases or personas reflected further down the page).

In design terms the CTA should be a contrasting colour (not jarring either — see colour science), have a large size (although not the width of the page, as larger devices fail), be surrounded by colour or whitespace, have visual prominence within the page hierarchy as well as from surrounding items, have clear, concise, action-oriented wording and unless you’ve misunderstood flat design completely, a button which has ‘affordance’ — it looks clickable, buttony, interactable-with (long discussion that one but give it touches (flash, shadow, 3d hints) that make it further forward in the page.

As for the wording, this is a great article by the Guardian on using the WYLTIWLT test to craft good button copy:

http://www.theguardian.com/info/developer-blog/2013/jan/02/interactive-button-text-grammar

Please also see Michael Aagard’s stuff on buttons, forms and much more at www.contentverve.com

My last word on CTAs is make sure they’re ready to fire. There’s no point in having premature CTA or premature form ejaculation on a landing page, particularly on the narrower mobile format. I need to ‘get’ the value proposition, product, content, social proof and all the other lovely work you’ve done because I won’t click until I do. Clarity before Button. And that leads us nicely onto…

(6) Copy

These are what I look for when reviewing:

(1) Clarity, Simplicity, Brevity of offer and copy

(2) Readability of text (typography, point size, styles, hierarchy, device rendering), textual controls (contrast, colour, space, point size)

(3) Key goals satisfied? Check what drove traffic here (creative, link) and customer/context information to know

(4) Benefits — is the focus on features or jargon, rather than what the product does for my life!

It’s about the outcomes that the product, service gives me — which are the benefits, not the dry features you want to sell. Marketing is about listening and iterating, not shouting with a megaphone. And the Unique Value Propositions about your service, company or product should be entirely based on the lens of customer insight and historical data. A benefit driven approach that is customer informed rather than guessed will save you time in experimentation too. Many of the tests I’ve done showed that what consumers valued was not always what companies wanted to market to them. Know thy gap.

(5) Text decoration. Are they using bold, italics, emphasis — to pull out the trigger words for scanning visitors?

Hardly anyone does this yet I know from eye tracking that it works. Some groups (particularly older people) read absoloootley everything on a page. I once did 3 days of testing with over 65s and it was wonderful but exhausting. Nearly everyone read everything, every line, every atom of the copy. So for this group, you make them read everything — which is why optimisers always reduce copy. You’re wasting their time here <grin>

When I tested against a control group, there was much higher scanning behaviour. The eyes hopped from emphasised area to another — and in copy, as well as seeing the eye saccades associated with reading, I could see people gulp up whole paragraphs, structures but with a flicker. If I highlighted some text, for example:

“Our service is completely free for 3 months and has no contract or paperwork”

You would see hops from the title or first word of the paragraph, boom — over to the highlighted text, some (or all) of the other highlighted words and then on scanning down the page.

So — decorating text works for scanning visitors and for those that read, also emphasises key customer trigger words. This is hyperlinks work. This is how the web was created. You may be hyperlinking these words (for example, our guarantee) but when you’re not — you get them noticed more through decoration.

And decoration isn’t just about the emphasis — it’s also layout, hierarchy, using bullets, breaking up sections, line length, styles, colours. Just utilise that scanning behaviour to your advantage and keep the copy brief. One chunk of your visitors doesn’t read all your copy and the other group takes a fucking age to do it. I rest my case.

(7) Device & Location aware

Does this page make use of the device, location, IP address or other information to customise the content? Make it more relevant? Is it customised for my country, my area, the link or creative I clicked on?

For example, you could utilise the GPS in the mobile device to land people quickly at the nearest store results, rather than them having to enter their current address. Doesn’t sound like much but people forget about removing steps on the mobile experience. You haven’t either got time or the inclination to make several refinements to a location search on mobile, so why not localise what you show.

Even something as simple as defaulting the state dropdown on a form for USA addresses may increase conversion. Using customer device, location and other capabilities ought to be higher and I feel the future of mobile devices only hints at what even richer data we night get. Use this stuff.

(8) Finger & Thumb friendly

This one deserved a heading all to itself, even though it’s a common usability problem. My wife, daughter, friends — all have different patterns with how they hold and use phones.

Several of my daughter’s friends at school have a kink in their pinkie from repeated use of a way of cradling their iPhones. This stuff needs studying, because it’s bizarre and truly shows the impact of overusing phones!

But back to the problem — your method may not be theirs. And this means that thumbs as well as slimmer digits come to the party. This limits how you can design good ‘click friendly’ controls, call to action buttons and other links — because they need separation and you have to have a larger target area, to cater for all fingers.

Countless sites out there have controls too close to each other or hyperlinks. This makes hitting them (without zooming) a rather roulette affair. This is just amazingly annoying and cripples usability.

Read more on this whole topic area and especially the research about use of phones and fingers at www.lukew.com (I will get round to adding some articles and references to this humungous post, I promise)

(9) Contact Method Friendly

Does this page or site offer ME the right contact options?

If you’re on a mobile, you’ve got to have ‘click to call’ on a mobile site. I’d be using a phone icon, a clear and large font number and if possible, combining these as a pair — icon, phone call to action button.

Everyone gets that bit you’d think but I’ve seen phone numbers that don’t look clickable. Treat the phone number as the Call-to-Action that it really is!

And a word for the ringback. I like offering a callback service. It’s free to the customer, you can ask them ‘when’ they’d like the call for (which can improve satisfaction) and what their query is about. Very very simple forms, at the most basic, just the number you want called on a time. You can let them pick time bands (immediately, 1 hour from now) and/or let them pick the time.

And this is worth something to you — if you’re doing lead gen callbacks or any form of ‘ringing a customer back who got in touch somehow’. Many people ‘call screen’ these days. If your call centre number shows on caller ID as ‘UNKNOWN’ then you can kiss my voicemail, Mr Unknown.

If you can show them a number on your outbound calling ID (and tell them about it before they call) — then more people will answer. It will save you heaps of money calling, leaving messages, recalling, recalling. You can let them know either on the ringback request form, the thank you page when submitted or an email confirmation. One other great way to do it, is to SMS your contact x minutes before the call to let them know to expect a call from you.

So — your mobile site probably has a contact form too? See the forms section below for the common stuff I look for. If leads are valuable to you (and this may vary a lot) then strip contact forms to a minimum. For every field in the form, ask the question “If we remove this, will the experience change for the worse and why?”. Asking a heap of questions on the call is better than not getting the leads. However, if it say, helps you to route a query to the best department, to ask them a question — then do so! If you’re using the data to make things better, faster, quicker then great. Just be careful with contact forms as you can either get too much contact that you can’t handle or lose valuable business.

When you have your company phone number on your site, consider the call cost landscape. How much does it cost your consumers to call that number? Is there a free number that you can use? Do you explain the call costs that are likely?

This is an incredibly important thing to do and will impact your calls. An example here is when I worked at Belron, I aimed to have local phone numbers for all stores. That meant they conveyed a sense of locality (even if some went to a national call centre) but people knew what they cost and where they were, just by looking at the number.

It also allowed me to write this copy “Call costs are free if you have monthly minutes” — all round the world. Isn’t that nicer than “Calls may vary depending on the tariff structure of your provider, mobile phone operator or other service and charges may apply on top of your AAAAAAAAh” stuff

Last tip for UK people — they are wary of 0xxx numbers — 0345, 0845, 0847, 0870 — these are classed as ‘Those bloody funny numbers’ as one customer aptly put it. Those are the ones that cost money. Even 03xx number formats are mistrusted, even though for most people, this incurs local call charges and if you have mobile minutes, is inclusive.

From tests I’ve run, simply having local rather than national numbers will hugely increase calls. So this neatly underlines all this seemingly pointless rambling about charges. It’s important to understand how your customers are charged for calls and there are many ways to optimise, other than making money from them calling. Such strategies may fail on mobile, because it is a different cost landscape to sitting at home with your landline available.

(10) Company, Contact, Social Proof

Does this page have credibility signals or links like company information, address, reviews, awards, press mentions, contact details, about us or social proof?

I look for here:

Social proof / Customer voice / Testimonials

Trust, Privacy, Security (for some pages only)

Contact and Company credibility

(11) Forms Optimisation

Does this page have any of the following common forms problems on mobile?

Spellcheck on — in fields where not desirable

Wrong input format (for example, using tel: and other input masks)

Minimum number of fields — and ONLY what you use and need

All or most field labels mandatory

Poor alignment of labels, ambiguous label copy, contrast

Inline field labels that confuse people

Inline field labels that say the same as a label outside (“Email” “Please enter your email” — PUHLEEEASE).

Long dropdowns — who is coming from Angola to your Cinema in North Finchley today?

Fiddly inputs (e.g. horizontal fields, hard to use controls, excessive use of pickers)

No contextual help or supporting copy at top of form (treat the form as landing page within a page — does it explain itself within that area?)

What happens next — does the form event hint at this?

Error avoidance — Is this kept to a minimum by having smart defaults (i.e. defaulted to the most likely option for that customer), smart validation (e.g. auto correcting email address misspellings) and using the right controls (as well as turning off spell check)

If errors are displayed, are they seen in the viewport? Is the error copy poor? Does it offer an example of how to correct the error? Does it blame the user? How are multiple errors displayed? Is inline validation used? Is there positive feedback on filling out a field?

Clarity and utility of CTA buttons (Next → Address details)

Progress indicator utility (if present)

Validation on form submit — make sure that the form tries to correct stuff, rather than forcing the user. This is what bloody computers were invented to do, so make them work at this problem.

SUMMARY

Hope that was useful — it won’t win awards for prettiest medium article but I’ll try to beef out some of the resources. It’s more of a brain dump and checklist you can refer to when you look at landing pages.

If you have anything you think I’ve missed, please comment but these are the headline review areas I felt were important,

(1) Being Really Responsive
(2) Device Compatibility & Layout
(3) Usability
(4) Performance
(5) CTA Hierarchy
(6) Copy
(7) Device & Location aware
(8) Finger & Thumb friendly
(9) Contact Method Friendly
(10) Company, Contact, Social Proof
(11) Forms Optimisation