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…
…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 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 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.
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 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.
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’ 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.
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:
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’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!
