1 joelma de moura ferreira interação homem-computador xii engenharia de usabilidade na web profa....

1Joelma de Moura Ferreira

Interação Homem-Computador xIIEngenharia de Usabilidade

na Web

Profa. Joelma de Moura Ferreira


Você tem menos de dois minutos para se comunicar na primeira

vez em que um potencial cliente visita seu website.


Nada importante deve estar a mais de dois cliques de

distância


Os usuários gastam em média 27 segundos em cada página. Você deve convence-los a ficar


Problema de Usabilidade na Web

• O sistemas tem a informação ou o serviço que eu preciso?

• Onde posso encontrar?

• Como posso solicitar esse serviço? Quais informações devo fornecer?

• Qual o resultado? Era o que eu queria?

• Para que serve esse elemento?

• O que significa essa figura?

• Para onde leva esse link?


Na web: Não me faça pensar !

• Ao olhar uma página web, ela deve ser evidente por si só, auto-explicativa;

• O usuário deve ser capaz de sacá-la:– O que ela é;– Como usá-la sem fazer nenhum esforço;


Olhando uma página Web “sem pensar”


Olhando uma página Web “pensando”


Como o usuário pode compreender seu Website

• Crie uma hierarquia visual clara• Tire proveito das convenções• Divida as páginas em áreas claras e definidas• Deixe óbvio o que pode ser clicado• Minimize a confusão


Crie uma hierarquia visual clara


Tire proveito das convenções


Divida as páginas em áreas claras e definidas


Deixe óbvio o que pode ser clicado

• sublinhado• cores• rollover• setas


Minimize a confusão

• Poluição visual


Alguns grandes erros na criação de Websites


Grandes erros na criação de Websites

• Grandes blocos ou “paredes” de texto: “Escreva para uma leitura on line e não para impressão”



• Rolagem de tela na Horizontal



• Janelas Pop-up



• Mecanismo de busca inflexível

• Programas de busca que não conseguem interpretar palavras similares, em grafia ou fonia, tendem a perder mercado.



• Fontes de tamanho fixo ou via CSS

• O uso de folhas de estilo inibe a possibilidade do usuário visualizar textos do tamanho que prefere.

• Respeite a preferência do usuário.

• Use sempre fontes de tamanho relativo e não absoluto.



• URL com mais de 75 caracteres

• URL muito longa, desencoraja que alguém digite a mesma no seu browser.

• Alguns browsers têm pequeno espaço para mostrar o endereço, e parte dos grandes endereços não fica visível.



• "Mailto" inesperados em links

• Quando se clica num link espera-se que o browser mostre o próximo hipertexto.

• Abrir uma janela para que o usuário envie um E-mail é desastroso, pois o usuário espera ler alguma coisa, não escrever.



Cronologicamente


Grandes erros na criação de Websites - Cronologicamente

(1996)

1. Frames

2. Tecnologia de Ponta

3. Objetos rolantes, Blink e animações

4. URL complexa e codificada

5. Páginas Órfãs

6. Páginas com scroll longos

7. Falta de suporte de navegação

8. Cores de links, não padrão

9. Informações desatualizadas

10. Longo tempo de download



• (1999)

1. Quebra ou modificação do botão Back

2. Abrir uma nova janela

3. Uso não-padrão de elementos de interface gráfica

4. Falta de identificação dos autores

5. Falta de arquivos

6. Mover a página para outra URL

7. Cabeçalhos ausentes ou que nada tem a ver com o conteúdo

8. Saltar para a última tecnologia do momento

9. Tempo de resposta lento do servidor

10.Qualquer coisa que se pareça com uma propaganda



• (2002)

1 - Página comercial sem preços

2 - Mecanismo de busca inflexível

3 - Scroll Horizontal

4 - Fontes de tamanho fixo ou via CSS

5 - Blocos gigantes de texto

6 - Javascript em links

7 - Perguntas infrequentes em FAQ

8 - Colecionar E-mails sem autorização

9 - URL com mais de 75 caracteres

10 - "Mailto" inesperados em links



• (2003)

1 - Definição de objetivos obscura

2 - Novas URLs para arquivar conteúdos

3 - Conteúdos sem datas

4 - Amostra de grandes fotos sem clareza

5 - Detalhamento de textos para <ALT>

6 - Falta de suporte para "What-if"

7 - Longas listas que não podem ser filtradas por atributos

8 - Produtos classificados apenas por marca ou atributo único

9 - Evitar formatos de entrada de dados restritivos

10 - Páginas que se ligam a si próprias.



• (2004)

1. Substituição de textos "planos" por textos contidos em imagens.

2. Textos em PDF

3. Poluição de informação: informação excessiva, desnecessária ou advertência idiota.

4. Information foraging: Satisfação de informação, faz com que usuários procurem opções que lhes satisfaçam com simplicidade.



• (2005)

1. Problemas de legibilidade

2. Links não padrão

3. Uso inadequado de Flash

4. Conteúdo que não foi escrito para a Web

5. Pesquisa mal sucedida

6. Incompatibilidade de Browser

7. Formulários pesados

8. Sem informação da empresa ou de contato

9. Lay-out congelado em páginas com tamanho fixo

10. Ampliação inadequada de fotos


Metodologia de Projetos Web



• Metodologia sugerida por Mario Pinheiro, antigo coordenador da equipe de design de interface e AI da Globo.com

1) Demanda/Definição da estratégia

2) Benchmark

3) Levantamento de funcionalidades desejadas (brainstorm)

4) Macroarquitetura da informação

5) Verificação da viabilidade tecnológica


6) Continuação do projeto

a. Detalhamento da AI

b. Desenho da experiência do usuário

c. Projeto de interface

d. Projeto de branding

e. Ajustes7) Implementação

8) Desenvolvimento

9) Lançamento



Diretrizes


• Exemplos que devem ser evitados:– Texto pequeno– Help, I am small non-resizable text. Help, I am small non-resizable text. Help, I am small non-resizable text.

Help, I am small non-resizable text. Help, I am small non-resizable text. Help, I am small non-resizable text. Help, I am small non-resizable text. Help, I am small non-resizable text. Help, I am small non-resizable text.Help, I am small non-resizable text. Help, I am small non-resizable text. Help, I am small non-resizable text.Help, I am small non-resizable text. Help, I am small non-resizable text. Help, I am small non-resizable text.Help, I am small non-resizable text. Help, I am small non-resizable text. Help, I am small non-resizable text.

– Link pequeno e pouco contraste

Clique aqui clique aqui clique aqui clique aqui clique aqui clique aqui clique aqui

Diretrizes


Exemplos que devem ser evitados:Contraste insuficiente– Help, I am small non-resizable text that is hard to

read because of its use of color. Help, I am small non-resizable text that is hard to read because of its use of color.

Help, I am small non-resizable text that is hard to read because of its

use of color. Help, I am small non-resizable text that is hard to read because of its use of color. Help, I am small

non-resizable text that is hard to read because of its use of color.

Diretrizes


• Informando o objetivo do site• Exibir o nome da empresa e/ou logotipo, em tamanho

razoável e em um local de destaque

• Incluir um slogan resumindo explicitamente o que o site ou a empresa faz

• Enfatizar o que o site faz de diferente sob a perspectiva dos usuários, qual é o seu diferencial?

• Enfatizar tarefas mais importantes

• Designar explicitamente uma página do site como a home

• A estrutura da Home diferente de todas as outras páginas

Diretrizes


• Criando conteúdo

• Usar seções e categorias de rótulo, com idioma centrado no

cliente, de acordo com a importância dessas seções e

categorias para o cliente e não para a empresa.

• Evitar conteúdo redundante

• Não utilizar frases eruditas nem dialeto de marketing -

exemplo: “grite” ao invés de “fale conosco”

• Explique o significado de abreviações, acrônimos, etc.

• Evite utilizar todas as letras de um título em caixa alta. Por

exemplo, “PSCICOLOGIA DAS PALAVRAS” não é tão

legível quanto “Psicologia das Palavras”.

• Evitar usar inadequadamente espaços e pontuação para dar

ênfase – por exemplo, L A G O S T A ou L.A.G.O.S.T.A.

Diretrizes


• Links

• Diferenciar os links e torná-los fácil de visualizar, torne

óbvio o que é clicável

• Não usar instruções genéricas, como “Clique aqui”,

como nome de um link. Por exemplo, em vez de dizer

“Clique aqui” para obter os itens de Layette, basta

dizer “itens da Layette.”

• Não usar links genéricos, como “Mais...”, no final de

uma lista de itens. Em vez disso, informe o que os

usuários obterão, em links como “Mais ficção nova”

Diretrizes


• Links (cont.)

• Permitir links coloridos para indicar os estados visitados e

não-visitados

• Não usar a palavra “Links” para indicar links existentes na

página. Indicar a presença de links com sublinhado e cor

azul.

• No caso de links para arquivos PDF, DOC, PPT, MP3,

vídeo, etc., certifique-se de eu o link indique

explicitamente o que acontecerá se clicado.

Diretrizes


• Gráficos e animação

• Usar gráficos para apresentar o conteúdo real, não

somente para decorar o site.

• Rotular gráficos e fotos se os respectivos

significados não estiverem claros no contexto

• Editar fotos e diagramas adequadamente,

segundo o tamanho de exibição

Diretrizes


• Gráficos e animação (cont.)

• Evitar o uso de gráficos de marca d´água (imagens de

pano de fundo com texto sobreposto).

• Use animações com moderação e evite utilizá-las apenas

para chamar atenção.A animação distrai a atenção sobre

os outros itens do site.

Diretrizes


• Gráficos e animação (cont.)

• Não repita animações longas, coloque um botão

para reproduzir o clip.

• Jamais animar elementos críticos da página,

como logotipo, slogan ou o título principal.

• Permitir que os usuários decidam se desejam

ver uma introdução animada do seu site – não

deixar a opção de animação predefinida.

Diretrizes


• Design gráfico

• Usar contrastes sempre altos entre textos e

panos de fundo.

• Evitar a rolagem horizontal a 800 x 600

Diretrizes


• Design gráfico (cont.)

• Os elementos mais críticos da página devem

estar visíveis “acima da dobra do jornal” (na

primeira tela de conteúdo, sem rolar).

• Usar layout fluído para permitir o ajuste do

tamanho da homepage a diversas resoluções de

tela.

Diretrizes


• Janelas Pop-up e páginas intermediárias

• Conduzir os usuários à “verdadeira”

homepage quando digitarem o URL

principal ou clicarem em um link para seu

site. As telas de abertura devem

morrer. Exceção: sites com material

impróprio para menores

Diretrizes


• Publicidade

• A maioria de usuários com experiência já adquiriu

uma cegueira aos banners com propagandas

• O mais eficiente modelo de publicidade online é o do

Google, em texto e com conteúdo similar ao

pesquisado

• Amazon também tem um bom modelo utilizando

referências cruzadas de outros compradores.

Diretrizes


• Publicidade (cont.)

• Manter os anúncios externos pequenos e o mais

discretos possível em relação ao conteúdo central da

homepage.

• Se voce posiciona anúncios fora da área de banner

padrão, no início da página, rotule-os como publicidade,

para que os usuários não os confundam com o conteúdo

de seu site.

•

Diretrizes


• Boas-vindas

• Não dê boas-vindas aos usuários do site.

Experimente utilizar o espaço das boas-

vindas para criar um slogan .

Diretrizes


• Comunicando problemas e emergências

• Se o Website ficar paralisado ou partes importantes

do site não estiverem funcionando, informar isso

claramente na homepage.

• Ter um plano para lidar com o conteúdo crítico do

Website, para o caso de uma emergência.

Diretrizes

1 joelma de moura ferreira interação homem-computador xii engenharia de usabilidade na web profa....

Documents