Handbook Usabilidade na Web

Page 1

na

Web

HandBook

Paulo AraĂşjo CDM1


“Usabilidade é a capacidade, em termos funcionais humanos, de um sistema ser usado facilmente e com eficiência pelo usuário.”

Shackel (1993)

“Usabilidade está directamente ligada ao diálogo na interface. É a capacidade do software em permitir que o usuário alcance suas metas de interação com o sistema”

Scapin (1993)


Í N D I C E

I. Usabilidade O que é?

Cinco Atributos Critérios Dificuldades Conselhos usáveis

II. Simplicidade na Apresentação Manter interface simples

Reduzir excesso de Informação Fornecer configurações padrão

III. Navegação e Pesquisa Utilização de Botões de retroceder

Atribuição de Feedback Utilização de Web Browsers Elaboração de um mapa do site

6 7 8 9 11 12

15 16 17 18

20 21 22 23 24


Í N D I C E

26

IV. Legibilidade Construção de uma grelha de Layout

Economizar espaço com conteúdo oculto Utilizar linguagem adequada

27 28 29

31

V. Apresentação de Dados Apresentar Gráficos Simples

Escolha de Gráficos 3D

32 33

35

VI. Layout Apresentar uma Homepage Funcional

Avaliar resolução dos monitores Usar cabeçalhos e rodapés Cor

VII. Ajuda Fornecer ou sugerir Ajuda

36 37 38 39

41

42


Í N D I C E

VIII. Testes de Usabilidade O que é?

Sistemas Funcionais Sistemas Não Funcionais

44 45 46 48

IX. Bibliografia

Referências Bibliográficas

52

51


Usabilidade O que é? Cinco atributos Critérios Dificuldades Conselhos usáveis


I.

Usabilidade

1. O que é? • Usabilidade é uma característica daquilo que é utilizável, funcional; • É tornar a relação entre uma ferramenta e o seu utilizador o mais agradável e fácil possível. Para que uma determinada ferramenta seja eficiente, deve permitir aos seus utilizadores que cumpram as suas tarefas da melhor forma possível; • É sinónimo de eficácia, eficiência e satisfação da interface diante do usuário;

Os aspectos fundamentais para a percepção da boa usabilidade são: * Ser de fácil aprendizagem; * Permitir uma utilização eficiente; * Apresentar poucos erros * E, ainda, a facilidade de memorização e o nível de satisfação do utilizador.

Wikipedia: http://pt.wikipedia.org/wiki/Usabilidade

Glossário:

Interface: permite a interação com dispositivos digitais através de elementos gráficos como ícones e outros indicadores visuais, em contraste a interface de linha de comando.

Utilizador: pessoa que vai usar o sistema para executar determinada tarefa.

7


I.

Usabilidade

2. Cinco atributos A usabilidade tem cinco atributos: • capacidade de aprendizagem – o sistema deve ser fácil de ser aprendido pelo utilizador para que este possa começar a trabalhar rapidamente; • eficiência – o sistema deve ser eficiente no uso para que, quando o utilizador conhecer tudo acerca do mesmo, seja possível uma produtividade alta; • capacidade de memorização – o sistema deve ser fácil de memorizar para que o utilizador seja capaz de voltar a trabalhar no referido sistema depois de um certo período sem o usar; • erros – o sistema deve assumir poucos erros para que os utilizadores cometam um número mínimo dos mesmos durante a utilização do sistema e, cometendo-os, que seja simples o retorno ou a sua resolução. • satisfação – o sistema deve ser agradável de usar para que os utilizadores fiquem satisfeitos enquanto trabalham.

Usabilidade: http://guspim.net/2008/02/19/o-que-e-a-usabilidade/

Glossário:

Erro: permite a interação com dispositivosincorrecção, resultado incorrecto, engano, falha no sistema.

8


I.

Usabilidade

3. Critérios Podemos destacar 8 critérios com base na ergonomia da usabilidade: • Orientação – refere-se ao conjunto de meios disponíveis para aconselhar, informar e conduzir o usuário na interação (mensagens, alarmes, rótulos);

• Carga de Trabalho – consiste no conjunto de elementos da interface que desempenham, para o usuário, um papel na redução da carga de informação e no aumento da eficiência do diálogo;

• Controle Explícito – refere-se ao controle que o usuário tem sobre a interface e, também, ao carácter explícito de suas acções;

• Adaptabilidade – refere-se à capacidade da interface reagir segundo o contexto e segundo as necessidades e preferências dos usuários; • Gestão de Erros – refere-se às possibilidades de evitar ou diminuir a ocorrência de erros e de corrigi-los;

• Homogeneidade/ Consistência – refere-se à forma nas quais as escol-

Glossário:

Interacção: relação de comunicação entre indivíduos ou grupos.

has na realização da interface (códigos, denominações, formatos, procedimentos, etc.) são conservadas idênticas, em contextos idênticos, e diferentes, em contextos diferentes;

SlideShare: http://www.slideshare.net/sergiolima/criterios-para-qualidade-interacao

9


I.

Usabilidade

3. Critérios • Significado dos Códigos – diz respeito à adequação semântica entre o objeto ou a informação apresentada e sua referência; • Compatibilidade – refere-se ao acordo que possa existir entre as características do usuário e as tarefas, de uma parte, e a organização das saídas, das entradas e do diálogo de uma dada aplicação, de outra.

Glossário:

Interface: permite a interação com dispositivos digitais através de elementos gráficos como ícones e outros indicadores visuais, em contraste a interface de linha de comando.

Interface: pessoa que vai usar o sistema para executar determinada tarefa.

SlideShare: http://www.slideshare.net/sergiolima/criterios-para-qualidade-interacao

10


I.

Usabilidade

4. Dificuldades Um website leva entre 10 a 15 segundos a atrair o utilizador, por isso todos os elementos da página precisam de ser avaliados, pesados, medidos em termos de impacto. Esse tempo leva a que seja necessário rapidamente carregar a página, sendo que este é um dos maiores factores que resulta no sucesso ou insucesso de um website. Alguns aspectos básicos para diminuir a dificuldade da usabilidade na internet: • Clareza na arquitectura da informação; • Facilidade de navegação; • Simplicidade; • A relevância do conteúdo; • Coerência; • Rapidez; • Atenção nos utilizadores.

Fig.4: Website atractivo e facilmente persuasivo. Observa-se pela clareza na arquitectura do site e pela imagem central que apela ao consumidor para uma bombástica redução de preços. Glossário:

Interface: permite a interação com dispositivos digitais através de elementos gráficos como ícones e outros indicadores visuais, em contraste a interface de linha de comando.

Interface: pessoa que vai usar o sistema para executar determinada tarefa.

http://www.seara.com/fotos/editor2/usabilidade.pdf: 6

11


I.

Usabilidade

5. Conselhos usáveis - Colocar o nome e/ou logótipo em todas páginas; - Incluir um motor de procura nos sites com mais de 100 páginas; - Cabeçalhos e títulos de página simples e sugestivos que traduzam claramente o seu conteúdo; - Muita informação e pouco texto (concisão); - Pôr a informação menos relevante em páginas secundárias com a técnica do hipertexto; - Utilizar, nas páginas principais, fotografias de produtos em tamanho reduzido (thumbnail), associando-lhe depois, um link para uma página secundária onde o utilizador possa ver, com mais pormenor, o produto desejado e outras características; - Associar a cada link um título (link title) para que os utilizadores saibam para onde vão ser encaminhados;

http://acessibilidade.seara.com/gca/?id=92

Glossário:

Interface: permite a interação com dispositivos digitais através de elementos gráficos como ícones e outros indicadores visuais, em contraste a interface de linha de comando.

Interface: pessoa que vai usar o sistema para executar determinada tarefa.

12


I.

Usabilidade

Conselhos usáveis - Garantir a acessibilidade de todas as páginas importantes a utilizadores com inaptidões, especialmente aqueles com deficiências de acuidade visual; - Actualizar conteúdos e serviços úteis constantemente; - Destacar as novidades; - Agilizar o carregamento página (páginas que demoram a carregar podem ser abandonadas antes de exibidas); - Utilizar tecnologia compatível com a maioria dos computadores (evitar utilizar tecnologias muito recentes e ainda pouco difundidas.); - Manter informação antiga quando relevante; - Evitar abuso no uso de propaganda, links e cores.

Glossário:

Interface: permite a interação com dispositivos digitais através de elementos gráficos como ícones e outros indicadores visuais, em contraste a interface de linha de comando.

Interface: pessoa que vai usar o sistema para executar determinada tarefa.

http://acessibilidade.seara.com/gca/?id=92

13


I.

Usabilidade

Notas:

14


Simplicidade na Apresentação Manter o interface simples Reduzir Excesso de informação Fornecer Configurações Padrão


II.

Simplicidade

na

Apresentação

1. Manter o interface simples [2]

[3]

[1] O interface deve ser apelativo, com menus fáceis de consultar permitindo ao utilizador facilmente escolher a opção que deseja.

[1]

[2] O layout deve ser simples e atractivo, não usando cores “berrantes” capazes de ferir a vista do utilizador.

[3] Utilizar um motor de busca na página inicial, tornará a procura bastante simples, sem ser necessário entrar em menus ou sub-menús.

Fig.6: Website com interface simples. Observa-se que possui um layout atractivo do ponto de vista visual, os menus são de fácil utilização, possui motor de busca do site . Destaca-se o contraste da tipografia com o layout do site, o que possibilita uma melhor interacção com o utilizador. Glossário: Interface: permite a interação com dispositivos digitais através de elementos gráficos como ícones e outros indicadores visuais, em contraste a interface de linha de comando.

Allen (1997): Handbook of Usability Principles, pág.12 http://olhares.aeiou.pt/

16


II.

Simplicidade

na

Apresentação

2. Reduzir excesso de Informação O facto de o utilizador no computador, só conseguir visualizar uma página de cada vez, sobrecarrega-o de informação. Para entender o conteúdo de uma página é necessário conhecer o conteúdo da página anterior, o designer deve fazer referência a esse material informativo. Essa referência pode ser feita através de ilustrações, repetições de texto, entre outras. Deve utilizar-se uma divulgação progressiva, revelando informações para usar em pequenos montantes; Ferramentas da divulgação progressiva: • janelas pop-up; • menus; • disposição hierárquica de menus. Deve ajudar-se o utilizador a fazer a decisão certa, reduzindo as escolhas possíveis. Para isso podem mostrar-se inactivas as ferramentas que não são necessárias, tornando-as transparentes.

Allen, 1997:42

Fig.7: Website com demasiado excesso de informação Uso inadequado de cores e abuso excessivo de informação

17


II.

Simplicidade

na

Apresentação

2. Fornecer configurações padrão • • •

Forneça sugestões/exemplos ao utilizador de possíveis respostas; Facilite a escolha das opções; Apresente ajuda para cada item;

Repare que normalmente o usuário, utiliza as respostas já inseridas e não as altera para uma nova resposta, contribuindo assim para uma melhor interacção entre Computador-Utilizador.

Como tornar um questionário bastante funcional: Na imagem temos: [1] Informação adicional para facilitar a compreensão do utilizador [2] Caixa de selecção múltipla [3] Ajuda do item [4] Caixa de selecção múltipla já pré-definida [5] Botão para repor as definições inicias, limpando todos os campos

Allen, 1997:23 http://signup.live.com/

Fig.8: Ficha de inscrição de novo usuário do Windows Live. O utilizador ao fazer a inscrição de novo usuário depara-se com a hipotese de poder recuar para as definiçoes padrões, o que torna o website bastante usável.

18


II.

Simplicidade

na

Apresentação

Notas:

19


Navegação e Pesquisa Utilização de botões de retroceder Atribuição de Feedback Utilização de Web Browsers Elaboração de um mapa do site


III.

Navegação e Pesquisa

1. Utilização de botões de retroceder Um factor essencial que contribui para a usabilidade é botão de retrocesso. Esconder um botão que permite ao utilizador recuar e procurar outro caminho é uma violação das regras que cria uma enorme sensação de desconforto. Retroceder uma página web ajuda o utilizador a evitar uma confusão, mostrando-lhe uma lista dos títulos das páginas que já visitou. Isto ajuda os utilizadores a perceber como chegaram aquela página web e pensar sobre onde querem ir. A opção retroceder é muito útil a utilizadores inexperientes.

Allen, 1997:34

Fig.9: Exemplo da aplicação do botão retroceder, neste caso no programa Windows Media Player. A utilização do botão retroceder no caso do Media Player, permite ao utilizador deslocar-se para uma pasta da sua bibliotecas consultadas anteriormente, ou então se estiver em modo reprodução, permite-lhe ouvir a música anterior.

21


III.

Navegação e Pesquisa

2. Atribuição de Feedback Dar oportunidade ao utilizador de responder a um questionário onde demonstre a sua opinião ajuda bastante a melhorar a página.

Questões que devem ser colocadas: • Conseguiu obter o que procurava? • Ficou satisfeito com os resultados? • Poderia ter feito algo diferente para ter sido mais eficaz? • As instruções foram claras? Compreendeu os exemplos fornecidos? • Aprendeu algo para além do que pretendia? • Voltaria a pedir ajuda? • Sentiu-se à vontade ao colocar as dúvidas? O que o faria sentir mais à vontade? • Voltaria a pedir ajuda? Fig.10: Feedback do website da Microsoft Observa-se que foi feito um questionário, de forma a saber o que o utilizador achou ao navegar no website, permitindo assim também fornecer a sua opinião para fins estatísticos. Posteriormente o feedback permite ao criador do website melhorar o que à maior parte dos utilizadores não lhe agradou.

Allen, 1997:115 http://support.microsoft.com/kb/811603/pt

22


III.

Navegação e Pesquisa

3. Utilização de Web Browsers Os navegadores podem fazer a diferença sabendo se os usuários de um sistema se sentem “perdidos” ou “desorientados” no ciberespaço.

Utilize um navegador que permita aos usuários recuar anteriormente para as páginas vistas anteriormente. A função de retroceder no browser, evita gerar confusão quando o utilizador entrar numa página sem intenção. Através da barra de Hiperligação, o utilizador apercebe-se exactamente da sua localização na Web. Outra característica dos browsers é poder aceder ao “Histórico”, ou seja, a uma lista de sites consultados a partir do mesmo computador durante uma determinada data.Esta lista de títulos é geralmente representado sob a forma de relógio no menu.

Fig.11: Mozilla Firefox - Exemplo de um Browser Um dos mais conhecidos e utilizados, Firefox permite a visualização de páginas web, procura de imagens, entre outros.

A utilização de um bom browser pode ser especialmente importante para os utilizadores novatos.

Allen, 1997:44

23


III.

Navegação e Pesquisa

4. Elaboração de um mapa do site Num bom esquema de navegação é indispensável um bom mapa do site, pois aí estão disponíveis todas as páginas do site e as relações entre elas. O mapa do site é uma espécie de índice que pode ser optimizado com um sistema de pesquisa mas nem tudo são boas notícias... Fornecer pistas gráficas como mapas e diagramas ajudam a orientação e a percepção da estrutura da própria página. Assim sendo, estes elementos resolvem um dos principais problemas do ciberespaço, a tendência do utilizador a sentir-se “perdido” e “desorientado”. Os mapas do site são muitas vezes confusos e difíceis de encontrar.

Fig.12: Exemplo de um mapa de um site Para o utilizador não se perder, cada website devia elaborar um mapa do site .Não só transmite ao utilizador um bom ambiente como também o ajuda a encontrar os tópicos pretendidos.

O mapa do site deve contextualizar o utilizador, permitindo-lhe num simples olhar saber onde está, de onde veio e para onde pode ir.

Allen, 1997:30 http://acessibilidade.seara.com/gca/?id=85

24


III.

Navegação e Pesquisa

Notas:

25


Legibilidade Construção de uma grelha de Layout Econimozar espaço com conteúdo oculto Utilizar linguagem adequada


IV. Legibilidade 1. Construção de uma grelha de layout Para dar consistência ao design / layout da sua página, deve ser utilizada uma grelha de layout. A grelha é um conjunto de linhas verticais e horizontais que definem margens, colunas e espaçamento. Uma grelha bem elaborada, apela ao sentido de união, consistência, continuidade e interactividade às páginas do website.

A grelha permite o estudo da disposição de dados, desde a hierarquia de informações, à navegação e ao seu design.

Allen, 1997:30 http://acessibilidade.seara.com/gca/?id=85

Fig.13: Grelha de apresentação de layout estruturado Como podemos observar, para um website ser funcional, deve seguir o respectivo esquema acima ilustrado.

27


IV. Legibilidade 2. Economizar espaço com conteúdo oculto Para economizar espaço no seu ecrã, os designers podem esconder o conteúdo da página em questão, mostrando apenas o tópico, sendo que a informação de apoio estaria num “hidden content“, cujo acesso pode ser feito através de menus. Esta informação apenas é mostrada se o utilizador assim o entender, o que lhe dá a oportunidade de seleccionar a informação necessária e de seu interesse.

Fig.14: WebSite com menus ocultos, tornando-se necessário clicar para aceder a sub-menús.

Allen, 1997:50 http://www.sapo.pt/

28


IV. Legibilidade 3. Utilizar linguagem cuidada •

Os utilizadores acham que é mais fácil ler e entender um texto se as palavras utilizadas forem concretas, ao invés de ideias abstractas. Por exemplo, poema é uma palavra concreta enquanto poesia já é um nome abstracto.

Palavras abstractas resultam, normalmente, numa escrita confusa. Palavras e conceitos concretos são mais fáceis de entender, uma vez que possibilitam a criação de uma imagem mental no utilizador. Imagens mentais fortes facilitam a utilização de conceitos previamente adquiridos pelo utilizador.

Estas ajudam também o utilizador a estabelecer uma relação entre os conceitos mais antigos e aqueles que adquire no momento.

Deve ser usado um vocabulário familiar e perceptível por todos para que a compreensão seja uma constante em todos que analisem o texto. Sempre que possível acompanhar a informação por imagens, só será benéfico à compreensão e atracção da leitura.

Allen, 1997:62

29


IV. Legibilidade Notas:

30


Apresentação de Dados Apresentar Gráficos Simples Escolha de gráficos 3D


V.

Apresentação de Dados

1. Apresentar Gráficos Simples

Na utilização de gráficos, por exemplo, é imprescindível a utilização de uma escala e deve evitar-se a recorrência a gráficos tridimensionais. Em relação a mapas, não devem ser a utilizadas combinações de cor que não correspondam à realidade.

Os gráficos não devem apresentar mais de quatro linhas, num único grupo de coordenadas.

Se pretende que seja visto mais de quatro conjuntos de dados, seleccione agrupamentos lógicos de informações e construa vários gráficos que contenham esses subconjuntos.

Allen, 1997:118 http://economia.uol.com.br/cotacoes/

Fig.16: Exemplo de um gráfico de cotações da economia .

32


V.

Apresentação de Dados

2. Escolha de Gráficos 3D •

Deve evitar-se o uso de gráficos a 3 dimensões, porque estes, dando a aparência de profundidade tornam o gráfico mais difícil de interpretar e aumenta a probabilidade de erros.

O Utilizador apela mais para a estética do gráfico, do que para o próprio resultado conseguido, perdendo assim valor a sua utilização

Fig.17: Gráfico Tridimensional Exemplo de um gráfico a 3 dimensões, que do ponto de vista da usabilidade é pouco usável.

Allen, 1997:127-136 http://www.useit.com/alertbox/20050425.html

33


V.

Apresentação de Dados

Notas:

34


Layout Apresentar uma homepage funcional Avaliar resolução dos monitores Usar cabeçalhos e rodapés Cor


VI. Layout 1. Apresentar uma Homepage Funcional A homepage ou casa, é identificada como a página inicial e a mais importante de um website. Esta é a página que faz espelhar e dá a conhecer a filosofia subjacente ao mesmo. A aplicação do sentido de estética não pode ser desprezada. Se o website for muito funcional ou bem estruturado mas não cativar a atenção do utilizador, ele sentir-se-á pouco interessado em visitá-lo. Mas o sentido de estética desenvolvido pelo designer não pode ser um contributo para dificuldade de acesso ao site. A boa estrutura da homepage, ajuda o utilizador a permanecer e visitar o website. As páginas de entrada ou “splash screen” como podem ser designadas, além de possibilitar a entrada no website ao utilizador, não possuem qualquer outra importância para o funcionamento do website.

Fig.18: Homepage Usável Repare-se que a homepage além de possui um layout moderno, com cores escuras e degradês no fundo, também possui uma espécie de menú na parte inferior.Podemos dizer mesmo que espelha um layout futurista.

Estatísticas comprovam que as funcionalidades que as páginas de entrada oferecem são irrelevantes.

Allen, 1997:16/17 http://www.cooliris.com/

36


VI. Layout 2. Avaliar resolução dos monitores •

As dimensões que o website pode ter são inúmeras. O layout pode ter a largura e a altura que se pretender dependendo da funcionalidade que pretende alcançar.

Um layout que apresente uma medida de 753pt de largura, não pode ser apresentado num ecrã que utilize 800x600px na visualização.

Ao desenvolver a uma página o designer deve ter em atenção a resolução em média utilizada.

Todos estes aspectos devem de ser estudados e analisados para que seja possível todos os utilizadores consultarem a página.

Allen, 1997:14

Fig.19: Website com resolução impropria A escolha da resolução é imprópria, pois o layout nao acompanho o aumento da janela do browser, mantendo sempre um espaço na lateral direita.Torna-se num website não funcional, do ponto de vista de usabilidade, pois o tamanho devia ser dividido por ambas as laterais.

37


VI. Layout 3. Usar cabeçalhos e rodapés Para reduzir o esforço mental do utilizador, especialistas recomendam que uma página web seja dividida em 3 partes: cabeçalho, rodapé e conteúdo principal. Orientações para criar cabeçalhos: 1. Cada página web deve ter um título de tag HTML descritivo; 2. Usar um texto base para o cabeçalho e gráfico personalizado;

Fig.20: Exemplo de possiveis cabeçalhos Aqui estão alguns exemplo de possíveis cabeçalhos de multipla escolha de menus.

Allen, 1997:37

38


VI. Layout 4. Cor Utilizar cores ajuda a estruturar o conteúdo e a guiar o utilizador no mesmo. Investigadores sugerem o uso de no máximo 5 cores para: • Melhorar a “personalidade” das diferentes áreas; • Distinguir entre os diferentes tipos de informação; • Estabelecer a relação entre as peças de informação; • Destacar mensagens importantes ou críticas; • Ajudar o utilizador a compreender páginas complexas; Fig.21: Escala de Cores (Pantone) A imagem demonstra o elevado número de cores possiveis de serem escolhidas para compor o layout de um determinado Website.

Allen, 1997:52

39


VI. Layout Notas:

40


Ajuda Fornecer ou sugerir Ajuda


VII. Ajuda 1. Fornecer ou sugerir Ajuda Caso o utilizador necessite de ajuda, essa pode ser providenciada em diversos suportes: • Suporte On-line – fornecer bibliotecas com despistagem de problemas e pesquisa. • Forum On-line – Permitir o utilizador efectuar as suas questões num forum devidamente estruturado e providenciar a resposta. • Suporte Multimédia – fornecer um CDROM com despistagem de problemas e pesquisa para utilizadores habituais. • Suporte telefónico – Estar disponível via telefone para um rápido esclarecimento.

Allen, 1997:83,85,90 http://www.ikea.com/pt/pt/

Fig.22: Ajuda Online do Website da Ikea Exemplo de um website onde possui uma área reservada para obter qualquer tipo de ajuda, através de um chat onde o utilizador insere a questão e posteriormente sabe a resposta.

42


VII. Ajuda Notas:

43


Testes de Usabilidade O que s達o? Sistemas Funcionais Sistemas N達o Funcionais


VIII.Testes de Usabilidade 1. O que são? Um teste de usabilidade visa medir, valorizar a usabilidade do site. Eis algumas coisas que são passíveis de medir num teste de usabilidade: - Tempo que leva a complementar uma tarefa; - Tempo que leva a completar a tarefa dois dias mais tarde; - Número de enganos por tarefa; - Número de enganos por minuto; - Número de utilizadores a cometer o mesmo erro. •

São testes que permitem avaliar o grau de facilidade de uso e satisfação do usuário em relação aos menus

Permitem também Identificar dificuldades e problemas de interface e interação em tipos diferentes de menus

Esta é a única forma de sabermos se a nossa aplicação ou websitecorresponde às expectativas e necessidades dos utilizadores identificadas anteriormente.

http://acessibilidade.seara.com/gca/?id=94

Fig.23: Testando a usabilidade Observamos um conjunto de várias pessoas a fazer um estudo de páginas Web, relativamente à sua usabilidade. Para tal, têm em conta aspectos como layout e interface, tipografia utilizada, imagens e fazem a relação com o conteúdo.

45


VIII.Testes de Usabilidade 2. Sistemas Funcionais

Aqui está um bom exemplo de condução do Olhar:

http://www.seara.com/fotos/editor2/usabilidade.pdf

46


VIII.Testes de Usabilidade 2. Sistemas Funcionais

Bom design, menus interactivos com imagens como referência,

Visualização imadiata do pretendido,

Fundo escuro, contrastando com a maior parte da tipografia

Logotipo sempre presente, cabeçalhos, rodapés bastante funcionais

https://www.bwin.com/pt/sportsbook.aspx

47


VIII.Testes de Usabilidade 3. Sistemas Não Funcionais

Aqui está um mau exemplo porque o olhar da mulher não se dirige para lado nenhum

É de reparar que com o menu ao lado, aumentaria a legibilidade do site, tornando-o mais funcional.

http//www.multiopticas.com

48


VIII.Testes de Usabilidade 3. Sistemas Não Funcionais

Demasiada informação, impossibilitando assim identificar o que se pretende do site.

http://www.ivogomes.com/apresentacoes/solucoes-web-centradas-no-utilizador.pdf

49


VIII.Testes de Usabilidade Notas:

50


Bibliografia Referências Bibliográficas


IX.

Bibliografia

1. ReferĂŞncias BibliogrĂĄficas

Brock S. Allen & Steven L. Eckols, Handbook of Usability Principles (1997). Center for learning, Instruction, & Performance Technologies San Diego State University http://www.seara.com/fotos/editor2/usabilidade.pdf http://www.slideshare.net/wudrs/palestra-usabilidade-conceito-aplicaes-e-testes-de-renato-rosa http://www.useit.com/alertbox

52


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.