Construção de Interface

Há diversos fatores para serem considerados no momento da construção de uma boa interface de um projeto, esse tutorial tem como objetivo informar dicas e ferramentas para auxiliar na construção de uma interface mais acessível e convidativa.

Design & Interface

Design é uma forma de direcionamento de um determinado conteúdo para um usuário genérico. Ou seja, é uma forma de transmitir um determinado material para alguém. Assim, o design se divide em: Design de Produto, Gráfico/Visual e de Serviços, que servem para esse mesmo propósito, funcionar como ponte de um ou mais interlocutores para o conteúdo, seja esse conteúdo físico, digital ou até mesmo um serviço.

Um “bom” design é fundamental para a construção da identidade de uma marca, através dele é possível transmitir a mensagem que os criadores do projeto querem passar, ele é responsável para a criação e modelagem da experiência que o usuário terá, é importante que ele reflita as necessidades do público alvo e gerem conexão com o público. Especialmente, com a chegada da era digital, o designer passou a ter um papel ainda mais estratégico na comunicação, afinal, com a popularização das redes sociais, foi gerado também uma necessidade maior de se destacar em meio à concorrência.

Ou seja, o design é central para que as pessoas possam acessar o conteúdo de forma inteligível, reconhecer a identidade da empresa/serviço que está por trás e navegar por entres as diferentes informações e tipos de mídia que existem na atualidade de forma adequada. A essência do design é transmitir a funcionalidade e ser acessível para um público plural. Nesse sentido, um dos tópicos relevantes que surge nessa discussão é a importância da acessibilidade.

Acessibilidade

Em mundo cada vez mais digital, acessibilidade não se trata mais de somente criar rampas e colocar piso tátil direcional nas ruas, também se torna importante criar e considerar a acessibilidade das plataformas digitais, pois isso é essencial para eliminar barreiras e garantir que todos tenham acesso à informação de forma eficaz, incluindo, então, pessoas com deficiências, sejam essas visuais, auditivas, motoras ou cognitivas.

Considerar a acessibilidade garante também outros benefícios além da inclusão digital, já que geralmente resultam em uma melhor experiência para todos os usuários, ela garante também um melhor posicionamento em mecanismos de busca, como o Google, já que sites acessíveis são mais bem classificados nesses aplicativos o que aumenta a sua visibilidade online e, por fim, garantem também conformidade legal, visto que em muitos países, existem regulamentações que exigem a acessibilidade de sites governamentais e de serviços essenciais, inclusive o Brasil, que desde 2015 está em vigor a Lei Brasileira de Inclusão da Pessoa Com Deficiência (Lei 13.146), que torna obrigatória a acessibilidade em sites da internet de empresas públicas ou privadas.

Nesse sentido, podemos considerar o Guia WCAG, ou Web Content Accessibility Guidelines, que trata das diretrizes existentes para a criação de produtos acessíveis para a web e demais aplicativos. Nele consideramos 4 princípios principais: o da percepção, que determina se o usuário consegue identificar todas as informações e elementos na interface, o da operação, que determina que todos as componentes da interface sejam operáveis, o da compreensão, que determina que todos os usuários consigam compreender o conteúdo da interface e, por fim, a robustez, que determina que a interface deve ser compatível com diversos tipos de tecnologia, incluindo assistentes de acessibilidade.

Dessa forma, no caso da deficiência visual, temos que, ela vai bem além da perda total de visão, precisamos considerar também o daltonismo, perda parcial e perdas decorrentes da idade, e por isso é de suma importância, considerar fatores como o contraste das cores e os tamanhos das fontes, já, para as pessoas com perda considerada, existem programas de leitura de tela que descrevem o conteúdo e leem o texto da interface como o Voiceover para o Mac e o Jaws para o Windows. Sendo assim, se torna importante também a descrição das imagens em sua interface, para que os programas de leitura conseguem ler a descrição da imagem, tornando possível sua compreensão para as pessoas com deficiência visual. Já no caso de deficientes auditivos, é essencial, por exemplo, disponibilizar legendas para os conteúdos em vídeos.

Paleta de Cores

As paletas de cores são responsáveis por diversos aspectos de uma interface, visto que cores tem uma série de implicações psicológicas, elas podem ajudar a reforçar intenções, ideias e valores também no seu público alvo, a percepção da cor, de acordo com cada cultura, pode causar uma série de sensações, a cultura ocidental faz associar, por exemplo, o verde a esperança, o vermelho à fome, o púrpura ao luxo e o roxo ao luto, e isso costuma ser muito explorado na publicidade. Por exemplo, o McDonald 's, se utiliza das cores vermelho e amarelo principalmente, pois são capazes de atrair atenção e estimular o apetite, além de transmitir entusiasmo e alegria.

Dessa forma, a escolha das cores deve ser feita pensada principalmente na mensagem que se deseja transmitir com a interface, fazendo referência quando possível a essas associações que são construídas socialmente e incorporadas pelo público alvo, e na questão do contraste e acessibilidade do site, usando as ferramentas adequadas para verificar o quão acessível é a paleta escolhida.

Para informações textuais, o preferível é fundo branco (ou uma cor próxima) e texto numa cor escura. O padrão de leitura na maioria das mídias com informação textual é este e existem motivos para isso na própria natureza da visão humana. Para saber mais, leia: https://www.tecmundo.com.br/software/142264-modo-escuro-realmente-vantajoso-visao-bateria-celular.htm. Isso não significa que a inversão não deve ser feita, mas se o conteúdo textual for extenso, a recomendação é seguir o padrão.

Outra recomendação é evitar usar cores absolutas, pois elas cansam mais ainda a visão. Para saber mais: https://nexoprojetosdesign.com.br/black-puro/

Fonte & Tipografia

As fontes também possuem papel fundamental na geração de um bom projeto, visto que elas podem influenciar bastante na experiência do usuário, e ajudando na identidade do projeto, elas compõem a comunicação textual em um design de interface e são responsáveis, além de gerar valor estético, por transmitir a mensagem de forma clara e legível. A escolha cuidadosa das fontes é essencial para garantir a legibilidade do conteúdo e transmitir a personalidade do projeto.

Uma fonte mal escolhida pode dificultar a leitura e a compreensão das informações. Por exemplo, uma fonte com espaçamento inadequado entre as letras ou um estilo de fonte excessivamente decorativo pode tornar o texto ilegível, causando frustração ao usuário.

Para a escolha da fonte é necessário considerar a legibilidade da fonte, optando por aquelas que podem ser facilmente lidas, verificando o espaçamento entre letra e o excesso de ornamentos, a hierarquia visual, ou seja, que possuam diferentes tamanhos e pesos para poder criar uma hierarquia visual clara na importância das informações para o usuário, a coerência, para que as fontes se complementam e transmitam a mesma identidade visual evitando conflitos, e a personalidade, considerando a mensagem que o projeto quer passar.

Nesse sentido, é importante também considerar a acessibilidade das fontes, levando em consideração a experiência de uma pessoa com deficiência visual, o tamanho das fontes e o seu peso, o contraste do texto com o fundo, dessa forma, garantindo que o conteúdo seja acessível a todos os usuários.

Imagens

O uso de imagens é importante considerando que atualmente com as mídias sociais se torna praticamente necessário o uso delas para conseguir chamar a atenção do usuário, além de que, elas conseguem geralmente carregar mais informação que um texto,  snedo capazes de ilustrar e contextualizar  melhor o receptor. Imagens também podem ajudar na simplificação e ideias, como do caso de um engrenagem geralmente significar as configurações, contudo, é importante levar em consideração as possíveis confusões que o uso dessas imagens podem gerar, com usuários de baixa visão por exemplo.

Entre os principais formatos de imagens para se utilizar numa interface, vale a pena ressaltar o uso do JPG, que melhor consegue compreensar imagens e utilizar uma grande quantidade de cores para imagens de plano de fundo, por exemplo, que só precisam estar “dispostas”, assim tomando cuidado com o tamanho que imagem muito podem ter, evitando a demora do seu carregamento ou travamento da interface para o usuário, o PNG que embora tenha um tamanho maior, ele consegue usar fundo transparente o que favorece o seu uso em imagens pequenas, e, por fim, o SVG que na verdade funciona mais como um vetor matemático o que evita distorções da imagem, de forma que ele seja mais adequado para imagens que não é interessante que sofram redimensionamento, como os ícones e os logotipos. Em geral,um resumo seria:

Por fim, é preciso também considerar a acessibilidade das imagens, para isso é fundamental a utilização de texto alternativo nas imagem, para que os softwares de leitura para pessoas com deficiência visual possam conseguir descrever o conteúdo das imagem, além disso, é importante também a utilização de legendas para adicionar informações às imagens que possam ajudar no entendimento do usuário sobre essa.

Identidade Visual

A Identidade Visual do seu projeto tem como função construir uma atuação consistente e conquistar o público, pensar nesse aspecto é pensar também na impressão que ele passará ao público, a partir de fatores simples, como as cores, as fontes, uma logo bem produzida e algum tipo de elemento gráfico, é possível criar uma aparência mais profissional e que traga destaque para o seu projeto.

Cores mais neutras, por exemplo, são indicadas para empreendimentos que precisam se comunicar em um tom mais sério, a exemplo de escritórios e consultórios. Já empresas que trabalham com o público de modo mais direto, desenvolvendo uma interação mais descontraída com o consumidor, podem se beneficiar com o uso de tons mais vibrantes, que trazem leveza para a imagem da empresa.

Algumas dicas para criar uma identidade visual seriam procurar criar um visual coerente com a ideia do projeto, mas que também seja flexível para poder se adaptar com diferentes formatos, é importante também pensar em algo marcante e criativo, pois o objetivo também é criar uma unicidade do seu projeto, por fim, é importante também levar em consideração os gostos do seu público para conseguir também chamar melhor sua atenção.

Usar poucas cores na identidade visual permite que a associação da marca as cores seja feita de forma mais imediata. A fonte também exerce um papel importante para passar as informações da marca. Padrões de tamanho, modularidade, formas e outras regras de construção são importantíssimas para manter uma padronização da identidade da marca e fazer com que os usuários consigam fazer a associação rápida e imediata .

Ferramentas

• Contraste de cores:

Contrast ratio: https://www.siegemedia.com/contrast-ratio

Esse site checa o contraste das cores, de forma geral, temos que, qualquer valor acima de 4.5 de contraste é um bom nível de contraste.

• Criação de paleta:

Coloors:https://coolors.co/ e Adobe Color:https://color.adobe.com/pt/create/color-wheel

Esses sites auxiliam na escolha e criação de paletas de cores de maneira fácil.

• Para fontes:

Google Fonts: https://fonts.google.com/

Para encontrar a fonte ideal para o seu projeto.

• Encontrar elementos de design:

Icons8: https://icons8.com.br/

Site que disponibiliza, para baixar, ícones, fotos, ilustrações vetoriais e músicas para seus vídeos.

• Criação de Identidade Visual:

Figma:https://www.figma.com/pt-br/  e Canva: https://www.canva.com/

Auxilia na organização de elementos gráficos para a criação de um identidade visual de projetos individuais ou em equipes.

• Plugins:

Colorblindly: https://chromewebstore.google.com/detail/colorblindly/floniaahmccleoclneebhhmnjgdfijgg?hl=en

Para ajudar na acessibilidade de daltônicos.

Localizador de fonte: https://chromewebstore.google.com/detail/qual-fonte-localizador-de/opogloaldjiplhogobhmghlgnlciebin

identifica o tipo da fonte.

Snap color picker: https://chromewebstore.google.com/detail/snap-color-picker/nbpljhppefmpifoffhhmllmacfdckokh?hl=en

identifica o código da cor.

Referências

1. https://pt.wikiversity.org/wiki/Guia_Wikiversidade
2. https://www.mestresdowp.com.br/a-importancia-da-acessibilidade-no-design-de-interfaces-inclusao-digital-em-foco/
3. https://medium.com/aela/acessibilidade-por-que-tornar-os-produtos-digitais-mais-acess%C3%ADveis-bb87ef44a65e
4. https://www.handtalk.me/br/blog/uxui-design-acessivel-tudo-o-que-voce-precisa-saber/
5. https://pt.wikipedia.org/wiki/Teoria_das_cores
6. http://www.planalto.gov.br/ccivil_03/_ato2015-2018/2015/lei/l13146.htm
7. https://pixcap.com/br/blog/exemplos-de-design-grafico-ruim
8. https://rockcontent.com/br/blog/o-que-e-design/
9. https://pt.wikipedia.org/wiki/Interface
10. https://awari.com.br/designer-grafico-2/?utm_source=blog&utm_campaign=projeto+blog&utm_medium=O%20papel%20e%20a%20import%C3%A2ncia%20do%20designer%20gr%C3%A1fico%20na%20comunica%C3%A7%C3%A3o%20visual
11. https://awari.com.br/relacao-entre-tipografia-e-acessibilidade-a-relacao-entre-a-tipografia-e-a-acessibilidade-de-conteudos-para-diferentes-publicos/?utm_source=blog&utm_campaign=projeto+blog&utm_medium=Rela%C3%A7%C3%A3o%20entre%20tipografia%20e%20acessibilidade:%20A%20rela%C3%A7%C3%A3o%20entre%20a%20tipografia%20e%20a%20acessibilidade%20de%20conte%C3%BAdos%20para%20diferentes%20p%C3%BAblicos
12. https://awari.com.br/uiux-design-a-importancia-das-fontes-no-design-de-interfaces/?utm_source=blog&utm_campaign=projeto+blog&utm_medium=UI/UX%20Design:%20A%20Import%C3%A2ncia%20das%20Fontes%20no%20Design%20de%20Interfaces
13. https://printstore.com.br/blog/importancia-da-identidade-visual-como-e-onde-aplica-la/
14. https://smartalk.com.br/blog/manual-de-identidade-visual/
15. https://awari.com.br/imagens-em-ui-design-incorporando-imagens-impactantes-em-interfaces-de-design/?utm_source=blog&utm_campaign=projeto+blog&utm_medium=Imagens%20em%20UI%20Design:%20Incorporando%20Imagens%20Impactantes%20em%20Interfaces%20de%20Design