Baixe o app para aproveitar ainda mais
Prévia do material em texto
R ev is ão p ar a a pr ov a de P ub lic aç õe s pa ra W eb – Fe ito à p ar tir d as a no ta çõ es d a au la d e re vi sã o (2 5/ 09 ), po r L ar is sa C am ar a USABILIDADE É o grau de facilidade ou dificuldade que o internauta tem para realizar uma tarefa no seu site. Tem que ser/ter: • Eficiente; • Fácil de usar; • Fácil de aprender; • Satisfação de uso. Precisamos da usabilidade, por que: • O concorrente está muito próximo; • Fácil de trocar de site; • Internauta impaciente. O poder de escolha está nas mãos de quem usa o mouse (internauta). No design de produtos, nós primeiro pagamos, depois testamos a usabilidade. Na internet, primeiro testamos a usabilidade, depois pagamos. Regras básicas da usabilidade: • Clareza da arquitetura de informação: − Elementos distribuídos harmonicamente; − Distinção entre elementos principais e secundários; − Suporte ou rotas alternativas para o conteúdo; − Ter um mapa do site. • Facilidade de navegação: − Posicionamento dos menus de forma clara e previsível; − Acesso à informação com no máximo 3 cliques. • Simplicidade: − Quem navega não tem paciência para procurar, por tanto, as coisas devem ter funcionamento simples de entender. R ev is ão p ar a a pr ov a de P ub lic aç õe s pa ra W eb – Fe ito à p ar tir d as a no ta çõ es d a au la d e re vi sã o (2 5/ 09 ), po r L ar is sa C am ar a • Prioridade de conteúdo: − Nível de texto deve ser compatível com o público-alvo (se for um site para jovens, usar linguagem jovem, se for para executivos, usar linguagem mais formal, etc); − Texto conciso. • Padronização: − Manter um padrão visual em todo o site (deve ser de acordo com o definido, combinar com as cores do logo, etc) • Tempo para acesso ao conteúdo: − A página não pode demorar a carregar; − Tempo recomendado é de 10 segundos; − Tempo limite de 30 segundos. Aplicando a análise heurística: 1. Definir avaliadores (pessoas que vão testar); 2. Definir observadores (pessoas que vão observar as dificuldades dos avaliadores na navegação); 3. Definir metodologia e critérios para teste (o que, e como vai ser avaliado/testado); 4. Aplicação dos testes (execução das tarefas pelos avaliadores. Ex.: efetuar uma compra no site, encontrar um conteúdo, etc.); 5. Coletas dos dados (feedback em relação as facilidades e dificuldades encontradas na execução das tarefas); 6. Pontuação dos problemas (definir grau de importância); ANÁLISE HEURÍSTICA É a análise feita por especialistas em interfaces, programas, sites, buscando nesta análise identificar erros existentes na forma de uso. Resumindo: analisa erros no processo de navegação, para tentar resolvê-los. R ev is ão p ar a a pr ov a de P ub lic aç õe s pa ra W eb – Fe ito à p ar tir d as a no ta çõ es d a au la d e re vi sã o (2 5/ 09 ), po r L ar is sa C am ar a 7. Eliminação dos maiores problemas (resolver primeiro os problemas mais graves – aqueles que impedem a navegação). • Visibilidade: − Manter o internauta informado do que está acontecendo, dando um feedback pontual a cada ação. • Compatibilidade com o mundo real: − A forma de funcionamento da interface deve ter algum vínculo com o mundo real, isto facilita o entendimento. • Frequência: comum ou raro • Impacto: fácil ou difícil de ser superado • Persistência: vai incomodar o usuário sempre, ou depois de conhecido pode ser superado? • Monte um questionário onde o avaliador possa: − Indicar o grau de satisfação. − Indicar a percepção de satisfação. • Coisas indispensáveis: − Ter um botão “Voltar”, para que o usuário possa retornar a pagina anterior; − Ter mensagens de erro claras (invés de notificar “erro 404”, informar “página não encontrada”), ou não informar o erro, e simplesmente redirecionar para outra página; − Quando houver erro de sistema, informar o erro; − Ter breadcrump (campo que fica geralmente ao todo, mostrando todo o caminho percorrido. Ex: Home>Roupas>Femininas>Jaquetas), em todas as páginas, com link para todas etapas já exibidas. R ev is ão p ar a a pr ov a de P ub lic aç õe s pa ra W eb – Fe ito à p ar tir d as a no ta çõ es d a au la d e re vi sã o (2 5/ 09 ), po r L ar is sa C am ar a Web Browsers Search Engines HTTP HTML HTML HTML HTML A B C D Servidores TAGS <!doctype html> indica que vai usar linguagem html 5 <html> início página fim </html> <head> início cabeçalho fim </head> <title> início nome da página fim </title> (conteúdo visível apenas na aba). <body> início conteúdo fim </body> <p> início parágrafo fim </p> <ol> início lista ordenada fim </ol> (com numeração) <ul> início lista não ordenada fim </ul> (com bullet) <li> início linha/item fim </li> (usada em listas) <table> início tabela fim </table> <th> início título da coluna fim </th> (usada em tabelas) <tr> início linha fim </tr> (usada em tabelas) <td> início célula fim </td> (usada em tabelas) ---------------------- Conteúdo para prova, revisado pelo professor até aqui -------------------- hyperlinks hyperlinks hyperlinks (o conteúdo que vai entre essas tags, não é visível na página). R ev is ão p ar a a pr ov a de P ub lic aç õe s pa ra W eb – Fe ito à p ar tir d as a no ta çõ es d a au la d e re vi sã o (2 5/ 09 ), po r L ar is sa C am ar a Mais algumas tags, para auxílio, que segundo o prof, não irão cair em prova, mas, vai que... rs <h1> início título fim </h1> (tamanho: variável de 1 a 6) <i> início itálico fim </i> (apenas para efeito visual) <em> início itálico fim </em> (para efeito visual + busca) <b> início bold fim </b> (apenas para efeito visual) <strong> início bold fim </strong> (para efeito visual + busca) <img src=“nomedoarquivo.jpg”/> início insere imagem link da imagem fim <img src= “nomedoarquivo.jpg” alt= “texto”/> aparece o nome qdo posiciona o mouse na imagem <a href=“url”> Clique aqui! </a> início insere link texto “clicável” fim <a href=“url” target=“blank”> Clique aqui! </a> abre em nova aba <!--comentário--> início comentário fim (visível apenas no código) <style> início estilo fim </style> <style=“font-size:10px”> tamanho da fonte <style=“font-family:Arial”> fonte <style=“color:red”> cor do texto (pode ser descrita em inglês, ou por hexadecimal) <style=“text-align:center”> alinhamento do texto <style=“background-color:yellow”> cor de fundo (pode ser descrita em inglês, ou por hexadecimal)
Compartilhar