O documento discute princípios de usabilidade na internet, incluindo a importância de facilitar o uso, princípios de design de interface e avaliação de usabilidade. Aborda também técnicas para melhorar a organização da informação e divulgação de conteúdos online de forma a promover uma melhor experiência do usuário.

1. Usabilidade Tecnologias Dinâmicas para a Internet 1

2. Grupo 5 2 Fábio Santos | 38156 Jessica Simões | 38732 KarolinaGonzalez | 48513 Ricardo Marques | 35725 Universidade de Aveiro 09

3. USABILIDADE = FACILIDADE DE USO

4. Facilidade de uso é obter afirmações... ...e não interrogações! Boa Navegabilidade. Alcance de objectivos de forma eficaz, eficiente e simples.

5. Princípios Usabilidade

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

7. REGRAS

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

9. QUESTÕES

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

11. Vantagens| Desvantagens

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

13. 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;

14. Avaliação de Usabilidade

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

16. Metodologias

17. Categorização dos métodos e testes de usabilidade - Dixet al. (1998, pp. 405-435) apresentam uma divisão hierárquica; - BenShneiderman (1998, pp. 124-151) apresenta uma visão mais linear; - Apesar desta diferença, ambos Dixet al. e Shneiderman discutem técnicas e métodos semelhantes.

18. Heurísticas

19. (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

20. COERÊNCIA DA NAVEGAÇÃO

21. PRINCIPIOS BÁSICOS

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

23. DESENHO DE INTERFACE

24. CONVENÇÕES

25. WIREFRAME

26. DIRECTIVAS

27. 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;

28. INFORMAR OBJECTIVO DO SITE

29. CONTEÚDO

30. ARQUIVO / ACESSO A CONTEÚDO ANTERIOR

31. LINKS

32. NAVEGAÇÃO

33. PESQUISA

34. ATALHOS

35. IMAGENS E ANIMAÇÕES - I

36. IMAGENS E ANIMAÇÕES - II

37. DESIGN GRÁFICO - I

38. DESIGN GRÁFICO - II

39. DESIGN GRÁFICO - III

40. COMPONENTES DE INTERFACE COM O UTILIZADOR

41. TÍTULOS DE JANELAS

42. URL’S – BONS EXEMPLOS

43. URL’S – MAUS EXEMPLOS

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

45. PUBLICIDADE - I

46. COMUNICAR PROBLEMAS / EMERGÊNCIAS

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

48. OBTENÇÃO DE DADOS DO CLIENTE Aquando de um registo explicar ao cliente as suas vantagens; Não fornecer links de registo na homepage;

49. EXEMPLOS A EVITAR

53. Boas práticas por linguagem Inovar SIM! Mas com modos… 53

54. 54 Loading… Boring Passados10segundos Resultado: Backspace

55. Dicas Saber o que o utilizador quer Definir bem objectivo do site Não descuidar na usabilidade 55

56. Organização da informação 56

57. Organização da informação 57 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 58

59. Organização da informação hierarquicamente 59

60. Organização da informação Poli-hierarquicamente 60

61. Organização da informação Em rede 61

62. Disposição dos conteúdos 62

63. 63 Disposição dos conteúdos Alfabética

64. Disposição dos conteúdos Cronológica 64

65. Disposição dos conteúdos Geográfica 65

66. Disposição dos conteúdos 66 Miscelânea

67. Disposição dos conteúdos 67 Tarefa

68. Disposição dos conteúdos Público-alvo 68

69. Disposição dos conteúdos 69 Tag Cloud

70. Usabilidade Conteúdos 70

71. O título é o elemento mais importante! 71

72. Um bom título: Rico e conciso Deverá conter as palavras-chave Confirmar a informação que se segue Não revelar tudo 72

73. O sumário é o segundo elemento mais importante! 73

74. O sumário deve: Conter os principais pontos Não fornecer todas as informações 74

75. Textos Pouco texto Colunas estreitas Espaços em branco 75

76. Divulgação de conteúdos 76

77. Media Display e Rich Media Search Engine Marketing Pay-Per-Click E-mail Marketing Redes sociais virtuais Link Building Custo por Mil Impressões Custo por Acção Media tradicionais 77

78. 1. Media Display e Rich Media São constituídos por banners . Constituídos por uma mensagem e um estímulo para clicar. 78

79. 2. SearchEngine Marketing (SEM) Tem como objectivo obter o melhor posicionamento dos Websites nos resultados naturais ou orgânicos dos motores de pesquisa. 79

80. 2. SearchEngine 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 80

81. 3. Pay-Per-Click (PPC) O anunciante apenas paga por cada clique efectuado no anúncio. Vantagens Visitantes qualificados para o Website Resultados imediatos Fácil e rápido de implementar A campanha segmentada ao público-alvo Desvantagens As 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 81

82. 4. Email Marketing Marketingonline 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 -Corrigirerrosque ocorram (e-mails considerados spam, e-mails inválidos, utilizadores não identificados, etc.) 82

83. 5. Redes sociais virtuais TwitterTwittad FacebookFacebookAds YoutubeBrandChannelMasthead Video Banner Boas práticas Planos diferentes para cada rede virtual Criar vinculações marca-cliente 83

84. 6. Link Building 84 Boas práticas Escrever e distribuirartigosoriginaisna 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 85 8. Custo por Acção O 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: emissorreceptor Receptor passivo Envolve gastos elevados Media Online Sentido da comunicação: emissor receptor Receptor activo Pode não envolver gastos Comunicação e informação em tempo real Selectividade 86

87. Web semântica 3.0 87 máquina inteligente

88. Toda a linguagem tem sintaxe e semântica 88

89. Sintaxe estuda a gramática 89

90. Semânticaestuda o significado 90

91. O Problema 91

92. Páginas web são feitas em html 92

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

94. Computadores comunicam por números 101010101101010110100100101010101010100101001010101010011001010010111110110101110101010100110010111110001010011101010101001010 94

95. Pessoas comunicam por palavras Bidé corvina pesmacwindows frango chuveiro aroma catinga amor odeio paixão comer chorar jogar brincar ajax flash comunicar aritmética matemática português 95

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

97. Poderão “entender” o que nos interessa Poderão ajudar-nos a encontrar o que queremos Maior Usabilidade 97

98. 98

99. Meta-informação 99

100. Estruturas de dados sobre os próprios dados, uma breve descrição do conteúdo da página 100

101. Dicas Tagssimples e concisas Prioridade às palavras-chave mais importantes Evite o uso da meta tagREFRESH Nãoabuse das meta tags Para o Google, elas não existem 101

102. MICROFORMATOS 102

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

104. Vantagens Providenciam uma maneira estandardizada e fácil de catalogar os conteúdos Por ser opensource, 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 104

105. EXEMPLOS Hcard hCalendar Geo Entre outros 105

106. OBRIGADO PELA ATENÇÃO 106