106
Usabilidade Tecnologias Dinâmicas para a Internet 1

USABILIDADE

Embed Size (px)

DESCRIPTION

Trabalho sobre usabilidade para a universidade de Aveiro.

Citation preview

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