Modern Trends in UX that Ruin Usability
User experience, or UX for short, is a broad concept including user behaviors, attitudes, and emotions about an interactive thing (in the case of this article, about a website). It's a term you hear more and more lately as awareness of the concept and professionality of web development continue to grow; your firm may even have a dedicated user experience department. It's an extremely important and ever-changing topic that can really help to make the web browsing experience significantly more comfortable and effective.
While the concept of UX is very important and helpful, sometimes it can be overdone or just plain wrongly done. Here we'll take a look at a number of popular interaction designs and widely-held beliefs which are just plain bad UX. If your website implements some of these 'features', don't feel bad; many of these popular but bad UX ideas seem like good ideas at first. Some even can be good ideas when used in the right context and the right amount. Many are ideas that you implement because everyone else is doing it, so it must be good right? We all implement some bad designs now and again, but hopefully when you take a deeper look you see things in a new light.
Paginated articles are annoying; pure and simple. You see this most cases in countdowns. They love to put the final item in a countdown list on a new page, possibly to build suspense. But you also see this on a lot of legitimate news sites too. For example, itnews.com paginates their articles:
What they likely end up seeing in their analytics is that the number of visitors to the first page is significantly higher than on each subsequent page, meaning that their users don't finish reading the articles. Additionally, there is quite often confusion, wondering why the article suddenly ended without a conclusion until the user finally stumbles upon the pagination and figures out what it's for (especially when there's an ad between the article and the pagination). Then the user has to load an entire new page which can be quite an annoyance on a poor connection (quite common in mobile devices for example).
While it's understandable that companies want more ad impressions, this may not be the best way to do that. The goal should be to increase page views by keeping the user's attention captivated with good content and a comfortable user experience.
Dailymotion.com has an infinite scroll on their home page, and for a little while it was practically impossible to get to their FAQ page by using the link in the footer. Now they have a nicer solution: a sticky footer which appears once the infinite scroll begins. That's a pretty good idea, and it takes care of that issue. But now what if I wanted to send my buddy a link to page three? Dailymotion doesn't even have a normal pagination on their home page as a fallback. "Hey man, there's a whole bunch of really cool videos if you go to this link and then scroll down to the bottom three times!"
Now consider the possibility that you're browsing on a tablet or a laptop with a really crappy internet connection. You scroll down because you want to see the entire first page of results, and now suddenly it automatically made a new request and you're stuck waiting for it to finish.
Infinite scrolls are a prime example of those cool UX features which you implement because everyone else is doing it, but is it really any more effective than a normal pagination? By the way, if you're interested in monetizing, you don't get any new page impressions with infinite lists (it is possible to have time-based ad impressions, but you need to have an ad deal which supports that).
Designing for Ads, Not Users
Nearly all of us who have worked in the web industry have encountered managers and sales guys who want us to try to trick the user into clicking ads and signing up for things they don't want. That's okay though; it's their job. But as a frontend developer or a UX designer, it's your job to fight for the user. It should be a constant tug-of-war between sales and UX, each fighting for their side. Unfortunately many UX designers seem to have forgotten what the U stands for in UX.
Is It An Ad or Content?
You see these all the time, especially with download buttons: ads which are difficult to differentiate from real content. You also see sites often design their content so that it looks the same as (or extremely similar to) Google AdSense ads. Not only is this super annoying for users (leading them to block ads completely or just stop visiting your site), but it's also against AdSense's policy:
From AdSense program policies: All publishers are required to adhere to the following policies, so please read them carefully. If you fail to comply with these policies without permission from Google, we reserve the right to disable ad serving to your site and/or disable your AdSense account at any time. ... In order to ensure a good experience for users and advertisers, publishers participating in the AdSense program may not: ... * Format ads so that they become indistinguishable from other content on that page. * Format site content so that it is difficult to distinguish it from ads. ...
Tricking users is pretty profitable, but having your account banned sure isn't.
Ads Surrounding the Content
We've all seen them: huge ads which span all the way across the top of the page and all the way down both sides completely surrounding the content.
In the end, allowing these enormous ads just drives more and more users to use AdBlock and block ads completely which hurts not only you, but every other website (which may have been modest with their ads). But unfortunately, too many people in management are poor chess players (they think just one move ahead); they don't consider the long-term effects, just the fact that they'll make a quick penny today.
I like to think of the space on web pages as real estate. That space is a valuable commodity and you should strive to make good use of it. Unfortunately very many sites have a poor utilization of space. News sites in particular are guilty of this. Check out some of the popular news sources such as CNN or BBC. When you're on a smaller screen (a 1280 by 800 pixel display for example) it's not so bad. There's just a little whitespace on the sides. But these sites have a fixed width, so when you have a big HD monitor (e.g. 1920 by 1080 pixels) there's a lot of empty space there.
I'm a big proponent of responsive design and fluid layouts. We shouldn't try to force our content to look exactly the same in each browser. When one user has a nice HD monitor he should be able to utilize all that space, and when a user comes with a small tablet he shouldn't have to scroll left and right to read an article.
Only Mobile Layouts Need to Care About Tap Target Sizes
This point isn't so much a 'trend', but more of a common tendency. If you've ever used Google's page speed tester (a really nice tool, check it out here if you haven't already), for mobile they point out that you should "size tap targets appropriately". What does that mean?
From Google's PageSpeed Insights Documentation: This rule triggers when PageSpeed Insights detects that certain tap targets (e.g. buttons, links, or form fields) may be too small or too close together for a user to easily tap on a touchscreen.
Most designers (and even Google PageSpeed Insights) only consider the size of tap targets for mobile devices, yet when you visit electronics stores nowadays you'll find many large-screened laptops (and even some desktop PCs) with touchscreens. They're becoming more and more common. Tap target sizes should be considered for all device types.
Overuse of Lazy Loading
Lazy loading is a design pattern used to defer initialization of an object until the point at which it is needed. In the context of this article, it's a technique for loading content for the page once the user gets to the point that they need it. Lazy loading can be a great performance booster when used for things like images. Lazy loading your CSS, on the other hand, may not be so good.
As stated, the concept of lazy loading is used for loading content only once it is needed. The CSS necessary for displaying the content at the top of the page is necessary as soon as the page is loaded. As a very minimum, CSS for elements which appear above the fold (i.e. stuff that fits in the browser window without scrolling) should be included.
Implementing any of these annoying 'features' in your site doesn't necessarily mean your site is bad and it doesn't speak for the quality of your content. In fact, all of the sites used here as examples for these bad UX features are good sites overall. But it should be our goal to make our user experience the best that it can be and to emphasise quality content, not distract from it (and if you have poor quality content, focus on improving it rather than distracting from it).