6 dicas essenciais para desenhar bons protótipos
Com poucos materiais e em poucos minutos, durante até mesmo a própria reunião de requisitos junto ao cliente, os protótipos criados a mão se figuram em uma das formas mais fáceis e rápidas de se experimentar um produto.
Recomendado para protótipos de baixa e média-fidelidade, os protótipos criados a mão constituem uma etapa essencial do desenvolvimento de um sistema (ou software), tendo como principais benefícios:
- planejar e compartilhar ideias de interface e disposição da organização de forma mais efetiva;
- validar o atendimento aos requisitos do sistema antes do início de seu desenvolvimento;
- percorrer e simular o fluxo de forma mais compreensível que em diagramas;
- permitir aos envolvidos a coleta de valiosos feedbacks que os auxiliarão na tomada de decisões;
- permitir o "uso" do produto de forma rápida e com baixo custo.
Sabendo-se de sua grande utilidade, chegou a hora de colocar a mão na massa e começar a criar com essas 6 dicas essenciais:
1. Ambiente
Os itens básicos e obrigatórios no ambiente para se prototipar são o espaço e a iluminação.
Recomenda-se que tenha uma mesa grande livre para poder espalhar seus materiais, deixando-os visíveis e fáceis de serem manuseados. Outro ponto importante é com este espaço poder espalhar as várias folhas já desenhadas a fim de facilitar a visibilidade dos protótipos.
Crédito: By Sage Ross (Own work) [CC BY-SA 4.0], via Wikimedia Commons
Quando se cria protótipos guiados, isto é, com a ajuda e considerações de outros envolvidos em volta, é bom que tenha-se um ambiente quieto e calmo a fim de facilitar a comunicação e não atrapalhar na criatividade. Porém, caso esteja criando protótipos sozinho, sem a comunicação com outros envolvidos durante o processo, uma boa música de fundo é essencial!
Dê preferência às músicas instrumentais por facilitarem a concentração e foco durante a criação. Dica: existem boas playlists no Spotify, basta procurar pela categoria “Foco”.
2. Materiais
Em minha consideração, os itens fundamentais na atividade de desenho de protótipos são:
Papel:
Prefira papéis inteiramente brancos ou quadriculados (evite pautados), todas do mesmo tamanho para facilitar a organização e disposição. Tenha folhas o bastante para criar várias propostas e também não se preocupar em errar, mas claro, pense sempre no meio-ambiente e evite o desperdício! ;)
Os papéis em branco lhe dão maior liberdade para desenhar os elementos da forma e posição que desejar, por esta razão, são mais recomendados a usuários com boa habilidade nos traçados, de forma que os protótipos não fiquem muito ‘assimétricos’, se é que me entendem.
Os papéis quadriculados por sua vez, facilitam o desenho dos elementos de forma simétrica aproveitando-se das linhas como referência para o protótipo. Recomendado aos usuários com menores habilidades nos traçados. O ponto ‘negativo’ desses papéis é que os quadriculados, dependendo da opacidade de seu traçado, muitas vezes podem se misturar com os traçados do protótipo e causar um desconforto ou confusão visual.
Lápis e borracha:
Itens essenciais a qualquer desenhista, ou, prototipador - no caso.
Prefira lápis fáceis de serem apagados e borrachas que dificilmente borram, tornando rápido o processo de rascunho e evitando marcas ao longo da evolução do desenho, pois desenhar e apagar pode ser atividade comum.
Lápis de cor também são bem vindos no processo de prototipação. Quando bem utilizados, darão um ar mais profissional aos protótipos.
Canetas
Qualquer caneta esferográfica (do tipo Bic ou Compactor) já são suficientes para deixar os traços mais fortes e marcantes no protótipo.
Utilize diferentes espessuras para os traçados, variando de finos para grossos e canetas coloridas a fim de diferenciar os elementos no protótipo.
Utilizo canetas de tinta nanquim e particularmente as recomendo pois os traços ficam melhor definidos e dão a aparência que foram impressos ao invés de desenhados.
Possuo canetas nanquim do tipo profissional recarregável (Desegraph) e descartáveis (Uni). Recomendo fortemente as descartáveis pela praticidade e facilidade de uso.
Materiais complementares
Prancheta: tenha sempre uma por perto, elas possuem um custo baixíssimo e uma utilidade gigantesca: permitem que você realize seu traçados independentemente da superfície disponível, pois nem sempre temos aquela mesa bacana com espaço livre.
Régua: facilita a criação dos traços retilíneos e a divisão simétrica dos elementos no protótipo, como exemplo, os grids estruturais. Lembrando que quanto mais retilíneos e simétricos forem seus traços e elementos, maior será a impressão de fidelidade do protótipo, já traços menos definidos e simétricos, dão a impressão de protótipos de baixa fidelidade. Ambos são importantes e possuem seu valor, o que depende é o objetivo de sua criação e utilização.
Post-it: possibilitam o incremento de comentários em protótipos que não possuem mais espaço ou não podem/devem ser poluídos com informações ‘complementares’.
Esses são os materiais que atualmente utilizo para prototipar:
- lápis comum, borracha e apontador;
- canetas nankin com pontas de várias espessuras (0.1, 0.3 e 0.8) (marca unipin);
- canetas hidrográficas coloridas para escritas maiores (marca Faber Castell);
- canetas finas coloridas 0.4mm (marca Compactor);
3. Por onde começar: os primeiros rabiscos e elementos básicos do protótipo
Defina e limite a proporção a ser trabalhada:
Diferentes dispositivos possuem geralmente diferentes proporções de tela e essa importante informação deve ser considerada na criação dos protótipos.
Delimite a área a ser trabalhada com traços fortes.
Rascunhe o dispositivo ou janela do aplicativo
Com o intuito de facilitar o entendimento do usuário - do protótipo - e permitir uma melhor comparação com a realidade, o rascunho do dispositivo é altamente recomendado.
Crédito: Radu Luchian - Tools of the trade: Sketching the web
Na internet é possível de encontrar diversos modelos e exemplos legais a serem utilizados.
Defina os grids
Com a área útil a ser trabalhada devidamente pronta para o desenho, crie mentalmente (no caso de protótipos de baixa fidelidade) ou delimite de lápis com o auxílio de uma régua (no caso de protótipos de média/alta fidelidade), os grids a serem trabalhados.
Esses traços (grids) lhe auxiliarão na organização dos elementos durante todo o processo de prototipação e darão um senso de estética confortável ao desenho. Podem também facilitar (e muito) a futura codificação da tela, uma vez que existem diversos frameworks de front-end (HTML e CSS) que utilizam dessa prática.
Um dos grandes princípios do design é trabalhar com grids. caso esse termo ainda não seja familiar ou considerado em seus trabalhos, recomendo veemente seu estudo e aplicação nos trabalhos de prototipagem.
4. Experiência centrada no usuário
Quando se desenvolve um sistema, ele é projetado para seus usuários e não para o requisitante, pense sempre nisso!
Portanto, foque na experiência do usuário, isto é, crie seus protótipos pensando exatamente como o usuário gostaria de se interagir com o produto. Foco na interação.
Aplique ao máximo seus conhecimentos em usabilidade e acessibilidade. Facilite seu uso!
Crédito: Walker Kim
5. Inspire-se
Não é preciso reinventar a roda!
Muitas telas e interações já foram profundamente estudadas por especialistas e aplicadas em inúmeros projetos. Quando elas funcionam bem, não se faz necessário reinventa-las, pelo contrário, aproveite-as em seus protótipos.
Créditos: The Guild
Se você precisa de uma boa inspiração, encontre-a nos melhores.
Como exemplo, a ‘simples’ página inicial do Google possui uma barra de pesquisa que é sua valiosa ‘ferramenta principal’. A experiência ao usá-la com certeza passou e passa por diversos estudos e aprimoramentos. Utilize-se dessa experiência para sua inspiração.
Lembre-se sempre que há uma grande diferença entre se inspirar e copiar uma ideia. Seja criativo!
6. Experimente seu protótipo
O protótipo é a forma mais rápida e barata de se usar um produto. Este é seu objetivo!
Crédito: Low fidelity prototype testing of the EE app (The UX Playground / Youtube)
Quando criados em papéis, experimentar os protótipos com outros usuários se torna incrivelmente fácil uma vez que você precisa somente de apontar, seja com o dedo ou uma caneta para simular seu uso e colher feedbacks. Existem inclusive técnicas para estudo de usabilidade aplicáveis aos protótipos de papel. Faça bom uso!
Referências e leituras complementares
Post anterior:
« Ata de reunião: como fazer de forma efetiva