Aperfeiçoe seu processo de design de UX - um guia para o design de protótipos

O processo de prototipagem – desde a criação de wireframes simples até o teste de maquetes totalmente funcionais – é um dos conjuntos de habilidades mais potentes e poderosos que qualquer designer pode dominar. Também está repleta de perigos em locais de trabalho onde o processo é ignorado em vez de apenas “projetar um protótipo” como uma entrega simples para entregar ao próximo departamento a ser construído. Não importa o quão diligente sua empresa seja com a prototipagem, o processo real muitas vezes pode fazer ou quebrar seu produto final.

Como e por que realmente construir um protótipo é muitas vezes um mistério. Pergunte a muitos designers e eles vão inclinar a cabeça como cachorrinhos confusos. "O que você quer dizer? Você apenas faz isso”, eles dirão. E é verdade: todos nós sabemos como criar um protótipo. Só não sabemos como sabemos.

Isso é especialmente crítico, considerando como os protótipos costumam ser os produtos mais valiosos. Clientes e gerentes querem ver o que você fez, seja um site ou um produto físico. Eles querem experimentá-lo, inspecionar os vários elementos e entender o fluxo de trabalho. Eles querem ver “como funciona”.

Construir um protótipo não é suficiente; temos que entender o processo envolvido na construção dos rascunhos iniciais de um produto. Este artigo se aprofundará em tudo o que um designer precisa saber e fazer para conseguir isso.

Design de Protótipos - Para que Servem os Protótipos

Os seres humanos são altamente visuais. Na verdade, 30% do nosso córtex cerebral é dedicado exclusivamente à visão. Então, quando você vê um protótipo, o mais importante é que você o veja ! Quando o cliente pode visualizá-lo e entender todos os processos envolvidos com o produto, especialmente as áreas de contenção para testes futuros, esse protótipo ganha vida.

Então, o que é um protótipo? Um protótipo é uma ferramenta para visualizar uma miscelânea de trabalho de design interativo; com efeito, os protótipos (em quase qualquer estágio) são uma amálgama de todo o trabalho que veio antes em uma única peça funcional, visível. Essa representação visual demonstra o que o produto está fazendo em um determinado ponto, quais são os elementos interativos e como o produto funcionaria no mundo real.

Embora existam muitos mecanismos para os vários aspectos do design de protótipos (como criar esboços), é fácil perder coisas e cometer erros.

Isso torna o trabalho de como um protótipo é construído tremendamente valioso, uma vez que, de muitas maneiras, descreve como o propósito do produto é realizado. Não perfeitamente, e definitivamente não com precisão na maioria das vezes, mas como o nome indica, os protótipos não são definitivos.

Eles nos atrasam para nos acelerar. Ao reservar um tempo para prototipar nossas ideias, evitamos erros dispendiosos, como tornar-se muito complexo cedo demais e ficar com uma ideia fraca por muito tempo.

Tim Brown, CEO e presidente da IDEO

Uma maneira simples de pensar em protótipos é como um mecanismo para demonstrar a funcionalidade.

Essa explicação prática de como algo funciona tem vários benefícios de alto valor, incluindo:

• Tornando-o real – Antes de qualquer protótipo ser construído, o produto é completamente conceitual! Isso é bom por um tempo, mas eventualmente deve se tornar algo que as partes interessadas e os usuários eventualmente entendam e apreciem. Um protótipo é o primeiro passo para passar do conceitual para o real.
• Trabalhe um problema – Às vezes, temos um desafio de design sem solução. Como habilidade, a prototipagem é uma ótima maneira de visualizar o problema e apresentar soluções rapidamente. Se não funcionar, jogue fora o protótipo e tente novamente.
• Iterar – A prototipagem vem em etapas, mas o resultado é o mesmo: evoluir suas ideias. De esboços a alta fidelidade, cada nova iteração oferece uma infinidade de comportamentos e funções para testar. E com mais dados, podemos iterar de forma mais rápida e inteligente.
• Detectar cenários não intencionais – Uma vez que algo é visível, temos as limitações do nosso produto disponíveis para estudo, o que também fornece um melhor contexto sobre o que deveria estar lá... e o que não deveria!
• Detectar problemas de usabilidade – É aqui que muitos designers vivem: uma vez que um produto tem um protótipo de qualquer tipo, os desafios de usabilidade de repente se tornam fáceis de detectar e corrigir.
• Apresentação – Protótipos em qualquer estágio são um padrão para apresentação. Esteja você testando uma versão de uma página ou apresentando um produto a um cliente, um protótipo de alguma forma deve estar lá. E se não estiver, pode apostar que alguém perguntará onde está e por que não foi incluído.

Como iniciar o processo de prototipagem

Depois de receber um documento de requisitos de 50 páginas de um cliente, olhar para uma tela em branco pode ser assustador. Revisar pensamentos desorganizados de reuniões com clientes, esboços de guardanapo e fotos sujas de quadro branco raramente ajudam.

Como os protótipos são construídos com base em tantas outras informações, é importante reunir os detalhes necessários com antecedência para colocar a caneta no papel. Considere a seguinte lista de verificação e revise os detalhes fornecidos pelo seu cliente ou gerente:

1. Quais são os objetivos do projeto?

Comece com o quadro geral. O produto resolve uma necessidade real? Como resolve essa necessidade? Compreender a utilidade do produto é fundamental para entregar qualquer tipo de solução viável.

2. Quais produtos competitivos as pessoas usam atualmente?

Uma forte análise competitiva fornecerá uma imagem clara do estado do mercado para o tipo de produto, além do que os usuários de hoje esperam.

3. Quem é o público? Quais são seus objetivos?

Compreender a demografia e as necessidades do usuário fornece o contexto necessário para criar produtos voltados para atender a esses tipos específicos de usuários e atender às suas necessidades.

4. Que tipo de produto é e para que (dispositivo) serve?

Com tantas tecnologias e soluções diferentes, os designers de UX precisam saber como o produto será usado (aplicativo web, site responsivo, aplicativo móvel etc.), em qual(is) dispositivo(s) e como as diferentes versões coexistirão (se for o caso). ).

5. Existem precedentes visuais a serem seguidos?

Se o produto já existe e o projeto é para melhorias ou redesenho, é possível que existam alguns requisitos em consideração ao comportamento atual do usuário com o produto.

6. Quais são as entregas?

Definir expectativas sobre entregas e o processo é fundamental para seu planejamento e fluxo de trabalho. Cada projeto é diferente, mas se as entregas estiverem bem definidas, o restante do processo de design de UX tem uma chance maior de ocorrer sem problemas.

Desenhe seus protótipos

Com nossos dados disponíveis e organizados, o próximo passo é começar a desenhar. Muitos designers já terão uma ideia para o layout, estrutura ou até mesmo onde elementos específicos do design visual pertencem antes mesmo de desenhá-lo. Tudo bem, mas o objetivo dos esboços iniciais é explorar o espaço disponível para destacar o que é possível – e, mais importante, o que não é.

Reúna seus instrumentos de escrita de escolha, seja lápis e papel ou quadro branco e marcador. O processo de esboço é semelhante a um escritor freewriting, ou um músico dedilhando; desenhe o que você sente com base em todo o trabalho que você fez antecipadamente e considerando as peças abaixo:

01 | Fluxos do usuário – Siga a identificação dos fluxos do usuário. Veja como os usuários atingem seus objetivos e como eles interagem dentro do sistema.

02 | Entidades de informação – Cada fluxo de usuário mostrará algumas entradas e saídas do usuário. Identifique o que são, como se relacionam com o comportamento e as expectativas do usuário, com quais interações estão envolvidos e como funcionam.

03 | Primeiros esboços – Depois de ter uma ideia de quem vai usar o sistema, o que vai fazer e com o quê, é hora de ver como. Esboce seus fluxos de usuário - não há necessidade de criar o layout ainda, basta resolver a funcionalidade.

04 | Esboce uma estrutura rudimentar – Depois que seus fluxos de usuário forem esboçados, você terá uma ideia melhor do melhor layout para o produto. Isso incluirá conteúdo (texto, fotos, vídeo etc.) que aparecerá como caixas ou rabiscos básicos. Quando escritos à mão, eles não se ajustam ao tamanho, portanto, toda a estrutura e conteúdo são apenas para visualização, não para uso real.

Uma dica adicional é usar blocos de desenho, papel especialmente formulado ou ferramentas para fazer wireframes mais claros durante o esboço. Eles fornecem o layout básico para a janela de visualização em questão, são de baixo custo e, com o estêncil adequado, também tornam os esboços mais limpos. Eles são extremamente úteis se você é uma gaveta bagunçada, pois fornecem as proporções e linhas de grade corretas para smartphones e navegadores da web.

Esse processo pode continuar pelo tempo que você quiser, mas é hora de passar para a próxima etapa assim que um fluxo de usuário for concluído e o processo de conclusão desse fluxo estiver claro. É uma boa ideia alternar entre desenhar e construir wireframes digitais, principalmente para manter o processo criativo. À medida que você avança em mais fluxos, o produto parecerá mais concreto e você naturalmente se afastará do esboço.

Mudança para o digital (protótipos de baixa a alta fidelidade)

Quando houver esboços completos suficientes para avançar, é hora de digitalizá-los. Seja Adobe XD ou Sketch, Framer ou Flinto, ou algo totalmente diferente, criar versões digitais de esboços é o primeiro passo para formalizá-los. O foco, portanto, muda da adição criativa de elementos necessários para a organização de ativos e estrutura dentro dos projetos.

À medida que os protótipos se tornam mais práticos e os elementos mais estruturados, o produto ganha forma. Ao mudar para protótipos digitais, a fidelidade é determinada pelo nível de interatividade , design visual e conteúdo . Um protótipo pode ser de baixa ou alta fidelidade individualmente nessas áreas, embora os hi-fi incorporem todos os três no nível mais alto.

Considere a hierarquia no que diz respeito ao atendimento das necessidades do usuário. Cada esboço se conecta a um fluxo e história do usuário, e os esboços são o primeiro passo para determinar o layout e a estrutura de um produto. As ferramentas digitais de hoje podem acelerar muito disso — por exemplo, definindo elementos mestres que se aplicam a todas as páginas e modelos para tipos de página.

A cada nova ligação e iteração, faça duas perguntas principais: Esta página é responsável por sua finalidade no fluxo de usuários maior? E a interação faz sentido (ou seja, o usuário entendeu como concluir a ação)? Fazemos muito essas perguntas. Quanto mais fizermos, mais provável será que cada nova iteração aproxime os protótipos de um rascunho final.

Os protótipos digitais também são muito mais fáceis de testar, pois não são apenas mais legíveis, mas também mais rápidos de reproduzir e iterar em massa. É aqui que ferramentas de prototipagem UX como InVision e Proto.io são muito úteis para criar protótipos clicáveis. Quando é clicável, fica fácil testar a usabilidade de vários aspectos, desde botões individuais até fluxos inteiros.

A prototipagem clicável tornou-se especialmente popular nos últimos anos graças à facilidade de uso de programas como o InVision. É ainda mais valioso para dispositivos móveis, onde agora todas as principais ferramentas de prototipagem fornecem algum caminho para ver ou testar fios móveis diretamente em um dispositivo de teste.

Com algum conhecimento de engenharia ou ferramentas mais poderosas como Justinmind ou Axure, também é possível construir protótipos funcionais, que são interativos além de simplesmente clicar. Os usuários podem testar coisas como preencher formulários, realizar tarefas simples ou complexas e realmente usar o aplicativo como deve ser usado, tudo sem realmente construí-lo. Designers com treinamento em design de interação humano-computador (HCI), incluindo muitos designers da Toptal, constroem e testam regularmente com protótipos funcionais.

Os protótipos interativos são ótimos para testar animações, operações do usuário dentro do aplicativo e funções de nível superior que às vezes não podem ser testadas sem uma ação funcional.

Protótipo com Propósito

A beleza — e o desafio — da prototipagem está no processo. Podemos dizer o mesmo sobre quase tudo, mas os protótipos começam e terminam com um propósito. Sem saber por que uma determinada tela precisa se comportar de determinada maneira, como um recurso deve operar ou se os usuários precisam ou não de um funil, o protótipo feito não é desenvolvido; é desenhado e depois criado ad hoc.

No entanto, mesmo que cada wireframe construído seja feito de forma tão inteligente, perguntas feitas ao longo do caminho, com cada história de usuário relacionada levada em consideração e a arquitetura de informação usada como um mapa, ainda é possível perder coisas. Esse é o desafio do design de protótipos: clientes, gerentes e até designers esquecem que os protótipos não são definitivos . Eles são apenas um rascunho, uma iteração até a próxima versão. Tudo faz parte do processo de design de UX.

Portanto, ao construir seu próximo conjunto de protótipos, lembre-se de fazer pelo menos uma pergunta muito importante: isso produz o resultado desejado? Se não, então é outra oportunidade para redigir uma nova versão.

• • •

Leia mais no Blog Toptal Design:

• eCommerce UX – Uma visão geral das melhores práticas (com infográfico)
• A Importância do Design Centrado no Homem no Design de Produto
• Os melhores portfólios de UX Designer – Estudos de caso e exemplos inspiradores
• Princípios heurísticos para interfaces móveis
• Design Antecipatório: Como criar experiências de usuário mágicas