Executando verificação de segurança...
24

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:

Uma longa captura de tela da página inicial da Herman Miller (à esquerda) com duas imagens à direita mostrando quanto desta página é renderizada na janela de visualização de uma tela de um notebook de 16". Muito pouco conteúdo é mostrado na janela de visualização e o texto é notavelmente grande.
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:

O protótipo da página inicial condensada (à direita) utilizou o mesmo conteúdo baseado em texto da página dispersa original (à esquerda), exibido em um layout com maior densidade de conteúdo, tendo cerca de 3/5 do tamanho vertical.

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:

O protótipo disperso exigia que os participantes interagissem com cada item do acordeão para consumir todas as informações do produto.

Protótipo condensado:

A especificação condensada do produto permitiu que os participantes digitalizassem e consumissem facilmente todas as informações relevantes.

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:

A página dispersa apresentou um serviço por janela de visualização.

Protótipo condensado:

O protótipo de página de produto condensada pegou as mesmas informações da página dispersa original e as organizou em uma grade 2x2 que permitiu aos usuários comparar vários serviços simultaneamente, sem precisar lembrar os detalhes de cada serviço.

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:

Um participante comentou positivamente sobre a capacidade de ver os detalhes do produto com imagens grandes e texto explicativo correspondente.

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.

Carregando publicação patrocinada...
3

Parabéns por trazer esse assunto, Rafael! Quando falamos de UX/UI, sempre há algo novo para aprender e explorar.

Muitas considerações entram na construção de um design e, frequentemente, o orçamento acaba ditando o caminho a ser seguido (sabemos que dá trabalho fazer designs muito distintos para desktop e mobile).

Aqui na empresa, já ganhamos prêmios pelo design de softwares web que desenvolvemos. Mesmo assim, um ano depois, ainda estamos encontrando novas formas de melhorar o design dos nossos softwares.

Quando se trata de software, noto que muitos, ao migrarem para a web, acabam perdendo um pouco da facilidade de uso, densidade de informações e navegabilidade que um software desktop oferece. Isso ocorre, muitas vezes, pelo desejo de entregar algo responsivo também para dispositivos móveis.

Um exemplo claro é o design de dashboards. Acredito que dashboards, que serão acessados principalmente em computadores, devem ser construídos aproveitando ao máximo o tamanho das telas desses dispositivos.

Em suma, é crucial equilibrar a experiência de usuário entre desktop e mobile, mas sem sacrificar a eficiência e a usabilidade que cada plataforma pode oferecer de forma única. É um desafio constante, mas também uma oportunidade para inovarmos e evoluirmos continuamente em nossas práticas de design.

1

Parabéns por compartilhar insights tão valiosos! É realmente essencial considerar diferentes abordagens e testar variadas versões para garantir a melhor experiência possível para todos os usuários, independentemente do dispositivo que estão usando. Essa discussão é um convite para refletirmos sobre como equilibrar estética, funcionalidade e usabilidade, promovendo um design mais inclusivo e eficiente.

1

Eu acredito que Mobile First não é um estilo de design e sim um estilo de desenvolvimento, a principal vantagem de usar esse estilo é o funcionamento do site em qualquer dispositivo, imagine que você entre em um site pelo celular e ele não está responsivo e com vários layouts quebrados? Isso seria uma experiência muito ruim, mas se o site fosse construído pensando primeiramente no mobile, o usuário desktop teria uma boa experiência, não seria uma experiência equivalente a um site otimizado para aquela tela, mas ainda sim seria uma boa experiência. Aliás, não sei se foi minha interpretação, mas a forma que você apresenta o artigo deixa a entender que um site construído utilizando a ideia do Mobile First não teria otimizações para telas maiores.