Design para Web aula 10

Prévia do material em texto

Design para Web
Aula 10: Validação e �nalização do projeto web
Apresentação
Na aula anterior, �nalizamos a criação do layout �nal da página, discorrendo sobre o uso tipográ�co em interfaces digitais,
especi�camente de websites, bem como orientações para uso de imagens e ícones. Ressaltamos a importância em
manter as páginas leves de forma a permitir um melhor ranqueamento dos buscadores, especialmente do Google, líder de
mercado no segmento.
Nesta aula, inicialmente, abordaremos as estratégias e ações necessárias de SEO, de forma a in�uenciar e permitir melhor
ranqueamento do website nas buscas para que sempre apareçam aos usuários interessados.
Veremos ainda as técnicas de validação da versão �nal do projeto e a elaboração do relatório �nal do website,
documentando as ideias, as decisões e elementos de design usados em sua construção, conforme as etapas que
estudamos na disciplina.
Objetivos
De�nir as estratégias de SEO;
Validar o projeto;
Elaborar o relatório �nal do projeto.
As estratégias de SEO (Search Engine Optimization)
 (Fonte: Shutterstock).
Conceituação
Uma das maneiras de otimizar a localização de sites por ferramentas de busca, como Google e Yahoo, é utilizar boas práticas e
técnicas de SEO. O SEO tem por objetivo preparar as páginas do website para serem bem ranqueadas nas buscas realizadas
pelos internautas: ter os links da página apontados em resposta às palavras-chave mais relevantes de cada contexto (ou nicho
de mercado).
Se a estratégia de SEO do website é bem elaborada, aumenta o número de visitantes e o de leads, ou seja, os potenciais
clientes do negócio. Cabe destacar que leads são pessoas que, por alguma ação, demonstraram interesse no produto ou
serviço oferecido pela empresa.
Uma forma comum de ativar leads é a oferta de conteúdo (como um e-book, por exemplo) mediante o preenchimento de dados
em um simples formulário. Em geral, são solicitados nome e e-mail, que já são su�cientes para contatar o cliente em potencial
e ofertar o que for de interesse da empresa. Algumas empresas solicitam telefone e outros dados adicionais, conforme a
necessidade e contextos. Há casos de empresas que ofertam pequenos cursos, em vídeo, como retribuição aos dados
fornecidos.
1
SEO1
Que em inglês signi�ca Search Engine Optimization e, em português, mecanismo de otimização de busca.
Tais recursos podem ser acionados tanto no website como nas redes sociais
da empresa. Resumindo, leads são todos os internautas que fornecem seus
dados em troca de algum conteúdo que lhes seja útil.
Ou seja, os leads podem tornar-se clientes efetivos ao con�rmarem o interesse no produto ou serviço oferecido pela empresa e
tendem a aumentar na medida em que as estratégias de SEO permitem à empresa estar bem ranqueada nos sistemas de
busca.
https://estacio.webaula.com.br/cursos/go0413/aula10.html
 Os maiores buscadores da web
 Clique no botão acima.
Sabemos que o Google é líder de mercado quando falamos em motor de busca. Mas quais os seus concorrentes?
Existem muitos, mas os que mais se destacam são os listados na tabela 1, a seguir:
Os buscadores que acabamos de ver são os mais usados no mundo, de uma forma geral, mas existem alguns
especí�cos por localidade, como por exemplo Yandex.ru, motor de busca líder na Rússia.
Buscador Características
Google Google é líder; não há dúvidas. Tornou-se, inclusive, um verbo “dar uma googlada”, o que significa: 
- Se quer encontrar algo, vá ao Google; 
- Se quer ser encontrado, esteja no Google.
Bing Buscador da Microsoft e principal concorrente do Google. O Windows agrega ao Edge (novo navegador) o motor de
busca da Bing.
Yahoo Mais forte no mercado americano. Aqui no Brasil chegou a ser líder nos anos 1990. É o motor de busca padrão do
Mozilla Firefox. Na verdade, o Yahoo apenas replica os resultados que são entregues pelo Google e Bing, sem agregar
valor.
AOL
(American
Online)
Um dos maiores provedores de internet e e-mail no início dos 2000, mantendo-se no top 10 dos buscadores.
DuckDuckGO Vem se destacando por alguns diferenciais de seus concorrentes: 
- Sem anúncios; 
- Não coleta dados de usuários, o que agrada os que privilegiam a privacidade; 
- Interface clean, com retorno de uma página com resultados da busca (rolar e clicar para acesso).
Archive.org Útil para os que desejam conferir versões antigas das páginas web. Apresenta resultados de conteúdo publicado desde
1986.
Tabela 1: principais buscadores da web.
Testes de compatibilidade com dispositivos móveis
Estatísticas mostram que mais de 80% dos internautas escolhem uma marca, produto ou serviço após pesquisar no Google.
Mas é importante que a resposta venha na primeira página apresentada, pois 95% dos usuários não vão além dela e 60% dos
cliques ocorrem nos três primeiros resultados. Por isso as estratégias de SEO se fazem tão relevantes nos dias de hoje. Para
conseguir sucesso, ou seja, estar na primeiras páginas de pesquisa do buscador e ainda estar entre os primeiros resultados
listados, o setor de Marketing Digital da empresa deve criar estratégias e aplicar técnicas de SEO.
E aí, você pode se questionar: vale a pena esse investimento?
Resposta: sim, pois no longo prazo fará diferença.
A morte do SEO é anunciada na mídia a todo instante, mas o Google, por exemplo, prioriza a cada dia conteúdo de qualidade,
desconsiderando técnicas de otimização que violam as diretrizes que pautam suas buscas. Vimos, na aula 9, o exemplo de
imagens pesadas, que contam negativamente para o ranqueamento do Google.
Atenção
Cabe ressaltar ainda que os fatores de ranqueamento do Google sofrem constantes alterações, pois o buscador tem como
missão de seu motor de busca exibir os melhores conteúdos para a “pergunta” do internauta, e para isso busca, constantemente,
os melhores critérios, melhorando seus algoritmos.
Outra grande preocupação dos buscadores, em especial da Google, é com relação ao acesso pelos dispositivos móveis e por
isso, tem dado prioridade aos websites com boa usabilidade nesses dispositivos.
Ou seja, se você aplicou as técnicas do design responsivo na construção de
seu website e/ou aplicação de determinados plugin que alteram o visual dos
websites quando acessado por dispositivos móveis, ganhará preferência no
ranqueamento do Google.
O Google disponibiliza uma ferramenta para veri�car se o site é adaptado para plataformas móveis, que informa se o site
informado (URL) está ou não adaptado para dispositivos móveis.
 
Vejamos a seguir um exemplo de uso na própria URL do Google:
 Imagem 1: avaliação de websites do Google.
Digite https:/www.google.com.br/ no respectivo campo, conforme a imagem 2, e clique no botão (laranja) Testar URL.
Segue a tela com o resultado do teste:
 Imagem 2: resultados positivos do teste do Google.
Quando o site não for compatível, será apresentada a mensagem a seguir (no lugar de informar compatibilidade), conforme
imagem. Atente que, além de informar sobre a incompatibilidade, também cita os problemas: letra pequena e elementos
clicáveis próximos.
 Imagem 3: resultado negativo do teste do Google.
O resultado do teste é apresentado em quatro áreas relevantes, conforme mostra a tabela 2:
Área Funcionalidade
Carregamento Área 1: canto superior esquerdo, um alerta (ícone) para problemas de carregamento da página.
Resultado
principal
Área 2: resultado principal, que informa se a página é ou não compatível com dispositivos móveis (letra grande em
verde).
Layout Área 3: layout da página em dispositivos móveis e o HTML da mesma.
Recursos
adicionais
Tem acesso a: 
- Relatório de usabilidade de todo o website; 
- Saiba mais sobre a compatibilidade com dispositivos móveis; 
- Blog.
Tabela 2: resultados do teste do Google.
Ao clicar na área 1, Carregamento (em Problemas no carregamento da página), teremos acesso à exibição dos problemas que
ocorreram ao carregar a página da URL informada, conforme destaque do resultado, apresentado na imagem 4.
 Imagem 4: resultados carregamento da página.
Nessa mesma página, em continuidadeao apresentado na imagem 4, teremos os erros no carregamento, conforme detalhe
exibido na imagem 5.
 Imagem 5: problemas no carregamento da página.
javascript:void(0);
Como funciona o motor de buscas do Google
Estamos destacando o Google dos demais buscadores por dois motivos fundamentais:
1
A diferença como cada motor de busca atua é pequena;
2
O market share do Google nas buscas é algo em torno de 95%
do mercado.
As buscas são divididas em resultados que são pagos e os orgânicos (grátis). Vamos focar nos resultados grátis, que recebem
a maioria dos cliques.
Para ordenar os resultados da busca do internauta, o Google avalia mais de 200 fatores e, caso o site seja adequado, será bem
ranqueado. Os mecanismos de busca são comandados por robôs, que vasculham toda a internet em busca do que o internauta
deseja pesquisar.
Vamos traçar a seguir um passo a passo do funcionamento do motor de busca:
01 Usuário informa as palavras-chave do que deseja pesquisar;
02
O algoritmo, implementado por robôs ou crawlers, faz uma
varredura de todas as informações disponíveis e avalia
quais as mais relevantes para o usuário (cerca de 200
fatores são avaliados);
03
As páginas indexadas (lidas pelo robô e fazem a fazer parte
do buscador) são o resultado da pesquisa. O conteúdo de
cada página é analisado para estabelecer quem estará em
primeiro, ou seja, os resultados são ordenados por
relevância. Os conteúdos que estão em locais especiais
(título, subtítulo, cabeçalhos, descrição, meta descrição,
negrito, URL ou tags) têm mais relevância no rastreamento
pelo Googlebot (nome dado ao robô de busca). Por isso o
conteúdo usado nesses locais especiais deve ser otimizado
através de palavras-chave;
04 Os resultados da busca são exibidos ao usuário.
Exemplo
Um dos recursos interessantes do algoritmo do Googlebot é a busca aproximada: se, por exemplo, o usuário digitar programação
linguagem, ele saberá que houve erro e fará a busca por linguagem de programação.
As buscas do Google podem ser pagas também, por meio do Google AdWords (Google Ads), uma ferramenta de anúncios em
que se dá um lance (tal qual num leilão) por uma palavra-chave. Quando o usuário clicar em seu site, na lista de resultados,
você pagará por isso. Por exemplo: em São Paulo, a palavra-chave desentupidora custa R$ 70,00 por clique, devido à alta
concorrência e índice de conversão.
 Entenda como poderia ser na prática
 Clique no botão acima.
Vamos imaginar que no seu website exista um menu de opções para uso exclusivo dos colaboradores internos da
empresa e não haja interesse que seja localizado por palavras-chave. Como fazer?
Resposta
:
Simples, existe um arquivo chamado robots.txt (também é chamado de protocolo ou padrão de exclusão dos robôs),
que é con�gurado pela equipe de programação, informando quais páginas do site devem ser indexadas e quais não
devem. Assim, as que não forem para indexação são ignoradas pelo robô.
Mas como os mecanismos de busca encontram o seu site? Se, por exemplo, seu site �cou pronto hoje e um usuário
pesquisar por palavras-chave a ele relacionadas, seu site vai aparecer?
Resposta: depende. Se a equipe de desenvolvimento tiver cadastrado o site na ferramenta da Google chamada Google
Search Console (grátis) e tiver procedido adequadamente como os aspectos técnicos (um dos pilares apresentados
acima), a resposta será sim. O cadastro nessa ferramenta informa ao Google que ele precisa indexar (ler) as
informações de seu site.
Com a ferramenta Google Search Console, é possível:
Saber se existe(m) página(s) de seu website sem indexação;
Ver a analisar grá�cos de desempenho;
Analisar o crescimento do website;
Analisar outros indicadores de performance;
Conhecer o(s) termo(s) usado(s) na busca, que levou(aram) a exibir o seu website.
Como o mecanismo de busca do Google conhece todas as URL relacionadas com seu website?
Resposta: a equipe de desenvolvimento gera um arquivo contendo o sitemap, que associa todas as URLS contidas no
website. Vamos imaginar uma empresa de desenvolvimento de sites com as seguintes URL:
https://www.devweb.com.br ;
https://www.devweb.com.br/ecommerce;
https://www.devweb.com.br/websites;
https://www.devweb.com.br/instagram, dentre outras.
O sistema conterá todas essas URL, para que o Googlebot saiba todas as URL relacionadas.
javascript:void(0);
javascript:void(0);
javascript:void(0);
javascript:void(0);
SEO
SEO, traduzido como otimização dos mecanismos de busca, refere-se à otimização necessária a um website para atender aos
200 fatores de busca do Google, para ordenarem o resultado da busca solicitada pelo usuário, de forma que o site apareça em
primeiro na lista de resultados, sem que precise pagar por isso.
 
O SEO é formado por três pilares:
1
Conteúdo
O site deve ter bom conteúdo;
2
Técnica
O usuário deve conseguir acessá-lo e ter uma boa
experiência;
3
Experiência do usuário
A programação deve estar clean e otimizada.
Pilar Propriedades
Conteúdo É preciso conhecer como e o que as pessoas mais pesquisam para direcionar melhor o conteúdo de seus sites.
Técnica Os aspectos técnicos do site são relevantes fatores de ranqueamento, podendo afetar a indexação (leitura) dos conteúdos
pelo Google, ou seja, a otimização planejada precisa ser bem executada pela equipe que escreve o código.
Experiência
do usuário
De nada adianta atender aos dois pilares anteriores se o usuário não conseguir navegar pelo website. Logo, a experiência
do usuário deve ser prioritária.
Tabela 3: contrastes na tipogra�a.
O SEO deve ser aplicado em sites e redes sociais, funcionando bem
em ambos, mas sendo mais efetivo nos sites. Em e-commerce, são
essenciais.
Os pro�ssionais que trabalham com marketing digital devem conhecer bem o mecanismo de busca do Google para usá-lo a
seu favor com as técnicas de SEO. É importante conhecer também as ações proibidas, para evitar que o site seja punido ou
banido. A equipe de desenvolvimento deve estar atenta às diretrizes do Google, listadas a seguir:
Crie páginas para os usuários, e não para os mecanismos de busca;
Não engane os usuários;
Evite truques para subir no ranqueamento;
Valorize o que faz do seu site valioso, especial e atraente, que o faça se destacar da concorrência.
Para que se possa criar um SEO mais assertivo, é preciso integrar forças de diferentes equipes de marketing e de
desenvolvimento (equipe de TI). Embora a implementação do SEO seja da equipe de desenvolvimento, a estratégia é de�nida
pelo marketing.
O principal trabalho da equipe de SEO é produzir conteúdo com as devidas palavras-chave e conseguir atrair tráfego para o
conteúdo dos sites. A equipe de desenvolvimento deve preocupar-se com os aspectos técnicos, como por exemplo a
velocidade de carregamento do site (balanceando o conteúdo com elementos multimídia).
Atenção
A de�nição das palavras-chave exige técnica e experiência.
 Entenda como poderia ser na prática
 Clique no botão acima.
Aspectos do website que o Google valoriza para o ranqueamento:
Rapidez, seja no carregamento ou na navegação. Devemos atentar, conforme vimos na aula 9, para as imagens
(tamanhos);
Responsividade;
Estabilidade;
Códigos bem escritos, otimizados, sem conteúdo duplicado;
Não conter páginas com links quebrados;
Atentar e atuar em eventuais erros disponibilizados no Google Search Console.
Entender de SEO não é tarefa simples, principalmente porque o Google está sempre alterando as diretrizes e
orientações. Ou seja, a equipe de desenvolvimento é fundamental para a manutenção do website.
Seguem as ações relevantes, conforme as diretrizes para webmasters do Google (2019b):
Veri�car se todos os links das páginas podem ser acessados;
Disponibilizar o sitemap em XML no Google Search Console;
Usar o Robots.txt no servidor, avisando ao Google o que não dever ser indexado;
Monitorar o site para procurar hackers e remover conteúdo inválido, caso existam;
Remover conteúdos de spam eventualmente gerados por usuário;
Evitar: conteúdo gerado automaticamente, criaçãode página com pouco ou nenhum conteúdo original, criação
de página com conteúdo malicioso (como phishing, por exemplo), instalação de vírus, cavalo de Tróia, dentre
outros.
Caso um site seja penalizado, poderá perder a posição no ranqueamento e ser retirado das buscas, mas é possível
pedir reconsideração.
Dentre os 200 fatores que in�uenciam no ranqueamento do algoritmo de busca da Google, os 10 que seguem
merecem destaque:
Conteúdo de qualidade e relevante para o usuário;
PageRank, avaliado por três métricas em conjunto: a quantidade, a qualidade e o contexto dos cliques recebidos
pela página;
Autoridade do domínio, determinados por: idade do site, quantidade de links de outras páginas que direcionam
para o site em questão, ausência de penalização do site;
Con�abilidade do site, baseado na con�abilidade dos sites que apontam para o website em questão;
Velocidade de carregamento, que in�uencia sobremaneira na experiência do usuário;
Responsividade, pois para o Google é fundamental o uso em dispositivos móveis. Segundo o Google, 50% das
pesquisas de busca usam o celular;
Certi�cados SSL e HTTPS ganham prioridade, pela segurança que implementam;
Palavra-chave do título, que tem muita relevância;
Navegabilidade, pois quanto mais tempo o usuário navegar no site, mas cliques dará e mais recomendações do
site fará, aumentando os pontos para o ranqueamento;
Arquitetura da informação, pois é fundamental para a retenção de um usuário na página que ele encontre o que
procura e ajuda o Google a organizar os conteúdos por tema.
Fatores que in�uenciam negativamente:
Conteúdo copiado;
Conteúdo duplicado;
Erros de escrita;
Erros de HTML;
Inatividade;
Links com erros;
Taxa de rejeição;
Uso de janelas pop-up;
Compra de troca de links;
Backlinks de sites com má reputação.
Validação do website
No processo de desenvolvimento que abordamos no transcorrer da disciplina, vimos possibilidades de validação da interface.
Agora, com o layout de�nido, podemos aplicar testes com usuários e a interface implementada, como os testes de usabilidade
com usuários. Agora, é o momento de validação �nal, e o foco é a identi�cação dos problemas na interface.
A etapa de validação permite testar o website, visando rati�car os objetivos propostos e certi�car-se de que não existem erros.
 
Comentário
Infelizmente, o processo de validar o website pode ser bem oneroso, dependendo de como é realizado e, por isso, muitas
empresas acabam não realizando ou optando apenas pela validação �nal. Nesse caso, toda possibilidade de validação ao longo
do desenvolvimento �ca comprometida.
Não se deve confundir a validação como uma etapa para corrigir erros
graves, pois nela a busca é por pequenos ajustes necessários, por isso as
validações no processo de desenvolvimento se fazem necessárias. No
processo de validação, é muito importante o envolvimento do cliente e,
principalmente, do público-alvo/ usuário, pois o projeto deve atender às
necessidades destes dois grupos.
Ao �nal de cada validação, é necessário ter como resultado um diagnóstico apontando, basicamente, o que buscou validar,
quais foram os resultados e quais melhorias devem ser implantadas. Para aplicar a validação de um website, deve-se, no
mínimo:
Apresentar o projeto ao cliente,
buscando entender juntos
como o projeto atinge a sua
demanda;
Testar com o usuário/ público-
alvo, analisando a interação em
relação aos objetivos
propostos;
Gerar o relatório �nal, listando
as não conformidades.
Os testes de usabilidade
Teste de usabilidade é uma das formas mais efetivas de validar websites, na fase �nal do desenvolvimento da interface. O
termo teste de usabilidade é amplo e engloba vários métodos de avaliação de interface, com propriedades em comum.
Os testes de usabilidade, uma das opções para a validação �nal da interface, prevê usuários reais usando a interface
implementada para realizar tarefas típicas de seu dia a dia. Ou seja, envolve os usuários tentando realizar tarefas reais com o
sistema e a observação do que acontece.
Clique nos botões para ver as informações.
Seguem as características dos testes de usabilidade da interface de um produto de software (website, app, aplicativo em
geral):
O teste conta com a participação de usuários representativos;
Requer que essas pessoas realizem tarefas típicas e críticas, usando o produto de software;
São registrados dados da interação do usuário com o sistema, através de diferentes técnicas de coleta de dados;
Os dados obtidos são avaliados por especialistas em interface;
É confeccionado um relatório �nal contendo o diagnóstico e a relação dos problemas de usabilidade encontrados.
Características 
Dentre as vantagens em realizar testes de usabilidade, merecem destaque:
Indicar as reações dos usuários na interação com o sistema;
Mostrar os problemas de usabilidade da interface;
Mostrar em que pontos o sistema funciona bem e aqueles em que precisa melhorar;
Promover a participação do usuário como elemento central do processo de desenvolvimento.
Vantagens 
Uma importante decisão a ser tomada, e que representa um signi�cativo custo do teste, é a determinação da quantidade
de usuários que participarão dele:
O desejável é um grande número de usuários representativos, mas dependendo do volume, pode ser inviável, pelo
custo e disponibilidade das pessoas;
Jacob Nielsen (1993) sugere testes com cinco usuários, alegando que com essa quantidade podem-se identi�car,
aproximadamente, 80% dos problemas mais críticos, o que é satisfatório para a maioria dos projetos. E a partir do
sexto usuário, o ganho não é tão signi�cativo e o custo eleva-se;
Nielsen conclui ainda que: é mais oportuno realizar três sessões de testes com cinco usuários do que um teste com
15 usuários. Ele explica que, ao realizar três testes, existe a possibilidade de, após cada um, identi�car os problemas,
redesenhar a interface e testar novamente.
Custo 
As fases dos testes de usabilidade
Geralmente, os testes são divididos em quatro fases distintas:
Clique nos botões para ver as informações.
Envolve de�nição dos objetivos, escolha dos usuários representativos da população real e dos critérios de usabilidade,
seleção das tarefas mais críticas e representativas, criação dos cenários de testes, de�nição do número de sessões de
testes e duração de cada uma, contratação e treinamento dos avaliadores quanto ao domínio da aplicação e da interface
a ser avaliada e, opcionalmente, realização de um teste-piloto para re�nar os procedimentos;
Preparação 
Fase fundamental, na qual os usuários são apresentados à situação de teste. Algumas explicações se fazem necessárias,
de forma a deixar os usuários à vontade e sem constrangimento:
O propósito dos testes é a interface, e não o usuário;
Os resultados servirão para a melhoria da interface;
A garantia do anonimato dos participantes;
A participação é voluntária e pode ser encerrada a qualquer momento, conforme o interesse de cada um;
Se for usada gravação em áudio ou em vídeo da reação dos usuários durante a interação, obter o consentimento de
cada usuário;
Introdução 
Envolve a preparação do ambiente (dos testes) e execução dos testes propriamente ditos. Na fase de realização, devem-
se coletar os dados da interação usuário-sistema, existindo diferentes técnicas de coleta. O pro�ssional que conduzir os
testes deve evitar:
Qualquer comentário ou expressão sobre a performance ou observações do usuário;
Ajudar o usuário, exceto em casos extremos, na execução de suas tarefas durante a interação com o sistema;
Realização 
Ao �nal de cada sessão, os usuários podem ser convidados para uma sessão �nal na qual comentam aspectos da
interface ou fazem sugestões gerais. Pode-se solicitar que os usuários respondam a um questionário. Independentemente
da forma, o foco nesse encontro é conhecer a satisfação do usuário sobre a interface e obter sugestões para a melhoria
dos problemas detectados.
Sessão Final 
Métodos de medição de performance
De posse das observações, dados dainteração usuário-sistema e das eventuais gravações (áudio e vídeo) produzidas, os
avaliadores podem analisar o desempenho em termos de velocidade, precisão, número de problemas, número de tentativas
etc. Além disso, podem detectar sinais de confusão ou dúvida por parte dos usuários, através da análise das gravações em
vídeo ou da interação usuário-sistema (seja em vídeos ou em logs, conforme explicaremos adiante).
Dentre as métricas que podem ser calculadas, destacam-se:
Tempo gasto para completar cada tarefa;
Número de erros cometidos pelo usuário;
Número de comandos e funções não usados pelos usuários;
Número de vezes que os usuários consultaram ajuda online ou manual;
Razão entre acertos e erros para completar uma tarefa;
Número de erros que o usuário entrou e saiu de uma função, sem executar nenhuma ação.
As métricas vão permitir uma análise quantitativa da interface.
Clique nos botões para ver as informações.
Durantes os testes de usabilidade, podem-se coletar três tipos de dados:
Subjetivos: representam as opiniões dos usuários sobre a interação e a interface;
Quantitativos: representam as medidas ou estatísticas de desempenho;
Qualitativos: consistem em resultados não numéricos, como por exemplo a lista de problemas encontrados pelos
usuários e suas sugestões para melhorias do design da interface.
Durantes os testes, pode-se combinar mais de uma técnica de levantamento de dados, dependendo dos objetivos e tipo
de dados a serem capturados.
As principais técnicas usadas para a captura de dados subjetivos demandam a opinião do usuário e são: questionários
(hoje em dia eletrônico) ou entrevistas (sessão �nal, conforme já vimos).
As técnicas de observação direta permitem a coleta de dados objetivos, quantitativos e qualitativos e, em princípio,
oneram o custo com a contratação de observadores, cuja tarefa é observar a interação usuário-sistema e registrar cada
evento, podendo-se valer de diferentes mídias e recursos para tal.
As técnicas mais usuais são: observação direta (registro manual pelo observador), registro em vídeo, registro em áudio e
monitoração dos dados (ou logging de software, ou seja, programas que rodam em background e capturam toda
interação usuário-sistema e permite reproduzi-la posteriormente).
Técnicas de coleta de dados 
Uma facilidade adicional e conveniente para a realização de testes de usabilidade é a utilização de laboratórios de
usabilidade. Apesar do custo adicional, aumenta a e�ciência, rapidez e con�abilidade dos testes, pois os usuários podem
ser observados em um ambiente controlado, dotados de tecnologia composta de câmeras de vídeo, áudio, outros
equipamentos e softwares.
O laboratório consiste em pelo menos duas salas, separadas por um espelho falso; numa delas �ca a área dos testes,
com os computadores em que os testes serão realizados, e na outra, a sala de observação onde �cam os observadores e
o monitoramento dos equipamentos de laboratório. Contudo, podem ser realizados testes em ambientes menos
so�sticados, contando apenas com câmeras.
A desvantagem do uso de laboratório é o fato de o usuário estar sendo observado em um ambiente que não é do seu dia
a dia, e assim �cam desconsiderados aspectos cotidianos do real ambiente de trabalho. Outra desvantagem é seu custo
adicional.
Laboratório de usabilidade 2 
Tudo o que descrevemos sobre testes de usabilidade pode, hoje em dia, ser aplicado remotamente, em sessões de
videoconferência, com programas de monitoramento da interação instalados no servidor em que o website está
hospedado. Ferramentas como Microsoft Teams, Zoom, Google meet, Skype, dentre outras podem ser usadas; tais
ferramentas possuem recursos de gravação da sessão para posterior análise da interação usuário-sistema.
Dentre as vantagens dos testes remotos, merecem destaque:
Realizar testes de usabilidade mesmo de home o�ce;
Maior economia, pois o usuário não tem custo nem perde tempo no deslocamento;
O usuário continua no seu ambiente natural, com todos os problemas e vantagens cotidianas;
Conseguir testar 100% dos projetos até fazer pequenas melhorias, trazer pessoas até a empresa para testar uma
única funcionalidade pode não compensar.
Testes remotos de usabilidade 
Não existe um modelo padrão para a apresentação do resultado dos testes de usabilidade para validação de um website,
mas no geral devem conter:
Usuários participantes;
Análise quantitativa de performance, de cada sessão, por usuário e tarefa realizada;
Análise subjetiva da satisfação de cada usuário, com base no debrie�ng �nal ou coleta de dados em questionário;
Lista dos problemas de usabilidade detectados e, eventualmente, sugestões à equipe de desenvolvimento de como
melhorar a interface.
O relatório é entregue à equipe de desenvolvimento para ajustes dos problemas detectados. Dependendo do planejamento
do teste, novas sessões podem ser realizadas ou não.
Resultados dos testes de usabilidade 
Relatório �nal de validação
Para a entrega do site, é importante conter todas as informações necessárias para o cliente e até mesmo para eventuais
necessidades de resgatar o acesso a ele pela própria equipe que o desenvolveu. Para isso, existem diversas formas de
apresentação, sendo uma delas o memorial descritivo.
De acordo com Ana Pazmino, por meio dele, é possível explicar todas as características do projeto desenvolvido de forma
explicativa, organizada e fácil de entender. Pode-se utilizar de recursos, além dos textos, imagens, infográ�cos, tabelas etc. Para
o projeto de ambientes digitais, buscou-se adaptar o memorial descritivo estabelecido por Pazmino, considerando os seguintes
elementos:
Clique nos botões para ver as informações.
Contendo dados da equipe do projeto, nome, contato e outras informações sobre os membros da equipe da empresa;
Identi�cação 
Descrição sucinta e objetiva do projeto, seus diferenciais: inovação, ênfase, padrão estético, novos materiais, estilo etc.;
Conceito 
Descrever usabilidade, ergonomia, arquitetura da informação; estereótipo popular etc.;
Fator de uso 
Descreve o wireframe, componentes, grid, funcionalidades de navegação etc.;
Fator estrutural e funcional 
Apresenta o processo de criação visual, cores, tipogra�a, uso de imagens etc.;
Fator estético simbólico 
Apresenta como foi realizada a validação do site;
Mock-up e protótipo 
Descreve a estratégia adotada através de técnicas de SEO, publicidade e marketing.
Fator comercial 
Atividade
1. Avalie as assertivas a seguir no que se refere aos conceitos de SEO:
I. O objetivo da estratégia de SEO é preparar as páginas do website para serem bem ranqueadas nas buscas realizadas
pelos internautas.
II. Todo visitante de um website gera lead.
III. Boas estratégias de SEO tendem a aumentar os leads e consequentemente novos clientes.
Com base em sua análise, assinale a única alternativa que apresenta apenas as assertivas corretas:
a) I, II e III
b) I e III
c) II e III
d) I e III
e) III
2. Sobre os critérios e características do ranqueamento realizado pelo motor de busca do Google, avalie as assertivas a seguir:
I. Os fatores de ranqueamento do Google raramente sofrem alterações.
II. O design responsivo tem pouca relevância no ranqueamento do website.
III. É fundamental que o resultado da pesquisa apareça na primeira página de resultados, pois 95% dos usuários não
pesquisam além dela.
Com base em sua análise, assinale a única alternativa que apresenta apenas as assertivas corretas:
a) I, II e III
b) I e III
c) II e III
d) I e III
e) III
3. Avalie as assertivas a seguir no que se refere motor de busca do Google.
I. O motor é implementado por algoritmos em robôs;
II. O motor de busca do Google avalia apenas 10 fatores para ranqueamento.
III. Usam um arquivo robots.txt para informar as imagens do website.
Com base em sua análise, assinale a única alternativa que apresenta apenas as assertivas corretas:
a) I, II e III
b) I e III
c) II e III
d) I e III
e) I
4. Sobre a validação de website os testes de usabilidade, avalieas assertivas a seguir:
I. O processo de validação pode ser bem oneroso, dependendo das estratégias e métodos usados ao longo do processo de
desenvolvimento e ao �nal.
II. Realizar teste de usabilidade, ao �nal do processo de desenvolvimento da interface, é uma das formas de validação.
III. Testes de usabilidade demandam o uso de uma interface implementada, em protótipo ou versão �nal do website, em que
o usuário realiza tarefas típicas de seu dia a dia.
Com base em sua análise, assinale a única alternativa que apresenta apenas as assertivas corretas:
a) I, II e III
b) I e III
c) II e III
d) I e III
e) I
5. Sobre o relatório �nal de validação, avalie as assertivas a seguir:
I. A entrega do website deve ser provida de um documento ao cliente, que apresente a história do desenvolvimento e todas os
artefatos desenvolvidos. Uma das formas de apresentar esse relatório é o memorial descritivo, que deve constar os itens
abaixo, exceto:
a) Identificação do projeto, dados da empresa, equipe etc.
b) Descrição do projeto e seus diferenciais.
c) Wireframes
d) Processo de criação visual: cores, tipografia, imagens etc
e) Previsto x realizado do orçamento.
Notas
Referências
AVIS, M.C. SEO de verdade: se não está no Google, não existe. Curitiba: Intersaberes; 2019. Série Marketing.com. Disponível em
https://plataforma.bvirtual.com.br/Leitor/Publicacao/177819/pdf/0?
code=ACGXgDr/Gj7evTInB9dlBG5O94dzZmQEQkzTo1wi/RgCVQSULyWB1zyj2b8aM/BWxXVSOM1yv4g2IHcR7wE3KA==.
Acesso em: 7 ago. 2020.
BEAIRD, Jason. Princípios do webdesign maravilhoso. Rio de Janeiro: Alta Books, 2012.
BONATTI, D. Dreamweaver CC. Rio de Janeiro: Brasport; 2014. Disponível em:
https://plataforma.bvirtual.com.br/Leitor/Publicacao/160681/epub/0?
code=0MnHnare0+JoS2ZDozsglKCVG2Z1ModW5ZxG6GJLJgGa0E�ay4C9WC/d11nBDpDM8kQrQFRu/6EJMVfJjjSIw==.
Acesso em: 7 ago. 2020. Capítulo 5: Técnicas de SEO.
KALBACH, James. Design de Navegação Web: otimizando a experiência do usuário. Tradução: Eduardo Kessler Piveta. Revisão
Técnica: Marcelo Soares Pimenta. Porto Alegre: Bookman, 2009. Disponível em:
https://integrada.minhabiblioteca.com.br/#/books/9788577805310/. Acesso em:
NIELSEN, Jacob. Livro clássico, precursor, sobre usabilidade. Chestnut Hill, MA: Academic Press, 1993.
PAZMINO, Ana Veronica. Como se cria: 40 métodos para design de produtos. São Paulo: Blucher, 2015.
SANTA ROSA, José Guilherme. Avaliação do projeto no design de interfaces. 1. ed. Teresópolis: 2AB, 2012.
Próxima aula
Explore mais
Pesquise pelo guia da Google para iniciantes em SEO;
Pesquise pela terceira edição do guia completo de SEO.
javascript:void(0);
javascript:void(0);
javascript:void(0);