Good User Experience Doesn't Ruin Beautiful Website Design

89% of consumers shop with a competitor after a poor user experience.

Design doesn’t need to just set a great first impression with your website visitors, it also needs to maintain that positivity as users continue to use and interact with your site. A beautifully designed website will still deter users if they can’t correctly sift through your website and find the information they came for.

If website visitors can’t find information easily on your site, they won’t stick around.

User Experience wins over Beauty and Design when it comes to:

Navigation Decisions

Navigation areas need to be clean and simple. They need to have the main pages you want visitors to head to and the ones they’re looking for. This is NOT your shining opportunity to be cute with fluffy words like “journal”— call it a Blog, or “stuff your bag” — call it a Shop, this is what they expect and every time you veer from these expectations you lose customers.

Keeping Buttons Consistent

People need to know what to click in order to move through your website. If sometimes a button is one color, another time it’s a different font, and if some jump and others don’t do anything on hover it’s going to be hard for them to know which ones to click and how to proceed. Keep buttons similar in style, change color as needed, but keep a consistent size and style for all your main buttons. Save differences for things like a Sale button or Main call to action.

Allowing for Closing Out of Pop-ups (and them not reappearing often)

Pop-ups are annoying. Most people don’t like them, however, they somehow still statistically work for collecting info like email addresses or giving out promo codes. Keep in mind for those that do hate them, they need a QUICK and OBVIOUS way to get out of the pop up FAST. Make sure there is an easy to access exit button to any pop-ups you have.

Also be sure to take advantage of features in your pop-up software that sets parameters for how often to show it again, which pages to show it on, etc. Users are less annoyed by them if once they click off it doesn’t reappear immediately on the next click. As a personal note, if I land on your website and close off of one and it reappears on my next click I almost immediately leave the website. It’s such a simple thing to set up and it really shows you care about your users if you take the time to change a few settings to make them less intrusive.

Placing Extra Info in the Footer

The footer of a website is often referred to as the junk drawer. Many visitors in 2020 realize that if what they’re immediately looking for isn’t found in the top navigation bar they can scroll to the bottom and find what they need there. This can be links to additional pages such as “my account” “legal terms” “return policy” etc. Extra points if your footer includes a search bar for them to really find what they need.

Websites are scanned not read, use headings accordingly for visual hierarchy

Using headings for only looks is a major mistake not only for your visitors understanding of what you do but especially for Google to know what you’re all about. Users often scan a page from top to bottom and read over the main headings first, going back to read supporting text if the headings draw them in. Make sure your headings are saying the most important pieces of information you want to convey. Here’s a good self-test for this: If a visitor ONLY read your larger headings down your entire page, could they tell you with confidence what you do, or how they can hire you?

Using common website patterns and interfaces

Don't make users learn something new. Common website patterns include things like a “hero section” which is often an image with words on top of it at the very top of the page. Blogs often have a sidebar, this again is an expected website pattern. Use good User Interfaces such as search features for a hotel booking site front and center or a cart area in the top right for a store.

A side note here on mobile...

All of the above is amplified in its importance on mobile. If users can’t click buttons because they’re too small, can’t exit a popup because it’s button is off-screen, or can’t find info because of the design of the site, they’ll leave even faster than they got there. Mobile users are in more of a hurry to find what they need. Consider on mobile removing areas that aren’t truly important to getting the info across that it needs. Extra spacing, extra images and extra words for fluff aren’t going to keep readers there longer, they’re going to make it harder on them, and they’ll leave.

Using repetition to your advantage in your website design

How repetition helps your design:

  • Organizes your website’s information logically
  • Guides your potential client in a clear way
  • Brings elements together in a cohesive way
  • Teaches your visitors the best way to interact with your website, guiding them down the path you design
  • Repetition can help your visitors anticipate how things work on your site
  • Makes people feel comfortable, so they will stick around longer

Don’t worry, website design doesn’t have to be boring and all about these unlisted rules either.

Here are a few ideas of areas where you can be more creative and break the design rules!

  • Forms where visitors submit information, they still need to be easy to use, but they can, of course, have really different questions depending on the site. 
  • Layout of your graphic elements such as shapes and colors, swashes of colors.
  • Portfolio layout, it’s ok to have a variety of projects in your portfolio, they don’t all have to coordinate and match.
  • Typefaces. Make sure they’re still readable but if your brand calls for a really fun handwritten font for major areas, go for it! 
  • Bright colors. As long as you can read your text clearly and contrast isn’t an issue, make it bright, if that fits your brand!

Lastly, I’ve found a couple more stats to help encourage you to really take user experience into consideration with your website design. We do this as the first step with all of our clients. No design, no colors, no copy, until we make decisions on some of these elements we’ve talked about here. How will the end-user use this website? What will they be looking for, on mobile, on desktop, in a hurry, shopping, etc? All of these questions need to be answered BEFORE any design can begin.

Takeaway…don't neglect your user’s experience in your planning of your website design.

You've been looking for the "right way" to design a website.

Lacking some confidence in your design skills? Wanting to start designing websites for clients but not sure where to start?
What if you knew every step (in the right order) to go from idea to development... and clients actually love their final website?

Download the Free Guide