Engenheiros de software precisam de sistemas de design para construir produtos com boa experiência de usuário

Atualmente, muitas equipes de produtos continuam criando designs de experiência de usuário originais e produzindo experiências digitais a partir do zero. Ao fazer isso, ignoram as vantagens de utilizar padrões de design existentes e comprovados, o que resulta em usabilidade insatisfatória, inconsistências visuais e comportamentais, bem como em ciclos de design mais longos. Para melhorar a qualidade geral de experiência de usuário, os líderes de engenharia de software devem implantar um sistema de design: um conjunto de ativos de design reutilizáveis e componentes de código de camada de apresentação que são regidos por padrões claros para construir vários produtos digitais.

“Um sistema de design é um dos ativos estratégicos mais importantes da sua empresa. É um produto digital vivo que exige uma equipe, um plano e um conjunto de ferramentas especializadas”, afirma Brent Stewart, diretor analista sênior do Gartner.

Baixe Agora: Melhore a qualidade do software criando imunidade digital

Que valor um sistema de design agrega?

Um sistema de design cria uma “versão única da verdade”, uma linguagem de design central para designers de experiência de usuário, permitindo-lhes criar experiências de usuário consistentes nas diversas equipes, plataformas e canais. A proposta de valor de um sistema de design inclui:

• Velocidade: Ele reduz o tempo de design e codificação de forma significativa ao tirar proveito de padrões de design de experiência de usuário testados e comprovados em vez de criar tudo do zero.
• Escala: Ele permite que designers e desenvolvedores compartilhem ativos de design e componentes de código aprovados em todo um portfólio de produtos digitais.
• Conformidade da marca: Ele garante que cada ativo de design se alinhe aos atributos da marca de uma organização, como cor, logotipo, tipografia, voz, tom etc. 
• Redução de defeitos: Ao longo do tempo, os componentes de código de um sistema de design tornam-se “enrijecidos”, com defeitos de produção raros na camada de apresentação.

O que constitui um sistema de design?

Um sistema de design ideal compreende tokens de design, padrões de design de experiência de usuário personalizáveis, códigos prontos para produção e instruções para fornecer com eficiência produtos digitais de alto desempenho. Os que seguem são os quatro componentes de um sistema de design:

Ativos de estilo

Atributos visuais, escritos e comportamentais, como logotipos, paleta de cores, iconografia, tipografia, voz ou tom pertencem ao conjunto dos ativos de estilo.

Sistemas de design avançado utilizam tokens de design para centralizar a gestão de cores, estilos de texto, ícones e muito mais. Os tokens de design são entidades neutras em termos de plataforma que armazenam variáveis de design e são utilizados no lugar de valores codificados como pixels ou valores hexadecimais para manter a consistência da interface do usuário e da experiência do usuário quando os sistemas de design são dimensionados.

Ativos estruturais

Ativos estruturais são um conjunto de elementos de design de experiência de usuário (botões específicos, modelos de página etc.) utilizados para criar designs de tela fáceis de utilizar e com prazos de entrega mais curtos. 

A abordagem de design atômico é uma das maneiras mais populares de descrever a hierarquia de ativos estruturais. Segue uma análise geral:

• Átomos: Um átomo é a unidade básica de uma interface de usuário. Um campo de formulário único, um menu suspenso, um botão ou um ícone são todos átomos. 
• Moléculas: Uma molécula é um pequeno grupo de elementos de interface do usuário que funcionam juntos como uma unidade, um aglomerado de vários átomos. Uma coleção de campos de formulário ou um botão de envio associado pode ser um excelente exemplo de uma molécula.
• Organismos: Um organismo é uma entidade mais complexa na hierarquia de design de experiência de usuário, um agregado de moléculas e átomos. Exemplos de organismos incluem navegação utilitária, navegação global, espaço para destaque e rodapé.
• Modelos: Um modelo é uma estrutura ou layout de design reutilizável formado pelo agregado de átomos, moléculas e organismos. Modelos-padrão incluem a página inicial, a página da lista de produtos, a página de detalhes do produto e o carrinho de compras.
• Páginas: Uma página é uma versão totalmente desenvolvida e otimizada de um modelo. Quando um modelo é enriquecido com espaços reservados ou conteúdo real, como texto, imagens ou peças publicitárias, ele se torna uma página.

Componentes de código

Os componentes do código são um inventário de códigos prontos para produção na estrutura selecionada. Eles são organizados empregando a hierarquia de abordagem de design atômico. Cada átomo, molécula, organismo e modelo de design tem um componente de código associado que corresponde a ele. Sistemas sofisticados de design tokenizam componentes de código para atualizar cores, tipografia, espaçamento etc. de maneira centralizada.

Padrões

Princípios orientadores, diretrizes de uso e políticas de governança aplicáveis devem estar em vigor para que se possa criar sistemas de design eficientes.

Os princípios orientadores garantem que os ativos de design e os componentes do código sejam modulares, combináveis, genéricos, flexíveis e acessíveis. As diretrizes de uso incluem regras relacionadas à tipografia, paleta de cores, dimensões e espaçamento, gramática, proporções, estilo de escrita etc.

Políticas de governança são necessárias para sustentar os padrões determinados ao longo do tempo. Em vez de implementar o modelo convencional de governança de TI, os líderes de engenharia de software podem utilizar uma abordagem no estilo wiki. Isso pode dar aos colaboradores a liberdade de criar, atualizar e excluir ativos de estilo, ativos estruturais e componentes de código de forma ad hoc, permitindo que as equipes de produto aprimorem o sistema de design rapidamente.

Para manter a credibilidade do sistema de design, a equipe de liderança pode revisar adições, edições e exclusões durante um lançamento significativo, além de suas revisões trimestrais.

Utilize os sistemas de design de experiência de usuário existentes 

Ao longo dos anos, foram lançados vários sistemas de design baseados em plataformas e de código aberto para garantir uma experiência de usuário de alto desempenho. Para construir aplicativos em uma plataforma grande, é altamente recomendável reutilizar esses sistemas de design existentes tanto quanto possível. Os ativos de design e componentes de código que existem nesses sistemas recebem o apoio de uma extensa pesquisa sobre experiência de usuário dentro de categorias de produtos como a gestão do relacionamento com o cliente (Customer Relationship Management, CRM) e o planejamento de recursos empresariais (Enterprise Resource Planning, ERP). 

Designe uma equipe para sistemas de design 

Trate seu sistema de design como um produto digital, estabelecendo uma liderança de produto que consiste em um proprietário do produto, um líder de experiência de usuário e um líder de desenvolvimento. 

Os três líderes podem melhorar o sistema de design usando orientação operacional, de design e técnica. A equipe também pode ter colaboradores, como designers de experiência de usuário, estrategistas de conteúdo, desenvolvedores “front-end” e especialistas em acessibilidade para lidar com cada versão do sistema de design.