USABILIDADE.

106
Usabilidade Tecnologias Dinâmicas para a Internet 1

description

Trabalho sobre usabilidade para a universidade de Aveiro.

Transcript of USABILIDADE.

Page 1: USABILIDADE.

UsabilidadeTecnologias Dinâmicas para a Internet

1

Page 2: USABILIDADE.

2

Grupo 5

Universidade de Aveiro 09

Fábio Santos | 38156Jessica Simões | 38732Karolina Gonzalez | 48513Ricardo Marques | 35725

Page 3: USABILIDADE.

USABILIDADE = FACILIDADE DE USO

Page 4: USABILIDADE.

Facilidade de uso é obter afirmações...

...e não interrogações!

Boa Navegabilidade.

Alcance de objectivos de forma

eficaz, eficiente e simples.

Page 5: USABILIDADE.

Princípios Usabilidade

Page 6: USABILIDADE.

Aprendizagem | Eficiência | Memorização | Erros | Satisfação

Page 7: USABILIDADE.

REGRAS

Page 8: USABILIDADE.

Clareza na arquitectura da informação

Facilidade de navegação

Simplicidade

A relevância do conteúdo

Coerência

Rapidez

Foco na experiência do usuário

Page 9: USABILIDADE.

QUESTÕES

Page 10: USABILIDADE.

Questões com foco no utilizador

(o que um utilizador não deverá perguntar)

Questões com foco no criador

Missão do site

Público Alvo

Page 11: USABILIDADE.

Vantagens | Desvantagens

Page 12: USABILIDADE.

Vantagens

Satisfaz o utilizador que visite o site

Permite que o utilizador encontre o que procura (ler, comprar, jogar, etc.)

Aquisição de fealdade do utilizador ao site

Page 13: USABILIDADE.

Desvantagens

Não ajuda o utilizador na procura de informação;

Causa frustração ao utilizador por não obter o que procura;

Perda do utilizador para a concorrência;

Page 14: USABILIDADE.

Avaliação de Usabilidade

Page 15: USABILIDADE.

Aspectos

(1) Avaliar a extensão das funcionalidades de um sistema

(2) Avaliar os efeitos da interface no utilizador

(3) Identificar eventuais problemas específicos no sistema

Dix et al.’s (1998, pp. 406-407)

Page 16: USABILIDADE.

Metodologias

Page 17: USABILIDADE.

Categorização dos métodos e testes de usabilidade

- Dix et al. (1998, pp. 405-435) apresentam uma divisão hierárquica;

- Ben Shneiderman (1998, pp. 124-151) apresenta uma visão mais linear;

- Apesar desta diferença, ambos Dix et al. e Shneiderman discutem técnicas e métodos semelhantes.

Page 18: USABILIDADE.

Heurísticas

Page 19: USABILIDADE.

(1) Viabilidade do estado do sistema

(2) Consistência entre o sistema e o mundo real

(3) Controle e liberdade para o usuário

(4) Consistência e padrões

(5) Prevenção de erros

(6) Reconhecimento em vez de lembrança

(7) Flexibilidade e eficiência de uso

(8) Desenho estético e minimalista

(9) Auxílio no reconhecimento, no diagnóstico e na recuperação de erros

(10) Ajuda e documentação

Page 20: USABILIDADE.

COERÊNCIA DA NAVEGAÇÃO

Page 21: USABILIDADE.

PRINCIPIOS BÁSICOS

Page 22: USABILIDADE.

• Apresentar claramente a navegação principal ou global;

• Acesso claro e rápido para a página inicial ;

• Explorar a utilização de cabeçalhos e rodapés;

• Usar com cautela gráficos como parte da navegação;

• Manter a consistência na selecção de cores atribuídas às ligas e

páginas visitadas;

• Ajudar o utilizador quanto à sua localização no site (breadcrumb);

Page 23: USABILIDADE.

DESENHO DE INTERFACE

Page 24: USABILIDADE.

CONVENÇÕES

Page 25: USABILIDADE.

WIREFRAME

Page 26: USABILIDADE.

DIRECTIVAS

Page 27: USABILIDADE.

BOAS VINDAS

• Não oferecer "Boas Vindas" ou "Bem-Vindo" no site;

• Utilizar o espaço de "Boas Vindas"/"Bem-Vindo" para publicar um slogan ou logótipo referente ao site;

Page 28: USABILIDADE.

INFORMAR OBJECTIVO DO SITE

Page 29: USABILIDADE.

CONTEÚDO

Page 30: USABILIDADE.

ARQUIVO / ACESSO A CONTEÚDO ANTERIOR

Page 31: USABILIDADE.

LINKS

Page 32: USABILIDADE.

NAVEGAÇÃO

Page 33: USABILIDADE.

PESQUISA

Page 34: USABILIDADE.

ATALHOS

Page 35: USABILIDADE.

IMAGENS E ANIMAÇÕES - I

Page 36: USABILIDADE.

IMAGENS E ANIMAÇÕES - II

Page 37: USABILIDADE.

DESIGN GRÁFICO - I

Page 38: USABILIDADE.

DESIGN GRÁFICO - II

Page 39: USABILIDADE.

DESIGN GRÁFICO - III

Page 40: USABILIDADE.

COMPONENTES DE INTERFACE COM O UTILIZADOR

Page 41: USABILIDADE.

TÍTULOS DE JANELAS

Page 42: USABILIDADE.

URL’S – BONS EXEMPLOS

Page 43: USABILIDADE.

URL’S – MAUS EXEMPLOS

Page 44: USABILIDADE.

JANELAS POP-UP / JANELAS INTERMÉDIAS- III

• Evitar Janelas intermediárias aquando o digitar do URL pelo utilizador;

• O URL deve redireccionar o utilizador para a página inerente ao URL digitado;

• Evitar Janelas de Pop-up (omitem a homepage, são confundidas com publicidade, dificultam a navegação a utilizadores inexperientes ou com dificuldades motoras);

Page 45: USABILIDADE.

PUBLICIDADE - I

Page 46: USABILIDADE.

COMUNICAR PROBLEMAS / EMERGÊNCIAS

Page 47: USABILIDADE.

ACTUALIZAÇÃO DE PÁGINAS

• Não actualizar a homepage automaticamente (provoca a perda de atenção e interesse do utilizador caso este esteja a visualizar algum conteúdo no momento de actualização);

• Aquando de uma actualização, não modificar conteúdo que não foi modificado, actualizar apenas acrescentando novo conteúdo ou aquele que foi modificado (ex: actualizações de notícias num jornal online);

Page 48: USABILIDADE.

OBTENÇÃO DE DADOS DO CLIENTE

• Aquando de um registo explicar ao cliente as suas vantagens;

• Não fornecer links de registo na homepage;

Page 49: USABILIDADE.

EXEMPLOS A EVITAR

Page 50: USABILIDADE.
Page 51: USABILIDADE.
Page 52: USABILIDADE.
Page 53: USABILIDADE.

53

Boas práticas por linguagem

Inovar SIM!

Mas com modos…

Page 54: USABILIDADE.

54

Resultado: Backspace

Passados10segundos

Loading… Boring

Page 55: USABILIDADE.

55

Dicas

Saber o que o utilizador quer

Definir bem objectivo do site

Não descuidar na usabilidade

Page 56: USABILIDADE.

56

Organização da informação

Page 57: USABILIDADE.

57

Organização da informação

Dividir a informação em unidades lógicas.

Estabelecer uma hierarquia por ordem de importância e

generalidade.

Usar esta hierarquia para estabelecer relações entre trecho de

informação

Page 58: USABILIDADE.

58

Organização da informação

Linear

Page 59: USABILIDADE.

59

Organização da informação

hierarquicamente

Page 60: USABILIDADE.

60

Organização da informação

Poli-hierarquicamente

Page 61: USABILIDADE.

61

Organização da informação

Em rede

Page 62: USABILIDADE.

62

Disposição dos conteúdos

Page 63: USABILIDADE.

63

Disposição dos conteúdos

Alfabética

Page 64: USABILIDADE.

64

Disposição dos conteúdos

Cronológica

Page 65: USABILIDADE.

65

Disposição dos conteúdos

Geográfica

Page 66: USABILIDADE.

66

Disposição dos conteúdos

Miscelânea

Page 67: USABILIDADE.

67

Disposição dos conteúdos

Tarefa

Page 68: USABILIDADE.

68

Disposição dos conteúdos

Público-alvo

Page 69: USABILIDADE.

69

Disposição dos conteúdos

Tag Cloud

Page 70: USABILIDADE.

70

Usabilidade Conteúdos

Page 71: USABILIDADE.

71

O título é o elemento mais importante!

Page 72: USABILIDADE.

72

Um bom título:

Rico e conciso

Deverá conter as palavras-chave

Confirmar a informação que se segue

Não revelar tudo

Page 73: USABILIDADE.

73

O sumário é o segundo elemento mais importante!

Page 74: USABILIDADE.

74

O sumário deve:

Conter os principais pontos

Não fornecer todas as informações

Page 75: USABILIDADE.

75

TextosPouco texto

Colunas estreitas

Espaços em branco

Page 76: USABILIDADE.

76

Divulgação de conteúdos

Page 77: USABILIDADE.

77

1. Media Display e Rich Media

2. Search Engine Marketing

3. Pay-Per-Click

4. E-mail Marketing

5. Redes sociais virtuais

6. Link Building

7. Custo por Mil Impressões

8. Custo por Acção

9. Media tradicionais

Page 78: USABILIDADE.

78

1. Media Display e Rich Media

São constituídos por banners .

Constituídos por uma mensagem e um estímulo para clicar.

Page 79: USABILIDADE.

79

2. Search Engine Marketing (SEM)

Tem como objectivo obter o melhor posicionamento dos

Websites nos resultados naturais ou orgânicos dos motores de pesquisa.

Page 80: USABILIDADE.

80

2. Search Engine Marketing (SEM)

Boas práticas:

Título sucinto e coerente com o conteúdo

Palavra-chave que melhor caracteriza o site

Palavras-chave mais específicas obtém um melhor posicionamento

Uma boa estratégia de SEO

Page 81: USABILIDADE.

81

3. Pay-Per-Click (PPC)

O anunciante apenas paga por cada clique efectuado no anúncio.

VantagensVisitantes qualificados para o WebsiteResultados imediatosFácil e rápido de implementarA campanha segmentada ao público-alvo

DesvantagensAs fraudes! Podem acontecer quando uma pessoa ou um script automático imitam um utilizador normal da Web e o anúncio é clicado vezes sem conta

Page 82: USABILIDADE.

82

4. Email Marketing

Marketing online directo para comunicação comercial ou campanhas de sensibilização.

Boas práticas-Personalização do e-mail

-Medir resultados, calendarizar as acções efectuadas

-Segmentar muito bem o público-alvo

-Informação bastante clara e objectiva acima de tudo

-Corrigir erros que ocorram (e-mails considerados spam, e-mails inválidos, utilizadores não identificados, etc.)

Page 83: USABILIDADE.

83

5. Redes sociais virtuaisTwitter

Twittad

FacebookFacebook Ads

YoutubeBrand ChannelMasthead Video Banner

Boas práticasPlanos diferentes para cada rede virtualCriar vinculações marca-cliente

Page 84: USABILIDADE.

84

6. Link Building

Boas práticasEscrever e distribuir artigos originais na Web

Escrever e publicar comunicados de imprensa na Web

Ter o site bem optimizado

Page 85: USABILIDADE.

85

7. Custo por Mil Impressões

O utilizador paga por 1000 vezes que o anúncio for

publicado independentemente de ser clicado ou não

8. Custo por AcçãoO utilizador paga quando o utilizador cumpre uma tarefa pré definida, como por exemplo a conclusão do formulário de venda.

Page 86: USABILIDADE.

86

9. Media Tradicionais

Sentido da comunicação: emissor receptorReceptor passivoEnvolve gastos elevados

Media OnlineSentido da comunicação: emissor receptor

Receptor activoPode não envolver gastos

Comunicação e informação em tempo realSelectividade

Page 87: USABILIDADE.

87

Web semântica 3.0 máquina inteligente

Page 88: USABILIDADE.

88

Toda a linguagem tem sintaxe e semântica

Page 89: USABILIDADE.

89

Sintaxe estuda a gramática

Page 90: USABILIDADE.

90

Semântica estuda o significado

Page 91: USABILIDADE.

91

O Problema

Page 92: USABILIDADE.

92

Páginas web são feitas em html

Page 93: USABILIDADE.

93

HTML trata da estrutura(sintaxe) da informação e não da semântica!

Page 94: USABILIDADE.

94

Computadores

comunicam por números

101010101101010110100100101010101010100101001010101010011001010010111110110101110101010100110010111110001010011101010101001010

Page 95: USABILIDADE.

95

Pessoas comunicam

por palavras

Bidé corvina pes mac windows frango chuveiro aroma catinga amor odeio paixão comer chorar jogar brincar ajax flash comunicar aritmética matemática português

Page 96: USABILIDADE.

96

Se os computadores entenderem as letras por trás dos números

Page 97: USABILIDADE.

97

Poderão “entender” o que nos interessa

Poderão ajudar-nos a encontrar o que queremos

Maior Usabilidade

Page 98: USABILIDADE.

98

Page 99: USABILIDADE.

99

Meta-informação

Page 100: USABILIDADE.

100

Estruturas de dados sobre os próprios dados, uma breve descrição do conteúdo

da página

Page 101: USABILIDADE.

101

Dicas

Tags simples e concisas

Prioridade às palavras-chave mais importantes

Evite o uso da meta tag REFRESH

Não abuse das meta tags

Para o Google, elas não existem

Page 102: USABILIDADE.

102

MICROFORMATOS

Page 103: USABILIDADE.

103

Simples convenções para agregar a semântica ao HTML

Page 104: USABILIDADE.

104

Vantagens

Providenciam uma maneira estandardizada e fácil de catalogar os conteúdos

Por ser open source, facilitam o desenvolvimento de ferramentas

Ligação entre o conteúdo online e aplicações como o Outlook ou iCal

Dotam o conteúdo de significado para as máquinas

Poupam tempo e esforço ao utilizador, logo aumentam a usabilidade

Page 105: USABILIDADE.

105

EXEMPLOS

HcardhCalendarGeoEntre outros

Page 106: USABILIDADE.

106

OBRIGADO PELA ATENÇÃO