O melhor guia de design de interface do usuário

O que é design de interface de usuário? Uma pergunta melhor seria, o que realmente entra no design de uma interface de usuário? Estética? Usabilidade? Acessibilidade? Todos eles? Como todos esses fatores se unem para permitir uma experiência ideal do usuário e qual deve vir primeiro?

A acessibilidade deve sempre vir em primeiro lugar, estabelecendo as bases para a usabilidade ideal. E então, quando uma interface do usuário é acessível e utilizável, ela já deve parecer bastante decente em termos de estética. Então, para garantir que seu design funcione em todos os níveis, você precisará testá-lo completamente, o que você pode fazer com a nossa seleção das melhores ferramentas de teste do usuário. Vamos dar uma olhada mais de perto nos elementos fundamentais da maioria dos projetos e no que pode ser feito para garantir a consistência visual.

01. Escolha sua tipografia

A grande tipografia (como muitos aspectos do design) se resume à acessibilidade. O design visual certamente aumenta a experiência geral do usuário, mas no final do dia, os usuários estão interagindo com a interface do usuário, não vendo-a como arte. Letras legíveis resultam em clareza e palavras legíveis são o que ajudam os usuários a digerir conteúdo de forma eficiente. Ambos são mais importantes do que qualquer estética visual.

No entanto, a tipografia bem projetada ainda pode ser esteticamente satisfatória. Helvetica preto-sobre-branco (ou uma fonte semelhante) pode ser uma coisa de beleza depois de apenas alguns aprimoramentos tipográficos simples. Por melhorias, queremos dizer ajustar o tamanho da fonte, a altura da linha, o espaçamento da letra e assim por diante – não a fonte ou a cor do texto.

A tipografia ‘linda’ é realmente feia quando é ilegível porque a frustração sempre supera a estética. Grande design é equilibrado e harmonioso.

Como muitos aspectos do design de interface do usuário, o ajuste fino do visual para equilibrar acessibilidade e estética não é o desafio. O desafio é manter a consistência em todo o projeto. A consistência estabelece uma hierarquia clara entre elementos de importância variada, o que, por sua vez, ajuda os usuários a entender uma interface do usuário mais rapidamente e até mesmo digerir conteúdo de forma mais eficiente.

Quando se trata de legibilidade e legibilidade, o tamanho mínimo aceitável da fonte definido pelas Diretrizes de Acessibilidade de Conteúdo Web WCAG 2.0 é 18pt (ou 14pt em negrito). O melhor tamanho de fonte para usar depende em grande parte da fonte em si, mas é importante estar atento à hierarquia visual e como esse tamanho base se distingue de resumos e títulos (ou seja, <h1>, <h2>, <h3>).

Com sua ferramenta de design de interface do usuário escolhida (usaremos o InVision Studio), crie uma série de camadas de texto(T)e, em seguida, ajuste todos os tamanhos para se correlacionar com o seguinte modelo:

• <h1>: 44px
• <h2>: 33px
• <h3>: 22px
• <p>: 18px

Com o InVision Studio (e todas as outras ferramentas de design de interface do usuário), isso é feito ajustando os estilos usando o painel Inspetor no lado direito.

Em seguida, escolha sua fonte, mas cuidado porque o que você pode notar com algumas fontes é que 18px <p> e 22px <h3> não parece tão diferente. Temos duas opções: ajustar os tamanhos da fonte ou considerar uma fonte diferente para títulos. Vá com este último se você antecipar que seu design será pesado para texto.

Tenha em mente que:

• Design visual da interface do usuário é muitas vezes uma abordagem de sentimento intestinal
• Nada está decidido; tudo está sujeito a mudanças

Altura da linha

A altura ideal da linha garante que as linhas de texto tenham espaçamento suficiente entre elas, a fim de alcançar níveis decentes de legibilidade. Isso está se tornando cada vez mais reconhecido como um “padrão”; A ferramenta de auditoria do Farol do Google até sugere como uma verificação manual (ou até mesmo uma sinalização se o texto contém links que podem estar muito próximos como resultado da altura da linha subótimal).

Mais uma vez, o WCAG nos ajuda com este, declarando que as alturas da linha devem ser de 1,5x o tamanho da fonte. Assim, na sua ferramenta de design de interface do usuário em ‘Line’ (ou similar), basta multiplicar o tamanho da fonte por – pelo menos – 1,5. Como exemplo, se o texto do corpo for de 18px, então a altura da linha seria de 27px (18* 1.5 – você também pode executar a operação de matemática diretamente no Inspetor). Novamente, porém, fique atento – se 1,6x achar melhor ajuste, use 1,6x. Lembre-se que diferentes fontes produzirão resultados diferentes.

É muito cedo para pensar em usar dados reais em nosso design, mas, no mínimo, ainda devemos usar dados um pouco realistas (mesmo lorem ipsum). O InVision Studio tem um aplicativo de dados real nativo para nos ajudar a ver como nossa tipografia pode realmente se parecer.

Espaçamento de parágrafos

O espaçamento de parágrafos não é um estilo que podemos declarar usando o Inspetor do InVision Studio. Em vez disso, precisaremos alinhar manualmente camadas usando Guias Inteligentes (⌥). Semelhante à altura da linha, o multiplicador mágico é 2x (o dobro do tamanho da fonte). Como exemplo, se o tamanho da fonte for de 18px, então deve haver pelo menos um espaço de 36px antes de levar para o próximo bloco de texto. O espaçamento da letra deve ser de pelo menos 0,12.

No entanto, não precisamos nos preocupar com isso até começarmos a criar componentes.

Estilos compartilhados

Se a ferramenta de design de interface do usuário o suportar (o InVision Studio ainda não o faz), considere transformar esses estilos tipográficos em ‘Estilos Compartilhados’ para torná-los rapidamente reutilizáveis, garantindo consistência visual. Isso geralmente é feito através do Inspetor.

02. Escolha a paleta certa

Selecionar as cores perfeitas para o seu design vai muito além da estética: ele pode informar toda a hierarquia do seu site.

Quando se trata de design de interface do usuário, a cor é habitualmente uma das primeiras coisas que gostamos de brincar, mas nos ensinaram que mergulhar direto no design visual é uma coisa ruim. Isso é certamente verdade, no entanto, quando se trata de consistência visual, a cor deve ser uma grande preocupação porque desempenha outros papéis.

A cor no design da interface do usuário pode ser muito eficaz, mas como alguns usuários (muitos, na verdade) sofrem de vários tipos de deficiência visual, nem sempre é confiável. Dito isso, não é necessariamente sobre a cor específica que está sendo usada, mas sim o tipo de cor. Isso pode não ser verdade quando se trata de marca, uma vez que a cor é usada para impacto emocional nesse sentido, mas, no design da interface do usuário, a cor também é usada para comunicar intenção, significado e, claro, hierarquia visual.

PRINCIPAIS FERRAMENTAS E RECURSOS

01. Stark

O plugin Stark é compatível com Sketch e Adobe XD e ajuda você a verificar o contraste de cores e simular cegueira de cores diretamente da tela. Suporte para Figma e InVision Studio em breve

02. Cores

Cores é um conjunto de 90 combinações de cores que têm a quantidade apropriada de contraste de cores, a fim de satisfazer as Diretrizes WCAG 2.0 – algumas delas até conseguem atender ao padrão AAA

03. Projeto A11y 

O ProjetoA11y é um hub enorme para todas as coisas relacionadas à acessibilidade. Ele inclui recursos, ferramentas, dicas, tutoriais e é criado pelo fabricante do plugin Stark e recebe financiamento do InVision.

Os três tipos de cor

As cores têm significado, por isso é importante não ter muitas delas. Muitos significados resultam em mais coisas que o usuário tem que entender e lembrar – sem mencionar mais combinações de cores para nos preocuparmos. De um modo geral, este seria o formato recomendado:

• Uma cor chamada à ação (também a cor principal da marca)
• Uma cor escura neutra (melhor para elementos de interface do usuário ou modo escuro)
• Para todos os acima, uma variação ligeiramente mais clara e escura

Isso permite o seguinte:

• O modo escuro será facilmente alcançável
• Nossa cor CTA nunca entrará em conflito com outras cores
• Em qualquer cenário, poderemos enfatizar e desa ênfase

Configure sua paleta

Com sua ferramenta de design de interface do usuário escolhida, crie uma prancheta bastante grande (toque A) para cada cor (denominada ‘Marca’, ‘Neutra / Luz’ e ‘Neutra / Escura’). Em seguida, em cada prancheta, crie retângulos menores adicionais exibindo as variações mais escuras e claras da cor e também as outras cores em si.

Consideraríamos um pouco mais claro e mais escuro como 10% branco extra e 10% preto extra, respectivamente. Quando terminar, exiba uma cópia dos estilos tipográficos em cada prancheta. A cor dessas camadas de texto deve ser luz neutra, exceto na prancheta de luz neutra onde elas devem ser escuras neutras.

Contraste

Em seguida, precisaremos verificar nossas cores para obter o contraste de cores ideal. Há uma variedade de ferramentas que podem fazer isso, por exemplo, o plugin Stark para Sketch e Adobe XD ou Contraste para macOS – no entanto, uma solução on-line como Verificador de Contraste ou Verificador de Contraste de Cores vai fazer muito bem.

Verifique o contraste de cores para cada combinação e ajuste as cores de acordo. Se você não tem certeza de quais cores usar, tente usar as recomendações do Color Safe.

03. Estilo links e botões

Tamanho

Botões e links, assim como a tipografia, devem ter algumas variações. Afinal, nem todas as ações são de igual nível de importância e, como discutimos anteriormente, a cor é um método de comunicação não confiável, por isso não pode ser o principal método de influenciar a hierarquia visual. Também precisamos brincar com tamanho.O QUE É TESTE VISUAL DE ACESSIBILIDADE?

Um teste de acessibilidade visual é um teste de usabilidade usado para determinar se os alvos de toque parecem ser clicáveis. Sincronize o design de Studio para Freehand(⌘,F),envie a URL resultante para os testadores e os envie os elementos que eles acreditam serem clicáveis.

Os usuários do InVision Studio também podem usar o Freehand, mas os usuários do InVision Studio podem lançar seus designs no Freehand perfeitamente do InVision Studio, que é a maneira mais rápida e eficiente de adquirir feedback visual dos usuários.

Geralmente, recomendamos que o texto do botão seja declarado como 18px (o mesmo que o texto do corpo), mas que os próprios botões tenham três variações de tamanho:

• Normal: 44px de altura (cantos arredondados: 5px)
• Grande: 54px de altura (cantos arredondados: 10px)
• Extra grande: 64px de altura (cantos arredondados: 15px)

Isso nos permite fazer com que certos botões pareçam mais importantes sem depender da cor e também de botões de ninho (por exemplo, use um botão dentro de um campo de forma de aparência mínima).

Profundidade

Independentemente de o alvo de toque ser um botão ou um campo de formulário, as sombras devem ser usadas para aumentar a profundidade e, portanto, sugerir interatividade. Um único estilo de sombra para todas as variantes de botões e campos de forma é bom.

Interatividade

Cada tipo de botão precisa de uma variação para indicar seu estado de pairar. Isso esclarece ao usuário que o que eles tentaram fazer é totalmente bom e garante que eles continuem sem demora.

Este é, na verdade, um dos aspectos mais complexos de manter a consistência visual porque a cor é muitas vezes o estilo preferido para mudar quando se trata de criar um estado. Felizmente, essas mudanças de estado podem ser relativamente sutis, por isso é bom mudar a cor em sua variação ligeiramente mais clara ou mais escura – é para isso que eles são. Isso também se aplica aos links.

Decidir contra isso nos fará usar uma cor que já tem um significado significativo, resultando em usuários ficando confusos, ou então decidindo chegar a outra cor. Decidir usar uma cor secundária é totalmente bom, mas deve ser salvo para visualizações de marketing em vez de elementos de interface do usuário. Menos é mais (e mais fácil).

Lembre-se de repetir este passo para cada prancheta. Não inclua os botões CTA da marca na prancheta da marca – mais tarde, abordaremos o que acontece quando certas combinações não funcionarem.

04. Crie seus componentes

Os componentes são um grande poupador de tempo e todas as ferramentas de design de interface do usuário oferecem esse recurso (por exemplo, no Sketch, eles são chamados de Símbolos). No Studio podemos criar componentes selecionando todas as camadas que devem compor o componente e usando o atalho ⌘K.

Usando componentes

UTILIZAÇÃO DE WIREFRAMES

Os wireframes são muito úteis, não apenas para projetar UIs de alta usabilidade, mas também para descobrir o que nossa interface do usuário exigirá a longo prazo. É como uma prova de futuro.

Isso não significa que precisamos projetar cargas de componentes ou estar prontos para qualquer cenário possível, mas isso significa que precisamos empregar uma atitude “E se?”.

Por exemplo, se nosso wireframe exige um componente 3×1, mas sabemos que o conteúdo não está definido em pedra, um pouco de contemplação pode nos levar a pensar: ‘E se esses componentes acabarem sendo 4×1?’. A regra geral é: design apenas para as necessidades do usuário que já existem, mas tente tornar as soluções relativamente flexíveis. Caso contrário, vamos acabar com alguma “dívida de design” muito bagunçada mais tarde.

Agora podemos reutilizar esse componente arrastando-o para a tela das Bibliotecas > Documento no lado esquerdo, embora tenha em mente que este fluxo de trabalho pode diferir dependendo da sua ferramenta de interface do usuário.

Este método de criação de guias de estilo (e eventualmente criar o design em si) funciona especialmente bem com layouts modulares/baseados em cartões, embora “áreas comuns” como cabeçalhos, rodapés e navegaçãos também sejam excelentes candidatos a um componente.

Assim como fizemos com nossos estilos, cores e botões tipográficos, devemos lembrar de organizar nossos componentes cuidadosamente.

Utilizando nossas regras

Mais cedo fizemos uma observação sobre não usar botões CTA da marca em cima da cor da marca, já que os botões CTA da marca obviamente precisam se destacar entre tudo o resto. Então, como vamos criar um componente de marca enquanto ainda podemos usar um botão CTA da marca? Afinal, se estamos usando botões escuros neutros para, digamos, botões de navegação ou simplesmente botões menos importantes, isso simplesmente não seria uma opção, certo?

Direita. Portanto, esta seria uma oportunidade ideal para criar um componente – especificamente, uma combinação de título + texto + botão. Observe como criei um pano de fundo de luz neutra para permitir o uso do botão da marca. Da mesma forma, o campo de forma de luz neutra (campos de forma geralmente são brancos por causa do modelo mental historicamente sinônimo de formas de papel) não parece incrível no fundo de luz neutra, então eles só podem ser usados no fundo escuro neutro – diretamente ou dentro de um componente escuro neutro. É assim que flexibilizamos nosso design, obedecendo nossas regras e mantendo a consistência.

Teste de estresse

Idealmente, a maneira mais rápida e eficaz de garantir robustez em nosso design é estressá-lo testá-lo. Colocar um desenho à prova significa ser cruel. Digamos que temos uma navegação com x quantidade de itens de navegação porque essa era a exigência; a fim de realmente garantir flexibilidade, tente alterar esses requisitos adicionando mais itens de navegação ou, para realmente jogar uma chave inglesa nos trabalhos, tente também adicionar um item de navegação com uma hierarquia visual maior do que os outros. Nosso tamanho, tipografia e regras de cores permitem algo assim? Ou para oferecer a usabilidade ideal precisamos de outra regra?

Tenha em mente que há uma diferença entre adicionar regras e quebrar as regras. Mais casos de borda significa menos consistência, então na maioria das vezes é melhor para o bem da usabilidade simplesmente repensar o componente.

05. Documentar e colaborar

Como tornar nossos arquivos de design mais fáceis de usar para nós mesmos e para qualquer outro designer que possa usar nosso arquivo de design? Vamos dar uma olhada.

Cores

O primeiro passo é salvar todas as cores da amostra ‘Cores de documento’ se ainda não o fizemos – isso as tornará mais fáceis de acessar quando precisamos aplicá-las em nosso design. Para isso, abra o widget escolhidor de cores do Inspetor, escolha ‘Cores de documento’ do dropdown e clique no ícone + para adicionar a cor à amostra. Isso funciona da mesma forma na maioria das ferramentas de interface do usuário.

Bibliotecas Compartilhadas

Em seguida, precisamos converter nosso documento – completo com estilos tipográficos, cores, botões, áreas comuns e componentes básicos – em uma biblioteca compartilhada.

Essencialmente, isso significa que cada elemento precisa ser um componente, mesmo que consista em apenas uma camada. Clique no botão + na barra lateral das bibliotecas do lado esquerdo e, em seguida, importe este próprio documento em um novo documento. Isso mesmo: nosso documento agora é uma biblioteca e está pronto para ser usado para projetar UIs com consistência garantida.

O InVision Studio é um pouco limitado no sentido de que ainda não sincroniza com a ferramenta oficial de Design System Manager do InVision, mas é fácil o suficiente para abrigar a biblioteca no Dropbox para outros designers usarem e atualizarem ao longo do tempo. Quando uma alteração é feita (local ou remotamente), cada arquivo studio que usa a biblioteca (novamente, local ou remotamente) perguntará se você deseja atualizar as cores e componentes. É assim que as bibliotecas de design são mantidas entre as equipes.RECICLAR TUDO

Quando se trata de projetar interfaces de usuário que são visualmente consistentes, reaproveitee tudo. Designar botões e, em seguida, usar botões

para criar componentes de botão e, em seguida, usar componentes de botão para criar outros componentes, como alertas e diálogos.

Só não crie componentes que não sejam necessários. Lembre-se, construir uma biblioteca é um esforço contínuo e colaborativo. Ele não precisa ser concluído de uma só vez, completado por você sozinho ou concluído nunca. Só tem que transmitir uma língua.

Design em escala

À medida que um design se expande, gerenciá-lo torna-se mais difícil. Existem vários ajustes que podemos querer fazer para mantê-lo eficiente e mantenedor, especialmente porque o DSM da InVision ainda não funciona com o Studio.

Por exemplo, podemos querer usar camadas de texto para anotar nossa biblioteca como um meio de explicar os casos de uso de vários elementos. Para os estilos tipográficos, poderíamos até editar o texto para ser mais descritivo (por exemplo, “<h1> / 1.3 / 44px”). Isso diz que <h1>s deve ser de 44px e ter uma altura de linha de 1.3.

Design Handoff

As ferramentas de handoff do design exibem os vários estilos usados por cada elemento no design para que os desenvolvedores possam construir o aplicativo ou site. Essas ferramentas incluem uma visão geral dos estilos e também uma cópia da amostra de “cores de documento”. Os desenvolvedores podem até copiar esses estilos como código, o que é excelente se você decidiu criar qualquer documentação de design escrito e você gostaria de incluir representações de trechos de código dos componentes.

A ferramenta de entrega de design do InVision é chamada De inspecionar e para utilizá-la tudo clique no botão/ícone ‘Publicar para InVision’ no InVision Studio, abra a URL resultante e toque para mudar para Modo de Inspeção. É muito conveniente.