Os protótipos navegáveis e o charme da documentação interativa

Por Alessandra Nahra*

Navegar é preciso, já disseram. Principalmente, quando se trata de design digital: para a comunicação das interações, documentos estáticos não têm o mesmo alcance que protótipos navegáveis.

Protótipos são a materialização de uma ideia de forma rápida, para que possa ser aprimorada antes do desenvolvimento ou de ser replicada em larga escala. Pode-se dizer que é um experimento. Protótipos navegáveis são aqueles construídos de acordo com os princípios da matéria digital: ao contrário de documentos estáticos, no protótipo navegável você clica e – como diz o nome – navega.

Já falamos aqui sobre wireframes: documentos que comunicam sistemas de navegação, componentes de telas e hierarquia entre esses componentes.

Um dia, os wireframes todos viraram navegáveis. Nesse dia começaram a ser chamados de protótipos.

Lembro do primeiro IA Summit ao qual fui, em 2007, quando ouvi falar em protótipos navegáveis pela primeira vez. Feitos em código. Fazia sentido: era mais fácil explicar interatividade com um documento em que se podia navegar do que com desenhos estáticos que só eram compreendidos com especificações detalhadas. Mas isso queria dizer que necessitaríamos de um programador na equipe? Oh, céus.

Depois de passar pelo PowerPoint, Visio, Illustrator, InDesign e, há quem jure de pés juntos, até Excel, hoje em dia, há inúmeras ferramentas que permitem a elaboração de protótipos navegáveis de alta fidelidade (veja aqui uma excelente tabela que compara ferramentas para construir protótipos). A mais comum por aqui ainda é o Axure, que cria um HTML basicão e tem recursos avançados que possibilitam simular quase qualquer tipo de interação.

Mas protótipos navegáveis têm audiências e finalidades diversas, e os requisitos dos protótipos podem mudar de acordo com isso, por exemplo:

Protótipos para aprovação com cliente:

• Quanto mais conteúdo real, melhor.
• Sinalize os links que funcionam na cor azul.
• Se você colocar algum item visual – logotipo, foto, uma cor – o cliente vai começar a debatê-los. Por isso, evite.
• Depois que você apresentar, o protótipo provavelmente vai rodar pela empresa e será examinado sem você por perto para explicar. Por isso, inclua instruções de como utilizar o protótipo e explique a finalidade dele. Pelo mesmo motivo, inclua todas as observações importantes que não podem ser inferidas pela navegação.

Protótipos para testes de usabilidade:

• Sabe todos aqueles links em azul que você colocou para o cliente conseguir navegar? Para o teste, você tem que tirar toda a cor. Caso contrário, vai entregar o jogo para o usuário.
• Também ao contrário do protótipo para o cliente, para o usuário você pode incluir elementos visuais – como o logotipo e fotos. Ou pode testar já com o layout pronto.
• É extremamente importante que tenha conteúdo de verdade. Especialmente se a interface for a de um site não transacional, em que o texto precisa ser avaliado.
• Se houver algum tipo de transação numérica, procure utilizar resultados reais. Por exemplo, em uma tabela em que aparece o resultado de uma soma, esse resultado tem que ser correto (2+2 = 4) – caso contrário, o usuário pode ficar confuso e isso vai tirar sua atenção da navegação.

Protótipos para debate interno, layout e desenvolvimento:

• Para essa audiência, os protótipos podem ser desde bem básicos e rápidos, com o objetivo de validar as ideias e ir aprimorando, até altamente detalhados, para documentação final. Nesse caso, deve conter todas as regras, interações e especificações necessárias.

Agora, momento “conversa com os clientes”.
Caros clientes, o que deve e o que não deve ser avaliado em um protótipo:

Deve:

• Posicionamento e peso de elementos;
• Navegação;
• Rótulos (nomes de áreas e seções);
• Presença de tudo que deve estar na interface (essa é a hora de dizer se falta alguma coisa);
• Interações (por exemplo, o que acontece se o usuário erra o preenchimento de um campo em um formulário).

Não deve:

• Conteúdo;
• Cores;
• Imagens.

Um protótipo navegável é uma coisa mágica: tangibiliza a ideia da equipe e é a primeira visão de como o produto vai ser na “vida real”. Um viva às ferramentas de prototipação – e que bom que você nem precisou aprender código para isso 😉

(*) Alessandra Nahra é jornalista.