DESIGN

5 Evergreen Web Design & Development Tips to Improve UX

by Chad Carpenter | 8 MIN READ
web-design-development-tricks-ux

A great website should be both aesthetically pleasing and also function as an effective conduit for online visibility, lead generation and even closing new customers.

Below are 5 evergreen tips that are guaranteed to improve user experience (UX).

By implementing these tactics, along with some proper testing and experimentation, you’ll soon be on the path to better conversions, lower bounce rates, and improved ROI from your website design efforts.

Incorporate Web Personalization

Basing a user’s experience on their past behavior, such as last purchases or cached browsing history, can bring a lot of benefits both to the website and the user.

Web personalization uses dynamic content that can help drive more highly targeted leads, create clearer conversion paths, and decrease bounce rates while increasing page views and time on site. Examples of this are seen in e-commerce website sections like, “other products you may like,” or that dynamically change aspects of a landing page to better reflect a user’s preferences and demographics is creating a more targeted website for each individual user.

Personalization not only pulls the user in, but can help save them time spent searching or browsing to find something they like. Consider using dynamic content elements into your website to capitalize on a more targeted user experience.

Here is an awesome example of website personalization from Optimizely that uses the time zone based on IP city location and adjusts the message as well as the background image based on the time of day. This is a simple, but very thoughtful, example of removing the generic website experience:

optimizely-homepage-web-design

optimizely-personalization-web-design

Invest Time into the Design of Your Mobile Layout

Smartphones and other mobile devices now account for almost 66% of all time spent online, according to comScore.

This makes responsive design the new standard within the history of web design trends. It's not only required for better mobile-friendly design, but taking a more in-depth approach on how users are actually interacting with a website on mobile can make all the difference.

For example, let's say you owned an organic grocery store. What someone is searching for on the desktop version of your website would likely be different than what they wanted on mobile. While a user is on the go, they may want to find your store’s hours of operations and location at the top of the page, since they are heading to your location. From their home computer, they may be browsing what products and specials you have during their weekly grocery prep.

Conversely, if your site is more about SaaS or a technology-based service, your users may like card style layouts with parallax scrolling techniques.

Whatever options you have, consider how your target audience is using your website on different devices and A/B test different layouts to figure out what works best. Investing time and money into these activities is almost always worth the squeeze.

At Firesnap, we use HotJar to gather real-time user feedback and use that data for conversion rate optimization (an integral part of our growth driven design services). Using dedicated, real-world testers can help too, using services like UserTesting.com to get fast, human feedback.

Below is another great example from Whole Foods. Just look at the personalization from your mobile phone to desktop.

Mobile web design

whole-foods-mobile-design

Desktop web design

whole-foods-desktop-web-design

Use Interactive Content

While real-time feedback can give web designers and developers the feedback they need on the basic layout and design of the site, the content usually requires less testing and a more innovative approach.

Any elements that call for a user to react are going to increase their engagement. This could include videos, calculators, quizzes, hover effects (on infographics or maps), and games.

Just take a peek at our Marketing ROI calculator:

marketing-roi-calculator-firesnap

We've already received 230 views with the majority of traffic coming from direct and organic.

A key element to keeping it fun is keeping it simple--if it's too complex, users will get bored and jump ship. Use elements of color psychology and gamification to educate users about new products and services.

Use Animations Wisely to Explain and Delight

Animations on a website can be a great way to add impact to your content and allow the user to easily digest content or just to add some delight to their experience...but they should be used wisely.

Too many can be overwhelming and off-putting to users, dating the site. Use animations to direct users on what actions to take or to point them to something new you are offering.

Another element that factors into UX with animations is page load speed. Don't let your animations slow page load, or they may never be seen! You might consider using SVG animations. Taking the html and javascript out of the animation design, SVG works as vector designs (and best of all they are auto-responsive). No responsive css or code is required, so they don't drag down your page load time.

Bellroy is a good example of how to do animation right:

bell-roy-web-design-animation

Simplify Your Design and Navigation

A simple, easy to navigate site that doesn’t overdo it on the interactive content and animations is what most users are looking for.

Make sure all available actions to users are clear and concise so they can better find what they are looking for. The trend of simplistic minimalism in design is huge for a reason. It makes your site's interface easy for users to understand and engage with.

And this applies to the navigation as well. According to a study referenced by Hubspot, about half of all website visitors will use the navigation menu to orient themselves with a new website when they first visit it.

Make sure your navigation is obvious and not too complex: if you have a site hierarchy that is more than 3-4 levels deep, your site might be in need of a redesign to restructure and consolidate pages.

We also recommend the following tips for better website navigation:

  • Use "sticky" menus when pages are long or for quick access
  • Let users know where they are on the website by using breadcrumbs
  • Don’t use hamburger menus on desktops: they are less noticeable, less familiar, and less intuitive
  • For mobile navigation, show the most frequently used options and hide the others under a hamburger menu. In-page menus, categorized landing pages or submenus are best for secondary navigation on mobile

Here is an example of how breadcrumbs can be designed from one of Firesnap's clients, Kanopy Insurance.

web-design-breadcrumbs

The above elements are all aspects of web design and development that make a major impact on your website’s usability, brand, and interaction with users.

However, sometimes it’s difficult to determine what is working for your website and what isn’t.

To get a better idea, consider an UX audit, which can ensure that your website is as a user-friendly as possible. Also consider A/B testing all of the elements above, especially if you’re not sure what your users will like better.

For instance, are there more clicks when you place an event registration CTA in the main navigation bar? Doing an A/B test can help determine what gets more engagement and clicks.

Great UX Can Free Up Your Time & Budget

When your website is designed and developed for exceptional UX, your time and budget is freed up to work on big picture thinking.

What tips do you have for web design?

How have you improved the user experience on your website?

Please share in the comments below!


Get these 25 other must-haves for website design & development success!

Download the Web Design Guide

Originally published August 31, 2017. Updated November 9, 2017.