26 passos para aperfeiçoar o design de produtos
Nos últimos quatro anos, projetei painéis e aplicativos e aprendi a lidar com diferentes departamentos e a utilizar seu conhecimento para tornar o design de produtos mais eficiente.
Hoje, vou compartilhar todos os passos que construí em minha rotina diária, que acredito terem me tornado um designer melhor.
Pré-processo
1. Obtenha o máximo de informação possível (peça três exemplos)
Para mim, nada oferece mais clareza do que ver um exemplo real de trabalho. Quando estou trabalhando com um novo cliente ou em uma nova landing page de um produto, acho que o ponto de partida mais fácil é pedir ao cliente três ou quatro páginas inspiradoras, porque isso realmente ajuda ambas as partes. Fazer com que seu cliente coloque ideias na mesa dá a você uma oportunidade de entender prontamente o que elas gostam e o que esperam do design final.
Se você está trabalhando com várias equipes, deve dedicar tanto tempo aos desenvolvedores de um produto quanto aos colegas de designer. O que eu aprendi é que a chave para tomar uma decisão efetiva de projeto é garantir que você fale com o time de desenvolvimento o máximo que puder. No meu caso, houve casos em que foi encontrada uma solução para um problema, que eu não conseguia encontrar sozinho.
O objetivo é eliminar o máximo de perguntas possíveis antes de você entrar no desenvolvimento.
2. Aprenda sobre personas
No começo, devo dizer que estava cético em relação às personas, mas agora tudo faz sentido para mim.
Portanto, em contraste total com meu processo antigo, posso ver como as pessoas são super importantes ao trabalhar com os recursos do produto, especialmente quando a solução tem muitos casos de borda diferentes. Isso ajuda você a entender para quem você está realmente projetando. Eu pretendo ter em torno de quatro a cinco pessoas.
3. Defina metas exatas - o que exatamente devemos rastrear?
Acho que a maioria dos designers / clientes ignora essa etapa, mas um dos aspectos mais importantes do design para ambas as partes é entender os objetivos do produto que você está criando. Nós tendemos a pular direto para pixels e rapidamente construir a interface do usuário do projeto. Se for um website novo ou um novo recurso, defina metas claras do que você deseja alcançar primeiro.
Como tudo é rastreável, fale sobre os pontos exatos que você vai acompanhar. Por exemplo, eles podem variar de novas inscrições a vários clientes que usam Paypal versus compras com cartões de crédito. Certifique-se sempre de que você sabe o quanto está mirando no começo!
(Você precisará disso para configurar funis no Mixpanel mais adiante neste processo.)
4. Configure uma pasta de projeto e comece a construir uma moodboard
Há muitos sites para inspiração - Dribbble , Behance , Pttrns É muito fácil encontrar projetos semelhantes àquele em que você está trabalhando. Além disso, pode já haver uma solução para um problema que você está enfrentando e tentando resolver.
Quando começo a trabalhar em um novo projeto, sempre configuro uma pasta com pastas denominadas - Arquivos de origem , Telas e exportação , Inspiração e Recursos . Salve tudo o que eu encontrar na internet para a pasta Inspiration para poder usá-lo mais tarde para criar moodboards básicos. Esta pasta pode ser preenchida com qualquer coisa, desde plugins, amostras ou até mesmo estudos de caso completos do Behance.
Fidelidade baixa
5. Quadro Branco
Se quisermos adicionar um novo recurso ou redesenhar um processo, nós nos sentamos e todos na reunião começam a esboçar idéias em um quadro branco, papel ou até mesmo um iPad. Essa ação nos permite colocar todos na equipe na posição do designer. Mais tarde, acabamos com duas opções de design para ver qual delas funciona melhor.
Sempre tentamos passar por toda a experiência e discutir a maioria dos casos de borda durante essa parte do processo. É realmente crucial abordá-los agora, em oposição a durante a fase de design, ou pior, durante a parte de desenvolvimento. É quando você pode perder muito tempo e energia.
6. Mapeie todas as suas telas (quais dados um usuário precisa inserir)
Esta é a hora de ir além do quadro branco e listar todas as entradas e histórias do usuário. Anote o que exatamente um usuário deve inserir em uma determinada tela e como um usuário pode atingir suas metas desejadas.
7. Anote todos os estados possíveis
Como todos os painéis, aplicativos ou formulários de sites têm estados diferentes, esse é outro passo importante que você não deve esquecer.
Ao projetar, precisamos ter certeza de abordar todos eles. É bom ter gráficos brilhantes e imagens de perfil legal em nossos arquivos Sketch ou PSDs. No entanto, provavelmente, os usuários verão o lado oposto do seu aplicativo. Especialmente quando eles vêm para o seu produto. É necessário estar preparado. Abaixo está um exemplo de como lidamos com estados vazios em um dos nossos componentes de dados.
8. Prepare seu primeiro diagrama
Tudo isso leva à parte final da baixa fidelidade. Graças ao resultado da tarefa do quadro branco, sabemos agora todos os estados possíveis, entradas e objetivos do usuário. Para resumir todas as interações, eu crio um diagrama e, para ser honesto, mudei o estilo de fazer isso várias vezes: indo de arquivos Sketch com layouts rasterizados para apenas retângulos que simbolizam cada página com seus nomes abaixo. Dito isto, o processo foi sempre doloroso, geralmente acabo numa situação em que queremos mudar ou adicionar algo mais tarde no processo. Com essas soluções, sou normalmente forçado a fazer muitos outros passos; como alterar as posições de linhas, setas e imagens.
Recentemente eu tenho usado Camunda Modeler , o que não é exatamente uma ferramenta de design; é um aplicativo simples para criar diagramas técnicos. O que parece estranho, mas este aplicativo foi desenvolvido para ajudar você a criar diagramas básicos. Mais importante, tudo que é criado é completamente escalável. Você pode facilmente arrastar e soltar qualquer ponto e ele criará automaticamente linhas e setas para você. Você também pode escolher entre diferentes tipos de pontos que podem ser úteis para destacar quando, por exemplo, um usuário recebe um email do Intercom. Camunda exporta para SVG, o que facilita a coloração de pontos rastreáveis no Sketch.
Trabalho / Design
9. Placa de Humor
Eu sou capaz de começar com a criação do moodboard, já que eu coleciono todas as imagens para a minha pasta Inspiration. Eu uso moodboards principalmente para discutir meus pensamentos com colegas e descrever algumas das ideias visuais, antes de começar com o processo de pixel.
10. Primeiro rascunho
Projetar é sempre um processo contínuo. Você vai iterar muito ao longo do caminho para um ótimo resultado. Com o primeiro esboço também é uma maneira de coletar feedback. Você não precisa chegar ao design perfeito de pixels para começar a receber feedback de seus colegas de equipe, clientes ou possíveis usuários. Para obter seus primeiros pensamentos e começar uma discussão, geralmente misturo telas de nossos designs atuais. Isso nos permite começar a jogar com designs reais em menos de um dia. Você pode fazer um primeiro protótipo simples para testar se as coisas se conectam bem juntas.
11. Escreva sua cópia
A cópia é um dos principais aspectos das decisões dos usuários e considero isso como uma parte crucial do design. Não há nada pior do que um bom design com diálogos confusos, onde os usuários estão se esforçando para encontrar o próximo passo.
12. Primeiro teste interno
Com o seu primeiro rascunho você pode criar rapidamente um protótipo em Maravilha ou Invision . Isso é algo que comecei a fazer recentemente e é outro aspecto de validação incrível. Com um protótipo, agora você pode configurar facilmente uma chamada com 3 ou 4 pessoas de sua equipe e compartilhar o link do protótipo com eles e tentar fazer algumas perguntas enquanto testa fluxos / cenários específicos.
Dessa forma, você pode facilmente testar suas habilidades de questionamento e, obviamente, testar suas decisões de projeto em usuários reais sem se preocupar com recursos e tempo desperdiçados. Eu costumo escolher pessoas que não estão muito envolvidas no desenvolvimento do painel. Além disso, tente evitar assistir alguém que já tenha tido a chance de jogar com o protótipo antes.
13. Etiqueta
Nós todos sabemos o quão difícil é ficarmos arrumados. Como entregar ainda outro recurso. Isso geralmente leva a um esboço desordenado ou arquivos PSD. Aprendi muito sobre as diferenças entre trabalhar como designer único em uma startup, trabalhar em equipe ou trabalhar em meus próprios produtos digitais.
Quando você trabalha em equipe, pense em seus PSDs como se estivesse criando para outra pessoa. Eu uso a regra de que, se você tiver mais de 8 camadas em uma pasta, crie uma nova.
Eu encontrei um ótimo plugin para o Sketch, que me salvou horas enquanto eu trabalhava nos meus Kits de UI: Renomeie .
Dica: coloque tudo na tela. Eu sempre me esforcei para criar cabeçalhos legais enquanto o restante da tela era branco. Ao projetar, aprendi a colocar todo o conteúdo no lugar primeiro - basta brincar com o layout e a tipografia. É muito mais fácil criar detalhes interessantes e brincar com todo o conceito com o conteúdo no lugar.
14. Crie elementos da interface do usuário e comece a jogar com o Lego
Eu provavelmente estou atrasado para a festa e isso já soará desatualizado enquanto eu estou escrevendo. A razão pela qual não fizemos nenhum wireframing na jornada aqui é simples. O Sketch 39 vem com algo que eu achei incrível e que é “formas com propriedades de redimensionamento”. Isso é algo que torna o design fácil para todos da equipe. Nosso arquivo Sketch é puro arrastar e soltar agora. Você pode facilmente dar a qualquer um de seus colegas de equipe uma tela em branco e eles podem criar rascunhos quase em alta fidelidade. Graças a isso, podemos pular todas as ferramentas de wireframe e começar com pixels quase reais.
Isso também anda de mãos dadas com a possibilidade de converter wireframes em reais. Qualquer PM pode criar um wireframe e então eu posso facilmente assumir isso e me transformar em alta fidelidade.
Ativos e entrega
Quando terminar de projetar e iterar com base no primeiro feedback, você ainda não terminou. Agora chega a hora de entregar seus projetos aos seus engenheiros / desenvolvedores.
15. Especificações
Um dos meus principais objetivos é sempre ser capaz de comunicar minhas decisões com a equipe e ser capaz de reduzir a dificuldade para os nossos desenvolvedores, tanto quanto possível, a fim de fornecer-lhes os melhores recursos possíveis. Isso para mim é definitivamente a parte mais importante do meu trabalho como designer.
Como documentamos toda a interação e temos tudo pronto desde o início do nosso processo, criar especificações é fácil. Eu costumo escrever especificações no Google Docs ou abaixo das telas em arquivos do Sketch. É bom lidar com seus projetos com explicações de todos os recursos para que qualquer pessoa possa pegar seu arquivo no futuro.
16. Diagrama
Essa técnica é boa para imprimir designs e discuti-los com a equipe. Mas hoje em dia eu acho que há melhores opções. Como ter pronto o protótipo final.
17. Protótipo Final
Uma das principais coisas para mim é ter sempre toda a interação pronta no protótipo. Eu geralmente acabo tendo de 3 a 5 protótipos a caminho do final para aquelas pequenas sessões com colegas de equipe ou para mostrar alguns fluxos particulares. Eu tenho a tendência de preparar todos os estados no Sketch em uma prancheta e então duplicar essas pranchetas para ter todos os estados prontos ao exportar.
É ótimo adicionar comentários a partes de seus designs para expandir suas especificações muito mais, de modo que até mesmo um redator possa facilmente ir e verificar em pixels e fluxos reais se cada cópia e caixa de diálogo funcionar conforme necessário.
18. Vídeo Quicktime> Notas
Quando não estou apresentando coisas no Hangout para a equipe ou para um cliente, estou enviando um vídeo em minha tela passando pelo protótipo e explicando tudo o que projetei. É uma boa confirmação para mim antes de qualquer apresentação que eu sei a resposta em qualquer questão e possíveis interações extravagantes que eu decidi projetar. Também pode ser usado de forma agradável quando se trabalha em equipes remotas. Todo mundo tem acesso a repetir todo o pensamento de interação a qualquer momento.
19. Animar
Como um bom toque final você pode usar Depois dos efeitos ou Princípio . É bom explicar como você quer que isso ou aquilo se mova.
20. Styleguide
Outro ponto crucial para os engenheiros é saber como as coisas vão reagir em diferentes cenários. Pense nos estados de erro de entrada ou onde mostrar mensagens de erro. Da mesma forma, como o estado desativado de um botão de envio será exibido, onde colocar um spinner etc.
É muito fácil para os engenheiros irem através de seus elementos de arte e estilo de símbolos, um por um, antes mesmo de começarem a codificar todas as telas, graças a um arquivo de desenho como blocos de Lego.
Teste final
Desde que terminamos de entregar nossos projetos aos engenheiros, podemos nos concentrar na última parte do processo - testando nossas decisões!
21. Inspectlet / HotJar
Depois que os designs forem transformados em código de trabalho, não se esqueça de incluir Inspectlet ou HotJar Fragmentos JS. Estou sempre animado (ou frustrado) para ver como os usuários navegam pelo nosso painel ou o que eles estão fazendo na minha página do portfólio. Inspectlet é incrível em capturar toda a sua sessão de usuário. Funciona muito bem para projetos maiores também.
Ele vem com fácil filtragem “/ page”, que ajuda você a assistir a sessões de um recurso ou fluxo específico.
22. Mixpanel
Mixpanel funciona muito bem para validar nossos objetivos (aqueles que configuramos no início do processo). O Mixpanel ajuda a ver quantos usuários concluem fluxos específicos. Quantos usuários diminuíram antes de configurar a conta. Quantas pessoas passaram da página de destino principal para a loja e para o nosso produto mais valioso.
23. Google Analytics
Não sou capaz de codificar grandes coisas, mas pelo menos sou capaz de trabalhar com arquivos CSS e com código simples. Ultimamente, eu estava interessado em ver onde os usuários clicam e enquanto observavam os heatmaps do Hotjar, então decidi configurar o rastreador de cliques básico no Google Analytics também. Você também pode acompanhar facilmente todos os cliques do usuário no seu website.
Isso me ajuda a mapear facilmente o comportamento do usuário. Por exemplo, descobri que as pessoas usavam a navegação superior em meu site 5 vezes mais sobre o link destacado no texto de introdução. Infelizmente, não contabiliza cliques de usuários com o AdBlock.
24. Intercomunicador
Quando concordamos com nossos fluxos iniciais, estávamos falando sobre parte dos fluxos em que o usuário recebe um e-mail de Interfone . Nossa responsabilidade aqui é garantir que toda a cópia e a mensagem em si façam sentido e sejam realmente úteis para o visitante. Certifique-se de que seus e-mails estão guiando seu usuário para seu resultado aguçado e sempre tente fornecer artigos de suporte específicos e informações sobre como continuar no fluxo.
As últimas palavras
25. Deixe o Dribbble para trás
Pelo que aprendi e como meu design mudou nos últimos 4 anos, cheguei ao ponto em que o Dribbble não é necessariamente o lugar para o qual você deseja criar seus designs. Eu sempre quis ter bons pixels com imagens de perfil sexy, mas não é isso que os usuários reais precisam e vão usar.
Aqui está um exemplo, à esquerda você verá algo que projetei para o Dribbble. À direita, você verá algo que projetei quando passei algum tempo observando pessoas editando seus perfis e percebi que minha visão não estava fornecendo o que eles precisavam.
Você pode receber 500 likes por animações bem loucas de uma batata ou pizza deslizante, mas o que é realmente importante é que seus usuários descobrirão como gerenciar a frequência dos emails da empresa ou como filtrar sua análise de desempenho.
[- Esta postagem foi postada originalmente no Medium , republicado com a permissão do autor. -]