Baixa, média ou alta fidelidade? Conheça as diferenças entre os tipos de protótipos.

Construir um protótipo é uma das formas mais rápidas, e com menor custo, para validar uma ideia, um conceito...

Tatiane Francisco

View posts by Tatiane Francisco
Designer de interface
Data de publicação: 05/04/2019
protótipo

Construir um protótipo é uma das formas mais rápidas, e com menor custo, para validar uma ideia, um conceito ou uma funcionalidade. Assim, é possível interagir, avaliar, alterar e aprovar as principais características de uma interface antes do desenvolvimento.

As coisas podem não estar tão claras para o usuário como parecem…

O protótipo pode ser parcial (normalmente utilizados para vender uma ideia, ou fazer prova de conceito), ou com um fluxo completo (utilizado para testes com usuários ou testes de lógica), e não necessariamente precisa ter um refinamento visual. O quanto um protótipo se parecerá com a versão final de uma aplicação é o que chamamos de “fidelidade”.

Segundo Deborah J. Mayhew (autora do livro “The Usability Engineering Lifecycle“), são quatro as dimensões que definem a fidelidade de um protótipo:

  1. detalhamento: a quantidade de detalhes que o modelo suporta.
  2. grau de funcionalidade: a extensão na qual os detalhes de operação são completos.
  3. similaridade de interação: o quão similar as interações com o modelo serão com o produto final.
  4. refinamento estético: o quão realista o modelo é.

Com base nisso, podemos classificar a fidelidade de um protótipo em baixa, média e alta.

Protótipo de baixa fidelidade

Um protótipo de baixa fidelidade é bastante utilizado em fases iniciais e exploratórias de um projeto para validar um conceito e decidir se uma ideia tem ou não valor funcional. Devem ser rápidos, rudimentares e baratos.

Características de um protótipo de baixa fidelidade:

  • Baixo nível de detalhamento.
  • Preferencialmente feito com papel e caneta.
  • Representa visualmente as funcionalidades.
  • Baixo custo.
  • Rapidez na prototipação.
  • Descartável.
Protótipo de baixa fidelidade para um web app
(Fonte: Grace Colbert, via Dribble)

Protótipo de média fidelidade

Esse tipo de protótipo é um pouco mais refinado que o de baixa fidelidade, mas ainda não necessita de uma preocupação estética. Também conhecido como wireframe, é utilizado quando o foco é validar a arquitetura da informação e a interatividade com os elementos da interface.

Características de um protótipo de média fidelidade:

  • Prioriza a hierarquia das informações e o fluxo de navegação.
  • Possui simulações simples de uso (interação com botões, por exemplo).
  • Pode ser feito com o auxílio de um computador, utilizando ferramentas como Balsamiq, Mockflow ou Draw.io, que já oferecem elementos prontos para a interface (como botões, campos de formulário etc.), agilizando a criação.
Wireframe de um site de agência de viagens
(Fonte: Robert Smith, via Medium)

Protótipo de alta fidelidade

Um protótipo de alta fidelidade deve se aproximar ao máximo dos aspectos visuais e funcionais do produto final, incluindo o conteúdo, fluxo de navegação e interações. São muito utilizados para testes e validação com usuários, ou para vender uma ideia, pois ver o produto “funcionando” costuma gerar fascinação.

Características de um protótipo de alta fidelidade:

  • Foco em aspectos visuais e funcionais da interface.
  • Permite navegação e interação similares à versão final do produto.
  • São desenvolvidos com o auxílio de softwares gráficos, como o Sketch, Figma ou Adobe XD.
Interaja com esse protótipo de alta fidelidade disponibilizado pelo Invision, que simula um fluxo de envio de e-mail e retorno à caixa de entrada.

Embora este tipo de protótipo busque atender às quatro dimensões de fidelidade definidas pela Deborah J. Mayhew, apresentadas no início do post, é importante ter em mente que o objetivo de um protótipo é testar a validade de uma proposta, e apesar de sua similaridade com o produto final, não deve, necessariamente, ser encarado como tal.

Um protótipo que precisa de refinamento… 🤭

Tatiane Francisco

View posts by Tatiane Francisco
Designer de interface

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

5 + 16 =

Posts relacionados

  1. Sobre a Dextra

    Somos especialistas em desenvolvimento de software sob medida para negócios digitais. Pioneiros na adoção de metodologias de gestão ágil, combinamos processos de design, UX, novas tecnologias e visão de negócio, desenvolvendo soluções que criam oportunidades para nossos clientes.

  2. Categorias

Scroll to top