VI WWW. VI.3-Personalização de Homepages e Standards

Transcrição

1 VI WWW VI.3-Personalização de Homepages e Standards The Design of Sites, D. Duyne, J. Landay, J. Hong Resumo da Aula Anterior Processo e práticas de design para a Web Padrões permitem-nos reutilizar Conhecimento de desenho 6 Regras para uma boa Home Page 1. Primeira impressão positiva 2. Focar num tópico principal 3. Construir imagem de marca 4. Facilitar navegação 5. Atrair visitantes a regressar 6. Tornar carregamento rápido Pirâmide invertida Começar pelas conclusões e acrescentar detalhes a desenvolver história. Estudo Usabilidade (resultados inesperados) páginas legíveis menos eficazes. Leitores buscam informação, não lêem! Navegação deve estar associada a conteúdo. Para que utilizadores prevejam resultado de seguir elos 2 1

2 Melhor e Pior? 3 Sumário Padrões de desenho WWW E-commerce e Carrinho de compras Personalização de homepages Standards de desenho Web Acessibilidade Cascade Style Sheets (CSS) Separação de conteúdo vs apresentação Locais de validação de CSS e HTML 4 2

3 Exemplos de + Padrões Padrões que utilizam a experiência off-line Comércio Electrónico: Carrinho de compras Caixa registadora (CHECKOUT) 5 Carrinho de Compras Problema Como permitir que utilizadores comprem múltiplos itens numa transacção Solução Metáfora do carrinho de compras Armazenar itens antes do consumidor finalizar compra regista nome, quantidade, disponibilidade e preço dos itens 6 3

4 Carrinho de Compras Tornar fácil acrescentar itens do catálogo em cada página Facilitar a compra ao utilizador! Parece óbvio mas muitos locais não sabem como fazer 7 Carrinho de Compras Dar info detalhada sobre cada item: nome com elo para detalhe quantidade c/ modo alterar preço Descrição sumária disponibilidade modo de eliminar 8 4

5 Carrinho de Compras Fornecer Info sobre todos os itens Sub-totais Porte & envio, taxas, outros encargos (se souber ) 9 Carrinho de Compras Elo visível para CHECKOUT 10 5

6 Carrinho de Compras Elo que permita continuar a comprar 11 Carrinho de Compras Não permitir itens não disponíveis Ou então dar informação sobre disponibilidade 12 6

7 Wish List 13 Resumo Carrinho de Compras Como fazer este padrão funcionar Acessível em todas as páginas Tornar fácil acrescentar itens do catálogo Dar info detalhada sobre cada item Fornecer Informação sobre todos os itens Elo visível para CHECKOUT Elo que permita continuar a comprar Não permitir itens não disponíveis 14 7

8 Personalização de homepages 15 Personalização da Home Page Problema Seria ideal os visitantes voltarem frequentemente à vossa homepage comprar, ver anúncios, usar serviços, etc. Se o conteúdo não é alterado e personalizado é menos provável que os visitantes regressem ou fiquem Info personalizada é mais útil que info genérica. Solução Personalizar conteúdo Uma homepage personalizada para cada visitante 16 8

9 novos utilizadores para re-visitantes Diagrama solução Página Personalizada 18 9

10 Como Personalizar a Página Obter informação dos PERFIS CONVIDADOS & utilizá-la para construir um local que Retém o interesse Parece adaptado só para eles Os visitantes têm de confiar em vós para fornecer info. directa/indirectamente cookies nem sempre aceites se não houver confiança devem usá-la para benefício deles apenas Quatro modos de obter informação Editar, entrevistar, deduzir, filtro colaborativo 19 Editar Info de Personalização my.yahoo.com bom exemplo de editar para personalizar Visitantes seleccionam informação de listas Tempo em cidades Fontes noticiosas Acções a comprar Desportos a ver Incluir módulos usando selecções Problemas? Monótono se muito repetido Relação custo-benefício (vale a pena gastar o meu tempo?) 20 10

11 Método das Entrevistas Visitantes resp. escolhas múltiplas Actualizam PERFIL CONVIDADO Incluir módulos baseados em um ou mais critérios de pontuação Deve permitir refinar personalização ao longo do tempo 21 Deduzir para Personalizar Monitorizar Comportamento dos Utilizadores Amazon observa encomendas para oferecer livros semelhantes em visitas subsequentes Actualizar PERFIL CONVIDADO Seleccionar conteúdo com base em critérios de pontuação (ex. Amazon.com) 22 11

12 Filtros Colaborativos Fornecer conteúdo apelativo com base em todos os visitantes Fornecer módulos adaptados usando perfis semelhantes correlação de perfis para identificar áreas de interesse 23 Standards de desenho Web 24 12

13 Necessidade de Standards Vários elementos de desenho são tão comuns que os utilizadores criam espectativas em relação ao seu funcionamento Muitos locais são difíceis de usar porque se desviam das normas esperadas 25 Três níveis de Uniformização Standard 80% ou mais locais usam a mesma abordagem de desenho Utilizadores esperam fortemente que elementos standard funcionem de determinado modo, porque foi assim que as coisas sempre funcionaram Convenção 50-79% dos locais usam a mesma abordagem de desenho Utilizadores esperam que os elementos standard funcionem de determinado modo, porque é assim que as coisas normalmente funcionam Confusão Não existe uma abordagem de desenho que seja predominante Utilizadores não sabem o que esperar quando visitam um novo local 26 13

14 Quantos elementos de desenho são standardizados? Fizeram-se estudos para estimar o respeito dos standards de interfaces pelo desenho Web Analizaram-se 57 locais 27 Uniformização - Standard 37% dos elementos de desenho foram usados da mesma maneira por 4/5 dos locais Elementos de desenho standards Logotipo no canto superior esquerdo Campo de pesquisa na Home Page Inexistência de páginas de entrada (páginas splash) Caminho com a localização actual (ex. IPM > Lab > Aula1) 28 14

15 Uniformização - Convenção 40% dos elementos de desenho foram usados da mesma maneira por pelo menos metade dos locais Elementos de desenho convencionais Utilização de Site Map para mapa do local Alteração da cor dos elos depois de visitados Elo do Carrinho de Compras no canto superior direito Elos para áreas irmãs na coluna da esquerda 29 Uniformização - Confusão 23% dos elementos de desenho foram usados de tantas maneiras, que nenhuma dominou Confusão em várias áreas, como Mecanismo principal de navegação Menu do lado esquerdo Tabs no topo Barra de navegação no topo Estilo da directoria do Yahoo no centro Etc. Localização da funcionalidade de pesquisa Em cima à direita; em cima à esquerda; no meio; em qualquer lugar da página Processo de Sign-in Localização da Ajuda 30 15

16 Uniformização - Conclusão À primeira vista pode parecer muito bom, pois apenas ¼ (23%) dos elementos de desenho causam Confusão Mas qual é esse ¼?? Os mais standards são os elementos mais simples (ex. logos) :-( Os elementos mais confusos são os que deveriam facilitar o domínio do local pelo utilizador A navegação é confusa A pesquisa é confusa Sign-in é confuso A Ajuda é confusa 31 Porque é que os Standards Ajudam Devemos eliminar os elementos confusos e ir na direcção das convenções de desenho Os standards asseguram que os utilizadores Sabem quais as características a esperar Sabem como essas características aparecerão na interface Sabem onde encontrar essas características no local e na página Sabem como lidar com cada característica para atingir os seus objectivos Não têm que se preocupar com o significado de elementos desconhecidos Não perdem uma característica importante por dedicarem mais atenção a elementos não standard Não têm surpresas desagradáveis quando algo não funciona como estavam à espera 32 16

17 Acessibilidade Normas e Recomendações Requisitos de Visitabilidade do Governo Português: acesso/visitabil.htm Resolução do CM em 1999 (!!) WAI Web Accessibility Initiative 33 Normas de Acessibilidade W3C QuickTips/ 34 17

18 Associar Texto a elementos visuais 1. Imagens e animações. Utilize o atributo alt para descrever a função de cada elemento visual. 2. Mapas de imagem. Utilize mapas de cliente (anotação map), empregando texto nos pontos activos. 3. Multimédia. Disponibilize legendas e transcrições da componente sonora, e descrições da componente visual. 35 Ligações de hipertexto. 4. Utilize texto que faça sentido, mesmo lido fora do contexto. Por exemplo: evite "clique aqui"

19 5. Organização das páginas. Utilize cabeçalhos, listas e uma estrutura consistente. Sempre que possível, utilize CSS para efeitos de disposição e estilo Gráficos e esquemas Forneça resumos ou utilize o atributo longdesc

20 7. Scripts, applets e suplementos. Forneça conteúdo alternativo, se as características activas não forem acessíveis ou se não forem suportadas pelo navegador Frames Utilize a anotação noframes e empregue títulos com significado

21 10.Tabelas. Faça com que a leitura linha-a-linha seja compreensível. Forneça resumos Verifique o trabalho Efectue validações. Recorra a ferramentas e às directivas existentes em

22 Cascading Style Sheets CSS 43 CSS Definição e História CSS = Cascading Style Sheets ou Style Sheets Grupos de regras de estilo/propriedades que permitem controlar a apresentação (ex. Fontes, cores, margens, e outros aspectos de estilo) de um documento Web sem comprometer a sua estrutura Resumo histórico Dez primeira versão de CSS CSS2 passou a ser a nova recomendação Jun Rascunho da recomendação CSS

23 CSS - Vantagens Separação entre Apresentação (CSS) e Conteúdo (HTML) Código HTML mais simples e mais fácil de gerir Controlo mais fino sobre a apresentação. CSS criadas para lidar com aspectos + específicos Navegadores antigos ignoram as CSS Permitem ao leitor definir regras de apresentação dos documentos HTML HTML foi desenvolvido para definir estrutura de documentos e não apresentação Melhoram a impressão de documentos web (define-se na CSS) Pessoas com deficiências têm melhor acesso às páginas (infraestrutura para Style sheets de fala) 45 CSS Exemplo de Utilização Cenário: Criar uma página onde todos os <H3> têm texto verde em Arial itálico. Sem CSS teríamos que escrever <EM><FONT face="arial" color="green"><h3>this is a green, italic, Arial H3 header.</h3></font></em> cada vez que se usasse um <H3> Com CSS podemos definir o estilo para todos os <H3> usando um selector H3 {font-family: Arial; font-style: italic; color: green} Assim, cada vez que criar um <H3> ele será verde Arial itálico CSS pode estar definida dentro de um documento HTML ou num ficheiro à parte 46 23

24 Sites de Validação de Páginas Validação de HTML Validação de CSS Acessibilidade (cores) World Wide Web Consortium (W3C) 47 Deuteranope (Deficiência Verde/Vermelho) 48 24

25 CSS Ex. de Validação 49 Resumo Carrinho de Compras Personalização. Porquê? Se o conteúdo não estiver actualizado, consumidores não voltam Quatro modos de coligir informação Editar Entrevistar Deduzir Filtros Colaborativos Standards de desenho Web Necessidade e Vantagens Cascade Style Sheets (CSS) Separação de conteúdo vs apresentação Locais de validação de páginas web 50 25

26 Próxima Aula Definição de MVC Porque precisamos de modelos? Fluxo de acontecimentos Arrastar em cadências interactivas Ler Developing User Interfaces, Cap. 5, Dan Olsen 51 26