Cómo mejorar la UI/UX de la extensión de Snyk para VS Code

En Snyk, he tenido la suerte de trabajar en distintos proyectos y ayudar a numerosos equipos con tareas de diseño. Me encanta. La diversidad de proyectos es parte de mi ADN, ya que mis experiencias laborales anteriores siguieron el mismo patrón. Al principio de mi trayectoria en Snyk, uno de esos proyectos se centró en la experiencia de los desarrolladores: diseñar las interfaces de Snyk para VS Code, JetBrains IDEs y Visual Studio.

Nuestro objetivo era garantizar que los hallazgos de seguridad de Snyk se mostraran correctamente y se destacaran en la interfaz del IDE. Pero también quería crear un diseño atractivo y facilitar que los desarrolladores accedieran a información crítica sobre la seguridad de sus aplicaciones.

A medida que avanzábamos con las primeras versiones de nuestra extensión, encontramos numerosos obstáculos. Por ejemplo, cada proveedor de IDE tiene sus propias pautas de diseño de interfaz, pero no siempre eran claras ni estaban bien documentadas. En Snyk, tenemos un plugin que muestra muchos tipos de resultados de seguridad, además de una cantidad cada vez mayor de funciones para desarrolladores que queremos incluir. Poco a poco, acumulamos deuda de desarrollo en distintas áreas: usabilidad, datos de vulnerabilidades, distribución y diseño.

Avancemos hasta el presente: el panorama del desarrollo para VS Code es diferente, con excelentes pautas de diseño y recursos útiles, además de la experiencia de aprendizaje que ofrece ChatGPT. También me sentía más cómodo desarrollando extensiones para VS Code y decidí corregir varios problemas de nuestra extensión a partir de los comentarios de nuestros clientes y del uso interno que hacemos de estas herramientas: 

• Las vulnerabilidades de Snyk Code no tenían un título adecuado (coherencia en los nombres y carga cognitiva)

• inconsistencias en la distribución y los datos de vulnerabilidades (carga cognitiva)

• falta de adaptación al tema actual del IDE (ruido visual)

• falta de atractivo en la interfaz 

Así abordé estos problemas como diseñador de producto en Snyk.

Espaciado y jerarquía visual

Uno de los elementos de diseño más subestimados es el espacio. Puede transformar distribuciones caóticas en interfaces organizadas y fáciles de usar. Alinear correctamente todos los elementos de la interfaz de usuario permite presentar la información sobre vulnerabilidades de forma más clara y legible. Definimos una unidad base de espaciado de 8px y aplicamos distintos múltiplos según el contenido.

Distintos productos de Snyk, una distribución compartida

Otro aspecto que queríamos corregir eran las inconsistencias en la distribución entre los paneles de Snyk Open Source y Snyk Code, así como las diferencias en la forma de mostrar estos datos en otras interfaces de Snyk. Para resolver esa discrepancia, actualizamos los detalles de Snyk Code con información adicional y creamos una sección de encabezado similar que ahora se comparte en varios entornos: aplicación web, IDE y CLI.

Reducir el código personalizado

Para garantizar que la extensión del IDE se mostrara correctamente independientemente del tema del IDE (oscuro o claro), eliminamos muchos colores codificados directamente y usamos los colores disponibles de forma predeterminada. Por ejemplo, los marcadores de una descripción de Snyk Code inicialmente tenían distintos colores codificados según la gravedad de la vulnerabilidad, de acuerdo con las pautas de diseño de Snyk para nuestra propia interfaz. Sin embargo, en un IDE donde los temas son una cuestión importante de preferencia personal, esos colores no siempre ofrecían las señales visuales adecuadas. En lugar de ese enfoque, ahora los marcadores usan la variable de color CSS y siguen las personalizaciones del tema: 

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

De esta manera, la extensión se integra perfectamente, independientemente del tema que prefieras.

Seguir el sistema de diseño de VS Code

Los datos de vulnerabilidades son complejos. Se presentan de distintas formas: texto, fragmentos de código, listas, tablas y otros elementos. Algunos elementos estaban directamente disponibles en el código, mientras que otros se incorporaban sin que pudiéramos controlarlos directamente.

Teniendo en cuenta estas limitaciones, diseñamos la interfaz para que tuviera la misma estética que el IDE. La tipografía seguía el estilo de VS Code; los botones usaban los mismos íconos de contorno y efectos al pasar el cursor. Estos cambios reducirán la carga cognitiva y harán que nuestra extensión resulte familiar.

Toques finales sutiles

Para unificar todos los elementos y pulir aún más el aspecto de la extensión, agregamos el ícono de nuestro producto a cada panel personalizado. Esto no solo hace que el diseño general destaque, sino que también aporta un poco de identidad visual a la extensión. 

Nuestro objetivo es ofrecer una experiencia fluida para mejorar la postura de seguridad de tu código. Esperamos que disfrutes estos cambios y que continúes enviándonos tus comentarios y sugerencias.