Boas práticas para desenvolvimento de websites otimizados

Boas práticas para desenvolvimento de websites otimizados
INFORMATICA
1. Introdução

O aumento da procura por informações na rede levou a internet às escolas, praças, casas, navios, aviões. Observando este fator em conjunto com o crescimento exponencial do número de internautas e de dispositivos com acesso à internet, como computadores, laptops, smartphones, tablets e até mesmo televisões, muitas empresas notaram a oportunidade de alavancar seus negócios e expandir a venda de seus produtos a clientes do mundo todo através do e-commerce, ou comércio eletrônico, onde toda a transação de escolha do produto, pagamento e acompanhamento da entrega pode ser feita por meio eletrônico através da internet.

Independente do porte, as empresas atualmente investem na divulgação de seus serviços e produtos pela internet criando websites, patrocinando links, otimizando o conteúdo para mecanismos de busca, criando perfis em redes sociais, divulgando vídeos, ou seja, anunciando seus produtos de inúmeras maneiras que a internet possibilita. Desta forma, a concorrência entre empresas fisicamente distantes que antes nem se conheciam começa a crescer.

Nesse ramo, não se destaca quem tem apenas o melhor preço, mas também quem tem o melhor e-commerce: o mais interativo, confiável, intuitivo, e principalmente, mais rápido e mais facilmente encontrável. Sendo assim, como fazer com que um e-commerce tenha todas essas características ao mesmo tempo? Pode ser uma tarefa complexa, mas, existem alguns métodos para facilitar o alcance desse objetivo mais assertivamente.

A princípio, conceitos devem ser empregados durante a criação e desenvolvimento do website, seja ele um e-commerce ou não, a fim de torná-lo um website otimizado. Alguns conceitos abordados neste artigo:
i. Arquitetura da informação;
ii. Design otimizado para web;
iii. Codificação otimizada para web;
iv. SEO (search engine optimization);
v. Testes de Usabilidade;
vi. Relatórios de desempenho.

Cada um desses métodos é de suma importância para que o resultado final seja alcançado. Otimizar um website requer tempo, investimento e conhecimento das ferramentas e meios necessários de se chegar ao melhor resultado final possível. Todos os passos serão detalhados a partir do próximo tópico.

2. Arquitetura da informação
2.1 O que é arquitetura da informação?

Arquitetura de informação (AI) é “a arte e a ciência de organizar e catalogar websites, intranets, comunidades on-line e softwares de modo que a usabilidade seja garantida” (Instituto de Arquitetura de Informação). Isto comprova que a AI não necessariamente se limita a websites, podendo também ser aplicada a qualquer elemento que necessite de interação com o usuário por meio de uma interface.

O principal resultado esperado ao se aplicar Arquitetura de informação a um website é garantir que o sistema de informação apresentado ao usuário faça sentido para ele. Uma vez que o usuário consiga atuar em um sistema de informação como manda o caso de uso daquela ação, pode-se dizer que o sistema tem uma boa Arquitetura de informação, pois o fluxo foi compreendido pelo usuário através da interface do sistema e sem a interferência de terceiros.
2.2 Como aplicar Arquitetura da informação a um website?

O profissional conhecedor dessas técnicas é o Arquiteto da informação. Ele é responsável por estudar o comportamento do usuário em determinado ambiente e, juntamente com conhecimentos provenientes de outros projetos, desenhar wireframes que determinarão o posicionamento e a organização das informações naquele determinado espaço. Existem várias ferramentas para auxiliar na criação dos wireframes, como: Mockflow, Cacoo, MockingBird, iPlotz, entre outros.

Para desenhar os wireframes, é necessário que o Arquiteto da Informação possua conhecimentos suficientes sobre:
i. Usabilidade
É a facilidade de uso. Assegura que o sistema seja projetado de tal maneira que o usuário tenha facilidade em executar as tarefas sem o auxilio de terceiros, e que, ao retornar ao sistema futuramente, ele reconheça seus elementos sem ter que reaprender a operá-lo (Touch Points).
ii. Navegabilidade
É a organização da informação que garante ao usuário navegar de forma intuitiva, estando ciente de onde está e o que deve fazer para voltar ou avançar em um processo dentro do sistema (UFRGS).
iii. Acessibilidade
É a organização coesa da informação e da codificação da informação a fim de que pessoas idosas e/ou com deficiência possam perceber, compreender, navegar e interagir com a internet (W3C).
iv. Público alvo
O perfil do público para o qual o website se designa. Isto poderá interferir em como ele será desenhado e em como serão as suas funcionalidades.
De posse dessas informações, o trabalho com os wireframes é iniciado e todas as telas são desenhadas antes de iniciar o design do website.

3. Design otimizado para web
3.1 O que é design otimizado para web?

O design otimizado para web, neste contexto, é a ação de desenhar layouts que sejam mais facilmente transformados em websites utilizando o mínimo possível de elementos que dificultem a visualização da página pelo usuário.

Um dos grandes vilões do elevado tempo de carregamento das páginas dos websites na internet é o tamanho das imagens (em kb). Logo, quanto menos imagens utilizadas, menor o tempo de carregamento proveniente das mesmas. Uma pesquisa citada pela BaseKit mostra que 57% de consumidores abandonam o website após esperar 3 segundos para carregar uma página, e que 80% dessas pessoas não retornam a visitá-lo. Portanto, tudo o que puder ser feito para reduzir o tempo de carregamento da página deve ser feito, em todas as etapas do processo. 3.2 Como aplicar design otimizado para a web a um website?

Neste processo, o Designer, profissional responsável pelo layout, utiliza os wireframes desenvolvidos pelo Arquiteto da Informação como base para desenhar o website, adicionando cores e elementos a eles. Este layout deve, de preferência:
i. Abusar de cores opacas
A utilização de cores puras em vez de imagens complexas como plano de fundo em botões, caixas de texto ou qualquer outro elemento que requeira coloração agiliza o carregamento das páginas.
ii. Evitar cantos arredondados
Uma maneira de exibir cantos arredondados em todas as versões dos browsers é utilizando as imagens como plano de fundo. Para evitar esta prática é preferível que o designer utilize cantos quadrados em seu layout.
iii. CSS Sprite
Consiste em uma técnica baseada em agrupar diversas imagens em uma só, a fim de diminuir o número de requisições HTTP ao servidor (Tableless) e mostrar partes desta imagem onde as mesmas forem necessárias.

4. Codificação otimizada para web
4.1 O que é codificação otimizada para web?

O código otimizado para a web é o resultado da codificação do sistema de maneira a contribuir para o carregamento universal e veloz do mesmo no navegador do usuário, seja o código HTML, CSS, Javascript, SQL ou qualquer linguagem de programação.

4.2 Como fazer um código otimizado para web?

Após receber os layouts feitos pelo Designer no passo anterior, o Webmaster deverá analisar os elementos necessários para montar o website em questão, organizando o código da seguinte maneira:
i. Pastas
Criar pastas para organizar os diferentes tipos de arquivos: “estilos”, “imagens”, “conteúdo”, “javascript”. Criar subpastas caso se faça necessário.
ii. Imagens
Agrupar as imagens em uma imagem principal para aplicar a técnica de CSS Sprite; as demais imagens podem estar separadas em pastas de acordo com a sua categoria, todas dentro da pasta “imagens”.
iii. CSS (Cascading Style Sheets ou arquivos de estilo)
Criar os vários arquivos de CSS dentro da pasta “estilos”. Por exemplo: “topo.css”, “menu.css”, “rodape.css”. Utilizar tags do tipo <link> no cabeçalho dos arquivos HTML para incluir cada um desses arquivos .
iv. Javascripts
Agrupar todas as funções e plug-ins em javascript dentro de arquivos com extensão .js e colocar esses arquivos dentro da pasta de “javascripts”. Incluir os arquivos de javascripts no HTML com tags <script> imediatamente antes de fechar a tag </body>. Não escrever códigos javascript no meio do código HTML, pois pode tornar a página mais lenta e dificultar a leitura pelos motores de busca. v. Código
Fazer um código HTML limpo e utilizar tags permitidas pelo órgão certificador, a W3C. Validar o código escrito através de ferramentas gratuitas da W3C, acessando <http://validator.w3.org/> para HTML e <http://jigsaw.w3.org/css-validator/> para CSS. Caso o código passe na verificação, o website ganhará selos que poderão ser incorporados ao código do website para mostrar aos usuários que o mesmo foi escrito de acordo com as normas do órgão responsável, a W3C.

O tempo de carregamento de uma página não depende apenas do resultado do trabalho do webmaster: o programador de sistemas também precisa otimizar o código a fim de não contribuir para o aumento do tempo de carregamento das páginas nos seguintes aspectos:
i. Linguagem de programação
Eliminar condições desnecessárias, atentar para o uso exagerado de IFs e optar pelo uso de IF ELSE ou CASE, parando a execução do laço quando a variável encontrar o caminho. Padronizar o código, os nomes das classes, das variáveis e dos métodos, bem como documentar o código, são práticas que melhoram a qualidade do software e ajudam na compreensão do mesmo por terceiros, além de agilizar manutenções futuras e diminuir o impacto de correção de erros.
ii. Banco de dados
Analisar as requisições ao banco de dados, desde quantas vezes uma consulta é feita mesmo que seja simples, até a detecção de uma consulta que seja muito dispendiosa. Refatorar buscas que demorem a retornar os dados e facilitar o acesso aos dados de tabelas com muitos registros gravando-os em uma tabela à parte através de uma rotina no banco de dados e consultando somente esta segunda tabela. Utilizar a sessão do usuário para reduzir requisições ao banco durante a navegação.

Essas são apenas algumas das ações para otimizar o código de um website. Contudo, o não emprego delas pode prejudicar a qualidade do mesmo.

5. SEO (search egine optimization)

5.1 O que é SEO?

Search engine optimization, ou em português, otimização de sites para mecanismos de busca, é o conjunto de técnicas aplicadas a um website a fim de que ele seja mais bem compreendido pelos motores de busca e tenha suas páginas exibidas nas primeiras posições dos resultados destes motores, como Google, Bing ou Yahoo, por exemplo. Apesar de eficaz, o SEO é uma prática que dá resultados em longo prazo e não dá garantias, uma vez que nenhuma empresa ou pessoa pode assegurar que o website apareça e se mantenha primeiro lugar como resultado de uma busca (Marketing de Busca).

Não podemos confundir SEO com links patrocinados. O primeiro é o que chamamos de busca orgânica: a exibição do link é gratuita e a otimização do código é o que conta para ranquear a página. Já o segundo é a busca paga, onde é necessário investir uma quantia por palavra-chave para que a página seja exibida acima de outros resultados, podendo ficar em primeiro lugar (Marketing de Busca). 5.2 Técnicas básicas de SEO

i. Criação de sitemaps
Sitemap, ou mapa do site, é uma forma de informar ao buscador as páginas do website, para o caso de ele não as encontrar (Tableless), devendo estar no formato de XML com uma lista das páginas do site. Este XML deve ser submetido à ferramenta para webmasters dos buscadores.
ii. Palavras-chaves
Faça um estudo de palavras-chaves e termos mais buscados referentes ao conteúdo do website e utilize-as corretamente no HTML, em títulos (title e h1), parágrafos (p), em metatags (meta) e texto alternativo das imagens (alt). As palavras-chave podem ser pesquisadas no Google Adword Keyword Tool (https://adwords.google.com/select/KeywordToolExternal) (Tableless).
iii. Titles e metatags
É importante que cada uma das páginas do website tenha titles e metatags diferentes. Isso traz mais relevância às páginas e aumenta o alcance dos termos e palavras-chaves. Tente fazer descrições e títulos alusivos ao assunto abordado na página utilizando as palavras-chave pesquisadas (Tableless).
iv. URLs amigáveis
URL é o endereço de um website na internet. O ideal é existir um URL para cada página do site formatada de maneira que o motor de busca entenda, ou seja, de maneira amigável, como por exemplo: www.meusite.com.br/meu-artigo-de-seo. Utilize o arquivo .htaccess do website para formatar as URLs.

Existem outras técnicas de SEO avançado que podem ser implementadas após aplicação e monitoramento do SEO básico. Porém, esses passos já alcançam resultados muito bons de SEO para o website.

6. Testes de usabilidade
6.1 O que é o teste de usabilidade?

O teste de usabilidade é uma técnica utilizada para avaliar um produto por meio de testes com usuários representativos. No teste, esses usuários tentarão completar tarefas comuns enquanto observadores assistem, ouvem e fazem anotações. O objetivo do teste é identificar eventuais problemas de usabilidade, coletar dados quantitativos sobre o desempenho dos participantes e determinar a satisfação deles ao utilizar o produto (Usability.gov).

Quanto antes o teste for aplicado ao website e quanto mais usuários participarem, será melhor. Uma vez que se tem o resultado do teste, os desenvolvedores poderão tratar as inconsistências antes de disponibilizar o website ao usuário final.

6.2 Preparando o teste de usabilidade

O teste propriamente dito não requer um laboratório de usabilidade especializado e com tecnologia de última geração. Existem vários ambientes em que a usabilidade de um website pode ser testada:
i. Ambiente 1: um laboratório fixo com duas salas interligadas por câmeras e computadores, com espelho falso e isolamento sonoro;
ii. Ambiente 2: uma sala com equipamento de gravação portátil;
iii. Ambiente 3: uma sala de conferência sem equipamentos de gravação .
Após a preparação do ambiente, usuários devem ser convidados para testarem o website, de preferencia aqueles compatíveis com o perfil do público-alvo. Garanta que o usuário se sinta confortavelmente à vontade antes de iniciar o teste. 6.3 Aplicando o teste de usabilidade

Para aplicar o teste de usabilidade, alguns personagens são requeridos:
1. Cliente: quem solicita o teste em seu produto;
2. Moderador: quem acompanha o usuário durante o teste e transmite a ele as tarefas a serem executadas;
3. Usuário: quem testa o produto;
4. Anotador: quem anota a reação do usuário durante o teste e produz o relatório final.

Acompanhe o roteiro básico de um teste de usabilidade para um website:
i. O cliente (personagem 1) elaborará um roteiro de ações que os usuários costumam realizam em seu website. Por exemplo, encontrar o endereço da empresa ou comprar determinado produto;
ii. O moderador (personagem 2) transformará o roteiro em tarefas, como “compre um ventilador de determinada marca” ou então “entre em contato com a empresa através do formulário” e solicitará ao usuário (personagem 3) que execute cada uma das tarefas da lista, sem interferir no processo de interação dele com o website;
iii. O usuário (personagem 3) executará todas as ações a ele repassadas pelo moderador, sempre falando o que estiver pensando durante a execução das tarefas;
iv. O anotador (personagem 4) tomará nota de toda e qualquer reação do usuário durante o teste, bem como o tempo para executar cada tarefa e as dificuldades, as facilidades e o nível de satisfação que o mesmo teve ao realizar cada tarefa;
v. O anotador (personagem 4) produzirá um relatório para ser apresentado ao cliente (personagem 1). A partir desse relatório, surgirão insights de melhorias e correção de incoerências a serem aplicadas ao website;
vi. Ao final do teste, saberemos se os usuários são capazes de completar tarefas de rotina, quanto tempo eles levam para executá-las e qual o grau de satisfação deles ao interagir com o website.

O teste de usabilidade se trata de melhoria continua do produto. Portanto, deve ser repetido periodicamente, principalmente quando houver alterações significativas no sistema, a fim de que o produto acompanhe a evolução do usuário e não o contrário.

7. Relatórios de desempenho
7.1 O que são relatórios de desempenho de um website?

Os relatórios de desempenho informam dados relevantes sobre os usuários do website, como informações regionais e tecnológicas, o total de visitantes novos e antigos, os locais onde clicam, o tempo que permanecem na página, taxa de rejeição, as páginas mais abandonadas pelos usuários, entre muitos outros dados preciosos para entender melhor o usuário e garantir a melhoria contínua do website. 7.2 Como conseguir esses relatórios?

A maneira mais fácil e gratuita de obter essas informações atualmente é cadastrar o domínio do website em ferramentas para webmasters, como o Bing Webmasters Tools (http://www.bing.com/toolbox/webmaster/) ou Google Webmasters Tools (https://www.google.com/webmasters/tools), por exemplo. A partir do cadastro, a ferramenta inicia a captação de dados da navegação dos usuários no website.

Além das ferramentas para webmasters, o Google Analytics (https://www.google.com/analytics) vem sendo utilizado para gerenciar sites no mundo todo. Trata-se de uma poderosa ferramenta gratuita para análise da web em nível empresarial oferecida pela Google, onde, após a ativação de uma conta e adição do domínio, um código de acompanhamento é gerado para ser inserido no website. Após a inserção do código, cada exibição de página dentro daquele domínio gerará estatísticas de visitação que serão enviadas ao sistema e apresentadas ao dono do website. A experiência do usuário também pode ser medida através dela, somando ao resultado apresentado pelas ferramentas para webmasters e pelos testes de usabilidade.

7.3 O que devo observar nesses relatórios para melhorar o website?

Alguns aspectos ajudam a encontrar páginas que precisam de melhoria:
i. Elevada taxa de rejeição
Acontece quando o usuário acessa a página e em seguida volta para a página anterior ou fecha o browser sem interagir com ela. Pode significar que o buscador está mal interpretando o conteúdo da página, exibindo-a a usuários que desejam ver outro conteúdo. Solução: melhorar o texto, o título e a descrição da página. Também pode significar que a página precisa mostrar mais claramente a sua ação principal. Solução: dê mais enfoque para a ação principal, melhore botões de chamada para ação, aumente tamanho dos textos explicativos, resuma conteúdos amplos e acompanhe futuras taxas de rejeição.
ii. Baixo número de páginas indexadas nos buscadores
Verifique o número de paginas indexadas digitando “site:www.meusite.com.br” nos buscadores. Pode indicar problemas se o valor mostrado for demasiadamente inferior ao número de páginas do website. Solução: envie sitemaps às ferramentas para webmasters e acompanhe a indexação de suas páginas. Trate erros 404 e 500 pelo arquivo .htaccess.
iii. Páginas mal ranqueadas
Verifique se os títulos e as descrições das páginas são únicos e utilizam as palavras-chave com inteligência. Faça o redirecionamento do domínio sem www para www para evitar páginas com URLs diferentes e mesmo conteúdo. Revise o SEO empregado na página.
iv. Elevada velocidade do site
Analise o tamanho de imagens, as execuções de javascripts e as requisições ao banco de dados.
v. Elevado número de usuários deixando a mesma página de saída
Analise a navegação entre páginas, utilize breadcrumbs, analise a relevância do conteúdo e otimize a ação principal, foque a atenção em botões, facilite o preenchimento de formulários, dê ao usuário opções para voltar e avançar. 8. Conclusão

A aplicação de técnicas para otimização de websites atualmente é uma necessidade para empresas cujo negócio esteja ligado ou dependa de vendas on-line. A concorrência pode ser acirrada, mas, executar ações bem planejadas centradas no usuário do website melhorará sua qualidade e o tornará mais rápido e utilizável de maneira amigável para o usuário.

Acompanhar o comportamento do usuário no website também é cogente para a sua evolução e melhoria contínua. A experiência do usuário dirá o que ele espera do website, o que pode ser melhorado e o que está sendo bem explorado. Uma vez reconhecido isto, entende-se o usuário como o horizonte que deve ser buscado pelo website, pois, ao focar o produto no usuário, a chance de melhorar aspectos mal aproveitados seguramente aumentará.

A adoção das técnicas apresentadas neste artigo pode tornar o resultado final do projeto surpreendentemente positivo. Todavia, a contratação de profissionais adequados e o acompanhamento do projeto fase a fase são de suma importância para a eficácia dessas ações. Referências

ARQUITETURA DA INFORMAÇÃO. Blogs, livros, links, cursos e eventos. Disponível em: http://arquiteturadeinformacao.com/blogs-livros-links-cursos-eventos-de-arquitetura-de-informacao/. Acesso em 08 jun 2012.
BASEKIT. Como deixar o seu site veloz. Disponível em: http://www.basekit.com.br/como-deixar-o-seu-site-veloz. Acesso em 08 jun 2012.
BING. Ferramentas para webmasters. Disponível em: http://www.bing.com/toolbox/webmaster. Acesso em 28 jul 2012
GOOGLE DEVELOPERS. Como deixar o seu site veloz. Disponível em: https://developers.google.com/speed/docs/best-practices/rtt#AvoidCssImport. Acesso em 12 jun 2012.
FERRAMENTAS DO GOOGLE PARA WEBMASTERS. Sobre os sitemaps. Disponível em . Acesso em 20Jul 2012.
INSTITUTO FABER LUDENS. Teste de usabilidade. Disponível em: http://www.faberludens.com.br/pt-br/comment/reply/5809. Acesso em 16 jul 2012.
MARKETING DE BUSCA. SEO. Disponível em . Acesso em 20 Jul 2012.
MESTRE SEO. Black hat. Disponível em . Acesso em 20 Jul 2012.
TABLELESS. CSS Sprites. Disponível em http://tableless.com.br/css-sprites/. Acesso em 20 Jul 2012.
THE INFORMATION ARCHITETURE INSTITUTE. O que é arquitetura de informação? Disponível em: http://iainstitute.org/pt/translations/o_que_e_arquitetura_de_informacao.php. Acesso em 08 jun 2012.
TOUCH POINTS. Usabilidade. Disponível em: http://www.touchpoints.com.br/usabilidade. Acesso em 08 jun 2012.
UFRGS. Navegabilidade. Disponível em: http://www6.ufrgs.br/cursos_echos/criterios/navegacao.htm. Acesso em 08 jun 2012.
USABILITY.GOV. Usability Testing. Disponível em: http://www.usability.gov/methods/test_refine/learnusa/. Acesso em 16 Jul 2012.

Fernanda Pieretti
Tecnóloga em sistemas para internet e especialista em sistemas de informação, atuante na área de arquitetura da informação desde 2009, participando do desenvolvimento e otimização de websites.
Sucesso! Recebemos Seu Cadastro.

ASSINE NOSSA NEWSLETTER