How to maintain a clear vision with an abundance of new ideas and how to experience ideas in real life? There are many ways to detect useless ideas, and one of the key methods is prototyping.
The prototype is a completely indispensable thing for startups. Especially when a person, who is relatively far from designing interfaces and design of digital projects, acts as an ideological mastermind in it.
Perhaps, in the head of the majority appears an image of paper sheets with drawn interface elements on them, and a happy team, sitting at a round table in a spacious meeting room.
Well, what could be the harm from a paper prototype? That’s right, any! Because the paper prototype is not a prototype. With the same success, I can say that I have a “neural” prototype in my own head. A prototype that is always with me. I have a lot of them. I twist these prototypes in my head all the time: when I go to the toilet in the morning or walk the dog in the evening.
But if to be serious, the prototype is a thing that works with scenarios, thing what designer can show and, on the basis of what, decisions can be made. This is a plan that helps to understand what is in the service, why it is there, and how it works.
Paper is for a sketch. Paper sketches allow to capture ideas, structure them and discuss with colleagues. And that’s all. The paper gives a false impression that a true solution has been found.
However, you should not make a very common mistake — to start prototyping too quickly and spend time creating unnecessary screens and elements in the prototype, before you have thought carefully about and planned the service. Use paper for the necessary purposes:
- decide which screens will be included in the prototype,
- arrange the main screens and interaction elements by importance,
- write all customer comments and recommendations based on discussion and planning results.
There are much more concepts associated with prototyping: the mockups (colored), the wireframes (which are just gray), prototypes (which are gray plus clickable), and so on.
Many prototyping services exist on the market. Paid and free. Desktop and cloudy. Monsters and widgets. But the store is large, and the goods in it can be divided into only 2 groups: bags for garbage and garbage for bags. And while one choose the service and decorations for the prototype, it can take time, a lot of time, before all the pros and cons of idea or service are understood.
Therefore, do not invent a bicycle — a gray clickable model is what could make your Client happy or sad, but very quickly and without the expense of large resources.
The main advantages of prototypes are visibility and relative cheapness. You can click your future project with the mouse, even before graphic design, coding and programming. The finished prototype can be tested on the necessary audience that will give an answer to the question whether the service and solution solve the particular tasks and whether the idea has a chance for implementation.
Gray vs color
One of the main trends is the combination all in one — tools for prototyping and design. Such programs appear more and more, and their possibilities are steeper. Particularly advanced tools can create pages that are as close as possible to the future digital service: with color pictures, animations, and work links. This is a good and correct trend.
But the reverse side of this phenomenon- such “prototypes” cause the peculiar duckling effect. This is when a person gets used to what it saw first — in our case, to the prototype. In the future, the designer becomes extremely limited in the choice of solutions, creativity and a set of moves. Yes, and any diversion from the prototype can be perceived poorly by the Client, who got used to the first seen solution.
There is another duckling effect:
You all know the stories when the baby ducklings follow around humans because they are genetically programmed to “imprint” on the first creature they see (presumably their mother, but not always–see cute duckling imprinting video here). Because of this interesting phenomena, the name “duckling effect” is sometimes used to describe when humans unwittingly follow other humans’ behaviors.
Receiving a prototype for approval, Clients begin to worry that in the final design everything will be just as gray, dry and limited. And the designer needs to be able to work with the major Client concerns. And, additionally, the Client needs to understand the process before starting work.
Concern 1: It’s a waste of time.
Argument: Many tasks seem simpler before work has begun. The prototype is a great way to understand in time that the project is too expensive or not implementable. The prototype is much clearer and more capaciously describes the digital service than the textual Technical requirements — it is better than the 80-page of Technical requirements, in which no one understands anything and does not want to read.
Concern 2: Standard grid
On the pages of Awwwards everyone can find a lot of projects with a non-standard layout, but in the prototype most likely there is a clear linear structure.
Argument: Explain to the client that he should not worry. Ask him to tell about his visual preferences before the next stage (mindboard — a discussion of good designs examples fit the project). But in the current phase, it’s better to focus on the visual structure of the service generally.
Concern 3: Standard colors and fonts
Clients may like colored backgrounds or large typography — it seems more expressive and memorable. A prototype in grayscale with standard fonts — how it so?
Argument: While there is no design concept with a set of colors, it is senseless to color the prototype: the color will distract from the elements and functions of the project. With fonts it’s the same: standard headsets are used on prototypes in order not to detract from the meaning of text blocks. Remind the Client that the right of choice will remain with him, that at the stage of creating a mindboard, you will talk to him about his color preferences and offer options for font styles.
Concern 4: Standard Blocks
As a rule, prototypes use rectangular blocks (with rare exceptions — if some forms can be peeped in the Client’s corporate style).
Argument: The simpler the shape of the blocks, the easier it is to perceive the structure of the page — therefore, most prototypes use rectangles. But this does not mean that the blocks on the layout of the service itself will be the same.
Concern 5: Location of blocks
Clients often perceive the first proposed option as basic and exceptional, as well they may have their own understanding of the structure depending on the audience or the specifics of the market.
Argument: At this stage, it is important to determine which blocks to put above, which ones below, and which to hide in the spoiler. It depends on the priority of the information. At the prototyping stage, it is cheaper and faster to change the order of the blocks. But on a released project it will be somewhat more difficult. However, thinking about priorities on a prototype is the right strategy.
Concern 6: Uninteresting content
On the prototype, the texts are approximate: somewhere template text, somewhere descriptions from the old site.
Argument: Such content (titles, descriptions, sometimes icons) does not affect the structure of the page itself, and it can be changed without serious consequences even after the launch of the project.
Sometimes textual content really determines the structure of a project: this concerns promotional pages for products or corporate websites, where you need to talk about work processes or the intricacies of production. In this case, such content (infographics with facts and figures, a detailed history and other specifics) is better to prepare ahead of time. If this is the case, ask the Client to provide the content in the form convenient for you, or give time to develop it, before the prototyping stage.
The prototype helps the Client to formulate his requirements — when the project takes shape quickly and clearly before its eyes, it becomes immediately obvious does it require adjustments and amendments. The Designer, in turn, willingly makes changes, because it is simple.
But do not forget that for the perception of even a deeply developed prototype, abstract thinking is necessary. Clients-visuals sometimes do not perceive the prototype and can only work with the design.
And in short
What do the prototype and Analgin have in common? They both relieve the headaches of designers and Clients. In different situations, low-detail or high-precision, static or dynamic prototypes are appropriate- but there is no definite answer as to what a prototype should be. You can spend half an hour on a prototype, use a pencil and a free program, or you can make prototype months using cool programs and creating a complex system that will emulate users and the server. In different situations, different approaches are needed (and possible), but it is obvious that a prototype is a working tool that can be changed during the project development process. Significant changes may be made to it really easy.
What you need to explain to the customer:
- A prototype is a quick way to understand that a project is too expensive or not feasible.
- Creating layout-design can seriously differ from the creation of the prototype;
- We don’t play with fonts and color — black and white prototypes with standard fonts are more productive;
- The shape of the blocks from prototype to layout can vary depending on the design concept;
- It is best to think about the location of the blocks, as well as their absence and availability, at the prototype stage;
- The content in the prototype is approximate, and if it does not affect the structure, it can be changed. Content that influences the meaning of the project is best prepared in advance.
What the designer should understand itself:
- You should not take a more or less complex project if the Client refuses to develop a prototype first. This can lead to delays in the timing due to the fact that the client thought differently about the design and arrangement of the elements, and the result could be different and you will have to redo everything;
- The client can come up with new thoughts and ideas when he sees a prototype of a future project before his eyes and able to perform simple actions with it;
- A big plus of prototyping is that all project participants have a clear idea of what it will be located and what to consist of. The designer knows what to draw, the Client is not surprised then by the design he has seen, the manager can always rely on prototypes (and of course Technical requirements) when communicating with the Client;
- With proper prototyping significantly increases the likelihood of adopting a design concept.
Thus, your first priority as a designer is to explain to the Client the importance of prototyping.