Usabilidade em interface Web > Desenho do contedo

Usabilidade em interface Web Leitura pelos usurios

Engenharia de Usabilidade Prof.: Clarindo Isaas Pereira da Silva e Pdua
Gestus Departamento de Cincia da Computao - UFMG

Pesquisas mostram que velocidade de leitura em telas de computador cerca de 25% mais lenta do que em papel
O problema de legibilidade deve melhorar no futuro com a disponibilidade de monitores de 300 dpi de resoluo

26/8/2008
Clarindo Pd u a

Usabilidade em interface Web > Desenho do contedo > Leitura pelos usu rios

Usabilidade em interface Web > Desenho do contedo > Leitura pelos usu rios

Texto devem ser apropriados para leitura em varredura

Texto devem ser apropriados para leitura em varredura

Use pargrafos curtos Use itemiza o, em 1, 2 ou at 3 nveis Use cabealhos significativos, no espirituosos Use cores ou sublinhados (cuidado para no confundir com links) para enfatizar palavras importantes Use hipertexto para partir textos longos em vrias pginas

26/8/2008
Clarindo Pd u a

26/8/2008
Clarindo Pd u a

Usabilidade em interface Web > Desenho do contedo > Leitura pelos usu rios

Usabilidade em interface Web > Desenho do contedo > Leitura pelos usu rios

Pesquisa de Nielsen e John Morkes

Texto inicial (condio de controle, 0% melhor):

No escreva mais de 50% do que escreveria em material impresso

Aps escrever um texto, reduza-o novamente sucessivamente.
Nebraska is filled with internationally recognized attractions that draw large crowds of people every year , without fail. In 1996, some of the most popular places were Fort Robinson State Park (355,000 visitors), Scotts Bluff National Monument (132,166), Arbor Lodge State Historical Park & Museum (100,000), Carhenge (86,598), Stuhr Museum of the Prairie Pioneer (60.002), and Buffalo Bill Ranch State Historical Park (28,446).

26/8/2008
Clarindo Pd u a

26/8/2008
Clarindo Pd u a

Usabilidade em interface Web > Desenho do contedo > Leitura pelos usu rios

Usabilidade em interface Web > Desenho do contedo > Leitura pelos usu rios

Pesquisa de Nielsen e John Morkes Pesquisa de Nielsen e John Morkes

Texto conciso (58% melhor em usabilidade):
Nebraska is filled with internationally recognized attractions that draw large crowds of people every year, without fail . In 1996, some of the most popular places were:

Layout bom para leitura em varredura (47% melhor):

In 1996, six of the best-attended attraction in Nebraska were Fort Robinson State Park, Scotts Bluff National Monument, Arbor Lodge State Historical Park & Museum, Carhenge Stuhr Museum of the Prairie , Pioneer , and Buffalo Bill Ranch State Historical Park.

Fort Robinson State Park (355,000 visitors) Scotts Bluff National Monument (132,166) Arbor Lodge State Historical Park & Museum (100,000) Carhenge (86,598) Stuhr Museum of the Prairie Pioneer (60.002) Buffalo Bill Ranch State Historical Park (28,446)

26/8/2008
Clarindo Pd u a

26/8/2008
Clarindo Pd u a

Usabilidade em interface Web > Desenho do contedo > Leitura pelos usu rios

Usabilidade em interface Web > Desenho do contedo > Leitura pelos usu rios

Pesquisa de Nielsen e John Morkes

Linguagem objetiva (27% melhor):

Pesquisa de Nielsen e John Morkes

Verso combinada (124% melhor): In 1996, six of the most-visited places in Nebraska were::

Nebraska has several attractions In 1996, some of the most-visited places . were Fort Robinson State Park (355,000 visitors), Scotts Bluff National Monument (132,166), Arbor Lodge State Historical Park & Museum (100,000), Carhenge (86,598), Stuhr Museum of the Prairie Pioneer (60.002), and Buffalo Bill Ranch State Historical Park (28,446) Fort Robinson State Park Scotts Bluff National Monument Arbor Lodge State Historical Park & Museum Carhenge Stuhr Museum of the Prairie Pioneer Buffalo Bill Ranch State Historical Park

26/8/2008
Clarindo Pd u a

26/8/2008
Clarindo Pd u a

10

Usabilidade em interface Web > Desenho do contedo Pgina da Herts

Usabilidade em interface Web > Desenho do contedo

Seguro supplement liability protection passa despercebido

Faa servio de edio do material escrito (correo ortogrfica,e tc)

Use ferramentas de correo ortogrfica Se puder, contrate editores profissionais especializados em Web

Ttulo deveria ser mais objetivo: Optional Insurance Coverage

26/8/2008
Clarindo Pd u a

11

26/8/2008
Clarindo Pd u a

12

Usabilidade em interface Web > Desenho do contedo Pgina da IBM

Poderia categorizar an ncios Poderia melhorar descries dos produtos

Usabilidade em interface Web > Desenho do contedo

Estilo de redao
Usurios costumam ler somente a primeira frase de cada pargrafo: cada pargrafo deve conter somente uma idia Uso de metfora deve ser evitado (pode ser entendido literalmente) Cuidado com uso de humor: leitura em varredura dificulta entendimento de humor. Porm, com cuidado, humor pode aliviar ar de seriedade.

26/8/2008
Clarindo Pd u a

13

26/8/2008
Clarindo Pd u a

14

Usabilidade em interface Web > Desenho do contedo

Usabilidade em interface Web > Desenho do contedo

Partio de pginas
Usurios no gostam de rolagem Para evitar textos muito longos, pode-se partir contedo em v rias pginas ligadas por links Hipertexto deve ser usado como mecanismo para organizar texto, no para partir textos longos Hipertexto devem ser organizados como pirmide invertida: leitor pode parar quando quiser e ter o mximo de informao possvel

Ttulos de pginas ou manchetes (headlines)

Devem ser escritos com cuidado j que podem ser utilizados por mquinas de busca ou em bookmarks No devem ser muito longos: entre 2 a 6 palavras Um t tulo pode significar o usurio abrir ou no uma pgina Pginas diferentes devem ter t tulos diferentes para evitar problemas com bookmarks , por exemplo Conciso, objetividade: ao inv s de bem-vindo minha empresa, use Minhaempresa. Evite uso de a, as um, uma, etc

26/8/2008
Clarindo Pd u a

15

26/8/2008
Clarindo Pd u a

16

Usabilidade em interface Web > Desenho do contedo

Usabilidade em interface Web > Desenho do contedo > Legibilidade

Legibilidade
Use cores com certo contraste entre o texto e o fundo O fundo deve ter s uma cor ou desenhos/hachurados sutis Use fontes grandes o suficiente para que mesmo pessoas com viso deficiente possam enxerg-los No use texto em movimento ou piscando: dificulta a leitura

Em geral, textos devem ser ajustados esquerda: um ponto de partida estvel facilita a leitura Textos em fontes pequenas devem ser sans -serif. Serifafacilita a leitura mas s devem ser usados para tamanhos maiores de fontes EVITE O USO DE TEXTOS EM MAISCULAS: A LEITURA DA ORDEM DE 10% MAIS LENTA, SEGUNDO PESQUISAS, PELA DIFICULDADE DO OLHO HUMANO EM RECONHECER PALAVRAS E CARACTERES NO FORMATO MAIS UNIFORME E EM FORMA DE BLOCOS DA LETRA MAISCULA

26/8/2008
Clarindo Pd u a

17

26/8/2008
Clarindo Pd u a

18

Usabilidade em interface Web > Desenho do contedo

Usabilidade em interface Web > Desenho do contedo Documentao on-line

Documentao on-line
As pessoas no lem documentao voluntariamente, geralmente s a procuram quando tm problemas Documentao online deve ter mecanismos de pesquisa

Instrues devem ser orientadas a tarefas e solues mostradas passo-a-passo. No deve-se colocar muita informao de background por que geralmente sero ignoradas pelos usurios Diagramas facilitam a apresentao de modelos conceituais Hipertextos podem ser muito teis Seja breve

Exemplos so bem-vindos
26/8/2008
Clarindo Pd u a

19

26/8/2008
Clarindo Pd u a

20

Usabilidade em interface Web > Desenho do contedo

Usabilidade em interface Web > Desenho do contedo

Multimedia
Deve ser usado com crit rio para no confundir o usurio Devem ter qualidade Tamanho de arquivos multimedia, por geralmente serem grandes, devem ser indicados Se possvel, coloque uma ou duas fotos que dem uma idia do que seja a animao

Imagem e fotografia Uma imagem vale mais que mil palavras mas em compensao uma imagem gasta duas mil palavras de tempo de carga Use imagens para fotos de produtos, fotos de pessoas, quando importantes Vrias fotos podem ser diludas em uma hierarquia de pginas de modo que s os usurios realmente interessados vero as fotos todas

26/8/2008
Clarindo Pd u a

21

26/8/2008
Clarindo Pd u a

22

Usabilidade em interface Web > Desenho do contedo > Imagem e fotografia Reduo de imagens: pode-se usar uma combinao de cortes e redues de escala para reduzir imagens.

Usabilidade em interface Web > Desenho do contedo > Imagem e fotografia

26/8/2008
Clarindo Pd u a

23

26/8/2008
Clarindo Pd u a

24

Usabilidade em interface Web > Desenho do contedo

Usabilidade em interface Web > Desenho do contedo

Animao
Imagens em movimento chamam muito nossa ateno: herana de mecanismo de sobrevivncia para o homem primitivo Animaes devem ser minimizadas para no distrair a ateno do usurio Quando usadas, devem rodar algum tempo e parar.

26/8/2008
Clarindo Pd u a

25

26/8/2008
Clarindo Pd u a

26

Usabilidade em interface Web > Desenho do contedo > Animao

Indicao de animaes
Mostrar continuidade em transi es de estados diferentes Mostrar movimento para frente e para trs em alguma dimenso de navegao. Ilustrar alteraes ao longo do tempo Enriquecer representaes grficas ilustrando operaes Visualizar estruturas tridimensionais Atrair a aten o: deve ser usado somente se for de valor para o usurio

26/8/2008
Clarindo Pd u a

27