Design de blocos de construção: uma estratégia de design modular para UXers

Um artigo que ajuda a preencher as lacunas dos modelos de design modular na perspectiva de UX.

Vou começar com uma história

Se você odeia histórias, deve pular esta parte. É sobre um designer de UX encarregado de defender uma estratégia de design modular para sua organização. Ela tem cabelos castanhos curtos e olhos azuis. Se você ainda não adivinhou, esse designer de UX sou eu.

Há cerca de oito meses, nossa equipe se uniu a uma estratégia de design modular chamada UX orientada a objetos (OOUX). Ao contrário de outros sistemas modulares de amplo alcance, o OOUX pede que você se concentre na modularização dos principais tipos de conteúdo - o que o OOUX chama de objetos - e dê uma olhada em como esses objetos se relacionam. Esse processo ajuda a equipe de design a expor instâncias inerentes à navegação contextual e a avançar em direção a módulos de interface do usuário consistentes.

Bem ... isso é ótimo para projetar arquiteturas de informação e bibliotecas de padrões, mas e quanto a projetar experiências. Afinal, mobilizar seu conteúdo é apenas metade da batalha. Se você estiver na linha de frente do UX, precisará perguntar por que e como.

O porquê e como

Você pode estar dizendo para si mesmo: "não me fale sobre o porquê e como! Eu sou um pesquisador de UX, dang nabbit! Como por que e como no café da manhã. ”Então, deixe-me explicar.

Não estou falando de estratégia no nível do recurso. Não estou falando de fluxos de processos, wireframes e protótipos. Estou falando de estratégia no nível do aplicativo. Você sabe, o que devemos sempre fazer, mas de alguma forma nunca temos tempo? E estou falando de torná-lo parte integrante de nossa abordagem para outras estratégias, como o design modular.

Para dar um pouco mais de contexto, vamos falar de um exemplo. Digamos que estamos criando um aplicativo de namoro em que uma das principais partes do conteúdo é um perfil. Com o design modular, perguntamos: “onde esse conteúdo pode aparecer na interface do usuário?” - e com base em nossa resposta, projetamos módulos para cada um desses cenários. Talvez projetássemos um perfil que possa ser exibido em uma lista ou em um perfil que ocupe toda a exibição. Arquitetura de informação. Padrões. Verificado.

Um estilo

Mas agora que decidimos o quê, o que acontece quando percebemos inevitavelmente que precisamos pensar sobre por que alguém quer ver um perfil específico em primeiro lugar? E como esse perfil apareceria para esse indivíduo? Implementamos essas estratégias após o fato e esperamos que nada quebre?

Espero que você esteja balançando a cabeça por aí, porque a resposta é um retumbante não.

Em vez de avançarmos no projeto de nossos módulos, devemos construir uma estrutura estratégica que possa ajudar a direcionar nossos esforços de projeto de todos os ângulos. Em vez de definir a face do nosso conteúdo - as coisas que aparecem na interface do usuário - devemos começar definindo como e por que eles suportam esse conteúdo. Isso é chamado de design de bloco de construção.

Entrar no design do bloco de construção

Em vez de pedir que você pense primeiro no conteúdo de seus módulos, como outros modelos, o design de blocos de construção pede que você se concentre na estratégia por trás desse conteúdo.

No design de blocos de construção, deixe a estratégia fornecer a estrutura para o design; Não o contrário.

Somente depois de definir suas estratégias principais de UX - o quadro que mantém seu conteúdo - você poderá começar a projetar como esse conteúdo será representado na interface. A estratégia geral para cada conteúdo principal é o seu alicerce. Juntos, seus componentes definem a experiência do usuário do seu produto.

O design de blocos de construção é um design modular para UXers.

Anatomia do bloco de construção

Para entender melhor essa abordagem para criar conteúdo significativo e estruturado, voltemos ao exemplo de aplicativo de namoro. Agora que identifiquei uma parte do conteúdo principal do meu aplicativo - um perfil - é hora de analisar e identificar quais estratégias podem potencialmente influenciar como esse bloco é projetado. Ao explorar o relacionamento entre outras iniciativas estratégicas e nosso conteúdo, podemos pensar mais criticamente sobre como abordamos o design e a entrega dessas informações.

A anatomia do bloco de perfil está começando a tomar forma.

Ao explorar as relações entre estratégias no nível do aplicativo, é melhor começar em um nível alto e seguir o seu caminho. Por exemplo, se eu identificasse personas como um componente principal da minha estratégia, eu poderia dividi-la ainda mais identificando:

  • as pessoas específicas que se envolvem com perfis;
  • onde no aplicativo eles estão interagindo com este conteúdo;
  • seu contexto de uso;
  • as ações principais que eles executam nos perfis;
  • e com que frequência eles acessam esse conteúdo.

Pode ser algo como isto:

O relacionamento persona-perfil fornece mais contexto para a aparência e a aparência da face do meu bloco de perfil.

Depois de dar um pouco mais de contexto para o porquê desse conteúdo ser valioso para um tipo específico de usuário, posso começar a pensar mais criticamente sobre quais ações precisam ser priorizadas, como o módulo deve ser estruturado para promover padrões de comportamento específicos de cada pessoa, e onde, na experiência, esse conteúdo precisa ser entregue.

Essa técnica permite que os designers se concentrem nas coisas que importam e não se envolvam em apelo visual, sedução por interação e outros padrões de design de interface com boa aparência, mas não suportam o comportamento real do usuário.

Se eu repetir este exercício em termos de uma segunda iniciativa estratégica, serão obtidas informações adicionais. Dependendo do número e da complexidade das iniciativas estratégicas que você implementou, isso pode se tornar rapidamente um processo demorado. Eu recomendo começar com não mais do que duas estratégias.

Então aí está. Um exemplo de como molhar os pés com o design dos blocos de construção. Se você acha que esse seria um exercício útil para sua equipe de design, consulte o Guia de Iniciação Rápida abaixo para obter dicas adicionais. E, é claro, adoraria ouvir seus pensamentos sobre todas as coisas modularizadas. Adicione seus comentários abaixo ou entre em contato no LinkedIn.

Guia rápido

Descobri que muitos modelos de design modular por aí não conseguem dar aos seus leitores tarefas práticas, então deixe-me fornecer uma informação valiosa:

Etapa 1: inventário da estratégia.

Fazemos inventários de conteúdo e componentes. Por que não um inventário estratégico? Faça uma lista de todas as estratégias em nível de aplicativo que você possui. Os exemplos incluem: Personas, dados, contexto de uso e design do ambiente humano, capacidade de resposta, etc. Esta é uma boa oportunidade para fazer uma pausa e perguntar: "temos uma estratégia sólida em vigor para o nosso aplicativo?" Se a resposta for não, está na hora para começar a trabalhar.

Para fazer: Reunir os membros da equipe para criar independentemente seus próprios inventários de estratégia.

Etapa 2: defina seu conteúdo principal.

É isso que seus usuários realizam ações em seu aplicativo. Para descobrir isso, reserve um tempo para uma sessão de brainstorming com sua equipe. Faça a si mesmo perguntas como: “o que meus usuários pesquisam? Visão? Download? ”Depois de identificar um conteúdo essencial, escreva-o em um pedaço de papel e pendure-o na parede.

Para fazer: Realize uma sessão inicial de brainstorming com sua equipe.

Etapa 3: defina como e por quê.

Agora que você identificou suas estratégias no nível do aplicativo e o conteúdo principal, é hora de reunir os dois! Volte à sua sala de brainstorming para uma reunião de acompanhamento e verifique se sua equipe traz seus inventários de estratégia. Nesta parte do processo, peça à sua equipe que coloque notas de post-it da estratégia em qualquer conteúdo principal em que essa estratégia possa ter impacto.

Para fazer: Realize uma sessão de brainstorming de acompanhamento com sua equipe.

Etapa 4: a anatomia de um bloco de construção.

É hora de dividir e conquistar. Atribua aos membros da equipe um punhado de tipos principais de conteúdo - ou blocos de construção - e faça com que eles iterem na anatomia desse conteúdo.

Para fazer: atribua cada membro da equipe com vários tipos de conteúdo. Esse membro da equipe deve definir a anatomia desse conteúdo.

Etapa 5: alinhar, alinhar, alinhar

Como etapa final, reúna a turma na forma de uma apresentação discreta em que cada membro da equipe apresenta a anatomia de seus blocos de construção. Economize tempo no final para perguntas, alinhamento e decisões sobre as próximas etapas para impulsionar os componentes estratégicos individuais de cada bloco de construção.

Para fazer: Programe um horário para os membros da equipe apresentarem sua anatomia do bloco de construção.

Este artigo é trazido a você por RUXERS. O RUXERS é uma comunidade de líderes reais de experiência do usuário, compartilhando e discutindo as últimas novidades em design, experiência do usuário, usabilidade e pesquisa. Estamos no Twitter, junte-se a nós!