20 commandments of user interface design
This is a translation of the original Principles of User Interface Design article.
- Paul Rand
Interfaces are used to ensure interaction between people and the outside world. They help us clarify, illuminate, implement and observe relationships; they can unite and divide us, affect our expectations; and besides, they give us access to various services. You should not take the interface development process as an art in its pure form, and the interface itself as an art object. Interfaces are designed to perform certain functions, and their performance can be measured. But the role of interfaces is not reduced to utilitarian issues alone. Really good interfaces are capable of inspiring, awakening, shrouding in mystery and strengthening our relationship with the outside world.
')
First of all, any interface should be clear. To effectively use the interface you have developed, people need to understand what it is, why they need to use it, what tasks they can do with it, what an action will lead to - and then they will be able to successfully interact with it. Yes, to understand the interface from the first time may be difficult, but there is no ambiguity in it. Users trust the clear interface and therefore, most likely, will use it in the future. In general, instead of pushing everything onto one screen and thus confusing users, it’s better to make a hundred clear screens.
We are constantly distracted by something. Even calmly reading is no longer possible without something distracting from the work. Attention users is priceless. Give it focus, do not clutter up the application elements that distract attention from the main purpose of a screen you created. If users need to read something, then give them enough time for it, and only then show ads if necessary. Appreciate the attention of your users: they and you will benefit from this. To ensure the use of the product, the attention of users is a vital factor. Try to keep it at all costs.
People like to feel in control. Many developers do not think about this, and as a result, users, contrary to their desires, are forced to perform operations that they were not going to perform, and the direction of their movement is very unclear, and the results of actions are unexpected. Let users feel that the situation is under their control, periodically displaying the state of the system, describing causal relationships (if you do this, something will happen) and helping them to clearly understand what can be expected from each particular operation. And don't be afraid to be Captain Obvious. Obvious things are not always so obvious.
The best interface is no interface: for example, we interact directly with real-world objects. But gradually more and more objects of digital nature appear that cannot be controlled directly, and here interfaces come to our aid. It is very easy to stray from the right path and eventually overload the interface with buttons, trinkets, graphics, parameters, settings, windows, additional inserts and other “garbage”. As a result, instead of performing tasks, users are forced to manage interface elements. To avoid this, take direct control of the model: the interface should be as inconspicuous as possible and able to recognize natural human gestures. Ideally, users should feel as if they are controlling the object directly.
Each application screen should serve to perform any one task facing users. So it will be easier for users of the application to figure it out and work with it, and for developers to expand its functionality if necessary. Screens that support several basic tasks are confusing to users. It is obvious that, for example, a text cannot contain two or three main themes - the main theme can be only one. So designers should put in each screen the ability to perform only one key task.
In addition to a single key task, the screens can also serve to perform several minor tasks. But it is important to remember that the main and secondary tasks can not be lumped together. You, for example, do not write an article so that users share it on Twitter, right? Your main task in this case is for them to read it and realize what they read. Minor tasks should not come to the fore: for example, they can be designed in a less noticeable way or displayed only after the key task has been completed.
Since the majority of user operations do not interrupt the interaction process, but consistently transform into each other, it would be prudent to design some continuation for each operation. Try to imagine what the next step of users will be in each particular case, and build the interface in accordance with this. As in the usual human communication, a starting point is needed for further interaction. If users have already done everything they need, do not drop them: let them naturally take the next step towards their goals.
People prefer to deal with things that behave in a predictable way: this applies equally to other people, animals, objects — including software. When someone's behavior coincides with our expectations, we feel on the right wave. Accordingly, the interface design elements should look appropriate to their behavior. In practice, this means that users need to understand how a particular interface element will behave, just by looking at it. An element that looks like a button should behave like a button. You should not flirt with the fundamental aspects of the interactions of users and the interface - save your creative energy for tasks of another order.
From the preceding paragraph it follows that if the behavior of the screen elements is different, then they should look different. Of course, elements that are similar in behavior, and should look the same way (sequentially). But it is equally important that the dissimilar elements should be decorated differently (that is, inconsistently). Novice designers, trying to make the interface logical and consistent, often ignore the essential differences between the elements and use the same techniques for their design where they should bring diversity.
A clear visual hierarchy is achieved when the elements on the screen are arranged in a certain order. That is, the same elements are displayed in the same order each time. A poorly crafted visual hierarchy is of no use and only confuses users. In constantly changing environments, it is not so easy to maintain a clear hierarchy of elements, because visual weight becomes a relative value: after all, if everything is selected, nothing is selected. If you need to add a noticeable element to the screen, the designer may need to make all other elements less visible in order to preserve the visual hierarchy. Most users do not think about the visual hierarchy when working with the interface, but its thoughtful (or ill-conceived) alignment is one of the easiest ways to improve (or degrade) the design.
John Maeda, in his book Simplicity, writes that competent organization of interface elements allows you to give the screen a less loaded look. With the help of thoughtful organization of elements, you can demonstrate the links between them, and it will be much easier for users to master this interface. Group similar elements, arrange them on the screen so that users can understand how they are interconnected. Thanks to the competent organization of content, it is possible to significantly reduce the cognitive load of users. If the links between the elements are clearly demonstrated in the design itself, users will no longer have to painfully understand them! Do not force users to strain once again - it's better to just show them all these connections between the interface elements with the help of your design.
The color of physical objects changes depending on the lighting. The same tree, for example, at noon and at sunset looks completely different. In general, in the world of physical objects, color includes many shades and is generally quite relative, and color should also play a role in interfaces. You can select objects with color by attracting the attention of users to them, but at the same time elements cannot be divided only by color. If it is assumed that users will work with any element for a long time, or the element contains three-dimensional text, it is recommended to use pale or muted tones for decoration - save bright shades to place accents. Of course, you can use bright colors for background fill, but only where appropriate.
Each screen should display only the most necessary. If users need to make a choice, provide them with as much information as they need to do. Details can be devoted to subsequent screens. Do not try to explain everything from A to Z or put all the information at once. If possible, distribute the workflow across multiple screens, revealing information gradually. Thanks to this interaction with the interface remains clear and understandable to users.
Ideal interfaces do not need prompts at all, because such an interface is easy to learn and use. But if you descend from heaven to earth, then ideally the prompts should be context-sensitive and appear only when and where they are needed, while remaining hidden during the rest of the time. By making people open help and look for answers to their questions, you make it difficult for them to work with the interface, since in this case they have to formulate what they want to find. It is better to embed prompts where they may be needed. Just make sure that they will not once again loom in front of the nose of those users who are already familiar with the interface.
Designers often overlook such an important point as the first acquaintance with the interface. To help users get started as quickly as possible, the designer should work with an eye on the zero state - the moment when nothing has happened yet. The first screen that users see should not be empty, like a clean sheet - it should contain instructions and hints for a quick start. Most of the difficulties in working with the interface arise from an ill-conceived zero state. But once users understand the rules of the game, their task immediately becomes much simpler.
Users need to solve problems that are relevant at the moment, and not hypothetical questions that may arise in the future. Thus, no one will need an interface that addresses potential problems: study the current situation and develop the interface in accordance with actual problems. Soaring in the clouds and building hypotheses, of course, is much more interesting, but the results of your work will be in demand by grateful users, and not sent to the dump of useless interfaces.
Interesting fact: really good designs are usually not noted in any way by the users who worked with them. The reason is that a good design allows users to concentrate on their tasks, and not on the interface. Users who have successfully completed their tasks will not begin to think about how they did it all so well. It turns out that users pay attention to the design only if they have any difficulties. Yes, designers are not happy with the fact that no one praises them for successful solutions, despite the fact that they get the shoals in full. But really good experts are quite enough that they actively use their design. They understand that a satisfied user is a silent user.
Visual and graphic design, printing, copywriting, information architecture and visualization - all this is included in the design of interfaces. You can get acquainted with these disciplines in passing, or you can go into their study. The main thing is not to look down on them or lead a stinging debate about the importance of a particular discipline. Draw in them useful knowledge - and more. Do not hesitate and at first glance absolutely not connected with the design of interfaces areas. Think what is useful you can learn from the publisher, the author of the program code, book binder, skateboarder, fireman, karate?
As in other areas of design, in the design of interfaces, the result of design works that is demanded by users is considered successful. People will not sit down even in the most beautiful chair, if it turns out to be inconvenient, and this piece of furniture does not fulfill its function, as well as the design that users ignore. Thus, in the design of interfaces, an important role is played by the creation not only of the object itself, but also of some kind of environment for its use. The designer creates an interface not to delight his own eyes, but to use it!
Posted by: Joshua Porter
Note Lane: In my opinion, this article is an excellent checklist for testing projected interfaces at almost any stage - from drawing with sketches to drawing ready-made layouts and layout of a working product.
“Being a designer means not simply assembling disparate elements, arranging them, or somehow changing them. Here you need to create some value, and give meaning, and illuminate, and simplify, and transform, and ennoble, and exaggerate, and convince, and even to some extent entertain. ”
- Paul Rand
1. Interface Obligation - Ensuring Interoperability
Interfaces are used to ensure interaction between people and the outside world. They help us clarify, illuminate, implement and observe relationships; they can unite and divide us, affect our expectations; and besides, they give us access to various services. You should not take the interface development process as an art in its pure form, and the interface itself as an art object. Interfaces are designed to perform certain functions, and their performance can be measured. But the role of interfaces is not reduced to utilitarian issues alone. Really good interfaces are capable of inspiring, awakening, shrouding in mystery and strengthening our relationship with the outside world.
')
2. Clarity above all
First of all, any interface should be clear. To effectively use the interface you have developed, people need to understand what it is, why they need to use it, what tasks they can do with it, what an action will lead to - and then they will be able to successfully interact with it. Yes, to understand the interface from the first time may be difficult, but there is no ambiguity in it. Users trust the clear interface and therefore, most likely, will use it in the future. In general, instead of pushing everything onto one screen and thus confusing users, it’s better to make a hundred clear screens.
3. Attention at any cost
We are constantly distracted by something. Even calmly reading is no longer possible without something distracting from the work. Attention users is priceless. Give it focus, do not clutter up the application elements that distract attention from the main purpose of a screen you created. If users need to read something, then give them enough time for it, and only then show ads if necessary. Appreciate the attention of your users: they and you will benefit from this. To ensure the use of the product, the attention of users is a vital factor. Try to keep it at all costs.
4. Under user control
People like to feel in control. Many developers do not think about this, and as a result, users, contrary to their desires, are forced to perform operations that they were not going to perform, and the direction of their movement is very unclear, and the results of actions are unexpected. Let users feel that the situation is under their control, periodically displaying the state of the system, describing causal relationships (if you do this, something will happen) and helping them to clearly understand what can be expected from each particular operation. And don't be afraid to be Captain Obvious. Obvious things are not always so obvious.
5. Better control - direct control
The best interface is no interface: for example, we interact directly with real-world objects. But gradually more and more objects of digital nature appear that cannot be controlled directly, and here interfaces come to our aid. It is very easy to stray from the right path and eventually overload the interface with buttons, trinkets, graphics, parameters, settings, windows, additional inserts and other “garbage”. As a result, instead of performing tasks, users are forced to manage interface elements. To avoid this, take direct control of the model: the interface should be as inconspicuous as possible and able to recognize natural human gestures. Ideally, users should feel as if they are controlling the object directly.
6. One screen - one primary task.
Each application screen should serve to perform any one task facing users. So it will be easier for users of the application to figure it out and work with it, and for developers to expand its functionality if necessary. Screens that support several basic tasks are confusing to users. It is obvious that, for example, a text cannot contain two or three main themes - the main theme can be only one. So designers should put in each screen the ability to perform only one key task.
7. Minor task, know your place
In addition to a single key task, the screens can also serve to perform several minor tasks. But it is important to remember that the main and secondary tasks can not be lumped together. You, for example, do not write an article so that users share it on Twitter, right? Your main task in this case is for them to read it and realize what they read. Minor tasks should not come to the fore: for example, they can be designed in a less noticeable way or displayed only after the key task has been completed.
8. Place to step forward
Since the majority of user operations do not interrupt the interaction process, but consistently transform into each other, it would be prudent to design some continuation for each operation. Try to imagine what the next step of users will be in each particular case, and build the interface in accordance with this. As in the usual human communication, a starting point is needed for further interaction. If users have already done everything they need, do not drop them: let them naturally take the next step towards their goals.
9. Behavior determines appearance (or “function determines form”)
People prefer to deal with things that behave in a predictable way: this applies equally to other people, animals, objects — including software. When someone's behavior coincides with our expectations, we feel on the right wave. Accordingly, the interface design elements should look appropriate to their behavior. In practice, this means that users need to understand how a particular interface element will behave, just by looking at it. An element that looks like a button should behave like a button. You should not flirt with the fundamental aspects of the interactions of users and the interface - save your creative energy for tasks of another order.
10. How important it is to be consistent
From the preceding paragraph it follows that if the behavior of the screen elements is different, then they should look different. Of course, elements that are similar in behavior, and should look the same way (sequentially). But it is equally important that the dissimilar elements should be decorated differently (that is, inconsistently). Novice designers, trying to make the interface logical and consistent, often ignore the essential differences between the elements and use the same techniques for their design where they should bring diversity.
11. Clear hierarchy - all head.
A clear visual hierarchy is achieved when the elements on the screen are arranged in a certain order. That is, the same elements are displayed in the same order each time. A poorly crafted visual hierarchy is of no use and only confuses users. In constantly changing environments, it is not so easy to maintain a clear hierarchy of elements, because visual weight becomes a relative value: after all, if everything is selected, nothing is selected. If you need to add a noticeable element to the screen, the designer may need to make all other elements less visible in order to preserve the visual hierarchy. Most users do not think about the visual hierarchy when working with the interface, but its thoughtful (or ill-conceived) alignment is one of the easiest ways to improve (or degrade) the design.
12. Competent organization reduces cognitive load.
John Maeda, in his book Simplicity, writes that competent organization of interface elements allows you to give the screen a less loaded look. With the help of thoughtful organization of elements, you can demonstrate the links between them, and it will be much easier for users to master this interface. Group similar elements, arrange them on the screen so that users can understand how they are interconnected. Thanks to the competent organization of content, it is possible to significantly reduce the cognitive load of users. If the links between the elements are clearly demonstrated in the design itself, users will no longer have to painfully understand them! Do not force users to strain once again - it's better to just show them all these connections between the interface elements with the help of your design.
13. Prompt, but do not indicate: the role of color
The color of physical objects changes depending on the lighting. The same tree, for example, at noon and at sunset looks completely different. In general, in the world of physical objects, color includes many shades and is generally quite relative, and color should also play a role in interfaces. You can select objects with color by attracting the attention of users to them, but at the same time elements cannot be divided only by color. If it is assumed that users will work with any element for a long time, or the element contains three-dimensional text, it is recommended to use pale or muted tones for decoration - save bright shades to place accents. Of course, you can use bright colors for background fill, but only where appropriate.
14. Not all at once.
Each screen should display only the most necessary. If users need to make a choice, provide them with as much information as they need to do. Details can be devoted to subsequent screens. Do not try to explain everything from A to Z or put all the information at once. If possible, distribute the workflow across multiple screens, revealing information gradually. Thanks to this interaction with the interface remains clear and understandable to users.
15. Prompt wisely
Ideal interfaces do not need prompts at all, because such an interface is easy to learn and use. But if you descend from heaven to earth, then ideally the prompts should be context-sensitive and appear only when and where they are needed, while remaining hidden during the rest of the time. By making people open help and look for answers to their questions, you make it difficult for them to work with the interface, since in this case they have to formulate what they want to find. It is better to embed prompts where they may be needed. Just make sure that they will not once again loom in front of the nose of those users who are already familiar with the interface.
16. The moment of truth: the zero state
Designers often overlook such an important point as the first acquaintance with the interface. To help users get started as quickly as possible, the designer should work with an eye on the zero state - the moment when nothing has happened yet. The first screen that users see should not be empty, like a clean sheet - it should contain instructions and hints for a quick start. Most of the difficulties in working with the interface arise from an ill-conceived zero state. But once users understand the rules of the game, their task immediately becomes much simpler.
17. Current Issues - Major Issues
Users need to solve problems that are relevant at the moment, and not hypothetical questions that may arise in the future. Thus, no one will need an interface that addresses potential problems: study the current situation and develop the interface in accordance with actual problems. Soaring in the clouds and building hypotheses, of course, is much more interesting, but the results of your work will be in demand by grateful users, and not sent to the dump of useless interfaces.
18. Best Design - Invisible Design
Interesting fact: really good designs are usually not noted in any way by the users who worked with them. The reason is that a good design allows users to concentrate on their tasks, and not on the interface. Users who have successfully completed their tasks will not begin to think about how they did it all so well. It turns out that users pay attention to the design only if they have any difficulties. Yes, designers are not happy with the fact that no one praises them for successful solutions, despite the fact that they get the shoals in full. But really good experts are quite enough that they actively use their design. They understand that a satisfied user is a silent user.
19. Expanding horizons
Visual and graphic design, printing, copywriting, information architecture and visualization - all this is included in the design of interfaces. You can get acquainted with these disciplines in passing, or you can go into their study. The main thing is not to look down on them or lead a stinging debate about the importance of a particular discipline. Draw in them useful knowledge - and more. Do not hesitate and at first glance absolutely not connected with the design of interfaces areas. Think what is useful you can learn from the publisher, the author of the program code, book binder, skateboarder, fireman, karate?
20. Unused interface - bad interface
As in other areas of design, in the design of interfaces, the result of design works that is demanded by users is considered successful. People will not sit down even in the most beautiful chair, if it turns out to be inconvenient, and this piece of furniture does not fulfill its function, as well as the design that users ignore. Thus, in the design of interfaces, an important role is played by the creation not only of the object itself, but also of some kind of environment for its use. The designer creates an interface not to delight his own eyes, but to use it!
Posted by: Joshua Porter
Note Lane: In my opinion, this article is an excellent checklist for testing projected interfaces at almost any stage - from drawing with sketches to drawing ready-made layouts and layout of a working product.
Source: https://habr.com/ru/post/147003/
All Articles