Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Design Patterns: When Breaking The Rules Is OK

We’d like to believe that we use established design patterns for common elements on the Web. We know what buttons should look like, how they should behave and how to design the Web forms that rely on those buttons.

And yet, broken forms, buttons that look nothing like buttons, confusing navigation elements and more are rampant on the Web. It’s a boulevard of broken patterns out there.

Further Reading on SmashingMag:

This got me thinking about the history and purpose of design patterns and when they should and should not be used. Most interestingly, I started wondering when breaking a pattern in favor of something different or better might actually be OK. We all recognize and are quick to call out when patterns are misused. But are there circumstances in which breaking the rules is OK? To answer this question properly, let’s go back to the beginning.

The History of Design Patterns Link

In 1977, the architect Christopher Alexander cowrote a book named A Pattern Language: Towns, Buildings, Construction5, introducing the concept of pattern language as “a structured method of describing good design practices within a field of expertise.” The goal of the book was to give ordinary people — not just architects and governments — a blueprint for improving their own towns and communities. In Alexander’s own words:

At the core… is the idea that people should design for themselves their own houses, streets and communities. This idea… comes simply from the observation that most of the wonderful places of the world were not made by architects but by the people.

Street cafe6
Street cafe in San Diego (Image credit: shanputnam7)

A pattern — whether in architecture, Web design or another field — always has two components: first, it describes a common problem; secondly, it offers a standard solution to that problem. For example, pattern 88 in A Pattern Language deals with the problem of identity and how public places can be introduced to encourage mixing in public. One of the proposed solutions is street cafes:

The street cafe provides a unique setting, special to cities: a place where people can sit lazily, legitimately, be on view, and watch the world go by. Therefore: encourage local cafes to spring up in each neighborhood. Make them intimate places, with several rooms, open to a busy path, where people can sit with coffee or a drink and watch the world go by. Build the front of the cafe so that a set of tables stretch out of the cafe, right into the street. The most humane cities are always full of street cafes.

For those interested in going further down the pattern 88 rabbit hole, there is even a Flickr group8 dedicated to examples of this pattern.

The jump from architecture to the Web was quite natural because the situation is similar: we have many common interaction problems that deserve standard solutions. One such example is Yahoo’s “Navigation Tabs9” pattern. The problem:

The user needs to navigate through a site to locate content and features and have clear indication of their current location in the site.

And the solution:

Presenting a persistent single-line row of tabs in a horizontal bar below the site branding and header is a way to provide a high level navigation for the website when the number of categories is not likely to change often. The element should span across the entire width of the page using limited as well as short and predictable titles with the current selected tab clearly highlighted to maintain the metaphor of file folders.

This is all very nice, but we need to dig deeper to understand the benefits of using such a pattern in digital product design.

The Benefits Of Design Patterns Link

Patterns are particularly useful in design for two main reasons:

  • Patterns save time because we don’t have to solve a problem that’s already been solved. If done right, we can apply the principles behind each pattern to solve other common design problems.
  • Patterns make the Web easier to use because, as adoption increases among designers, users get used to how things work, which in turn reduces their cognitive load when encountering common design elements. To put it in academic terms, when patterns reach high adoption rates, they become mental models — sets of beliefs in the user’s mind about how a system should work.

Perhaps the strongest case for using existing design patterns instead of making up new ones comes (once again) from architecture. In the article “The Value of Unoriginality,” Dmitri Fadeyev quotes Owen Jones, an architect and influential design theorist of the 19th century, from his book The Grammar of Ornament:

To attempt to build up theories of art, or to form a style, independently of the past, would be an act of supreme folly. It would be at once to reject the experiences and accumulated knowledge of thousands of years. On the contrary, we should regard as our inheritance all the successful labours of the past, not blindly following them, but employing them simply as guides to find the true path.

That last sentence is key. Patterns aren’t excuses to blindly copy what others have done, but they do provide blueprints for design that can be extremely useful to designers and users. And so we do need to stand on the shoulders of designers who have come before us — for the good of the Web and users’ sanity. Many have tried to document the most common Web design patterns, with varying levels of success. In addition to the Yahoo Design Pattern Library10, there’s Peter Morville’s Design Patterns11, Welie.com12 and, my personal favorite, UI-Patterns.com13.

When Patterns Attack Link

Here’s the “but” to everything we’ve discussed up to now. There is a dark side to patterns that we don’t talk about enough. One doesn’t simply copy a pattern library from a bunch of random places, put it on an internal wiki and then wait for the magic to happen. Integrating and maintaining an internal design pattern library is hard work, and if we don’t take this work seriously, bad things will happen. Stephen Turbek sums up the main issues with pattern libraries in his article “Are Design Patterns an Anti-Pattern?14”:

  • Design patterns are not effective training tools.
  • Design patterns don’t replace UX expertise.
  • Completeness and learn-ability are in conflict.
  • Design patterns take a lot of investment.
  • Design patterns should help non–UX people first.

This article isn’t meant to discuss these issues in detail, so I highly recommend reading Turbek’s post.

For the purpose of this article, let’s assume we’ve done everything right. We have a published and well-known pattern library that enjoys wide adoption within our organization. We treat the libraries as guidelines and blueprints, not laws to be followed without thinking about the problem at hand. The question I’m particularly interested in is, when is it OK to break a widely adopted design pattern and guide users to adopt a new way of solving a problem?

When We Attack Patterns Link

Despite all of their benefits, most of the Web seems to have little respect for patterns. The most glaring examples of broken design patterns are found in Web forms. Based on years of research, we know how to design usable forms. From Luke Wroblewski’s book Web Form Design15 to countless articles on things like multiple-column layouts16 and positioning of labels17, we don’t have to guess any more. The patterns are there, and they’re well established. And yet, we see so many barely usable forms online.

As an example of a broken form pattern, look at the registration form for Expotel below:

Notice the small input fields; the left-aligned labels, with the miles of space between them and the input fields; the placement and design of the “Close” and “Register” buttons, which actually emphasize “Close” more. Oh, and what is a “Welcome Message”? Where will it be used? We can all agree that this is not good form design and is not a good way to break a pattern.

But passing judgment on a broken pattern is not always as easy as it is with the example above. Google’s recent decision to remove the “+” from the button to open a new tab in Chrome came under a bit of fire recently18. It breaks a pattern that has been included in most browsers that have tab-based browsing as a feature, and yet Google claims that it did user research before making this change19. Was this the right decision?

Google New Tab

And then there are UIs that we might not know what to make of. iOS apps such as Clear and Path introduce new interactions that we haven’t seen before — to much praise as well as negative feedback. A step forward in design or failed experiments?

As with most design decisions, the answers are rarely clear or black and white. A tension exists between patterns and new solutions that cannot be resolved with a formula. Users are familiar with the established way of doing things, yet a new solution to the problem might be better and even more natural and logical. So, when is changing something familiar to something different OK? There are two scenarios in which we should consider breaking a design pattern.

The New Way Empirically Improves Usability Link

One of the dangers of iterating on an existing design is what is known as the “local maximum20.” As Joshua Porter explains:

The local maximum is a point at which you’ve hit the limit of the current design… It is as effective as it’s ever going to be in its current incarnation. Even if you make 100 tweaks, you can only get so much improvement; it is as effective as it’s ever going to be on its current structural foundation.

With patterns, it could happen that we continue to improve an existing solution even while a better one exists. This is one of the pitfalls of A/B testing: it does a great job of finding the local maximum, but not for finding those new and innovative solutions.

We gain much from incremental innovation, but sometimes a pattern is ripe for radical innovation21. We need to go into every design problem with our eyes wide open, eager to find new solutions, and ready to test those solutions to make sure that we’re not following bad intuition. As Paul Scrivens points out in “Designing Ideas”:

You will never be first with a new idea. You will be first with a new way to present the idea or a new way to combine that idea with another. Ideas are nothing more than mashups of the past. Once you can embrace that, your imagination opens up a bit more and you start to look elsewhere for inspiration.

This is what the Chromium team claims to have done with the “+” button in Chrome. It believes it has found a better solution, and it’s tested it.

The Established Way Becomes Outdated Link

Think of the icon for the “save” action in most applications. When was the last time you saw a floppy drive? Exactly. Sometimes the world shifts beneath us, and we have to adjust. Failing to do so, we could get stuck in dangerous ruts, as Twyla Tharp attests (quoted22 by Yesenia Perez-Cruz):

More often than not, I’ve found a rut is the consequence of sticking to tried and tested methods that don’t take into account how you or the world has changed.

The publishing industry knows this better than most. Stewart Curry has this to say in “The Trope Must Die23”:

Design patterns can be very useful, but when we’re making a big shift in media, they can sometimes hold progress back. If we look at the evolution of digital publications, it’s been a slow and steady movement from (in the most part) a printed page to reproducing that printed page on a digital device. It’s steady, linear, and not very imaginative, where “it worked in print, so it will work in digital” seems to be the mindset.

This is where the developers of apps such as Clear and Path are doing the bold, right thing. They realize that we’re at beginning of a period of rapid innovation in gesture-based interfaces, and they want to be at the forefront of that. Some ideas will fail and some will succeed, but it’s important that our design patterns respond to the new touch-based world we’re a part of.

Clear Todo App24

Our design patterns have to adjust not only to a shift in our interaction metaphors, but to a significant shift in technology usage in general. Tammy Erickson did some research on what she calls the “Re-Generation” (i.e. post-Generation Y) and discusses some of her findings in “How Mobile Technologies Are Shaping a New Generation25”:

Connectivity is the basic assumption and natural fabric of everyday life for the Re-Generation. Technology connections are how people meet, express ideas, define identities, and understand each other. Older generations have, for the most part, used technology to improve productivity — to do things we’ve always done, faster, easier, more cheaply. For the Re-Generation, being wired is a way of life.

Expectations of apps and services change when everything is always on and accessible. We become less tolerant of slow transitions and flows that are perceived to be too complex. We are being forced to rethink sign-up forms and payment flows in an environment where time and attention have become scarcer than ever. We don’t have to reinvent the wheel, but we do need to find better ways to keep it rolling.

The Informed Decision Is The Right Decision Link

Design patterns bring many benefits, as well as some drawbacks to watch out for. But we’d be foolish to ignore these helpful guidelines. There is no formula for what we need to do; rather, we need to operate within certain boundaries to ensure we’re creating great design solutions without alienating users. Here is what we need to do:

  • Study design patterns that are relevant to the applications we are working on. We need to know them by heart — and know why they exist — so that we can use them as loose blueprints for our own work.
  • Approach each new project with a mind open enough to discover better ways to solve recurring problems.
  • Stay up to date on our industry (as well as adjacent ones) so that we recognize external changes that require us to rethink solutions that currently work quite well but might be outdated soon.

In short, we can neither follow nor ignore design patterns completely. Instead, we need a deep understanding of the rules of human-computer interaction, so that we know when breaking them is OK.


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25

↑ Back to top Tweet itShare on Facebook

Rian is passionate about designing and building software that people love to use. After spending several years working in Silicon Valley and Cape Town, he is currently Product Manager at Postmark, working from Portland, OR. He also blogs and tweets regularly about user experience and product management.

  1. 1

    Great article as always Rian.
    To think that patterns are final is to ignore human evolution; our interaction with our tools changes us and then them in return.

    Would you say that Google’s “new pattern” is working because it was evolving an existing pattern? If they just jumped, lets say 2 pattern “generations”, would it have been just as successful?

    • 2

      Well, I noticed it and I hated the change.

      It does not make any sense to have a blank button. It’s like Microsoft replacing close with a blank red button.

      • 3

        Ethan Hackett

        June 7, 2012 4:37 am

        I think they got rid of the wrong piece. They should have gotten rid of the little outline and left the plus.

        It would be both more minimal and more accessible.

        • 4

          though the main issue with this sort of minimalism is that the visible hit area wouldn’t be defined… I agree that it does look like a floating designer ‘extra’ with no purpose; previous user interaction is assumed though it does mimic the real world more, a tab in a folder doesn’t always need a label for us to know that that is the next tab we can move to.

    • 5

      Rian van der Merwe

      June 7, 2012 7:41 am

      Thanks AJ.

      I’d say that there are radical changes and incremental changes, and this one was more incremental (while going from single window browsing to tabbed browsing would be an example of a radical change). It’s so hard to find the balance along that change continuum, and it looks (even from the comments here) that the jury is still out on the Chrome tab one. Their testing apparently showed that it worked, but I wonder what their analytics tell them…

      • 6

        A great post – thank you. As an aside I hadn’t actually noticed that the + had been removed in Chrome. It was an action I was used to and a new, blank tab makes as much sense to me as a tab with a + in. Perhaps this is what their user research showed.. if people didn’t need a + symbol to understand the function then why include it?

  2. 7

    You know, I never even noticed the missing + in Chrome… For me the new tab button could be missing completely and I would just click to the right of the last tab to make a new one. However someone new to tabbed browsing might not even be aware of the ability to create a new, blank tab, and having the + sign there would be a nice clue. And there was nothing objectionable about the + being there. You can do all the studies you want, but sometimes you just need to use a little common sense.

    • 8

      I actually had to look up at my Chrome browser just now as well to realize it was missing. However I never click anyway, Command+T anyone?

  3. 9

    Pavel Binar

    June 6, 2012 2:07 pm

    Great article! Thank you. P.

  4. 10

    No welcome message on the hotel site? Really? All the other gripes are relevant but that? No. The rest of the article is also quite decent!

    There is too much crap on sign up pages – What is that page for? Signing up – you get to it from a registration link. The only way it makes no sense is if it is the landing page as linked from this article.

    “Welcome to the signup page! You can signup here for widgets and other things! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ”

    Irrelevant. Not needed.

    Of all the differences between chrome and other browsers (and applications) you picked out an obscure one. What about the total lack of a menu (file/edit/history/etc).

    • 11

      The gripe wasn’t that there was no welcome message, it was that the form had a field labeled ‘welcome message’ with absolutely no explanatory text to say what it was for and when it would be used. Labels can be as accurate as you want, but without context they can still me nothing to a user.

    • 12

      Rian van der Merwe

      June 7, 2012 7:45 am

      Hi Josh – as Kris said, I didn’t say that there should be a welcome message on the form. If you look at the form you’ll see a field labeled “Welcome Message:”, and I have no idea what that field is for or how it will be used. That’s what I was referring to with this sentence: “Oh, and what is a ‘Welcome Message’? Where will it be used?”

  5. 13

    AWESOME. Great aggregate of a bunch of essential design knowledge. Thanks!

  6. 14

    Nice article, gives yet another clue how expensive good design is and how it is nearly impossible to “keep” one that would be timeless, especially for technology evolves so rapidly.

  7. 15

    Really nice works.Thanks for sharing.

  8. 16

    Adam Nemeth

    June 8, 2012 3:10 pm

    Patterns in their original – Alexandrian – sense are a way to describe problems as constellations or structures and the “solution” part of the problem is rather over-concretized in some areas: in their original sense,they just told you how to find the inverse mold of the problem in the form of a solution.

    And patterns were never solution-patterns: they were problem-patterns: they said, “we see that a lot of people had this need, and all the time, they came up with something that has the following distinct properties”

    I’ve seen a LOT of bad examples: one of the famous design groups I’ve worked for created a “UX Pattern Library”, which actually contained downloadable PSD files for buttons, icons, and so on with previously set color! It was never “when to use it”, only “how to use it”. (Now, a widget library is a perfectly legitimate thing but it’s the implementation of a pattern language, and does not constitute a pattern language by itself)

    Of course, people likely don’t have the problem that they need to provide a welcome message – well, unless they sell classy suits to filmstars and musicians or to couples on honeymoon – and people do have the problem to “add” or “open” a new tab in a browser, and they do have the problem that they – esp. inexperienced users – have to know where to aim for, they have to have a symbol or a writing and they have to recognize this (GOMS…)

    But here’s the key: it’s not that solutions don’t change, it’s that problems don’t change! That was the whole idea behind! That in case you have the need for X, you’ll have to solve the problems Y and Z in order to solve X…

    Of course, if we could switch to mind-reader devices, or in case there was a “new tab” button on every computers’ every keyboard, perhaps we wouldn’t need a tab button on screen at all!

    But in case you still have all the original properties of the problem – hard-to-remember keystrokes (no affordance), visual connection to the content in question and you also need metaphorical symbols – then you need to have a “+” sign there. In case you don’t have the last problem, you don’t, that’s it.

  9. 17

    Prakash Kotian

    June 10, 2012 10:04 pm

    Use better graphics, better layout and better fonts and make your own design instead using others layout. People love to see new creativity not the same old structured layout which used by all.

    • 18

      I think you completely missed the point the author is making and discussing. Design patterns are not copying, they are implying known elements that reduce the level of “cognitive learning” the user needs to interact with the product. If you make something different just to be different then you are not designing. In general, you are practicing artistic expression. That is not what creating good design is about.

      Yes, you can (and should) add your creative style to all kinds of design patterns when appropriate, but that doesn’t mean you should be disrupting the integrity of the pattern. For example, putting the navigation buttons at the bottom of the page in a diagonal below the fold.


↑ Back to top