Design de experiência de usuário

Primeiramente, é preciso destacar que o trabalho de Garrett (2011) é menos uma pro-dução teórica do que um guia de execução, voltado aos profissionais que pretendem desen-volver uma aplicação web. Sua abordagem, contudo, permite enxergar o design como proces-so complexo, relacionado não proces-somente às decisões de interface (mais comumente asproces-sociadas à atividade), mas envolvendo até mesmo o âmbito das definições estratégicas. Tal aproximação foi elaborada originalmente por Gruszynski (2015a), cujos formulários de avaliação, que constam nos anexos, guiaram nosso trabalho de desenvolvimento das ferramentas de análise.

Os planos mais abstratos propostos por Garrett (2011) são aqui elaborados de forma sucinta.

Garrett (2011) propõe que o uso de qualquer produto gera uma experiência para o usu-ário, e que o design deve atuar para oferecer a melhor experiência possível. Ele destaca que o design não pode ser visto apenas como apelo estético ou em termos funcionais. Quanto maior a complexidade de um produto, contudo, mais difícil é definir de forma exata o que configura uma experiência de usuário bem-sucedida.

Partindo de um conceito de design centrado no usuário (no inglês, user-centered de-sign), o autor estabelece cinco planos, ou camadas, do processo de desenvolvimento de um produto, que parte das definições mais abstratas e termina com as decisões ligadas à forma visual final do produto. Os planos propostos por Garrett (2011) são: (1) estratégia, (2) escopo, (3) estrutura, (4) esqueleto e (5) superfície.

O autor entende, ainda, que aplicações web – que são o foco de seu trabalho – apresen-tam uma dualidade básica: podem ser produtos funcionais, voltados a auxiliar o usuário a cumprir tarefas, ou produtos informativos, voltados ao oferecimento de determinado conjunto de informações. De modo geral são uma combinação de ambos, e cada face dessa dualidade será desdobrada em cada um dos cinco planos propostos (Figura 1). A divisão funcionalida-de/informação é aplicável também, em maior ou menor grau, a produtos editoriais multiplata-forma, o que contribui para a utilização do modelo de Garrett (2011) neste trabalho.

Figura 1 – Elementos de experiência do usuário.

Fonte: Gruszynski, 2015a, p. 6, adaptado de Garrett (2011).

No plano mais abstrato, o da estratégia, as necessidades do usuário e os objetivos do produto perpassam funcionalidade e informação. Nesse plano, é possível articular conceitos de identidade de marca e de segmentação, ideias muito próximas àquelas vinculadas ao meio revista. Garrett (2011), inclusive, propõe a criação de personas, personagens fictícios que representariam usuários reais – muito semelhante à proposta de Ali (2009) de criação de leito-res-protótipo para auxiliar na tomada de decisões editoriais.

Em seguida, há o plano do escopo, no qual são definidas as especificações funcionais, no âmbito da funcionalidade, e os requisitos de conteúdo, no da informação. É nesse plano que começam a ser elaboradas definições mais específicas sobre o que realmente deve constar no produto (que tarefas o usuário poderá executar, quais informações devem estar disponí-veis?). Devido às características desse plano, é nele que “o projeto editorial assume especial importância” (GRUSZYNSKI, 2015a, p. 10).

Depois, define-se o plano da estrutura, que se divide em design da interação (em ter-mos de funcionalidade) e em arquitetura da informação (em terter-mos de conteúdo). No primeiro caso são estabelecidos os modelos conceituais que orientarão o usuário na interface, bem co-mo outros elementos que facilitarão sua compreensão geral do sistema; no segundo, definem-se as definem-seções e as subdefinem-seções em que o conteúdo definem-será dividido, bem como a hierarquia básica que o organizará.

Parte-se, então, para o plano do esqueleto, no qual, segundo Garrett (2011), os limites entre os componentes são mais tênues que em outros níveis. O design da informação perpassa os âmbitos de funcionalidade e de informação: diz respeito à forma de apresentação da infor-mação que permita uma melhor eficácia comunicativa. Há, também, o design da interface, relativo à funcionalidade, que define elementos de interação e a estrutura de sua disposição no espaço, e o design da navegação, relativo à informação, que, articulado com o arranjo dos elementos no layout, permite que os usuários se movam na arquitetura da informação.

Garrett (2011) estabelece cinco estilos de navegação, que podem ser usados simulta-neamente numa aplicação. Para o autor, a navegação global é aquela que, independentemente de onde o usuário esteja no percurso de navegação, ele pode facilmente ter acesso a outra se-ção ou conteúdo; a navegase-ção local dá acesso aos pontos diretamente acima ou abaixo na hie-rarquia informacional do site, limitando o escopo de atuação do usuário; a navegação suple-mentar é aquela que associa conteúdos relacionados àquele acessado pelo usuário; a navega-ção contextual prevê hiperligações dentro do próprio conteúdo acessado, permitindo que o usuário amplie seu conhecimento sobre o que estava lendo originalmente; e, por fim, a nave-gação de cortesia, que oferece opções não necessariamente relacionadas ao assunto acessado, mas que costumam ser úteis e de acesso frequente. O autor ainda destaca a possibilidade de navegação remota, como o mapa do site e o índice, a qual o usuário normalmente recorre quando as demais formas de navegação propostas pelo sistema não respondem às suas neces-sidades.

No plano do esqueleto é possível estabelecer uma relação mais direta com o design editorial tradicional, pois é nele que se define o layout, “onde o design da informação, o de-sign da interface e o dede-sign da navegação se juntam para formar um esqueleto unido e coeso”

(GARRETT, 2011, p. 128, tradução nossa).²⁰ O autor propõe a criação de wireframes, estrutu-ras básicas que definirão o layout do produto e o posicionamento dos elementos no espaço.

Para Lopez e Hom, o wireframe,

20 No original: “Page layout is where information design, interface design, and navigation design come together to form a unified, cohesive skeleton”.

também chamado de plano de navegação, utiliza elementos simplificados para repre-sentar as áreas de conteúdo básicas e os elementos de navegação das páginas. […]

Inicialmente, uma equipe pode trabalhar com lápis sobre papel, passando então para wireframes em baixa fidelidade, que servem para expressar rapidamente os diferen-tes tipos de páginas que podem aparecer em um site. […] À medida que o trabalho progride, wireframes em alta fidelidade são produzidos, contendo mais detalhes so-bre o conteúdo específico e os tipos de interação que levam de uma página a outra.

(LOPEZ; HOM, 2015, p. 100).

Ao tratar do wireframe, Lopez e Hom (2015, p. 100) destacam que “os designers man-tém o design simples e abstrato para evitar um envolvimento excessivo com cores, fontes e opções de imagem antes do tempo”. Esses são elementos que Garrett (2011) coloca no último plano, o da superfície, no qual o design sensorial perpassa os âmbitos de informação e de fun-cionalidade. Aqui, a noção de design sensorial envolve principalmente o sentido da visão, mas não somente ele; a audição é acionada por avisos e orientações em diversos dispositivos, e os dispositivos móveis incluíram de vez o tato com as funções de vibração e suas telas sensíveis ao toque.

A experiência visual proposta por Garrett (2011) nesse plano é a mais diretamente as-sociada com os elementos do projeto gráfico. O autor reforça a importância de um layout ba-seado no grid, trazendo a noção de templates, que são modelos predefinidos de organização dos elementos no espaço compositivo – eles devem dialogar com o wireframe, mas não ser engessados por ele. Garrett (2011) traz, ainda, as noções de consistência interna (quando todas as partes do produto refletem uma mesma abordagem de design) e consistência externa (quando o design do produto dialoga com outros produtos da mesma organização), ambas relacionadas com a construção da identidade por meio do design.

O autor também reforça a relevância do uso das cores e da tipografia, elementos tam-bém já discutidos. A diferença de suporte, contudo, faz as preocupações associadas a esses elementos serem diferentes. No caso das cores, por exemplo, a composição é feita por um sistema aditivo (RGB), cuja soma completa de todas as cores resulta em branco (ao contrário do sistema de impressão – CMYK –, que é subtrativo, ou seja, a adição de cores escurece a composição). As particularidades do ambiente digital também permitem a geração e a identi-ficação de cores a partir de outros sistemas, como o hexadecimal ou o RGBA – que envolve também o alfa (A), permitindo estabelecer níveis de transparência.

No que diz respeito à tipografia, a relação é ainda mais complexa. Em função da dife-rença na forma como as imagens são compostas na tela (em pixels), o contorno vetorial das fontes precisa ser convertido para o formato de saída; em corpos pequenos, o nível de detalhe

de cada caractere pode sofrer muitas alterações. Tudo dependerá da conversão que será feita de vetor para pixels, o que varia conforme o formato utilizado.

Há diferentes tipos de formatos, incluindo TrueType, o preferido do Windows, e PostScript, criado para Mac. As fontes PostScript permitem que o sistema operacio-nal descubra a melhor forma de traduzir o contorno vetorial preciso de um caractere para o grid mais bruto da tela. […] Por outro lado, uma fonte TrueType contém suas próprias instruções para fazer a transição do contorno para o rasterizador. (CLARK, 2015, p. 14).

Essas instruções – chamadas de hinting – orientam o sistema operacional no ajuste das propriedades dos caracteres, desde a largura da haste e a inclinação dos itálicos até a relação entre os caracteres, por exemplo. O hinting pode variar bastante, dependendo do corpo da fonte – “as formas de uma fonte com hinting bem editado podem mudar substancialmente de um tamanho para outro” (CLARK, 2015, p. 15) – ou do tipo de saída (desde um rudimentar bitmap em preto e branco até as modernas renderizações possíveis em monitores LCD).

Também associados à tipografia, os ícones para interação do usuário com o sistema

“desempenham um papel essencial para enriquecer a experiência digital e orientar os usuários em meio a uma rede complexa de telas e informações” (CUNNINGHAM; GARCIA; PEL-SOH, 2015, p. 140). Eles também são úteis para auxiliar usuários em aplicações multi-idiomas, comunicando conceitos de maneira ampla.

Tomando como referência os conceitos trazidos neste capítulo acerca do design edito-rial e aqueles anteriormente abordados sobre o jornalismo de revista e o ciberjornalismo, fa-remos, na próxima seção, a análise de nosso objeto empírico, partindo dos parâmetros que guiaram a seleção do corpus e da apresentação do instrumento de pesquisa utilizado.

4 REVISTAS MULTIPLATAFORMA: MAPEANDO ESTRATÉGIAS

Com base no referencial teórico estabelecido nos capítulos anteriores, apresentaremos aqui os procedimentos metodológicos adotados que orientaram a definição do corpus analisa-do em diferentes etapas, os daanalisa-dos coletaanalisa-dos e a discussão analisa-dos resultaanalisa-dos encontraanalisa-dos. De iní-cio, é pertinente destacar que esta pesquisa se insere em um campo instável. Não no que diz respeito ao design editorial tradicional – disciplina que, embora dinâmica, possui raízes bem estabelecidas –, mas no que se refere à sua relação com as plataformas e os dispositivos tecno-lógicos que nos propusemos a avaliar. A constante transformação que caracteriza o cenário tecnológico vem se refletindo em uma crise sem precedentes na indústria editorial – com re-dução de leitores, encerramento de diferentes títulos e dificuldade de encontrar um modelo de negócios economicamente viável e que, ao mesmo tempo, conquiste e mantenha leitores e anunciantes. Essa situação gera instabilidade para a pesquisa; portanto, é necessário reconhe-cer que, além de a investigação proposta ocorrer em um recorte geográfico, temporal e limita-do, o panorama das publicações multiplataforma aqui analisadas pode se alterar rapidamente – seja por um redesign dos títulos, por um novo modelo de negócios ou pelo desenvolvimento de um novo dispositivo tecnológico –, razão pela qual optamos por uma abordagem que nos permitisse registrar um momento desse período de transformações, averiguando iniciativas e elementos significativos de um processo em curso.

Por isso, quanto aos objetivos, podemos definir nossa pesquisa como exploratória (GIL, 2007), uma vez que pretendemos estabelecer maior familiaridade com o problema apre-sentado, buscando mapear as iniciativas multiplataforma em circulação, identificando possibi-lidades e tendências apresentadas por publicações de grande circulação em âmbito nacional, tentando revelar os pontos de contato do design editorial em diferentes suportes de leitura e plataformas tecnológicas. Conforme reconhece Bastos (2009, p. 75), a pesquisa exploratória mostra-se adequada em nosso caso, pois busca “ampliar o número de informações sobre de-terminado ponto que se quer investigar”, trazendo dados novos que permitam aumentar nossa percepção e compreensão sobre o assunto em pauta. Para cumprir esse propósito, a pesquisa bibliográfica cerca os principais conceitos que articulam nosso objeto teórico, enquanto a do-cumental nos auxilia a identificar informações sobre circulação de títulos, bem como reconhe-cer e contextualizar aqueles que compõem nosso corpus.

A análise se estrutura em duas partes; inicialmente, identificou-se a presença multipla-taforma das publicações que compõem o corpus, com base em critérios estabelecidos a partir do referencial teórico. A partir desse mapeamento, selecionamos os títulos com presença

sig-nificativa para fazer uma avaliação em profundidade com foco no design. A seguir, apresenta-remos o corpus da pesquisa e os instrumentos de análise.