![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-300329-63831d1ed236e.webp\")
<\/a><\/p>\n\n No entanto, ele se transforma em um layout de coluna \u00fanica com um menu oculto em ambos, tablet e celular. O menu do site na vers\u00e3o desktop tamb\u00e9m vem com r\u00f3tulos e \u00edcones, tornando mais f\u00e1cil para as gera\u00e7\u00f5es mais velhas (que s\u00e3o mais propensas a usar desktop ou laptop) entender.\n<\/p>\n
\n A navega\u00e7\u00e3o suave desempenha um papel cr\u00edtico em manter os clientes em potencial em seu site por mais tempo. Os usu\u00e1rios est\u00e3o impacientes. Eles n\u00e3o v\u00e3o esperar para sempre se n\u00e3o encontrarem o que desejam. Como resultado, uma navega\u00e7\u00e3o ruim pode afetar diretamente sua taxa de convers\u00e3o e, portanto, seus lucros. Assim, os usu\u00e1rios devem ser capazes de acessar e navegar em seu site sem problemas em todos os dispositivos.\n<\/p>\n \n Quando se trata de navega\u00e7\u00e3o no site, geralmente menos \u00e9 mais. Portanto, minimize o n\u00famero de links de navega\u00e7\u00e3o o m\u00e1ximo poss\u00edvel. Voc\u00ea n\u00e3o quer sobrecarregar os usu\u00e1rios com muitas op\u00e7\u00f5es. Oferecer muitos links tamb\u00e9m pode afetar adversamente seu SEO, porque os rastreadores da Web acham dif\u00edcil decifrar esse conte\u00fado.\n<\/p>\n \n Portanto, certifique-se de adicionar links para palavras-chave e frases apropriadas. Corrija os links quebrados o mais r\u00e1pido poss\u00edvel. Se voc\u00ea substituiu uma p\u00e1gina da Web antiga por uma nova, certifique-se de criar um link de redirecionamento adequado.\n<\/p>\n \n Evite brincar muito com a sua criatividade. Muitas vezes \u00e9 melhor ficar com a arquitetura de navega\u00e7\u00e3o padr\u00e3o. Na esperan\u00e7a de se destacar na multid\u00e3o, as pessoas costumam fazer uso excessivo de anima\u00e7\u00f5es ou gr\u00e1ficos e acabam tendo o efeito exatamente oposto nos usu\u00e1rios.\n<\/p>\n \n \u00c9, no entanto, desej\u00e1vel incorporar as \u00faltimas tend\u00eancias de navega\u00e7\u00e3o em seu site. Por exemplo, 2017 viu um aumento substancial em barras de navega\u00e7\u00e3o fixas, mega menus e menus sub-nav responsivos, entre outros. Usar qualquer um desses recursos em seu site provavelmente \u00e9 uma boa ideia.\n<\/p>\n \n O site do Museu de Arte Moderna de S\u00e3o Francisco \u00e9 talvez a melhor combina\u00e7\u00e3o de navega\u00e7\u00e3o f\u00e1cil e gr\u00e1ficos impressionantes. O menu principal simples, mas elegante, fornece links para todos os itens essenciais, incluindo exposi\u00e7\u00f5es, projetos, obras de arte em destaque, detalhes de ingressos, hor\u00e1rios de visitas e associa\u00e7\u00e3o.\n<\/p>\n \n Voc\u00ea n\u00e3o precisa rolar a p\u00e1gina inicial para ver todos esses links. Em vez de texto e imagens, eles usaram v\u00eddeos que fazem voc\u00ea se sentir como se estivesse no museu.\n<\/p>\n \n Eles tamb\u00e9m mantiveram a estrutura de navega\u00e7\u00e3o intuitiva intacta em todo o site. Esteja voc\u00ea verificando as obras de arte ou os projetos, nunca se sentir\u00e1 perdido. O site comunica a complexidade da arte e das pinturas de uma forma relativamente simples, exatamente como as pessoas comuns gostariam de vivenciar.\n<\/p>\n \n Todo mundo sabe que a velocidade do site \u00e9 importante. Mas, o qu\u00e3o r\u00e1pido seu site precisa ser \u00e9 uma quest\u00e3o de debate. De acordo com um estudo recente publicado pelo Google, um segundo \u00e9 o tempo ideal de carregamento de uma p\u00e1gina da web. No entanto, se demorar at\u00e9 tr\u00eas segundos para carregar seu site, voc\u00ea ainda est\u00e1 bem, pois a taxa de rejei\u00e7\u00e3o n\u00e3o passa de 32%. Mas, se o tempo de carregamento aumentar ainda mais, digamos at\u00e9 cinco segundos, a taxa de rejei\u00e7\u00e3o ser\u00e1 de 90%, enquanto um atraso de dez segundos leva a um aumento de 123%.\n<\/p>\n \n O Google vem dando tratamento preferencial para sites de carregamento r\u00e1pido h\u00e1 algum tempo. Era limitado apenas a computadores pessoais. Mas, com o aumento do tr\u00e1fego da web em telefones celulares, o Google decidiu aumentar a velocidade da p\u00e1gina como um fator de classifica\u00e7\u00e3o para pesquisas em dispositivos m\u00f3veis a partir de julho de 2018. Portanto, a velocidade de carregamento do site precisa ser a mais alta poss\u00edvel.\n<\/p>\n \n A primeira coisa que voc\u00ea precisa fazer \u00e9 descobrir quanto tempo leva para carregar diferentes partes de cada p\u00e1gina da web em seu site. Embora voc\u00ea possa usar ferramentas de an\u00e1lise de velocidade como WebPageTest<\/strong> ou Pingdom<\/strong>, elas n\u00e3o s\u00e3o suficientes.\n<\/p>\n \n Para ver a velocidade de carregamento de cada elemento em seu site, voc\u00ea pode clicar com o bot\u00e3o direito do mouse na p\u00e1gina que deseja analisar, clicar em “Inspecionar” e, em seguida, clicar na guia “Rede”. Voc\u00ea pode fazer isso em qualquer navegador. Por exemplo, o carregamento O tempo para v\u00e1rios elementos na p\u00e1gina da Web http:\/\/www.instantshift.com\/category\/web-design\/<\/a> no navegador Firefox \u00e9 descrito abaixo. Esta an\u00e1lise fornecer\u00e1 a voc\u00ea os dados para identificar o elemento de carregamento lento em cada p\u00e1gina da Web.\n<\/p>\n \n Ele tamb\u00e9m mostrar\u00e1 quantas solicita\u00e7\u00f5es HTTP seu site faz. Reduzir o n\u00famero de solicita\u00e7\u00f5es HTTP \u00e9 uma \u00f3tima maneira de melhorar sua velocidade. Identifique e elimine imagens, textos ou gr\u00e1ficos desnecess\u00e1rios, se houver.\n<\/p>\n \n Outras etapas de melhoria de velocidade incluem o uso de uma rede de entrega de conte\u00fado (CDN), usando um dom\u00ednio sem cookie apoiado por um CDN para hospedar seus arquivos est\u00e1ticos, reduzindo e combinando seus arquivos HTML, CSS e JavaScript, instalando o Google PageSpeed \u200b\u200bem seu servidor e adiar o carregamento do JavaScript, entre outras coisas.\n<\/p>\n \n Ambos, texto e recursos visuais s\u00e3o fatores cr\u00edticos de um site. No entanto, seu site n\u00e3o pode atrair mais tr\u00e1fego da Web sem encontrar o equil\u00edbrio certo entre esses dois elementos. Em outras palavras, os gr\u00e1ficos n\u00e3o devem dominar o texto e vice-versa.\n<\/p>\n \n O c\u00e9rebro humano, no entanto, tende a se lembrar de imagens visuais melhor e por mais tempo. Na verdade, as pessoas conseguem se lembrar de 65% dos visuais quase tr\u00eas dias depois, em compara\u00e7\u00e3o com 10% do conte\u00fado de texto no mesmo per\u00edodo. Seu conte\u00fado pode gerar at\u00e9 94% mais visualiza\u00e7\u00f5es se voc\u00ea adicionar elementos visuais e gr\u00e1ficos atraentes a ele.\n<\/p>\n \n Al\u00e9m disso, o conte\u00fado visual viral (v\u00eddeos, GIFs e imagens) pode gerar mais links de entrada. Al\u00e9m disso, um n\u00famero cada vez maior de pessoas est\u00e1 acessando a web a partir de seus celulares, principalmente a gera\u00e7\u00e3o mais jovem. Usar mais recursos visuais faz sentido porque assistir a um v\u00eddeo \u00e9 muito mais f\u00e1cil do que ler um longo par\u00e1grafo no celular.\n<\/p>\n \n H\u00e1 um por\u00e9m. Mais v\u00eddeos, gr\u00e1ficos e imagens de alta defini\u00e7\u00e3o significam que seu site carregar\u00e1 mais lentamente. Conforme mencionado no ponto anterior, sites com carregamento mais lento levam a taxas de rejei\u00e7\u00e3o mais altas. Os mecanismos de pesquisa tamb\u00e9m acham dif\u00edcil reconhecer recursos visuais em compara\u00e7\u00e3o com texto. Uma maneira de superar esse problema \u00e9 adicionar “Alt Text” apropriado \u00e0s imagens.\n<\/p>\n \n Ao usar o “Alt Text”, concentre-se n\u00e3o apenas na segmenta\u00e7\u00e3o por palavra-chave, mas tamb\u00e9m na inten\u00e7\u00e3o do usu\u00e1rio. Por exemplo, d\u00ea uma olhada na imagem a seguir. Pode significar uma variedade de coisas. Voc\u00ea pode perceber esta imagem como um sinal de felicidade ou motiva\u00e7\u00e3o ou at\u00e9 mesmo uma sensa\u00e7\u00e3o de realiza\u00e7\u00e3o.\n<\/p>\n \n Portanto, se o seu site trata de algo como sucesso pessoal ou profissional, mencionar “maneiras de atingir seu objetivo” em seu “texto alternativo” \u00e9 muito melhor do que simplesmente dizer “uma garota pulando no ponto do p\u00f4r do sol”.\n<\/p>\n \n Por outro lado, um site sobre depress\u00e3o e aconselhamento deveria usar algo como “superar a depress\u00e3o com felicidade inerente”. No entanto, evite exagerar na descri\u00e7\u00e3o. N\u00e3o deve parecer antinatural, pois os mecanismos de pesquisa n\u00e3o gostam de preenchimento de palavras-chave. Use uma descri\u00e7\u00e3o relevante e significativa.\n<\/p>\n \n O equil\u00edbrio visual e de texto n\u00e3o deve necessariamente ser sim\u00e9trico. Voc\u00ea pode organizar esses dois elementos de forma assim\u00e9trica, principalmente se pretende dar um ar mais informal, moderno ou descontra\u00eddo ao seu web design.\n<\/p>\n \n A p\u00e1gina inicial do Dropbox<\/strong> \u00e9 um exemplo de layout assim\u00e9trico de texto e imagens. Ele chama a aten\u00e7\u00e3o do usu\u00e1rio para os pontos focais imediatamente. Mas nem o visual nem o texto parecem superar um ao outro.\n<\/p>\n \n A Seedlip<\/strong>, uma empresa que vende destilados n\u00e3o alco\u00f3licos, faz amplo uso de espa\u00e7os em branco, fontes em negrito e texto simples sempre que poss\u00edvel. \u00c9 o equil\u00edbrio certo de texto e visual que serve bem ao p\u00fablico-alvo.\n<\/p>\n \n Apesar de tomar todas as precau\u00e7\u00f5es, as coisas ainda podem dar errado, resultando em erros no site. Embora voc\u00ea n\u00e3o possa evitar completamente esses erros desfavor\u00e1veis, certamente pode abra\u00e7\u00e1-los com gra\u00e7a. Seus clientes em potencial j\u00e1 se sentem irritados depois de encontrar uma p\u00e1gina da web errada. Por que esfregar sal na ferida com uma mensagem de erro mon\u00f3tona (ou absolutamente irritante)? Infelizmente, esse aspecto do design da web permanece amplamente negligenciado.\n<\/p>\n \n Mesmo que seus usu\u00e1rios tenham digitado um nome de usu\u00e1rio ou endere\u00e7o de URL errado, evite culp\u00e1-los a todo custo. Pelo contr\u00e1rio, as mensagens de erro devem ser t\u00e3o amig\u00e1veis \u200b\u200bquanto poss\u00edvel. Sempre use linguagem educada ao apontar um erro. Por exemplo, em vez de usar uma mensagem padr\u00e3o como “O endere\u00e7o de e-mail que voc\u00ea digitou est\u00e1 errado”, o Mail Chimp<\/strong> usa a seguinte descri\u00e7\u00e3o de tratamento de erros.\n<\/p>\n \n Piccsy<\/strong> leva o tratamento de erros a um n\u00edvel totalmente novo com a ajuda do humor leve. Se voc\u00ea encontrar o erro “404 \u2013 p\u00e1gina n\u00e3o encontrada” em seu site, \u00e9 isso que voc\u00ea ver\u00e1.\n<\/p>\n<\/a><\/p>\n\n 2 Navega\u00e7\u00e3o F\u00e1cil
\n<\/h3>\n\n A. Menos \u00e9 mais
\n<\/h5>\n\n B. Muita criatividade pode ser prejudicial
\n<\/h5>\n<\/a><\/p>\n<\/a><\/p>\n\n 3 Site de Carregamento R\u00e1pido
\n<\/h3>\n<\/a><\/p>\n\n A. Identifique o tempo de carregamento para cada elemento
\n<\/h5>\n<\/a><\/p>\n\n B. Reduzir o n\u00famero de solicita\u00e7\u00f5es HTTP
\n<\/h5>\n\n 4 Uso equilibrado de recursos visuais e texto
\n<\/h3>\n\n A. N\u00f3s nos lembramos de recursos visuais facilmente
\n<\/h5>\n<\/a><\/p>\n\n B. Os recursos visuais t\u00eam um custo
\n<\/h5>\n<\/a><\/p>\n\n C. Equil\u00edbrio visual-texto assim\u00e9trico tamb\u00e9m funciona
\n<\/h5>\n<\/a><\/p>\n<\/a><\/p>\n\n 5 Tratamento correto de erros
\n<\/h3>\n\n A. Seja educado
\n<\/h5>\n<\/a><\/p>\n\n B. Use humor leve
\n<\/h5>\n