Guias

Guia Completo de Prototipação em UX Design

Por Gabriel Sá e Farias, UI/UX Designer na Recruta Simples

O que é Prototipação em UX Design?

Prototipação é uma técnica muito utilizada na área de UX design para criar e validar soluções de forma rápida. Geralmente, os protótipos são criados depois da fase de pesquisa com usuários ou benchmarking.  Assim, você já conhece a dor do seu cliente e tem hipóteses para resolvê-la.

Os protótipos podem ter basicamente 3 níveis de fidelidade: baixa, média e alta. Isso tem relação com a proximidade do resultado final.

Níveis de Fidelidade de um Protótipo

Por exemplo, o seu objetivo é criar um site de empregos, mas inicialmente você tem apenas esboços no papel sobre como a página na web deveria funcionar. Nesse caso, o protótipo é de baixa fidelidade.

Mas se já tiver um mockup interativo, com estilos (tipografia, cores, tamanhos, posicionamentos) e fluxo de navegação definidos, o protótipo é de alta fidelidade. Tudo depende de quanto você está perto do produto final em funcionamento.

Dependendo do estágio do projeto e das pessoas que irão visualizá-lo, é possível usar estágios diferentes de fidelidade. E você também pode (e deve) usar mais de um nível de fidelidade no processo de criação.

Por exemplo, imagine começar um projeto ou criar uma nova funcionalidade em que alguns amigos têm acesso. Nessa situação, você pode adotar protótipos de baixa fidelidade.

Ao trabalhar um produto com clientes ativos e com uma equipe de desenvolvimento, faz sentido utilizar protótipos de alta fidelidade. Isso porque outras pessoas dependerão da sua entrega para o produto funcionar. Então, quanto mais detalhes, melhor.

A principal ideia dos protótipos é validar suas hipóteses de solução com o mínimo de esforço possível, sempre envolvendo as pessoas impactadas (clientes/usuários) e interessadas (desenvolvedores, gerentes de produto, investidores etc.). Dessa forma, você evita retrabalhos!

O que você verá neste guia…

Neste guia, pretendo dar uma visão geral sobre prototipação e explicar assuntos como:

  • Os tipos de prototipação e níveis de fidelidade;
  • Exemplos práticos de cada um dos tipos de protótipos;
  • Momento ideal para usar cada modalidade de protótipo;
  • As principais ferramentas para construir protótipos;
  • Como e com quem você poderá testar seus protótipos.

Prototipação em Baixa Fidelidade com Esboços

Essa é geralmente a primeira etapa da prototipação, mas nem sempre acontece apenas no início do projeto. O ideal é usar esses protótipos mesmo em produtos mais consolidados, quando são lançadas novas funcionalidades, por exemplo. Para fazer protótipos de baixa fidelidade, você precisa de somente 2 recursos: lápis e papel.  Por isso, eles são geralmente rápidos de construir e de descartar.

Imagem - Baixo Nível de Fidelidade de uma Interface

O legal dessa etapa é que pessoas de diferentes áreas e especialidades também podem participar. Inclusive, essa técnica é muito utilizada no começo dos Design Sprints. O objetivo é gerar diversas perspectivas de soluções, vindas de desenvolvedores, designers, gerentes de produto, vendedores, entre outros participantes.

Obs.: Antes de desenhar páginas com lápis e papel, é interessante mapear os fluxos de navegação usando técnicas como fluxo de usuários (user flows). Assim, você diminui a chance de esquecer de desenhar partes importantes do fluxo e deixar pontas soltas.

Como Testar Esboços? 

Para testar seus esboços de telas e fluxos, faça um teste de usabilidade simplificado. Essa iniciativa não precisa ser muito formal e pode ser feita com amigos e colegas de trabalho, caso não tenha fácil acesso a potenciais clientes. Nessa fase, o mais importante é conversar, ao mesmo tempo, com outras pessoas sobre o problema e apresentar o seu esboço de solução.

A meta do teste é identificar erros mais críticos em termos de proposta de valor (se você realmente está resolvendo o problema) e fluxo de navegação. Depois disso, você terá uma noção bem melhor do caminho que deve seguir para refinar os protótipos.

Prototipação em Média Fidelidade com Wireframes

Criar protótipos de média fidelidade é geralmente uma etapa intermediária. Esse protótipo é mais detalhado que desenhos feitos com lápis e papel, mas também não é tão refinado quanto um mockup interativo.

Imagem - Médio Nível de Fidelidade de uma Interface

Wireframes não são muito refinados visualmente e não têm problema algum. Geralmente, são em preto e branco e sem imagens, mas você ainda não precisa se preocupar com isso. O foco, nessa fase, é construir uma estrutura e definir a hierarquia da informação, o fluxo de navegação e os textos da interface.

Existe uma discussão no mercado de UX sobre a influência dessa etapa no processo de prototipação. Alguns designers defendem que ela pode ser pulada. Outros discordam da visão que wireframes não podem ser considerados entregáveis finais.

Para formar a sua opinião sobre a criação de wireframes, reflita sobre:

  1. Você conseguiria se expressar usando somente wireframes?

Ao construir wireframes, o ideal é não se preocupar com cores, tipografias, imagens e outros aspectos visuais. Se a solução usar padrões de design e não tiver interações muito inovadoras, provavelmente os wireframes serão suficientes. Mas, talvez, você não consiga expressar bem componentes e interações mais complexas.

  1. Os usuários conseguiriam entender esses wireframes?

Se o objetivo for mostrar os wireframes para seus usuários, analise se o nível de fidelidade já seria o suficiente. Imagine que seu usuário pode não ser familiarizado com tecnologia. Por conta disso, todas aquelas caixinhas cinzas, textos e botões podem ser bastante confusos.

  1. Os desenvolvedores trabalhariam em cima desses wireframes?

Na maioria dos casos, é melhor desenhar um mockup de alta fidelidade para entregar aos desenvolvedores. Dessa forma, eles terão muito mais detalhes sobre aspectos visuais e interações. Isso reduz falhas de comunicação e possíveis retrabalhos no desenvolvimento.

Mas sempre é bom analisar o projeto que você está entrando. Às vezes, somente os wireframes já são suficientes. Imagine os seguintes cenários:

Cenário 1: Você está trabalhando num produto maduro, com uma marca bem estabelecida e diversos componentes de interface já desenhados e validados.

Nesse caso, você e outros designers, com menos experiência na área gráfica, possam talvez criar somente wireframes. Isso porque os desenvolvedores já saberiam como implementar a maioria dos componentes.

Cenário 2: Você pega um projeto de um cliente que não tem muita verba para fazer o design, nem muitos recursos para redesenhar toda a UI do produto. Porém, esse cliente já utiliza algum framework como Foundation, Bootstrap ou algum template de dashboard.

Nessa situação, você possa talvez entregar somente wireframes para o seu serviço caber na verba do cliente. Assim, você poderá focar bastante na UX, sem se preocupar muito com a UI, que já estaria bem encaminhada por conta do framework ou do template.

  1. Você tem tempo/recursos para refinar os wireframes e transformá-los em mockups interativos?

Como os protótipos de média fidelidade são geralmente entregáveis intermediários, você deve considerar se (você ou outra pessoa) poderá dar continuidade ao processo.

Existem empresas que têm equipes de design maiores e separam os processos de UX design e UI design. Elas possuem recursos para ter profissionais especialistas nas duas áreas. Então, alguns podem trabalhar somente com wireframes, enquanto outros trabalham apenas com mockups interativos.

Em equipes menores, é mais comum pular os esboços feitos no papel para mockups interativos, pois os recursos são mais escassos, e os processos precisam ser mais ágeis.

Ferramentas Para Criar Wireframes

As ferramentas de criar wireframes geralmente apresentam algumas limitações, justamente para você não se preocupar com aspectos visuais. Elas tentam facilitar a criação de esboços 2.0, disponibilizando, inclusive, elementos como botões, tabelas e abas pré-montadas.

  • Axure

O Axure é uma ferramenta desktop paga que permite criar desde wireframes a mockups interativos de alta fidelidade. Essa ferramenta é focada em times médios/grandes e possibilita fazer documentações bem detalhadas.

  • Balsamiq

O Balsamiq é um recurso web/desktop pago focado na criação de wireframes de média fidelidade. Assim como o Axure, é uma ferramenta com bastante tempo de mercado, sendo uma das mais conhecidas.

  • UXPin

O UXPin é uma ferramenta web paga e também permite criar desde wireframes até mockups interativos de alta fidelidade. Essa ferramenta é interessante para times menores, por possuir um plano mensal acessível.

Como e com quem testar meus protótipos de média fidelidade?

Para testar seus wireframes, você pode fazer um teste de usabilidade, assim como nos protótipos de baixa fidelidade. Mas, dessa vez, o teste pode ser mais bem estruturado e feito com potenciais clientes.

O objetivo é validar questões como hierarquia da informação, fluxo de navegação e os textos da interface. Ao passar por essa etapa, você terá em mãos uma solução com uma estrutura sólida e evitará alguns retrabalhos na criação de mockups de alta fidelidade.

Prototipação em Média Fidelidade com Mockups

Geralmente, é a última etapa do processo de prototipação. Nela, você refina os esboços feitos em papel ou seus wireframes. Esse protótipo é mais conhecido como mockup interativo. Ele é chamado dessa forma, porque permite simular interações, como clique, toque e hover (passar o cursor por cima). Vale citar também que protótipos feitos com código (HTML, CSS, Javascript) também se enquadram nessa etapa de prototipação e serão explicados mais para frente.

Imagem - Alto Nível de Fidelidade de uma Interface

Ao contrário dos wireframes nos mockups interativos, a meta é desenhar a interface de forma mais realista possível.  É possível pensar em aspectos visuais como cores, tamanhos, proporções, tipografia etc.

Quando você estiver nessa etapa é muito importante avaliar padrões de design, de forma a reutilizar elementos e componentes da sua interface. Trabalhando com sistemas de design e instituindo padrões, você facilita a vida dos desenvolvedores e cria uma consistência (visual e de interação) para os usuários.

Ferramentas Para Criar Mockups

As ferramentas para criar mockups possuem facilidades para a área visual e de interação. Nelas, você pode trabalhar com vetores, usar diversas artboards no mesmo arquivo, inserir componentes reutilizáveis e criar links entre as telas.

  • Sketch App

O Sketch App é um recurso mais popular para criação de mockups interativos. Apesar de só funcionar para Mac, a comunidade de designers o utiliza para templates, criando plugins e publicando conteúdo sobre essa ferramenta.

Ela surgiu na época em que os designers usavam o Photoshop e outras softwares para fazer mockups. E, por alguns anos, manteve-se como o único recurso especializado para designers de interface.

  • Adobe XD

Depois de alguns anos do lançamento do Sketch, a Adobe desenvolveu uma ferramenta mais especializada para designers de interface. No Adobe XD, você executa as mesmas ações do Sketch, porém o programa funciona tanto para Mac quanto para Windows.

  • Figma

O Figma tem uma proposta um pouco diferente: ser uma ferramenta de design mais colaborativa. É uma boa solução para times com pouca verba, porque é totalmente web e tem um plano gratuito.

Bônus 1: Invision & Zeplin

O Invision e o Zeplin são recursos bastante úteis para entregar seus mockups para desenvolvedores. Neles, você sincroniza seus arquivos do Sketch/Photoshop para que os desenvolvedores peguem na web as cores, tamanhos e tipografias.

Esses softwares são interessantes, porque não obrigam os seus desenvolvedores a baixarem ferramentas de design.

Bônus 2: Abstract

O Abstract é uma ferramenta de versionamento de arquivos. Ele é útil quando você está trabalhando junto com outros designers ou precisa organizar diversas versões de um arquivo do Sketch.

Por exemplo, imagine que dois designers estão desenhando funcionalidades diferentes, usando o mesmo arquivo do Sketch. Em algum momento, eles terão que alinhar o que fizeram para manter o arquivo-mãe atualizado. O Abstract faz esse alinhamento de uma forma mais organizada.

Outro exemplo seria você trabalhando sozinho para um cliente que pede muitas alterações. Nesse caso, mantenha um histórico das mudanças realizadas para voltar a uma versão anterior do arquivo já aprovada.

Bônus 3: Bootstrap Studio

Como você pode perceber, existem muitas ferramentas direcionadas para designers de interface. Nem todas passam de simulações “estáticas”. Isso dificulta  executar os testes de usabilidade e passar o layout para os desenvolvedores.

Por isso, algumas equipes de design usam ferramentas como o Bootstrap Studio, que permite criar layouts com o código do Twitter Bootstrap. No geral, essa ferramenta é bem simples. Ela propicia você montar o layout da página por uma de uma interface drag & drop. Mas para fazer customizações, é necessário mexer um pouco no código HTML, CSS e Javascript.

Testando Protótipos de Alta Fidelidade

Para avaliar seus protótipos de alta fidelidade, você pode adotar o teste de usabilidade. Assim como nos wireframes, essa iniciativa pode ser estruturada e feita com potenciais clientes.

A meta é validar tudo que você aprovaria em um wireframe (hierarquia da informação, fluxo de navegação e os textos da interface), mais os aspectos visuais e de interação.

Se você estiver usando o Invision, vale a pena testar a ferramenta Maze. Ele permite fazer testes de usabilidade remotos usando o próprio mockup interativo do Invision, contabilizando a taxa erros, o tempo que o usuário levou para completar a tarefa e mais.

Após essa etapa, você terá a interface e as interações prontas para serem desenvolvidas. Após o processo de prototipação, a solução estará bem ajustada para seus usuários e dispensará os retrabalhos na parte de desenvolvimento.

Conclusão

Na prototipação, existem algumas etapas e as suas preocupações com o designer vão mudando ao longo do processo. No início, você precisa ser ágil e verificar se está indo para o caminho certo. Depois, passe mais tempo refinando sua solução até chegar bem próximo do que considera real e funcional.

O mais importante é sempre manter seus usuários e stakeholders próximos durante o processo. Eles vão ajudá-lo a construir uma solução que realmente resolva um problema.

Não se esqueça de que o processo de prototipação é cíclico. Então, sempre que achar necessário, pegue lápis e papel para voltar ao início.

Gabriel Sá e Farias é Designer de Produto no Recruta Simples e Fundador da 7bits, uma consultoria especializada UX/UI design.

Artigos recomendados: