Padronização Em UI: Design De Interfaces Consistentes

Para falarmos sobre padronização em UI, vamos primeiro falar um pouco sobre hambúrguer!

Uma das dificuldades de grandes franquias de restaurantes fast-food é garantir a mesma qualidade de produto e atendimento em todas as lojas.

Essa é uma tarefa difícil porque existem vários fatores externos que podem impedir com que essa consistência e padronização aconteçam.

No entanto, o esforço para essa realização é bastante nobre. Porque, no final do dia, não importa se você está indo em um McDonalds no centro da cidade ou dentro de um shopping. A sua expectativa, tenho certeza, é de que o lanche que você sempre pede terá o mesmo gosto, a mesma qualidade e que o atendimento seja praticamente o mesmo em qualquer unidade que você visite.

A padronização e a consistência melhoram a sua experiência como usuário e consumidor daquela franquia.

No mesmo sentido, podemos dizer que uma interface também precisa ser consistente e padronizada para que o usuário possa ter a melhor experiência ao interagir com ela.

A falta desses conceitos pode trazer confusão e insatisfação do usuário. E fará com que o seu produto tenha falhas de usabilidade.

Continue neste artigo para entender melhor sobre os conceitos de consistência e padronização e como você pode aplicá-los em seus projetos de UX/UI Design.

Dica de Leitura: Um Pequeno Guia Sobre UI Design

O que é ser consistente e padronizado?

Consistência e padronização são dois conceitos bastante comuns em diversos setores de nossas vidas.

Por exemplo, quando decidimos nos tornar mais saudáveis, melhorando nossa alimentação e fazendo exercícios. Nessa situação, nossas atitudes tem que ter consistência — ou seja, coerência — com o nosso pensamento. Não adianta querer perder peso e não agir para isso.

Nesse sentido, podemos padronizar nossos treinos na academia e nossa dieta, para tornar nossa vida saudável ainda mais planejada.

Quando falamos em UX e UI Design, a consistência e padronização também se fazem bastante presentes. Tanto pelo lado dos usuários, quanto pelo lado dos desenvolvedores e do negócio.

Os usuários precisam de consistência

Em termos de experiência, fica mais clara a importância da consistência para o usuário de uma interface.

Durante sua Jornada, o usuário precisa encontrar um conteúdo padronizado e consistente que faz com que sua navegação seja mais fácil e simples.

Nesse sentido, quando falamos de consistência e padronização, queremos dizer que as cores, os botões, a tipografia se mantenham os mesmos por toda a interface e durante toda a experiência do usuário.

Pense em um site onde o botão de Busca está no canto superior esquerdo em uma de suas páginas. Mas em outra página — do mesmo site —, o botão está no canto inferior direito. Muito confuso e estranho, não?

Dessa forma, a consistência e padronização são importantes para o usuário, principalmente por dois motivos:

1. Reduz a carga cognitiva: o usuário não precisa aprender a navegar ou a utilizar — de modo complexo — a sua interface. Quanto mais fácil for a interação, melhor é a jornada e a experiência do usuário.
2. Evita confusão: como no exemplo do botão de busca citado acima. A inconsistência no posicionamento causa confusão no usuário e, dessa forma, fará com que ele desista de continuar na interface.

A importância da padronização em UI para os desenvolvedores e para o negócio

Se por um lado a consistência e padronização são importantes para o usuário, elas também se fazem bastante úteis no lado de cá, dos desenvolvedores e do negócio.

Cada elemento de uma interface é construída através de códigos e de linguagem de programação.

Dessa forma, para criar uma interface inteira, os desenvolvedores investem bastante tempo para elaborar cada peça importante do produto.

Agora, imagine o tempo gasto se os desenvolvedores tivessem que criar os elementos de UI do zero toda vez que fossem criar uma interface — que seja para o mesmo cliente/ produto ou não.

O retrabalho seria enorme.

Portanto, pelo lado dos desenvolvedores, padronizar os elementos e criar um guia de estilo é essencial para poupar tempo e evitar inconsistências. Se, por exemplo, um menu já tem suas definições e estilo padronizadas, fica mais fácil utilizar esse padrão nas diversas outras páginas ou interfaces do mesmo produto ou cliente.

Nesse sentido, a consistência e padronização acabam sendo benéficos para o negócio também. Uma vez que uma grande quantidade de tempo é poupada de retrabalho, a produtividade das áreas acaba melhorando.

Dica de Leitura: Os Benefícios do Design Centrado no Usuário

Como alcançar consistência e padronização em UI?

Existem alguns cuidados e preocupações básicas para se conseguir consistência e padronização em UI. Por isso, listamos 5 tópicos principais que você não pode deixar passar.

1) Defina a sua voz e tom

Este conceito está bastante atrelado ao marketing e ao UX Writing.

Uma interface é composta por diversos elementos de UI que, por sua vez, são preenchidos com conteúdos. Sejam eles gráficos ou textuais.

A voz e o tom estão relacionados à maneira com que você se comunica através dos textos da sua interface. A linguagem deve estar de acordo com os valores da marca e com a imagem que ela quer passar para o público e para a persona.

Dessa forma, o trabalho inicial é entender quais são os valores da marca e do produto e definir um estilo de linguagem — formal, informal, descolado, jovem, conservador.

A definição dos valores irá ditar qual será a voz que deve ser usada na linguagem para que sua interface converse da melhor maneira com o usuário.

Dessa forma, o tom são as variações da sua voz para serem usadas em diferentes momentos da jornada do usuário. Por exemplo, em um texto de introdução na primeira página dos seu site, você pode escolher uma voz mais descolada. No entanto, no mesmo site, numa página de finalização de compra, seu tom tem que mostrar seriedade, mas sem se desprender da voz descolada que foi proposta.

Definir qual será a sua voz e as variações de tom, traz consistência para a sua interface e melhora a comunicação com sua persona/ usuário.

2) Consistência de funcionalidade dos elementos

Ter consistência e padronização de funcionalidade dos elementos, significa que a função de cada elemento de UI deve permanecer a mesma por toda a interface.

Isso quer dizer que botões, menus, janelas de mensagem, barras de rolagem, por exemplo, devem exercer a mesma função esperada pelo usuário por toda sua experiência e jornada.

Quando interagimos com uma interface, esperamos que os elementos funcionem de uma certa maneira — de acordo com nossa experiência dentro da própria interface ou de produtos externos.

Nesse sentido, utilizar o mesmo botão para funções diferentes caracteriza uma falta de consistência e pode surpreender e confundir o usuário.

Lembre-se que nem toda surpresa é boa para a experiência do usuário.

3) Cumpra com as expectativas do usuário

Uma vez que surpreender o usuário pode não ser uma boa abordagem, é importante entender quais são as expectativas dele com relação a interação e jornada pela interface.

Nesse sentido, devemos voltar a atenção para alguns pontos importantes:

• Siga convenções de interação: isso significa utilizar os padrões de comunicação e interação com os quais o usuário já esteja acostumado, seja na sua plataforma ou não. Na prática, ter convenções significa manter a cor vermelha para cancelar uma operação e a verde para continuar, por exemplo;
• Não invente padrões: para resolver problemas na sua interface, utilize os padrões já estabelecidos e que são comuns e familiares ao usuário. Padrões tendem a virar convenções e criam expectativas que sua interface tem que cumprir;
• Não use uma linguagem diferente: evite jargões ou expressões com os quais os usuários não estejam familiarizados.

4) Consistência visual dos elementos

Da mesma forma com que devemos manter a consistência da funcionalidade dos elementos da interface, é importante também manter a sua consistência e padronização visual.

Isso quer dizer que as cores, as fontes, os backgrounds e o próprio conteúdo têm que se manter os mesmos dentro da interface.

Dessa forma, não mude o estilo dos elementos de uma página para outra do seu website, por exemplo. O header deve ser o mesmo em todas as páginas, com as mesmas cores, a logo da mesma forma e com os mesmo menus.

Pode parecer óbvio, mas existem sites que mudam seu estilo em cada página de navegação. Portanto, atente-se a isso.

Dica de Leitura: Entenda Mais Sobre Jornada do Usuário

Ferramentas para estabelecer consistência e padronização em UI nas interfaces

Conseguimos demonstrar como a consistência e a padronização em UI são fatores importantes para a experiência do usuário.

Dessa forma, como podemos construir e administrar esses fatores para que o desenvolvimento da interface seja mais rápido e fácil?

É nesse momento em que começamos a falar sobre ferramentas baseadas em um sistema de componentes.

O sistema de componentes é um recurso que utiliza os mesmos padrões de elementos — ou módulos —  para o desenvolvimento de interfaces, e que são compartilhados com diversas pessoas.

Ou seja, você não precisa codificar todos os elementos novamente quando for desenvolver uma nova interface.

Nesse sentido, podemos citar 3 ferramentas que vão te ajudar a trabalhar com a consistência e padronização através de um sistema de componentes:

• Frameworks;
• Guia de Estilo (style guide);
• Atomic Design.

Frameworks

Os frameworks são ferramentas bastante comuns para os UX Designers.

Basicamente, os frameworks são estruturas — templates — que possuem diversas ferramentas para que os desenvolvedores consigam utilizar suas funções em diversos projetos. Dentre eles, botões, checkboxes, menus e painéis. Todos padronizados para serem usados e reutilizados, poupando bastante tempo.

Nesse sentido, existem diversos frameworks disponíveis no mercado como:

• Bootstrap;
• Materialize;
• Foundation.

Não importa qual você escolha usar, os frameworks são ferramentas bastante úteis para criar interfaces com consistência e padronização.

Apesar da grande facilidade que os frameworks proporcionam, é importante entender que eles tem algumas desvantagens também.

• Caso você precise desenvolver algo específico para uma marca ou produto, o framework acaba não sendo muito útil, por conter elementos padronizados;
• Geralmente não são user friendly para os designers por conterem bastante foco em linguagem de programação;
• Podem conter um número muito alto de elementos os quais vão acabar não sendo utilizados, o que pode proporcionar uma experiência de uso ruim para os desenvolvedores.

Dica de Leitura: O Que Você Precisa Saber Sobre Protótipos?

Guias de Estilo (Style Guides)

Os guias de estilo são outra ferramenta que ajudam na consistência e padronização em UI Design.

Nesse sentido, com um guia de estilo você consegue:

• Documentar todos os componentes da sua interface;
• Listar os elementos de UI e as interações que acontecem na interface;
• Armazenar partes de código para serem usados como referência.

Dessa forma, um guia de estilo é um documento que contém todas as instruções sobre o uso dos elementos nos produtos e interfaces. Compõem o guia de estilo, informações como:

• Tipografia a ser usada, bem como a voz e tom da sua marca e hierarquia dos textos;
• Paleta de cores, contendo as cores da marca/ produto e como usá-las, levando em consideração suas variações como contraste, tons e sombras;
• Como utilizar layouts responsivos, ou seja, quais os breakpoints da sua interface, por exemplo;
• Botões, tabelas, listas, barra de ferramentas, menus, janelas, mensagens, etc. Ou seja, todos os elementos essenciais para o desenvolvimento da interface.

Além da lista de elementos e recursos, o guia de estilo também contempla instruções mais profundas sobre o uso dos componentes. Isso inclui:

• Tabela de conteúdos;
• Instruções sobre o que se pode fazer e o que não se deve fazer com cada um dos elementos;
• Instruções sobre posicionamento, alinhamento e espaços;
• Notas de contextualização para descrever as circunstâncias, motivos e objetivos do desenvolvimento da interface;
• Partes de códigos para facilitar o desenvolvimento de elementos.

O guia de estilos é uma ferramenta bastante interessante para ditar e instruir a como entregar consistência e padronização para o seu produto. Mas lembre-se de que tão importante quanto construir um guia de estilo é compartilhá-lo com a sua equipe.

Dica de Leitura: Alinhamento em UI Design

Atomic Design

Atomic Design é um conceito criado pelo Designer Brad Frost.

Neste conceito, Frost indica que toda interface pode ser quebrada em diversos elementos menores que são essenciais para a sua formação.

Nesse sentido, ele traça uma analogia entre os elementos que constroem uma interface e os elementos que constroem o universo. Daí o nome Atomic Design.

O paralelo traçado por Frost, resumidamente, pode ser descrito da seguinte forma:

Átomos

São os elementos primários de uma interface. Aqueles que não podem mais ser quebrados ou separados do todo. São as unidades elementares para a criação de uma interface.

Aqui podemos citar como exemplo elementos básicos de HTML como rótulos, botões, inputs. Tudo o que não pode ser mais quebrado sem perder sua função elementar.

Moléculas

Na natureza, as moléculas são o resultado da junção de vários átomos. Nesse mesmo sentido, em uma interface, as moléculas são componentes simples de UI, criados a partir dos elementos primários.

Aqui podemos citar o exemplo de um campo de busca formado por rótulos, botões e inputs. O componente foi formado por diversas unidades elementares juntas, assim como acontece com átomos e moléculas na natureza.

Organismos

São componentes mais complexos, criados a partir da junção de várias moléculas, ou, no caso, de vários outros componentes mais simples de UI.

Os organismos formam seções inteiras dentro de uma interface. Por exemplo, as seções de categorias específicas dentro de um site de e-commerce.

Templates

São os layouts criados a partir do posicionamento dos componentes de UI e demonstram a estrutura implícita da interface.

Páginas

São o resultado final da interface, aplicando conteúdo real sobre os elementos e componentes de UI.

Qual a vantagem de usar o Atomic Design?

Com relação à consistência e padronização, o Atomic Design é importante para obter uma separação clara entre a estrutura da interface e o seu conteúdo.

Dessa forma, e seguindo o conceito da composição dos elementos, o Atomic Design pode se tornar uma ferramenta bastante apropriada para criar consistência e padronização da sua interface. Isso porque a construção do todo está baseada nos pequenos elementos singulares que dão origem aos componentes mais complexos.

Nesse sentido, você consegue estabelecer uma ordem hierárquica entre os elementos e estabelecer seus padrões e suas funções base dentro do seu produto/ interface.

Além disso, o Atomic Design permite a criação de uma linguagem única para padronizar os componentes, ajudando na produção de um inventário da sua interface que contém todos os elementos utilizados.

Portanto, apesar de precisar de um maior investimento de tempo no começo, o Atomic Design é um método muito interessante para conseguir criar padrões e deixar a sua interface e o seu desenvolvimento mais consistente.

Para saber mais sobre o conceito de Atomic Design, acesse o site de Brad Frost.

A consistência e padronização em UI não devem ser restrições

Ao longo deste artigo entendemos melhor sobre a consistência e padronização em UI e quais as suas vantagens no desenvolvimento de projetos.

Apesar de criar mais velocidade e reduzir os custos, criar padrões e consistências não devem servir como restrições para novas ideias e inovações em seu design.

O objetivo da padronização e da consistência é melhorar a experiência do usuário, eliminando obstáculos cognitivos e que podem deixá-lo confuso. No entanto, atente-se para não ficar preso a essas regras a ponto de parar de criar novas experiências e designs para o seu produto e seus usuários.