How Many Of These 7 UX Blunders Is Your WordPress Site Making?

Such is the often stunning visual quality of today’s WordPress themes that it’s easy to get carried away with the look of your site and spend little to no time focussing on how easy it is for visitors to use.

WPMU DEV’s resident user experience expert, Joji Mori, is on a mission to change that and like any seemingly impossible mission it starts with one small step, or in this case, site.

In fact, it starts with your site. So, take a deep breath and see how many of Joji’s 7 Biggest UX Blunders your site is making and how to fix them.

Photo of the controls from a standard front-loading washing machine
No website could ever be as unnecessarily complicated as a washing machine.

A vast amount of research has been, and continues to be, undertaken into how visitors interact with websites, how they perform tasks, how they look for information and even how they determine if the website they are looking at is going to help them.

The success of seminal texts such as Steve Krug‘s Don’t Make Me Think series and the continuing popularity of Nielsen Norman Group’s AlertBox newsletter shows that there is considerable interest in user experience.

The problem is that whilst most of us know that we should be paying attention to UX, somehow it slips through the cracks, or perhaps an intransigent client forces you to commit a crime against user experience and it’s only when we start looking at why a site is not performing as well as we hoped, or planned for, that we start to really think about and address UX issues.

So, in that spirit, fire-up a browser, bring up your site and go through Joji’s list and see where you might have room for improvement.

1. Navigation That Tests Dexterity

We’ve all come across those menus, be they fly-out, drop-down or secondary toolbars that disappear the instant your mouse pointer moves 1 pixel outside the container or you don’t cross a “gap” quick enough in a fly-out menu.

This hypersensitivity is exaggerated the further the user has to move the mouse, so can be particularly frustrating if the desired menu option is half a screen away from its parent and requires the user to track their mouse pointer a considerable horizontal distance whilst remaining within a relatively small vertical space.

How To Fix

  • Shorten the distance between links by going vertical instead of horizontal, or reorganize your menus so that they have less secondary options.
  • Provide users with a margin in error with mouse pointer by not reacting immediately to their mouse pointer leaving a navigational element. Have a look at these example menus (remember to move your mouse pointer outside the labels)

2. Home-Page Imbalance

Screenshot of the WPMU DEV home page
May as well start at home. Does the top half of the screen tell you anything useful? What purpose does the massive image serve?

Ah, the home-page. The battleground of many an organisational website redesign project and whilst the home-page has lost some of its dominance as users increasingly come to your site through a number of pages, it is still likely to be the most visited and therefore the most important page on your site.

Your home-page needs to quickly confirm that it either is (or just as importantly, is not) able to meet a visitor’s needs and imbalance occurs when elements that have little or no part in that process or provide little value are the first thing a visitor sees.

How do you tell what is valuable? Step back and think about why someone is visiting your site: what is their motivation? Are they trying to complete a task or answer a question? Is your site a subject matter expert in a topic of interest? Returning visitors might just need to know if there’s anything new since their last visit.

An obvious example is a large vanity image, common on parallax designs, that takes up most, if not all of the initial view. It may look fantastic but it conveys very little information about the site unless overlaid with very tight copy.

Even those increasingly common home-page sliders are taking up more and more critical real estate without always adding value. And that’s on top of all the other problems with sliders – but more on that later.

And remember, it’s not just about whether an item makes a positive contribution it can have a negative impact by distracting the user, taking up valuable attention and time whilst the user decides if your site is going to help them.

How To Fix

  • Review each element of your home-page and assess it for relevance: does it contribute positively to conveying what your site is about and how it can help the visitor?
  • Remove or replace those elements that do not make a positive contribution

3. Missing Or Obtuse Site Taglines

Screenshot of the wordpress.org home page
Superfluous image on the left but upfront and bold tagline leaves no doubt as to what this site is about.

A tagline immediately sums up what a site is about. They are a fantastic aid to visitors and so you’d think they’d be prominently displayed but, in fact, are often tucked away or not displayed at all.

If the tagline is difficult to find then your site is forcing first time visitors to guess its purpose from page’s content. That increases the effort required from the visitor and therefore increases the likelihood that they’ll be heading back to Google to click on an alternative search result.

How To Fix

  • Create tagline if you don’t have one already. Take your time, it’s not always easy to sum up your site’s purpose in just a few words.
  • If your theme doesn’t place your tagline in a prominent position, where it will immediately be visible to visitors (and this applies to all pages, not just the homepage), modify it!

4. Using FAQs As A Dumping Ground

There’s often a big temptation towards the end of a project to turn homeless content into a question and add it to an FAQ page. Resist this temptation otherwise your site’s FAQ will look like the dumping ground it is and will provide little benefit to visitors.

How To Fix

  • Only include genuine questions that are frequently asked by customers, clients and visitors. You’ll need to determine what how frequent “frequently” is.
  • Do not add questions just in case it gets asked
  • If you don’t have any frequently asked questions, then don’t have an FAQ page. Do not second guess.

5. Sliders

Screenshot of the Avada home page
This top-selling theme dedicates half its home page to getting 1% clickthroughs

We know why we use sliders: it’s to expose as much content as possible on the page although it can also be a convenient pacifier for those demanding that their content be on the home page.

The problem is that sliders don’t work.

All that real estate, all that effort, just for a 1% click-through rate. Surely you can make better use of your time and that space?

How To Fix

  • Don’t use sliders!
  • Consider an alternative mechanism such as a grid (TwentyFourteen provides both options), a simple content list or feature the most important piece of content – easier said than politically done.

6. Out-of-date Content

Screen grab of a "blog" component where the most recent blog is over 5 months old
If you only post 3 times in 9 months, don’t feature the blog on your home page!

UX is not simply about design, content contributes greatly to the user experience and perhaps has an even greater capacity to give a negative impression than the design.

Highly visible content that is clearly out of date can make a site appear stale or, even worse, inactive. The obvious example is the list of latest blog posts where the most recent blog post is months old but also having items such as Christmas opening hours still on a site in January can help give a poor impression.

Chief culprits for out-of-date content include recent news, recent blog posts, recent events, even copyright statements that don’t have current year. And don’t forget any social media widgets that you may have on your site such those that list the latest tweets.

How To Fix

  • Don’t prominently list any content that is not regularly updated (blogs, events, tweets, etc.)
  • Remove or hide time sensitive content as soon as possible
  • Set-up a regular schedule for reviewing content
  • Create and adhere to a regular publishing schedule

7. Pop-ups

Screenshot of svbscription.com's pop-up containing a form that must be completed before a user can continue
This is so wrong it must be deliberate

Pop-up messages that appear on entry to a site and require an action by the visitor before they can continue create bad first impression.

Although that action is often just clicking on the close icon or outside the pop-up, your site has interrupted the visitor, distracting them temporarily from trying to complete their task and already putting your site at a disadvantage.

For an extreme example of a pop-up interruption head to Svbscription where you cannot view the site at all until you’ve completed the form presented in the pop-up. This seems such a high hurdle for entry to a site that it must be intentional; perhaps the site’s philosophy is that in making it difficult to access, only the really keen will do so and being able to test that and gather personal details at the same time is worth the approach.

Not a recommended approach for most sites though, including this one.

How To Fix

  • Give visitors time to determine if the site is relevant to them before displaying a pop-up. If they are still on your site after a couple of minutes then you can probably assume that they have some interest and will therefore be more receptive to a pop-up.
  • Don’t force visitors to take a particular action, especially one that means providing personal details. It may work in extreme cases such as svbscription.com but for most sites the trade-off of losing most visitors immediately will not justify the approach.

UX Blunders Driven By Theme Market

No WordPress site owner deliberately makes their site difficult for owners to use (Joji’s list gives this site plenty of food for thought). And no theme developer intentionally builds a theme that hampers user experience. But one of WordPress’ biggest advantages is also its achilles heel and its biggest trap.

The numerous theme markets mean that we can add stunning visual designs to our WordPress sites quickly and cheaply. The problem is that theme markets, like any market, are often a game of replication: a theme sells well (or in the case of the WordPress Theme repository) has a high number of downloads) and so theme developers create imitations, literally variations on a theme.

The result is that if the top seller on Theme Forest, for example, happens to feature a full-width slider, then full-width sliders get built into all new themes and pretty soon the top ten themes all have full-width sliders which gradually permeates through all the markets, including the free repositories.

This is the essence of fashion, or trends. And like any other product, as website owners we see a trend and naturally think that we need to keep up – that’s just human nature. We confuse popular with effective.

The consequence, though, is the rapid distribution of features, techniques and approaches that actually hold back our sites, that make it difficult for our visitors to work out what our sites do and if they can help them.

The trick is to stay objective when reviewing a potential new theme for your website. Or to provide feedback to the theme developer for a theme you’ve already bought.

Whilst it’s easy to be swayed by the look and feel of the design – and we get all swayed because we all want our sites to look stunning – we all need to keep an user experience checklist in our heads, so that we can avoid the UX blunders.

Did you review your site – how did it fair? Do you think about UX when selecting a theme? If you are a theme developer, what drives your design?