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 é perigoso 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 construir. Não importa o quão diligente seja o seu negócio com a prototipagem, o processo real muitas vezes pode fazer ou quebrar seu produto final.

Como e por que construir um protótipo é frequentemente um mistério. Pergunte a muitos designers e eles inclinarão a cabeça como cachorrinhos confusos. 'O que você quer dizer? Basta fazer ', eles dirão. E é verdade: todos nós sabemos como criar um protótipo. Nós simplesmente não sabemos Como nós sabemos.

Isso é especialmente crítico considerando como os protótipos costumam ser o produto final mais valioso. Clientes e gerentes desejam Vejo o que você fez, seja um site ou um produto físico. Eles querem experimentar, 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 irá aprofundar em tudo que um designer precisa saber e fazer para conseguir isso.

Projeto de protótipo - Para que servem os protótipos

Os seres humanos são altamente visuais. Na verdade, 30 por cento do nosso córtex cerebral é dedicado exclusivamente à visão . Então, quando você vê um protótipo, a coisa mais importante sobre ele é que você Vejo isto! Quando o cliente pode visualizá-lo e entender todos os processos envolvidos com o produto, especialmente as áreas de contenção para testes futuros, aquele 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 um amálgama de todo o trabalho que veio antes em uma peça única, visível e funcional. 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ótipo (como criando esboços ), é fácil perder coisas e cometer erros.

Isso torna o trabalho para Como um protótipo é construído de forma extremamente valiosa, pois 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 implica , os protótipos não são finais.

Eles nos atrasam para nos acelerar. Ao reservar um tempo para criar um protótipo de nossas ideias, evitamos erros dispendiosos, como tornar-se muito complexo muito cedo 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 uma série de benefícios de alto valor, incluindo:

como eu uso o bootstrap

• Tornando-o real - Antes de qualquer protótipo ser construído, o produto é totalmente conceitual! Isso é bom por um tempo, mas eventualmente deve se tornar algo que as partes interessadas e usuários eventualmente entendam e apreciem. Um protótipo é o primeiro passo para passar do conceitual para o real.
• Resolva 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 hi-fis, 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.
• Detecte cenários não intencionais - Uma vez alguma coisa é 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: quando um produto tem um protótipo de qualquer tipo, os desafios de usabilidade tornam-se subitamente 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 for, você pode apostar que alguém vai 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 em guardanapos e fotos sujas no quadro branco raramente ajuda.

Como os protótipos são construídos com base em muitas 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 analise os detalhes fornecidos por seu cliente ou gerente:

1. Quais são os objetivos do projeto?

Comece com o quadro geral. O produto resolve uma necessidade real? Como isso resolve essa necessidade? Compreender o produto Utilitário é fundamental para fornecer qualquer tipo de solução viável.

2. Quais produtos competitivos as pessoas usam atualmente?

Um forte analise 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?

A compreensão dos dados demográficos e das necessidades do usuário fornece o contexto necessário para criar produtos voltados para o atendimento a esses tipos de usuários específicos e o atendimento de suas necessidades.

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

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

5. Existem precedentes visuais a seguir?

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

6. Quais são os resultados?

Definir as expectativas sobre as entregas e o processo é fundamental para seu planejamento e fluxo de trabalho. Cada projeto é diferente, mas se as entregas estiverem bem definidas, o resto do processo de design 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 os instrumentos de escrita de sua escolha, seja lápis e papel ou quadro branco e marcador. O processo de rascunho é semelhante ao de um escritor de escrita livre ou ao dedilhar de um músico; desenhe o que você sente com base em todo o trabalho que você fez com antecedência e considerando as peças abaixo:

CFO é responsável por quais departamentos

01 | Fluxos do usuário - Siga identificando os fluxos do usuário. Veja como os usuários alcançam seus objetivos e como eles interagem dentro do sistema.

02 | Entidades de informação - Cada fluxo do 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, em que interações estão envolvidos e como funcionam.

03 | Primeiros esboços - Depois de ter uma ideia de quem usará o sistema, o que farão e com que, é hora de ver como. Esboce seus fluxos de usuário - não há necessidade de criar o layout ainda, apenas resolva 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, então toda a estrutura e conteúdo é apenas para visualização, não para uso real.

Uma dica adicional é usar blocos de desenho , papel especialmente formulado ou ferramentas para criar 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 fazem os esboços aparecerem de forma mais limpa. Eles são extremamente úteis se você for uma gaveta confusa, uma vez que 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 quando um fluxo de usuário for concluído e o processo de conclusão desse fluxo estiver claro. É uma boa ideia alternar entre esboçar e construir wireframes digitais, principalmente para manter o processo criativo. Conforme você avança por mais fluxos, o produto parecerá mais concreto e você deixará de fazer esboços naturalmente.

Mudando para digital (protótipos de baixa a alta fidelidade)

Assim que houver esboços completos o suficiente para avançar, é hora de digitalizá-los. Quer 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 designs.

À 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-fis incorporem todos os três no nível mais alto.

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

____ reduz o tamanho de um banco de dados e facilita o trabalho com os dados.

A cada nova ligação e iteração, faça duas perguntas principais: Esta página leva em conta sua finalidade no fluxo maior de usuários? E a interação faz sentido (o que significa que o usuário entendeu como realizar a ação)? Fazemos muito essas perguntas. Quanto mais fazemos, mais provável é que cada nova iteração traga os protótipos para mais perto 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 as ferramentas de prototipagem UX, como InVision e Proto.io são muito úteis para criar protótipos clicáveis. Quando é clicável, torna-se fácil testar a usabilidade de vários aspectos, desde botões individuais a fluxos inteiros.

A prototipagem clicável se tornou 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 ele deve ser usado, tudo sem realmente construí-lo. Designers com treinamento em design de interação humano-computador (HCI), incluindo muitos Designers do ApeeScape , crie e teste regularmente com protótipos funcionais.

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 testados sem uma ação funcional.

Protótipo com Propósito

A beleza - e o desafio - da prototipagem estão em 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 tela em particular 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; ele é desenhado e, em seguida, criado ad hoc.

No entanto, mesmo que cada wireframe construído seja feito de forma inteligente, as 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ótipo: clientes, gerentes e até mesmo designers esquecem que os protótipos não são final . Eles são apenas um rascunho, uma iteração até a próxima versão. Tudo isso faz parte do processo de design 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? Caso contrário, é outra oportunidade de rascunhar uma nova versão.

• • •

Leituras adicionais no Blog de design do ApeeScape:

• eCommerce UX - Uma Visão Geral das Melhores Práticas (com Infográfico)
• A importância do design centrado no ser humano no design de produtos
• 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 Mágicas do Usuário

Compreender o básico

Como você faz um protótipo?

Os protótipos são feitos criando wireframes para cada tela, conforme determinado por fluxos de usuários individuais, dispositivos e requisitos técnicos, e uma compreensão dos padrões de design atuais. Os protótipos devem ser compreensíveis para os usuários, testáveis ​​e modificáveis.

O que é um protótipo clicável?

Um protótipo clicável é um protótipo digital construído com a intenção de permitir que os usuários cliquem nele para visualizar as interações e pontos de conexão para cada página, botão e comportamento.

O que é um protótipo funcional?

Um protótipo funcional, às vezes chamado de protótipo funcional, é semelhante a um protótipo clicável, exceto que, em vez de suportar cliques e toques, o protótipo oferece suporte a funcionalidade total, como a entrada de dados e interações mais poderosas (por exemplo, arrastar e soltar).