The Importance of Contact Pages

It’s surprising just how often contact pages are overlooked when it comes to creating an interesting, user friendly website experience. There’s nothing more frustrating than spending time browsing an otherwise great website, only to find either a complete lack of contact information or a poorly designed and uninspiring contact page that actively discourages you from wanting to get in touch.

My colleague James Root has previously discussed web forms and the best practice when it comes to implementing these on your website. Considering web forms are often an integral aspect of any contact page, the advice to keep it simple and avoid giving the user a reason to not engage is sound and relevant here.

After all, if your website is your shop window then your contact page is most certainly your customer service desk and you want this to be as inviting and easy to use as possible! User engagement is key and what could be better than influencing more people to want to actively talk to you about your product or service?

Is Everyone Else Doing It Right Then?

The short answer is ‘no’ and one of the more interesting things about this is that even the biggest brands in the world can sometimes neglect their contact pages. Honda’s UK website is well designed and user friendly and we also know their pedigree when it comes to creativity. Remember some of the great TV ads they’ve come up with over the years? You’ll likely remember this one; it’s a particular favourite of mine:

It wouldn’t be unfair to assume that the same level of creativity would extend to all areas of their website design…

Honda

…not exactly the most engaging page you’ll see today right? Imagine if they had a contact page as engaging as their TV ads. Now that would make me want to get in touch!

Five Great Contact Page Templates

In Honda’s defence they do have a lot of information to communicate, and people will already be familiar with their brand and product. Their focus is to communicate as much information as possible, with the expectation being that people will already want to speak to them without any bells or whistles being necessary.

So, if you’re not an internationally recognised car manufacturer how can you ensure people will want to pick up the phone or fill in a form to get in contact with you? Having browsed some of the more interesting and original contact pages across the internet, I’ve noticed 5 basic designs which seem to be prevalent and have listed a couple of examples of each to give you some inspiration when it comes to your own contact page.

Keeping It Simple

People often like to say that less is more and when it comes to contact pages this has a certain truth to it. Making your design as clean and simple as possible makes it easy for the user to identify the key content on the page and put them at ease about making an enquiry or call. If they see the information presented as straightforwardly as possible then it makes the entire process a quick and hassle-free affair.

Step2reality

Marie_Catrib's

Step2reality and Marie Catrib’s really embrace this philosophy, with very simple but attractive contact pages. The required information is kept to an absolute minimum and looking at this even the most internet averse person shouldn’t have any problems firing off a quick enquiry to either of these websites.

Mapping Everything Out

Not just content with listing their physical addresses, many websites are now incorporating Google maps (or a variation of) in their contact pages so that you know exactly where to find them. This isn’t always strictly necessary but it makes for an interesting and relevant image that can have pride of place on the page. The following two websites have gone a little further with their map implementation:

Page9

Page9 haven’t done anything revolutionary here but having the entirety of the background a shot from Google Maps showing their location is a good way to implement the content and works well with the website’s minimalist, white design. The additional contact information is easily found on the banner to the left making the overall page engaging but still easy to use.

Buffalo

First and foremost, the contact page for Built by Buffalo is laid out very well and manages to communicate a lot of information without it being overwhelming or look cluttered. Additionally we can see that they have included their own custom built map, showing their location. Ah but what are those other heart shaped pop ups you can see? In a great move, Buffalo have also included links to other local businesses like coffee shops and restaurants on their own contact page. Not only does this help to liven the map up and make it more useful, it adds a fun and personal touch to the page and ensures that even at a basic level you’re getting a positive impression of Buffalo as a company.

Making It Personal

Despite what people may think, adding a personal touch to things can really make the world of difference. A greeting here or personalised message there may not seem like much but I know from experience that these small touches make it seem like a company is going that extra mile for me and that is something we can all appreciate.

Littlelines

Littlelines benefit from a fairly straightforward contact page in general but their prominent message at the top of page, saying they “want to hear from you” helps encourage the user to make an enquiry. Further down the page, the knowledge that your message will go straight to the company’s founder is additional assurance that your enquiry will be taken seriously.

Mixd

Once again Mixd benefit from a concise and well designed contact page in general. So where’s the additional persuasion? How about a big sign in capital letters saying “HELLO… we would love to hear from you” at the top of the page? Again this assures the user that if they were to make an enquiry it would be taken seriously and treated with respect. Not something we can say of all companies!

Getting A Bit Arty

Usability is one thing but when it’s married with a unique, artistic design then it’s hard to not want to engage (if the design works of course). Being something of a Neanderthal when it comes to appreciating art I won’t comment on what constitutes great artistic design but the two examples I’ve included are both easy to use and easy on the eye:

Lionways

Lionways’ contact page is very much in keeping with their website design and having the contact form look like a post card helps to integrate it into the overall design in a natural way while still providing you with all the relevant information you need. It helps that everything looks great in a classy, retro style.

Ultranoir

There are certain expectations that come with a name that includes the word “noir” and Ultranoir’s contact page doesn’t disappoint in this respect. Everything from the font to the imagery has a clear sense of theme and style and it helps that the contact form is well integrated and easy to use.

Thinking Outside The…..Square Receptacle

True innovation is difficult to achieve in many industries (and subheadings!) and making something as seemingly mundane as a contact page creative in both its design and execution is very difficult indeed. Like anything, creating something entirely different and fresh is where the real challenge lies and there are no hard and fast rules as to how to do this with your contact information. All I can do is show off two examples of contact pages that do things a little differently than everyone else:

Pixel_Wrapped

At first glance Pixel Wrapped’s contact page is clean and simple to use but hardly seems innovative. What I love is that by adding something as small as animating the keys on the typewriter to reflect your keystrokes in the entry form everything suddenly becomes much more exciting. Not only are you making an enquiry with the website but you’re also directly interacting with a piece of their content. Go ahead and give it a try, it has a surprisingly tactile appeal to it!

Wing_Cheng

Wing Cheng’s entire website is designed as the fold out pages of a book, with the contact form being the final page before getting to the “book’s” back cover. I can’t say I’m a huge fan of having the entire website’s content as a long, scrolling page but the look and execution of the design is fantastic.

Contact Pages Are Important - Make the Most of Them!

As I’ve stressed, contact pages can often be the quietly forgotten corner of a website where some of your most important information is left to sit idly by, never really fulfilling its potential. With a little time, imagination and flair you can turn that forgotten corner into something a little more special. Much like the examples above it can be done in any number of ways but most importantly you want a user to be confident and feel welcome when they want to get in touch with you.

If you’ve got any great contact page examples of your own feel free to share them in the comments section, I’m sure I’ve barely scratched the surface of what’s out there!

Form An Orderly Queue - Don’t Ignore Testing Web Forms In 2013

Web forms – let’s face it, they are generally a pain in the pants. We don’t have time, we’re impatient – especially us blokes as we simply cannot multi-task (bar drinking and watching sports at the same time) – we want answers this second. But they are still an extremely useful sales tool when executed with the user in mind. Even if you use IM chat software that is competently manned (or womanned (sic)) – forms are still required to increase the chances of capturing a business lead/conversion.

But the majority of websites don’t have the user in mind – they often plunk in a standard form and leave it to rot. My Top Tip for 2013 isn’t ground breaking, but many of you aren’t doing it – TEST YOUR FORMS!

Here at High Position we like to practice what we preach and we ran a successful Contact Form test on our old website (which we have since carried through to our new website and will continue to test), whereby we tested CTAs initially (persuasion) and we then tested the colour, layout and size, and button on the form (usability).

We also made the send/submit button bigger and improved the labelling CTA. Despite Luke Wroblewski’s excellent studies on web forms, I’ve never been a fan of ‘cancel’ ‘reset’ or ‘clear’ buttons on forms. I mean, it’s enough to get a user to actually fill the thing in, but it’s very rare that they’ll put in incorrect details then realise this during the process and crave for a ‘reset’ button. They’re a hindrance to conversion in my opinion.

Take a look at the test:

Control

Winner

The most obvious changes were the size of the form and the coloured fields (usability). These we tested separately over time. They improved conversion. We also added a short sentence to negate any user anxieties (persuasion): ‘No fields are compulsory’ (implying you don’t ‘have’ to leave a number AND email address, thus making it quick and easy to fill in) and ‘We will never share your information’ (to negate any data protection concerns).

And here are the results - 117% Improvement!

Tool Cool For School

“When you assume, you make an ass out of u and me” – Oscar Wilde

Of course, prior to testing you have to analyse. The whole point of CRO / UX is to find out how the most important people to your business use your website – that’s right, the users. I urge you all to use the many excellent UX tools available. An excellent tool for web forms is click tale, which encompasses Form Analytics, perfect for spying on your users.

These tools are like that Chevy 57 the cool kid rolled up to High School in (more like a Golf GTI in Essex); they help to increase your popularity. If you use them well, they will improve your chances of getting laid… err I mean your web traffic converting.

Listen, Test, Learn. Listen, Test Learn…

High Position tracked down (well, tweeted) Form Guru, Caroline Jarrett, co-author of the excellent Forms that Work: Designing web forms for usability (2008):

“Above all, it’s vital to do usability testing of your form in the right context with the right audience,” she says. “It’s vital. You’ve got to watch quietly while someone tries to fill it in – and then make changes to make it better. And then test again with the new version. Repeat that test/change cycle until they don’t even notice they’ve filled in the form because it was so easy.”

Sound advice, which reminds me of the famous Baudelaire quote (paraphrased by Kevin Spacey’s Verbal Kint in The Usual Suspects) “The greatest trick the devil ever played was convincing the world that he did not exist.” Like all UX, keep it simple, make it natural. If users have to think, they’ll bail.

As Steve Krug fans (or ‘Krugites’ as I like to call us) will testify to, the simpler usability is the more likely it is that the user will perform your desired actions, i.e. convert. So in 2013 make sure you test your web forms with the user in mind. Keep it simple, but don’t use guess work. Analyse then sympathise; simplify then exemplify.