User Experience orientada às melhores práticas de SEO, por Will Trannin

Notas do Editor

• #2: Obrigado XXX. Boa tarde pessoal. Vim falar um pouco sobre as melhores práticas de UX e SEO. Muitos consideram duas áreas divergentes, mas vcs vão ver a relação entre elas
• #3: Vou me apresentar para quem ainda não me conhece. Sou Will Trannin, CEO da SEO Master. Fiz Computação pela UFF e Mestrado pela PUC-Rio. Sou consultor SEO desde 2008 e especialista em GA e UX. O UX foi obtido bastante durante o mestrado da PUC.
• #4: Vamos ao que interessa. Primeiro vou colocar todos no mesmo nível sobre SEO. Depois vemos uma comparação entre UX e SEO. Por último iremos apresentar como eles podem trabahar juntos
• #5: Quando um usuário faz uma busca em um mecanismo de busca ela cai em uma página de resultados da busca. Nesse exemplo aqui temos o resultado da busca no Google. Podemos ver claramente a separação entre o PPC e o SEO. No PPC, que aparece nos 3 resultados superiores e na lateral direita, vc compra palavras-chave em um leilão. Aqui a mescla é entre o quanto vc paga e a qualidade do seu anúncio. No caso do SEO, que são os 10 resultados seguintes dessa página, vc precisa ter relevância e autoridade para o termo buscado.
• #6: No SEO separamos em 3 pilares principais que juntos irão trazer resultados. 1o é o de Tecnologia: aqui resolvemos todas as questões de código-fonte, servidor, estrutura do site e interface do usuário. 2o é o pilar de Conteúdo: nesse caso tratamos de todo o conteúdo em formato de texto, imagens e vídeos e mais o design visual e de interação de cada página. 3o é o de Autoridade: o objetivo aqui é aumentar a divulgação do seu site no mundo online. Quanto mais indicações (links) de outros sites para o seu, melhor
• #9: http://www.nngroup.com/articles/definition-user-experience/
• #10: [MATEUS – com tempo] Adicionar um ícone que represente o texto. Ex.: para o conteúdo pode ser um livro, etc Exemplo do site de review de filmes. Pode ter ótima UI, mas UX ruim se tiver reviews de baixa qualidade ou então um usuário que quer um filme independente não encontra essa informação.
• #12: [MATEUS – com tempo] Adicionar um ícone para representar o texto. Ex.: para o conteúdo pode ser um livro, etc
• #13: [MATEUS] Alterar imagem do Panda para uma com melhor qualidade e com fundo transparente. Melhorar disposição dos textos, pode usar ícone para cada texto (os textos abaixo e ao lado da imagem) http://moz.com/beginners-guide-to-seo/how-usability-experience-and-content-affect-search-engine-rankings http://themoralconcept.net/pandalist.html
• #14: [MATEUS] Usar imagens que melhor representam 1. conteúdo pequeno e muito footprint 2. Muitas páginas sem conteúdo. A ideia da imagem atual é mostrar que não é bom ter um indice sem conteudo. http://moz.com/blog/beat-google-panda
• #15: [MATEUS] Usar imagens que melhor representam 1. muitos Ads e pouco conteúdo. Ads antes da rolagem do mouse. 2. Uma página para cada palavra-chave. Ou seja, termos semelhantes ou sinônimos devem ir pra mesma página e não para páginas diferentes. Mesmo caso do Zigg para o termo counter strike http://moz.com/blog/beat-google-panda
• #17: [MATEUS – com tempo] Adicionar um ícone para representar o texto. Ex.: para o SEO pode ser uma página de ranqueamento ou gráfico de linha crescendo, etc http://www.nngroup.com/articles/seo-and-usability/
• #20: Even though the IA itself isn’t visible in the UI, it most definitely impacts the User Experience (UX). As we know from the definition of user experience, the total user experience is built up from everything the user encounters. And while users don’t see the structure of the website, they will hopefully get the feeling that content is divided up and connected in ways that match their needs and expectations. Sadly, of course, users leave many sites feeling that the content/functionality was not what they wanted and they experience friction because of poor organization, structure and/or nomenclature. As an analogy, unless you’re Superman or a radiologist, you won’t see the skeletons when looking at a horse or a chicken, but those skeletons nevertheless make these animals very different creatures. Don’t try to ride the chicken, because the skeleton won’t support you. http://www.nngroup.com/articles/ia-vs-navigation/
• #21: http://www.nngroup.com/articles/ia-vs-navigation/ SEO: mesclar navegação para o usuário epara o Google. Em SEO chamamos de Links Internos. Importantes para passar autoridade entre as páginas
• #22: [MATEUS] Adicionar imagem destacando principais componentes do Mega menu: texto, imagem, descrição e grupos. http://www.nngroup.com/articles/mega-menus-work-well/ http://www.smashingmagazine.com/2014/05/09/efficiently-simplifying-navigation-systems/ As the following screenshots show, mega menus have the following characteristics: Big, two-dimensional panels divided into groups of navigation options Navigation choices structured through layout, typography, and (sometimes) icons Everything visible at once — no scrolling Vertical or horizontal form factors when activated from top navigation bars; when activated from left-hand navigation, they might appear as mega fly-outs (not shown).
• #23: [MATEUS] Outro exemplo de Mega Menu para poder falar sobre vantagens e desvantagens do texto abaixo. Além disso, para falar que é bom para SEO porque conseguimos colocar muitos links no menu Recommendation If the options require both text and pictures, then a mega-menu is the best choice. Explanation A regular drop-down menu does not offer the same room or visualization options. And whether regular and mega, it has the following advantages over navigation on a separate page: It loads more quickly. The cognitive load on users is less. With a separate page, users have to think more. “Which are the ads?” “Which is genuine content?” “Where is the navigation?” A drop-down menu shows only the navigation, and it appears close to the user’s cursor or finger. Problems Even a mega-menu is limited in space. If the number of items is too high, then a separate page becomes inevitable.
• #24: [MATEUS] Melhorar imagem com exemplo do Breadcrumb. Utilizar exemplo igual ao da imagem atual: 3 níveis e a localização. Migalhas de pão. Semelhante a história de João e Maria. Por isso deve seguir sempre a navegação do usuário. Não deixar pré-definido pela arquitetura da informação Ótimo para o usuário e para o Google se localizarem no site. Usar o nome da página da arquitetura da informação como link. Para um ecommerce: nome da categoria, nome do produto.
• #25: [MATEUS] Melhorar imagem com exemplo dos facets. A ideia aqui é destacar os componentes principais: seleção atual, filtro checkbox, filtro imagem (tamanho), filtro barra horizontal (preço) Keyword search has been made famous by Google, but there are other ways to elicit users’ requirements. Faceted navigation (aka “faceted search” or “guided navigation”) is one of them. It is, in essence, a very simple concept. Instead of giving users text fields for them to fill in, you give them a list of links to click on. These links consist of lists of attributes, separated by type, each with a numerical count adjacent, indicating the number of results that will be displayed if selected. This may sound quite unremarkable, but it completely transforms the act of searching an unfamiliar database from an intimidating procedure into an easy task. The user just reads the options and clicks those that are most relevant to their needs. After two or three clicks, they have narrowed the results down to a manageable list of relevant items. http://www.nngroup.com/articles/filters-vs-facets/ http://www.nngroup.com/articles/search-navigation/
• #26: [MATEUS] Melhorar exemplo do filtro no facet de 1.800 opções para 18 com somente 2 cliques. Deconstructing search into a series of easy ‘bite sized’ subtasks: rather than declaring a complex set of criteria ‘up front’, the user can declare one criterion at a time, gradually drilling in. Appealing to the psychology of recognition rather than recall: it’s much easier for humans to recognise items displayed in a menu (“Which of these options should I click?”) than recalling them without any cues (“What should I type into this empty box?”). Setting expectations accurately: adjacent to each facet label, a number is displayed, showing how many results will be displayed if the item is selected. This means users are never taken by surprise, and it enables them to make informed decisions. Orientation and framing: When arriving on the site, the user can see at a glance the distribution of items within the various facets, which orients them as to what is on offer. If the site uses appropriate labelling, this can be very reassuring for the user as they will recognise the site ‘speaks their language’ and has the kind of content they are looking for. (This is known as “information scent” and “information foraging”). Preventing users from reaching dead ends: links that have zero results associated with them are never shown. This means users cannot accidentally reach blank results pages – which we all know from personal experience is extremely frustrating. SEO: Facets geram URLs dinâmicas e cheia de códigos. Precisa transformar em uma URL bem definida para ter resultado em SEO. Se não conseguir, usar canonical + nofollow.
• #27: [MATEUS] Melhorar imagem para apresentar Footer padrão separados por seções: institucional, ajuda, etc
• #28: [MATEUS] Melhorar imagem para apresentar o footer com links para categorias e/ou Landing Pages SEO: Oportunidade de link para páginas importantes
• #29: [MATEUS] Criar imagem apresentando as opções de índices que podem ser criados. Destacar índice da Busca. SEO: Google precisa do link para indexar. No caso da busca se não tiver link para a página ela não aparece no resultado e perde-se oportunidade
• #31: http://www.nngroup.com/articles/how-users-read-on-the-web/
• #32: http://www.nngroup.com/articles/how-users-read-on-the-web/
• #33: http://www.nngroup.com/articles/how-users-read-on-the-web/
• #35: [MATEUS] Criar imagem com o conceito de uma single page
• #36: [MATEUS] Criar imagem com o conceito de um scroll infinito SEO: precisa de paginação estática http://www.nngroup.com/articles/infinite-scrolling/
• #37: [MATEUS] Criar imagem com o conceito das Tabs dentro do conteúdo. Como exemplo lembra das páginas de produtos que exibem conteúdo em abas. Não dar exemplo das abas usadas para navegação entre páginas. O objetivo aqui vai ser falar que o Google está dando menos relevância para conteúdo que está escondido nesse tipo de componente. http://www.nngroup.com/articles/tabs-used-right/
• #38: [MATEUS] Criar imagem com o conceito do Accordion. O objetivo aqui vai ser falar que o Google está dando menos relevância para conteúdo que está escondido nesse tipo de componente. http://www.nngroup.com/articles/accordions-complex-content/
• #39: http://googlewebmastercentral.blogspot.com.br/2014/11/helping-users-find-mobile-friendly-pages.html http://googlewebmastercentral.blogspot.com.br/2014/10/tracking-mobile-usability-in-webmaster.html http://googlewebmastercentral.blogspot.com.br/2015/02/finding-more-mobile-friendly-search.html http://www.nngroup.com/topic/mobile-and-tablet-design/ http://www.nngroup.com/articles/responsive-web-design-definition/ http://searchengineland.com/google-may-add-mobile-user-experience-ranking-algorithm-205382
• #40: http://googlewebmastercentral.blogspot.com.br/2014/11/helping-users-find-mobile-friendly-pages.html http://googlewebmastercentral.blogspot.com.br/2014/10/tracking-mobile-usability-in-webmaster.html http://googlewebmastercentral.blogspot.com.br/2015/02/finding-more-mobile-friendly-search.html http://www.nngroup.com/topic/mobile-and-tablet-design/ http://www.nngroup.com/articles/responsive-web-design-definition/ http://searchengineland.com/google-may-add-mobile-user-experience-ranking-algorithm-205382 http://www.nngroup.com/articles/image-vs-list-mobile-navigation/
• #41: http://www.nngroup.com/articles/responsive-web-design-definition/
• #42: A meta tag da viewport orienta o navegador sobre como ajustar as dimensões e a escala da página de acordo com a largura do dispositivo. Quando o elemento viewport meta está ausente, os navegadores de dispositivos móveis processam a página no modo padrão, com a largura de uma tela de computador (geralmente cerca de 980 px, com variações entre os dispositivos). Os navegadores de dispositivos móveis tentam então melhorar a visualização do conteúdo aumentando o tamanho das fontes e redimensionando o conteúdo para caber na tela ou exibindo somente a parte do conteúdo que cabe nela. Para os usuários, isso significa que os tamanhos das fontes podem ter uma aparência inconsistente e talvez seja necessário aplicar zoom para que seja possível visualizar e interagir com o conteúdo. Para o Google, talvez consideremos que a página não é compatível com dispositivos móveis por exigir esse tipo de interação em um dispositivo móvel. https://developers.google.com/webmasters/mobile-sites/mobile-seo/configurations/responsive-design?hl=pt-br https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/set-the-viewport
• #43: https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/size-content-to-the-viewport A definição de elementos com grandes larguras absolutas no código CSS (como no exemplo abaixo) fará com que o div seja largo demais para a janela de visualização em um dispositivo mais estreito (por exemplo, um dispositivo com uma largura de 320 pixels no CSS, como um iPhone). Em vez disso, considere usar valores de largura relativos, como width: 100%. Da mesma forma, cuidado ao usar grandes valores absolutos para definir posicionamento, já que eles podem fazer com que o elemento fique fora da janela de visualização em dispositivos com telas pequenas.
• #44: https://developers.google.com/speed/docs/insights/UseLegibleFontSizes Primeiramente, configure a janela de visualização para garantir que as fontes sejam dimensionadas conforme o esperado em todos os dispositivos. Depois de configurar a janela de visualização, implemente as recomendações adicionais abaixo. Use uma fonte com um tamanho base de 16 pixels CSS. Ajuste o tamanho conforme o necessário, com base nas propriedades da fonte utilizada. Use tamanhos associados ao tamanho base para definir a escala tipográfica. O texto necessita de espaço vertical entre os caracteres, e talvez seja preciso ajustá-lo para cada fonte. A recomendação geral é usar a altura de linha padrão do navegador de 1,2 em. Restrinja o número de fontes utilizadas e a escala tipográfica: o excesso de fontes e tamanhos de fonte produz layouts de página desorganizados e exageradamente complexos. Por exemplo, o snippet de CSS a seguir define um tamanho base de fonte de 16 pixels CSS, com a classe CSS "pequena" com uma fonte de 75% da fonte base (12 pixels CSS) e uma classe CSS "grande" com uma fonte de 125% da fonte base (20 pixels CSS):
• #45: https://developers.google.com/speed/docs/insights/SizeTapTargetsAppropriately https://developer.android.com/design/style/metrics-grids.html Verifique se os pontos de toque mais importantes no seu site, ou seja, aqueles que os usuários usarão com mais frequência, são grandes o suficiente para facilitar seu pressionamento, com pelo menos 48 pixels CSS de altura / largura (supondo que você tenha configurado corretamente a janela de visualização). Links usados com menos frequência podem ser menores, mas também devem apresentar um espaçamento para outros links, de modo que um dedo de 10 milímetros não pressione acidentalmente ambos os links de uma só vez. Os usuários não devem ter que aumentar o zoom (ou depender de outros recursos de interface do navegador para diferenciar os pontos de toque, como a lente pop-up de aumento do Chrome) a fim de pressionar de maneira fácil e confiável o botão ou link desejado.