Bom, então vamos avançar exatamente para a construção do protótipo. Uma vez que você passou por todos esses critérios e faz sentido para você construir um protótipo de alta fidelidade, quais são os passos para construir esse protótipo. O primeiro passo, a gente espera que quando você chega no ponto de prototipar, de fazer um protótipo, principalmente de alta fidelidade, que você tenha minimamente já storyboard e as hipóteses que você quer testar levantadas. O storyboard seria algo, basicamente, como essa imagem que está aparecendo aqui na tela, que você pelo menos já mapeou o nÃvel macro, como vai ser o flow desse protótipo, quais são as telas da navegação, se o usuário for para lado ou para o outro como é que vai ser. Então esse é ponto que você já tem que ter mapeado nesse momento, e as hipóteses que você quer levantar, quais são as hipóteses e conflitos que você quer testar naquele protótipo. Se você ainda não tem isso, é exercÃcio anterior que você tem que fazer antes de começar o protótipo. Uma vez que você vai começar o protótipo, as chances são grandes de você querer dividir esse trabalho com mais alguém. Quando você for dividir, se você for dividir o trabalho, uma sugestão que a gente usa bastante aqui na Taqtile é que uma pessoa foque no roteiro do protótipo, o conteúdo, a redação, o quê que vai ter, e que outra pessoa foque na UI, na interface visual, tanto os wireframes como os elementos visuais, os elementos padrões que você vai ter cada uma das telas. Esse é bom jeito de começar dividindo o trabalho. Um exemplo de roteiro que a gente fez para aquele bot, que é um assistente virtual para médico, a gente escreveu toda a conversa que a gente gostaria de ter, como é que funcionaria a conversa entre o assistente e o usuário final, quais seriam as opções que eles teriam cada dos passos, se ele responder uma coisa para onde ele vai, se ele responder outra coisa para onde ele vai. Então é muito importante você ter todo esse roteiro, à s vezes é roteiro bem grande, é importante você focar bastante nisso, vai, à s vezes, facilitar muito o seu trabalho na hora de desenvolver o protótipo. E o pessoal de UI quando for desenvolver isso, é importante ter os style guides, os guias de estilo, que também vocês vão ver outras aulas aqui, os guias de estilo muito bem definidos, os padrões de layout, padrões de design, para não ficar uma tela inconsistente com a outra. Alguns atalhos que a gente usa bastante aqui na Taqtile, tem site que está aparecendo, o Sketch App Resources, que tem diversos exemplos grátis que você pode usar de sistemas completamente desenhados, dos sistemas de e-commerces inteiros desenhados, dashboards desenhados, enfim, você consegue reaproveitar muito design já pronto para você não ter que desenhar do zero. E que é pago mas que a gente gosta bastante aqui que é o UI Age, que tem designs de alta qualidade e style guides já prontos, para você pesquisar, enfim. Eles têm preços até que, realmente muitas vezes, bastante acessÃveis e você consegue, se você quer prototipar alguma coisa do zero, você já consegue sair com diversos exemplos de telas de aplicativos basicamente prontas para você só customizar seguindo a sua necessidade. Óbvio que você muitas vezes, aqui a gente também desenvolve do zero, a gente desenha do zero, mas se a ideia que você quer validar ainda não tem nada pronto, à s vezes é atalho para você conseguir ganhar bastante tempo. Essas são algumas dicas, alguns atalhos para você já sair com alguns elementos de identidade visual prontos. Uma vez que você definiu os elementos de identidade visual e o roteiro, você parte para o desenho das telas. Aqui também, a gente vai falar outras aulas sobre isso, mas aqui na Taqtile a gente gosta bastante do Sketch, a gente usa muito o sketch para fazer o desenho das telas, e aqui é exemplo ainda daquele bot que a gente falou de assistente virtual para médicos e pacientes. Então, a gente vai desenhando cada telinha, cada estágio de transição de cada uma das telas num protótipo de alta fidelidade, para vocês terem uma ideia da quantidade de telas que à s vezes podem ser desenhadas. Esse é protótipo que teve mais de 200 telas criadas, porque queriam muito validar a interação tela a tela. Obviamente que existem protótipos com muito menos telas, dez, 15 telas, à s vezes é mais do que o necessário para você validar o seu protótipo. Falando em transições. Depois que você criou todas as suas telas, que você já tem um roteiro, já criou as telas cima disso, aà sim, com tudo pronto, com todas as telas prontas, é hora de se preocupar com as transições e como o seu protótipo vai se comportar de tela a tela. Tem também uma aula que vem logo a seguir, de ferramentas para prototipação, o Leonardo vai falar muito mais sobre as diferentes ferramentas que vocês podem usar. Aqui na Taqtile a gente usa bastante o InVision e o Proton UI, mas esse é exemplo do InVision onde eu subi todas as telas desse protótipo, do nosso protótipo do bot, e algumas telas que têm transição automática a gente ajusta, qual é o tempo que vai demorar para uma tela fazer a transição, se isso é uma coisa importante que você quer validar na sua experiência. E depois você pode ir em cada pedaço do seu protótipo, das suas telinhas, e falar se o usuário clicar aqui para onde ele vai, eu posso criar facilmente novos pontos de navegação, novas áreas clicáveis, se o usuário clicar aqui para qual tela ele vai, se ele clicar ali se ele volta para a tela anterior, enfim, é muito fácil usar, por exemplo, o InVision, que é esse exemplo que vocês estão vendo agora, mas existem outras ferramentas de prototipação também. Uma vez que você está com a navegação do protótipo, a interação do protótipo pronta, é importante, como eu já disse antes, você planejar e praticar bastante o teste de usabilidade antes de fazer. Isso vai apontar diversas falhas no seu protótipo que você vai poder corrigir e arrumar, então é importante você testar exaustivamente com colegas, com pessoas que não têm familiaridade com o projeto, com a sua mãe, com amigos, enfim, antes de fazer o teste real você vai conseguir identificar alguns problemas no seu protótipo. Bom, e só para fechar a nossa aula de hoje, antes do teste, algumas dicas rápidas que quando você termina um protótipo e já está com tudo pronto para o teste final, quatro dicas rápidas para você pensar antes de avançar. Primeiro é, sempre que você for começar teste, lembra de falar, principalmente de prototipação de alta fidelidade, falar para o usuário que o que está sendo testado é o protótipo e não o usuário, que não existe certo e errado. É importante que ele perca o medo de errar e que ele te dê feedbacks genuÃnos em cima daquela experiência que ele está testando. O segundo é você reservar tempos para ajustes entre teste e o outro. O protótipo de alta fidelidade, se você percebeu algo errado no seu protótipo no primeiro teste, antes de vir o segundo entrevistado você tem tempo hábil para fazer pequenas correções. O terceiro é você sempre ter no seu protótipo de alta fidelidade alguns atalhos para áreas chaves do seu protótipo. Então, principalmente quando você está testando fluxos longos, é capaz que o seu protótipo quebre na metade do caminho, e você não quer fazer que o usuário teste tudo de novo, faça tudo de novo, então é importante você ter alguns atalhos e, caso o seu protótipo quebre, você consiga avançar para uma área determinada do seu protótipo onde o usuário parou. E o quarto, é a quarta e última mensagem, é utilizem protótipos de alta fidelidade também no dia a dia, porque testes formais com usuários finais podem ser muito estressantes, podem levar mais tempo e gastar mais dinheiro. Mas também o protótipo de alta fidelidade é um bom recurso para você testar no dia a dia de desenvolvimento, para você testar alguma transição, alguma coisa, principalmente com pessoas que não são do projeto, pessoas que, amigos, famÃlia, enfim, vão te trazer respostas muito boas no dia a dia para você tomar as suas decisões de design. Bom, é isso aà pessoal. Espero que vocês tenham gostado, e que eu tenha contribuÃdo para vocês criarem um protótipo de alta fidelidade. Até mais.
