Design patterns: breaking the rules is sometimes helpful.
This is a translation of the original article Design Patterns: When Breaking The Rules Is OK
It is generally accepted that we all use design patterns when developing common web elements. We know perfectly well what the appearance of the buttons and their behavior should be, and we know the methods for developing web forms associated with these buttons.
And despite all this, the Internet is literally flooded with incorrect web forms, buttons that look like anything, but not buttons, and confusing navigation elements. Just some kind of street broken patterns.
')
This leads to thoughts about the history and purpose of design patterns, as well as when to apply them and when not. And what if in some cases changing the pattern for the sake of achieving a different or better result may be the right decision? Of course, we immediately notice when a pattern is used incorrectly. But perhaps in some situations it is really appropriate? To find the answer to this question, let's start from the beginning.
In 1977, architect Christopher Alexander co-authored the book A Pattern Language: Towns, Buildings, Construction, in which he presented the concept of pattern language as a "structured approach to describing effective design methods in the context of accumulated experience." Thanks to this book, any person (not necessarily an architect or a civil servant) can get a sample, focusing on which you can improve your own city and district. Here is what Alexander himself writes:
The basis ... is the idea that people themselves should design the houses, streets and areas in which they live. This idea ... follows from one simple observation: the most beautiful places in the world were created not by architects, but by ordinary people.
Outdoor cafe in San Diego (author image: shanputnam)
Any template, be it a sphere of architecture, web design, or any other, includes two components: it contains, firstly, a description of a common problem, and, secondly, a standard solution to this problem. For example, template 88 from the book “A Pattern Language” describes the problem of the individual and the methods of organizing such public places that would set people up for communication and networking. One of the proposed options - street cafes.
Street cafes create a unique atmosphere in large cities: here people can sit comfortably and leisurely, sit at everyone’s sight and watch how life is full. Conclusion: these local cafes should appear in every district. It can be such small cozy establishments that go directly to a crowded street, where anyone, sipping coffee or a soft drink, can relax and watch the boiling of the city. Several tables can be arranged along the facade of the cafe, i.e., right on the street. The abundance of such street cafes is one of the hallmarks of a civilized city.
Particularly interested in the template 88 can get acquainted with the group on Flickr, where examples of this template are collected.
This architecture approach turned out to be easily applicable to web technologies, since in essence everything is the same here: there are many common interaction problems for which standard solutions need to be found. Let's take as an example the Yahoo navigation tabs template. The essence of the problem is as follows.
To gain access to the content or any functions on the site, the user needs navigation tools. Also, the user needs to know in which section of the site he is currently in time.
Below is a solution to this problem.
Due to the fixed placement of tabs in one row on the horizontal bar under the header of the site, you can provide an effective navigation system for a website with a more or less constant number of sections. The width of this panel should be equal to the width of the page, the tab headings should be concise and logical, the tabs themselves should be few, and the current tab should be clearly highlighted (similar to the file folder interface).
All this is fine, but we need to dig deeper to understand the benefits of using such patterns in the development of digital products.
The benefits of using templates in the development process are as follows:
First, thanks to the templates, we can save time, because we don’t have to solve the same problem twice. With the right approach, you can use the principles underlying each pattern to solve other common design problems.
Thanks to templates, working on the Web becomes much more convenient: as more and more developers resort to templates, users gradually get used to certain principles of functioning of common web design elements, which in turn reduces the cognitive load of users when working with such elements. In other words, when the degree of distribution of patterns reaches a certain level, the pattern becomes a kind of speculative model, a set of user beliefs regarding the principles of the system.
When it comes to the benefits of using existing patterns versus creating new ones, we again turn to architecture. Dmitry Fadeev (Dmitri Fadeyev) in his article “The Value of Unoriginality” cites the following quote from the book The Grammar of Ornament by Owen Jones, an architect and influential design theorist who lived in the 19th century.
Starting the construction of theories of art or the formation of style, while not relying on the experience of past years, would be an act of the utmost recklessness. It would be tantamount to giving up all the knowledge and experience accumulated by mankind over the centuries and millennia. We, on the contrary, should respect the experience we inherited and remember the successes of our predecessors, not blindly following in their footsteps, but guided by their experience in finding the true path.
The last sentence contains the key idea. The essence of the templates is not to mindlessly copy the results of someone else's work, but to use them as a model in the design. With this approach to using templates, both developers and users benefit. So developers just need to use the experience of their predecessors - for the benefit of the Network and all users. Attempts have been made to document the most common templates for web design - with varying success. In addition to the Yahoo Design Pattern Library, there are resources such as Peter Morville's Design Patterns, Welie.com and (perhaps one of the most successful examples) of UI-Patterns.com
Despite all the delights of using templates, there is one big "but." Although many people do not think about it, not everything is so simple and easy. You can not just accumulate templates from a pile of different places, collect them all on the internal wiki site, fold the pens and wait for a miracle. Integration into a single whole and support for the functioning of the internal library of templates is not a simple matter, and if you approach it carelessly, nothing good will come of it. Stephen Turbek in the article “Are Design Patterns an Anti-Pattern?” Provides an exhaustive list of problems with template libraries:
In this article we will not discuss in detail the above problems, so we advise you to familiarize yourself with the original article by Turbek.
In this article, we assume that we did everything correctly. We have a published, well-known template library that is actively used in this organization. Libraries are used as samples and reference points, and not thoughtlessly copied without regard to current tasks. And now the main question: in what circumstances would it be appropriate to abandon the common design patterns and offer users a new way to solve the problem?
Despite all their advantages, templates for some reason are not widely popular on the Web. The most egregious examples of incorrect use of design patterns can be found by looking at some web forms. Through years of research, we got an idea of ​​how to create practical and convenient forms. We no longer need to guess and poke a finger at the sky, since we have plenty of sources of information - starting with the book “Web Form Design” by Luke Wroblewski and ending with countless articles on field name placement, multi-column layout, etc., etc. . p. Proven templates are always at hand. And all the same, here and there online forms come across that are almost impossible to work with.
As an example of incorrect use of a template, consider the form for registration with Expotel.
Look at these tiny fields for entering text, at this huge distance between them and the names of the fields aligned to the left, the location and design of the buttons “Close” and “Register” (the hands are stretched to click on “Close”, isn't it ?) And what kind of message is proposed to enter in the "Welcome Message"? Where will it be used? Perhaps no one will argue with the fact that this is an unfortunate example of form design and certainly not the most successful example of deviation from the template.
However, it is not always possible to make a verdict regarding the deviation from the template as quickly as in the example above. Recently, Google decided to remove the “+” symbol from the button to open a new tab in the Chrome browser, which caused a wave of criticism. This solution goes against the template used in most tabbed browsers, but Google claims that they conducted preliminary research among users and only then decided to take this step. Did they make the right decision?
And sometimes you come across such user interface elements that you don’t know how to approach. For example, in such iOS applications as Clear or Path, absolutely new interaction operations are offered, thanks to which they deserve a lot of conflicting user feedback, both positive and negative. What is this - a step forward or a failed experiment?
Regarding the majority of design decisions, it is quite rare to quickly draw objective conclusions. The use of patterns and the introduction of new solutions are processes that go in opposite directions, and it is not possible to find a universal solution to the problem associated with this opposition. Yes, some well-established principles of work may be well known to users, but perhaps a new solution will allow them to solve the same problem in a more efficient and possibly more natural and logical way. In what circumstances will the transition from the familiar to the new and the unknown be appropriate? Here are two cases in which it is worth considering the possibility of deviating from the design pattern.
If you constantly revolve around the same existing design, you may encounter the problem of a “local maximum”. Joshua Porter (Joshua Porter) on this issue says the following.
The local maximum is the point at which you reach the limits of the capabilities of the current design. This is its maximum efficiency in the current configuration, and it will not be possible to squeeze more out of it. Even if you correct it another hundred times, you will not achieve more: that's all he can do with the current structural basis.
When using templates, we may not notice the emergence of a new, more effective solution, and continue to try to improve the already used. This is one of the tricks of A / B testing: with its help you can easily find a local maximum, but it is impossible to find new innovative solutions.
We all know about the benefits of gradual innovation, but sometimes a template needs a radical update. The solution to each design problem should be approached with a fresh head and a straightforward look. It is necessary to strive to find new approaches to solving these problems, and having found it, it is imperative to carry out testing to make sure that the chosen direction is correct. Paul Scrivens in the article “Designing Ideas” notes the following.
If an idea came to your mind, be sure that you are far from the first and that such an idea has already come to someone. But you can be the first to be able to present this idea in a new light, or combine it with any other decision and get something new as a result. In essence, each new idea is only a potpourri of echoes of the past. As soon as you realize this and accept it as a given, the limits of your imagination will move apart and you will be able to draw inspiration from those things that you have not paid attention to before.
This is exactly what the Chromium team did with the “+” button in the Chrome browser. They are sure that they have found a more effective solution and tested it.
Imagine the icon for the save operation in most applications. Tell me, when was the last time you got a floppy disk? That's it. The world around is changing, and these changes must be considered. Otherwise, according to Twyla Tharp (quoted by Yesenia Perez-Cruz], we risk becoming slaves to our habits.
In most cases, we fall into the power of our habits due to the fact that we invariably resort to the same tried and tested methods, not paying attention to how the world has changed around us and ourselves.
In publishing this has to be faced quite often. That's what Stewart Curry says about this in the article “The Trope Must Die”.
Templates themselves can be very useful tools, but sometimes they prevent us from moving forward when moving to new media. The evolution of digital publications, as we see, is a slow progress from (mostly) the printed page to the reproduction of this page on a digital device. The whole process is uniform, linear and even a bit boring. Everything here is based on the principle “what worked in print format, will work in digital too”.
And here the developers of applications such as Clear and Path, take a bold step in the right direction. They are aware that a period of rapid development of gestural interfaces begins, and they want to be on the crest of this wave. Some solutions will be unsuccessful, others - successful, but the main thing is that now everything revolves around sensor technologies, and design patterns must be transformed in accordance with these trends.
The design patterns we use need to be adapted not only to changes in the interaction model, but also to noticeable changes in relation to technologies in general. Tammy Erickson (Tammy Erickson) in the article "How Mobile Technologies Are Shaping a New Generation" gives the results of his research, the object of which is the "Re-Generation" generation. This includes those born after 1995, i.e. this generation follows the so-called generation Y.
For this generation [Re-Generation] connectivity and interaction is the norm. People meet, exchange ideas, self-define, form an idea of ​​people around through technological connections. Previous generations used technologies that were preemptive to increase productivity: they needed to perform traditional tasks faster, easier, and at lower cost. As for the generation of Re-Generation, their lifestyle is inextricably linked with the use of computing devices.
Continuous availability changes user expectations for applications and services. We can no longer put up with slow transitions or processes that seem too complicated. In a world where there is always not enough time and something distracting us without end, we are forced to revise registration forms and payment flows. We are not required to reinvent the wheel, but we must look for new, more efficient ways to pedal.
The use of design patterns carries with it a lot of advantages and disadvantages that should not be overlooked. Nevertheless, it would be simply unwise to ignore these useful tools. Yes, we do not have a universal recipe for solving our problems. But we can set certain benchmarks, thanks to which we will be able to design solutions that will not cause rejection to users. You need to do the following:
In a word, you cannot use patterns without thinking, but you cannot ignore them completely either. What we need is a deep understanding of the principles of human-computer interaction, thanks to which we can make informed decisions about the appropriateness of deviating from well-established design patterns.
Article author: Rian van der Merwe
It is generally accepted that we all use design patterns when developing common web elements. We know perfectly well what the appearance of the buttons and their behavior should be, and we know the methods for developing web forms associated with these buttons.
And despite all this, the Internet is literally flooded with incorrect web forms, buttons that look like anything, but not buttons, and confusing navigation elements. Just some kind of street broken patterns.
')
This leads to thoughts about the history and purpose of design patterns, as well as when to apply them and when not. And what if in some cases changing the pattern for the sake of achieving a different or better result may be the right decision? Of course, we immediately notice when a pattern is used incorrectly. But perhaps in some situations it is really appropriate? To find the answer to this question, let's start from the beginning.
The history of design patterns
In 1977, architect Christopher Alexander co-authored the book A Pattern Language: Towns, Buildings, Construction, in which he presented the concept of pattern language as a "structured approach to describing effective design methods in the context of accumulated experience." Thanks to this book, any person (not necessarily an architect or a civil servant) can get a sample, focusing on which you can improve your own city and district. Here is what Alexander himself writes:
The basis ... is the idea that people themselves should design the houses, streets and areas in which they live. This idea ... follows from one simple observation: the most beautiful places in the world were created not by architects, but by ordinary people.
Outdoor cafe in San Diego (author image: shanputnam)
Any template, be it a sphere of architecture, web design, or any other, includes two components: it contains, firstly, a description of a common problem, and, secondly, a standard solution to this problem. For example, template 88 from the book “A Pattern Language” describes the problem of the individual and the methods of organizing such public places that would set people up for communication and networking. One of the proposed options - street cafes.
Street cafes create a unique atmosphere in large cities: here people can sit comfortably and leisurely, sit at everyone’s sight and watch how life is full. Conclusion: these local cafes should appear in every district. It can be such small cozy establishments that go directly to a crowded street, where anyone, sipping coffee or a soft drink, can relax and watch the boiling of the city. Several tables can be arranged along the facade of the cafe, i.e., right on the street. The abundance of such street cafes is one of the hallmarks of a civilized city.
Particularly interested in the template 88 can get acquainted with the group on Flickr, where examples of this template are collected.
This architecture approach turned out to be easily applicable to web technologies, since in essence everything is the same here: there are many common interaction problems for which standard solutions need to be found. Let's take as an example the Yahoo navigation tabs template. The essence of the problem is as follows.
To gain access to the content or any functions on the site, the user needs navigation tools. Also, the user needs to know in which section of the site he is currently in time.
Below is a solution to this problem.
Due to the fixed placement of tabs in one row on the horizontal bar under the header of the site, you can provide an effective navigation system for a website with a more or less constant number of sections. The width of this panel should be equal to the width of the page, the tab headings should be concise and logical, the tabs themselves should be few, and the current tab should be clearly highlighted (similar to the file folder interface).
All this is fine, but we need to dig deeper to understand the benefits of using such patterns in the development of digital products.
Benefits of using design patterns
The benefits of using templates in the development process are as follows:
First, thanks to the templates, we can save time, because we don’t have to solve the same problem twice. With the right approach, you can use the principles underlying each pattern to solve other common design problems.
Thanks to templates, working on the Web becomes much more convenient: as more and more developers resort to templates, users gradually get used to certain principles of functioning of common web design elements, which in turn reduces the cognitive load of users when working with such elements. In other words, when the degree of distribution of patterns reaches a certain level, the pattern becomes a kind of speculative model, a set of user beliefs regarding the principles of the system.
When it comes to the benefits of using existing patterns versus creating new ones, we again turn to architecture. Dmitry Fadeev (Dmitri Fadeyev) in his article “The Value of Unoriginality” cites the following quote from the book The Grammar of Ornament by Owen Jones, an architect and influential design theorist who lived in the 19th century.
Starting the construction of theories of art or the formation of style, while not relying on the experience of past years, would be an act of the utmost recklessness. It would be tantamount to giving up all the knowledge and experience accumulated by mankind over the centuries and millennia. We, on the contrary, should respect the experience we inherited and remember the successes of our predecessors, not blindly following in their footsteps, but guided by their experience in finding the true path.
The last sentence contains the key idea. The essence of the templates is not to mindlessly copy the results of someone else's work, but to use them as a model in the design. With this approach to using templates, both developers and users benefit. So developers just need to use the experience of their predecessors - for the benefit of the Network and all users. Attempts have been made to document the most common templates for web design - with varying success. In addition to the Yahoo Design Pattern Library, there are resources such as Peter Morville's Design Patterns, Welie.com and (perhaps one of the most successful examples) of UI-Patterns.com
Templates against us
Despite all the delights of using templates, there is one big "but." Although many people do not think about it, not everything is so simple and easy. You can not just accumulate templates from a pile of different places, collect them all on the internal wiki site, fold the pens and wait for a miracle. Integration into a single whole and support for the functioning of the internal library of templates is not a simple matter, and if you approach it carelessly, nothing good will come of it. Stephen Turbek in the article “Are Design Patterns an Anti-Pattern?” Provides an exhaustive list of problems with template libraries:
- design patterns are ineffective as learning tools;
- design patterns do not replace UX experience;
- the fuller the library, the more difficult it is to study;
- design patterns require considerable investment;
- first of all, design patterns should be targeted to users outside the UX area.
In this article we will not discuss in detail the above problems, so we advise you to familiarize yourself with the original article by Turbek.
In this article, we assume that we did everything correctly. We have a published, well-known template library that is actively used in this organization. Libraries are used as samples and reference points, and not thoughtlessly copied without regard to current tasks. And now the main question: in what circumstances would it be appropriate to abandon the common design patterns and offer users a new way to solve the problem?
We are against patterns
Despite all their advantages, templates for some reason are not widely popular on the Web. The most egregious examples of incorrect use of design patterns can be found by looking at some web forms. Through years of research, we got an idea of ​​how to create practical and convenient forms. We no longer need to guess and poke a finger at the sky, since we have plenty of sources of information - starting with the book “Web Form Design” by Luke Wroblewski and ending with countless articles on field name placement, multi-column layout, etc., etc. . p. Proven templates are always at hand. And all the same, here and there online forms come across that are almost impossible to work with.
As an example of incorrect use of a template, consider the form for registration with Expotel.
Look at these tiny fields for entering text, at this huge distance between them and the names of the fields aligned to the left, the location and design of the buttons “Close” and “Register” (the hands are stretched to click on “Close”, isn't it ?) And what kind of message is proposed to enter in the "Welcome Message"? Where will it be used? Perhaps no one will argue with the fact that this is an unfortunate example of form design and certainly not the most successful example of deviation from the template.
However, it is not always possible to make a verdict regarding the deviation from the template as quickly as in the example above. Recently, Google decided to remove the “+” symbol from the button to open a new tab in the Chrome browser, which caused a wave of criticism. This solution goes against the template used in most tabbed browsers, but Google claims that they conducted preliminary research among users and only then decided to take this step. Did they make the right decision?
And sometimes you come across such user interface elements that you don’t know how to approach. For example, in such iOS applications as Clear or Path, absolutely new interaction operations are offered, thanks to which they deserve a lot of conflicting user feedback, both positive and negative. What is this - a step forward or a failed experiment?
Regarding the majority of design decisions, it is quite rare to quickly draw objective conclusions. The use of patterns and the introduction of new solutions are processes that go in opposite directions, and it is not possible to find a universal solution to the problem associated with this opposition. Yes, some well-established principles of work may be well known to users, but perhaps a new solution will allow them to solve the same problem in a more efficient and possibly more natural and logical way. In what circumstances will the transition from the familiar to the new and the unknown be appropriate? Here are two cases in which it is worth considering the possibility of deviating from the design pattern.
Research shows that new solution will improve usability.
If you constantly revolve around the same existing design, you may encounter the problem of a “local maximum”. Joshua Porter (Joshua Porter) on this issue says the following.
The local maximum is the point at which you reach the limits of the capabilities of the current design. This is its maximum efficiency in the current configuration, and it will not be possible to squeeze more out of it. Even if you correct it another hundred times, you will not achieve more: that's all he can do with the current structural basis.
When using templates, we may not notice the emergence of a new, more effective solution, and continue to try to improve the already used. This is one of the tricks of A / B testing: with its help you can easily find a local maximum, but it is impossible to find new innovative solutions.
We all know about the benefits of gradual innovation, but sometimes a template needs a radical update. The solution to each design problem should be approached with a fresh head and a straightforward look. It is necessary to strive to find new approaches to solving these problems, and having found it, it is imperative to carry out testing to make sure that the chosen direction is correct. Paul Scrivens in the article “Designing Ideas” notes the following.
If an idea came to your mind, be sure that you are far from the first and that such an idea has already come to someone. But you can be the first to be able to present this idea in a new light, or combine it with any other decision and get something new as a result. In essence, each new idea is only a potpourri of echoes of the past. As soon as you realize this and accept it as a given, the limits of your imagination will move apart and you will be able to draw inspiration from those things that you have not paid attention to before.
This is exactly what the Chromium team did with the “+” button in the Chrome browser. They are sure that they have found a more effective solution and tested it.
The established approach is hopelessly outdated
Imagine the icon for the save operation in most applications. Tell me, when was the last time you got a floppy disk? That's it. The world around is changing, and these changes must be considered. Otherwise, according to Twyla Tharp (quoted by Yesenia Perez-Cruz], we risk becoming slaves to our habits.
In most cases, we fall into the power of our habits due to the fact that we invariably resort to the same tried and tested methods, not paying attention to how the world has changed around us and ourselves.
In publishing this has to be faced quite often. That's what Stewart Curry says about this in the article “The Trope Must Die”.
Templates themselves can be very useful tools, but sometimes they prevent us from moving forward when moving to new media. The evolution of digital publications, as we see, is a slow progress from (mostly) the printed page to the reproduction of this page on a digital device. The whole process is uniform, linear and even a bit boring. Everything here is based on the principle “what worked in print format, will work in digital too”.
And here the developers of applications such as Clear and Path, take a bold step in the right direction. They are aware that a period of rapid development of gestural interfaces begins, and they want to be on the crest of this wave. Some solutions will be unsuccessful, others - successful, but the main thing is that now everything revolves around sensor technologies, and design patterns must be transformed in accordance with these trends.
The design patterns we use need to be adapted not only to changes in the interaction model, but also to noticeable changes in relation to technologies in general. Tammy Erickson (Tammy Erickson) in the article "How Mobile Technologies Are Shaping a New Generation" gives the results of his research, the object of which is the "Re-Generation" generation. This includes those born after 1995, i.e. this generation follows the so-called generation Y.
For this generation [Re-Generation] connectivity and interaction is the norm. People meet, exchange ideas, self-define, form an idea of ​​people around through technological connections. Previous generations used technologies that were preemptive to increase productivity: they needed to perform traditional tasks faster, easier, and at lower cost. As for the generation of Re-Generation, their lifestyle is inextricably linked with the use of computing devices.
Continuous availability changes user expectations for applications and services. We can no longer put up with slow transitions or processes that seem too complicated. In a world where there is always not enough time and something distracting us without end, we are forced to revise registration forms and payment flows. We are not required to reinvent the wheel, but we must look for new, more efficient ways to pedal.
Reasonable decision - the right decision
The use of design patterns carries with it a lot of advantages and disadvantages that should not be overlooked. Nevertheless, it would be simply unwise to ignore these useful tools. Yes, we do not have a universal recipe for solving our problems. But we can set certain benchmarks, thanks to which we will be able to design solutions that will not cause rejection to users. You need to do the following:
- It is necessary to study design patterns related to the applications being developed. Knowing each template by heart and why it is needed, we will be able to use templates as approximate samples in the process of work.
- Each new project must be approached with an open mind and with a straightforward look - so we can find more effective ways to solve current problems.
- It is necessary to closely monitor the development of our industry (and related industries too) and note external changes that entail a review of the solutions used, which, despite their current suitability, may soon become obsolete.
In a word, you cannot use patterns without thinking, but you cannot ignore them completely either. What we need is a deep understanding of the principles of human-computer interaction, thanks to which we can make informed decisions about the appropriateness of deviating from well-established design patterns.
Article author: Rian van der Merwe
Source: https://habr.com/ru/post/149485/
All Articles