Web designer Dan brown on how to choose front-end solution through the definition of principles, concepts and main ideas. One of the most difficult tasks for the design in the entire history of my career, I received from the organization that helps it companies to manage risk. Mostly its activity is connected with components VIA open source.
However, these inexpensive and widely supported by a huge community of experts components often have a gap in the security system. The first task presented a difficulty because of the structure of the underlying product is a kind of a triangle of interrelated abstract concepts. To work out the problem, we have created a series of diagrams that helped us to understand it.
The result is a relatively simple prototype model of the overall structure of the application. Although we were hired to create a detailed design project, our client later admitted that did not expect that such work will be we, however, appreciated our efforts to simplify the underlying structure. Subsequently, these results have set the direction for all other processes in the company. The wording of theses may help to set the direction and to describe possible design solutions.
And such decisions will be global — that is, to reach the website or product. More detailed definitions will arise later. Although you will find that some abstracts may be quite specific and serve as a support when you choose.
Three points about design direction: If you take a tactical decision too early, can set a precedent, and not understanding how it will affect the next step too difficult to track the impact of low-level decisions at a specific goal or problem. Why is the button blue. There is no purpose which could justify such a decision.
Instead, along with the existing theses you will make a few low-level decisions and to use models in order to illustrate the effectiveness of high-level solutions. For example, you can come to the principle that the site should look friendly but not too informal. You can demonstrate this approach using the template design screen, pointing to this message with the word “Thanks!” is too formal “Thank you” or too familiar “Atta girl!”.
If you try to use different examples to search for big decisions, maybe it will lead to their rethinking, and perhaps you will discover places in a user experience that will require multiple options. Probably one color is not enough to reflect all that you need, or too imperious tone phrases not suitable for the decoration of some pages. Applying the solution, you are just asking yourself.
“Will this work?”, you also wonder. “Do I have enough knowledge to understand, will this work?”. That is only one step towards solving problems can open some additional information or, conversely, to cause more issues. As a result, the team can focus on the data obtained to determine the direction of product development.
Principles are rules that help designers to assess their design solutions. They represent specific guidance in the form of unconditional abstracts. While no set of principles can be exhaustive. Rules that can be applied to many different design decisions, should be open to interpretation.
In the industry there are no standards on how to formulate principles of design. So you dont break any regulations, if apply or graphics will present all in the form of a dialogue. Traditionally, however, the principle is one sentence, usually expressed in the imperative mood. “Do more with less” — Microsoft design principles. “Design for the customer and you must inculcate confidence” — Intuit.
“Use data to make and improve decisions” — principles of nonprofit organization Code for America. I like these principles, but they do not relate to a specific product or company. However, the principles are strongest when relevant for the particular product. “More than just the cells on the screen” — the Google calendar.
“Transitional interfaces are easier to learn and nicer to use” — MapBox. “Time is of the essence, so create a product for people on the move” — Windows. Sometimes principles consist of one or two words, like the final expression. “The principle.”.
“More contrast” is one of the ten principles Codeacademy. “Consistency” is one of the principles of interaction design Bruce Tognazzini. Sometimes simple wording should more in-depth description and examples. Most of all I love the principles of user experience design Windows.
They include questions for designers, they should ask themselves in relation to design solutions. Personalization, not customization. Does this feature the users to Express themselves. Do you understand the difference between personalization and customization. Do I need to make personalization a new feature or you can use already existing?.
Regardless of which approach to the formulation of the principles you choose, the language and structure should be consistent. In order to make them easier to remember and use. If one started with a verb — always start with a verb. If we start with the succinct phrase or handed the principle a complete sentence — keep this style.
If you transfer the principles of one word — well, you have a special place in hell. For example, I formulate the principles as a direct consequence of the fact that we found out as a result of research. I prefer the conclusions because they seem the most logical. “We learned that users often get lost in the system.
The conclusion here is that the priority of the UI designer must be a clarification of context”. Conclusion answer the question. “So what?”. After you collect a lot of data, youll need to explain why they are important.
Usually Im picking up this information in the label, which contains questions on the project, the answers I found, and the conclusion to which we eventually came. In the end, the principles and conclusions perform the same function, so I will not pursue the differences between them. In all cases they direct the designer as well as acting for him in the role of the marker. He can compare his idea with the principles and to determine how closely it adheres to the leadership.
For the formation of the principles of design there are no standards. Although the Internet and in books you can find a lot of offers. And Ill bring some of my own.
The principles should best be approached for a specific product. “Easy to use” — isnt agile principle, because it can be applied to everything. In the project for the organization of risk management, which I mentioned at the beginning, we have formed some of the principles.
In earlier versions of the product, many users complained that they could easily “get lost” in the interface, because it is not always able to keep track of what you are working on. This led to the formulation of a new principle. Always show the user context within the system, that they understand where we are and what you working on. Because of this, before you move any data to another screen or run dialog box for some actions, we began to think.
“Will the user understand where he is. How fraught, if there is a lost context?”. Good principles posed a direct challenge to the designers — they are forced to look again at their work. Yes, the principles make you a little nervous.
In the product for risk management the complexity of the structure necessitated the creation of an intricate and complicated design. Cluttered screens tried to accommodate every nuance, considering every detail. At the same time, the users constantly complained and said that they dont like such a complicated interface. It was important for us to find a balance, but because we have developed a new principle.
Show just enough information to have enough to make critical decisions — no more, no less. The ambiguity of this principle has led us to rethink what should remain on each screen as you move the user. “Maybe we are too much removed?”, “Is all that displays on the screen absolutely necessary?”. On the one hand, we wanted users well understood, at what stage are and what this or that function, but we didnt want page navigation was deafening, which was irrelevant for the current task.
And with each new debugging we approached the solution. Specific and provocative principle can be seen as a blow with a whip. “Do it, and do it that way.”. But really good things at the same time inspiring even more ambitious goals.
It opens up opportunities, encourages the research. Summarizing the presentation Stephen Hoefnagels from Microsoft in 2009, Luke writes Wroblewski. “Goals are the tops of the mountains, which are you trying to get. The principles [of design] is the road which you can walk to the top of this mountain.”.
One of the principles of product management my client were to constantly focus the team on bad news. On all screens there was information about the fact that today the it Department has gone wrong, how bad is it and what is being done with it. However, as with any product, use of the program was to bring joy.
In other words, we needed to find a balance between frustration and satisfaction that can arise from understanding the root causes and severity of problems. Then we developed a new principle. Gain the trust, honestly demonstrating risks and showing only really useful data. In other words, our goal was to provide the user with the ability to manage risk.
The principle has inspired us not just to mindlessly broadcast the bad news, but also to show the user that he still has something to fix. Principles based on research, lead to the creation of a really strong design. The worst factor here — subjectivity. If the principle appears as a result of personal preference of the Director or just because it reflects (ineffective) the work of the organization, the designers will simply ignore it.
It is critical that team was directly involved in all research — in this case, it will be able to help with the writing of the principles. And if the team will participate in creating the principles, it will take them. Thus, when designers are confronted with these principles, they will somehow remember the results of the study, which will be able to effectively integrate into the work.
Design principles user experience of Windows arose directly from the studies. Reading these principles, you can almost hear verbatim excerpts from user reviews:
You can argue that these principles no specifics. However, if you take into account the scale of the project — an operating system, it is possible to notice that they are quite provocative and inspiring. “Focus on the distracting elements, and not on the ability to find what you need” is a bold statement, since it offers to improve the design, not being tied to any particular solution. In other words, it opens up space for discussion.
One of my favorite scenes in “Mad men” (TV show about ad agencies in the 60-ies) — a presentation to Kodak in the first season. Kodak launches new product — ring damagesin, which facilitates the storage and display photoslide. Employees call it “the wheel” and recognize.
“Yes, we know that the wheel is not impressive technology.”. Creative Director don Draper (the main character of this TV show) explained that this product is important, not the technology — it is important to establish a connection with memories and emotions. Then, the Agency reveals its concept for this campaign is the carousel.
Defining the Central concept of the team (whether its advertising or web design) is one source of inspiration, a kind of template for the assessment of emerging ideas. While the principles can serve as benchmarks, only a concept can define the vision. If the Arsenal of both team potential. If the description of the slide projector to use the word “carousel”, the resulting metaphor will emit a certain sense.
The word “carousel” shows two ways to Express the big idea: Both these approaches can help to Express the big idea behind digital products and websites.
The purpose and basic function of interactive products offers a real opportunity to create metaphors. But metaphor is not the only way to Express the Central concept. For a project to develop one web application my team has expressed the idea in one sentence — “strength and flexibility”. Of course, that doesnt sound as easy as “carousel”. However, the phrase has caused the required feelings.
The app gave users a feeling that they can do anything. We also carefully thought out description of how users will experience the limitless power with this product: Users need to see timely updates of the status.
The application must be low barriers to entry. You need to provide the opportunity to experiment with styles when you create new content. We also described the meaning of the phrase “strength and flexibility” from the users point of view:
Complex interactive products only benefit from having a Central idea that describes how they work. First and foremost it means that we need to use the big idea to convey the underlying structure. For example, the shopping cart is a common metaphor thats often used in sites of electronic Commerce. However, it can be used not only in this area.
The idea of adding a shopping cart is a familiar metaphor that conveys the structure of the underlying website. For example, we have used this metaphor on the website to determine the orientation. Students clicked on “add profession add to cart” after evaluation.
There are other proven schemes to describe the structure of the site. For Internet applications, in addition to baskets, there are two common technique: Do I have to use these structures. Of course not.
But if your website uses one of those approaches, then you are the owner of the very big ideas around which revolves the rest of the functionality. As for the sites, which aim to provide content, an old scheme mainly relate to the way his organization:
It is not only a structure to categorize content, its the best, in my opinion, the starting point. Of course, none of them provides a complete design is just a nice clear diagrams that serve as support for global design. In other words, big ideas that describe how the product works. Send your speakers and front-end cases [email protected]