Don’t Sacrifice Function for Beauty
Matt Wilson

Front End Developer

The Inescapable Law Of Design

We’ve all been to websites that are visually breathtaking, but once that excitement dies down, we realize that the site is extremely difficult to navigate. The menu is unclear or hard to find. The layout doesn’t follow any kind of practical flow. The information you’re looking for isn’t readily available. These are all things that occur when the “beauty” of a site takes precedence over the functionality.

The main points that we will focus on here are UX (user experience) of a website, and website navigation, which is possibly the most important factor to consider when thinking about UX. We’ll use a simple “Do’s & Don’ts” format to highlight some important points.

UX (user experience)

UX is the overall user experience for your website. It is the first thing you should consider during the design process. Sites with less than ideal UX features will push visitors away rather than encouraging them to stay and explore your site. Here are some of the more important things to make sure you do.

DO
  • Do keep design consistent from page to page. The last thing you want is for users to have to re-learn how to find what they’re looking for on different pages, or sections, of your site. A consistent design throughout helps users navigate the site, ensuring they find what they want with as little effort as possible.
  • Do include RELEVANT photos & images wherever possible. The key word there is relevant. Don’t just throw pictures haphazardly on your site. Each image that you use should be important to the overall flow of the site and should contribute to the user’s knowledge of you and your business. Use images to help tell your story!
  • Do label buttons according to what they do. Avoid using generic terms such as “Click Here,” and be as straightforward as possible about what will happen when the button is clicked. If you have a button on your site where users can sign up for your weekly email, use a phrase such as “Sign up for our email” instead of “Find out more” or “Follow us.” The user should know exactly what they are clicking the button for!
  

Just as important as the do’s are the don’ts!

DON’T
  • Don’t use too many typefaces or colors. A good rule of thumb is to choose no more than two typefaces and no more than two site colors. Make sure the fonts you use are easy to read. Only use cursive fonts on logos. They’re harder for many people to read. All sites will make use of black and white, but another color or two is useful for accent. If your business logo has two dominant colors, use those colors within the site (unless they make things hard to read outside of the logo). Keep contrast in mind as well. Don’t use dark blue text over a black background or light gray on a white background. The site needs to be READABLE for all users!
  • Don’t use a horizontal scroll. Vertical scroll is common on almost every website. Our brains are trained to scroll down on a page if we’re not finding what we’re looking for on the visible part of the page. However, scrolling horizontally is not natural to the vast majority of users. It can be especially problematic on mobile and tablet versions of websites where users drag the page to the location they want. It’s almost impossible to drag a page straight down if there is room to scroll horizontally as well. The site looks sloppy, it’s harder for users to find what they’re looking for, and it’s an overall bad design practice.
  • Don’t let text dominate the page. This is especially important on home and landing pages. Text should be broken up into“bite-size” chunks. Even then, most users won’t take the time to read all of the text. The average user will scan a homepage or landing page to look for what they need and avoid any unnecessary reading. If you need large amounts of text, have a page (or pages) specifically dedicated to that information. If a user needs more info, they’ll click through to the appropriate page to find it!
  
Navigation

 Navigation is how users find their way around your website. Clear and easy-to-use navigation is one of the most important parts of your website!

DO
  • Design easy to use navigation. You should limit your main navigation menu to as few options as you can. Users can get easily overwhelmed if there are too many options. Rather than sort through all of them, they’ll often just leave the site and look for something more simple. Three to five options in the main navigation is ideal, though not always possible. If needed, sub-navigation menus can be added on a page-by-page basis.
  • Keep navigation consistent. Your site’s main navigation should be the same across all pages of your website. Anything else is confusing for users. Make use of sub-navigation menus on pages that need more than the main.
  • Change the color of visited links. Another way for users to navigate your site is by links. If you lead a user to a certain page of your website by an embedded link within a paragraph or heading, be sure that the next time the user sees that link, it is a different color. This enables users to know which links they’ve already visited and is especially useful in aiding users searching your site for something specific. They won’t have to constantly retrace their steps.
 
DON’T
  • Don’t open internal links in new tabs. All links that keep a user on your site should open in the same tab they are currently in. Outside links can open in new tabs if you prefer, but opening internal ones in new tabs can confuse users. They’re generally expecting internal in the same tab and external in new tabs.
  • Don’t overcrowd your menus. This circles back to designing easy-to-use navigation. It’s both aesthetically pleasing and functionally preferred. The fewer choices a user has to make, the more likely they are to stay on your site!
  

User experience will make or break your site. Give the users the information they need in as simple a way as possible. Don’t bury your functionality beneath a pretty exterior. Users just won’t stay.