Design & UX

3 Old and Outdated UX Patterns (And How to Fix Them)

By Annarita Tranfici
Old man and Pacman machines

Photo: R Schofield

In one of my recent articles, The Evolution of the Hamburger icon we talked about the history of this commonly-used pattern, and about who’s using it and why.

In fact, there have been many recent discussions in UX circles that have raised the counter-intuitive nature of the hamburger icon and issues in several cases.

In this article, I thought we’d focus on three other very common 2014 UX patterns. Each one is so prevalent and humdrum that we may not even think twice when we employ them.

But perhaps we should.

If you’ve followed my articles, you’ll know that the effectiveness of a UX pattern depends on a great number of factors, and there is no scientific formula that will tell you that choice ‘x’ is totally right or wrong. You are the only one who that can really judge if it fits your needs of audience, and you’ll make the final call.

Nevertheless, if they aren’t questioned, even widely-discredited UX patterns often persist long after they should have become no more than historical footnotes.

The UX patterns that we’ll examine are:

  • Large Background Images

  • Text as Images

  • Mega Menus

In addition, I’ll give you some alternatives to these three (I believe) outdated design patterns in order to help you move on.

1. Large Background Images

In recent years, panoramic background images have become such a hot web design trend that they approach the realm of cliche. You don’t have to wander far to find dozens of creative examples which illustrate the technique beautifully. The Web is still full of captivating landing pages, big portfolios, and in some cases even traditional corporate websites use specialized full-screen background photos to dazzle users.

Interactive Guide to the Effects of Drugs on Driving

Although some images make a very impressive visual impact on a website, you’ll often need to consider alternatives to this practice, particularly for sites with an important mobile audience.

Even if the old saying “A picture is worth a thousand words” is true, and information conveyed through imagery is remembered much more readily than the written data, developers should pay attention to how and when apply this principle to web design.

A crucial factor that you cannot underestimate is that these gigantic, retina-ready backgrounds usually equate to gigantic, bandwidth-slaughtering file sizes. This, in turn, leads to huge impacts on load times, which feeds directly into user experience.

As these background images are very often about setting a visual tone or emotional mood, rather than communicating required information, they add a large amount of weight to a page for very little measurable user benefit.

Users 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. They essentially choke down thousands of pixels that they then throw away!

What’s the Alternative?

There are two alternatives that you could consider to use:

  • Context-aware image sizing, whose goal is to “deliver optimized, contextual image sizes for responsive layouts that utilize dramatically different image sizes at different resolutions”
  • Interchange that 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.

To sum up

Large images have the potential to lose you customers/readers who would otherwise visit your site. Put yourself in your users’ low-res, slower shoes and imagine their experience with your website (especially viewing it on a mobile device).

Test your page load time and, finally, conclude adopting what is best for your audience.

Text as Images

I suspect many might be reading this thinking “Honestly, does anyone really still do that?”. You might be surprised.

Text in Images at

Text in Images is still a thing at Apple has used the technique across the entire site for many years. You’ll still find image text used extensively thoughout their Mac Mini, MacBook Air and MacBook Pro pages. In fact, you’ll even find plenty of examples on their brand new iPhone 6 product pages.

Who said IR is dead?

Of course, there are many good reasons to avoid embedding text into images.

Image-based text can perform badly for users that resize their screens/images — a far more common behavior with today’s multi-sized devices than we might have expected 5 years ago.

Secondly, we know that text embedded in an image makes that text itself inaccessible by default to screen readers. There are workaround, but we’re adding brittle complexity to something that has worked flawlessly since the early 1990s.

Thirdly, images can often look terrible on retina unless you individually optimize each one. There’s much less inherent flexibility for updates and text edits, with even the smallest edit requiring the generation of brand new assets.

Last but not least, it’s hard for search engines to index and understand the content on the page when it’s all trapped in images. As smart as Google are, the crazy results you often get from image search confirms how much harder it is for computers to interpret imagery.

So, if you really need to employ an image with a text in your project, remember to always add a descriptive alt attribute to your images, unless they are used for purely decorative purposes. In addition, when using an image as a link, enter a description of where that link goes.

What’s the Alternative?

Image-based text is most often used when designers want more control over the way typography renders.

Instead of adopting the text-as-an-image method, you should think about the possibility to use web fonts. These are font files that we can apply to any text in the site, including text generated by a content management system (like WordPress).

Text is accessible for various devices and can be read and indexed by search engines. The Web is full of some really great free fonts suitable for your purposes. There are many different varieties of web fonts that you could take into account. The most well-known are:

It would be fascinating to know why Apple are unconvinced by this approach

Mega Menus

Several years ago, Craig Buckler wrote an article about the phenomenom of the mega drop-down menu, a trend which has become popular in web design.

Mega menus are often used on large-scale sites that have many potential destination pages for users to navigate to.

Mega menus at

Rather than just using a one-directional dropdown, the mega menu opens up an expanded area that offers more options. While mega menus can make it easier for users to get deeper into the site with fewer clicks, this barrage of options can also potentially overwhelm some visitors.

What’s the Alternative?

Mega menus have a great potential and, rather than replacing them with other kind of menus, it could be worth spending time in improving their structure.

Some good practices you could employ to achieve this task are:

  • Use indicators to show interactivity (plus, minus, down arrows).
  • Use instantaneous transitions.
  • Manage widths and alignments in the best way possible(for example add extra padding to allow users to not make mistakes).
  • Don’t use unusual transitions or unexpected effects that could annoy users.
  • Don’t overcrowd the menus and overwhelm the user with choices.

To sum up

First of all, it’s critiically important to test the navigational usability of your menus on touch-screen devices. A mega menu with well-designed interactions, well-structured information architecture, consistency, and a great user interface can benefit both the company and the user in so many ways.

However, you have to be sure that it doesn’t cause them additional frustration (for instance, accidental hover interactions) or hinder them by slowing their naviagation.


In this article you’ve discovered some alternatives to few commonly employed design patterns. Users care about how these elements impact and it should be your goal to make their interactions easy and pleasant with any reasonalbe device at any connection speed.

Focus on how to achieve the best experience possible and experiment until you find your proper solution.

  • Niel

    Hmmm good topic, but may be a little to late?

  • SRIshanu

    Talk about ‘accidental hover interactions’, LinkedIn has the most annoying hover drop down menu’s in the world. The top right drop downs I’m talking about!

  • Michal Acler

    Hello Annarita,
    thanks for the article. But it is more about usability, not UX problems. And frankly I don’t think image backgrounds or mega menus are an issue if you do it right (there’s a lot of studies for that, for example

  • lozandier

    I think Annarita mistakenly mentioned Interchange instead of RESS. Interchange does not care what browser you use and has no capabilities of knowing such a thing towards dynamically loading different content.

    Interchange conditionally replaces content based on MQs.

  • Frederik Krautwald

    To Apple, branding and visual cohesiveness across every platform and device is very important, hence image-based typography. Using browser-rendered text means losing control on how the text will be displayed.

  • Oluwafemi William Babalola

    i think you should change the title “Text as Images” to “images as text”.
    Am i correct.

    • Kelderic

      No, the text is being displaying using an image, a tag.

      • Oluwafemi William Babalola


  • Kelderic

    One thing we need to remember is that there are two viewpoints to approach things from. We can optimize things for a user perspective or for a developer perspective, and sometimes these two paths lead to different results.

    Text via is terrible from a developer perspective. From a user perspective though, it has both disadvantages (slow loading) AND advantages. Assuming that the developer takes the time to provide hi-res versions of everything, then the end user will see sharp looking text, consistent on all browsers. Consistent exactly, which rendered text can’t match. I myself am a lazy developer, so I use actual text, but I see why Apple would do it that way.

  • Matthew Vaughan

    These are good tips, but the title isn’t really helpful and has little to do with the article. Embedding text in images isn’t a UI design pattern, it’s an implementation technique. The other two are UI design patterns, but the suggested solutions aren’t alternatives or ways to avoid them as the title suggests, but rather technical ways to implement it better in one case and an extortion to design better examples of the pattern in the other.

    Thus while the article itself is sound and useful, I deem the title clickbait and false advertising. If these patterns are indeed outdated, then they should be avoided entirely, not just implemented better.



Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Design, once a week, for free.