Web Design Reativo: O segredo para criar aplicativos da Web que sejam incríveis

No último ano, observei duas técnicas sutis sendo usadas por alguns desenvolvedores que levam um aplicativo da Web de lento e instável a altamente reativo e polido.

Acredito que essas técnicas são importantes o suficiente para que eles precisem de um nome: Web Design Reativo.

Em resumo, o web design reativo é um conjunto de técnicas que podem ser usadas para criar sites que sempre se sentem rápidos e receptivos à entrada do usuário, independentemente da velocidade ou latência da rede.

Como desenvolvedores da Web e autores de estruturas, acredito que encontrar maneiras de tornar esses padrões padrão em tudo o que construímos é uma das principais prioridades para melhorar o UX e o desempenho percebido na Web.

Técnica 1: cargas instantâneas com telas de esqueleto

Quando bem utilizada, essa técnica quase nunca é percebida, mas tem um enorme impacto no desempenho percebido de um site.

Curiosamente, a técnica é usada por quase todos os aplicativos nativos e os faz sentir muito reativos, mesmo em redes terríveis, mas quase nunca é usado na Web!

Oportunidade assim!

Em resumo, as telas de esqueleto garantem que, sempre que o usuário toque em qualquer botão ou link, a página reaja imediatamente, fazendo a transição do usuário para a nova página e, em seguida, carregando o conteúdo nessa página à medida que o conteúdo se torna disponível.

Facebook usando uma tela de esqueleto para melhorar o desempenho percebido quando você a abre pela primeira vez

As telas do esqueleto são uma técnica de desempenho percebida essencial, pois fazem com que os aplicativos pareçam muito mais rápidos, reduzindo drasticamente o número de momentos em que o usuário fica se perguntando:

O que está acontecendo? Está carregando? Eu toquei certo?

Flipkart.com é um exemplo raro de um site que faz uso dessa abordagem. Navegar pelas categorias ou tocar em produtos, portanto, parece muito rápido, mesmo quando os resultados reais levam alguns segundos para carregar:

Uma captura de tela do flipkart.com lançada na tela inicial no modo autônomo no Android

Quando essa técnica é melhor usada, o conteúdo que já está disponível, como miniaturas ou títulos de artigos, pode ser reutilizado para melhorar ainda mais o desempenho percebido, fazendo com que as cargas pareçam realmente instantâneas.

app.jalantikus.com usa o padrão Skeleton Screens e reutiliza títulos e miniaturas nas transições

Testando sites com telas de esqueleto

Testar como os sites usam essa técnica é fácil: basta usar a emulação de rede do Chrome para tornar a rede o mais lenta possível e clicar em um site. Se estiver indo bem, o site ainda parecerá ágil e responsivo às suas informações.

A velocidade mais lenta suportada na emulação de rede do Chrome

Técnica 2: "Cargas estáveis" através de tamanhos predefinidos nos elementos

Você conhece aquela sensação de que um site está pulando enquanto você tenta usá-lo? Você está apenas tentando ler um artigo e o texto continua se movendo? É o que chamamos de "carga instável" e precisamos queimá-la com fogo .

O conteúdo do slate.com é muito agressivo à medida que a página é carregada. Quanto mais lenta a rede em que você está, mais ela salta.

Cargas instáveis ​​tornam os sites difíceis de interagir e fazem com que se sintam ... bem ... Instáveis!

Navegar em um site instável sempre me lembra como imagino que seria andar por aí durante um terremoto

Cargas instáveis ​​são causadas por imagens e anúncios incorporados a uma página, mas sem incluir nenhuma informação de tamanho. Por padrão, o navegador só sabe o tamanho desses itens depois de carregados; assim que uma imagem é carregada, THUNK !, a página inteira desliza .

Para evitar isso, todas as tags em uma página devem incluir proativamente as dimensões da imagem que elas conterão.

Em muitos casos, as imagens usadas em determinadas páginas sempre têm o mesmo tamanho e, portanto, seu tamanho pode ser simplesmente incluído no modelo HTML, mas em alguns casos o tamanho das imagens é dinâmico e, portanto, seu tamanho deve ser calculado quando a imagem é carregada e modelada. no HTML quando ele é criado.


O mesmo vale para anúncios, geralmente um culpado quando se trata de cargas instáveis. Sempre que possível, crie uma div que contenha um anúncio e, em seu modelo, defina-a para ser dimensionada com o seu melhor palpite sobre qual será o tamanho desse anúncio.

Observe que cargas instáveis ​​são piores em redes lentas, pois você acaba de ler o conteúdo quando ele repentinamente salta e você nunca pode ter certeza de que está seguro.

Juntando tudo

Criei um pequeno site de demonstração em reactive.surge.sh para demonstrar a diferença entre web design convencional e reativo.

Carregamento convencional de artigos

Observe como é lento e como é frustrante o salto de conteúdo. Curiosamente, acho essas ordens de magnitude mais irritantes em dispositivos móveis ao tocar na tela e não vê-la reagir.

Carregando um artigo com web design reativo

Com design reativo, a carga parece instantânea e o site permanece reativo ao tocar no ícone de volta e no título do artigo várias vezes

Empacotando

Quanto mais lenta a rede, pior a experiência do usuário quando as transições de página são bloqueadas na rede e as páginas pulam por longos períodos.

Com o Reactive Web Design, podemos fazer com que nossa experiência pareça ágil e responsiva ("Design responsivo" como um nome já foi escolhido, não!), Mesmo em redes lentas e dolorosas.

Gostaria de saber sobre os dados da comunidade sobre o efeito do desempenho percebido nos KPIs, como engajamento e receita!

Além disso, incentivaria os autores de estruturas e bibliotecas a considerar como tornar as telas de esqueleto e as cargas estáveis ​​o padrão, também conhecido como o poço do sucesso.

Se você pensa sobre isso, envie um tweet para @owencm e, se você gostou, dê um ♥!

P.S. verifique o site de demonstração reactive.surge.sh em um dispositivo móvel para ver toda a glória!