O impacto negativo do web design mobile-first no desktop
(nngroup.com)- Quando um layout feito para mobile é simplesmente expandido para desktop, imagens, textos e espaçamentos ficam excessivamente grandes, e a usabilidade piora por causa da dispersão de conteúdo, em que as informações ficam espalhadas por uma página longa
- Como mais de 55% do tráfego web global vem de dispositivos móveis, a abordagem mobile-first é amplamente usada, mas quando combinada com minimalismo e design centrado em imagens grandes, a densidade de informação no desktop cai bastante
- Em 13 testes qualitativos de usabilidade que compararam layouts dispersos e compactos, as páginas dispersas tornaram a busca e a compreensão das informações mais difíceis
- Conteúdo disperso aumenta rolagens e cliques, elevando o custo de interação, e pode fazer o usuário ter de lembrar informações relacionadas em várias telas, levando a maior carga cognitiva, frustração e perda de confiança
- No desktop, informações importantes e relacionadas devem ser agrupadas no mesmo viewport, e padrões voltados ao mobile, como acordeões, devem ser usados com moderação
O que é dispersão de conteúdo
- Dispersão de conteúdo é o fenômeno em que o conteúdo de uma página web responsiva aparece excessivamente grande e esticado em telas grandes de notebook ou desktop
- Quando páginas mobile-first são renderizadas no desktop, imagens que cobrem a tela, textos ampliados e espaço em branco excessivo criam páginas longas e exigem mais rolagem
- Se a dispersão aparece apenas em algumas seções, talvez não seja um grande problema de usabilidade, mas quando domina a maior parte da página, o efeito acumulado tende a ser negativo
- Em dispositivos com telas grandes, a dispersão de conteúdo aumenta a carga cognitiva, o custo de interação, a dificuldade de compreensão do conteúdo e a frustração do usuário
Tendências de design que geram dispersão de conteúdo
- A abordagem mobile-first consiste em projetar primeiro para mobile e depois ajustar para tablet e desktop
- Como mais de 55% do tráfego web global vem de dispositivos móveis, essa abordagem é amplamente usada
- Minimalismo remove elementos de design que não são necessários para a funcionalidade principal ou a mensagem central de um site
- Para evitar uma aparência visualmente complexa, ele usa bastante espaço em branco
- Isso pode reduzir a quantidade de conteúdo exibida em um único viewport, criando páginas longas com baixa densidade de informação
- O design centrado em imagens grandes está ligado à tendência moderna de usar imagens em alta resolução em tamanho ampliado na web
- Imagens grandes podem chamar atenção, mas também podem espalhar demais o conteúdo textual
- Ter algumas imagens grandes em uma página desktop pode funcionar bem
- Mas, quando há imagens grandes demais, o conteúdo textual entre elas acaba fragmentado pela página inteira
Como foram os 13 testes de usabilidade
- O estudo combinou 13 testes qualitativos de usabilidade com entrevistas semiestruturadas
- A comparação envolveu a combinação de dois layouts e dois tipos de página
- Layouts: compacto, disperso
- Tipos de página: homepage, página de produto
- Foram usados 4 protótipos no total
- Os protótipos dispersos foram reconstruídos com base em páginas desktop reais com baixa densidade de conteúdo, muito espaço em branco e textos grandes
- As versões compactas foram criadas separadamente usando o mesmo conteúdo das páginas originais
- Os usuários realizaram atividades abertas nos 4 protótipos e participaram de uma discussão posterior comparando as duas versões de cada tipo de página
- A metodologia completa do estudo está em uma página separada de metodologia
Problemas de usabilidade causados por conteúdo disperso
- Quando a dispersão aparece em uma grande parte da página, ela pode afetar fortemente a experiência geral do usuário
- Os principais problemas são os seguintes
- Aumento do comprimento da página e do custo de interação
- Aumento da carga cognitiva
- Dificuldade para formar um modelo conceitual da página
- Aumento da frustração
- Redução da confiança
-
Mais rolagem e mais cliques
- A dispersão de conteúdo cria páginas longas que exigem mais rolagem, e elementos de design voltados ao mobile, como acordeões, exigem mais cliques para acessar o conteúdo
- Quando um site mobile-first é renderizado em telas grandes, o conteúdo se espalha e vira uma página longa; esse efeito aumenta ainda mais quando minimalismo e design centrado em imagens são combinados
- Quando o conteúdo está distribuído por vários viewports, fica mais difícil encontrar informações específicas dentro da página
- Nos testes, os participantes tiveram mais dificuldade para encontrar informações na página de produto dispersa do que na versão compacta
-
Problemas no desktop com padrões pensados para mobile
- Acordeões ajudam no mobile a compactar muita informação em pouco espaço, encurtar a página e permitir que o usuário vá direto a áreas de interesse
- Em telas grandes, como o problema de páginas longas é relativamente menor, o acordeão pode fragmentar o conteúdo e aumentar bastante o custo de interação para encontrar informações importantes
- Um participante comentou que, no acordeão de informações do produto do protótipo disperso, precisava abrir e fechar cada item para ler as informações
- Outro participante avaliou que a página compacta era melhor porque exigia menos cliques e deixava as informações logo à vista
-
Aumento da carga cognitiva
- À medida que as imagens ficam maiores e o espaço em branco aumenta, o conteúdo textual se fragmenta em vários viewports
- Quando conteúdos relacionados são cortados por limites de tela, fica mais difícil para o usuário percebê-los como uma única unidade
- Para julgar ou decidir, o usuário precisa lembrar informações de diferentes viewports ou rolar para frente e para trás, e a capacidade da memória de curto prazo pode ser facilmente sobrecarregada
- Layouts compactos exibem mais informação no mesmo viewport, reduzindo a carga cognitiva e oferecendo uma navegação mais fluida
- A natureza da imagem também afeta a sensação de fragmentação
- Imagens informativas podem trazer informações úteis, então exibi-las em tamanho grande em telas grandes pode gerar pouco custo adicional
- Imagens decorativas não têm valor informativo; o usuário tende a ignorá-las e ainda precisa rolar por grandes ilustrações para chegar ao conteúdo útil, piorando a sensação de fragmentação
Impacto no modelo conceitual e na confiança
- Páginas dispersas dificultam avaliar os conceitos transmitidos pelo site e formar um modelo conceitual, por causa do aumento do comprimento da página e da carga sobre a memória de trabalho
- No protótipo de homepage, os participantes disseram que, em vez de ver 4 ou 5 propostas de uma vez e entender o escopo, precisavam lembrar delas para conseguir compreendê-las, o que tornava tudo mais difícil
- Na página de produto, quando elementos importantes para a decisão de compra, como preço, detalhes do produto e avaliações, estavam espalhados por vários viewports, os usuários precisavam consumir e memorizar essas informações separadamente
- Quando informações importantes ficam juntas ou distribuídas em menos viewports, é mais fácil construir uma compreensão conceitual do produto ou da proposta de valor
- A ilusão de completude pode ser mais evidente em sites dispersos
- Blocos de cor podem criar linhas horizontais fortes no viewport, ou grandes áreas de espaço em branco podem fazer a página parecer terminada
- Se não houver pistas visuais de rolagem indicando que existe mais conteúdo, o usuário pode deixar passar informações
- Quando problemas de usabilidade se acumulam, sites dispersos podem parecer ter pouco conteúdo e ser difíceis de acessar
- Alguns usuários podem sentir que a empresa está escondendo informações, e nesse caso a confiança pode cair
- Os usuários preferiram especialmente os layouts compactos quando queriam explorar o site e entender de forma ampla o que estava sendo oferecido
Quando a dispersão de conteúdo pode ajudar
- Quando a página inteira é dispersa, o impacto acumulado na usabilidade tende a ser negativo, mas em situações específicas isso pode contribuir positivamente para a experiência
- Reduzir a quantidade de conteúdo visível em um único viewport pode ajudar o usuário a focar em um conteúdo destacado por vez e também diminuir a percepção de sobrecarga de informação
- Casos em que reduzir a densidade de conteúdo no viewport para enfatizar a informação pode ajudar incluem
- Quando é preciso compreender conteúdo complexo em partes
- Quando o usuário precisa se familiarizar com o conteúdo exibido e pode se sentir sobrecarregado se houver informação demais
- Quando se quer mostrar imagens de alto valor
- Fotos grandes de produto podem agregar valor ao permitir que o usuário examine melhor os detalhes
- Imagens com alto valor informativo podem justificar a dispersão, mas imagens usadas apenas para preencher espaço ou criar interesse visual causam dispersão sem benefícios adicionais
- Nos protótipos de homepage, o valor das imagens era menor, então os efeitos positivos da dispersão de conteúdo foram menos observados
Recomendações para projetar para desktop
- É preciso avaliar separadamente a renderização em desktop
- Se grandes partes da página ficarem excessivamente esticadas no desktop, vale considerar um redesenho que facilite escanear o conteúdo importante
- É preciso avaliar o valor que as imagens agregam
- Deve-se priorizar imagens grandes que ajudem a entender o contexto do produto ou serviço
- É necessário julgar se o valor dessas imagens compensa a dispersão que elas criam no desktop
- Conteúdos importantes e relacionados devem ser agrupados no mesmo viewport
- É preciso considerar quais informações são mais relevantes para entender a oferta e escolher um design que reduza a necessidade de rolar para frente e para trás
- Interações e elementos de design voltados ao mobile devem ser limitados
- O uso de acordeões no desktop deve ser reduzido
- Vale considerar um design adaptativo que apresente o mesmo conteúdo de forma mais amigável ao desktop
- O uso de dispersão deve ser limitado como estratégia para chamar atenção a pontos-chave ou conteúdos complexos
Conclusão
- Conteúdo disperso em páginas desktop minimalistas pode reduzir distrações e concentrar a atenção em pontos principais ou informações complexas
- Mas, quando a página inteira é construída sob a lógica mobile-first, do minimalismo e do design centrado em imagens, os problemas de usabilidade no desktop aumentam
- Quando o conteúdo se estende e se fragmenta por vários viewports, fica mais difícil para o usuário consumir e compreender as informações
1 comentários
Opiniões no Hacker News
Danny O'Brien mantinha o antigo blog Oblomovka e, por volta de 2007, cunhou o termo hinternet
Na época, a internet, que era operada por uma elite técnica para si mesma, começava a receber também pessoas comuns, e “hinternet” era a ideia de que havia uma internet de tecnologia refinada e valores, separada da internet de spam de Viagra e banners pop-up
Antigamente, a elite técnica conseguia evitar quase totalmente a hinternet, como quem evita um bairro perigoso, mas as pessoas comuns não tinham esse mecanismo de discernimento e acabavam tendo uma experiência de internet muito inferior
Hoje, a maior parte da internet virou hinternet, e até sistemas essenciais como bancos, financiamento imobiliário, pagamentos de carro e contas de serviços públicos são projetados com abordagem mobile first, usando, sob o pretexto de “verificação de usuário real”, técnicas sombrias que quebram em plataformas abertas
Se a hinternet de antes era um beco sombrio vendendo relógios falsificados, agora ela se parece mais com uma distopia de integração vertical de informações operada nos bastidores por órgãos semigovernamentais; para entrar no IRS, é preciso usar a plataforma de gestão de identidade id.me, que até vende produtos
Existem tentativas de cultivar pequenos jardins refinados, mas o sucesso é irregular e, do ponto de vista individual, há pouquíssimo incentivo para participar da hinternet além do estritamente necessário
Visto por esse ângulo, “web design mobile first” é apenas um sintoma arrancado de um contexto maior
A estrutura colocada é a de, de um lado, uma elite culta da academia, das forças armadas e do governo como fundadores legítimos, e, do outro, as massas que chegaram depois do Eternal September
No fim, é como se entrantes como comerciantes, especuladores e golpistas tivessem se naturalizado como empresas e bancos do novo mundo; se a era pontocom for vista como uma história de colonização, a elite vira os nativos expulsos de sua própria terra, o que também combina bem com narrativas atuais
Mas o que falta nessa fábula são as pessoas comuns de fato
As pontocom, a Web 2.0 e a construção de impérios, de 1997 até por volta de 2010, ainda foram eventos periféricos em que o dinheiro e o poder existentes migraram para a internet, com alguns “empreendedores” agressivos grudados nisso; 99% permaneceram como plateia e agora foram conduzidos para dentro do curral
A possibilidade de uma internet das pessoas ainda existe, mas quase não resolveu problemas clássicos como carona grátis e a tragédia dos comuns, e, a esta altura, a “Web 3.0 e a web blockchain” parecem mortas
Para voltarmos a uma internet pública, de alta qualidade e ampla, precisamos olhar com mais cuidado para a história e a narrativa da internet, e para quem são os verdadeiros interessados
Não sei se está falando da internet dos anos 90, difícil de usar e centrada em IRC e Usenet, ou da internet obscura dos anos 90 com conteúdo ilegal em hospedagem gratuita
Não fica claro como a internet dos anos 90, com fóruns, IRC, spam de Viagra e goatse, se parece com a internet esterilizada de hoje, dominada por dark patterns e por algumas megaempresas
Por causa do uso de dispositivos móveis, o analfabetismo digital não diminuiu; pelo contrário, está aumentando, como quando alguém clica em um link errado, instala uma barra de ferramentas no navegador e vai sendo cada vez mais infectado por dark patterns
Vejo esse tipo de situação com bastante frequência quando parentes entram em contato por problemas no computador
Sempre levo downvote quando uso expressões como “phonish” ou “phonishness”, mas smartphones parecem ter piorado a vida em vez de melhorá-la, fazendo as pessoas servirem aos computadores
Estou esperando a próxima plataforma
Fora a pasta de spam, quase não sou exposto a isso; o resto é todo filtrado e ajustado para uma área “aceitável”, ou algo próximo a uma residência privilegiada na internet
Não tenho dinheiro, mas em termos de conhecimento sou rico, e isso parece uma estrutura de tragédia dos comuns em que os analfabetos digitais viram escudo de carne para anúncios e serviços pagos como o YouTube
Com o passar do tempo, fica cada vez mais claro que o front-end provavelmente é a parte mais difícil da stack
As pessoas acham que gerar de qualquer jeito um app Bootstrap React já é perfeito, mas escrever uma UI complexa que funcione em todos os navegadores, dispositivos, tecnologias assistivas e idiomas é extremamente difícil
É preciso ter conhecimento profundo de HTML, CSS e das APIs web relacionadas, e bons engenheiros de front-end são muito raros até nas big techs
Designers de UX que pensam até nesses pontos são ainda mais raros, e uma pessoa assim vale um milhão de dólares
Acabei migrando para design; já que eu não seria respeitado, achei que pelo menos não precisava continuar correndo na esteira de novas tecnologias
Também trabalhei com back-end, e ele é difícil à sua maneira, mas, pensando em dinheiro, eu escolheria back-end em vez de front-end
Depois de passar por design, back-end e front-end, criei na cabeça dois eixos: reconhecimento e interferência
Design recebe muito reconhecimento porque o resultado é visual, mas qualquer pessoa dá opinião sobre “como fazer melhor” e se mete com facilidade
No back-end, ninguém interfere além de outros engenheiros, mas, mesmo quando você faz um bom trabalho, tudo simplesmente funciona como se fosse obrigação, então é difícil receber crédito
O front-end fica no meio: se aparece bem e funciona bem, recebe algum reconhecimento, mas, mesmo que o app seja rápido e responsivo, cerca de metade do mérito às vezes vai para o designer
Ao mesmo tempo, as pessoas dizem “deveria funcionar assim” com base em outros apps, e o desenvolvedor front-end precisa dar um jeito de fazer tudo rodar entre o que o designer aprovou e o que o back-end dá suporte
Eles se cansam de passar o dia inteiro brigando com colegas que sabem programar, mas não têm sensibilidade de design, e as características que formam um bom engenheiro de front-end também facilitam migrar para funções com menor custo psicológico
Desenvolvedores front-end lidam não com máquinas objetivas, mas com seres humanos subjetivos; também precisam lidar com designers e gerentes de produto, além de sofrer restrições de engenheiros de back-end e da infraestrutura
Precisam fazer funcionar em vários dispositivos e navegadores, usando frameworks escolhidos por outras pessoas, sem quebrar nada
Meu respeito a todos os desenvolvedores front-end
Tudo tinha padding: o texto tinha padding, a caixa que envolvia o texto tinha padding, e a linha da tabela que continha essa caixa tinha um padding ainda maior
O resultado era que, numa tela 1080p comum, cabiam só umas 4 linhas de tabela, e cada linha quase não tinha informação de fato
Além disso, por algum motivo o tamanho da fonte era definido pela largura do viewport, o que a tornava quase inutilizável em monitores 4:3 antigos
Basta pensar em sistemas que precisam processar dezenas de bilhões de eventos por dia, semana ou mês, além de lidar com cache de dados e data warehouses, notificações em tempo real, volume de trabalho em filas, várias requisições de API, sincronização entre sistemas de back-end, múltiplos armazenamentos de dados, expansão multirregional, redundância e resposta a falhas no back-end
Em softwares web complexos, esses problemas de back-end são comuns
O front-end ligado a esse back-end normalmente tem menos chances de ter problemas no meio da noite por causa de processos automáticos do back-end, ou de precisar se preocupar com o número de usuários e a escala dos dados
Por mais difícil que seja o desenvolvimento inicial do front-end ou a manutenção diante de mudanças nos navegadores, depois que o desenvolvimento termina ele é código estático que faz interface com subsistemas muito mais complexos, e esses subsistemas continuam exigindo atenção sempre que dados e requisitos de negócio mudam
O problema não é mobile-first versus desktop, mas designers que ainda não entendem que a web é conteúdo dinâmico que deve fluir de acordo com o tamanho e o formato da tela do usuário
A web não é uma mídia estática como o papel, nem está presa a um tamanho e formato específicos, portanto não deve ser tratada assim
Um “designer” web não deve tentar forçar o conteúdo a caber em um tamanho ou resolução em pixels específicos; como as resoluções de tela e as proporções horizontal/vertical variam demais, o conteúdo precisa conseguir fluir de acordo com isso
Para usuários com deficiência visual que precisam aumentar a fonte, a acessibilidade também piora muito se o conteúdo quebra gravemente quando a fonte é ampliada
Essas páginas também precisam funcionar em navegadores mobile e desktop e ficar bonitas em todos eles, mas isso não é tão difícil
Só leva um pouco mais de tempo, e media queries com um pouco de JavaScript tornam isso possível
Ao mesmo tempo, essa é uma área caótica até para quem trabalha nisso há muito tempo
Hoje aproveito meu background em design para me envolver ao máximo na fase de projeto e, depois de implementar e publicar, peço algo como “me avisem tudo que quebrar em viewports ambíguos usados por apenas 1% dos usuários”, e corrijo na etapa de review ou em produção com patches de CSS e media queries por viewport
Há um motivo para o comprimento das linhas de texto ser mais ou menos parecido em todos os livros impressos, e a largura de leitura deve sempre ser limitada
A largura pode ser 300px ou 1920px; o usuário pode usar mouse, apenas toque, ambos ou nenhum dos dois
Menu hambúrguer e ícones pictográficos, sério?
Entendo por que são usados no mobile.
Se só há espaço para o conteúdo, faz sentido deixar apenas algumas funções em ícones pequenos e esconder o restante das ações no menu hambúrguer.
Mas, se há espaço, usar isso é horrível.
Na melhor das hipóteses, aumenta o número de etapas; na pior, leva a acidentes enquanto a pessoa experimenta para descobrir o que o ícone faz.
Se o desfazer funcionasse direito, ainda seria menos ruim, mas parece que decidiram que até isso podia ficar quebrado.
Como nas antigas Apple HIG, no desktop as ações usadas com frequência devem sair dos menus e ficar em botões com rótulo, para que o usuário consiga responder “o que posso fazer?” sem brincar de esconde-esconde.
Desfazer é difícil de acrescentar depois, então deve estar previsto desde o início para reduzir o custo da experimentação.
Infelizmente, o design mobile tomou conta de forma tão completa que, mesmo quando quase tudo será um app usado no desktop e há alguém internamente defendendo design de desktop, o designer de UI escolhe hambúrguer, pictogramas e desfazer quebrado.
Além disso, os modais também voltaram com força, mas, por causa da pressão, vou parar por aqui.
Até um celular barato de 5 anos atrás, como o moto e4, tem tela de 1280x720, e há pixels suficientes para colocar rótulos nos ícones.
Ícones pictográficos são quase um design que diz “odiamos nossos usuários e queremos que eles saibam disso”.
O menu hambúrguer também muitas vezes poderia ser eliminado, olhando a quantidade de opções.
O app do Gmail poderia colocar os ícones em uma barra horizontal, mas usa hambúrguer; e, se espaço fosse tão importante, não colocaria também uma barra inferior para chat, vídeo e Spaces.
Fico um pouco preocupado que o usuário não perceba que há mais opções para rolar, mas prefiro isso a um menu hambúrguer que abre e cobre o conteúdo.
Porque dá para ver todas as opções e as respectivas palavras.
No desktop, esse tipo de tratamento não é necessário.
Ainda assim, acho que os designers gostam deles porque fica mais fácil manter um design consistente em vários idiomas.
Por exemplo, a localização para alemão pode ser difícil de encaixar.
Eu também acrescentaria opções contextuais ocultas.
Opções desativadas, ou seja, acinzentadas quando não estão disponíveis, são boas porque ao menos mostram a possibilidade de que algo possa ser feito quando as condições forem atendidas.
Mas o design moderno simplesmente esconde essas opções, e, se você não conhece a condição mágica que as faz aparecer, nunca as verá.
O Unifi, da Ubiquiti, é um exemplo.
Na página de gerenciamento de portas de switch, não há opção “Select All”; primeiro é preciso selecionar uma ou mais portas para que a opção apareça magicamente.
Além de estar oculta, o contexto também está errado.
Se fosse uma caixa de seleção desativada, todos teriam percebido imediatamente como seria obviamente idiota o checkbox “Select All” estar desativado quando nenhuma porta estivesse selecionada.
Eles se assustam facilmente quando há coisas demais na tela, e são exatamente essas pessoas que dominam os grupos focais.
Então parece que os designers acabaram presos a essa única regra horrível.
Este estudo não faz sentido do ponto de vista prático.
Essas páginas não foram projetadas para transmitir o máximo de informação no mínimo de espaço, mas para vender produtos.
Se a ideia é afirmar que há um impacto negativo por causa da dispersão do conteúdo, é preciso medir com base no objetivo para o qual a página foi projetada.
Aqui, como o estudo explicitamente analisou páginas de e-commerce e de produto, as métricas relevantes são quais páginas fizeram o produto parecer mais valioso, tiveram maior conversão, maior NPS ou geraram maior afinidade com a marca.
Caixas de som portáteis não são vendidas por especificações, mas por imagens aspiracionais de uso na praia.
Se você abrir o acordeão de detalhes do produto e perguntar “quão bem você sente que entendeu a proposta comunicada por esta página?”, é claro que a pontuação da pesquisa será maior.
Seria até surpreendente se a página mais densa convertesse melhor.
Isso é como projetar um estudo dizendo que o banco rígido de um carro de F1 é ruim, encher um deles de espuma, testar qual é mais confortável e declarar que é melhor porque teve pontuação maior em conforto, quando a métrica original é apenas o tempo de volta.
As escolhas de design criticadas pelo texto não são resultado de design mobile-first.
Na verdade, sites do fim dos anos 2000, antes de o design responsivo se popularizar, também tinham essa aparência.
Por exemplo, a Apple: https://www.versionmuseum.com/history-of/apple-website
Na prática, ele compara a densidade de informação de folhetos de marketing ou outdoors e depois diz que eles não comunicam tudo, mas esse é justamente o objetivo.
Publicidade não é uma ficha técnica; serve para despertar no espectador o desejo pelo produto.
Mas, para mim, pode ser um forte sinal de bobagem de baixa qualidade.
Muitos sites mudam completamente a UI quando a janela é redimensionada.
Às vezes quero deixar o navegador ocupando só metade do monitor e colocar outra coisa ao lado, mas, em sites modernos, ao reduzir o tamanho da janela a UI frequentemente fica inutilizável e isso falha.
Quando bem feita, é excelente, mas também é verdade que muitos sites se comportam de forma agressiva demais, como se só tivessem testado de verdade duas categorias de tamanho.
Você quer dizer que, ao reduzir a visualização, não consegue mais acessar funcionalidades e conteúdo?
Detesto sites que colocam o conteúdo útil em uma coluna estreita no centro.
Pior ainda é que até sites que antes eram normais vão ficando cada vez mais estragados.
Normalmente isso acontece quando entra uma nova gestão querendo “reimaginar” o produto com uma visão “mobile-first”.
O Patreon é um bom exemplo recente.
E, em alguns casos, um site normal desaparece por completo e é substituído por um crapp, como Venmo, Amazon Alexa e Chamberlain.
O que é realmente estranho é que não existe uma boa alternativa por toque para o hover
É um elemento de UX útil demais para simplesmente descartar na migração para mobile-first
Fora isso, fica mais para “não é tão difícil assim”
Entre os problemas a resolver, fazer algo parecer convincente em vários tamanhos de tela está bem abaixo em termos de tempo e complexidade
Pelo menos é assim que uso no Firefox móvel para ver o texto alternativo de imagens
A detecção real de hover provavelmente seria possível, mas, a menos que se use uma stylus, acho que a UX ficaria ruim
Como web designer, discordo um pouco
Os exemplos citados no texto funcionam melhor com conteúdo simples por tela
São mais fáceis de entender visualmente, e as versões compactadas têm muitos layouts em várias colunas, algo de que pessoalmente não gosto
Alta densidade de conteúdo combina com aplicações desktop, mas não com sites que são basicamente sites de brochura
É bom que não seja apenas a impressão de alguém
É difícil acreditar que páginas de marketing, após décadas de evolução e testes, não tenham chegado ao que os usuários realmente querem, e não ao que dizem querer
Para nativos da internet, rolar a página é um comportamento muito natural
Usar telas grandes para fazer comparações visuais também é útil, mas os exemplos do texto não são bons
Ele diz que “organizou as mesmas informações em uma grade 2x2 para permitir comparar vários serviços ao mesmo tempo”, mas não sei o que há para comparar
São serviços diferentes
Gosto do exemplo de especificações de produto, mas isso está mais próximo de um problema objetivo de usabilidade, por exigir mais cliques para ver mais informações
É preciso notar que as capturas de tela estão “reduzidas”, então a composição em várias colunas parece rica e visualmente mais atraente
Sou totalmente a favor de aproveitar o espaço horizontal, mas o que aprendemos sobre botões de chamada para ação leva a designs com um único elemento
Mais do que sites de brochura ou de e-commerce, o que mais irrita é o design mobile-first em sites de produtividade e interfaces de ferramentas
Quem normalmente acessa esse tipo de ferramenta pelo celular?
Digitar nomes e endereços de empregadores anteriores e residências no teclado do celular já foi sofrido, mas inserir datas foi ainda pior
Como o seletor de datas começava no mês e ano atuais e só permitia rolar um mês por vez, eu teria de tocar cerca de 550 vezes para inserir minha data de nascimento
Até tive vontade de denunciar à EEOC, já que isso afeta de forma desproporcional trabalhadores mais velhos, uma classe protegida, mas não era uma boa maneira de me apresentar ao RH do novo empregador
Na prática, vira algo como uma visualização de tela pequena, e isso é um requisito da WCAG