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

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:

Why do designers make pages this way? It could be due to a lack of understanding that websites and magazines are not the same thing (you do see this quite a bit, especially in firms which were originally just print), but the most likely reason is to try to force users to make another page impression to increase ad revenue. A perfectly logical approach of course, but it's poor user experience.
halls-of-valhalla.org/images/articles/ux-9-2014/ux-itnews.png

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.

Infinite Scroll

"Infinite Scroll" refers to the JavaScript feature which automatically loads more content in listings when you scroll to the bottom of the page. These are pretty cool, I'll admit. And they're great for when you're feeling lazy and just want to keep scrolling without clicking on anything. But what happens when you actually want to see something which is at the bottom of the page (like the footer for instance)? Now you get to play that game of scroll-and-click-super-fast, or you end up just disabling JavaScript.

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).

Slideshows

Slideshows can be pretty aggravating to use when you're looking for something specific. I'm not just talking about those 'cool' JavaScript slideshows you see in 'hero units' or sidebar widgets, but slideshows used as content. You see these quite often in countdowns and image galleries.

halls-of-valhalla.org/images/articles/ux-9-2014/ux-skymovies.png
Why am I complaining about them? Quite often you come to the page looking for something specific; maybe you saw a cool image in a Facebook post and clicked it. Now you're on the page and you start clicking through the slideshow to find out about that cool image, and you click and click and click. You have no idea how many pages there are and where your target image is in the pile. Eventually you just give up and close the page.

Not only is it annoying when you're looking for a specific thing, but you additionally often have the issue that the slideshows don't work at all without Flash or JavaScript. When they do work without, you have to load about 30 new pages in order to see all the content, and that's also annoying.

TV Guide's approach is slightly better (shown in the thubmnail). Indicated with the red arrow, you can see that they include thumbnails for each item in their list. That's pretty nice. It's not perfect though since it still doesn't show titles or any other information about the item, but it's much nicer if you were looking for specific things.
halls-of-valhalla.org/images/articles/ux-9-2014/ux-tvguide.png

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.

halls-of-valhalla.org/images/articles/ux-9-2014/ux-ign-ad.jpg
These are pretty obnoxious when you have a browser window open along with some other program such as a text editor (maybe you're doing research). You're working in your text editor and then you click back to the browser window to scroll down and naturally, you click on some of the empty space on the side of the page, but wait! Damn, that empty space was part of the giant ad which spans all the way down to the bottom of the page. After a while you get so used to these that I bet if you had a heatmap script running you'd find a lot of clicks on random whitespace in the middle of your pages.

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.

Javascriptify Everything

JavaScript can be really cool actually. There are a lot of nice JS features which have a hugely positive impact on user experience. But unfortunately, lately there are a lot of websites which require JavaScript for the basic functionality of their site, but this is poor practice. Think back to the example of the infinite scroll; many sites lack a normal link-based pagination now and rely entirely on their JavaScript-based pagination. This can have not only a negative impact on a user's experience, but also on SEO since crawlers are not guaranteed to correctly interpret JavaScript (or to even attempt it at all).

There are many reasons why a user might not have JavaScript enabled, and many reasons why scripts may fail to load on a page. Users often disable scripts for performance or security reasons, and also for usability reasons (think back to when I mentioned wanting to click a link in the footer of a page with infinite scroll). Pages can fail to execute scripts too if there is a JavaScript error somewhere during the execution (which can often happen when you have external scripts running for ads). A CDN could be down, or scripts could just be slow to load for a user. I won't go into too much detail on this topic since it's pretty well-covered in this article: JavaScript Disabled: Should I Care?.
halls-of-valhalla.org/images/articles/ux-9-2014/ux-js-meme.jpg

Narrow Content

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.

halls-of-valhalla.org/images/articles/ux-9-2014/ux-heise.png
As an example, I'll pick on heise.de, a popular German news site. The page has a 576px width with 18px of padding on each side which leaves 540px for content. Then next to that they have a 384px sidebar. When you visit the page with a monitor with 1920x1080px resolution that means there is 960px of empty space (exactly 50% of your screen!). That's a lot of wasted space.

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.

Remember that page from TVGuide we looked at earlier? When you try viewing it with JavaScript disabled you get a plain white page with a list of links. It's a completely unstyled page due to the fact that they don't include any CSS in the basic response, and it gets loaded with JavaScript later. Looks pretty ugly for anyone who had JS disabled, or if for some reason there's a script error.
halls-of-valhalla.org/images/articles/ux-9-2014/ux-tvguide-nojs.png

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).

Screenshots From: