Home page: O que é? Qual a sua importância?
Este é dos termos mais antigos e mais usados quando o assunto é website.
Para muitos já representou o aspecto mais importante de um site. Embora ainda tenha importância, já não é visto como foi um dia.
Estamos falando da home page de um site.
Pode parecer um assunto bastante óbvio para muitos, mas há muita gente que não tem muito claro seu conceito e consequentemente não compreende sua importância.
Por isso, vamos acabar com todas as dúvidas e ainda apresentar os fatores que podem fazer a diferença em uma boa home page.
O que é home page?
Traduzir literalmente não explica muita coisa, já que ao fazê-lo, temos "página da casa", sendo que casa aqui, assume o sentido de lar ou o lugar em que se habita. Não é esse o significado, mas o do lugar em que "reside" ou está localizado o conteúdo inicial, a apresentação, a fachada ou a primeira coisa que se vê no site ao acessá-lo.
Simplificando, é a primeira página que o visitante tem acesso, quando digita o domínio no navegador. Comparado ao mundo real, é a entrada ou a fachada da loja que o cliente visualiza ao chegar à empresa.
Quando dissemos que já representou o aspecto mais importante de um site, somos remetidos aos primeiros anos da Internet, quando o Google nem mesmo existia ou mesmo quando dava seus primeiros passos.
Nessa época, já existiam as ferramentas de busca, mas seu princípio de funcionamento era muito diferente do que temos hoje.
Naquela época constar de um diretório web, de buscadores, ou de serviços que evoluíram para os nossos atuais mecanismos de busca, muitas vezes exigia a realização da inclusão manual em uma a uma de cada ferramenta existente.
Muitas vezes, informava-se o nome do site, o domínio, o tipo de conteúdo e o endereço da home page, que comumente era algo como: http://www.meusite.com.br/home.html ou http://www.meusite.com.br/index.html.
Nada além disso. O visitante desembarcava na home e a partir daí era sua responsabilidade encontrar o que buscava.
Nesse contexto, era natural que a home page tivesse importância única, já que invariavelmente o visitante chegava a todo e qualquer site, por meio do acesso à página inicial.
Essa era a regra, até que aos poucos, ferramentas como AltaVista, Yahoo! e o nacional Cadê começaram a permitir que outras páginas fossem incluídas. Ainda assim, era habitual chegar a um site novo, por meio da sua home.
Analogamente ao que acontece no mundo físico, o que você visualiza na entrada de um estabelecimento comercial, é em geral o que vai fazê-lo escolher entre de fato entrar e consumir o que ele tem a lhe oferecer, ou virar-se e sair em busca de outro.
Com um site e sua home page, também sempre foi assim, principalmente a partir do momento em que o internauta começou a contar com várias opções e concorrentes.
Esse foi o auge da importância da página inicial de um site, onde ser suficientemente atrativo, significava ganhar um visitante ou um cliente, ou mandá-lo embora atrás de um concorrente.
A home page é importante?
Sim, é. Mas há quem diga que é, mas não como já foi um dia.
Já a algum tempo, se o seu site está devidamente indexado e para algumas pesquisas aparece razoavelmente bem posicionado nas páginas de resultados dos motores de busca (SERPs), o caminho de entrada dos seus visitantes, pode ser por diferentes páginas.
Dependendo da origem do acesso, ou seja, se ele ocorreu por links patrocinados, Google Ads, e-mail Marketing ou outro meio, nós temos o que se convencionou chamar de landing pages, ou em tradução literal, "páginas de aterrissagem".
Quando o acesso é feito por qualquer outra página que não a inicial e, sobretudo, quando isso é intencional e resultante de um trabalho de Marketing Digital, como nos exemplos citados anteriormente, a landing page assume a importância que a home tinha no passado, guardadas as peculiaridades que uma página interna tem em relação a uma home page.
A landing page naturalmente não terá o mesmo tipo de conteúdo e apresentação, mas da mesma forma deve conter elementos atrativos e que estimulem o visitante a agir, os chamados CTAs ou Call To Action.
Mas voltando à importância da home, diferentemente do que alguns afirmam, ela ainda é tão importante quanto sempre foi.
O que muda é que outras páginas também assumem responsabilidade por capturar a atenção do visitante e mais do que isso, estimulam sua visitação ao restante do site.
Dependendo do seu trabalho de Marketing e Marketing Digital, ainda haverá um contingente de pessoas que desembarcará na página inicial, porque consta seu domínio no cartão de visitas, no material distribuído no stand da feira ou evento que participou ou por qualquer outro meio.
E como sempre foi, você continua precisando que esse internauta queira ir além!
Visto de outra forma, quando por qualquer razão um visitante chega primeiro à sua home, ela assume o mesmo papel que uma landing page interna ao site.
Diminuir a importância da home, tendo como justificativa a relevância que o restante tem, é menosprezar – e quem sabe dizer adeus – um contingente que ainda chega ao seu site, exatamente como era há duas décadas atrás.
Portanto, a fim de que não pairem dúvidas, a página inicial do seu site, continua tendo a mesma importância de sempre, com a diferença que as demais, além do conteúdo – e que deve ser a razão da visita – também assumem protagonismo quanto à manutenção da visita.
Por fim, até hoje ainda há sites os quais têm um ícone especialmente reservado à home e que é simbolizado por uma casinha. Não é qualquer página que merece esse privilégio, não é mesmo?!
Como deve ser uma boa home page?
Antes de irmos além, é importante destacar que assim como ocorre em relação a muitos assuntos, existem exceções e peculiaridades que devem ser observadas.
Entre as mais evidentes, se você tem uma marca suficientemente forte e popular, seu site está menos sujeito à determinadas "regras".
É possível dar-se ao luxo de diferenciar-se dos demais, porque o visitante já conhece muito do que você faz, dos seus produtos / serviços e de outras questões relativas à empresa.
Outro ponto, é a flexibilidade. Não seguir rigorosamente uma lista de 5, 10 ou mais itens importantes que devem constar de uma home page, não é indicativo de não obter sucesso. Nem tampouco o contrário.
Por fim, o bom senso, a experiência e o experimentalismo, devem ter lugar sempre.
O internauta não é um tipo imutável e bem específico. Ao contrário e justamente por isso que a Internet está em constante evolução, buscando adaptar-se aos movimentos e sabores que os usuários exigem a cada momento.
Dito isso, vamos a uma lista de fatores que devem fazer parte de um home page de sucesso!
É importante não confundir simplicidade com pobreza, no sentido de pouca informação ou irrelevante.
Da mesma forma que um cliente que adentra um estabelecimento comercial que ainda não conhece, o internauta não gosta de perder tempo para descobrir se seu site tem o que ele procura.
Lembre-se que o Google está a um clique de mouse e, portanto, é mais fácil e rápido ele voltar do que ficar rolando a página, lendo, lendo, clicando, clicando, até achar o que ele buscava.
Procure não criar longos parágrafos. Destaque o que é mais importante e use palavras que comuniquem "quem é a empresa", "o que ela faz", "o que o visitante encontrará". Essas costumam ser as três principais perguntas que a maioria que desembarca em muitos sites, faz.
Respeite o cliente. Valorize o seu tempo
Responder rapidamente e entregar algumas informações logo de cara, é respeitar o visitante. Não o enrole e não o subestime. Valorize o seu tempo e sua visita.
Disponha mecanismos de contato de forma acessível. Se possível, ofereça quantos meios de contato estiverem ao seu alcance. Estimule a comunicação com o chat.
Ofereça respostas a algumas dúvidas mais frequentes. Conduza-o na navegação.
Empresas com atuação variável em diferentes regiões, costumam solicitar o CEP logo no início da visita, para apresentar apenas os serviços / produtos disponíveis para sua região.
Crie estruturas de navegação que permitam-no chegar a qualquer ponto do site, pelo menor caminho possível e com o menor número de cliques necessários.
Organização, padrão e lógica no design
Um site com um design inovador, fora do convencional, pode ser atraente nos 2 ou 3 segundos iniciais do acesso e a até mesmo se sua empresa é uma agência de criação, certos limites devem ser observados.
O visitante não está em busca de uma galeria de arte e geralmente não está disposto a descobrir onde deve clicar para chegar ao que procura.
As informações relevantes, o fluxo e a ordem como os dados são apresentados, o esquema de navegação, devem ser intuitivos e seguir padrões.
Não é raro termos que buscar por longos segundos e alguns cliques, para achar um produto, um formulário de contato, ou mesmo saber se aquele prestador de serviços atende o meu estado ou município.
O mesmo se aplica a outros itens tão importantes atualmente, como as redes sociais, o chat ou um simples campo de pesquisa.
Use títulos e subtítulos, para distinguir cada conjunto de dados. Componha a organização com imagens descritivas do assunto e ícones.
Também conhecido como CTA ou Call To Action, é o mecanismo explícito ou implícito, que estimula o visitante a agir.
É importante ser honesto com o cliente. Não use artifícios que possam fazê-lo sentir-se enganado.
Não peça seu cadastro em troca de nada. Não dê promoções do tipo "metade do dobro", ou "agora falta pouco" e na verdade, você ainda o conduz por uma série de passos e no final não lhe entrega o induziu a acreditar.
Criar um mecanismo que faça com que o visitante interaja, mas que não agregue valor a ele, pode produzir uma impressão negativa. Lembre-se que a primeira impressão, é a que fica.
Lançamentos, promoções, descontos, seções especiais, novidades, podem e devem aparecer na home, mas não podem tomar toda a sua área útil. Não podem ser toda a página.
Cuide da infraestrutura por detrás do site
Esse é um aspecto crucial, embora não aparente.
Entende-se por infraestrutura, a hospedagem, o plano utilizado, o CMS adotado, todo o conjunto de tecnologias presente no site.
Uma boa empresa de hospedagem, entre muitas coisas, significa um ambiente seguro, robusto e flexível, servidores rápidos e sem sobrecarga, um leque de tecnologias abrangente, suporte ágil quando se necessita.
Planos de hospedagem adequados à proposta e necessidades do site, significam bom desempenho, garantia de acesso mesmo em demandas superiores, disponibilidade, escalabilidade.
O CMS ou a tecnologia usada na criação e manutenção do site, é outro ponto de interesse.
A depender da escolha, a manutenção ou as alterações que devem ocorrer com o passar do tempo, como atualizações e mudanças no site, podem significar um pesadelo e torná-lo obsoleto e ultrapassado ou apenas poucos minutos de trabalho e alguns cliques aqui e ali.
Assim, optar por uma infraestrutura condizente e preparada para o dinamismo da Internet, é importantíssimo.
Garanta o acesso
Boa parte dos acessos à Internet são por meio de dispositivos móveis, preferencialmente os smartphones. Assim, oferecer acesso mobile ou pelo menos responsivo, é uma obrigação de qualquer site.
Mas não é só. Garantir acesso, é ter uma página com carregamento rápido, que ofereça uma boa experiência ao visitante, intuitiva, objetiva e prática.
Inclusive, experiência na página, é um dos fatores de ranqueamento do Google e que tem importante peso na classificação de um site por parte do gigante das buscas.
As home pages sempre foram importantes, desde os primórdios da Internet. Ainda são nos dias de hoje, porém os cuidados que devem ser observados, podem significar a conversão de mais um cliente, ou sua perda para o concorrente.
` }) Vue.component('component-criar-comentario', { props: ['value'], name: 'component-criar-comentario', data: function () { return { nome: { valor: null, erro: false }, email:{ valor: null, erro: false, erroMensagem: 'Preenchimento necessário.' }, comentario: {valor: '', erro: false }, url: 'home-page-do-site', //enviadoSucesso: null, carregando: false, store: store.state } }, computed: { comentarioChars: function() { if(this.comentario.valor.length > 3500) this.comentario.valor = this.comentario.valor.substring(0, 3500); return this.comentario.valor.length; }, pai: { get: function() { return this.value }, set: function(novoValor) { this.$emit('input', novoValor) } }, enviadoSucesso: { get: function() { return this.store.enviadoSucesso }, set: function(novoValor) { store.setEnviadoSucesso(novoValor) } }, comentarios: { get: function() { return this.store.comentarios }, set: function(novoValor) { store.setComentarios(novoValor) } } }, methods: { addComentario: function () { //Se já há um envio em andamento if(this.carregando) return; // Zerar os erros this.nome.erro = false this.email.erro = false this.comentario.erro = false if(!this.nome.valor) { this.nome.erro = true console.log('nome vazio') } if(!this.email.valor) { this.email.erro = true this.email.erroMensagem = 'Preenchimento necessário.' console.log('email vazio') } if(!this.comentario.valor) { this.comentario.erro = true console.log('comentario vazio') } if(!this.comentarioChars > 500) { this.comentario.erro = true console.log('comentario maior que 500') } if(this.nome.erro || this.email.erro || this.comentario.erro) { console.log('erro') return; } this.carregando = true // Obtem os dados // analisa se os dados estão corretos // Envia os dados para o servidor e aguarda o retorno var bodyFormData = new FormData() var that = this bodyFormData.set('pai', this.pai) bodyFormData.set('nome', this.nome.valor) bodyFormData.set('email', this.email.valor) bodyFormData.set('comentario', this.limparComentario(this.comentario.valor)) axios.post(`https://www.hostmidia.com.br/blog/comentario-adicionar/${this.url}/`, bodyFormData) .then(function (response) { if(response.data.success) { // Se retornar com sucesso adiciona o nome e o email ao cookie that.enviadoSucesso = that.pai // Cria um timeout para desaparece a mensagem de sucesso setTimeout(() => that.enviadoSucesso = null, 5000); localStorage.setItem('nome', that.nome.valor) localStorage.setItem('email', that.email.valor) var novoComentario = { pai: that.pai, url: that.url, data: new Date(), comentario: that.limparComentario(that.comentario.valor), filhos: [], id: response.data.success, nome: that.nome.valor } //Zera comentario that.comentario.valor = '' // Adiciona o comentario a lista, para ser visualizado // Se o pai é 0 então não tem pai, caso contrário localiza o pai e adiciona como filho if(that.pai == 0) { that.comentarios.push(novoComentario) } else { that.comentarios.forEach(comentario => that.adicionarFilho(comentario, that.pai, novoComentario) ) } that.pai = 0 //Salva localmente o comentario var comentarios = JSON.parse(localStorage.getItem('novoComentarios')) if(!comentarios) { localStorage.setItem( 'novoComentarios', JSON.stringify([novoComentario]) ) } else { comentarios.push(novoComentario) localStorage.setItem( 'novoComentarios', JSON.stringify(comentarios) ) } } else { console.log('erro') if(response.data.field == 'email') { that.email.erro = true that.email.erroMensagem = 'Endereço de e-mail inválido.' } that.enviadoSucesso = null } that.carregando = false }) .catch(function (error) { // handle error console.log(error); that.enviadoSucesso = false that.carregando = false }) }, limparComentario: function(comentario) { var d = document.createElement('div'); d.innerHTML = comentario; return d.textContent; }, // Adiciona um comentario à lista como filho do respectivo pai adicionarFilho: function(comentario, id, object) { if(comentario.id == id) { comentario.filhos.push(object) return } var that = this comentario.filhos.forEach( filho => that.adicionarFilho(filho, id, object) ) } }, created: function() { //Ver se tem um cookie com os dados do email e nome se já enviou um comentario com sucesso this.nome.valor = localStorage.getItem('nome') this.email.valor = localStorage.getItem('email') }, template: `
` }) // -- Principal -- var app = new Vue({ el: '#app', data: { loading: false, comentarResposta: 0, url: 'home-page-do-site', store: store.state }, computed: { comentarios: { get: function() { return this.store.comentarios }, set: function(novoValor) { store.setComentarios(novoValor) } }, totalComentarios: { get: function() { return this.store.comentarios.reduce(this.somarComentarios, this.store.comentarios.length) } } }, methods: { somarComentarios: function(acc, item) { if(item.filhos.length === 0) { return acc; } else { return item.filhos.reduce(this.somarComentarios, acc+item.filhos.length) } }, // Se há um comentário salvo localmente adicionar como filho do respectivo pai adicionarFilho: function(comentario, id, object) { if(comentario.id == id) { // Verifica se o comentario já existe, ou seja foi aprovado if(comentario.filhos.find((c) => c.id == object.id) === undefined) { comentario.filhos.push(object) } return } var that = this comentario.filhos.forEach( filho => that.adicionarFilho(filho, id, object) ) } }, created: function() { //Limpar os comentários mais antigos que três dias window.requestIdleCallback(() => { var comentarios = JSON.parse(localStorage.getItem('novoComentarios')) var dataReferencia = new Date() dataReferencia.setDate(dataReferencia.getDate() - 3) // Se a data do comentario for maior que três dias atrás então mantem if(comentarios) { comentarios = comentarios.filter( (c) => new Date(c.data) > dataReferencia ) localStorage.setItem( 'novoComentarios', JSON.stringify(comentarios) ) } } ) var that = this; axios.get('https://www.hostmidia.com.br/blog/comentario-listar/home-page-do-site') .then(function (response) { if(response.data) { that.comentarios = response.data var novoComentarios = JSON.parse(localStorage.getItem('novoComentarios')) if(novoComentarios) { novoComentarios = novoComentarios.filter((c) => c.url == that.url) novoComentarios.forEach(novoComentario => { // Se o pai é 0 então não tem pai, caso contrário localiza o pai e adiciona como filho if(novoComentario.pai == 0) { // Verifica se o comentario já existe, ou seja foi aprovado if(that.comentarios.find((c) => c.id == novoComentario.id) === undefined) { that.comentarios.push(novoComentario) } } else { that.comentarios.forEach(comentario => that.adicionarFilho(comentario, novoComentario.pai, novoComentario) ) } }) } } else { console.log('erro') } }) .catch(function (error) { // handle error that.loading = false; console.log(error); }) } })