Product designer Anton Balashov wrote vc.ru a column about the principles of design by well-known digital products Google, Apple, Facebook and other companies, and also gave tips on how to develop their own rules of harmonious design. Recently our team had to formulate a set of basic principles that would help us to make decisions about product design. We wanted to take a few simple but universal rules to define themselves with clarity and to save time on disputes.
The first thing I learned the design principles that underlie all known digital products.
Turned out a big selection, which will be useful to those involved in design products, or just wants to know why the services used by the entire world, look as look. What is “design-principles”. When you start to look for the answer to this question, Google first gives information about the basics of graphic design. Proximity, balance, contrast, space and so on.
All of this usually familiar and intuitive to a good specialist. The next cluster of responses — principles informed the design process. Is a set of rules, the knowledge of which makes the designer a true professional and allows you to efficiently create a quality product.
These rules set the team standard of quality, which each participant must either conform, or to seek it as soon as possible to achieve. As an example, will show the principles of the design process of the portal of public services in the UK (Government digital services Gov.uk): To start with the needs of the user.
Not to make unnecessary.
3. Be guided by the data.
4. To simplify everything, even if it costs much.
5. To work iteratively.
To create for everyone.
7. To understand the context.
8. To build services, not websites.
9. To be consistent, but not monotonous.
10. Share what you are doing — others will help to make your product even better.
Sensible, but these rules, consciously or not, is guided by the entire industry. Most designers seek to understand the context or to use data Analytics. I am convinced that the design principles should be based not on the obvious and well-known and innovative things. They really inspire the team on development and help you to move forward.
Some teams lay out the design principles to which they adhere, in the open access. I am often faced with a thesis such as “be a man” or “talk more” (I want to add that Russian teams such approaches have not met me even once). Such postulates can be hung on the wall only if you are working with the unconscious tacit Boobs and want to fix it. The question remains, why in this case you hired them?.
I, first and foremost, the principles of product design. At Gov.uk has at least one like this: To create for everyone. Good design is accessible design. Everything we create must be as succinct, clear and readable.
If you have to sacrifice the beauty of form — so be it. Our design solves a specific task and does not satisfy anyones tastes. We create products for the whole country, not just for those who are accustomed to use the Internet. People who more than others need our services frequently experience difficulties in working with them. Lets think about them in the first place.
Principles of product design should help the team and the investors to decide in which direction to move when it is especially difficult. They determine what differentiates your product from others, what feelings it is destined to awaken, and that it is most important from the point of view of the business and users. Im sure many have read the Apple interface guidelines or a description of the material design Google.
The design principles behind them, combine different products into a unified ecosystem, and give each of them a General sense. If your product is being developed for multiple platforms, think about the introduction of a unifying design system along with the product design principles. This will help to give the product a unique character and provide the same user experience on all tacpoint, screens and different operating systems. Dont waste time on the obvious recommendations are: clarity, simplicity, ease of use.
Good designers adhere to these principles by default. Even the best rules will not do such, and your product. Great products require great execution on all stages of creation. Principles of design — only a small part of the work on the product, but they will guide your decisions and give the right arguments in disputes.
The design principles define a shared vision of the product and save time. Below are the design principles leading digital products that seemed useful. There are no basic rules of design and process descriptions, but there are some tips to design systems because they largely overlap with the grocery principles.
Unified. Every design element — part of a whole which complements the overall concept. There can be nothing separate or outside. Universal. Airbnb is used by people around the world. Our products and visual language should be available to win.
Leading by example. We pay equal attention to design and functionality. Our work clearly reflects this principle. Expressive. We use animations to bring life to the product and to communicate with users on a universal level of perception.
Design as a “mutual friend.” Trying to minimize uncertainty by setting standards and expectations in product, we help users get a positive experience in the real world. We create products that people learned more about each other. We study your requests and use this knowledge to open doors for you to new experiences. We do everything we can to meet and introduce you, and then stepped aside.
As a good friend we are there whenever you need us. Design as the first impression. Airbnb asks users to provide certain personal data required for booking, but does not require full disclosure. It is important that guests have called themselves, but they decide to stop there or to continue the story.
Trust requires effort. As often happens in life, you get from Airbnb the same as ready to give. Users trust each other, and its always mutually. The stronger the guest is trying to locate the owner yourself, the more attention it receives in return. Universal. Our mission is to make the world open, which means to be everywhere and all.
Therefore, our design needs to work for every person, every culture, every language, every device, every stage of life. Thats why we create products for 90% of users and refuse functions, which need only some of them. Even if I have to take a step back (as it turns out, only in the short term). Human. Users return to our site to be surrounded by friends and loved ones.
The basic promise of our product — we will collect all your favourite people in one place. Therefore, our voice and our style will always remain in the background, with the voices of real people, their faces and emotions. Clean. Our visual style is clean and restrained, this white sheet on which unfolds the lives of our users. Minimalist, bright space encourages interaction and honest direct communication.
The rejection of all superfluous — not the easiest approach to visual style. On the contrary, indentation, and line font, gradients, and color gain, the greater the value, the smaller styles we use. Grease. The use of templates saves us time. When we explain the same functions with the same means, to use the product becomes much easier and more convenient.
All the parts of the interface are added to the overall familiar picture that increases the users trust in their product. Refuse unnecessary, use the same again, do not modify the design. Useful. Our product is more utilitarian than entertainment. It is designed for constant daily use, and it increases its value.
Therefore, the key interface elements with which users interact every day is meticulously planned — they take up space in an optimal way and do not require extra clicks. Fast. We appreciate the time users are higher than their own. We understand that the faster the interaction with the interface, the easier it seems and the more effective it becomes. Therefore, site performance is something individuals need to think never.
Our website needs to be as quick as we can. Transparent. People trust us with personal information, photographs, ideas and conversations. We respond with the utmost honesty and transparency. Always inform them in advance that they are going to do and why.
Aesthetic integrity. Aesthetic integrity is the consistent interface and behavior of the application its functions. For example, if the application aims to help people in carrying out serious tasks, you can increase their concentration due to the unobtrusive, almost invisible design, standard controls and predictable reaction. On the other hand, immersive application such as a game may look intriguing. This will allow the user to understand that to interact with the app is fun and interesting and will spur him to independent study functions.
Consistency. The application creates a consistent visual standard, the system of signs within which use the same interface elements, recognizable icons, the standard text styles and versatile terms. The app does what I expect it users, and how they want it. A direct interaction. Direct interaction with content on the screen attracts people and facilitates the understanding of the product. Users affect what you see on the screen by rotating the device or using gestures.
Due to the direct interaction they instantly see the results of their teams. Response. The response of the elements of the interface signals to the user that he performed an action that led to that particular result. System iOS apps obviously react to every movement of the user. Interactive elements are highlighted when you touch it, a progress report on the status of long-term operations, animation, and sound report the results of action. Model. People quickly learn the application, when the virtual objects and their reactions simulate the familiar experience derived from the real or digital world.
The model works particularly well in iOS, because people physically interact with the screen. They move the objects to see the content underneath. They drag and like the content. They switch switches, move sliders scroll through the values in pecherah. They even glance over the pages of books and magazines.
The custom control. In iOS main — people, not applications. The application can suggest a course of action or warn about dangerous consequences, but to make that decision for the user for the application in most cases is a mistake. The authors of the best applications found a middle ground between giving the user complete flexibility and in order to prevent the unwanted results of his actions. The application can give a person a sense of control, if it uses familiar and predictable interactive elements, it warns about dangerous actions and allows you to easily undo the process, even if they are already running.
“Material” is a metaphor. In the metaphor of materiality converge the realization of the object and mobility system. The material originates in the material reality, as, for example, the interaction of the paper with ink, while it is technologically improved and open to imagination and magic. The verge and boundaries of the material send the same visual signals as physical objects. The use of familiar tactile characteristics helps users quickly understand the product features.
At the same time, the plasticity of the material creates new possibilities that are superior to those that we know from experience in the real world without violating the laws of physics. Basic knowledge about light, the physical properties and movement help to convey the feelings of how objects move, react, are located in the space and interact with each other. Realistic lighting stresses the joints, divides space, and indicates moving parts. Bold, vivid, and thoughtful. The fundamental elements of graphic design — typography, grids, space, scale, color and use of images, define how the product looks.
But the idea was not only to please the eye. They build a hierarchy, according to the meaning and accents. Sensible choice of color, layout images “to the edge”, large typography and skillful handling of negative space create a friendly and intuitive interface that immerses the user in the experience with the product. The emphasis on the actions of the user from the first seconds makes the main functionality is obvious, and paves her way inside the product.
Movement has value. Animation respects and inspires the user, because it brings the design into motion. His actions start a process of animation is a pivotal moment that transformed the whole interface. All events take place in a single environment. Objects appear on the screen without interrupting the user interaction with the design, even when transformirovalsya and regroup. Movement with meaning and appropriate context, focuses attention of the user and provides the continuity of experience.
Response unobtrusive but noticeable. Transitions between States are obvious, but smooth. Just keep it simple. We begin with simplicity is a universal common denominator. When the design is intuitive, we know.
We can feel it. The result is honest and timeless product. Customize. Then we set a goal to build an emotional connection with every person. We make design thinking about how people live, think and act actually. The result is a product that is tailored for a specific person.
Think big. We do design, taking into consideration all those things that make us human. It is much more than just a work on technologies, the creation of the world, which changes peoples lives for the better. The result is a versatile product. Sashimi. Our last principle is the live feel of the product. When you realize that it was created by a real person.
The result is a product that surprises and at the same time fits into the context. Concentration is more important than choice. This principle is often helped us in the design of our editor. We deliberately renounced the possibility of choice of grids, fonts and colors in favor of concentrating. Concentration had a greater value for the product, because we wanted people to focus on writing without distractions to choose from.
Contextuality is more important than consistency. This principle may seem controversial, but when create a product for different devices, its value becomes apparent. We were willing to sacrifice consistency, if found most suitable for a specific environment, operating system or device. Variability is more important than perfection. On Medium you can share drafts, write answers, keep notes — all these are consequences of the principle. Content Medium should be AntiRootkit — it only benefits from the fact that interact with it, and is constantly changing.
We have not sought to create an analogue paper books to the digital environment. Cares about you. Firefox protects you, your safety, personal information and quality of online life. It takes for you reasonable solutions appreciates your time, data, and attention.
Created together with the users. In Firefox everything is done to ensure that the product wanted to use it, but it makes sense, only when it gets to you and you change it for yourself. People can become part of the community — something more than just users. Gets along with others. Firefox belongs to that part of the products choose that they are better than others, not because they are pre-installed on the device. By the same token, Firefox never limit the choice of available services or service providers.
Instead, it gives you complete freedom (although it may help helpful tips) that the experience was extremely positive. The user has control and makes decisions;. The services you choose available and easy to use;. We tell you how to get the most from the use of the browser.
Full of energy. Other browsers can be primitive and simple or glossy and impersonal, and Firefox remains a humane, exciting, unpredictable and emotional. We all love the Internet, and Firefox is no exception. Verified to trifles. Firefox is made by people who attach importance to details. Good product a pleasure to use, it seems simpler and clearer.
This is achieved by the craftsmanship and attention to detail. Global. Firefox is used and created by people around the world. He is not just translated into different languages — develop it for each specific location. Along with the fact that we have in common, there is a great variety of use cases and needs, and Firefox remembers about these differences.
Global means local, local and local times. Combines the functionality and simplicity. Firefox is easy to use, its design is clean and straightforward. But simplicity is a means and not an end. The goal is to understand and help the user.
First of all, ease of access, then accessible design;. Understanding user and assist him, and not just the pursuit of minimalism. Helps to understand the Internet. The Internet is huge, and it is difficult to understand.
Firefox helps to rationalize it by focusing on real actions and users goals and providing tools to achieve them. Productive user. Speed is still the most important for a good browser but it needs not only to have high technical performance, but instantly and intuitively react to user actions. Performance objective, the subjective reaction;. Satisfied user better cope with the task.
Clarity. Eliminates ambiguity. Allows people to see, understand and act with confidence. Efficiency. Unifies and optimizes workflows. Accurate and advance knowledge that people need, helping them to work better, better and faster.
Sequence. Provides awareness and awakens intuition by solving similar problems the same way. Beauty. Thoughtful and elegant performance shows respect for others time and attention. Six use cases. How they work and look our products and services, dictated by the six scenarios for using them. In every case the user decides certain tasks and emotionally tied to the product.
This is not different States of the product, and different ways to use it. Find, try, buy. Come to the users themselves. Show instead of tell. Do your best to transition from exploring the product to the purchase was as inconspicuous as possible.
The beginning of work. Engage users and show what they can do. The first experience leaves the most vivid impressions. Everyday use. Users must understand that every interaction with your product valuable to them. No matter they use the product every day or once a year, users must feel that they control everything and can start from the same point where you left off last time.
They need to immediately see the advantages of your product. The system should tell you how it is arranged, so that users know what to expect and can make the necessary actions or to learn new things. Maintenance and update. Maintaining the product in working condition and install new versions should be no more difficult than everyday use.
Easy to manage product features to frequent use. A user who does not think about how well the product works, is a happy user. Whether it is the system administrator responsible for the performance of a whole company, or end user that solves its task, intuitive design elements operation. Remember that any person wants to spend extra time to support your product is in working condition.
Minimize the user interaction during the upgrade process and the possible consequences of his mistakes. When large-scale upgrades dont make your users guess what you added or what did. Warn about what will change or has already changed, let me know what happened and how it will affect them. Improving and expanding.
Any part of the product should be available through the API. Third-party developers add value to your product whenever they create new applications based on the capabilities of your product and the collected data. Make sure your API and SDK well-designed and written.
They should be based on the most popular usage scenarios of the product and to be simple enough for a quick start. API methods should be documented is simple and clear and contain information about all the features available to users. Featuring a handy tools for extension developers can work wonders with your product. To improve it with new features, plugins and custom settings to meet user needs.
Support. Help users the way they want it. Give them new knowledge and encourage them to share them. Support must accompany the user at all stages of interaction with the product. Support proactive and sympathetic, she meets a user:
When users turning to support, help them to quickly find what you need. Consider the habits of users and provide them with multifunctional tools that are always at hand. Guide them with thoughtful interactions and content that they were trained in, knew how to take the next step and acquired the necessary skills to achieve success. It is better to avoid mistakes rather than waiting when it will happen.
If your product has failed or has become unavailable, notify users of relevant information about how and when they will be able to get back to work. Find the best way to make these notifications target (read. “seen”) under each scenario of use. Support should help people to feel competent. Train users, and they will become experts.
Use simple language suitable for your target audience. Allow customers to leave feedback and share what they learned. Users often trust the advice, so, if possible, encourage the exchange of experiences within the community. Create for those who likes to try something new. Delight and surprise.
Earn trust. Remember that we are the brand. Earn money. Shows the best. Place the content according to relevance.
Respect other peoples time. Lets exactly what you need, and then offer more. Ensure consistency of use. (Currently not used).
Universal. Our message is clear, we pass them with a simple, useful and intuitive interfaces. Therefore, our services is not limited and always available. Convincing. Our tone changes from serious and authoritative to playful and fun. We sound natural and relevant, warm and human.
We attracted our audience in a convincing narrative. Authentic. We appreciate that people know us and trust us. We respect the design tradition of the BBC, and we continue, emphasizing the connection times. Innovative. We are experimenting with the design, it can surprise and delight. We try new things, but always keep the old audience behind.
Adequate to the moment. We are a reflection of the history of Britain covered current events as they are and enter them into the context of our history. Original. We differ from others in that we look to the future and not just recycle the current trends in design. We find a middle ground between mass design and beautiful anarchy. Assembled. All of our services and products form an integrated system and give those sensations which expect from them.
The same experience they can get as familiar and new ways. We connect people with common interests and experience. Local / Global. We appeal to all, but can see the faces of individual people. Our messages massturbate and localized. Modern and British. Our services are inseparable from everyday life in the UK.
They broadcast a modern British aesthetic, which extends far beyond state borders. We are alive and sometimes eccentric nature. Best. And last but not least the quality for us in the first place. Clear.
Individual recommendations and my own experience. There is no sense in which we all received the same recommendations, where to eat, drink or buy something. The list of such “universal” places may have seemed a breakthrough in 2006, but now it looks hopelessly outdated idea. We all like different things, so why should we see the same search results?. The continuous collection of data and its contextual application.
Our phones should learn about us, our tastes, social connections and preferences. And, using this information, they can help us learn about the world around us. If you love vintage clothing, the phone should tell you that around the corner awaits a rare find. If you find yourself in a new city, he needs to remember that your girlfriend strongly recommended that the window in the wall with fast food. If you love spicy food, the phone should advise which dishes you order for lunch.
Playful visual language. Inspire people to explore their own city, to amuse them a fun and playful design. Brazen icons, bright and deep colors, the logo is a hybrid of superhero emblems, and pins on the map. Do not interfere with the users focus on their work. The user needs to control himself.
It is possible to divert only what is important to him personally. Increase confidence through understanding. Inside the app and inside the team is very important to speak clearly, what is happening and why. Encourage productivity and communication in a fun. People feel part of the team when they can expect that each will fulfill their part of the work, and know that we are moving towards a common goal.
Do the design, which is quick, easy and helpful to interact with. Simple standard tasks must be performed immediately and without problems; complex problems must be solved efficiently and with pleasure. But the speed should not cause errors. Empower your user as the development of the product. People with any experience in Asana must be sure to use it correctly. No matter how much product he uses. Be consistent, standardize and add new when it is justified. Users should see Asana as both familiar and cutting-edge product.
Manifested in the language in which “Yandex” talking to the outside world. The interface is intuitive, speaks the human language and reflects the real world. Data is primary and must be transmitted without distortion. Workability. “Yandex” projects the image of magic technologies. Technology is constantly becoming outdated, so the interest of the audience should always be heated and produce new things.
It should be remembered that technology is not a goal but a means. Tell them it must be carefully. Most people might be interested in the internal structure, but to understand it, they dont want. The task of design is to correctly understand and present the technology. Unity. “Yandex” consists of a large number of services, but should look as a whole.
The lack of unity is welcome, if carry some ideology and controlled as a process. Send your speakers and front-end cases [email protected]