Guia de UI para Desenvolvedores - TCC

Interfaces digitais mal projetadas são mais comuns do que se imagina, e muitas vezes, não por falta de esforço técnico, mas por ausência de conhecimento específico em design. Em diversos contextos de desenvolvimento, é o próprio time de TI quem assume decisões de UI, o que frequentemente leva a sistemas funcionais, mas com falhas graves de usabilidade e acessibilidade.

Pergunta norteadora da minha pesquisa: como ajudar desenvolvedores a evitar erros clássicos de interface sem depender de um designer?

A resposta foi a criação de um Guia Prático de UI, estruturado para ser aplicado por profissionais técnicos, mesmo sem formação prévia em design. O foco é entregar clareza, estrutura e aplicabilidade. Em vez de conceitos genéricos, o guia é dividido em etapas objetivas, com fluxogramas, checklists e recomendações baseadas em erros reais.

O guia organiza as boas práticas em quatro frentes essenciais, pensadas para refletir a ordem natural de desenvolvimento de uma interface:

• Legibilidade e Cores: escolha e validação de paleta, contraste, tipografia e hierarquia visual;
• Navegação e Operabilidade: agrupamento funcional, linguagem, foco visível e controle do usuário;
• Feedback e Gestão de Erros: mensagens de sistema, validações progressivas, alertas e ajuda contextual;
• Consistência e Componentes Reutilizáveis: padronização de botões, ícones, nomenclaturas e grids reutilizáveis.

Cada bloco é apoiado por exemplos visuais, fluxogramas modelados em BPMN e ferramentas de apoio (como Figma, Skeleton Themes, ColorZilla, Adobe Color, WCAG checkers e bibliotecas de componentes).

O guia foi fundamentado em três pilares reconhecidos:

• As heurísticas de usabilidade de Nielsen
• O modelo CRAP (Contraste, Repetição, Alinhamento e Proximidade)
• Os critérios de acessibilidade da WCAG 2.2

A estruturação do conteúdo partiu de dois estudos de caso avaliando:

• Um sistema web em uso real (Rubric Pro)
• Um protótipo mobile-first (Osiris)

As análises revelaram falhas como contraste insuficiente, desalinhamento visual, ausência de feedback e inconsistência de linguagem foram pontos que fundamentaram diretamente os blocos temáticos do guia.