Buscar

PW - Resumo - NP1

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 3, do total de 5 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Prévia do material em texto

R
ev
is
ão
 p
ar
a 
a 
pr
ov
a 
de
 P
ub
lic
aç
õe
s 
pa
ra
 W
eb
 –
 
Fe
ito
 à
 p
ar
tir
 d
as
 a
no
ta
çõ
es
 d
a 
au
la
 d
e 
re
vi
sã
o 
(2
5/
09
), 
po
r L
ar
is
sa
 C
am
ar
a 
USABILIDADE 
 
É o grau de facilidade ou dificuldade que o internauta tem para realizar uma tarefa no 
seu site. Tem que ser/ter: 
• Eficiente; 
• Fácil de usar; 
• Fácil de aprender; 
• Satisfação de uso. 
 
Precisamos da usabilidade, por que: 
• O concorrente está muito próximo; 
• Fácil de trocar de site; 
• Internauta impaciente. 
 
O poder de escolha está nas mãos de quem usa o mouse (internauta). 
No design de produtos, nós primeiro pagamos, depois testamos a usabilidade. 
Na internet, primeiro testamos a usabilidade, depois pagamos. 
 
Regras básicas da usabilidade: 
• Clareza da arquitetura de informação: 
− Elementos distribuídos harmonicamente; 
− Distinção entre elementos principais e secundários; 
− Suporte ou rotas alternativas para o conteúdo; 
− Ter um mapa do site. 
 
• Facilidade de navegação: 
− Posicionamento dos menus de forma clara e previsível; 
− Acesso à informação com no máximo 3 cliques. 
 
• Simplicidade: 
− Quem navega não tem paciência para procurar, por tanto, as coisas devem 
ter funcionamento simples de entender. 
 
 
 
 
 
R
ev
is
ão
 p
ar
a 
a 
pr
ov
a 
de
 P
ub
lic
aç
õe
s 
pa
ra
 W
eb
 –
 
Fe
ito
 à
 p
ar
tir
 d
as
 a
no
ta
çõ
es
 d
a 
au
la
 d
e 
re
vi
sã
o 
(2
5/
09
), 
po
r L
ar
is
sa
 C
am
ar
a 
• Prioridade de conteúdo: 
− Nível de texto deve ser compatível com o público-alvo (se for um site para 
jovens, usar linguagem jovem, se for para executivos, usar linguagem mais 
formal, etc); 
− Texto conciso. 
 
• Padronização: 
− Manter um padrão visual em todo o site (deve ser de acordo com o 
definido, combinar com as cores do logo, etc) 
 
• Tempo para acesso ao conteúdo: 
− A página não pode demorar a carregar; 
− Tempo recomendado é de 10 segundos; 
− Tempo limite de 30 segundos. 
 
 
 
 
 
 
 
Aplicando a análise heurística: 
1. Definir avaliadores (pessoas que vão testar); 
2. Definir observadores (pessoas que vão observar as dificuldades 
dos avaliadores na navegação); 
3. Definir metodologia e critérios para teste (o que, e como vai ser 
avaliado/testado); 
4. Aplicação dos testes (execução das tarefas pelos avaliadores. 
Ex.: efetuar uma compra no site, encontrar um conteúdo, etc.); 
5. Coletas dos dados (feedback em relação as facilidades e 
dificuldades encontradas na execução das tarefas); 
6. Pontuação dos problemas (definir grau de importância); 
ANÁLISE HEURÍSTICA 
 
É a análise feita por especialistas em interfaces, programas, sites, buscando 
nesta análise identificar erros existentes na forma de uso. Resumindo: analisa erros no 
processo de navegação, para tentar resolvê-los. 
 
 
R
ev
is
ão
 p
ar
a 
a 
pr
ov
a 
de
 P
ub
lic
aç
õe
s 
pa
ra
 W
eb
 –
 
Fe
ito
 à
 p
ar
tir
 d
as
 a
no
ta
çõ
es
 d
a 
au
la
 d
e 
re
vi
sã
o 
(2
5/
09
), 
po
r L
ar
is
sa
 C
am
ar
a 
7. Eliminação dos maiores problemas (resolver primeiro os 
problemas mais graves – aqueles que impedem a navegação). 
 
• Visibilidade: 
− Manter o internauta informado do que está acontecendo, dando um 
feedback pontual a cada ação. 
 
• Compatibilidade com o mundo real: 
− A forma de funcionamento da interface deve ter algum vínculo com o 
mundo real, isto facilita o entendimento. 
 
• Frequência: comum ou raro 
• Impacto: fácil ou difícil de ser superado 
• Persistência: vai incomodar o usuário sempre, ou depois de conhecido pode ser 
superado? 
 
• Monte um questionário onde o avaliador possa: 
− Indicar o grau de satisfação. 
− Indicar a percepção de satisfação. 
 
• Coisas indispensáveis: 
− Ter um botão “Voltar”, para que o usuário possa retornar a pagina anterior; 
− Ter mensagens de erro claras (invés de notificar “erro 404”, informar 
“página não encontrada”), ou não informar o erro, e simplesmente 
redirecionar para outra página; 
− Quando houver erro de sistema, informar o erro; 
− Ter breadcrump (campo que fica geralmente ao todo, mostrando todo o 
caminho percorrido. Ex: Home>Roupas>Femininas>Jaquetas), em todas 
as páginas, com link para todas etapas já exibidas. 
 
 
 
 
 
 
 
 
R
ev
is
ão
 p
ar
a 
a 
pr
ov
a 
de
 P
ub
lic
aç
õe
s 
pa
ra
 W
eb
 –
 
Fe
ito
 à
 p
ar
tir
 d
as
 a
no
ta
çõ
es
 d
a 
au
la
 d
e 
re
vi
sã
o 
(2
5/
09
), 
po
r L
ar
is
sa
 C
am
ar
a 
Web Browsers Search Engines 
HTTP 
 
HTML HTML HTML HTML 
 
 
A B C D 
 
Servidores 
 
TAGS 
 
<!doctype html> indica que vai usar linguagem html 5 
 
<html> início página fim </html> 
<head> início cabeçalho fim </head> 
<title> início nome da página fim </title> (conteúdo visível apenas na aba). 
<body> início conteúdo fim </body> 
<p> início parágrafo fim </p> 
 
<ol> início lista ordenada fim </ol> (com numeração) 
<ul> início lista não ordenada fim </ul> (com bullet) 
<li> início linha/item fim </li> (usada em listas) 
 
<table> início tabela fim </table> 
<th> início título da coluna fim </th> (usada em tabelas) 
<tr> início linha fim </tr> (usada em tabelas) 
<td> início célula fim </td> (usada em tabelas) 
 
---------------------- Conteúdo para prova, revisado pelo professor até aqui -------------------- 
 
 
 
 
 
 
 
 
 
 
hyperlinks hyperlinks hyperlinks 
(o conteúdo que vai entre essas tags, 
não é visível na página). 
 
R
ev
is
ão
 p
ar
a 
a 
pr
ov
a 
de
 P
ub
lic
aç
õe
s 
pa
ra
 W
eb
 –
 
Fe
ito
 à
 p
ar
tir
 d
as
 a
no
ta
çõ
es
 d
a 
au
la
 d
e 
re
vi
sã
o 
(2
5/
09
), 
po
r L
ar
is
sa
 C
am
ar
a 
Mais algumas tags, para auxílio, que segundo o prof, não irão cair em prova, mas, vai que... rs 
 
<h1> início título fim </h1> (tamanho: variável de 1 a 6) 
<i> início itálico fim </i> (apenas para efeito visual) 
<em> início itálico fim </em> (para efeito visual + busca) 
<b> início bold fim </b> (apenas para efeito visual) 
<strong> início bold fim </strong> (para efeito visual + busca) 
 
<img src=“nomedoarquivo.jpg”/> início insere imagem link da imagem fim 
<img src= “nomedoarquivo.jpg” alt= “texto”/> aparece o nome qdo posiciona o mouse na imagem 
 
<a href=“url”> Clique aqui! </a> início insere link texto “clicável” fim 
<a href=“url” target=“blank”> Clique aqui! </a> abre em nova aba 
 
<!--comentário--> início comentário fim (visível apenas no código) 
 
<style> início estilo fim </style> 
<style=“font-size:10px”> tamanho da fonte 
<style=“font-family:Arial”> fonte 
<style=“color:red”> cor do texto (pode ser descrita em inglês, ou por hexadecimal) 
<style=“text-align:center”> alinhamento do texto 
<style=“background-color:yellow”> cor de fundo (pode ser descrita em inglês, ou por hexadecimal)

Outros materiais