While Anti Patterns, Dark Patterns, and bad Signal to Noise Ratios abound in user experience design, they are mostly recognized as bad user experience and are easy to call out and try to not use. There are other UX bad practices, however, that are harder to spot.
One of the core tenants of good User Experience design is research and refinement of techniques. Most of the ones that are harder to spot are techniques that are used widely throughout the Internet and subsequently widely duplicated without much thought. By researching these techniques, we can find that many of them, despite their proliferation, do not hold up to the User Experience expectations we have.
Page preloaders are all about performance. When building user experiences, there are two kinds of performance, payload performance and perceived performance. Page preloaders, while many times thought of as a design win by holding off rendering a page until content is loaded, actually wind up breaking both of these user experience expectations
Let's discuss a typical page preloader. Typically, page preloaders are added to pages where the developers know the site is going to be slow to load all of its content and display said content. It's a way get across to the user that something is happening, so don't leave, we'll be back in a moment.
The problem with this? As Compuware reports, 60% of users will leave a site and won't come back if it takes more than 3 seconds for the site to load. Or, to discuss numbers, a 400ms delay in the amount of time it takes Google to load its search results reduces the average number of daily searches by 0.59%. While that doesn't sound like a lot, it amounts to a daily loss of $111,000 or about $40.5 Million a year! That's some serious money. Bottom line?
Performance Affects Conversion
It's not enough for a site to be pretty. Performance needs to be designed into a site, not tacked on at the end or covered with a cloth. Page preloaders hide performance problems, but those performance problems don't go away.
It's not all bad though! Chances are some of your content is ready to go well before the amount of time has elapsed where you would feel like a preloader is necessary. Show it and continue loading more in the background! Get your users to your content as fast as possible. This will speed up your perceived page performance. Designing for performance will speed up your actual performance. It's a win for your users and it's a win for your bottom line.
Recently, I needed to buy a piece of table for my apartment. I knew how large of a table I could fit, and that's about it. Ya know what's fun? Going on a furniture website and being shown a metric tonne of different categories none of which actually tell me anything about what I'm searching for! It turns out, many people don't use furniture in the rooms they get categorized under!
What about recipe websites? I've got salmon and I've got sprouts. I want to know what I can make with that. I have no idea where to start looking when my choices are "Top-Rated Recipes", "Latest Recipes", "Holiday Recipes", "Healthy Recipes", or any number of groupings of recipes that don't include what actual ingredients I have!
Your Org Structure Is Not Your Information Architecture
You are building a website for your users, not for your org structure (or your inventory structure, or your print catalogue structure, or your pricing structure). Having your site map be your navigation actually makes it harder for users to find what they are looking for, it paralyzes them with choice.
The Paradox of Choice is a psychological theory put forth by Barry Schwartz that postulates that:
With so many options to choose from, people find it difficult to choose at all
The Paradox of Choice can be broken down into four items that describe why choice makes people miserable:
- Regret and Anticipated Regret
- With lots of options, it's easy to imagine a better option could have been made, leading people to regret their decision, even if it's a good one
- Opportunity Cost
- With lots of alternatives, it becomes easy to imagine attractive features of rejected features, leaving the user less satisfied with the choice they've made
- Escalation of Expectations
- With lots of options, people believe that one should be perfect, raising their overall expectations
- When people are dissatisfied with the choice they've made, especially with a large number of choices, they feel it's their fault.
So what's the solution? Well it turns out it's Content Strategy. Knowing what you're trying to get out of your website, knowing who is going to use your website and how they want to use your website, what your content actually is, and how it should be displayed on a website, not a page, is immensely important.
Everyone loves a carousel! Well, everyone in the marketing department anyway. Carousels are a great to get all of your marketing material on the page at once! They're a fantastic way to condense information into a single place on your page in order fit more stuff on your page!
Carousels Don't Convert
Not only are carousels terrible for accessibility, they simply don't convert. When actually put through the ringer, Notre Dame found that only 1% of users clicked on a feature in a carousel, and of those, 89% clicked on the first item, 3% or less clicked on any other slide. Simply put, carousels hide content and users more often than not will fail your call to action if presented in a carousel. Even worse, they create banner blindness and are often ignored by users as they've been trained that the content in there isn't worthwhile.
So what to do instead? Create designs that reduce hidden content. If information is important enough to promote, design a site where it's promoted! Blow out that carousel into visible features if it's really important. You could also re-focus your page on the single most important call to action. You can also convert each slide into a targeted marketing page. Basically, make your call to action clear.
LIKE THIS PAGE! TWEET ABOUT ME! +1 +1 +1 +1! We need to be social, we need conversation, conversation drives conversion. The more individual pieces of content we can share, the more traffic we're going to get, the more money we're going to make. Our Social Media Tween sees them everywhere, and despite her not actually using them herself, thinks it'd really help get our message out. Plus, everyone will see how popular we are, and that'll make us more popular!
Content Dives Conversions, Not Buttons
An interesting thing happened to Smashing Magazine when they removed Facebook buttons from their site. Traffic from Facebook increased. Why? Users decided to organically share the content instead which in turn is a much stronger recommendation, resulting in higher traffic.
It's not just article websites either. Taloon.com found having social media buttons hampered their main "buy" Call to Action. They found there were two main reasons for this: first, social buttons distracted users from their main goal of buying stuff. Much like our mega menus, reducing the number of things a user has to choose from increases their ability to choose, and to choose something they like. The second? The "social proof" that the Internet liked their product? Well products with low like counts actually hurt their social proof, and most drill-down items are going to have very low like counts by the simple nature of how many items may exist on your site.
So, instead of plastering your page with NASCAR style logos and reminding users over and over again that Facebook, Twitter, Google, or any number of other for-profit companies that they exist (which sounds an awful lot like free advertising for them), simply drop them. As an added bonus, these buttons are usually super heavy, decrease site performance, and potentially open your site up to security vulnerabilities; removing them solves those issues too!
Overlays (aka modals) are frequently considered user experience wins by allowing users to stay in-place and complete a secondary task, then returning to the page they were on. Fantastic! Instant usability win! Fabulous! Or better yet, throw up an overlay before we give our user our content! They'll totally sign in with Facebook and like our content before they read it!
Overlays Frustrate Users, And Frustrated Users Leave
Overlays are fraught with user experience issues pretty much from the get-go. The primary thing they do, keep a user in place to do secondary or tertiary things tangentially related to the page, is a break of the user expectation of one page for one task. This break of user expectation is especially bad when a user needs the information the overlay is now covering up to complete the task. If this is the case, a user winds up needing to go back and forth and back and forth between the overlay and the page to complete their task.
Overlays also break back button functionality. One thing constantly lost in user experience discussions is that we are not designing for ourselves (or our product owner), we are designing for our users. Turns out, most non-tech-savvy users do a great deal of navigation with their back and forward buttons. Turns out modals break this most basic promise of the web, and it'll frustrate users. Requiring a user to close an overlay through a (usually small) close button, or the escape key, or clicking outside the overlay, or any combination of causes a great deal of confusion that hampers users from completing tasks.
There's the ever important problem that overlays simply do not work on small screens. Or touch. or really anything without a keyboard and fine pointer. Ya know, the direction Internet connected devices are heading. It's a wonder they've stuck around for so long.
So what to do instead? Tray metaphores to the rescue! Unlike overlays, trays that slide in and out of place don't break the user expectation of a new page being navigatable via the back/forward buttons. On screens that have enough size, a side slide-out tray allows a user to keep the context of where they are on the page, still see the page they were working on, and be able to continue working. They still suffer from a close issue, but one of the close variables is removed, so it's back to buttons to close. Alternatively, and more preferred, would be an in-line tray that opens under (or as near as possible) to the trigger, allowing the user to stay absolutely in context of where they were and be able to continue their work. There's also the option of *gasp* building separate pages for separate tasks to keep cognitive load low for users.
The long and short of this? Be good to your users. Test your assumptions. UX intuition is only as good as your last user experience test. Your pageviews don't pay your bills, your users do. Build for them. Be good to them. And in return, they'll be good to you.