上QQ阅读APP看书，第一时间看更新

Design, test, iterate, repeat

When you have a better idea of how you can design solutions for the UX issues that you have identified, it is time to sketch them using paper. Paper sketches help you to validate ideas in a fast and cheap way. In this stage, you shouldn't feel the pressure of sketching perfect lines and angles. Keep in mind that the idea here is to visualize the ideas and validate them:

You can also start from a whiteboard before the paper, and if you prefer perfect lines, you can also use some tools, such as rules and pencils (like the ones by UI Stencil – www.uistencils.com). You can also use paper templates and different colors to represent different types of interaction:

And use the tools by UI Stencil – www.uistencils.com like this one:

Use these sketches to validate your idea by doing quick guerrilla tests. Use this feedback to iterate and go to digital wireframes.

You can basically do three kinds of wireframes: lo-fi, mid-fi, and hi-fi (which means low, medium, and high fidelity). For lo-fi you will have a very plain wireframe, using only simple lines and a variety of grey colors. You can use, for example, MarvelApp, FluidUI, Balsamiq, or many others:

Lo-fi prototype using Balsamiq

The interesting thing about using these softwares is the possibility to create mockups and clickable prototypes, which you can test and validate. The app Marvel POP, for example, allows you to use your paper sketch for mobile versions to create navigatable prototypes very easily:

Navigatable prototype for mobile using Marvel Pop

It is important to do another round of tests, and again to validate the flow, the features, and then iterate again. You can either iterate your lo-fi wireframe, or do it by designing a mid-or hi-fi wireframe. These two levels of wireframes can be a little more elaborate and use elements that could close or be used in the final design. But don't feel the pressure to do so. The idea here is still to test and validate the idea before the final version is coded.

For mid or hi-fi wireframes, Sketch App and Axure can be good options. These are being more widely used by UXer more recently. The difference between them is that with Axure, you can also create clickable prototypes very close to a real website or app, with complex functionalities. With Axure you can also easily visualize and create the sitemap, which will be useful for the documentation that you might need to create to share with the Dev team and UI designers (they will need it to be able to work). We will talk more about it in Chapter 10, Implementing UX Solutions:

Mid-fi wireframe created by using Axure

Sketch App has been used by a large number of designers, and it is known for being a really flexible and easy software to use. You can easily create great mid, and hi-fi wireframes. Another great advantage of Sketch App is the great number of templates and source elements that you can find, such as on the Sketch App Source website. You can also find countless plugins and extensions available for Sketch App:

Wireframe created by Euler Araujo Silveira

The downside of Sketch App is that you will not have the option to create clickable prototypes. However, you can use prototype tools to do it, such as the Invision App, which is easily used together with the Sketch App:

Clickable prototype on Invision App with screens created by using Sketch App

A great online tool that allows not only wireframing and prototyping, but also runs remote tests, is FluidUI. Another interesting advantage of FluidUI is being able to see the flow and connections created between the screens. They offer their own library for elements, but you also can upload the screens designed by using different softwares:

With FluidUI you can not only run online tests, but also see a high level of your project

Clickable prototypes are very useful to test and validate flows and functionalities. You don't need to have a full clickable, which would be really time-consuming, the suggestion here is contemplating specific and main task flows to be tested and iterated.

Keep in mind that the advantage of having a clickable prototype is not only to validate the flow and features, but you can also present the initial idea to your stakeholders, clients, and also use it as documentation to show to your Dev team, to let them understand the flow more easily.

After designing the potential solutions, testing and iterating a few times, you will feel confident about choosing the best ideas to be implemented. Just be careful to not keep this cycle running forever, it is OK to keep testing and iterating the solutions live.