Prototipação: O que é e como (realmente) fazer

Entenda o que é prototipação e por que prototipar é uma das melhores maneiras de testar e validar suas ideias de forma barata e precisa.

 

Quando falamos sobre UX/UI, a prototipação parece ser um dos assuntos mais recorrentes. Por conta disso, muitas vezes essa fase acaba sendo subestimada: aprendemos uma ferramenta, criamos um processo e já esquecemos de retomar o assunto. 

Será que a forma que estamos prototipando é a mais rápida? A mais eficaz? Quantas vezes você já parou para reavaliar seu método? 

Assim como todas as fases de desenvolvimento de um produto ou projeto, a prototipação nos desafia constantemente a inovar. Se prototipar para você é a fase cômoda, já adianto: você está fazendo isso errado! 😉 

Antes de começar a avaliar o melhor método, vamos entender as bases desse processo.

O que é prototipação?

“O protótipo é uma versão simulada ou amostra de um produto final, a utilizada para testes antes do lançamento.” Jerry Cao, UX Content Strategist da UXPin

Resumidamente, um protótipo é uma das formas de se validar uma ideia. Dentre suas maiores vantagens, está o fato de que ele é barato e permite coletar feedbacks e aprimorar o conceito antes que seja entregue ao desenvolvimento. E a prototipação é a criação deste protótipo.

Quais são os objetivos de um protótipo?

Em um artigo publicado na Handbook of Human-Computer Interaction (1997) pelos designers da Apple, Stephanie Houde e Charles Hill, os autores definem 4 categorias de protótipos:

o que é prototipação categorias de protótipo

Esquema demonstrativo das categorias de protótipo propostas por Houde e Hill

a) Role prototypes (função)

São protótipos que possuem o objetivo de investigar o que um produto pode oferecer ao usuário. Descrevem como a funcionalidade da qual o usuário pode se beneficiar, sem dar muita atenção ao como funcionaria. 

b) Look & Feel (olhar e sentir) 

São protótipos com objetivo de validar a experiência com a interface do produto, refinando o direcionamento das interações. 

c) Implementation (implementação)

Protótipos de implementação buscam responder dúvidas sobre a viabilidade de implementação. Conseguimos fazer isso? Como essa tecnologia pode impactar na nossa performance? Essas são algumas das análises propostas nessa categoria. 

d) Integration (integração)

A categoria final é a união das três anteriores: Role, Look & Feel e Implementation. A natureza desses protótipos simula situações reais de uso em alta fidelidade, o que faz com que sejam mais caros e demorados de construir.

o que é prototipação esquema demonstrativo fabi

Meu esquema demonstrativo das categorias de protótipo 😀

Sobre os tipos e ferramentas necessárias para criar protótipos

Além das categorias apresentadas acima, podemos classificar um protótipo posicionando uma régua de baixa a alta fidelidade. Quanto mais baixa, mais fácil e rápida deve ser a construção daquele protótipo. Aqui, é importante compreender o momento e o objetivo do design.

Protótipos em baixa fidelidade 

Desenhos feitos a mão (Sketches) são a forma mais rápida e barata de tangibilizar as ideias. Esse tipo de protótipo pode ser utilizado em diversos momentos e contextos, principalmente se o produto ainda não existe, não há toolkit ou componentes digitais que podem ser aproveitados para testar a ideia.

O protótipo em baixa fidelidade também permite testar fluxos menores, arquitetura, assim como nomenclaturas (Oi, UX Writing!) e descrições. Se o objetivo é validar a experiência, o protótipo em baixa não é o mais indicado, uma vez que ele ainda é pouco fiel ao produto final.

  • É bom para: testar fluxos simples, coletar feedbacks rápido, validar texto (teste A/B), organizar as ideias.
  • Não é bom para: validar a experiência final, avaliar a usabilidade, validar tarefas complexas.
o que é prototipação protótipo em baixa de um aplicativo mobile

Exemplo de protótipo em baixa de um aplicativo mobile – InfoSec Institute

Protótipos em média fidelidade

Protótipos um pouco mais trabalhosos e que se aproximam melhor da interface final começam a depender de ferramentas mais complexas, como Figma, Sketch e InVision.

Wireframes, apesar de estarem caindo em desuso no cenário de desenvolvimento ágil de produto, entram nessa categoria. Já foram importantes — principalmente para a arquitetura da informação — quando sites começaram a se popularizar e o uso de interfaces digitais ainda não fazia parte do modelo mental das pessoas. Ainda são muito comuns no desenvolvimento de sites como uma etapa de validação do cliente.

  • É bom para: organizar as ideias, testar fluxos e tarefas, coletar feedbacks em tempo moderado, validar textos (teste A/B) e estrutura da interface.
  • Não é bom para: validar a experiência e usabilidade finais.
o que é prototipação Wirefeame de um site

Exemplo de Wirefeame de um site – Justinmind

Protótipos em alta fidelidade 

Protótipos em alta fidelidade buscam representar ao máximo a experiência final com a interface. Necessitam de mais tempo para serem produzidos, e é comum a utilização de mais de uma ferramenta para sua concepção. Algumas que já utilizamos na Take:

Desenho: Sketch, Figma, Adobe XD

Animação: Principle, Adobe XD, Quant-ux, Atomic.io

Fluxos: InVision, Figma, Quant-ux

  • É bom para: testar fluxos/tarefas simples e complexas, coletar feedbacks, validar copy, experiência e usabilidade, hand-off para desenvolvimento.
  • Não é bom para: cenários que necessitam de validação rápida de ideias em fase incipiente, e nos quais o guia de estilo e componentes do produto ainda não existem.
o que é prototipação protótipo em alta fidelidade

Exemplo de desenvolvimento de protótipo em alta fidelidade – Atomic.io

E como fazemos na Take?

Na Take, seja em qualquer cenário, avaliamos o momento do desenvolvimento da ideia antes de escolher o modo de prototipação. Dentro do cenário de desenvolvimento ágil, é muito importante que as validações sejam feitas de forma rápida e iterativa. No BLiP, já contamos com uma boa estrutura de Toolkit, o que nos permite criar protótipos mais fiéis e, ao mesmo tempo, de forma rápida. 

Agora que você já sabe como fazer e o que é prototipação, lembre-se: seja qual for a sua escolha, protótipos são insubstituíveis. Não importa a ideia: Você só vai descobrir se ela funciona ou não quando a tiver em mãos. Se quiser construir um produto de sucesso, prototipe antes!


fabi post ux design para chatbots

Fabiana Kauder

Designer por formação, pós-graduada em Design de Interação pela PUC Minas e estudante de Astrologia. Nasci, cresci e me construo na Take como pessoa e UX/UI Designer do BLiP. Defensora da igualdade e representatividade feminina na tecnologia, na liderança e onde mais ela quiser.

 

Leia mais:

Protótipos colaborativos: como prototipamos a evolução do BLiP em apenas 1 dia

Desafios e oportunidades de UI e UX design na era das interfaces conversacionais