OS DETALHES QUE FAZEM O DESIGN
Este é um texto sobre os detalhes que realmente fazem o design acontecer e porque precisamos nos preocupar com isso.
A palavra design não é novidade e apesar das diversas derivações que ela acabou ganhando ao longo de sua vida, ainda é grande o número de pessoas que tem dificuldade de responder uma simples pergunta:
Onde está o design nesse projeto?
Recentemente tive a oportunidade de trabalhar em um projeto muito bacana para uma grande marca brasileira. Convidada pela nossa grande parceira Next Idea, uma importante agência digital da nossa região, a Ozório ficou responsável por todo o desenvolvimento da interface do sistema em questão. Não é o primeiro trabalho que fazemos de UI (User Interface), mas este foi um que me inspirou muito e me fez querer compartilhar as ferramentas que aplicamos no processo.
Por ser um projeto com a deadline apertada, foi preciso gerir o tempo ao máximo para que não perdêssemos produtividade, e por incrível que pareça aqui começa o design. O primeiro problema do projeto não era na aplicação, mas na gestão do seu desenvolvimento e é papel do designer responsável encontrar um método rápido e eficaz para entregar a solução dentro do tempo pré determinado. Muitos ainda pensam que o designer é apenas aquele cara que senta na frente do PC e começa a desenhar um interface bacana, eu acredito que um bom designer precisa ter capacidade de se conectar com o projeto por inteiro, se preocupando inclusive com o passo a passo de cada etapa.
Não se engane, design não está apenas no resultado final.
Depois que definimos um bom fluxo de trabalho é hora de garantir assertividade, afinal, projetos com pouco tempo são como cirurgias de emergência: precisam ser rápidos e eficazes.
Bom, nós tínhamos um escopo escrito pelo cliente e algumas ideias de como seria a aplicação e com isso começamos a desenhar possíveis rotas que o usuário faria. Aqui é muito importante ter um ponto de partida: qual a primeira tela de interação que vamos ter? Tendo isso definido é preciso refletir sobre as etapas seguintes: quais os caminhos percorridos, para onde o usuário vai e pra onde ele deve voltar.
Não se preocupe com a estética, o que importa é expressar as ideias de forma rápida. Eu particularmente gosto de usar papel e caneta, não existe maneira mais rápida de fazer um bom wireframe inicial.
Essa noite foi cansativa. Nós ficamos por horas desenhando as possíveis rotas do usuário, e quando chegamos a uma conclusão que parecia boa, partimos para o computador para projetar um wireframe mais elaborado e então testar.
É importante tomar alguns cuidados quando se faz o wireframe no computador. Precisamos deixá-lo mais fiel possível com o que imaginamos: posição de ícones, tamanho de fontes e distribuição das informações, isso poupa um tempo importante na hora de desenhar a interface final.
Com o protótipo pronto fizemos alguns links básicos no Invision e rodamos internamente para testar, é incrível como apareceram problemas, mas isso é normal. Veja essa situação como um filtro, na primeira tentativa o mockup apresenta inúmeras falhas e com o passar das etapas você vai afunilando até ter a solução ideal.
O gráfico ao lado traz um pouco de como nós vemos os projetos naOzório. Na primeira etapa é normal que apareçam diversos erros e muitos problemas na solução proposta, o importante é corrigir isso para que no protótipo possamos apenas cuidar dos pequenos detalhes que ficaram para trás. E depois disso partir para o layout, onde fazemos os refinamentos finais.
Lembrando que tudo isso deve ser validado com o maior número de pessoas possíveis, para que o usuário final receba a solução mais refinada possível.
Outro ponto bacana desse projeto foi a possibilidade de trabalhar com micro interações, aqueles pequenos detalhes que a maioria das pessoas nem imagina o trabalho que dá para desenvolver (Se você quiser se aprofundar mais sobre esse tema vale a leitura do texto nesse link). Mas, em resumo, micro interações são aqueles mínimos detalhes que pensamos para uma interface, como por exemplo a a forma como um botão vai funcionar ao passa o mouse em cima.
Nos gifs que fizemos é possível ver um pouco desse trabalho.
Nas micro interações é possível dizer como queremos que cada elemento surja na tela.
São detalhes pequenos, mas é isso que torna o produto mais amigável e humano.
Bom, o resultado final do projeto ainda não está divulgado, assim que possível vocês vão poder ver tudo que desenvolvemos, mas até lá, espero que esse texto tenha sido útil e ajudado a perceber que o design não está apenas no layout final, mas em todo o processo de desenvolvimento.
