Contexto
No âmbito geral da área de Tecnologia da Informação, é comum que profissionais de desenvolvimento ainda tenham um conhecimento limitado sobre os princípios e a importância do design, especialmente nas áreas de experiência do usuário (UX) e design de interface (UI). Essa lacuna se dá, em parte, pela diferença de foco entre as áreas de desenvolvimento (voltada para aspectos técnicos e funcionais) e design (que prioriza a interação, usabilidade e acessibilidade para os usuários finais). Isso pode levar a uma subestimação do papel do design no sucesso dos projetos digitais.
Entender o valor das decisões de design é fundamental para que equipes técnicas e de design trabalhem de forma integrada e eficiente, promovendo produtos que sejam não apenas funcionalmente robustos, mas também intuitivos e agradáveis para quem os utiliza. O design vai muito além da estética, envolvendo princípios científicos que garantem uma experiência satisfatória, acessível e eficaz.
No caso específico do Laboratório LEDS (IFES), essa apresentação foi elaborada com o propósito de esclarecer e aproximar essa compreensão entre desenvolvedores e designers, incentivando um diálogo produtivo e a colaboração entre as equipes para melhorar a qualidade das soluções desenvolvidas. Para isso, foi montada uma apresentação baseada no contexto do projeto Conecta Fapes, em parceria com o Laboratório Forma da UFES. Dessa forma, o IFES serviu como contexto para essa iniciativa educativa, representando um exemplo da necessidade de integração entre áreas no setor de TI.
A apresentação
A apresentação foi estruturada para levar os desenvolvedores desde os conceitos fundamentais até a aplicação prática de diretrizes técnicas. O conteúdo abrange:
- Definições de UX e UI: Diferenciando a experiência de interação da interface visual.
- Tipografia e Hierarquia Visual: A importância da escolha de fontes para a legibilidade e organização da informação.
- Cores e Contraste: O impacto das cores na percepção e os requisitos de acessibilidade.
- Espaçamento e Alinhamento: Como o uso de grids e padrões de leitura (F e Z) orienta o usuário.
- Leis da UX: Princípios psicológicos como as leis de Miller, Hick e Jakob, que fundamentam decisões de design baseadas no comportamento humano.
Definições de UX e UI
UX Design (Design de Experiência do Usuário) refere-se a como o usuário interage com o sistema como um todo. Envolve aspectos como facilidade de uso, eficiência, satisfação e a resposta emocional do usuário durante essa interação. É um processo que busca entender as necessidades reais do usuário, criando soluções que tornem sua jornada intuitiva, fluida e significativa.
UI Design (Design de Interface) diz respeito à parte visual e interativa do sistema, ou seja, tudo aquilo com que o usuário vê e interage diretamente — botões, menus, cores, tipografia, ícones, espaçamentos e layout. O objetivo é tornar a interface visualmente atraente, consistente e acessível, facilitando a navegação e o uso.
Esses dois campos, embora diferentes, são complementares e atuam juntos para criar experiências digitais eficazes e agradáveis.
Diretrizes de Design Aplicadas no Projeto
Neste tópico, detalhamos as diretrizes técnicas que guiaram o desenvolvimento do projeto, focando em garantir uma interface funcional e acessível.
Tipografia: Legibilidade vs. Leiturabilidade
Uma das principais distinções que trouxemos para a equipe foi a diferença entre legibilidade e leiturabilidade.
- Legibilidade: É a facilidade com que se reconhece caracteres individuais (como distinguir um “E” de um “F”).
- Leiturabilidade: Refere-se à facilidade de decodificar blocos de texto e parágrafos.
Aplicação: No projeto, ressaltamos que uma fonte pode ser ótima para títulos por ser legível, mas péssima para o corpo do texto por prejudicar a leiturabilidade em textos longos. Além disso, evitamos o uso excessivo de caixa alta (ALL CAPS) em parágrafos, pois as hastes das letras minúsculas facilitam o reconhecimento das palavras pelo cérebro, tornando a leitura menos cansativa.
Cores, Contraste e Acessibilidade
O uso de cores no projeto não é apenas estético, mas funcional e focado em acessibilidade.
- Contraste: Seguimos as recomendações da WCAG 2.0, garantindo um contraste mínimo de 4.5:1 para textos e 3.1:1 para ícones auxiliares.
- Reconhecimento: No sistema Conecta Fapes, adotamos o azul como padrão para elementos interativos (links, botões, tooltips). Isso cria uma convenção que ajuda o usuário a identificar rapidamente o que é clicável.
- Acessibilidade: Reforçamos que a cor nunca deve ser o único recurso visual para destacar uma informação, garantindo que usuários com daltonismo ou baixa visão também compreendam a interface.
Layout e Escaneabilidade
Para organizar a informação de forma lógica, utilizamos princípios de espaçamento e grids.
- Grids de 12 colunas: Utilizamos essa estrutura para garantir consistência visual e facilitar a adaptação do layout em diferentes telas (responsividade).
- Espaçamento: O uso de espaçamentos consistentes foi vital para evitar a sobrecarga cognitiva, ajudando na escaneabilidade do conteúdo.
Leis de UX
Fundamentamos nossas decisões em leis psicológicas:
- Lei de Miller: Organizamos informações em blocos (chunks), respeitando o limite da memória de curto prazo (cerca de 7 itens) para evitar confusão.
- Lei de Hick: Reduzimos o número de opções em momentos críticos para diminuir o tempo de tomada de decisão do usuário.
- Lei de Jakob: Seguimos padrões de mercado conhecidos para que o usuário não precise “aprender” a usar o site do zero.
Conclusão: Design e Desenvolvimento como uma única equipe
Integrar design e desenvolvimento não é apenas uma questão de “deixar as coisas bonitas”, mas sim de garantir que a solidez técnica da nossa equipa seja traduzida numa experiência fluida, lógica e acessível para quem utiliza o sistema.
Esta apresentação no Laboratório LEDS foi um marco importante para alinhar a nossa visão. No projeto Conecta Fapes, vimos na prática que quando os desenvolvedores compreendem o “porquê” por trás de uma decisão de espaçamento ou da escolha de uma paleta de cores, o processo de construção torna-se muito mais ágil e o produto final, substancialmente melhor.
