Today, user experience (UX) is a popular term in the technology and design industry. However, many are not sure what it means and how to use it. Before we cover our top UX design tips, let’s start by defining user experience and how it relates to designing a successful website.
What is UX Design?
User experience design determines how easy or difficult it is to interact with the user interface (UI) elements of a website. While a UI designer is responsible for deciding what the user interface should look like, a UX designer is responsible for how it should work.
UX designers determine the structure and functionality of the user interfaces. Think about how you feel when navigating a new website; UX design plays a critical role in that, and can influence how a person connects with your brand.
Below we list 10 UX design tips to help improve the design, usability & accessibility of your websites.
1. Start With A Sitemap
Creating a UX Sitemap is the foundation of any new website. Essentially, it outlines the hierarchy of pages to be built. By starting with a Sitemap, you can determine the general structure and flow of your website. Sitemaps are usually built right after the discovery phase, and are helpful in conveying the basic user experience to a client.
2. Indicate Scrolling Direction
While people tend to scroll down when they land on a website, it’s not always obvious. That’s why it is important to indicate scrolling direction. When someone lands on your website, it’s the UX designer’s job to guide them. Usually, that means telling them to scroll down. If there’s nothing indicating scrolling direction, from the visitors’ point-of-view, it might look like the entire page is displayed. That’s called a “false bottom.” Some common fixes for this are:
Add a call-to-action button
Providing a call-to-action is a great way to indicate scrolling direction. For instance, this can be done with a “learn more” button with a down arrow linking to the section below.
Reduce the text/image sizes
Reduce the text/image sizes of the hero section to make the section below visible. This will give a visual cue that there is more information below.
Add a directional cue
You can also add an arrow pointing down to indicate scrolling direction. This is a very common, yet subtle way to get users scrolling.
3. Consider Sticky Headers
Sticky headers first made an appearance in the early 2010’s. Since then, the trend of fixed navigation has only gotten stronger. While there are plenty of UX benefits to sticky headers, it’s important to note that they are not always the best option.
The main UX benefit of having fixed navigation is that the menu is always in the user’s viewport. This allows people to jump from one page to another, no matter how far down a page they have read.
However, while sticky headers help people navigate between pages, they might seem as a distraction while trying to view content. That’s why it is always important to consider the size of sticky headers, especially on mobile devices.
4. Control Color Contrasts
When it comes to color contrasts, a UX designer should think about accessibility. A simple way to approach accessibility is to design for color blind users. Try converting your designs to grayscale to ensure that all website visitors can read important information. When it comes to choosing colors, try to keep warm, lighters in the foreground and dark, colder colors in the background. You should also beware of certain color value combinations.
Color value plays a significant role in readability and user experience. Every color has a value based on its location in the color wheel that determines how well it works with other colors. Overlaying colors on opposite ends of the color wheel can make reading easier – especially for users reading on a smartphone screen in bright light outside. On the other hand, placing text over backgrounds with similar color values can make reading more difficult.
5. Manage Loading Elements
Page load times are huge when it comes to user experience. In fact, readers expect your website to load in under 3 seconds. Anything over 4 seconds and people will start to give up.
If you have a WordPress website that takes longer than 4 seconds to load, check out our article How to Increase Your Website’s Page Load Speed.
In the end, what matters most is that your website feels fast. While ideally this means having a truly fast website, UX designers can utilize loading screens for slower sites.
When it comes to retaining reader’s attention with loading screens, opt for loading skeletons over spinners. Take a look at the example below. Which would you be more willing to wait for? Loading skeletons tend to be the better choice, if possible for your website/application.
6. Use Common Website Patterns and Interfaces
Whenever you arrive on a new website, you probably have an idea where to scroll/click next. That’s because people naturally look for patterns. Sometimes you’re right, and other times you’re stuck looking for next steps. When websites incorporate known patterns, the user experience is often improved.
While some designers would argue that if we all use design patterns our sites will look the same, most agree that there are significant UX benefits to following tried and tested patterns.
7. Don’t Forget Copywriting
UX copywriting is often overlooked when it comes to designing websites. The whole goal of user experience copywriting is to guide users towards taking a certain action. Some common tips to improve your ux copywriting are:
- Keep your copy and headlines succinct
- Avoid long paragraphs
- Avoid double negatives (i.e “I do not want to unsubscribe”)
- Use bold formatting to emphasize the benefits of certain headlines
- Write with an active voice
- Keep some details hidden (encourage readers to dig deeper)
- Use numerals (i.e. “2” vs “two”)
8. Keep Mobile-Users In Mind
With 63% of google searches coming from mobile devices, it’s critical that your website is mobile friendly. But not only that, your website should be responsive across all devices. Don’t think so? Check out our article Why Responsive Design for Mobile Matters.
In reality, responsive web design has never been as important as it is now, and it’s the UX designers job to account for all of the different devices. Doing so will enhance and improve the user experience by adapting to whatever device a website is being viewed on.
9. Navigation Should Be Easy
Navigation is one of the most important elements to any website. It determines the accessibility of your website and plays a big role in keeping readers engaged. Did you know that only 30% of the website users use the search function and the majority 70% rely on navigating directly (source)? That means navigation menus have a very high priority in UX design. To help your readers out, make sure your navigation is easy to use by doing the following:
- Keep your navigation consistent, both in how and where it appears on your website
- Clearly separate categories and subcategories
- Make all of your navigation links clickable
- Use accurate tiles for your navigation items
- Make sure your search function is easily accessible
- Optimize your navigation for mobile & tablet devices
10. Apply Consistent Design
Lastly, when building out your web pages, remember to use consistent design elements. When a person clicks through your website, they should feel a sense of uniformity. This is usually achieved by repeating fonts, colors, headers & layouts. When you have consistent design, the usability and learnability of your website will improve. Not only that, having consistent design elements will make decision making easier, and will save the designer and client a lot of time and money.
Quick Summary
In conclusion, these 10 UX design tips should help you with your next website project. While there are plenty more UX design tips to cover, these are the core principles.
- Start With A Sitemap
- Indicate Scrolling Direction
- Consider Sticky Headers
- Control Color Contrasts
- Manage Loading Elements
- Use Common Website Patterns and Interfaces
- Don’t Forget Copywriting
- Keep Mobile-Users In Mind
- Navigation Should Be Easy
- Apply Consistent Design
About WebWorks LA
Are you a business owner that needs help with your website? WebWorks LA can help you get started. We are based in Los Angeles and have developed and launched several websites for local businesses. If you’re interested in starting a new project, submit your project details here. We look forward to hearing from you!