Design & UX

4 fev, 2016

Além da responsividade: projetos e tendências de desenvolvimento para marketeiros adaptáveis

Publicidade

Um amigo meu recentemente me pediu para avaliar e explicar uma série de recomendações enviadas por uma conhecida agência de marketing digital com raízes em SEO. Nós conversamos sobre as (geralmente boas) recomendações para conteúdo e otimização de busca, e então chegamos a isto:

“* Dispositivos móveis geram 53% do seu tráfego. Recomendamos a construção de um site responsivo e amigável para dispositivos móveis. O Google recomenda usar o design responsivo para que seu site seja exibido corretamente em todos os dispositivos, e isso pode ajudar a aumentar os rankings móveis”.

E foi isso. Um ponto importante que diz “construa um site responsivo” é quase como começar uma inspeção no site atual e fazer um monte de pequenos reparos até se chegar a um ponto que diz: “Além disso, construa um site novo, com características modernas”.

Nós, como profissionais de marketing, precisamos perceber que esse conselho não é bom o suficiente. Nós não estamos ajudando alguém com afirmações genéricas que não dá orientação sobre por onde começar ou o que pensar. O Google pode recomendar a responsividade, mas isso não significa que é a única opção ou que é sempre a opção certa. Mesmo que seja a opção correta, precisamos ter alguma ideia sobre como fazer a responsividade direito.

Se nós estamos dizendo às pessoas para redesenhar seus sites, é melhor ter algo mais profundo do que um único ponto em um documento de 20 páginas. O que implica dizer que “o Google irá recompensá-lo pelo seu site responsivo” e deixar por isso mesmo pode fazer mais mal do que bem. Ele também perde uma tremenda oportunidade de ajudar os clientes a construírem um grande site com uma fantástica experiência de usuário.

Isso é bom se você não está bem versado em arquitetura de site, design, experiência do usuário e/ou intenção do usuário. Só não mencione um projeto gigantesco como um redesign de site, se tudo que você tem a dizer é “construa um site responsivo porque o Google quer”

Este artigo é uma olhada para como as empresas estão lidando com o futuro da web, para melhor ou pior. Meu objetivo é ajudar SEOs, gestores de conteúdo e todos os outros profissionais de marketing digital a falar de forma mais inteligente sobre sites responsivos, acesso móvel e outras tendências de design e desenvolvimento.

Não siga a multidão: você corre o risco de ir para o Windows 8

Nós aprendemos algumas lições importantes sobre design de plataforma cruzada com o desastre que foi o Windows 8. Ele foi uma bagunça por muitas razões – e ainda assim eu vejo as mesmas pessoas que zombaram do Windows 8 começando a cometer alguns dos mesmos erros em seus sites. Para quem nunca usou o Windows 8 em seus primeiros dias, deixe-me explicar por que foi tão ruim.

  • “Metro” (ou “Modern” ou qualquer outro) evitava a navegação por simplicidade moderna. Ele apresentava grandes ícones – e nenhuma maneira clara de fazer mais do que cliques nesses ícones. Os usuários de desktop odiaram.
  • Havia um monte de recursos e opções novas, mas a maioria das pessoas nunca soube pois estavam escondidas em inúteis sub-navegações. O Windows 8 poderia realmente fazer algumas coisas novas muito legais – mas poucas pessoas sabiam o que podiam fazer, porque isso não era visível.
  • Os usuários não sabiam fazer o que eles queriam. Menus e botões foram rejeitados em favor de imagens inchadas de ícones de aplicativos. Características comuns como o menu Iniciar, painel de controle e busca de arquivos foram subitamente movidas para locais não-padrão. Milhares de pessoas procuravam no Google todo mês para descobrir como fazer coisas simples como desligar seu computador e executar uma pesquisa. Isso é ridículo.

responsivo-1

Uma pequena amostra de pessoas pedindo ao Google para ajudá-los a navegar em um produto Microsoft. Também é interessante saber: o Windows 7 sempre teve pesquisas relacionadas também com volumes mais mais baixos, apesar de ter 4-5x o número de usuários ativos.

Agora estamos aqui, três anos mais tarde, assistindo à web criar um universo Windows 8 para seus usuários. Menus são redimensionados em pequenos hambúrgueres no desktop. Não faça isso! Você está alienando seus usuários desktop como o Windows 8 fez. Eles têm que clicar em algo duas ou três vezes, em vez de apenas uma vez para encontrar o que precisam em seu menu. E não se engane: você não é o Windows. Ninguém vai perguntar ao Google como usar a barra de navegação do seu site. Eles estão olhando para o resultado número dois.

Vejamos um exemplo de como cometer o erro Windows 8 na web. Vamos pensar grande. Vejamos o caso da Honda:

responsivo-2

Isso é o que acontece quando você pega uma tendência de design e tentar forçá-la em seu site corporativo, sem pensar nos usuários ou no por que eles estão vindo para o seu site. O que esse site vende? Sonhos? Nuvens? Imagens? O texto na página poderia ser colocado em praticamente qualquer site de empresa no mundo. A Honda foi um completo Windows 8 em seu site corporativo.

Nota: eu estou mexendo com a Honda, porque sei que ela pode levar uma surra e continuar correndo – assim como o meu CR-V (que eu adoro).

Eu, obviamente, não sou um fã do menu de navegação do estilo móvel em expansão no desktop, mas a Honda me surpreendeu com uma bagunça excessivamente complicada de menu.

responsivo-3

Eu entendo que a empresa faz grandes motores, barcos e peças de aeronaves. O seu negócio ter muitas partes não significa que cada parte merece a mesma ênfase. A Honda precisa dar um passo para trás e perguntar o que os usuários querem, quando chegam ao site, e perceber que é inviável atender a cada intenção – especialmente se quiser manter o seu design simplista.

E a concorrência?

responsivo-4

A Toyota e outros concorrentes conhecem a maioria dos usuários que visitam o site para olhar as opções de automóvel ou encontrar uma loja. Honda e Toyota têm locais para corridas, e ambas as empresas vendem motores industriais. Mas a Toyota entende que a maioria dos usuários que acessam o site Toyota.com quer a marca do consumidor, e também que os entusiastas de corrida vão buscar pelos termos “corrida Toyota” no Google e chegar ao site. Há também um link diretamente para isso no rodapé.

responsivo-5

A exceção à regra de evitar o que eu estou chamando de somente móvel (mobile-only) pode ser uma empresa de design. Aqui está o site do Big Spaceship. Eles são uma agência de design que sabe mais sobre web design do que eu jamais saberei. É um ótimo site, e provavelmente vai obter vendas. Não o copie. Não imite o site de uma agência de design, a menos que você seja uma agência de design. Eu estou falando com você, Honda.

Quando um usuário visita o site de uma empresa de design, ele quer ver as habilidades da empresa. Agências de design, como Big Spaceship, são sábias para mostrar e vender aos usuários as suas capacidades de design imediatamente. Em essência, a home page funciona como uma página de página inteira contendo produtos e promovendo vendas.

Eu tenho visto agências de SEO/Design/Marketing criando o que são essencialmente somente sites (design-only), e depois perguntam por que ninguém está interessado em seus serviços de SEO. Já vi empresas de produtos usando um logotipo + menu hamburger + um enorme esquema de imagem de produto, e têm problemas em vender nada, mesmo o produto estando em destaque na primeira imagem. Isso é o que você ganha por copiar as partes legais dos sites.

Só faz sentido mostrar uma coisa se ​​você faz essa coisa. Bom design no caso da Amazon é muito diferente. A Amazon tem milhões de produtos, e eles não querem que as pessoas fiquem clicando em categorias, escolhendo as erradas, e se perdendo ou se frustrando. A função de pesquisa é a chave de um mega-site: assim, existe a barra de pesquisa não tão bonita em cada página da Amazon.

Alinhar as intenções dos usuários com itens de navegação e conteúdo da página de destino. Mostre-lhes como navegar ou buscar seus produtos e serviços sem fazê-los clicar desnecessariamente. Mantenha itens buscáveis em um nível gerenciável, e certifique-se de que você tem um caminho simples para encontrar as coisas com um único clique em seu site. Olhe como o Medium alinha intenções com design.

responsivo-6

Simplicidade funciona para mensagens do Medium: o usuário quer ler o texto sobre o qual posicionou o mouse, e o foco do design do site é a leitura do texto. O Medium vai adiar qualquer oferta de outros textos ou compartilhar mais até que você tenha feito a leitura do texto onde está. A maior parte dessas chamadas estão na parte na parte inferior do artigo. Agora olhe para a home page.

responsivo-7

Inteligente. Quando alguém cai em um artigo, é porque quer lê-lo. Então, mostre-lhes o artigo! Quando alguém para na página inicial, as suas intenções variam. Dê-lhes opções que não estejam escondidas atrás de um menu hamburger. Mostre-lhes o que eles podem fazer.

Descubra o que seus usuários querem saber ou ver, e construa esses elementos de forma destacada no site. Não copie cegamente o web design, ou você corre o risco do Windows 8 de alienar os seus principais usuários, especialmente no desktop.

Então, como você sabe o que seus usuários querem ver?

1. Execute pesquisas na página

Uma das melhores maneiras de descobrir o que as pessoas estão procurando é perguntar. Não irrite continuamente as pessoas com pop-ups, mas, se você está apenas começando, vale a pena reunir a informação up-front. Pergunte às pessoas o que elas estão procurando quando visitam seu site. Nós usamos Qualaroo, mas existem muitas ferramentas simples que podem ser implementadas rapidamente.

responsivo-8

Se você já sabe o que as pessoas estão procurando, deve se certificar de que sabe quais são as suas considerações preliminares para a compra. O preço importa mais para elas do que poder ou qualidade? Se o preço é mais importante para seus compradores, o preço deve ser destaque no design.

2. Use testes divididos para entender a intenção

Há muitas razões para executar testes divididos, e o foco deve ser normalmente na conversão. O problema é que às vezes nos concentramos exclusivamente em qual versão converte melhor, e nos esquecemos de perguntar o porquê.

Nós usamos Optimizely, e é incrível. Nós também mantemos um registro dos resultados dos testes com a nossa hipótese de pré-teste, páginas testadas, um link para resultados, e por isso que acho que ele ganhou. Em seguida, tente pensar sobre as implicações se estamos certos sobre a nossa conclusão.

  • Onde mais poderíamos estar cometendo o erro da versão que está perdendo vendas?
  • Que outras páginas são impactadas se estamos certos sobre o que nossos usuários querem?
  • Existe conteúdo que pode ser criado para resolver os problemas dos usuários? Existem páginas principais ou explicações que estão faltando?

É um pouco perigoso aplicar as conclusões de um único teste em todo o site, de modo que esse teste geralmente leva a mais testes. Depois de três ou quatro testes é que você pode estar pronto para fazer mudanças moderadas sem executar um teste dividido, permitindo-lhe passar para o próximo grande teste.

3. Olhe para os segmentos de mercado

Tente descobrir onde os usuários estão mentalmente vendo os segmentos de mercado. Não confunda segmentos de mercado com o que os usuários estão tentando comprar. Em vez disso, use-os para entender o que mais o usuário tem olhado. Aqui está um site que trabalha nisso:

responsivo-9

Então, o que esse site está me dizendo sobre serviços para casa? O que imobiliárias, emprego, hotéis, carros novos e móveis para casa têm em comum? Essas são todas as coisas que as pessoas precisam se elas estão se mudando. Se formos espertos sobre isso, nosso site deve ter mensagens e opções de navegação claramente destinadas a pessoas que estão de mudança. Talvez guias móveis seriam uma boa ideia de conteúdo. Essas são todas as oportunidades que passam despercebidas se estamos apenas focados no que as pessoas querem comprar.

Alguns sites estão voltando para sites móveis, e está tudo bem

Tem sido dito que o Google “gosta” de design responsivo e vai priorizar sites responsivos com maior ranqueamento nas pesquisas. Eu discordo nesse segundo ponto. O Google gosta de sites que dão ao usuário o que eles querem, independentemente da tecnologia utilizada.

Sim, o Google recomenda design responsivo. Eu também, mas o faço por que é, de longe, a abordagem mais fácil multidispositivo para manter e a mais difícil de dar problema. Isso não significa que esse seja o único caminho, e isso não significa que o Google irá penalizar um site por proporcionar uma experiência móvel superior de uma maneira diferente.

Há muitos benefícios para sites móveis. Em alguns sites, a intenção e o comportamento dos usuários móveis são diferentes o suficiente de usuários desktop, o que justifica a criação de uma experiência móvel específica. Ela também é compatível com a meta de um site de carregamento rápido.

responsivo-10

Sites responsivos são geralmente muito mais lentos para carregar, de acordo com um relatório da The Search Agency.

Você pode e deve tornar o seu site rápido com a responsividade, mas há uma série de razões locais mais sensíveis que acabam por deixar o site mais lento no celular. Ambos são sites móveis dinamicamente servidos e naturalmente se prestam para a construção com rapidez em mente. Um site móvel específico também pode oferecer uma experiência que é ideal para a intenção do usuário naquele momento.

Em julho passado, Cindy Krum falou sobre a “intenção móvel” durante sua apresentação no Mozcon. Pode soar como um chavão, mas é verdade que os usuários móveis estão em um local diferente. Eles não estão em busca da comparação de versões. Eles querem comprar ou obter rapidamente alguns detalhes sobre o produto.

Se você está pensando em fazer um site móvel, verifique se você tem um monte de pessoas dispostas a construí-lo corretamente e mantê-lo. Não subestime o tempo que o desenvolvedor vai demorar para fazer todo o trabalho no site. Você vai precisar de SEOs que sabem como configurar tags rel e, idealmente, verifique se o site móvel tem uma estrutura de URL idêntica. Você vai precisar de muita QA para se certificar de que todos os seus tipos de página estão sendo atendidos corretamente.

Alguns SEOs vão dizer que um sub-domínio móvel ou sub-pasta é pior para SEO porque links para um não contarão como links para o outro. Bobagem! É para isso que as tags rel = “canonical” e rel =”alternate” foram feitas. Assim como se preocupar com não-www 301 redirecionando para a versão www, essas são coisas que fazem uma grande diferença em um ponto, mas já não são tão essencialmente importantes como eram. O Google é inteligente o suficiente para entender o que está acontecendo – a menos que você não implemente as práticas corretamente.

Design responsivo ainda é a melhor opção para a maioria das empresas, mas não há nenhuma razão para ser dogmático sobre isso. Há uma razão para o Google lhe dar três opções. Um site móvel pode funcionar para as grandes empresas, e muitas vezes é a melhor opção para os gigantescos sites de comércio eletrônico.

O desenvolvimento Web continua a evoluir – incluindo bibliotecas JavaScript

O uso de JavaScript é o lugar onde os SEOs são muitas vezes culpados de dar conselhos com data para morrer. O SEO deve permitir que o conteúdo seja mostrado para mais pessoas em mais pesquisas. O SEO não deve ser utilizado para restringir conteúdo útil à criação de ferramentas, a menos que seja absolutamente necessário.

A sabedoria tradicional de SEO tem sido sempre para evitar colocar qualquer conteúdo em JavaScript que queremos que os indexadores vejam. Esse é um conselho desatualizado para websites desde 2015. Bibliotecas como React e Angular podem ser ferramentas incríveis. Elas estão cheias de recursos, são divertidas de usar e podem fazer com que seu site fique mais rápido e mais responsivo.

Se o Google quer recompensar uma experiência positiva, e se o JavaScript pode ajudar os proprietários de sites a oferecem uma experiência de usuário estelar, então os SEOs devem abraçar o JavaScript. Em vez de fazer lobby contra qualquer JavaScript no site, é hora de ficar um pouco mais sofisticado na nossa abordagem para ajudar a equipe a usar suas ferramentas corretamente.

React e Angular podem definitivamente tornar seu conteúdo dinâmico mais divertido de usar, mas eles também fazem uso intenso de AJAX na execução do lado do cliente, o que o Google realmente não entende (ainda). Desenvolvedores e SEOs devem estar cientes de como fazê-lo funcionar.

Tornar o AJAX Google-friendly pode ser o seu próprio texto. De fato, já existem vários grandes textos. O Google também tem alguns ótimos guias – certifique-se de verificar os recursos vinculados também. Um pequeno aviso: há um monte de informações desatualizadas por aí sobre o tema.

Você pode obter um monte de técnicas SEO no âmago da questão usando coisas como Prerender ou V8. Tente encontrar uma ferramenta que irá gerar automaticamente uma versão rastreável ​​ao usar AJAX. Comunique-se com seus desenvolvedores para encontrar uma solução que funciona com a sua configuração.

Um exemplo de humildade

Como eu disse, é importante ter certeza de que você vai se comunicar com os desenvolvedores antes do início da construção do projeto. Vou usar uma dolorosa experiência recente como exemplo. Acabamos de construir um site baseado em React, ferramenta que ajuda os iniciantes a estimar a quantidade de velocidade de Internet que eles precisam. Ele imediatamente redireciona todos os visitantes para uma URL com uma hashtag, e o resto da pesquisa está atrás de uma hashtag. E nenhum texto pode ser rastreado sem execução do lado do cliente.

responsivo-11

Oops.

Nós construímos uma ferramenta incrível, e então a escondemos do Google. Alguém mate o cara que deixou isso passar… apenas não diga a ninguém que era eu. Nós usamos React.js aqui, e foi uma explosão. Também recebemos um excelente feedback dos usuários. A lição aqui não é para evitar React e AJAX. A lição aqui é comunicar os requisitos de SEO para os desenvolvedores bem cedo. A correção será feita em breve, mas demorou muito mais tempo do que se eu tivesse feito a minha diligência de antemão.

Compreender a implementação JavaScript Google-friendly é o trabalho de cada SEO. Outros profissionais de marketing digital devem, pelo menos, estar cientes de que há um problema potencial e uma solução técnica.

Eu amo ferramentas interativas que são rápidas e úteis. Os SEOs devem facilitar a construção de coisas que são incríveis. Isso significa ajudar a encontrar soluções em vez de fazer lobby contra um conjunto inteiro de ferramentas que são amplamente utilizadas na web moderna.

Não se esqueça dos aplicativos indexáveis

O Google agora pode indexar e classificar aplicativos, e eles têm algumas decentes orientações sobre como fazê-lo. É possível que as empresas de construção de apps com uma base de clientes exclusivamente móvel não precisem mesmo de um site tradicional.

A maioria das empresas ainda vai querer construir e manter sites, mas elas devem estar abertas para a ideia de que um site responsivo pode não ser a melhor opção para um pequeno desenvolvedor de jogos móveis. A opção certa pode ser adicionar links para conteúdo e discussão e, em seguida, apoiar a profunda ligação dentro do aplicativo.

Mesmo somente um app não é a opção certa – considere que o conteúdo dentro de aplicativos pode ser um meio mais atraente para as pessoas que já instalaram o aplicativo. Por exemplo, um fórum de discussão para os jogadores do game pode funcionar melhor dentro do próprio app do jogo. Ele definitivamente poderia se sentir mais envolvido e imersivo se os usuários nunca tiverem que deixar o app para fazer a um usuário companheiro uma pergunta ou um discurso retórico sobre a atualização mais recente.

Pensamentos finais

Um site pode parecer impressionante quando você encolhe e expande a janela ao apresentar o projeto para o c-suite, mas se os tomadores de decisão reais e os usuários não sabem o que é um menu cheeseburger, você não vai vender muitos bancos de imagens na Terra. Sites responsivos são uma ótima opção – muitas vezes a opção certa – mas não é a única opção. Esperamos que este artigo possa ajudar a obter alguns pensamentos para fazer a coisa certa.

Eu não estou dizendo que responsivo está morto. Meu ponto é que, se o nosso conselho deriva em design e desenvolvimento, devemos ser capazes de dar conselhos mais concretos. Não basta construir sites que respondem ao tamanho da tela. Construir sites que respondem imediatamente às necessidades do seu cliente é mais importante.

***

Carson Ward faz parte do time de colunistas internacionais do iMasters. Você pode ver o original em: https://moz.com/blog/beyond-responsive-design-and-development-trends-for-marketers. Esta tradução foi feita com permissão. Moz não tem qualquer afiliação com este site.