UX de teste A/B para estruturas baseadas em componentes

Familiarizar-se com a codificação pode ser um grande benefício para os designers. Consequentemente, muitos mergulharam e aprenderam a trabalhar com código (ou pelo menos falar sua linguagem até certo ponto) como uma forma de ser mais eficaz ao colaborar com engenheiros. JavaScript, sem dúvida a linguagem de script favorita da web, tem uma comunidade robusta que está moldando o futuro da web com os frameworks que está criando.

Como resultado de sua estrutura e restrições técnicas, Frameworks como Vue.js, React.js e Material UI são importantes para os designers considerarem porque atuam como blocos de construção para sistemas de design robustos. Além disso, saber como o código funciona também é útil ao facilitar técnicas de design orientadas a dados em um ambiente de desenvolvimento, como testes A/B.

Em um projeto recente para uma startup que cria uma plataforma de gerenciamento de pacientes para conectar indivíduos a profissionais de saúde mental, descobrimos que configurar e gerenciar contas de pacientes com o mínimo de atrito possível era fundamental para vários de nossos consultores clínicos. O foco na criação de uma experiência de navegação intuitiva para os perfis dos pacientes foi crucial, assim como a configuração de um fluxo de usuário ideal para criar, editar e atribuir atividades de bem-estar aos pacientes.

Discutindo o projeto com o líder técnico, foi determinado que, fundamentalmente, o aplicativo era bastante simples: os médicos precisavam da capacidade de criar e editar perfis de pacientes, visualizar uma biblioteca de atividades de bem-estar e atribuir aulas aos pacientes.

A equipe decidiu alinhar o design do projeto com a estrutura do Material UI, utilizando elementos básicos como modais pop-up, cartões de exibição, botões ativos/inativos, listas de acordeão e uma série de notificações de sucesso e aviso. Uma vez definidos os componentes que comporiam os elementos base, a equipe de produto ofereceu opiniões variadas sobre o layout do aplicativo.

Durante as discussões sobre o design da interface do usuário do projeto, o desenvolvedor explicou a diferença entre componentes funcionais e de exibição e como os componentes funcionais controlam o fluxo de dados de um aplicativo, enquanto os componentes de exibição são relevantes para a interface do usuário e o layout.

Simplificando, os componentes de exibição definem a linguagem visual de um aplicativo e os componentes funcionais ajudam a dar vida a eles .

Essa estrutura oferece possibilidades únicas aos designers porque, normalmente, o código relacionado ao gerenciamento da lógica de um aplicativo é isolado em um arquivo separado daquele que controla o layout da interface do usuário. Feito corretamente, essa abordagem ao design de software garante uma base de código modular e robusta que permite um processo orientado a testes.

Recursos idênticos em layouts alternativos podem ser testados com o mínimo de esforço de engenharia? A resposta é “Sim”, e se feito com um método A/B no início do processo, ele será incorporado a um ciclo de vida de desenvolvimento de produto enxuto. (O desenvolvimento de produtos enxutos é um desdobramento do conceito japonês de kaizen, a filosofia de negócios de fazer melhorias incrementais em fluxos de trabalho, práticas, técnicas e, neste caso, produtos.)

Eric Ries, empreendedor serial e autor, discute um guia prático para o ciclo de vida do desenvolvimento de produtos enxutos em seu livro The Lean Startup . O método segue um fluxo de trabalho de construção de produtos com uma hipótese clara, testando o que foi construído e iterando com base no que foi aprendido.

O Método da Startup Enxuta

Definindo a abordagem de teste A/B

O teste A/B é um componente central do kit de ferramentas de qualquer profissional de UX experiente. Seu papel no ciclo de vida de desenvolvimento de software é ajudar a melhorar a usabilidade dos aplicativos. Combinado com dados de mapeamento de calor, as equipes podem obter informações valiosas sobre o comportamento do usuário, especialmente quando se trata de pontos de atrito no fluxo de um aplicativo.

Antes de iniciar o teste A/B, aqui estão algumas perguntas para focar o processo:

• Como o teste A/B é usado em UX?
• Quais métodos de análise A/B estão disponíveis?
• Por que projetar testes A/B durante o wireframe?
• Para que estamos testando?

O método mais comum de teste A/B em escala é um teste de divisão que oferece versões ligeiramente diferentes de um aplicativo ou site para usuários ativos. Um teste de divisão geralmente está fora do escopo e/ou do orçamento de uma startup ou uma pequena empresa. No entanto, existem alternativas para testes A/B em larga escala que são mais acessíveis e incluem: entrevistas presenciais, grupos focais e serviços online que conectam você a uma rede de usuários de teste.

Design orientado a testes A/B

Durante o processo de wireframing, é importante considerar as possibilidades de testes A/B de uma perspectiva de layout e navegação. Variações simples de componentes de exibição podem alterar facilmente a forma como as informações são apresentadas. As estruturas baseadas em componentes dão a você a liberdade de experimentar como o conteúdo é organizado sem precisar reprojetar a funcionalidade principal de um produto.

Como qualquer empreendimento de design, o teste A/B eficaz deve seguir uma metodologia claramente definida. Primeiro, decida para qual variável você está testando. Em seguida, defina o que constitui o sucesso. Termine avaliando os dados e determine qual deve ser o próximo passo.

Por exemplo, em um caso, a hierarquia de layout foi testada. O layout A era composto por uma grade de duas colunas que tinha o componente de lista de pacientes à esquerda da tela e o componente de perfil de paciente à direita. O layout B tinha uma lista de pacientes de coluna única que levaria ao componente de perfil do paciente.

Nosso primeiro teste foi para clareza. Perguntamos aos conselheiros clínicos nas sessões de entrevista qual dos dois desenhos parecia o mais organizado. Ao contrário das suposições internas, a grade de coluna única foi fortemente indicada como a solução de design mais intuitiva. Nossos consultores sentiram que a combinação de uma lista de pacientes e perfil na mesma tela parecia “ocupada” e “desordenada”. Em contraste, as palavras usadas para descrever o layout da grade de coluna única eram claras e “limpas”.

O “Modelo da Caixa de Componentes”

Para esta aplicação web, utilizamos o React, um framework baseado em conceitos de gerenciamento de estado e componentes modulares. React é uma biblioteca JavaScript declarativa, eficiente e flexível para construir interfaces de usuário. Ele permite que você componha interfaces de usuário complexas a partir de pequenos pedaços de código isolados chamados “componentes”. Essa modularidade se traduz em flexibilidade ao trabalhar em um produto envolvendo desenvolvedores e designers.

Passei a entender esse framework com inspiração no modelo de caixa HTML+CSS. O Component Box Model oferece uma modalidade organizacional com a qual criar blocos de construção para um aplicativo. É especialmente adequado para desenvolver um sistema de design para projetos em rápida evolução.

Para manter o design thinking ágil, um conjunto de princípios de design especialmente adequados para um ciclo de vida de desenvolvimento de produto enxuto pode ser seguido.

• Primeiro princípio: Agrupe contextos e ações semelhantes .
• Segundo princípio: Deixe a arquitetura de informação ajudar a simplificar o fluxo de “estado” entre os componentes.
• Terceiro princípio: Projete sistemas visuais escaláveis ​​para simplificar como os desenvolvedores entendem e implementam projetos.

Agrupando Contextos Semelhantes

Considere o modelo mental de seus usuários – agrupe resultados e ações semelhantes com base em seu “contexto de uso”. Considere se os usuários precisam criar, ler, atualizar e excluir itens em cada contexto e se você precisa fornecer algum feedback para suas ações. Ao definir um teste A/B para um cenário de uso específico, considere o layout, como acessar as entradas e os métodos de navegação.

Simplifique o fluxo de interação do “Estado”

No React, o fluxo de “estado” refere-se a como as informações se movem em um aplicativo, como os componentes ajudam a organizar os dados e como eles são exibidos. Normalmente, o estado flui para os componentes de exibição de componentes funcionais que atuam como contêineres. Os designers podem se preparar para testes A/B delineando preventivamente como os componentes funcionais podem alterar o layout de um aplicativo, alterando a forma como os componentes de exibição são avaliados.

Desenvolver sistemas de design robustos

O uso de componentes de exibição para desenvolver padrões para elementos visuais como tipografia, botões, entradas, modais e cartões ajuda a fornecer os blocos de construção para uma linguagem de design padronizada. Sistemas visuais robustos têm a flexibilidade de manter designers e desenvolvedores de UX na mesma página sobre componentes referenciados em wireframes.

Resumo

O sucesso do design orientado a testes A/B está ligado à sinergia entre o produto e as equipes técnicas. Os designers que desejam adotar esse método devem ser precisos sobre onde e como testar. Passe algum tempo desenvolvendo uma hipótese e determinando o que você espera descobrir. Não se distraia. Atenha-se a ele - é muito fácil se desviar do seu método.

Este processo nunca está realmente terminado e evolui à medida que os produtos crescem. Os designers que empregam uma estratégia de desenvolvimento de produto orientada a testes devem aproveitar as oportunidades de aprendizado que surgem ao longo do ciclo de vida de desenvolvimento de um produto.

Os componentes, assim como os sistemas de design, são sobre modularidade e reutilização de padrões, não sobre layout ou estilo. Do ponto de vista de um designer, a flexibilidade para testar, refinar e melhorar produtos com testes A/B pode ajudar a desenvolver produtos mais centrados no usuário, o que acaba levando a um maior sucesso.

•••

Leia mais no Blog Toptal Design:

• Alavancando Modelos Mentais no UX Design
• Teste de UX para as massas: mantenha-o simples e econômico
• O guia fundamental para usabilidade em dispositivos móveis
• O valor da pesquisa do usuário
• Noções básicas sobre sistemas e padrões de design