Summary: Despite 30 years of having the World Wide Web, designing a user-friendly website in the 2020s is still challenging. Since the advent of mobile browsing and new web vitals standards, “user-friendly” is an ever-changing target. Here are the latest best practices in website UX design.
What is a good user interface design? That question has been the subject of heated debate on many web design forums since there was a web. There are several subjective interpretations of a design idea, but we can cut through this confusion to focus on the objective best design. What makes the most sense to the most people? Web design is only 50% technology; the other half is human psychology, cognitive neuroscience, and a touch of sociology when you examine conventional standards we’ve all been trained to accept.
Not only does good web design get you more visitors and hence more potential customers, but Google wants good web design too. This is why Google has begun the big push for Core Web Vitals, a set of standards concerned not with SEO content and keywords but how the buttons, images, and links behave on a web page. Core Web Vitals focuses on website speed and efficiency for mobile users. With a well-designed and user-friendly website UX, you’ll be able to score higher rankings, attract more visitors, and lower your bounce rate (which is the number of people who visit a page and then leave right away).
In this article, we’ll talk about the 7 habits of highly effective websites…
#1: Speed Counts
Nobody wants to wait for websites to load. We’re all digitally plugged-in hotheads in the 21st century. We have social media feeds to check, items to purchase online, co-workers we have to email back, and a Zoom meeting scheduled for 10 AM. What’s taking so long? Years of steady improvement in web performance have raised the bar regarding what to expect in a web page’s loading time.
Action point: Check your website on Google Page Speed Insights. With some fudge factors taken into consideration, you should have your page speed score be >=80. Remember that if your website has different versions for AMP, check that version too. It’s also a good idea to test multiple pages within your site since this diagnostic tool measures just one page, not a whole website. Analyzing the performance of different pages, such as a product page compared to a single blog post, can help you identify bottlenecks.
Is your site failing the speed test? Here are a few things to look at:
- It might be time to upgrade your server, host, or hosting plan.
- Excessive Javascript from plug-in bloat might be dragging your WordPress down.
- Your images might be too big (data-wise) or use web-unfriendly formats.
#2: Responsive Design is Smarter Design
“Responsive design” means that your website works equally well across all sorts of devices, including desktop, laptop, tablet, and mobile phones. It even has to work right when a user turns a tablet or phone from landscape mode to portrait mode and back. It also has to take into account different browsers and platforms across Chrome, Firefox, and Edge running on Apple, Android, Windows, and who-knows-what.
Through all these iterations, the web design should be fluid, taking the shape of whatever container it is poured into. The idea here is that the interface has to be clearly visible and easy to use without making users scroll endlessly or struggle to tap a flyspeck text link.
Action points: Luckily, most default web design templates, such as skins for the major CMSs (WordPress, Drupal, Joomla), have responsive design built in up to a point. You should either be sure your site meets Core Web Vitals standards or uses AMP for its mobile visitors. Most of the rest are details like setting viewports for images, avoiding fixed-width interaction elements, and other back-end website developer issues.
It’s a good practice to test your mobile web pages and ensure that issues haven’t crept in that would frustrate users.
#3: Mobile is Mandatory
We don’t mean to harp on the same point over and over around here, but more than 90% of your website visitors are on mobile. It is easy to forget about the mobile experience when we spend a lot of our work life on our laptops or desks, with big monitors and keyboards attached. When you see the world through a laptop screen, it’s hard to think about pocket-sized phone screen parameters. But even us web nerds, off the clock, browse on the phone too.
Not only should your site work for mobile, but it should have extra features that come in handy on mobile.
Action points: Look for opportunities to include these features in your UX design:
- A “call now” button to direct dial your customer intake line.
- A Google Maps insert for directions.
- Have pop-ups minimized by default, and make sure they don’t block the whole screen even when summoned.
- For important action steps, use big, chunky buttons that are easy to hit with a thumb.
- Keep content to a minimal volume, broken up into sections, and easy to digest in small bites.
- Keep the size of text and UX elements sensible for a phone screen.
It is tough to optimize for the phone on the same page that you want to display on a laptop too, which is why AMP is a thing. Previously, sites had a special mobile version, typically designated with an “m” somewhere in the URL. Compare Wikipedia’s AMP listing with the mobile version of the same page. The same idea is back with AMP, and Core Web Vitals is the standard that expects the mobile-first design to be the default.
#4: Information is Useless If You Can’t Find It
Small retailers and personal portfolios have it easier because they can get away with just a few pages, a blog, and perhaps a shopping cart app. Add “about us” and “privacy policy” links in the footer and call it a day. For larger organizations, the challenge becomes a dual mission of providing a lot of information and organizing it in a sensible way that’s easy to navigate.
Action points: This time, you get a whole checklist:
☑ Use multiple methods of website navigation for large blogs or complex websites. This can include:
- menu navigation
- breadcrumbs
- a search box
- an archive listing
☑ Keep your most important content “above the fold” in the upper half of the web page. For landing pages (especially those fed by ads):
- Have the CTA highly visible and present on the first screen without scrolling
- Include the pitch and a value proposition to inspire the user to action
- Convey with visuals that the user is in the right place (after clicking on the visually matching ad)
☑Design your website and compose your text keeping the user in mind.
- Avoid using jargon or industry in-jokes that the user might not be familiar with.
- Try to think like the user and anticipate what actions they will take most often, then make those the most focused navigation.
- Make the home page the central hub of starting points for users to complete tasks.
For a complete refresher on website structure, check out our Information Architecture 101 piece.
#5: Be Considerate of the User’s Time and Attention
A potential customer has followed the trail to arrive at your site, and they’re on the cusp of becoming a sales lead. You should treat them as honored guests and accommodate them. Now, we would all like it if website visitors practiced patience as they fully digest all of our content and listen to our value proposition.
But the reality is that your users may be pressed for time, distracted, or just not very adept with this modern technology. They might not be familiar with your industry and its complexities. You can’t always count on users to be functioning at the top of their cognitive abilities every second of the day. They likely want to get through this process with as little bother as possible.
Action points: A checklist for the “skimmable” website:
- Convey the most significant information and actions by size, position, and focus
- Make it easy to understand what the site is about immediately and your unique selling proposition
- Keep information concise wherever you’re leading the user to a CTA
- Have a good balance of content and white space on your website so it doesn’t look crowded
- Use headers, bullet lists, and small paragraphs to keep the information bite-sized
- Anticipate the questions users will have and add an FAQ section
Some business website layouts still suffer from not being able to adapt to a web-use paradigm. They think more in terms of a sales circular, brochure, or magazine layout. Perhaps that word “page” in “web page” confuses people into thinking in terms of print media. Anyway, here’s a refresher course in UX design and how it impacts your sales.
#6: Conservative Layouts Sell More
Everybody loves a wild, wacky, creative genius. You just don’t want them in charge of the grocery store or highway infrastructure. When it comes to your business, fight the impulse to strike out in bold, original directions on your website interface.
People have come to expect a logo in the upper left corner, a search feature in the upper right corner, a navigation menu bar at the top, the “about us” and site policy pages to be in the footer, a sidebar on the right with more navigation elements, and buttons to perform an action such as “buy,” “call,” “schedule an appointment,” “subscribe,” etc. Use these design conventions to your advantage, and give the user what they’re used to when it comes to business UX.
It may be boring, but it’s practical. Save the creative visionary inspiration for places where it will be appreciated.
Action point: Pass the “grandma test.” Have a user unfamiliar with your site check it out for you. Interview them afterward. Could they understand what your business does? Could they find out how to take essential actions? Did they have questions, such as what forms of payment your digital storefront accepts? Did they understand what your offer is and what the terms are? Could they navigate around without too much trouble?
Lacking that, every business website should have a contact form, preferably from a page linked from the footer with the conservative title “contact us.” You will likely get surprising insights into what your users expect and how they are thinking over time.
Learn more about conducting UX interviews and research.
#7: Business Websites Should Be For Everyone
By “everyone,” we mean “think inclusively” by following web content accessibility guidelines (WCAG). This way, we can accommodate the vision, deaf, and hard-of-hearing users where applicable. Keep up with those guidelines and look for opportunities to adjust your UX for people at all levels of ability.
Action point: Some standard accessibility practices include:
- alternative text for images
- text subtitles and captions for video and images
- text formatted with screen readers in mind
- use periods in abbreviations (a screen reader won’t recognize “USA” as an acronym)
- use colors and icons to make actionable tasks clearer
Remember also that some people are differently-abled in ways not easy to recognize. The word to know here is “neurodiversity,” which encompasses the different ways people think. Give some thought, where possible, to making things easier to understand for people with ADHD, mild autism spectrum, color-blindness, and other needs.
Conclusions
Lest we forget, your website’s UX should support your SEO strategy and vice versa. As Google has updated its algorithms, it seeks out sites that are useful to users, working the way users expect them to work. Making things easy for users often makes things easy for Google’s website indexing as well, even if some elements only apply to one or the other.
Bottom line: if you want to increase your visibility on Google, you need to prioritize UX.
Check out our handy article on 3 ways to ensure your website supports your SEO strategy.