Design = Emoções + Usabilidade
Enquanto a arte é um campo subjetivo, o design gráfico é mais estereotipado em seus fundamentos. Um design eficaz deve fazer as pessoas se sentirem de certa forma e tomarem uma certa ação . Neste artigo eu gostaria de compartilhar o Gravity Switch princípios de web design e nosso pensamento por trás deles.
Essas regras são: definir metas primeiro; concentre-se nos usuários em segundo lugar; design para emoção; seguir as regras do design visual; construir uma hierarquia clara e visual; ser consistente; quebrar as regras (quando necessário); não abuse dos truques; e finalmente testar, medir e melhorar.
1. Definir objetivos primeiro
Eu aposto que você pensou que eu ia dizer "focar nos usuários primeiro", é isso que a maioriapessoasdizer. Esqueça isso, vamos começar com seus objetivos. Comece cada projeto de design de site com uma sessão de brainstorming que defina objetivos de sites claros e realistas que reforcem seus objetivos de negócios .
Para melhor ilustrar isso, vamos olhar para a Amazon. Seu objetivo é maximizar as vendas de produtos. Por meio de “upselling” e “cross-selling”, eles podem maximizar o poder de compra de cada usuário, mas para ter sucesso nisso, eles reduzem o processo de compra. Ao contrário de muitos de seus concorrentes, a Amazon não tem um botão "compre agora" nos resultados da pesquisa. Os usuários devem visitar mais uma página (com potenciais upsells) antes de fazer uma compra. Esse é um exemplo perfeito de como o design de um site pode atingir metas de negócios claras.
A maioria dos sites de comércio eletrônico modernos removeu o botão "comprar agora" de seus resultados de pesquisa, embora alguns pontos de venda ainda tenham esse recurso.
2. Concentre-se nos usuários em segundo
Com seus objetivos claros em mente, você precisará definir e priorizar os usuários . Seja o mais específico possível. Alguns exemplos de perguntas a fazer são:
- Colapso masculino vs. feminino?
- Nível de educação?
- Localizações no país?
- Passatempos relacionados?
- Faixa de renda?
- Quem está dirigindo as compras de produtos infantis? Crianças? Pais? Avós?
O ponto principal é que os designers devem estar cientes dos usuários para que eles possam garantir que seus projetos não bloqueiem os principais caminhos de uso.
3. Design para emoções
Certifique-se de entender as emoções que sua marca deve causar. Chuva de ideias. Pergunte. Consiga acordo. E, possivelmente, o mais importante, concentre-se nessas emoções ao se apresentar aos seus clientes. Nunca pergunte se o seu cliente “gosta” de um design. Quando você entrega designs, você deve fazer perguntas como “Qual destes faz você se sentir mais profissional?” Ou “Quando você compara esses dois designs, você verá que este é mais moderno, enquanto este é mais dinâmico. Essas eram as duas emoções que eram importantes para você, agora que você as vê visualmente, o que você acha que é a emoção mais importante para você apresentar ao seu público-alvo? ”
Quais dessas organizações são divertidas? Relaxante? Inovativa? Ocupado? Real? (Designs de @ JessicaShiner e Christine Mark)
4. Siga as regras do design visual
Há muitos elementos pequenos que os usuários do site usam consciente e inconscientemente para decidir se vão confiar em um site. Os mais importantes são:
- Recorte: selecionar fotos é apenas metade da batalha, cortar fotos é o que faz ou quebra um layout de página.
- Espaço negativo: prestar muita atenção às margens, ao preenchimento e à altura da linha é a diferença entre se parecer com o New York Times versus um boletim escolar do ensino médio.
- Fontes: todo mundo adora escolher fontes, mas um grande designer pode identificar rapidamente uma fonte profissional e tem a restrição para manter o número de fontes no site em 1-2 (sem contar o logotipo, que geralmente é sua própria fonte).
- Cores: as cores são uma das coisas mais difíceis para os designers usarem efetivamente. Existem muitas regras para escolher uma boa paleta de cores e, ao mesmo tempo, é tentador usar geradores de paleta de cores , gaste tempo projetando sua própria paleta de cores.
- Layout: crie um bom fluxo de página visual para que os olhos do usuário se direcionem para onde você deseja que eles entrem na página sem que outros elementos atrapalhem visualmente seus objetivos.
5. Construa uma hierarquia clara e visual
Visitantes do site skim. Eles não lêem. Chame a atenção deles e leve-os à informação mais importante com uma hierarquia visual claramente definida e bem pensada . Um design bem pensado - site> página> seção - leva o usuário através da página da maneira que quiser. Os usuários devem poder olhar sua página e compreendê-la em uma fração de segundo.
Veja o seguinte exemplo de um artigo e observe como é difícil para o seu olho dizer sobre o que é a página ou onde o artigo começa!
Abaixo está uma maquete que fiz alterando cerca de uma dúzia de linhas de CSS para criar uma hierarquia visual mais clara nesta página das seguintes maneiras:
- O título do artigo deve ser o elemento mais importante da página. Atualmente é um tamanho de fonte menor do que o título mais abaixo na página! Então, eu aumentei o tamanho do título do artigo e diminuí o tamanho dos títulos.
- O cabeçalho mais abaixo da página também foi desconectado do conteúdo para o qual era visualmente visual, então eu também apertei o espaçamento abaixo do título enquanto deixava o espaço acima do cabeçalho para informar aos usuários que é um título para o parágrafo abaixo dele .
- Também movi a pequena imagem para a direita do título, em vez da esquerda, de modo que, quando um usuário varre o lado esquerdo da página para se orientar, o título do artigo está em sua visão.
- Removi as classes de borda e de fundo na sinopse azul para que ele não concorra mais com o cabeçalho e retire a margem superior. Já existia uma classe para torná-la cinza, o que funciona bem neste caso.
- Também removi o texto e a imagem que distraem e que destacam que se trata de um artigo de reimpressão, bem como alguns parágrafos vazios e
Tag.
Eu intencionalmente deixei todos os anúncios como eles foram originalmente codificados, supondo que é uma parte crítica desta página.
6. Seja consistente
Não confunda seus usuários. Os links devem ser consistentes e distintos. Se você optar por usar ícones, fotos e ilustrações, certifique-se de que eles parecem e pertencem a um conjunto coeso. Inconsistências irão distrair o seu usuário e obscurecer sua mensagem. Não use mais de 3 tipos de letra - é melhor que estejam todos na mesma família. Limite-se a 5-6 cores (Nota: o logotipo pode ser uma fonte diferente e geralmente deve ser).
7. Quebrar as regras (quando necessário)
Se houver algo particularmente único ou importante que você precise destacar, talvez seja necessário “violar as regras”. Você pode usar uma ou duas cores contrastantes para ajudar o elemento a se destacar. Por exemplo, o site do Reino Unido abaixo enfatiza a taxa de imposto, tornando este um elemento maior com um pop de cor.
Quando as pessoas visitam a página de informações sobre o IVA, os projetistas do GOV.UK se certificaram de que a informação que a maioria das pessoas precisa é de frente e de centro.
8. Não abuse dos truques
Divirta seu design, mas certifique-se de que esses elementos sejam compatíveis com o que você está tentando realizar no site. Por exemplo, o Inze site é lindo de se ver e maravilhoso no celular, mas quando eu visitei no meu computador de mesa eu estava perdido. Acontece que a navegação está escondida até você começar a rolar, o que infelizmente levou minha atenção para a parte inferior da página. Como resultado, nem notei a navegação sutil aparecendo no topo. Eu rolei a maior parte do caminho até o fundo antes mesmo de perceber que havia (finalmente) uma navegação no topo. A navegação “escondida” é um efeito legal, mas o “design” me impediu de tomar a ação desejada. No final, transmite uma imagem de marca confusa e desleixada.
Compare Inze com o que acontece neste artigo aqui em Web Designer Depot quando você passa por cima de um link no seu computador desktop. Temos um efeito legal, mas isso não cria uma “barreira” para os usuários por causa de um truque. Ele também degrada graciosamente para que ele não seja quebrado em navegadores móveis ou mais antigos.
9. Teste. A medida. Melhorar
Sites evoluem. Design para flexibilidade e adaptabilidade. Coletar e analisar dados de testes em andamento promoverá melhorias constantes. Lembre-se, é tudo sobre como criar um design que atenda aos seus objetivos.
Ao medir cuidadosamente os resultados de uma série de pequenas alterações de design na página de destino original (à esquerda), criamos um novo design (à direita) que aumentou o percentual de inscrições em 60%!
Lembrar
O design gráfico eficaz precisa conectar emocionalmente o usuário com a marca e, ao mesmo tempo, fazê-lo fazer o que quiser. Isso pode ser feito.
Você concorda com essas regras de design? Você adicionaria mais alguma coisa? Deixe-nos saber sua opinião nos comentários.
Imagem em destaque / miniatura, imagem da emoção via Shutterstock.