O impacto negativo do design "mobile-first" da Web no desktop

Encontrei um artigo do Nielsen Norman Group, que é composto por especialistas em UX, fundado por duas grandes referências de interação humano-computador, Jakob Nielsen e Don Norman. O artigo foi feito com base num estudo para avaliar os impactos negativos do design "mobile-first" da Web no desktop, com 13 testes qualitativos de usabilidade, envolvendo 4 protótipos diferentes e 13 participantes. Você pode encontrar a metodologia aqui.

Mesmo que você não concorde com os pontos levantados pelo artigo, acredito que faça sentido levá-los em consideração ao criar o design de uma página Web, inclusive podendo experimentar diferentes versões.

No artigo original, há algumas citações sobre o que os usuários disseram durante a pesquisa, que eu não coloquei aqui. Ao fim, deixei um tópico "minhas conclusões", que é uma mistura de resumo com um pouco da minha opinião. Boa leitura!

Dispersão de conteúdo

Os autores identificaram uma tendência de design que chamam de "dispersão de conteúdo", que é quando imagens cobrem a tela, o texto é grande e inchado, e os espaços negativos são excessivos. Isso resulta em páginas longas e que exigem mais rolagem para consumir todo o conteúdo.

Por exemplo:

_{Cada imagem do lado direito é uma janela de visualização em uma tela de notebook de 16".}

Uma única seção de conteúdo disperso pode não causar problemas significativos de usabilidade, mas quando a maior parte do conteúdo de uma página está excessivamente disperso, o impacto na usabilidade é amplamente negativo.

Abordagens de design que resultam em dispersão de conteúdo

O artigo menciona três abordagens que frequentemente são usadas em conjunto que produzem páginas com baixa densidade de informações:

• Mobile-first: Os designers primeiro projetam para dispositivos móveis e depois ajustam o design para desktops.
• Minimalismo: Para evitar uma aparência desordenada e alcançar uma estética minimalista, os designers fazem uso intenso do espaço negativo e simplificam a quantidade de conteúdo exibido em uma janela de visualização da tela.
• Imagens grandes: Algumas imagens grandes em uma página para desktop podem funcionar bem. No entanto, se a página tiver muitas imagens grandes, o conteúdo baseado em texto exibido em linha ou entre as imagens ficará disperso e fragmentado pela página.

Efeitos negativos do conteúdo disperso

Aumento no custo de interação

Páginas longas e uso de elementos de design específicos para dispositivos móveis, como acordeões, exigem mais cliques e rolagens para acessar o conteúdo.

As páginas longas são uma consequência clara, conforme o que foi dito anteriormente, mas aqui está um exemplo:

Já sobre "elementos de design específicos para dispositivos móveis", o exemplo usado foi de acordeões (tag <details>), que funcionam muito bem em dispositivos móveis porque agrupam uma grande quantidade de informações em um espaço menor, encurtando a página móvel e tornando as informações mais acessíveis, além de fornecerem uma visão geral de alto nível do conteúdo disponível, permitindo que os usuários acessem diretamente a área de seu interesse.

No entanto, em telas grandes, páginas longas são menos problemáticas. Os acordeões podem contribuir para a fragmentação do conteúdo e aumentar significativamente o custo de interação para encontrar informações cruciais, sem o benefício que trazem no celular. Veja a comparação:

Protótipo disperso:

Protótipo condensado:

Aumento da carga cognitiva

Os usuários devem lembrar informações de diferentes janelas de visualização (e rolar para cima e para baixo entre elas) para chegar a uma conclusão ou tomar uma decisão. A capacidade da sua memória de curto prazo pode ser facilmente sobrecarregada.

Protótipo disperso:

Protótipo condensado:

O estilo das imagens usadas na página também afeta a sensação de fragmentação do conteúdo. Quando as imagens são informativas, as pessoas passarão algum tempo visualizando-as para extrair informações úteis. Assim, uma imagem informativa estendida em uma tela grande é tão boa quanto um texto e é improvável que cause trabalho extra.

Já quando as imagens são decorativas, as pessoas não perdem tempo olhando para elas porque não possuem valor informativo. Nesses casos, a fragmentação do conteúdo útil é ainda pior, pois os usuários precisarão passar pelas ilustrações grandes para obter pequenos pedaços de conteúdo útil.

Dificuldade em construir um modelo conceitual

Com o aumento do comprimento da página devido ao conteúdo disperso e ao aumento da demanda de memória de trabalho, as páginas dispersas dificultaram a avaliação das informações pelos usuários e a construção de um modelo mental dos conceitos comunicados no site em comparação ao protótipo condensado. Ou seja, aumenta a dificuldade em reter as informações da página para tomar uma decisão dentre diferentes ofertas.

Outro problema que pode ocorrer é quando os usuários encontram a "ilusão de completude", um problema mais prevalente em sites dispersos, pois muitas vezes usam blocos de cores que criam fortes linhas horizontais na janela de visualização ou espaços negativos grandes que podem sinalizar falsamente que o conteúdo no a página está completo. Se não existirem dicas de rolagem para indicar que há mais conteúdo para descobrir, os usuários provavelmente perderão esse conteúdo.

Queda na confiabilidade

Alguns usuários acham que a empresa está escondendo informações e pode perder a confiança nelas nas situações de sites dispersos, que parecem fornecer menos conteúdo e de acesso mais difícil.

Efeitos positivos do conteúdo disperso

Destacar informações reduzindo a densidade do conteúdo em uma janela de visualização pode beneficiar a experiência quando:

• O conteúdo é complexo, permitindo que os usuários se concentrem na compreensão de uma parte de cada vez.
• Os usuários precisam se familiarizar com o conteúdo exibido e, portanto, podem ficar sobrecarregados com muita informação.
• Imagens de alto valor são exibidas. Imagens grandes de produtos podem agregar valor, tornando mais fácil para os usuários examinarem a imagem para observar os detalhes de um produto.

Um exemplo de página dispersa que um participante gostou:

Recomendações de design

Como o tráfego da web por parte dos dispositivos móveis está aumentando cada vez mais, é provável que essas tendências (mobile-first, minimalismo e design focado em imagens) continuem. Dadas as implicações de usabilidade dessas abordagens de design nas experiências de desktop, o artigo recomenda os designers a seguirem estas recomendações para evitar as maiores armadilhas:

• Avalie como os designs são renderizados no desktop. Se a renderização deixar uma grande parte da página excessivamente esticada, reavalie se o conteúdo importante deve ser redesenhado para permitir uma escaneabilidade melhor no desktop.
• Avalie o valor agregado pelas imagens. Priorize imagens grandes que agreguem compreensão contextual do produto ou serviço oferecido. Pergunte a si mesmo se o valor das imagens grandes vale a dispersão que causam no desktop.
• Mantenha o conteúdo crítico e relacionado agrupado na mesma janela de visualização. Considere quais informações são mais relevantes para a compreensão da oferta e escolha designs que mantenham esse conteúdo unido para reduzir a rolagem para cima e para baixo.
• Evite interações e elementos de design específicos para dispositivos móveis. Limite o uso de acordeões no desktop e considere designs adaptáveis que exibam esse conteúdo de maneira amigável ao desktop.
• Entenda quando a dispersão pode ser usada estrategicamente para focar a atenção em pontos-chave ou peças complexas de conteúdo.

Minhas conclusões

O aritgo mostra diferentes formas de exibir o mesmo conteúdo, e isso é ótimo, pois dá ideias para colocar em prática na hora do desenvolvimento em busca de identificar o que fica melhor. Também menciona alguns pontos de atenção que devemos ter durante o desenvolvimento; eu nunca havia parado para pensar na categorização de imagens decorativas e informativas.

Eu encontrei esse artigo pelo Hacker News, e lá a thread causou alguns comentários "contra" esse estudo. Como disse no parágrafo anterior, acredito que faça sentido testar e avaliar o que tem um resultado melhor no seu cenário. Talvez uma página de vendas consiga vender mais com grandes imagens decorativas do que com uma página mais densa, a depender do que está tentando vender.

Não sei porquê o artigo mencionou o acordeão, que em HTML é feito com as tags <details> e <summary>, como algo para dispositivos móveis. Não achei uma referência sobre isso. Entretanto, achei que o exemplo projetado sem os acordeões ficou melhor no desktop.

Considero a área de design difícil para tomar boas decisões, porque mesmo sendo um designer especialista e experiente, provavelmente precisará justificar as decisões tomadas para alguém que dirá "mas eu prefiro do outro jeito". Isso é facilmente percebido em qualquer apresentação aqui no TabNews com comentários sobre o frontend. Acredito que realizar os testes, como já mencionei, pode trazer resultados melhores, apesar de ser um caminho mais cansativo.