Projetando sistemas modulares de interface do usuário por meio do desenvolvimento orientado por guia de estilo

Usar um guia de estilo para impulsionar o desenvolvimento é uma prática que está ganhando muita força no desenvolvimento de front-end – e por boas razões. Os desenvolvedores começarão no guia de estilo adicionando novo código ou atualizando o código existente, contribuindo assim para um sistema de interface do usuário modular que será posteriormente integrado ao aplicativo. Mas, para implementar um sistema de interface do usuário modular, devemos abordar o design de maneira modular.

O design modular nos incentiva a pensar e projetar uma UI e UX em padrões. Por exemplo, em vez de projetar uma série de páginas ou visualizações para permitir que um usuário realize uma tarefa, iniciaríamos o processo de design entendendo como o sistema de interface do usuário é estruturado e como seus componentes podem ser usados ​​para criar o fluxo do usuário.

Leitura adicional no SmashingMag:

• Como fazer um guia de estilo eficaz
• Uma visão geral detalhada das ferramentas do guia de estilo de vida
• Automatizando o Desenvolvimento Orientado a Guias de Estilo
• Conjunto de ícones de guias de estilo grátis para escritores e editores

Neste post, explicarei o valor da modularidade no design de interface do usuário e como ela se relaciona com o processo de desenvolvimento orientado por guia de estilo, que melhora a implementação de aplicativos flexíveis e fáceis de usar, enquanto ajuda designers e desenvolvedores a colaborar de forma mais produtiva.

Design modular na interface do usuário

O projeto modular consiste em dividir um projeto em pequenas partes (módulos), criá-los independentemente e depois combiná-los em um sistema maior. Se olharmos ao nosso redor, encontraremos muitos exemplos de projetos modulares: Carros, computadores e móveis são todos modulares. Devido à sua modularidade, partes desses sistemas podem ser trocadas, adicionadas, removidas e reorganizadas. Isso é ótimo para os consumidores, pois eles podem personalizar o sistema para atender às suas necessidades . Você quer um teto solar, um motor mais potente, bancos de couro? Você entendeu! O design modular dos carros permite esses tipos de customizações e muito mais.

Outro grande exemplo são os móveis IKEA. Nas ilustrações abaixo, você pode ver que a modularidade do design não está apenas no formato da estante, que permite que ela seja colocada em diferentes direções, ou no fato de que você pode adicionar insertos em suas aberturas, mas também na própria peças que compõem a própria peça, que são retângulos de tamanhos diferentes, repetindo o mesmo padrão.

Do ponto de vista da fabricação, o design modular também é econômico. Um aspecto importante disso é que construir pequenas peças simples que podem ser conectadas posteriormente é mais fácil e barato do que construir uma grande peça complexa de uma só vez. Além disso, a solução pode ser reutilizada várias vezes, maximizando a produtividade.

Os objetivos na criação de um design de interface do usuário são semelhantes. Como designers, queremos criar um sistema de interface do usuário que seja eficiente tanto na construção quanto na operação. Quando encontramos uma solução para um problema, queremos poder reutilizar a solução em muitos lugares. Isso não apenas economiza tempo, mas também estabelece um padrão que os usuários podem aprender uma vez e reaplicar em outras áreas do aplicativo. Também queremos poder personalizar o sistema para determinados cenários sem ter que reestruturar tudo.

É exatamente isso que a modularidade traz para o design da interface do usuário: ela leva a um sistema flexível, escalável e econômico , mas também personalizável, reutilizável e consistente .

Exemplos de Design Modular

Alguns exemplos de design de UI modular podem ser vistos em padrões como grades responsivas, design de janela lado a lado e design de cartão . Em todos eles, os módulos são usados ​​repetidamente para fornecer um layout flexível que se adapta facilmente a diferentes tamanhos de tela. Além disso, os módulos funcionam como recipientes para componentes, permitindo-nos inserir diferentes tipos de conteúdos e funcionalidades, tal como as inserções que podem ser adicionadas a um armário IKEA.

Isso é homogêneo?

Se o design modular é sobre projetar um sistema e os sistemas de interface do usuário compreendem principalmente as mesmas partes (botões, fontes, ícones, grades etc.), você pode estar se perguntando:

• Os designs modulares não terão a mesma aparência?
• Como isso afetará a identidade da marca?
• Como a interface do usuário de um produto pode ser única?

Essas questões, embora válidas, levantam uma questão subjacente: onde estão a inovação e a singularidade no design do produto? Esse debate ganhou força ultimamente (veja “A Insustentável Homogeneidade do Design” e “Em Defesa do Design Homogêneo”), mas eu diria que, porque o design visual é o que vemos primeiro, tendemos a pensar que inovação e singularidade estão em a aparência de um projeto. No entanto, o design visual é apenas uma parte disso. A inovação e a singularidade no design do produto precisam ser contabilizadas em todo o produto: no valor intrínseco que ele oferece e na forma como as pessoas o vivenciam, o que inclui sua aparência. Pegue uma cadeira. É necessário ser uma cadeira, mas nem todos os designs de cadeira parecem, sentem ou funcionam da mesma forma. Na verdade, o design de cadeiras tem sido historicamente uma área de inovação em design e materiais. Da mesma forma, as UIs têm seus próprios requisitos, e usar padrões que comprovadamente funcionam não significa sacrificar a inovação e a exclusividade. Pelo contrário, inovação e exclusividade serão necessárias para resolver os problemas específicos que seus clientes têm. A beleza do design modular é que ele nos incentiva a abordar essas soluções como um sistema de partes interconectadas, em vez de encontrar soluções originais de maneira isolada por ser diferente. Em outras palavras, um design inovador aplicado a um controle de interface do usuário não ficará relegado a um local no aplicativo, mas permeará todo o sistema, mantendo a coesão e melhorando a usabilidade.

A modularidade do desenvolvimento de guia de estilo

Do lado da implementação, o desenvolvimento orientado por guia de estilo também é muito modular. Para começar, o processo começa com uma fase de descoberta : entender o problema que precisa ser resolvido, reunir requisitos e iterar por meio de soluções de design. Embora as soluções de design geralmente sejam apresentadas como um pacote ou recurso completo, elas devem ser realmente a combinação das muitas partes do sistema documentadas no guia de estilo. Algumas partes do design podem ser novas, mas ainda devem ser criadas como módulos. O objetivo é usar o guia de estilo para determinar quais módulos estão disponíveis no sistema de interface do usuário que podem ser reutilizados ou estendidos para criar o design.

(E se não houver um guia de estilo? Não se preocupe! Na próxima seção, mostrarei como projetar de maneira modular, mesmo que você não esteja usando um guia de estilo.)

O próximo passo no desenvolvimento orientado por guia de estilo é a fase de abstração , que é basicamente o exercício de dividir a solução de design em partes menores. Durante esta fase, designers e desenvolvedores trabalham juntos para discernir o design proposto e identificar os elementos e componentes (ou seja, módulos) que serão usados ​​ou aprimorados ou que precisarão ser criados para implementação.

A fase de abstração serve também para traçar um plano para a próxima etapa: implementação e documentação . Durante esta fase, os módulos são construídos ou aprimorados isoladamente do restante dos módulos existentes. No desenvolvimento web, isso significa construir um componente ou definir os estilos para um elemento independente da aplicação. Este é um aspecto importante da modularidade, pois ajuda a identificar quaisquer problemas no início do processo, evitando dependências imprevistas com outras partes do sistema. O resultado são peças mais estáveis ​​e mais fáceis de integrar no todo.

Algo único sobre o desenvolvimento orientado por guia de estilo é que, enquanto a implementação progride, a documentação também ocorre, em vez de ser uma reflexão tardia. Isso é possível porque quando um gerador de guia de estilo é usado, a documentação se torna um guia de estilo vivo , servindo tanto como um framework quanto uma sandbox para implementação:

• O guia de estilo de vida serve como uma estrutura de definições para elementos de interface do usuário (como títulos, listas, links, controles de entrada etc.) e como uma biblioteca de componentes (como sistemas de navegação, barras de ferramentas, ferramentas de pesquisa, tabelas de grade etc.). ) que estão disponíveis para uso. Isso significa que o desenvolvimento não é iniciado do zero todas as vezes. Em vez disso, ele se baseia nas definições existentes no sistema de interface do usuário e contribui para isso.
• É também um sandbox porque serve como um espaço de demonstração para construir e testar a implementação. É exatamente aqui que o desenvolvimento ocorre antes de ser integrado ao aplicativo.

A última etapa do desenvolvimento orientado por guia de estilo, a fase de integração , assemelha-se à etapa de montagem no design modular. Os elementos ou componentes de interface do usuário necessários foram desenvolvidos e estão prontos para serem integrados ao aplicativo. O que resta é configurá-los e personalizá-los. Durante a integração, o guia de estilo é como qualquer bom manual de instruções usado para montar um projeto modular físico.

Agora que identificamos os conceitos fundamentais de design modular e desenvolvimento orientado por guia de estilo, vamos colocá-los em prática.

Projetando de maneira modular

Imagine isso: você criou um ótimo fluxo de usuários, montou maquetes e protótipos para ilustrar as interações e documentou cada parte. É provável que seus designs já sigam um guia de estilo, o que pode colocar você em uma grande vantagem. (Se não, não se preocupe!) Apenas dê um passo para trás e comece a mapear as principais partes de sua solução de design em alto nível. Essas partes podem ser os pontos de interação onde certas coisas são realizadas. Por exemplo, um fluxo de checkout pode ser assim:

Mas segurem suas armas! Estes ainda não são módulos. Para chegar lá, precisamos identificar os elementos de UI que são persistentes no fluxo, como:

• o indicador de etapas de checkout,
• elementos de formulário usados ​​para inserir informações,
• a representação de produtos no carrinho,
• a representação de produtos relacionados que outros compraram,
• políticas sobre a compra,
• Texto de ajuda,
• mensagens e alertas.

Indo um pouco mais fundo, também encontraremos estilos e padrões de interação:

• Estilos:

• cores usadas para denotar:

  • mensagens de erro, sucesso, aviso e informação;
  • ações primárias versus secundárias;
  • estados inativo versus selecionado versus desativado;
  • links versus texto normal;
  • marca;

• tipografia usada para denotar diferentes tipos de conteúdo:

  • tamanho da fonte para dispor as informações hierarquicamente;
  • tipos de fontes para destacar mensagens ou fornecer informações adicionais;
  • listas para resumir informações;

• iconografia para transmitir significado visual e para referência rápida a ações comuns.

• Padrões de interação:

  • mostrando os próximos passos (desativado);
  • mostrando os passos anteriores (habilitados para que as informações possam ser editadas);
  • exibindo resumos que podem ser editados;
  • validar as informações uma vez que o usuário tenha clicado fora do campo;
  • fornecendo texto de ajuda no rollover;
  • atualizando o carrinho uma vez que uma seleção foi feita.

Uma vez que o design tenha sido dividido em todas essas partes menores, finalmente teremos nossos módulos. Neste ponto, é mais fácil ver que muitos deles se aplicam não apenas ao processo de checkout, mas a muitas outras áreas do aplicativo. Com uma abordagem de design modular, esses módulos podem ser criados para que possam ser usados ​​neste design específico, bem como em futuros.

O design atômico merece destaque como uma metodologia que pode acelerar esse processo de criação de projetos modulares. Essa metodologia analisa as relações entre as diferentes partes do sistema e como elas se inter-relacionam, usando a química como analogia. Percorrer as etapas é praticamente o inverso do nosso exercício anterior:

1. Partimos dos átomos , que são os menores módulos do sistema (no nosso exemplo, os botões, tipografia e iconografia).
2. Os módulos crescem em complexidade, unindo-se em moléculas , que fornecem mais funcionalidade (no nosso exemplo, os indicadores de etapas de checkout e o módulo de produtos relacionados).
3. Depois, existem os organismos , que são moléculas que são agrupadas no aplicativo (no nosso exemplo, o cabeçalho do aplicativo e várias formas).
4. Saindo da analogia da química, o próximo nível são os templates , que são estruturas pré-definidas onde os organismos são colocados.
5. Por fim, existem as páginas , que são instâncias de modelos.

A peça que falta aqui é uma forma de documentar os módulos que foram identificados. Não se trata apenas de criar um documento de especificação para capturar como os módulos precisam ser construídos ou escrever diretrizes que capturem definições de alto nível, como cores de marca e famílias de fontes (que são típicas de qualquer guia de estilo padrão). Em vez disso, a documentação precisa ser mais sofisticada e dinâmica, para que quando esses módulos mudarem (e você sabe que mudarão!), a documentação não se tornará obsoleta. É exatamente aqui que os guias de estilos de vida preenchem a lacuna!

Usando um guia de estilo de vida

Um guia de estilo de vida pode ser muito útil durante o processo de design, pois fornece várias coisas.

Uma linha de base para trabalhar

Em vez de começar do zero todas as vezes, o guia de estilo fornece a direção visual e os módulos que você deve usar para criar o design.

Como um guia de estilo de vida é gerado a partir do código real, ele reflete a versão mais recente e melhor do design implementado.

Documentação de Soluções de Design

O conhecimento adquirido para resolver um problema específico de UI ou UX pode ser consignado para uso posterior.

Isso ajuda a manter a consistência na implementação, incentivando você a encaixar qualquer nova solução em parte do design atual.

Você desenvolverá padrões com os quais os usuários podem se familiarizar, aumentando assim a usabilidade.

Facilidade de comunicação

O guia ajuda a comunicar o design, fornecendo a representação mais atualizada da interface do usuário (ao contrário dos modelos estáticos, que ficam desatualizados rapidamente).

Uma linguagem de interface do usuário comum é desenvolvida porque você precisa nomear os vários elementos no guia de estilo. Isso requer colaboração não apenas entre designers de interface do usuário, mas entre designers e desenvolvedores, o que é uma grande vantagem quando você precisa comunicar como um design deve ser implementado.

Se você tem um guia de estilo existente ou planeja criar um, automatizar o processo o colocará na direção certa, conduzindo o processo de design de maneira modular. Portanto, se você estiver pronto para comprar um gerador de guias de estilo de vida, recomendo os seguintes recursos:

• “Uma visão geral detalhada das ferramentas do guia de estilo de vida”, Robert Haritonov, Smashing Magazine
• “Visão geral dos geradores de biblioteca de padrões”, David Hund, GitHub
• “Style Guide Generator Roundup”, Susan Robertson, A List Apart

Não leve ao extremo!

Agora que vimos como ajustar o processo de design para incorporar a modularidade, bem como as vantagens de um guia de estilo de vida, vamos explorar algumas das armadilhas comuns que você pode encontrar ao longo do caminho.

O Guia de Estilo não substitui o trabalho de design

Não é incomum ouvir de gerentes que, uma vez que o guia de estilo de vida esteja em vigor, a maior parte do trabalho de design está concluída. Embora muito do trabalho repetitivo e trivial seja feito (como prototipar os diferentes estados de um botão repetidamente), considere que:

• novos recursos precisarão ser continuamente construídos,
• encontrar uma solução envolve tomar decisões de design.

Então, sim, ter um guia de estilo vivo e seguir o desenvolvimento orientado por guia de estilo melhora o fluxo de trabalho de desenvolvimento, mas não tira o designer da equação. Ter uma ferramenta que acelera os fluxos de trabalho e aumenta a comunicação é vantajoso tanto para designers quanto para desenvolvedores. Mas o melhor dessa abordagem é que ela permite muito espaço para a personalização da interface do usuário, aprimorando assim a experiência do usuário — e descobrir isso faz parte do papel do designer.

Não siga padrões ao extremo

Devemos sempre nos esforçar para usar padrões em um aplicativo. Por exemplo, o uso consistente de cores e tamanhos de fonte pode indicar rapidamente ao usuário elementos na interface do usuário com os quais pode interagir. No entanto, evite usar um padrão apenas porque já foi implementado antes; em vez disso, use-o porque realmente resolve o problema em questão.

Por exemplo, se você estabeleceu o padrão de exibição de barras de ferramentas na parte superior da tela, esse padrão funcionará na maioria dos casos, mas haverá momentos em que apresentar uma barra de ferramentas contextual, mais próxima de onde o usuário está agindo, faz mais sentido . Portanto, sempre questione se a reutilização de um padrão prioriza a facilidade de implementação sobre a experiência do usuário.

Não negligencie a iteração de design

Isso se liga um pouco ao ponto anterior. Não negligencie o valor da iteração e inovação ao experimentar novos padrões e encontrar maneiras de projetar uma interface, mesmo que à primeira vista eles não sigam o guia de estilo. O guia de estilo não deve ser uma rédea do seu esforço para criar a melhor experiência possível para o usuário. Em vez disso, como o nome sugere, deve ser um guia, um ponto de partida para ajudá-lo a resolver problemas, aproveitando o trabalho e a experiência anteriores. A iteração durante a fase de design deve continuar sendo tão importante como sempre e deve estimular você a melhorar os padrões estabelecidos.

O ônus da manutenção

Entre os zilhão de coisas que seu trabalho envolve, manter o guia de estilo deve ser a última coisa que parece um fardo. Para superar isso, considero as seguintes práticas úteis:

• Encontre um sistema de documentação que seja fácil de instalar e fácil de interagir regularmente.
• Torne as atualizações de documentação parte do seu fluxo de trabalho, em vez de uma reflexão tardia quando a implementação já estiver concluída. Documente à medida que avança!
• Estabeleça diretrizes que facilitem a contribuição de todos para a documentação. Isso distribuirá a carga de trabalho e aumentará o senso de propriedade.

Projetar Modular Para Construir Modular

A criação de um sistema de interface do usuário flexível que seja consistente e fácil de personalizar, além de escalável e econômico, depende não apenas de como ele é construído, mas de como é projetado. Uma biblioteca de componentes tem muito pouco valor se cada novo projeto for criado de forma independente, ignorando padrões e padrões estabelecidos.

Por outro lado, não se trata de fazer interfaces simples que reutilizam os mesmos estilos e padrões porque é conveniente. Um bom design é eficaz não por sua singularidade, mas porque combina forma e função para criar uma ótima experiência . Esse objetivo deve estar sempre em mente, e usar um método como o desenvolvimento orientado por guia de estilo para trazer modularidade ao design e ao desenvolvimento deve ajudá-lo a criar um sistema de interface do usuário coeso que atinja esse objetivo.