Prototipação em UX Design: O Guia Completo para designers
Prototipação é uma técnica muito utilizada na área de UX design para criar e validar soluções de forma rápida.
Publicado em 24 de fevereiro de 2022
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.
Neste guia, vamos 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.
Acompanhe com a gente!
Glossário
O que são protótipos?
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! 🙂
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.
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.
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.
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.
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.
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.
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
O UXPin é uma ferramenta web paga que permite criar desde wireframes e 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 Alta 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.
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
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.
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.
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.
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.
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.
Desenvolva a sua carreira em UX
A Awari é uma plataforma completa com mentorias individuais, cursos com aulas ao vivo e suporte de carreira para você dar seu próximo passo profissional como UX Designer.
Conheça nossos cursos de Design, com intensivos de UX Design, UI Design, User Research, UX Writing. Saiba mais sobre a nossa jornada personalizada e materiais complementares feitos por especialistas no mercado.
Artigos Relacionados
Confira abaixo mais conteúdos sobre o tema
Awari e Fluency: A Revolução da Educação Começou
Fluency e Awari estão oficialmente juntas e prometem transformar...
Requisitos do sistema para design 3D
Os requisitos do sistema para design 3D são as...
Design de UX: Como ele pode te ajudar a conquistar o sucesso
O Design de UX desempenha um papel fundamental no...
