Sideproject

Building things on the web

Outdated UX patterns and alternatives

Meet North, design and development standards to align and guide your project. It's a comprehensive guide contributed to the open source community to encourage, "a mobile-first, in-browser, system based approach to design and development."

Check out North on GitHub:

The section of the guide that I found most interesting is, Outdated UX Patterns, a collection of examples of what not to do when building a website, which tries to steer designers from borrowing from ineffective practices to solve common problems.

Just like how presentations deprecate, so do UX patterns. There are a plethora of outdated UX patterns currently being used that do not suit users or business well and their usage should be ceased. The following list is by no means comprehensive, but should be used as a guide (along with in-person testing and analytics) to determine if patterns being used should be updated. — Sam Richard

It may be ambitious to call some of these patterns "outdated" since many of them are still prevalent across the web. It's also worth saying that there are no simple answers as far which alternatives to explore. But lets walk through some examples of potentially ineffective UX patterns and explore some other options:

Carousels

1% clicked a feature. Of those, 89% were the first position. 1% of clicks for the most significant object on the home page? These are everywhere on the web, but largely inefficient when it comes to getting users to engage with content past the first slide.

Carousels exist to keep people from beating the shit out of each other in meetings. — Brad Frost

Alternative:

  • Prioritize content, rather than 4-5 content pieces that get buried in the same region, choose the most important message and display that. Failing to prioritize content is failing to have a content strategy, which means you're basically throwing your content up against the wall to see what sticks.

Large Background Images

From North: Large background images add a large amount of weight to a page for very little actual gain. Any user whose screen is generally smaller than 1024px will absolutely not see the background image. Small screens simply don't have the screen real estate to display content and background images.

Alternatives:

  • Context-aware image sizing to "deliver optimized, contextual image sizes for responsive layouts that utilize dramatically different image sizes at different resolutions"
  • Interchange is an example of this, it allows you to dynamically load content on a responsive site based on user's browsers, so you can target small, medium and large images for the right use-cases.

Counterargument:

Treehouse published an article on Creating Responsive Websites with Photo Backgrounds, looking at a few different responsive techniques including how to adapt large background images to an interface:

The trend of large photographic backgrounds has become very popular in recent years. The improvement of Internet connections has allowed more data transfer per second, which means images can load a lot quicker in real-time. There are also plenty of open source scripts out there for generating cross-browser support using fixed photo backgrounds.

The performance hit can be minimized a bit by optimizing images for the web and lossless images using services like Yahoo! Smushit.

In the end, the decision again comes down to what you're providing by serving up the image, does the use of a large image communicate a message worthy of the longer load time? If its a must-have, that's a concession you may be willing to make. Otherwise, its not worth it.

Mega Menus

From North: Mega menus became popular for providing infinitely nested menus or, in the worst cases, micro sites for each menu. These create complexity issues for uses are particularly hard to navigate without fine pointers.

It's important not to make people scavenger hunt for what they are looking for.

Users have words and phrases in their mind that will cause them to click on a link. We call these trigger words. They are essential to good navigation..... When the mega menu is hidden, all of the trigger words on the menu are also hidden. Users can't predict the future, so they don't know they need to reveal the menu to get what they need. — Jaried Spool, 6 Epic Forces Battling Your Mega Menus

Alternatives:

  • Simplify the menu structure, especially when it comes to heavily nested mega menus that go three or even four levels deep.
  • Guide users with more clicks for a more natural flow. With a confusing or complex menu, people often resort to searching or just give up. Instead, steer people in the right direction based on their needs.

Text In/As Images

From North: Text that is part of an image makes that text inaccessible to screen readers without the proper alt attributes and becomes hard to read (in most cases, impossible) if that image is resized, which happens often in responsive web design.

Alternatives:

Overlays

From North: Overlays are a UX pattern popular for everything from insertional to modal content or interaction. Overlays, while seemingly a boon for user experience, wind up creating countless issues for users without keyboards, fine pointers, who resize their browser, or generally would like to exit one without going forward through the user interface.

Alternatives:

  • Use insertionals/inline widgets within the flow of the interface
  • Put the overlay content on a new page
  • Here's a fullscreen overlay effect done with CSS and SVG from Codrops.

Page Preloaders

From North: Users want to get to a site's content as quickly as possible. If instead of providing it a preloader is put up that is designed to halt a user from getting content until every piece that makes up that content is available, a user is likely to leave and not come back.

Alternative:

  • Allow content to load naturally or lazy load content.

Social Integration

From North: While social integration is often seen as a great boon, more often than not the plethora of third party logos scattered throughout a page make a site look more like NASCAR than a finely crafted brand. While the effect of this hasn't been thoroughly researched yet, there is one truth; social integration provides free advertising for those social networks and ties the site's branding to those social networks, for better or worse.

Alternative:

  • Allow users to share content organically. Sharing widgets may plant the seed to share content with others, but if a user is compelled to share something they are interacting with, its a pretty safe assumption that they know how to post it to their social channels. Note: I obviously have a share button on this site, my advice would be not to gratuitously slap share widgets everywhere without considering your audience's intentions.

Content Insertionals

From North: Seen often in article views, content insertionals are usually links to other tangentially related content in-between paragraphs as a stand-alone paragraph or as non-hyperlink "links" in an article that produce a hover or click modal of other, likewise tangentially related content. These items take the user's attention and prevent them from being immersed in the content.

Alternative:

  • Don't break up primary content with secondary/related content, showing that content is more effective when a user is done reading an article than while they are in the middle of reading something.

Auto Play Media

Image via The Verge, "Facebook's auto-playing video ads are coming this week"

Auto playing media, whether its sound or video can cause all kinds of problems for people on your site. It's important to always make playing media a choice for your users. Otherwise you may be serving up video to speakers that are on too loud or triggering media during a meeting or quiet place like a library. Have you ever been on a website and thought, "Man, I wish I didn't have to press this play button"? Neither have people using websites you are designing.

Infinite Pagination

From North: Infinite pagination that truly is infinite should be reconsidered for a more measured approach where two to four pages are automatically loaded with additional loads being triggered by user interaction.

Alternatives:

  • The above approach is less frustrating for users, automatically loading some content rather than a non-stop barrage of content, like you might find on a site like Inc.

Unexplained Merged Functionality

From North: Merged functionality, like Amazon's Buy now with 1-Click, can be a big win for user experience, but any merged functionality must be explained. Registering for a website does not necessarily mean a user would like to sign up for that website's newsletter, so they shouldn't be. Logging in with Facebook to comment doesn't necessarily mean a user would like all of their browsing activity pushed to Facebook.

Alternatives:

  • Make sure any time a new feature is being worked in, to give the full context and description of what is happening before putting that functionality in place. Never automatically sign someone up for a newsletter or do anything that you haven't gotten explicit permission for.

Updated UX Patterns

Don't be afraid of patterns but be willing to challenge existing ideas especially in the time of transition we're in now. The playing field is leveled, we have a chance to uncover the next great set of design patterns. — Michael Boeke, Braintree

The point of looking at something like this isn't to abolish things like large background images or infinite scrolling completely, but to raise questions before re-using common interface elements out of habit. Watch where you borrow inspiration from, if you're looking for it from other websites, your project is going to look like other projects and fall into the same traps. Be thoughtful in your UI decisions and center your choices around two questions, a) what you are trying to communicate? and b) are your users best interests in mind?

Get periodic updates from Sideproject.io and news on my upcoming book on modern web design, Design and Conquer. Plus, an early access discount when it launches. No spam ever, I promise.

* indicates required