Aprimorando a UI/UX da extensão Snyk para VS Code

Na Snyk, tive a sorte de trabalhar em vários projetos, ajudando diversas equipes com tarefas de design — e adoro isso. A diversidade de projetos faz parte do meu DNA, já que minhas experiências profissionais anteriores seguiram o mesmo padrão. No início da minha trajetória na Snyk, um desses projetos foi dedicado à experiência do desenvolvedor: criar as interfaces da Snyk para IDEs no VS Code, JetBrains IDEs e Visual Studio.

Nosso objetivo era garantir que as descobertas de segurança da Snyk fossem exibidas corretamente e tivessem destaque na interface da IDE. Mas eu também queria criar um design bonito e facilitar o acesso dos desenvolvedores a informações essenciais sobre a segurança de suas aplicações.

À medida que avançávamos nas primeiras versões da extensão, encontramos vários obstáculos. Por exemplo, cada fornecedor de IDE tem suas próprias diretrizes de design de interface, mas elas nem sempre eram claras ou bem documentadas. Do lado da Snyk, temos um plugin que apresenta vários tipos de resultados de segurança, além de um número crescente de recursos voltados a desenvolvedores que queremos incluir. Aos poucos, acumulamos dívida técnica em diversas áreas: usabilidade, dados de vulnerabilidades, layout e design.

Avançando para os dias de hoje: o cenário de desenvolvimento do VS Code é diferente, com ótimas diretrizes de design e recursos úteis, sem falar na experiência de aprendizado proporcionada pelo ChatGPT. Também me sinto mais à vontade para desenvolver extensões do VS Code e decidi corrigir vários problemas da nossa extensão com base no feedback dos clientes e no uso interno dessas ferramentas:

• As vulnerabilidades do Snyk Code não tinham um título adequado (consistência na nomenclatura e carga cognitiva)

• inconsistências no layout e nos dados de vulnerabilidades (carga cognitiva)

• falta de adaptação ao tema atual da IDE (ruído visual)

• falta de elementos que tornassem a interface mais agradável

Foi assim que resolvi esses problemas como designer de produto da Snyk.

Espaçamento e hierarquia visual

Um dos elementos de design mais subestimados é o espaço. Ele pode transformar layouts caóticos em interfaces bem organizadas e fáceis de usar. Alinhar corretamente todos os elementos da interface proporciona uma estrutura mais clara e legível para as informações sobre vulnerabilidades. Definimos uma unidade básica de espaçamento de 8px e aplicamos diferentes multiplicadores de acordo com o conteúdo.

Produtos diferentes da Snyk, layout compartilhado

Outro ponto que queríamos corrigir eram as inconsistências de layout entre os painéis do Snyk Open Source e do Snyk Code, além das diferenças na forma como exibimos esses dados em outras interfaces da Snyk. Para resolver essa discrepância, atualizamos os detalhes do Snyk Code com informações adicionais e criamos uma seção de cabeçalho semelhante, agora compartilhada em vários ambientes: aplicação web, IDE e CLI.

Redução do código personalizado

Para garantir que a extensão da IDE seja renderizada corretamente, independentemente do tema da IDE (escuro ou claro), removemos muitas cores definidas diretamente no código e passamos a usar as cores padrão. Por exemplo, os marcadores de uma descrição do Snyk Code inicialmente tinham cores diferentes, definidas diretamente no código de acordo com a gravidade da vulnerabilidade e alinhadas às diretrizes de design da Snyk para nossa própria interface. Mas, em uma IDE em que a escolha do tema é uma questão de preferência pessoal, essas cores nem sempre ofereciam as indicações visuais certas. Em vez disso, os marcadores agora usam a variável de cor CSS ao serem renderizados e seguem as personalizações do tema:

color: var(--vscode-textLink-foreground)

Assim, a extensão se integra perfeitamente, qualquer que seja o tema escolhido.

Seguindo o sistema de design do VS Code

Os dados de vulnerabilidades são complexos e podem aparecer em diferentes formatos: textos, trechos de código, listas, tabelas e outros elementos. Alguns elementos estavam diretamente acessíveis no código, enquanto outros eram incorporados sem que pudéssemos controlá-los diretamente.

Diante dessas limitações, criamos uma interface que combina com a estética da IDE. A tipografia seguiu o estilo do VS Code; os botões usaram os mesmos ícones de contorno e efeitos ao passar o cursor. Essas mudanças reduzem a carga cognitiva e deixam nossa extensão mais familiar.

Toques finais sutis

Para dar unidade ao conjunto e aprimorar ainda mais o visual da extensão, adicionamos o ícone do nosso produto a cada painel personalizado. Além de destacar o design geral, isso também dá um pouco mais de identidade visual à extensão.

Nosso objetivo é oferecer uma experiência fluida para ajudar você a melhorar a postura de segurança do seu código. Esperamos que você goste dessas mudanças e continue enviando seu feedback e suas sugestões.