Criando Protótipos: por onde começar?
Depois de horas de estudo, empatia com as pessoas, personas criadas, e casos de usos. É chegada a grande hora de se começar a desenvolver um protótipo de baixa fidelidade ou até mesmo um de alta fidelidade, mas até lá, vamos ter que passar por várias fases e estágios. Com isso, talvez o menor caminho para se começar algo é simplesmente ter um lápis e papel em vista e começar a desenhar suas ideias.
Realmente, algumas pessoas acreditam que o melhor caminho para se começar esse processo é desenhando a mão (sketches) — como o caso de Rachel Glaves. Por outro lado, outras pensam que é muito melhor você já começar por um wireframe — como o caso de Dan Brown. Contudo, outras pensam que é melhor você já ir criando/codando um protótipo final do seu produto/app/site para ganhar tempo e eliminar estágios — como o caso de Ryan Singer | o link é antigo.
Obviamente que cada um tem uma ideia ou o seu workflow sobre a melhor maneira de se criar algo — no nosso caso um protótipo. Mas, realmente existe um melhor meio de começar algo? Ou tudo isso (sketches | wireframes | mockups | protótipos) são partes do um mesmo processo? — Hoje nosso texto fala sobre esse processo criativo (prototipação ou a fase de implementação de acordo com Tim Brown, o cara do Design Thinking) e como são as suas diferentes fases e estágios de criação para se chegar a um protótipo final.
Em seu livro Sketching User Experience, Bill Buxton fala que o processo de design é um ciclo de criação/elaboração e redução: criação ou elaboração é a fase de gerar ou criar a maior quantidade possível de ideias diferentes; redução seria para filtrar as melhores ideias e então, refiná-las, adaptá-las ou fazer com que elas fiquem ainda melhor.
A natureza do design é um processo de criação/redução seguido de uma redução, um refinamento, como se fosse um funil (Paul Laseau). Ou seja, você parte de um conceito e passa pelo processo antes de criar algo.
Tim Brown fala disso em seu conceito de Design Thinking:
onde nós divergimos ideias para depois convergir nas melhores.
Entenda que o processo de design é um procedimento que faz parte de toda a concepção de algum produto, na prática o processo de design é constantemente repetido e o conceito de elaboração/criação seguido de uma redução/refinamento/adaptação, está presente em todos os momentos.
Portanto, é importante entender as diferentes fases desse processo e que o bom uso destas pode nos ajudar a economizar tempo e recursos (materiais impressos, financeiros, humanos, etc.). Estas fases podem estar divididas em Arquitetura da Informação (AI), Visual Design e por fim, um Protótipo Final (ou melhor, funcional). Cada fase apresenta alguns estágios internos.
Este grafo ilustra o conceito de elaboração/criação seguido de redução, refinamento. Assim a gente sai de um conceito (algo abstrato) para um protótipo funcional (algo real). Além disso, entenda que esse processo é a construção do seu produto, que passou por vários processos de refinamento/validação/adaptação para se chegar a um protótipo funcional (inspirado em Stuart Pugh)
Vamos entender um pouco melhor desses estágios mais adiante. Antes disso, É importante enfatizar, novamente, que esse é um processo em que se olha para trás para projetar o que vai vir pela frente e que isso não é uma sugestão de workflow, muito pelo contrário. Apenas uma descrição do processo como um todo.
Sketch | Arquitetura da Informação
Embora esse estágio seja o mais simples de todos, esse é o momento em que você pega um papel e uma caneta, e começa a desenhar suas ideias e como seria uma AI inicial. No fim desse estágio, com várias ideias você consegue, ao menos, visualizar as suas ideias de uma forma melhor. Com isso, começa a refina-las e prepara-las para o próximo estágio — no pior caso você não conseguir desenhar nada, ao menos escreva suas ideias, monte um pitch! Pode ser até um guardanapo.
Wireframe | Arquitetura da Informação
Os wireframes são os tipicamente conhecidos como protótipos de baixa-fidelidade, apenas o esqueleto do seu produto representado por caixas e elementos visuais que ainda vão ser trabalhados. O objetivo dos wireframes é de nos dizer o que vai ser apresentando, sem antes investir muito tempo na parte visual. Ou seja, é algo que vai te dar uma ideia visual de como o seu produto vai ser, mas ainda não é o final e não é nessa fase que trabalhos muito o aspecto visual.
Mockup | Visual Design
São peças que ainda vão ser trabalhadas, mas que já te dão um apelo visual sobre o seu produto. É importante lembrar que ele não é ainda o seu produto final, apenas uma maneira de visualizar ele (antes de se construir). Geralmente criamos muitos mockups para apps e sites e além do visual design, eles também podem ser usados para trabalhar a arquitetura da informação. Além disso, não é necessário trabalhar nas interações, mas sim no visual.
Sugestões para Mockups são o Balsamiq ou Sketch3 — além do PhotoShop e Illustrator.
Protótipo Funcional | Funcional
Nesse estágio, você vai ter um semi-produto final. Onde você pode realizar testes de usabilidade e recolher feedbacks sobre o seu produto, podendo assim avaliar e evoluir. Contudo, existem alguns casos em que não é necessário ter um apelo visual tão acabado ou bem apresentado, mas sim uma funcionalidade bem trabalhada e definida. Por outro lado, também existem casos que o foco é o visual e a interação, a funcionalidade ainda vai ser implementada, mas o conceito em si pode ser validado. Assim, nesse estágio é onde nós geralmente usamos o termo alta-fidelidade, pois quase tudo que você vê e/ou interage com, vai ser quase como se fosse o seu produto final.
Sugestões para protótipo funcional são o inVision ou Marvel. Maquetes e papelão também são válidos.
Embora trabalhar em um protótipo seja fundamental, precisamos perceber que nem sempre ele determina o sucesso do nossos produtos. O sucesso mesmo, vêm das pessoas que usam eles, de suas experiências. Se as pessoas estão felizes e/ou se elas conseguem superar suas necessidades usando nossos produtos/serviços — sem as pessoas seu produto não é nada.
Algumas grandes empresas pensam no processo de design como algo muito importante para se deixar de lado. Por isso, os processos de design estão sendo documentando por empresas como Google com o seu Material Design, a IBM com sua Design Language e a Apple com o seu iOS Human Interface Guidelines, como meio de ajudar a comunidade a ter um maior embasamento em relação aos seus processos e as suas respectivas tecnologias.
Por fim, deixo algo que é baseado em um dos meus filmes favoritos. Se tudo isso que eu falei não foi legal, você ao menos pode entender um pouco de como esse conceito é e foi usado na indústria de cinema. Segue um documentário de The Matrix, o making of. Tem várias coisas legais, mas se você não quiser ver tudo, vá logo para os 9min36sec e veja como o Sketche + Storytelling foi usado para fazer esse clássico.
Gostou?
Então recomenda para que mais pessoas tenham acesso a este texto 😊
