UsabilidadeTecnologias Dinâmicas para a Internet

1

2

Grupo 5

Universidade de Aveiro 09

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

USABILIDADE = FACILIDADE DE USO

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

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

Boa Navegabilidade.

Alcance de objectivos de forma

eficaz, eficiente e simples.

Princípios Usabilidade

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

REGRAS

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

QUESTÕES

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

Vantagens | Desvantagens

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

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;

Avaliação de 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)

Metodologias

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.

Heurísticas

(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

COERÊNCIA DA NAVEGAÇÃO

PRINCIPIOS BÁSICOS

• 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);

DESENHO DE INTERFACE

CONVENÇÕES

WIREFRAME

DIRECTIVAS

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;

INFORMAR OBJECTIVO DO SITE

CONTEÚDO

ARQUIVO / ACESSO A CONTEÚDO ANTERIOR

LINKS

NAVEGAÇÃO

PESQUISA

ATALHOS

IMAGENS E ANIMAÇÕES - I

IMAGENS E ANIMAÇÕES - II

DESIGN GRÁFICO - I

DESIGN GRÁFICO - II

DESIGN GRÁFICO - III

COMPONENTES DE INTERFACE COM O UTILIZADOR

TÍTULOS DE JANELAS

URL’S – BONS EXEMPLOS

URL’S – MAUS EXEMPLOS

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);

PUBLICIDADE - I

COMUNICAR PROBLEMAS / EMERGÊNCIAS

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);

OBTENÇÃO DE DADOS DO CLIENTE

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

• Não fornecer links de registo na homepage;

EXEMPLOS A EVITAR

53

Boas práticas por linguagem

Inovar SIM!

Mas com modos…

54

Resultado: Backspace

Passados10segundos

Loading… Boring

55

Dicas

Saber o que o utilizador quer

Definir bem objectivo do site

Não descuidar na usabilidade

56

Organização da informação

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

58

Organização da informação

Linear

59

Organização da informação

hierarquicamente

60

Organização da informação

Poli-hierarquicamente

61

Organização da informação

Em rede

62

Disposição dos conteúdos

63

Disposição dos conteúdos

Alfabética

64

Disposição dos conteúdos

Cronológica

65

Disposição dos conteúdos

Geográfica

66

Disposição dos conteúdos

Miscelânea

67

Disposição dos conteúdos

Tarefa

68

Disposição dos conteúdos

Público-alvo

69

Disposição dos conteúdos

Tag Cloud

70

Usabilidade Conteúdos

71

O título é o elemento mais importante!

72

Um bom título:

Rico e conciso

Deverá conter as palavras-chave

Confirmar a informação que se segue

Não revelar tudo

73

O sumário é o segundo elemento mais importante!

74

O sumário deve:

Conter os principais pontos

Não fornecer todas as informações

75

TextosPouco texto

Colunas estreitas

Espaços em branco

76

Divulgação de conteúdos

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

78

1. Media Display e Rich Media

São constituídos por banners .

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

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.

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

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

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.)

83

5. Redes sociais virtuaisTwitter

Twittad

FacebookFacebook Ads

YoutubeBrand ChannelMasthead Video Banner

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

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

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.

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

87

Web semântica 3.0 máquina inteligente

88

Toda a linguagem tem sintaxe e semântica

89

Sintaxe estuda a gramática

90

Semântica estuda o significado

91

O Problema

92

Páginas web são feitas em html

93

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

94

Computadores

comunicam por números

101010101101010110100100101010101010100101001010101010011001010010111110110101110101010100110010111110001010011101010101001010

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

96

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

97

Poderão “entender” o que nos interessa

Poderão ajudar-nos a encontrar o que queremos

Maior Usabilidade

98

99

Meta-informação

100

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

da página

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

102

MICROFORMATOS

103

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

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

105

EXEMPLOS

HcardhCalendarGeoEntre outros

106

OBRIGADO PELA ATENÇÃO