Prototipagem de conteúdo em primeiro lugar

O conteúdo é a principal mercadoria da economia digital. É o ouro que transformamos em experiência de luxo, o diamante que colocamos em programas de fidelidade e upsells. No entanto, como designers, geralmente o conectamos após o fato. Prototipamos nossa interação e design visual até a exaustão, mas aceitamos que as “palavras reais” podem ser usadas mais tarde. Há um caminho melhor.

Cada vez mais, os bens digitais que criamos operam dentro de um sistema dinâmico de conteúdo, funcionalidade, código e intenção. Nossos produtos e serviços se espalham por sites de parceiros, feeds de mídia social e inúmeros agregadores eletrônicos, todos buscando moldar o comportamento e a compreensão dos visitantes. Os sistemas se baseiam em sistemas e, em pouco tempo, montamos um colosso cuja amplitude deixa as mentes incompreensíveis.

Leitura adicional no SmashingMag:

• Otimizando seu projeto para testes rápidos de protótipos
• Escolhendo a ferramenta de prototipagem certa
• Prototipagem de Conteúdo em Web Design Responsivo
• Ressuscitando protótipos de interface do usuário

Embora tenhamos sido muito bons em descobrir sistemas simples no passado (pense em sites estáticos e intranets), acontece que grandes sistemas dinâmicos são um pouco mais complicados - e um pouco menos previsíveis. À medida que os sistemas crescem, eles se tornam exponencialmente mais complexos e, à medida que aumentam em complexidade, seu comportamento se torna cada vez mais não linear e difícil de prever para nós, pobres macacos. Em grandes sistemas, erros de arredondamento na milésima casa decimal podem mudar radicalmente os resultados (Mitchell 33). À medida que a Internet se aproxima de um trilhão de nós, este é o mundo para o qual todos nós agora projetamos.

Esses sistemas simples aos quais estamos acostumados , no entanto, podem fornecer uma chave para projetar espaços mais complexos. Como o teórico de sistemas John Gall coloca: “Um sistema complexo que funciona invariavelmente evoluiu de um sistema simples que funciona”. No espaço do design digital, se garantirmos que nossos sistemas dinâmicos mais simples de conteúdo, estrutura e criação de significado funcionem como pretendido em um nível fundamental, podemos lançar as bases para sistemas maiores e mais complexos que também funcionem como pretendido.

Uma maneira de nós, como designers, mantermos nossos patos de complexidade em sequência é trazer nosso conteúdo para o processo de prototipagem no início. Uma abordagem de conteúdo em primeiro lugar nos incentiva a enfrentar as restrições e oportunidades de nosso conteúdo mais cedo e testar funcionalmente nossas soluções propostas com usuários famintos por conteúdo real antes que as principais decisões de design sejam tomadas.

Neste artigo, mostrarei como usar um conjunto simples de ferramentas de código aberto para introduzir conteúdo real e dinâmico em seu processo de prototipagem desde o primeiro dia. Essa abordagem permite que você se concentre em como os usuários entendem seu conteúdo desde o início de um projeto e, posteriormente, construa elementos estruturais, visuais e técnicos sobre essa base de compreensão.

Um modelo de caixa branca para conteúdo

Uma das ferramentas que os pesquisadores de sistemas usam para entender o comportamento de sistemas dinâmicos é chamada de modelo de “caixa branca”. O estudioso de sistemas Gerald Weinberg escreve que, enquanto o comportamento de um modelo de caixa preta é “perfeitamente oculto”, o comportamento de um modelo de caixa branca é “perfeitamente revelado”. Para sistemas complexos, essa transparência é importante: Weinberg observa ainda que “mesmo os sistemas mais simples às vezes contêm surpresas para seus construtores” (172).

O objetivo da prototipagem de conteúdo em primeiro lugar é criar um modelo de caixa branca para nosso conteúdo, sua estrutura interna e sua arquitetura de informação de suporte. Isso nos permitirá descobrir no início do processo de design como nossos usuários finais constroem significado a partir do conteúdo estruturado que nossos sistemas digitais oferecem. Ao reservar um tempo para corrigir a estrutura de nossos sistemas de conteúdo em seu núcleo, preparamos o cenário para que esses sistemas simples que funcionam sejam integrados a sistemas maiores e mais complexos que funcionem.

Para criar uma caixa branca para conteúdo digital, precisamos levar em conta três coisas:

• o conteúdo em si , composto por pacotes de conteúdo de vários níveis de granularidade, dependendo do tipo e finalidade do conteúdo;
• estrutura , tanto na página local ou no nível da tela quanto no site global ou no nível do aplicativo;
• envolvimento do usuário no contexto e postura (desktop, tablet ou telefone) em que nosso conteúdo será consumido.

Para permanecer “perfeitamente visível”, esse modelo também precisa ser transparente em sua funcionalidade para que os membros da equipe de design possam entender por que o modelo se comporta dessa maneira. Esta última parte – transparência, em combinação com o envolvimento do usuário – é crucial para o modelo de caixa branca: não estamos construindo um protótipo simplesmente para demonstrar funcionalidade, mas sim para aprender, revisar e refinar nossa estrutura de conteúdo subjacente com base em como as palavras e estrutura que usamos são interpretados por seus públicos-alvo.

Uma abordagem de prototipagem de conteúdo em primeiro lugar é útil quando você está projetando para conteúdo existente, mas também é uma boa maneira de envolver uma equipe editorial no processo de criação de conteúdo. Colocar palavras, imagens e recursos reais na frente dos usuários no início do projeto permite que todos tenham tempo para ajustar, ajustar ou girar para atender às metas do projeto. Se o seu plano de projeto é seguir uma estratégia de preenchimento de palavras depois, a prototipagem de conteúdo em primeiro lugar lhe dá a chance de obter algumas variações de conteúdo na frente dos usuários e, em seguida, obter as reações dos usuários na frente das partes interessadas.

Uma estrutura de prototipagem que prioriza o conteúdo

Tomando os princípios e objetivos descritos acima, montei uma estrutura inicial para a criação desse tipo de protótipo. Muito no espírito do próprio pensamento sistêmico, essa ferramenta depende de um acoplamento fraco de sistemas mais simples, cada um realizando bem uma tarefa primária simples.

Para esta estrutura, montei Excel, Jekyll, ZURB Foundation e Browsersync e vinculei todos eles com um script Gulp. Escolhi esses aplicativos e frameworks específicos porque eles estão amplamente disponíveis, são de código aberto (principalmente), têm comunidades de suporte ativas e possuem excelente documentação.

Você pode baixar uma cópia do projeto de exemplo discutido abaixo e um kit inicial de estrutura de prototipagem de conteúdo na página do projeto no GitHub. Vamos ver como as peças se encaixam e o que cada uma delas faz.

Excel

O Excel — ou qualquer programa de planilha que salve no formato XLSX — é usado para criar e editar conteúdo estruturado e sistemas de categorização. Cada vez que você salva o documento, cada pacote em seu conjunto de conteúdo (representado por uma linha na planilha) é exportado como uma página Jekyll e um documento JSON. Isso permite que você execute operações de página e globais em seu conteúdo e propague alterações no conteúdo para todo o site com um único comando “salvar”.

Jekyll

Jekyll é um gerador de site estático de código aberto e é usado para articular a estrutura dinâmica entre pacotes de conteúdo, páginas e categorias. Jekyll representa o conteúdo que você salva na planilha como variáveis ​​e permite que você execute operações nessas variáveis ​​para criar estrutura. Jekyll também fornece tags “if/then” para aplicar lógica condicional e loops for percorrer e filtrar conjuntos de conteúdo.

Fundação

ZURB Foundation, uma estrutura de front-end de código aberto que prioriza dispositivos móveis, é usada para articular a hierarquia de informações e estruturar comportamentos responsivos. As grades, as definições de estilo e os comportamentos responsivos do Foundation permitem que você crie praticamente qualquer padrão de layout da Web padrão simplesmente aplicando classes aos seus elementos HTML.

Sincronização do navegador

Por fim, o Browsersync fornece seu protótipo ao navegador e atualiza o CSS e as páginas à medida que você faz alterações. O Browsersync também permite acessar o protótipo de qualquer dispositivo conectado à mesma rede. Isso significa que você pode ver atualizações automáticas em um telefone e tablet enquanto faz edições em um laptop.

Vinculadas, essas ferramentas permitem que você construa protótipos em um ambiente semelhante aos sistemas dinâmicos que comporão seu eventual ambiente de produção, mas sem ter que sofrer com os bancos de dados, serviços em nuvem e latência de rede que o atrasariam quando você precisar se mover rapidamente para experimentar ideias.

Se você está entrando em pânico porque isso envolve código…

Não entre em pânico. Essas ferramentas são amigáveis ​​para designers e possuem excelentes comunidades de suporte. Você não precisa ser um desenvolvedor front-end para dar vida às suas ideias. Você precisa saber o básico de HTML e CSS. Essas linguagens não são difíceis – e aprendê-las não destruirá sua capacidade de fazer um bom trabalho de design. Nas palavras da lenda do design de tipos Erik Spiekermann, “Você tem que aprender, se não codificar, pelo menos apreciar o código, entender o código. Porque código é o que porcas e parafusos eram cem anos atrás.” A melhor maneira de começar é mergulhar.

Um exemplo de protótipo de conteúdo em primeiro lugar: o Green Lake Community Center

Para ter uma ideia melhor de como é a prototipagem de conteúdo em ação, vamos pegar uma coleção de conteúdo digital do mundo real.

Aqui está o cenário. O Green Lake Community Center oferece aulas, programas e eventos para membros da comunidade do bairro de Green Lake. Infelizmente, todas as informações atuais sobre aulas, programas e eventos estão disponíveis on-line apenas via PDF, que por sua vez está disponível apenas no site otimizado para desktop do centro. Contemplar:

Em um esforço para alcançar os membros da comunidade que estão cada vez mais tentando acessar informações sobre aulas, programas e eventos por meio de seus telefones celulares, o centro decidiu lançar um site de programas mobile-first. Essa iniciativa eventualmente servirá como um catalisador para um site responsivo em toda a cidade para parques e recreação.

Como qualquer outro projeto de design, começarei com uma análise heurística e competitiva e observando o tráfego disponível e os dados do usuário. Se as partes interessadas e os usuários finais estiverem disponíveis, falarei com eles também. Quando sentir que tenho uma boa noção do propósito do site, explorarei algumas ideias básicas de arquitetura de informações de alto nível e de interface de usuário no papel.

À medida que uma abordagem de design inicial começa a tomar forma, posso usar um fluxo de trabalho de prototipagem de conteúdo em primeiro lugar para obter minhas ideias iniciais - e, mais importante, o conteúdo que essas ideias devem servir - no contexto em que serão consumidas - neste caso, o navegador. Vamos ver como é esse processo em detalhes.

Capturar conteúdo

Neste exemplo, você pode ver como o conteúdo estruturado que capturo em uma planilha de estrutura de prototipagem que prioriza o conteúdo é gravado automaticamente em um modelo de página toda vez que eu salvo meu arquivo _data . Aqui usei a folha “catálogo” para estruturar o conteúdo. As variáveis ​​"Título", "descrição", "categoria" e "tags" já estão incluídas no modelo de página, portanto, esses valores são atualizados imediatamente. Você pode adicionar quantas outras colunas desejar a uma linha de conteúdo - apenas certifique-se de incluir a variável correspondente no modelo (mais sobre isso abaixo).

As folhas de “diretório” e “alimentação” também estão incluídas no kit inicial e incluem diferentes categorias (colunas) para seus respectivos tipos de conteúdo. Cada planilha exporta conteúdo para sua própria pasta (nesses casos, “catálogo”, “diretório” e “feed”) e para seu próprio arquivo JSON. Você pode adicionar quantas outras planilhas precisar – apenas certifique-se de atualizar seu arquivo de configuração Jekyll para que ele saiba como puxá-las (consulte a documentação do plug-in “Jekyll Data Pages Generator” para obter detalhes completos).

Adicionar mais pacotes de conteúdo

À medida que adiciono pacotes de conteúdo (linhas na planilha), novas páginas são adicionadas automaticamente ao protótipo. Cada linha representa uma única página e cada coluna nessa linha representa uma variável que o Jekyll está preenchendo no modelo à medida que cria uma página. Neste exemplo, o conteúdo do catálogo “Community Center” é bastante uniforme, mas se as descrições dos itens variam muito em tamanho, você pode ver (e experimentar) facilmente como essa variação afetaria o layout da página. Talvez você decida dividir o conteúdo de forma diferente ou adicionar novos elementos, como resumos ou slugs.

Este sistema também permite que você experimente facilmente rótulos, categorias e tags. Ao alterar os valores na coluna "categoria", você pode testar como diferentes abordagens de arquitetura afetam a capacidade do usuário de encontrar facilmente um determinado conteúdo. Neste exemplo, por exemplo, criei sistemas organizacionais baseados no tipo de turma e na faixa etária de um participante. Isso me permite testar facilmente diferentes abordagens de navegação no menu e na página inicial à medida que o protótipo toma forma.

Adicionar estrutura e hierarquia com HTML

Quando estiver satisfeito com o conteúdo no local, começarei a agrupar esse conteúdo na marcação para que sua estrutura faça sentido para os usuários. Trate as variáveis ​​aqui como texto e marque-as como você marcaria texto em um arquivo HTML “plano”. Os resultados aqui devem parecer bastante previsíveis (isso é uma coisa boa).

O sistema de templates do Jekyll pegará os templates de página que você criou e os envolverá com um template global contendo o cabeçalho e o ícone de navegação. Isto é o que o “layout: default” significa: Estamos chamando o template “default” como o wrapper deste template. Você pode aninhar modelos com a profundidade que desejar, embora mais de um ou dois níveis de modelos geralmente sejam desnecessários. Para acomodar elementos repetidos, como listas de páginas e links globais, você também pode usar “includes”, que insere uma parte específica do código no modelo quando o site é renderizado. Confira a documentação oficial do Jekyll para saber mais sobre modelos e inclusões.

Adicione lógica com as tags de marcação do Jekyll

Jekyll permite adicionar lógica básica incluindo tags básicas que são específicas para seu sistema de modelagem. Aqui, eu uso uma tag for para percorrer a lista de classes do Green Lake Community Center (que foi criada quando adicionei os vários pacotes de conteúdo acima) e renderizo cada classe do centro comunitário na lista como um link:

Você também pode usar instruções if para criar condições. Aqui, estou usando uma instrução if para ocultar o link para a página da classe em que estou atualmente:

Se sua cabeça explodiu, por favor, não entre em pânico. Adicionar lógica é um recurso avançado. Seu protótipo funcionará bem se você se ater a variáveis ​​de conteúdo e HTML. O sistema de modelagem do Jekyll é, no entanto, muito legível por humanos e fácil de entender. Confira a rápida introdução de seus criadores sobre como funcionam as peças básicas.

Adicione estilo e comportamento responsivo com o CSS da Foundation

Assim que um primeiro rascunho da estrutura HTML estiver pronto, posso adicionar estilo ao protótipo simplesmente incluindo classes CSS e salvando o documento. A estrutura de front-end da ZURB Foundation, que já está vinculada ao kit inicial, fornece classes de estilo para uma ampla variedade de padrões de aplicativos nativos e da Web. No exemplo mostrado aqui, simplesmente inserindo duas classes diferentes, dei ao meu protótipo móvel uma sensação mais “tocável” e introduzi um senso muito mais claro de hierarquia visual. Essas alterações se propagam automaticamente para todo o conteúdo que usa esse modelo.

O Foundation também facilita a inclusão de comportamento responsivo para dispositivos móveis e o uso de dezenas de componentes pré-construídos de layout, contêiner e mídia. Por ser tudo CSS, você pode modificar e ajustar tudo ao seu gosto. Para esses exemplos, modifiquei a paleta de cores base do Foundation para um estilo “wireframe monocromático”, mas você pode adaptar o Foundation a qualquer estilo que desejar. Saiba mais sobre como usar o Foundation navegando em sua documentação ou tutoriais ou participando de uma aula (as aulas são excelentes, diga-se de passagem).

Obtenha feedback com antecedência e revise à medida que avança

Uma vez que o conteúdo está pronto, é fácil criar e testar várias variações da estrutura. Rótulos, categorias, palavras-chave e outros metadados podem ser alterados diretamente na planilha de conteúdo. Da mesma forma, variações na estrutura da página, fluxo e exibição são apenas uma questão de criar versões alternativas de seus modelos Jekyll. Todas essas alterações serão aplicadas em cascata instantaneamente no protótipo no momento em que você clicar em "Salvar".

Para finalizar uma primeira versão do protótipo do Green Lake Community Center, criei três variações da home page móvel. Nesse caso, tudo o que eu precisava fazer era reorganizar os elementos no modelo da página inicial e trocar as fontes de dados pelos dois elementos de navegação (ou seja, os botões de largura total e os blocos de imagem).

Embora eu tenha apresentado todas essas etapas em sequência, lembre-se de que o Gulp (o executor de tarefas JavaScript que vincula todos os nossos sistemas simples) atualiza as alterações sempre que você salva um documento. Isso significa que você pode voltar a qualquer etapa a qualquer momento e fazer ajustes com base na resposta do usuário, feedback das partes interessadas ou novas descobertas sobre conteúdo ou contexto.

Essa flexibilidade permite que você teste facilmente diferentes hierarquias de tela e tratamentos de conteúdo com os usuários — e permite que você use conteúdo real nesses testes, conteúdo que seu público pode experimentar (e reagir) em primeira mão. Como a forma final do protótipo é HTML, CSS e JavaScript, você pode coletar feedback do usuário com qualquer ferramenta de teste com a qual se sinta mais confortável (eu gosto de UserTesting e Lookback).

O formato do protótipo de HTML, CSS e JavaScript também significa que seu trabalho informará mais prontamente os esforços paralelos e subsequentes. Se o seu eventual produto for construído em uma plataforma CMS existente, por exemplo, os requisitos de conteúdo, estrutura e exibição que você pode articular o ajudarão a avaliar as opções de CMS. Da mesma forma, seu protótipo pode servir como um documento de especificação para decisões de design envolvendo grade, hierarquia, títulos, comportamento de links e fontes para seus desenvolvedores front-end.

Não se esqueça, no entanto, que o objetivo da prototipagem de conteúdo não é simplesmente projetar no navegador: o objetivo é usar o navegador e o feedback de seus usuários para ajustar a organização do seu conteúdo a fim de criar estruturas que funcionam bem.

A força desse método é permitir que você modifique rapidamente os sistemas que suas categorias, rótulos e caminhos de navegação criam. Isso oferece uma vantagem distinta sobre a modelagem de conteúdo estático. Se você achar que está usando muito CSS extra para fazer seu conteúdo dinâmico funcionar do jeito que você quer, volte para a fonte. Você pode fragmentar o conteúdo de maneira diferente para fazê-lo funcionar melhor? Adicionar (ou remover) um conjunto de classes ou tags? Experimente diferentes variações até encontrar a solução simples e elegante que faz todo o resto parecer se encaixar.

Pensamento Sistêmico Além da Web

O exemplo básico mostrado aqui ilustra como uma abordagem de prototipagem de conteúdo em primeiro lugar pode nos ajudar a criar sistemas de conteúdo simples que funcionam – sistemas que, por sua vez, preparam o cenário para sistemas maiores e mais complexos que funcionam. A prototipagem de conteúdo em primeiro lugar nos ajuda a descobrir lugares onde pequenos ajustes no modelo de conteúdo, hierarquia, categorias e rótulos podem levar a soluções mais limpas e elegantes para as necessidades de informações de nossos usuários.

Embora essa ferramenta seja construída em tecnologias da web, a maneira como estruturamos o conteúdo para compreensão transcende ferramentas, tecnologias e plataformas individuais. Se o seu conteúdo em sua forma mais básica, sem os requisitos e restrições de implementações específicas, fizer sentido para seu público e atingir seus objetivos de comunicação de maneira simples e elegante, você já construiu uma base que vai além das implementações tecnológicas individuais. Você criou conteúdo que não precisa de uma plataforma ou script específico para fazer sentido; é um conjunto de conteúdo que quer ser entendido de uma determinada maneira.

Quando colocamos o conteúdo no centro do processo de design, começamos a resolver não para uma implementação específica, mas para a compreensão. Todo o resto é um passo intermediário. Ao reconhecer que a plataforma final para a qual projetamos é a mente humana, podemos identificar as estruturas simples que dão origem à compreensão e trabalhar para fortalecer essas estruturas ao longo de todo o processo de design.

Trabalhos citados

• Complexity, A Guided Tour , Melanie Mitchell (Nova York: Oxford, 2009)
• Uma Introdução ao Pensamento Sistêmico Geral , Gerald Weinberg (Nova York: Dorset House, 1975)