Pense menos. Design Better.

Promover um melhor fluxo de trabalho no design da interface do usuário por meio de processos gerenciais de tomada de decisão e pensamento.

Uma interface do usuário bem projetada é o resultado de uma série de decisões importantes que não apenas tornam a experiência intuitiva, mas também esteticamente agradável para o usuário. Ao tornar o processo de tomada de decisão mais simplificado, ele pode permitir um fluxo de trabalho mais fácil e uma chance maior de produzir o resultado ideal.

Quanto mais possibilidades disponíveis no processo de design, mais pensamento é necessário para executar e refinar.

O psicólogo americano Barry Schwartz escreveu no The Paradox Of Choice que eliminar as escolhas pode reduzir bastante a ansiedade. Ele argumentou que deveríamos ter padrões e critérios, mas não se preocupe com a possibilidade de haver algo melhor. Foi no contexto dos consumidores, mas acredito que também se aplica às decisões de design.

A estratégia de maximização é realmente não ser um perfeccionista, mas tomar as decisões mais favoráveis ​​disponíveis que coletivamente criam a experiência ideal.

1. Variáveis ​​Limitantes

Se considerarmos todas as variáveis ​​potenciais para produzir um conceito de alta fidelidade, e pode haver muitas, fica claro que precisamos limitá-las e defini-las desde o início. Reduzir a quantidade de opções disponíveis facilitará a decisão.

Com a experiência, fica mais fácil prever como a limitação de certos grupos de variáveis ​​tem um efeito multiplicador em toda a composição.

Reduzir escolhas não se correlaciona com a redução da originalidade. Nossa suposição é que a criação de conceitos em torno de regras predefinidas é uma limitação, mas como designers, podemos estabelecer nossas próprias regras e estar no controle total de sua formulação.

Escala e espaçamento

Todas as facetas do design da interface do usuário devem girar em torno de um sistema que promove ritmo e ajuda a manter a consistência na escala e no espaço à medida que o projeto cresce. Um desses sistemas que adoro usar é a escala modular, que pode facilitar uma escala de qualquer proporção para medir ou definir o tamanho de um elemento ou espaço negativo em uma composição.

Depois que escolhemos uma proporção, a escala modular pode facilitar a definição de escala e espaçamento

Embora possa reduzir variáveis ​​em grades, tipografia, espaçamento vertical e as dimensões gerais de um layout para um nível gerenciável, também fornece estética e ritmo agradáveis. Projetar interface do usuário é muito mais fácil.

Grades

Os sistemas de grade são ótimos para restringir a organização do conteúdo no plano horizontal e são fáceis de entender quando se trata de interface do usuário. No entanto, uma grade é frequentemente escolhida sem muito pensamento, para ser um tamanho único. O que muitos designers não percebem é que é melhor criar um sistema de grade construído em torno do conteúdo.

Um sistema de grade reduzirá variáveis ​​no layout

Isso significa, idealmente, ter uma compreensão clara dos cenários de conteúdo com antecedência, de modo a mostrar uma imagem de como melhor servir o conteúdo de uma grade específica. Pense nas restrições de negócios com ativos e guias de marca preexistentes, como um logotipo que tenha regras e requisitos de espaçamento específicos, ou talvez anúncios com unidades fixas específicas.

O tipo de conteúdo também é um fator. Há uma grande diferença entre a criação de um layout para uma loja, publicação de notícias ou blog ou uma simples página inicial. Um layout com imagem pesada ou palavra pesada. Pode ser útil entender os padrões de escaneamento dos olhos e como eles têm impacto na hierarquia visual.

Quanto mais compreensão das restrições de negócios e conteúdo ocorrerem, mais fácil será escolher um sistema de grade e tomar decisões de layout.

Tipografia

Eu argumentaria que a tipografia é o aspecto mais importante do design da interface do usuário, pois pode representar até 95% da web e ser a força motriz da comunicação.

Embora sistemas como escala modular possam ser aplicados ao tamanho e à liderança, famílias e estilos de fontes também podem ser limitados. Uma interface do usuário nunca deve exceder duas famílias e alguns pesos. As regras também podem ser estendidas para o tratamento da justificação e do título.

Cor

É fácil ficar zeloso demais com paletas. Uma pequena variedade de tons pode contribuir bastante para produzir visuais suficientes e consistentes. Normalmente, tudo o que precisamos para um ponto de partida são cinco amostras.

Ferramentas como o Adobe Color CC facilitam a predefinição de uma paleta

A maioria das marcas deve incorporar uma cor primária ou de destaque e alguns tons neutros ou contrastantes para complementá-la. Não precisamos de 15 tons de um tom, especialmente no começo. É melhor começar pequeno e aumentar uma ou duas tonalidades mais tarde.

Imagens

A maneira como incorporamos imagens na interface do usuário é amplamente determinada pelo contexto do conteúdo. Se tivermos uma noção aproximada do que é isso, podemos criar um ponto de partida para nossas imagens com variáveis ​​de proporção, tamanho, forma e tratamento. Podemos achar que não precisamos de tantos.

A limitação de nossas variáveis ​​de imagem reforçará a consistência e facilitará o gerenciamento de ativos de imagem a longo prazo. O mesmo vale para a iconografia.

Quantas variações na proporção e tamanho das imagens realmente precisamos?

2. Criando um Guia de Estilo Anterior

À medida que um projeto de interface do usuário cresce conceitualmente, torna-se cada vez mais importante criar e manter um guia de estilo ou biblioteca de padrões. Isso estabelecerá os princípios de design para ajudar a escala do projeto, mantendo o ritmo e a consistência. Se estivermos definindo variáveis ​​de antemão, é uma boa maneira de documentá-las. A tomada de decisões futuras será mais fácil com um guia de estilo do que sem um.

Dependendo do projeto, a criação de um guia de estilo é um luxo e muitas vezes se destina a referência futura. É por isso que a maioria dos guias de estilo é montada no último minuto ou após a conclusão do projeto, e isso ainda é uma boa prática. Porém, embora exista bastante racionalização e raciocínio para um guia de estilo para auxiliar o design e o desenvolvimento prospectivos, ele pode realmente ajudar a aumentar a fidelidade nos estágios iniciais da conceitualização.

A criação de um guia de estilo básico logo no início não só estabelecerá princípios desde o início para reduzir as decisões de design, mas também ajudará como uma infraestrutura a evoluir e aumentar os diretores no futuro.

Fazer um no início não significa que ele precisa estar completo - longe disso. Os estilos tendem a evoluir mais nos estágios iniciais de qualquer maneira, e quanto maior o projeto, mais claros e mais apertados os limites se tornam.

3. Prioridade e adaptação com base modular

Em sistemas de design modular, como o Atomic Design de Brad Frost, um layout pode ser formulado a partir de áreas-chave específicas. Os módulos se tornam reutilizáveis ​​em vários layouts. As interfaces são tratadas como sistemas e não como páginas, com design e desenvolvimento baseados em padrões uma grande parte do processo.

Essa é uma ótima metodologia e torna o design da interface do usuário muito mais gerenciável, mas para torná-lo mais eficaz, precisamos priorizar as principais áreas e adaptar tudo o que estiver ao seu redor. Por sua vez, isso garantirá a coerência visual.

Identificar áreas-chave

Nosso design deve girar em torno das partes importantes. A prioridade de cada área é determinada pelo seu conteúdo ou funcionalidade na interface e é essencialmente a chave do quebra-cabeça.

Ao nos concentrarmos primeiro nas áreas importantes, reduzimos as decisões de design a partir de então, pois as áreas subsequentes precisam se curvar e se adaptar ao ambiente estabelecido.

Concentre-se em áreas-chave

Depois que as áreas de alta prioridade são identificadas, trata-se de focar super nas partes críticas e finalizá-las. A idéia é garantir que eles sejam intuitivos e atendam a todos os requisitos antes de adaptar as áreas menos importantes.

4. Fazendo funcionar para todos

Por milhares de anos, os designers se esforçaram para fazer uma coisa - comunicar-se de maneira eficaz. Estamos continuamente reinventando e aprimorando maneiras de se comunicar melhor visual e audivelmente com o público.

Com o acesso cada vez maior às informações do público mais amplo possível, tornou-se imperativo maximizar a acessibilidade para o maior número possível de pessoas.

Acessibilidade é uma bênção disfarçada

Atender a um público mais amplo parece mais trabalho, e é tentador ver a acessibilidade como uma barreira à inovação. No entanto, cumprir os padrões mais recentes pode ser uma bênção disfarçada, especialmente se eles se tornarem uma segunda natureza.

Exemplos disso em termos de design podem incluir a necessidade de um tamanho mínimo da fonte na cópia do corpo, ou uma quantidade significativa de contraste entre a cópia e o plano de fundo, ou áreas vinculáveis ​​maiores em dispositivos touch.

Não se trata apenas de deficiências

A acessibilidade não serve apenas para deficiências, como alguns implicariam, mas também para usuários com dispositivos e navegadores herdados que não oferecem suporte a todos os recursos e aprimoramentos mais recentes. Estar consciente desses padrões e observá-los reduzirá naturalmente as decisões de design.

5. Usando padrões experimentados e testados

O fato é que os usuários acham as interfaces intuitivas quando estão em conformidade com as centenas de padrões de design comuns que foram absorvidos pelos anos de prática e exposição. Assim que começamos a romper com os moldes típicos e a pisar novos caminhos, podemos descobrir que leva um tempo para que um novo padrão se torne completamente intuitivo para as massas.

Há um tempo e um lugar para a criação de padrões de interface do usuário originais, mas não devemos evitar técnicas comuns - elas são bem-sucedidas por um motivo.

O lado positivo é que devemos nos preocupar menos em reinventar e nos concentrar na estética. Ainda é possível criar trabalho original com base em padrões estabelecidos.

Quanto mais conhecemos e integramos padrões de design bem-sucedidos, menos escolhas temos que fazer como designers. Não estamos necessariamente considerando o que pode funcionar, mas o que funcionará.

Nota final

Algumas dessas abordagens podem, individualmente, não reduzir muito nosso pensamento e tomada de decisões, ou melhorar nossos projetos por uma margem enorme. Incorporá-los juntos, no entanto, além de obter bons comentários ao longo do caminho, pode facilitar significativamente o design de uma interface do usuário melhor.

Siga me no twitter