User experience (UX) for websites is an extremely broad and wide-ranging topic. With a wealth of information available on boosting your UX, we’re going to focus on optimizing two lesser covered areas; site navigation and contact forms. Site navigation is the literal map to a website, and contact forms are responsible for converting a lead or closing a sale. While both aspects are somewhat straightforward, there is a lot that can be done to increase UX when interacting with these tools, let’s dive in!

Site Navigation

For the purpose of this article we won’t delve into the multiple types of site-nav options (mega menu, vertical sliding, hamburger, etc.) and how to optimize UX/UI for each option—that’s an entire post on it’s own! We will discuss foundational user experience tweaks in reference to an industry standard; the top navigation bar.

Informative Item Descriptions

While you obviously can’t write a sentence for each link on your navigation bar, you should avoid being too vague.  For example- if you’re a bank that specializes in small business loans, don’t have a navigation option that lists “Services” it would be better listed as “Business Loans.” SEO Bonus– when your site navigation uses descriptive anchor text that ensures you have keyword-rich links pointed to your pages. 

Single vs. Double Navigation Bar

Navigation bars can either consist of a single line of text with links to pages (or drop down menus, more on that later) or a double navigation bar. The choice here really comes down to how much information you have to convey. One of the main themes of this post is keep it simple, so if you can get away with a single nav bar that offers a few integral site destinations, that is recommended. A single bar is visually cleaner and efficient for the user as they won’t get lost in multiple items. If you do need to have a double navigation bar, make sure that each bar is differentiated, to avoid them blending together and confusing the viewer. See the Entrepreneur example below where the primary and secondary nav bars are different colors as well as offset from one another.

Single Navigation Bar via Forbes

Double bar navigation via Entrepreneur

Drop Down Menu

If your site is multi-page and you would like all options available via the main navigation, industry standard is drop down menus. This allows you to have important anchor topics, that you can then elaborate upon in the drop down menu and link to those relevant pages. However this needs to be done cohesively, pages should be grouped according to theme. IE- Don’t have ‘Customer Service’ in the dropdown menu for ‘About Us’—use common sense.

Ease of Use

Site navigation should be easy to operate. Links on the nav need to be large enough to both click on and/or access drop down menus. This is especially important for mobile or tablet users that need to be able to use touch screen to select the pages. Navigation should also be consistent throughout the site. Sticky menus have become standard practice; where the nav bar stays at the top of screen while your scroll down the page. Think of a large excel spreadsheet, you want to freeze the header rows as you scroll down, it’s the same principle for your site.

Contact Forms

Less is More 

Contact forms are a pain, no user enjoys typing out their information. So the trick for successful UX is to make it as painless as possible. Only ask for information you truly need. If your goal is growing your mailing list, just ask for email address and include an opt-in. When you remove unnecessary clutter from your contact forms conversion rates are increased by 37%.

Image Source: Creative Bloq

Help the user out!

Whether a contact form is closing a sale, or converting a lead, UX best practice is to virtually hold the user’s hand. Automatically activate the first field, have it highlight where they need to start. Make sure each field has input constraints so that users can only type in the correct information, IE- only allow numbers to be typed in phone number section. Add dashes and spaces to make phone numbers or credit cards easier to see. Is there nothing more frustrating than typing (and re-checking) a 16 digit credit card number, that isn’t broken up into 4 digit groupings?

See how HubSpot highlights the first field?

Single Column Design

Opt for a single column design over multiple columns. It’s better on the eyes of the user, as we naturally read top to bottom for sites. This also cuts down on confusions as there is a clear starting point to the form. Single columns are also optimal for mobile as well (smaller screen size, no side-to-side scrolling). If your contact form requires multiple fields, make sure to group them together in a logical manner with slight breaks between the fields, IE- contact info, credit card, shipping details…

1800flowers.com groups together contact info and billing address info

Labels

There isn’t an industry consensus on exact placement of form labels as far as left-aligned or above the field. There are many in-depth discussions on the pros and cons of both. Google has done studies and aired on the side of having labels above the form field. One thing that everyone agrees on is that labels inside the form field that disappear once the user types are not UX friendly. It creates serious confusion. So stick with labels on the left or above in single column format and you’ll be golden!

Well Articulated Error Messages

It is very frustrating for a user to fill out a form only to come up against an error message. What compounds that frustration is when a user doesn’t know what’s wrong. The common error message is ‘Looks like something’s not right’ A form should list the error and highlight it, not make the user go back and check all the fields. That’s just poor customer service!

Bottom Line for Site Navigation and Contact Forms

UX is complex and websites take a lot of effort, not to mention your content creation, lead acquisition, etc etc. Site navigation is the first integral step for a user being able to access your site. Without proper navigation all of your hard work is rendered useless! Then a contact form can very well be the last step a user has with your site. Simple fixes focused on positive UX for both items can truly go a long way!