Sketching & prototyping: are we losing time and money?

All problems are because of misunderstanding. And every mistake in the development process is really expensive. We asked in the title: are we losing time and money while creating a detailed clickable prototype?

A mistake is to commit a misunderstanding. - Bob Dylan

So if you are lazy to read the full article we can answer you right now - no, we are losing time and money in case of skipping a prototype process. A lot of our customers are asking - is it really a “must have”? Can we skip it? Can we start designing? Take my money and give me my pixel perfect .psd file! Yeah! We know that your goal is to save time and money and to get the perfect result in as short terms as possible. In fact, the development process can start from a sketch on the napkin. But if it goes about user experience, if it goes about some client-oriented and user-friendly interface - do not skip a prototyping.

How prototyping can help us to create a high-quality project?

A prototype can give us a pure understanding how the project will perform to a user. But the main thing is that prototype can show us what is unnecessary in our project. If you are working on a product that will have a lot of interactions, effects, current changes - prototype can save your life. It is much more faster to make changes in prototype, test it and rework with updated ideas, than to rework all pixel perfect .psd files. A prototype is flexible, easy to change and always valuable for all your team. Without prototype teammates will ask you a lot of questions like which interactions, in which case it performs like that, which condition of cursor while we are on this element and so on, and so on.. it can go further. Worseof all if your team is working in different countries and you are not their neighbour in office. Also if there is a time difference - it is becoming harder and harder to communicate and make a fast deal about details of interactions. Sure if you are professionals and your mates are close to you in the same office it is not a problem to make everyday stand-up to talk about all this stuff, but your stakeholders are not technical people. In many cases, they have no idea how it works. And here we are - prototype makes all your ideas and conceptions alive. Indeed, this is magic.

Preparation for prototyping

Every painting starts with a sketch. We do not mind a sketch as a fixed document, it can be some vision of a painter, that is going to create a new artwork. But he should be driven by some idea and he should have some sense of how it would look like or how it should affect a visitor of a gallery.

Sketching - is a preparatory essay that captures the idea of a product or a part of it in the most characteristic features. In painting, this is mostly a freely executed picture. In prototyping, it can be a sketch, wireframing and previous documentation. Very often functional requirement document can't give you a full picture about the future project. But if previous estimate document has a few sketches or links with some examples it can be really helpful for you as a designer and for your client as well.

Also, first sketches can give a start to a discussion about using some patterns. Roughly spoken it is better to make all mistakes on a paper at sketching stage. And we strongly recommend to do as many sketches as possible to filter all misunderstandings.

When we are sketching we are trying to put together all necessary content: logo, header, elements of functionality. While we are checking design strategy and choosing an interface decision sketch can give us a pure vision of future implementation.

Recommendations for interface sketching

  1. Every page should have few versions. Continue to sketch and try to make it as clear as possible with all necessary functionality.
  2. Do not pay attention to details. Easier said than done. Designers are always saying: there are no details in design because every pixel matters and all is a detail. But if it goes about colors or fonts - leave it, functionality is the first.
  3. Try to change locations of elements. Every second sketch should have a conceptual difference. Change a shape of element, size, form. Change the position. Make something that is unusual in the industry that your client’s product is from. Very often we can find a solution in the place that we had no idea about. Do the same with your elements. Turn it all wrong, shake it, put it together, then relocate one more time. It seems stupid but how can you know when you will find a solution
  4. Keep in mind the idea of purity. Space on a screen should give to your respondent some air to breathe. The user should have a pleasant feeling while he is launching some goal. Think about movement of his eyes on a screen. Just try to put yourself in his shoes. If your eyes are running from one corner of a screen to another - it means that your future user will likely forget about launching some deal. He will get a new job - to understand and to remember where the hell was a sign up or what this strange icon will do if I`ll click on it. The user should feel comfortable with his thoughts about elements. Absolutely true that good design is when you do not see any design.
  5. A sketch is just a sketch. Do not let yourself fall into uncontrolled abstract artistic rabbit hole. Your sketch can be really beautiful and nice but the sketch is for future prototype and prototype is for future design. And the design is for high quality of development workflow. Our mission is  to define good seeds from unnecessary rubbish.

Every change encourages us to clean a paper with a rubber. And be sure it is much more easier than to delete a few groups with a lot of layers. Also, sketching can help you to avoid unnecessary interactions. As a stage before prototyping, it is really useful for the development process.

Clickable prototype

Prototyping is an implementation of basic functionality for the analysis of the system as a whole. At the stage of prototyping with small efforts, we create a working system or minimum valuable product.

Some customers are wondering - why do we need to lose time and money for this new “unnecessary" stage of development? Isn't it just a part of designer`s ego? The prototype is just for fun, right? Unfortunately, no.

Experience of development can provide us with all possible information that we need to launch the idea and create a good product. Yes, prototyping is not necessary. Yes, we can skip it. Yes, we can jump into the development process with a hope that:

  • Bridge is not so high
  • Somebody will catch us
  • Dudes before us have jumped and survived so we will do the same.
  • Maybe this is just a nightmare and it will finish soon.

As you see, the overall picture is not so joyful. In fact, prototype is our insurance. It is a guarantee that development process will be more solid.

You are not a designer and you want to figure out why front-end need a prototype? Ok, it’s really a simple thing. The prototype is a life-hack to test a future project in few minutes of real user experience. Instead of long-read documentation and trying to communicate with the designer about elements and so on - development team will have an aссess to clickable prototype, that is showing all functionality and interactions. Wow! Front-end will see which elements are used and how they should work. Does it mean that front-end should not be a Nostradamus of mouse hover? Exactly!

Recommendations for creating a clickable prototype

On sketching stage, you find few ideas how to put elements on a page. Now at prototype stage try to use real texts. If you have no access or it is under security - try to figure out maximum info about style and nature of texts and find a similar one. You will need it for the better understanding of “page mood”. Very often style of texts can give you an idea which font to use. Also, mood of content will help you to decide how to use color indicators. Maybe context will need a minimum of emphasis.

Maybe It will aim you to create an extremely colorful interface. Nothing is bad if it meets and fits a business goal.

A prototype is really helpful to build a high-quality level of communication with stakeholders. All that is needed here is to explain your customer all possibilities of a prototype. You should have a solid manual to provide a customer with an understanding what mission prototype has. First screens will be drafts for sure. Feel free to change the position of text blocks, buttons and elements.

“Once you have the first draft, create multiple copies of your document and start playing with its hierarchy: how can you reorder elements to tell different stories, and which of these versions sound more natural to a human?” (1).

Filling with media content is another way to make your layout more detailed. Fill it with background images, pictures, avatars, icons. The prototype allows you to check and make subtle adjustments to interface solutions and Work out the interaction like "Live" hints, click interaction, swipe, scroll. Focus on working out the basic scenarios of an interaction of dynamic non-obvious elements. Do not waste time on what the programmers will understand easily. Pay attention to the attention. Seems like a tautology. But the first thing that designer should construct in a prototype is a difference between blocks of attention. Different types of operations need a different consistency of human attention. One thing we can do so easy - like an automatic sign up with some platform that has integration with a product, like Google, Facebook or Linkedin. And another manipulation needs a high level of concentration like filling a payment form with personal bank data. This is psychological aspect of design. Especially in prototype, you have an access to check how this block will affect user’s mind and condition of attention.

Next article will be about QA and Usability testing. Stay with us to learn more about the experience of development.

References:

1). Fabricio Teixeira.Storyframes before wireframes.more info here: https://uxdesign.cc/storyframes-before-wireframes-starting-designs-in-the-text-editor-ec69db78e6e4