Design & UX

21 jan, 2016

5 dicas essenciais para melhorar mockups de website

Publicidade

Alguma vez você já recebeu feedback sobre novos mockups ou protótipos que começam com “Que língua é essa? Eu não entendo ‘lorem ipsum!!?”.

Sim? Então você já passou por isso. E com certeza não é o melhor dos sentimentos. Não por causa da pergunta em si.

Neste artigo, vamos mostrar 5 dicas sobre como evitar receber esse feedback e como tornar os mockups do seu site ainda melhores.

mockups-1

1 – A definição de fidelidade do protótipo

Como Jerry Cao escreveu num artigo recente no sixrevisions.com, a chave para um mockup de website bem sucedido pode ser encontrada na definição do nível de fidelidade que será utilizado na fase de prototipagem.

Começar com caneta e papel para trabalhar em alguns primeiros rabiscos e esboços é o caminho certo. Esses esboços são muito genéricos e com baixa fidelidade (low-fi). Quanto a aumentar a fidelidade desses esboços, eu recomendo utilizar uma ferramenta de esboço simples, como balsamiq ou o moqups. Apenas use ferramentas profissionais, como o Photoshop (ou similar), quando você estiver trabalhando com esboços de alta fidelidade.

A chave aqui é encontrar o momento certo de fazer o esboço, mockup em baixa ou alta fidelidade.

Em ambos os casos, começar muito cedo ou muito tarde com mockups de alta fidelidade será desperdício de recursos (tempo e material), e você corre o risco de acabar com um protótipo medíocre.

mockups-3

2 – Identifique problemas

Enquanto trabalhamos em esboços e desenhos, é muito fácil pensar nas soluções, antes de enfrentar o “problema real”.

O cliente pede: “fazer o logotipo maior”, isso não está identificando qualquer problema.

É uma solução proposta, embora não sejam dadas para você informações sobre o problema que isso irá solucionar. Perguntar um monte de “Porquê” pode ajudar nessas situações.

Hoje, somos treinados a pensar em soluções e, em muitas situações, esses pensamentos podem ser muito úteis. No entanto, isso pode não ser realmente muito útil quando estamos no meio do processo criativo de elaboração dos wireframes e mockups.

E a maioria dessas soluções vem em forma de solicitações de mudança, como “Podemos mudar a cor de vermelho para azul?”.

Então, se você está recebendo uma “solução” como essa de seus colegas e clientes, tente perguntar o porquê. Por exemplo: “Você pode me dizer qual o problema que você está tentando resolver com isso?”.

Chegar até o fundo da questão e descobrir os verdadeiros problemas não só irá gerar em um melhor resultado, mas vai tornar a sua vida como um designer e desenvolvedor bem mais simples.

3 – Use recursos realistas

Eu sei, imagens e cópias de textos não estarão em sua lista de prioridades enquanto você estiver trabalhando em um novo mockup. Embora eles devessem estar. Sério.

O recurso certo em seu mockup não só pode arruinar todo o seu wireframe, mas também pode trazê-lo para o próximo nível de design, o design de alta fidelidade.

Além da fase de esboço e mockup, você (e seus colegas e clientes) devem estar trabalhando na linguagem visual do seu novo aplicativo web ou site.

Claro, não há necessidade de apresentar imagens personalizadas ou ilustração finalizada nesses mockups.

Há uma ampla gama de imagens e vídeos padrão disponíveis que irão ajudá-lo a fazer seus mockups mais vivos e certamente farão a diferença ao apresentar esses mockups.

Fonte: Google Style Imagery
Fonte: Google Style Imagery

 

4 – Falhe rapidamente e conserte mais rápido ainda

Manter o fluxo de trabalho de seu mockup e prototipagem estático pode ser uma grande perda de tempo. Na maioria dos casos é bem mais eficiente para manter enxuto e simples. Ao concluir os primeiros esboços e wireframes, você pode fazer uma iteração mais rápida, com baby steps, e um processo de feedback mais curto.

Portanto, eu recomendo:

  • Manter seu fluxo de trabalho de prototipagem transparente e sempre atualizar o seu time.
  • Manter uma comunicação clara e corrigir problemas assim que eles surgirem.
  • Ter certeza de incluir todos os responsáveis pelo projeto.

5 – Use ferramentas diferentes para diferentes fases da prototipagem

Não me interpretem mal. Eu já destaquei, em textos anteriores, a importância de dados compartilhados e sistemas conectados. Entretanto, isso pode ser um grande desafio durante a fase de prototipagem. Em muitos casos, alternar ferramentas para diferentes tarefas pode até mesmo aumentar a criatividade. Pessoalmente, achei a seguinte configuração de ferramentas e de materiais muito úteis:

  • Rascunhos: Use papel e quadro branco para as primeiras ideias. Evernote pode ser um grande auxiliar para armazenar essas ideias.
  • Wireframes e mockups: Quando trabalhar com wireframes e mockups, balsamiq ou moqups são muito úteis.
  • Protótipos: Trazer os mockups para a vida real, ferramentas como InVision, Usersnap ou CodePen ajudam você a usar seus rascunhos e protótipos com a certeza de que nenhum feedback ou ideia foi esquecida.

mockups-5

Agora é com você

Ser um profissional criativo requer profundo conhecimento. Assim como para nossos clientes. Lembre que nossas áreas de especialização são diferentes.

Seus colegas ou clientes sabem muito sobre a audiência e objetivos estratégicos deles. Então, vamos criar uma situação ganha-ganha para ambos. Deixe-os liderar no momento certo e oriente-os como aproveitar melhor a fase de prototipagem.

Qual é a sua configuração, quando trabalha com mockups e protótipos?

***

Thomas Peham faz parte do time de colunistas internacionais do iMasters. A tradução do artigo é feita pela redação iMasters, com autorização do autor, e você pode acompanhar o artigo em inglês no link: http://usersnap.com/blog/prototyping-tips-website-mockups/