Alguma vez sentiu a frustração de navegar num website ou numa aplicação sem perceber como funciona? Claro que sim.
A razão por detrás da sua frustração é, muito provavelmente, uma interface mal concebida que não lhe permite navegar intuitivamente. Em vez disso, tem de parar e analisar cada elemento para perceber como funciona e para que serve.
Um dos erros mais comuns que conduzem a um mau design de produto é a inconsistência na UI.
Além de ser um dos erros mais frequentes, é também muito fácil de corrigir ou evitar. Por isso, vamos compreender em que consiste a inconsistência na UI e como pode garantir que os seus utilizadores não se deparam com ela.
Compreender a consistência da UI
Como o nome indica, a consistência da UI consiste em ter elementos de UI idênticos, um design atómico e uma experiência de utilizador geral iguais para o mesmo tipo de ação ou entidade no seu produto.
Se tiver botões de ação primária em vários locais da sua interface, todos devem ter o mesmo aspeto (UI) e funcionar da mesma forma (UX). Por exemplo, se iniciar sessão na sua conta Dropbox e percorrer as diferentes secções, irá reparar que todos os botões de ação primária são idênticos.
Se olhar com mais atenção, não são apenas os botões de ação primária que mantêm uma aparência consistente no Dropbox, mas praticamente todos os elementos.
Existem várias razões importantes para as equipas de design prestarem muita atenção a um design de interface de utilizador consistente. Nomeadamente:
- Tem um aspeto limpo e agradável à vista. A diversidade não é o melhor atributo das interfaces de utilizador. Ter demasiados tipos de elementos visuais torna a interface pesada e dificulta a leitura.
- Tem um aspeto profissional. Uma interface de utilizador limpa transmite uma impressão de profissionalismo e competência. Os utilizadores tendem a confiar mais nas marcas quando os seus websites ou produtos são bem concebidos.
- Melhora a experiência do utilizador. Se vir um botão preto em algum lugar do Dropbox e o identificar como a ação primária, sempre que vir um botão com um aspeto idêntico saberá que também se trata de uma ação primária. Assim, não terá de pensar no que esse botão deve fazer de cada vez que encontrar um.
Por fim, existe também o fator do desenvolvimento desta interface. Se tiver elementos de UI consistentes em todo o produto, a equipa de desenvolvimento do front-end não terá de criar cada novo elemento de raiz. Em vez disso, criará um único elemento e reutilizá-lo-á nos novos ecrãs que precisar de desenvolver. Desta forma, reduzirá drasticamente o tempo necessário para criar novas interfaces e funcionalidades.
Apesar da sua importância e do seu impacto na experiência do utilizador, o design consistente nem sempre está presente. Até os grandes produtos tecnológicos são culpados deste problema. O menu de definições do Android é o meu exemplo preferido.
Observe os diferentes elementos desta lista e diga-me quais são clicáveis (botões) e quais são apenas texto informativo. É provável que não consiga responder, a menos que abra o mesmo menu no seu telemóvel e comece a tocar em tudo.
Mesmo que tenha adivinhado corretamente (é “Dados da conta Google” e “Fotografias e vídeos”), precisou de algum processamento cognitivo para o fazer.
Não é assim que a UX deve funcionar. Afinal, a famosa citação do especialista em UX Steve Krug diz:
Não me faça pensar.
Já agora, recomendo vivamente que leia o seu livro, juntamente com a “bíblia” da UX de Don Norman - O Design das Coisas do Dia a Dia.
A ideia geral é que os seus utilizadores conseguirão reconhecer automaticamente os elementos da sua UI, sem terem de pensar no que são, e navegar pela sua aplicação ao nível da “memória muscular”.
Fundamentos do design de UI
Antes de avançarmos para compreender como manter a consistência do seu design, vamos revisitar os princípios fundamentais de design que tornam possível, desde logo, criar uma UI fácil de utilizar e consistente.
Have an account? Log In
Clareza e simplicidade
Já lá vai o tempo dos websites com GIFs intermitentes e todas as cores do arco-íris representadas na UI (millennials, lembram-se desses tempos?).
À medida que mais pessoas começaram a utilizar a Internet, os designers de UI e UX começaram a prestar mais atenção à forma como percecionam e interagem com as interfaces de utilizador.
O que descobriram pouco depois foi que ter demasiadas cores e elementos visuais estava a impedir os utilizadores de realizar as tarefas que pretendiam. Em vez disso, a única coisa que obtêm ao navegar por UIs deste tipo é fadiga ocular.
Por isso, naturalmente, avançámos no sentido do minimalismo e da simplicidade. A consistência da UI é, de facto, outra forma de tornar a sua interface mais simples.
Hierarquia visual
Quando tem muitos elementos no ecrã, torna-se difícil compreender a relação entre eles. Por exemplo, como sabe se determinado texto é o cabeçalho de um artigo ou apenas parte do texto?
Pode ajudar os seus utilizadores a compreender estas relações através da hierarquia visual. Ao colocar os elementos no topo, torná-los maiores, coloridos, a negrito e utilizando outros truques, pode ajudar os utilizadores a perceber facilmente que são mais importantes do que os outros elementos no ecrã. Assim, os utilizadores olharão intuitivamente primeiro para esse elemento antes de avançarem para o segundo.
Existe um meme famoso que demonstra a magia da hierarquia visual.
Sorriu ao ler o texto aqui, não foi? É isso mesmo: tal como qualquer outro ser humano, a sua visão está programada para seguir também a hierarquia visual.
Retorno
Sempre que o seu utilizador realiza uma ação no seu produto, espera compreender se essa ação foi executada ou não.
Se clicar no botão de eliminar e nada acontecer depois, poderá ficar confuso. A eliminação foi realizada ou ocorreu um erro? Para ajudar os utilizadores neste caso, terá de lhes fornecer feedback visual (ou sonoro e até háptico) que lhes indique os resultados da ação.
Se o seu sistema processou com êxito o pedido de eliminação, informe-os de que o item foi eliminado. Se, pelo contrário, encontrar um erro, informe-os também. Desta forma, saberão que o item não foi eliminado e que precisam de tentar novamente ou contactar o suporte.
Boas práticas para alcançar a consistência da UI
À primeira vista, a consistência da UI é muito simples e qualquer designer deverá conseguir alcançá-la. Isso é verdade, partindo do princípio de que é a única pessoa a trabalhar no produto e de que o próprio produto é pequeno e simples.
A partir do momento em que começa a trabalhar como parte de uma equipa maior (em que cada designer tem o seu próprio estilo individual) e num produto constituído por dezenas de páginas e funcionalidades, manter os elementos consistentes torna-se um verdadeiro desafio.
Simplesmente não consegue lembrar-se fisicamente do aspeto de cada elemento de todo o produto e reproduzi-lo na nova funcionalidade em que está a trabalhar.
Felizmente, existem muitos processos e estruturas que permitem reduzir o risco de introduzir inconsistências no seu design. Eis as três que são consideradas normas do setor.
Guias de estilo: este é um documento que define as normas de design do seu produto e representa a identidade da sua marca. Inclui a tipografia (ou seja, os tipos de letra, os respetivos tamanhos, posicionamento, etc.) para diferentes tipos de texto (por exemplo, cabeçalhos, corpo de texto, comentários, etc.), a iconografia, a sua paleta de cores e outros elementos fundamentais do design.
Com um guia de estilo, garante que toda a equipa de design trabalha de acordo com as mesmas normas globais e mantém o conteúdo, as cores e os ícones consistentes em todo o produto.
A Apple é provavelmente o melhor exemplo de aplicação do seu guia de estilo em todo o lado, incluindo nas empresas que desenvolvem aplicações para os seus produtos.
O exemplo apresentado é o guia de estilo do botão que pode colocar no seu site para permitir que os utilizadores descarreguem a sua aplicação a partir da App Store. Como pode ver, a Apple é muito clara relativamente à forma como este botão pode ser utilizado.
Bibliotecas de padrões: este é outro documento orientador que se centra na descrição dos detalhes de baixo nível da sua norma de design, ao contrário do anterior, que apresenta os elementos essenciais do design a alto nível. As bibliotecas de padrões de design são um resultado comum quando a sua equipa aplica o design atómico.
O conceito de design atómico consiste em ter pequenos elementos de UI claramente definidos que, quando combinados, criam elementos mais complexos. As categorias comuns de elementos e as suas combinações nesta estrutura incluem:
- Átomos (daí o nome): Elementos básicos, como formulários, botões, ícones e outros. Estes são elementos que não pode decompor mais.
- Moléculas: Combinação de átomos que servem um propósito específico. Exemplos disso são a paginação das suas listas, os trilhos de navegação, etc.
- Organismos: Elementos de interface mais complexos, constituídos por vários átomos e moléculas que representam entidades. Estes incluem cartões, barras de pesquisa e outros.
- Modelos: Combinações de organismos reutilizáveis que pode adicionar às suas páginas. Podem ser listas de resultados de pesquisa, secções de descrição de produtos, etc.
- Página: O resultado final do seu design e o local onde o utilizador interage com ele. Como o nome indica, são as diferentes páginas do seu produto, como a página inicial.
Uma biblioteca de padrões é uma coleção de moléculas e organismos padronizados que pode utilizar no seu design. Obtém consistência ao reutilizar sempre os mesmos elementos em diferentes partes do seu produto, uma vez que os utilizadores reconhecerão imediatamente o elemento assim que abrirem uma página específica.
Sistema de design: Esta é a combinação geral de guias de estilo de alto nível, tipos de letra, esquemas de cores e descrições de pequenos elementos da interface do utilizador, bem como uma coleção de componentes de interface prontos a utilizar, que pode usar tanto no seu design como durante o desenvolvimento do produto.
Quase todas as grandes empresas tecnológicas desenvolvem o seu próprio sistema de design para garantir a consistência visual. A Google tem o Material, a Shopify tem o Polaris e a Apple tem o Human Interface. Existem também sistemas autónomos de código aberto que pode integrar facilmente no seu produto e utilizar gratuitamente. O meu favorito entre estes é o ant.design.
Tal como outros sistemas de design, inclui tanto uma biblioteca de design que pode utilizar no Figma ou noutras ferramentas populares como uma biblioteca de componentes pré-codificada em estruturas populares (por exemplo, React), que os seus programadores podem utilizar no código.
Ferramentas para manter a consistência da interface do utilizador
Para manter o seu design consistente em todas as suas equipas e partes do produto, terá de documentar as suas diretrizes e garantir que toda a sua equipa colabora nelas.
Para documentar e aplicar os seus padrões de design aos designs quotidianos de funcionalidades e ecrãs, pode tirar partido das funcionalidades especializadas de muitas ferramentas de design modernas.
O Figma, por exemplo, permite-lhe criar componentes escaláveis que pode armazenar no ficheiro do seu sistema de design e disponibilizar a todos na sua empresa.
Também suporta kits de interface do utilizador, uma biblioteca pré-concebida de diretrizes e regras de design que pode descarregar da biblioteca do Figma e utilizar nos seus produtos. Aqui está um kit para o Material Design da Google.
Este kit específico disponibiliza-lhe uma grande variedade de elementos para conceber uma aplicação Android em conformidade com os padrões de design da Google.
Agora, a parte da colaboração. Sem uma colaboração adequada na sua equipa de design, está condenado a ter elementos que não seguem as suas diretrizes e quebram a sua consistência visual. Felizmente, também existem ferramentas de design UX/UI para promover a colaboração, .
O Zeplin, por exemplo, ajuda os seus designers e programadores a colaborar de forma mais eficaz, criando versões do design adaptadas aos programadores, onde a equipa de programação pode encontrar especificações CSS exatas para os elementos, bem como descarregar facilmente as imagens, os ícones e outros recursos do design. Também se integra com outras ferramentas de desenvolvimento de interfaces para o ajudar a transferir facilmente os seus designs do local onde os criou para o Zeplin.
More Articles
Testar e iterar para garantir a consistência da interface do utilizador
Tal como os requisitos do produto ou a sua estratégia, as diretrizes de design também não são documentos estáticos. Acabará sempre por lhes fazer alterações e mantê-las atualizadas.
Algumas das razões mais comuns para alterar as suas diretrizes incluem:
- Adicionar novos elementos que estavam ausentes na biblioteca.
- Adotar novas tendências de design e boas práticas.
- Encontrar problemas e “erros de design” que precisam de ser corrigidos.
Finalmente, é uma excelente prática deixar a sua equipa de design revê-lo ocasionalmente e fazer-lhe pequenas melhorias.
Além de melhorar o aspeto geral e a qualidade do seu design, este último também lhe permite realizar algo chamado “teste de consistência da UI” quando a sua equipa de design procura ativamente inconsistências no seu sistema de design e as corrige.
Também pode realizar um teste semelhante nos seus designs finalizados. Existe sempre a possibilidade de várias funcionalidades conterem elementos que não estão presentes no kit de UI ou que não têm o aspeto que deveriam ter.
Além de realizar testes internos, também lhe recomendaria envolver ativamente os seus utilizadores no processo de teste. Existem duas formas de o fazer.
- Peça feedback sobre o design, compreenda as necessidades dos seus utilizadores e faça iterações ativamente com base nos comentários deles.
- Realize testes de usabilidade para compreender o nível de consistência da sua interface.
Quanto a este último, imagine que utilizou o seu botão de ação principal em 10 locais diferentes de todo o seu produto. Tem a certeza de que, em todos estes 10 casos, os seus utilizadores irão identificá-lo como a ação principal?
Não pode ter a certeza, a menos que realize testes de usabilidade moderados ou não moderados com protótipos criados na sua ferramenta de UX e veja a forma como interagem com eles.
Com base nestes testes e no feedback dos utilizadores, pode então tomar decisões de design baseadas em dados.
Não me faça pensar
A consistência é um dos elementos fundamentais de um excelente design de UI. Ao manter tudo simples e visualmente idêntico, garante que os seus utilizadores não se perdem na sua interface. Em vez disso, compreendem intuitivamente o objetivo de cada elemento no ecrã e realizam facilmente as suas tarefas.
Não se esqueça de subscrever a nossa newsletter para receber mais recursos e guias sobre gestão de produtos, além dos podcasts, entrevistas e outros conteúdos mais recentes de líderes e especialistas do setor.
