Um protótipo que vale mais de mil imagens

Time Neotix
Neo_tix
Published in
7 min readJun 24, 2020

Se uma imagem vale mais que mil palavras, um protótipo vale mais que mil imagens

Protótipos, para que servem?

Você sabe por que os protótipos são tão importantes nos projetos de UX? Então se prepara que a gente tem um conteúdo que vai te explicar detalhadamente o que é um protótipo, para que serve e como é feito.

Os protótipos ajudam a equipe a obter feedback e iteração mais rapidamente. Com ele, o designer pode entender o envolvimento que os usuários terão com seu produto ou serviço.

Um fluxo de trabalho de design que consiste em ideação, prototipagem e testes, ajuda empresas e equipes a descobrirem e validarem suas melhores ideias.

“A prototipagem é uma atividade essencial que gera colaboração, inovação e criatividade.”

O objetivo de criar um protótipo é estabelecer uma aproximação entre o design de um produto e os possíveis usuários, obter feedback rápido deles e a partir daí, melhorar ideia inicial.

Abordagens diferentes podem resolver o mesmo problema. Portanto, a criação de várias opções pode ajudar a equipe a ter uma visão mais ampla do problema que o produto irá resolver. Algumas delas podem estar relacionadas à sua aparência, como o melhor fluxo de tela para os usuários. Protótipos diferentes respondem a perguntas diferentes, então o ideal é testar muitas ideias para comparar resultados.

“A melhor maneira de ter uma boa ideia é ter muitas ideias” Linus Pauling

Tipos de prototipagem

Storyboards

“Não sei desenhar!" essa é uma das primeiras reação quando um profissional se depara com a necessidade de criar storyboard. Mas na verdade, um storyboard não precisa ser bonito, não é preciso ser um artista para fazê-lo. Ele precisa apenas transmitir uma ideia de maneira eficiente.

Não é necessário, por exemplo, que ele exiba a posição dos botões ou como serão as interações, ele deve mostrar como o usuário chegará do do ponto A ao ponto B.

Storyboards são usados para responder às perguntas:

  • Isso é uma boa ideia?
  • Estamos no caminho certo?
  • Isso resolve um problema real?
  • É algo que os usuários precisam?

Os storyboards levam o designer desde o início do problema até sua conclusão, desenhando todo o fluxo que os usuários farão.

Há algumas informações que você precisará descobrir no início:

  • O problema que você está tentando resolver.
  • As pessoas envolvidas no problema.
  • O ambiente em que eles enfrentam o problema.
  • Tarefa sendo concluída.
Storyboard

Na imagem acima, temos um exemplo de como um storyboard pode ser feito. Ele transmite a ideia principal em algumas etapas, indo do ponto A ao ponto B, ou seja, qual era o problema e como o usuário conseguiu resolvê-lo. Viu que você não precisa ser um artista para construí-lo?!

Os storyboards colocam a equipe na mesma página, ajudam a contextualizar melhor o problema e também começam a imaginar algumas soluções possíveis.

Protótipos de papel

A prototipagem de papel ajuda a organizar as ideias sem muito comprometimento, é divertido, rápido e fácil de fazer. A equipe pode começar com protótipos de baixa fidelidade usando apenas papel e tinta, é fácil criar e permite testar soluções ainda mais rapidamente. Protótipos de papel são uma ótima ferramenta para documentar as ideias iniciais, explorar uma variedade de layouts diferentes e também para envolver a equipe em uma discussão.

Quando um profissional está criando um protótipo de baixa fidelidade, tem menos comprometimento com ele, não se apega apenas a uma ideia, pode experimentar várias opções. Então se escolher um caminho errado, estará à vontade para voltar atrás e recomeçar.

Sua equipe pode trabalhar fazendo esboços de forma colaborativa em um pedaço de papel ou em um quadro branco, onde todos podem ver e opinar. Aqui você usará um dos conceitos dos storyboards: não precisa ser perfeito, apenas tem que transmitir a ideia corretamente.

Quanto mais maduras as ideias estiverem no papel, mais rápido você as fará no computador. É mais simples se comunicar e fazer testes desenhando em um pedaço de papel antes de usar o computador, onde as alterações são mais difíceis e demoradas.

Trouxemos aqui algumas dicas para ajudá-lo a criar seus protótipos de papel:

1. Trabalhe rapidamente usando componentes reutilizáveis

Se você estiver trabalhando em um aplicativo móvel, por exemplo, poderá imprimir algumas telas com antecedência, o que ajudará você a ser mais ágil.

O post-it é um ótimo material para ajudar a colocar as ideias do time em um protótipo, é rápido de fazer correções e muito fácil de substituir.

2. Adquira todo o material que sua equipe irá precisar com antecedência

Você precisa ter todo o material à mão: lápis, papel, post-its, canetas coloridas e tudo o que você achar necessário para trabalhar no seu protótipo.

3. Há ideias difíceis de simular?

Se houver algo difícil de simular, basta descrevê-lo em um lembrete e colocar em seu protótipo.

4. Misturar materiais

Você pode misturar materiais, não precisa se limitar a usar apenas papel e tinta para expressar uma ideia, pode usar madeira, isopor, papelão, notas adesivas e tudo o que for necessário para transmitir sua mensagem com clareza.

5. Fale a língua dos seus usuários

Para transmitir uma mensagem clara, seu protótipo deve conter palavras e terminologias comuns, mantê-lo o mais simples possível para que o usuário possa compreender sua mensagem imediatamente, vai ajudar bastante.

Se você quiser ver uma versão digital de seus esboços apenas para sentir como o fluxo se comporta, pode tirar fotos do protótipo de papel e usar um software como InVision ou POP (Prototype On Paper), que permite uma interação entre as telas, criando links entre elas. Isso o ajudará a visualizar e explorar as possibilidades de fluxo da tela antes de começar a construí-lo em um aplicativo gráfico como Sketch, Figma ou Adobe XD.

Os protótipos de papel nos ajudam a construir o conceito inicial da interface, não precisa ser bonito e não precisa ser perfeito, nossa intenção aqui é apenas construir um conceito inicial, não um produto final.

Protótipo de papel

Wireframes: Protótipos de baixa fidelidade

Um protótipo de baixa fidelidade não leva em consideração cores, tipografia, sombras, etc. O principal objetivo aqui é concentrar os esforços no planejamento da UX. A equipe explora como o produto funcionará, as interações na tela, quais etapas o usuário deve seguir para ir do ponto A ao ponto B. Isso pode incluir a posição dos botões, interações e as informações que cada tela pode conter.

Tudo deve ser pensado, porque a maneira como você organiza as informações em uma tela pode ser crucial para a compreensão do seu produto.

Wireframes

Protótipos de alta fidelidade

Nesta fase, a equipe começa a pensar sobre a interface do usuário, coisas como tipografia, cores, sombras são levadas em consideração, a ideia é criar um protótipo o mais próximo possível do produto final. Então, eles são construídos em aplicativos como o Figma, Sketch ou Adobe XD.

É possível criar protótipos digitais que parecem e se comportam como o produto final sem passar por um processo de desenvolvimento longo e dispendioso.

As ideias são exploradas criando uma experiência interativa para os usuários, onde eles podem navegar pelas telas, como se estivessem usando um produto pronto. Isso facilita a demonstração para as partes interessadas e para os usuários finais, além de validar hipóteses.

Um protótipo de alta fidelidade dará à equipe segurança para o próximo passo.

Protótipo de alta fidelidade
Protótipo de alta fidelidade

Validando e refinando

O protótipo de alta fidelidade ajuda a equipe a executar pesquisas de usabilidade para validar sua hipótese. Podem ser diferentes tipos de pesquisas: qualitativa e quantitativa , o que significa que pode se fazer perguntas e observar os usuários usando os protótipos.

Com os resultados das pesquisas, é possível avaliar as informações coletadas e melhorar o próximo design.

Os protótipos são ampliados com os feedbacks que a equipe recebe dos usuários, por isso é um processo de constante evolução.

Etapas do processo de design

Muito mais sobre protótipo…

  • Um protótipo é uma pergunta que você faz aos usuários.
  • É uma maneira de testar suas suposições mais rapidamente.
  • Serve como "quebra-gelo" para envolver as pessoas em uma conversa.
  • O protótipo é um compromisso baixo, você valida, aprende e aperfeiçoa suas ideias antes do processo de programação.
  • Essa é a mágica de validar suas suposições usando um protótipo de alta fidelidade, você pode conversar diretamente com seus usuários, executar testes de usabilidade, validar a hipótese e se errar, será um erro que causará menos custo financeiro e tempo de desenvolvimento.

Conclusão

Um protótipo é um modelo experimental de uma ideia, é uma maneira de dar forma e vida a um projeto, antes da sua finalização. Ajuda a entender o que um usuário real sentirá ao usar o produto, se isso agrega valor a ele. Você deve inserir protótipos no seu fluxo de trabalho, apresentá-los ao usuários e perguntar se eles gostam.

Por Kris Basque, Head de Design aqui na Neotix.

Nós somos o parceiro certo na jornada de Transformação Digital da sua empresa. Nossa equipe é formada por profissionais experientes, que integram conhecimento digital estratégico e operacional.

Para saber como podemos te ajudar a viabilizar a Transformação Digital, mande um e-mail para contato@neotix.com.br, ou preencha os dados abaixo.

--

--

Time Neotix
Neo_tix
Editor for

Usamos tecnologia para fazer transformação digital de ponta a ponta