Protótipos são poderosas ferramentas de design, que incentivam a visão e manipulação de representações da UI, úteis tanto para os usuários entenderem o que precisam como para os designers saberem o que projetar. Com os protótipos, uma equipe de design pode imaginar cenários específicos, testando-os.
Normalmente, protótipos são limitados, já que enfatizam um conjunto de características específico. Ah, também pode vir em muitas formas; não dá pra simplesmente dizer qual o melhor tipo de protótipo para cada ocasião. Em geral, o custo de criar o protótipo é que define qual tipo usar. Podemos ter protótipos em folhas de papel, ou pedaços de papelão pintados; talvez uma coleção de componentes de metal com cabos e fios à mostra; ou até uma simulação em software, interativa.
Protótipos servem para discutir e avaliar ideias; são considerados, em essência, uma ferramenta de comunicação, entre designers e usuários, ou entre membros de times. A simples construção de um protótipo encoraja reflexão, sendo uma ferramenta imprescindível em qualquer processo de design. Os protótipos respondem perguntas, testam a viabilidade de certas ideias, e define se essas ideias estão em sintonia com o restante do design.
Protótipos de alta fidelidade (High-Fidelity)
Esse tipo de protótipo tem muito mais a cara de produto final, normalmente oferecendo alguma funcionalidade adicional. Por exemplo, um protótipo de um módulo de um sistema web já desenvolvido em Javascript, interativo e acessível em um endereço web válido.
Há um espectro amplo entre baixa e alta fidelidade em protótipos. É comum que eles evoluam em vários estágios de fidelidade durante o projeto, em ciclos projetar-avaliar-reprojetar.
Um dos potenciais problemas com protótipos de alta fidelidade é que o resultado parece para o usuário como algo muito próximo do final, o que pode levar a uma limitação no feedback.
A figura abaixo sumariza potenciais vantagens e desvantagens dos níveis de fidelidade dos protótipos.
Um nível intermediário entre baixa e alta fidelidade é o que normalmente é chamado de wireframe, oferecendo, usando ferramentas de design, um rascunho geral de elementos padronizados (botões, menus e rótulos), com alguma indicação de navegação. Em muitos projetos de software, este é considerado o último estágio de prototipação.
Ferramentas de prototipação
Muitas ferramentas digitais são usadas na prática por equipes de design, principalmente durante a prototipação, em variados níveis de fidelidade. Muitas vezes, até protótipos de baixa fidelidade são produzidos em ferramentas interativas, para que haja uma interação mais precisa - apesar disso, muita gente prefere a interação em grupo provocada pelos protótipos baseados em papel.
Ferramentas comerciais que dão suporte para a criação de wireframes ou mock-ups são muitas. Apenas algumas:
- Sketch (https://www.sketch.com/)
- Figma (https://www.figma.com/)
- Adobe XD (https://www.adobe.com/products/xd/)
Uma lista mais completa pode ser encontrada aqui: https://www.uxdesigninstitute.com/blog/best-prototyping-tools-for-ux-designers/
No Figma, por exemplo, é bem simples transformar imagens estáticos em protótipos interativos, sem exigência de conhecimento em programação. Os elementos de UI são conectados através da seleção de interaçoes e animações; o resultado pode ser “executado” em um aplicativo do próprio Figma ou em um navegador web.