INSTITUTO FEDERAL DE
EDUCAÇÃO, CIÊNCIA E TECNOLOGIA
TOCANTINS
Campus Araguaína
Aplicativos Web – Web Design
Ensino Médio Integrado
Ana Paula Alves de Lima
1
Usabilidade – Onde Estou?
Desorientação causa insegurança.
Basta chegar numa cidade
desconhecida para perceber. Placas
e mais placas apontando onde é o
aeroporto, o bairro xy, os museus,
as praças, os nomes das ruas...
Estamos sempre
cercados de
marcações e placas de
orientação. Sem isso
nos sentimos
perdidos.
Agora imagine isso
acontecendo quando
entramos num site
desconhecido.
Ao entrar na primeira página não
temos essa noção de profundidade.
Não sabemos o que vamos encontrar
exatamente em cada página. Vamos
abrindo uma porta por vez para
descobrir o que existe do outro lado.
E quantas vezes entramos no site, vimos a
primeira página e não entendemos sobre qual
assunto o site se refere?
Vamos na prática... Acessem e
Observem por 2 minutos...
http://www.pudim.com.br/
http://www.fatosdesconhecidos.com.br/os-20sites-mais-estranhos-e-sem-nocao-da-internet/
Não me faça pensar
"Qual a coisa mais
importante que eu devo
fazer se quiser me
assegurar que meu site
seja fácil de usar?”
A resposta é simples.
"NÃO ME FAÇA PENSAR".
Steve Krug
No seu livro "Não me faça pensar",
mostra, através de testes de
usabilidade, que o usuário na maioria
das vezes clica sem pensar antes de
tomar essa atitude.
Ao criar um site, você deve
tentar sempre se livrar dessas
perguntas - Qual a coisa mais importante
que eu devo fazer se quiser me assegurar que meu
site seja fácil de usar.
Crie sempre
perguntando para você mesmo,
colocando-se no lugar do
usuário.
Um exemplo típico de dificuldade...
nomes das seções - Quando
tentam reinventar um nome já
conhecido.
Vejam esse layout antigo do jornal
cearense O Povo. Pergunto: onde estão
os classificados do jornal?
O nome dos classificados do jornal O Povo se
chama POPULARES. Veja lá no topo azul, um
botão verde entre "esportes" e
"contato". Encontrou?
Somente damos uma
olhada nas páginas, na
maioria das vezes.
Mas porquê?
Geralmente estamos
com pressa.
Se você tem um cachorro,
percebe quando ele olha pra
você quando você fala com
ele. Um exemplo
É por isso que seu cachorro fica
olhando pra você. Ele não
entende nada, claro, ele não
fala a sua língua, mas fica
atento as palavras que lhe
interessam, no caso, seu
próprio nome.
Na realidade esse é o
olhar mais comum
quando
entramos num site
procurando por
classificados:
Note que
Note que os olhos do usuário no
exemplo só enxergam o que ele quer
ver. No caso, classificados.
O resto não interessa, o que interessa é
o que ele procura. Mas poderia estar
procurando qualquer outra coisa.
Sempre entramos procurando alguma
coisa.
Existem algumas palavras que se destacam
nesse meio embaçado por ser de interesse de
todos. Palavras como "grátis", "sexo",
"promoção“ normalmente despertam a
atenção por ser um interesse de uma maioria o
tempo inteiro.
Teste da Usabilidade
Para que o usuário possa sentir a
profundidade do site e saber onde ele está a
qualquer momento, há uma série de padrões e
mecanismos para que o cliente não se sinta
perdido pelas páginas.
Um mecanismo muito
importante para sites de
grande profundidade é a
ferramenta de busca. A
busca serve como um balcão
de informações.
Como somos ocidentais, lemos da esquerda pra
direita, de cima para baixo. Por isso a área mais
nobre do site está no topo, à esquerda. E é por isso também que
normalmente encontramos ali o logotipo do site.
O logo também faz parte da navegação do site pois
além de identificar em qual site o usuário está, serve
como ponto de fuga, pois já há uma padronização de
que clicando ali, volta-se para a home do site.
Imagine um logotipo de um site no lado direito
ou no centro...
Esse tipo de padronização como vemos
com os
logos dos sites ocorre também no
supermercado.
Quando você não encontra uma seção,
você olha pra onde? Provavelmente
pra cima, buscando as placas
identificadoras das seções.
O objetivo de toda capa de site é chamar a
atenção do usuário para dentro do site.
Por isso devemos
economizar palavras na home e
falar somente o que interessa, com
chamadas para as páginas
internas. Palavras que não
interessam como “seja bem-vindo”
devem ser evitadas. Procure
palavras que realmente
provoquem algum tipo de efeito e
que mereçam estar ali.
•Não há problema em colocar um menu no topo
e outro igual no rodapé.
•Procure alinhar os elementos do menu vertical,
com todas as opções iniciando do mesmo ponto.
•utilizar a migalha de pão ou
breadcrumbs. Este recurso mostra ao usuário por
onde ele passou até chegar ali, tudo utilizando links
que dá a possibilidade do usuário voltar. Por
exemplo:
home > a empresa > valores
Outro item importante é colocar em destaque o
nome da página da qual se está acessando. Se o
usuário entrar na página “A Empresa” deve
constar
em local visível e de fácil leitura o título “A
Empresa”.
Não se esqueça que nem sempre começamos a
visualizar uma página a partir da página inicial.
Quantas vezes fazemos uma busca pelo Google e
ao encontrar um resultado caimos dentro de uma
página interna do site?
EM DUPLA
Exercite esse teste seguindo os seguintes passos:
1. Pegue a página impressa do site.
2. Segure à distância de um braço ou incline-a de
modo que não possa estudá-la de perto.
3. Tão rapidamente quanto possível, tente
encontrar e circule cada item da lista abaixo ( você
não encontrará todos os itens em todas as páginas )
Circule:
1. A identificação do site
2. O nome da página
As seções e subseções
4. A navegação
5. Indicadores "você está aqui»
6. A pesquisa
Veja o exemplo:
Exercício – 2,0 pontos
Abra o paint, e cole a imagem dos sites e circule os elementos
citados:
http://www.agricultura.gov.br/
Circule:
1. A identificação do site
2. O nome da página
As seções e subseções
4. A navegação
5. Indicadores "você está aqui»
6. A pesquisa
Referencias Bibliográficas
APOSTILA DO CURSO DE DESIGN WEB,
BRUNO ÁVILA , 2005
INSTITUTO FEDERAL DE
EDUCAÇÃO, CIÊNCIA E TECNOLOGIA
TOCANTINS
Campus Araguaína
INSTITUTO FEDERAL DE
EDUCAÇÃO, CIÊNCIA E TECNOLOGIA
TOCANTINS
Campus Araguaína
EXERCÍCIO PRÁTICO
EM DUPLA
• Aplicando o exercício feito durante
a semana, e as dicas para criação de
um layout, crie o Layout no
firewoks , photoshop ou paint da
página inicial de um site a sua
escolha um tema (moda,capricho,
supermercados, restaurantes) .