Interfaces Pessoa- Máquina

Transcrição

1 Interfaces Pessoa- Máquina Marielba Silva de zacarias Fct I, Gab Padrões de desenho para a web Referências: 1. The Design of Sites, Cap. 1, 4 e 5, D. Duyne, J. Landay, J. Hong 2. hop:// Jakob Nielsen 3. Introdução ao desenho de interfaces, M. Fonseca, P. Campos, D. Gonçalves

2 Sumário Padrões de desenho Web Home pages 6 regras de uma boa home page Carrinho de compras Personalização de home pages Acessibilidade Padrões de desenho visual 2

3 Como codificar boas prá\cas de desenho? Maioria dos exemplos da literatura de IPM são crí\cas a desenhos Norman, Nielsen e cia. Desenho é sobre encontrar soluções Mas designers normalmente reinventam Di`cil saber soluções anteriores Complicado reu\lizar soluções específicas 3

4 Solução: usar padrões de desenho Emergem da forma como interagimos com o mundo à nossa volta Usados pela primeira vez em arquitectura [Alexander 77] Adaptados em eng. de sodware Ver Design PaOerns, Sodware Architectures Comunicam problemas de desenho e respec\vas soluções Nem demasiado genéricos Demasiado específicos 4

5 Padrões de desenho Web Podemos fazer o mesmo em Web Design Isto é: Comunicar problemas de desenho e respec<vas soluções 5

6 Categorias de Padrões Navegação Es\lo de escrita Arranjo (Layout) Homepages Acesso rápido Consistência Personalização Acessibilidade Pesquisa Navegação pelo conteúdo Marca Self- service Apoio ao e- commerce Métodos e- merchandising Oferecer ajuda Polí\ca de confidencialidade Localização Compa\bilidade 6

7 Home page Página por onde passa a maioria dos visitantes Se não for apela<va, ninguém se dará ao trabalho de visitar o resto do vosso local Milhões de visitantes saem depois de visitar a homepage 7

8 Homepage Deve seduzir os visitantes, mas.. 8

9 Padrões para a Homepage 1 Primeira impressão posi<va 2 Focar num tópico principal 3 Construir uma imagem de marca 4 Facilitar navegação 5 Atrair visitas a regressar 6 Tornar carregamento rápido 9

10 1 Primeira impressão posi\va 10

11 2 Focar num tópico principal 11

12 3 Construir uma imagem de marca Conteúdo da página

13 4 Facilitar a navegação 13

14 5 Atrair visitantes a regressar Não usem introduções animadas Conteúdo relevante, suficiente e actualizado Randomizar ou ciclar Mostrar o que está na moda Permi\r par\cipação dos u\lizadores Métodos pull e push Facilitar Bookmarking Oferecer vantagens substan\vas aos membros Personalizar URL dropping Refs e recomendações Medir o nº de visitas 14

15 4 Atrair visitantes

16 6 Tornar carregamento rápido Lei dos 10 seg Yahoo! 30K texto 100K gráficos Google 3K texto 8K gráficos CNN razoavelmente rápida 16

17 Mais padrões Baseados na experiência off- line Comércio electrónico Carrinho de compras Caixa registadora (checkout) 17

18 Carrinho de compras Problema Permi\r que os u\lizadores comprem múl\plos itens numa única transacção Solução: metáfora do carrinho de compras 18

19 Carrinho de compras Selecciona- se para comprar sem ter que pagar imediatamente com possibilidade de Visualizar a lista de productos seleccionados re\rar qualquer producto seleccionado Pagamento único para o grupo de itens seleccionados 19

20 Carrinho de compras Descrição com elo para ver detalhes do producto Disponibilidade Sub-total Preço e desconto Modo de retirar 20 Quantidade com modo de alterar

21 Carrinho de Compras Carrinho acesível no topo de todas as paginas Continuar as compras Pagar 21

22 Carrinho de compras Como fazer este padrão funcionar Acessível em todas as páginas Fácil acrescentar itens Informação detalhada de cada ítem Informação sobre todos os custos Elo para checkout visível Elo que permita con\nuar a comprar Não permi\r itens não disponíveis 22

23 Personalização da Homepage 23

24 Solução para personalizar homepages 24

25 Como personalizar a página Obter informação dos perfis convidados Os visitantes têm que confiar em vós Existem várias formas de obter informação 25

26 Editar informação personalizada 26

27 Entrevistar os u\lizadores 27

28 Inferir a par\r de transacções prévias 28

29 Acessibilidade na web Normas e recomendações UMIC Agência para a Sociedade do Conhecimento hop:// Web Acessibility Ini\a\ve (WAI) W3C hop:// 29

30 Associar texto a elementos Visuais Imagens e animações Usar o atributo alt para descrever a função de cada elemento visual Mapas de imagen Usar mapas de cliente empregando texto nos pontos ac\vos Mul<- média Legendas e transcrições da componente sonora Descrições textuais da componente visual 30

31 Ligações e Organização Ligações de hipertexto U\lize texto que faça sen\do, mesmo fora do contexto. Evite links como clique aqui Organização das páginas U\lize cabeçalhos, listas e uma estrutura consistente. Sempre que possível, u\lize CSS para efeitos de disposição e es\lo 31

32 Gráficos e Scripts Gráficos e esquemas Forneça resumos ou u\lize o atributo longdesc Scripts, applets e suplementos Forneça conteúdo alterna\vo se: As caracterís\cas ac\vas não forem acessíveis ou Suportadas pelo navegador Frames U\lize a anotação noframes e empregue xtulos com significado Tabelas Faça a leitura linha- a- linha compreensível Forneça resumos 32

33 Verifique o trabalho Validação Recorra a ferramentas e direc\vas existentes em hop:// Acessibilidade (cores) hop:// hop:// Validação do HTML hop://validator.w3.org hop:// 33

34 PADRÕES DE DESENHO VISUAL PARA A WEB 34

35 Usar poucas fontes Mau exemplo 35

36 Usar poucas fontes Bom exemplo 36

37 Não misturar serif e sans serif (para noviços) 37

38 Usar tamanhos de fonte apropriados (mau exemplo) 38

39 Usar tamanhos de fonte apropriados (bom exemplo) 39

40 Usar espaçamento apropriado 40

41 Usar contrastes apropriados Mau exemplo 41

42 Contraste (bom exemplo) 42

43 Contraste (mau exemplo) 43

44 Evitar separações excessivas 44

45 Nem apertar demais Cuidar a distância entre: xtulos e texto E\quetas e botões 45

46 Espaçamento consistente 46

47 Usar grelhas 47

48 O magic ra\o 48

49 O magic ra\o 49

50 O magic ra\o no desenho web 50

51 Hierarquia visual Comunicar hierarquia da informação com: Tamanho Cor Contraste Forma Posição Espaço em branco 51

52 Hierarquia visual 52

53 Hierarquia visual 53

54 Qual o problema? 54