Designing a Better Contact Page
A good contact page is essential for maintaining relationships with your visitors. Whether we’re talking eCommerce, magazines, personal websites, online services, users will usually seek out a contact page as their first means of communication with you. Oddly enough, many web designers neglect the humble contact page, even considering it one of the least important aspects of a website. Let’s put that right.
The Importance of a Good Contact Page
A contact page is often overlooked. How many times have you visited a website, wanting to get in touch to complain about a product or service, or ask a question? And how often have you struggled with a contact form?
A good contact page can benefit any type of business. It can improve customer satisfaction by helping users with their problems. It can also help a business improve its products and services by providing an avenue for valuable feedback.
Other channels can be limited when it comes to user feedback. Television, radio, magazines, newspapers… all are a form of one-way communication. Online communication should be a two-way street; a dialog between a business and a visitor. Both parties can benefit from that, which is exactly why a good contact page is essential.
Placement
First step first: the location of your contact info. Having the best contact page in the world is no good if visitors can’t find it. Keeping some design conventions in mind can help your visitors out.
Generally speaking, contact information can be found in two places:
Primary Navigation is an ideal location for a contact page link. Visitors usually look for contact information on the right side of a page because it is seen as an element of secondary importance. For this reason you’ll commonly see the contact page link as one of the last elements within site navigation.
You might also see a smaller sub-navigation in the top-right corner of the screen. This is also a valuable position for the contact page. Saying that, placing a link to the contact page in a drop-down menu might best be avoided as it could easily be overlooked.
The Footer is also a popular location for contact information. It can either hold a link to the contact page:
or the most important contact info itself:
Anticipating visitor flow to a contact page is tricky, so placement of a link in at least two locations as mentioned covers you quite well.
Contact Page Essentials
Now that we are confident that visitors can find their way to the contact page, it’s time to think about the actual content. Let’s start with the basics and take a look at information which should be present.
Email Address / Contact Form
An email address is the easiest way to contact a business online. Alternatively, you could use a contact form that sends an email. Via a contact form you have more control over the content (required fields) and it can prevent spam. More about contact forms later in this article.
Address
Businesses with a brick-and-mortar store should not forget to mention their address. If you have multiple stores it’s best to create a separate page for each location. Fill this page with store-specific contact information, opening hours, driving directions, etc. This is not only useful for visitors, but can also help your site for local search queries.
Telephone
Displaying a telephone number conveys a sense of trust. It is often seen as a sign that this is a real company, which can be really helpful for online shops.
Social Media
A lot of websites are starting to add social media buttons to their contact page. Although this will probably not benefit every site, for some visitors it can be a real added value. Especially since more and more companies are offering customer support via Twitter (sometimes even 24/7).
Extras
There’s no “one size fits all” solution for a good contact page. Each website or business requires certain elements that might be redundant on other sites.
There’s plenty of extra information or features that can be useful on a contact page. For brick-and-mortar stores it can be a good idea to mention the opening hours for example. Big companies might link to their Live Chat feature and eCommerce sites can cement users’ trust by displaying their VAT number.
Usable Information
Making the information on your contact page usable can prevent a lot of visitor frustration.
Include your contact information as HTML text instead of images. This may sound as a no-brainer, but there are plenty of websites that use other techniques. HTML text can be copied and pasted, making it easier for the visitor to save your contact data.
An email address should use the mailto link. This allows visitors who click on it to send an email without first having to copy the destination email address and open an email client. One issue can arise with this technique however, in the form of spam robots picking up email addresses associated with a
mailto: link. Therefore, you may want to think about first obfuscating email addresses using a service such asmailtoencoder.com.On a related note: telephone numbers should also be interactive. Last year, we posted a quick tip on how to make a telephone number clickable. Thanks to a little piece of code, smartphones can recognize telephone numbers, making them callable. This is really handy for mobile users.
Businesses that rely heavily on their brick-and-mortar stores can benefit greatly from an interactive map, allowing users to quickly find their way to the point of sale. Displaying a store’s address is great, but adding an interactive map is better.
Thanks to Google Maps it has never been easier to embed this useful feature. Simply enter your address in Google Maps and click the link icon in the sidebar. There you’ll find the embed code.
Did you know you can customize your map? You can style the map colors, add custom map markers and create a legend. You’ll find more information on developers.google.com. You might also consider alternative services such as the rather tasty Mapbox.
Don’t Forget Search Engines
As a visitor, you’ll instantly recognize an address on a contact page. Search engines, however, need a bit more help recognizing the various elements.
We can solve this by using structured data. Structured data is a form of HTML markup which gives search engines more information about the underlying meaning of the content.
How does it work? Let’s say we have a web design agency called ‘Fine Design’ that is located at 3102 Highway 98, Mexico Beach, FL. Microdata allows search engines to better understand this address. The HTML code will look something like this:
001 002 003 004 005 006 007 008 | <div itemscope itemtype="http://schema.org/LocalBusiness"> <h2><span itemprop="name">Fine Design</span></h2> <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> <span itemprop="streetAddress">3102 Highway 98</span> <span itemprop="addressLocality">Mexico Beach</span>, <span itemprop="addressRegion">FL</span> </div></div> |
You might want to go one step further and wrap this block in an
That’s it for the company address. However, we can also use microdata for the telephone number and email address:
001 002 | Tel: <span itemprop="telephone">850-648-4200</span>Email: <a href="mailto:info@finedesign.com" itemprop="email">info@finedesign.com</a> |
Thanks to this markup search engines know that this is the address, telephone number and email address of the ‘Fine Design’ company. It’s implicit information, meaning that visitors can’t see it, but it’s very useful search engines.
You might also consider using the hCard microformat which easily allows for saving of contact data on various platforms. Read more about microformats on html5doctor.com.
Contact Forms
Most websites use a contact form on their contact page. However, some contact forms are unnecessarily complicated and user unfriendly.
As simple as a contact form might look, it’s actually a combination of several crucial components. Each of these components should work together to provide the best user experience.
Input fields
Input fields, such as text fields, radio buttons, checkboxes, etc, allow the user to fill in the necessary information.
Site visitors are more likely to fill out shorter forms as they require less effort. The number of input fields is a balancing act between user experience and business needs. Hubspot analysed over 40,000 forms and looked at the effect of an increase in the number of input fields. The takeaway of their study is that you should use as few form fields as possible and be especially cautious with more sophisticated text areas and select boxes.
Help your visitors fill in these fields by indicating the proper format. Telephone numbers and dates can be tricky, especially for international visitors. The HTML5 placeholder attribute will help you out here.
Next, make sure you highlight required fields (a common convention is to use an asterisk*). Explicitly stating that an input field is required or that the field is optional is a safe way to go.
Finally, it can be useful to highlight the active field. This can be as subtle or as eye-catching as you want.
Below is a contact form example from a tutorial by Jim Nielsen. He uses a red asterisk for required fields, gives some formatting advice and highlights the active field.
Form Validation
Inline form validation can also prevent some contact form headaches. It’s very frustrating to having to resubmit a form over and over again because you entered the wrong data or data in a wrong format. As we’ve mentioned before, it’s best to help visitors by displaying the required format (e.g. dates, telephone number…).
Buttons
You can’t have a contact form without a submit button. This button should be at the bottom of the form. Use ‘send message’ as a button text instead of ‘submit’ to remind customers what they’re doing.
A common standard from yesteryear is to include a ‘reset’ or ‘clear form’ button. Don’t. People will click it accidentally. There’s nothing worse than typing an elaborate message and losing it because of a ‘reset’ button.
Feedback
The visitor has filled in his contact information, typed a message and hit the ‘send’ button. Now what? Did the message get through or not?
Reassure your visitors that the message has been sent successfully by displaying a confirmation message. A confirmation email is also an option.
The same advice applies for errors. Displaying an error when the message failed to sent is a must – it can prevent a lot of future discussions. The error message should be user friendly, so avoid displaying startling error codes.
Contact Page Design
There are a lot of technical requirements for designing a better contact page, but let’s not forget one of the most important aspects: visual styling.
If you’re using a contact form, make your fields large, friendly and enticing to fill in. White space and padding can come a long way.
Website visitors often follow an F-shaped pattern when they browse a web page so keep this in mind when you’re designing your layout. For contact forms it’s best to stack all fields vertically instead of placing them side by side. This reduces the number of eye movements visitors need to make in order to fill out the form.
A contact page should fit the visual identity of the rest of the site. A consistent look is key. Take a look at this contact page of ‘Let’s Travel Somewhere’ for example, designed in the form of a postcard.
And as with most web-design related tasks; creativity pays off. Neil Patel designed his contact page in the form of an infographic, tripling his contact requests.
Contact Form Examples
Talking about good contact forms, let’s take a look at some examples for inspiration (click on each image to visit the respective website):
Conclusion
Before designing your contact page, make sure your visitors can find it. Link to it from your main navigation or footer. Remember that most people look for contact information on the right side of the screen.
Think about the information that needs to be included. The ability to send a message, either via an email address or contact form, is essential. An address and telephone number can also be useful. Additional info such as links to social media profiles and opening hours might be useful for certain businesses.
Interactivity is also important. Use the mailto attribute for email addresses (in an obfuscated manner) and the tel: attribute for telephone numbers (very useful for mobile visitors). An interactive map such as Google Maps can also be embedded, but consider the performance consequences of doing so.
Contact form usability can make or break a contact page. Start by only asking for the most essential information. Showing the proper format for input fields and using inline validation can prevent a lot of headaches. Don’t forget to display a success message when the form is sent.
Comments