Melhores Práticas de Usabilidade no Desenvolvimento Web

  • 2,920 views
Uploaded on

Apresentação de Trabalho de Conclusão de Curso.

Apresentação de Trabalho de Conclusão de Curso.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
2,920
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
97
Comments
1
Likes
7

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • Difere da navegação global e mantém sua individualidade na apresentação das informações.
  • A navegação contextual é apresentada dentro do conteúdo utilizando-se de recursos como links, apontando para outra área do Website em questão ou para outros Websites.
  • Memória (2005, p. 107-108), define algumas orientações para o uso de Migalhas de pão:   “ Não utilizá-los em sites simples”, pois são mais bem utilizados em sites com grande complexidade, já que sites menores a tarefa de voltar à determinada página é mais simples ; “ Colocá-los na parte superior da tela, abaixo da marca da empresa”; “ Utilizar algum sinal que demonstre continuidade entre os itens”, caracteres ou imagens que demonstram o fluxo da informação, auxiliam no entendimento do usuário. Ex: “ > ”,” -> ”, “ » ” ; “ Utilizar tipografia em corpo pequeno” , as migalhas não devem ocupar espaço muito grande, e como trata-se de navegação auxiliar deve ser discreta; “ Não utilizar o último item como título da página” , não descartar o titulo da página e o último item deve ser sem link; “ Utilizar duas linhas quando necessário” , em um Website muito grande pode acontecer de o elemento ter que ocupar mais de uma linha, o autor diz que “é melhor mostrar todo o conteúdo do que escondê-lo por razões estéticas”.

Transcript

  • 1. ESTUDO DAS MELHORES PRÁTICAS DE USABILIDADE NO DESENVOLVIMENTO WEB Keidi Nienkötter Prof. Orientador Francisco Spaeth
  • 2. PORQUE ESTUDAR A USABILIDADE?
    • Tornar sites fáceis de utilizar;
    • Sites são diferentes de softwares desktop;
    • Manter a atenção do usuário;
    • Satisfazer o usuário para que ele volte.
    “ A vida atual pede simplicidade, objetividade, clareza e concisão. Um Website simples é facilmente compreendido, identificado, assimilado... e recordado.” (DAMASCENO, 2003, p. 17)
  • 3. ARQUITETURA DE INFORMAÇÃO
    • Organização do conteúdo;
    • Definição de rótulos para menus e títulos de páginas;
    • Preparação para estruturar a navegação.
    “ A arquitetura de informação deve destacar o conteúdo que é realmente relevante em cada página e agrupar as informações da forma mais parecida possível com o modelo mental dos usuários, ou seja, com aquilo que eles pensam.” (MEMÓRIA, 2006)
  • 4. NAVEGAÇÃO
    • Navegação global;
    • Navegação local;
    • Navegação contextual;
    “ Navegação clara e bem estruturada é uma das melhores oportunidades que um site possui de criar uma boa impressão” (KRUG, 2006, p. 35).
  • 5. NAVEGAÇÃO GLOBAL “ Complementa a informação disposta de modo hierárquico (a “taxionomia”), habilitando os movimentos verticais e laterais. É aplicado ao site inteiro e se integra ao design gráfico.” (AGNER, 2006)
  • 6. NAVEGAÇÃO LOCAL
  • 7. NAVEGAÇÃO CONTEXTUAL
  • 8. MIGALHAS DE PÃO
    • Migalha de pão de localização : mostra a localização em relação à página inicial;
    • Migalha de pão de caminho : mostra exatamente o caminho que o usuário percorreu;
    • Migalha de pão de atributo : demonstra uma classificação do assunto buscado.
  • 9. FERRAMENTA DE BUSCA
    • Precisa estar sempre disponível;
    • Deve ser simples sem muitos campos para se preencher;
    • Ordenar os resultados por relevância;
    • Não repetir as ocorrências.
    Um pouco mais da metade dos usuários são voltados à busca, cerca de um quinto dos usuários são voltados a links e o resto exibe um comportamento misto. NIELSEN (2000, p.224)
  • 10. BOTÕES
    • Deve parecer clicável;
    • Posição dos botões de acordo com sua função;
    • Cores (caso tenha distinção) devem seguir uma lógica já conhecida.
  • 11. LINKS
    • Colocar palavras que tem a ver com o conteúdo ao qual o link se refere;
    • Ter aparência de link.
    “ As palavras ‘Clique’ e ‘Aqui’ dificilmente contêm informações e, portanto, não devem ser usadas como elementos de design que atraem a atenção do usuário.” (NIELSEN, 2000, p. 55)
  • 12. FORMULÁRIOS
    • Não exigir o preenchimento de dados desnecessários;
    • Não exigir que o usuário formate o campo (Ex: CPF);
    • Apresentar mensagens de erro quando ocorrerem, deixando claro onde está o erro;
    • Quando ocorrer erro, retornar o formulário com os campos já preenchidos;
    • Cuidar da aparência do formulário para que não passe despercebido.
  • 13. PÁGINA PRINCIPAL
    • É o resumo do site;
    • Deve chamar a atenção para coisas importantes;
    “ A home page deve conter somente as informações que interessam ao usuário”. (AGNES, 2006)
  • 14. PÁGINAS INTERNAS
    • A navegação deve permanecer visível;
    • Precisa de um título que identifique o conteúdo;
    • O usuário deve sempre saber onde está, e como continuar.
    “ Os usuários devem ser capazes de encontrar links e navegar para sites internos e externos sem perder tempos no portal da empresa propriamente dito.” (AGNES, 2006, p. 67)
  • 15. TÍTULOS
    • Corresponder ao conteúdo de determinada página;
    • Mostrar ao usuário que o mesmo chegou ao lugar esperado;
    • Apresentar hierarquia para facilitar o entendimento;
    “ É importante especificar bons títulos de página, pois os títulos são muitas vezes usados como a principal referência às páginas.” (NIELSEN, 2000, p.123)
  • 16. CORES
    • Use cores com alto contraste entre o texto e o fundo.
    • Use fundos de cores lisas ou padrões de fundos extremamente sutis.
    Exemplo
  • 17. Testes de usabilidade
    • Importância dos testes de usabilidade;
    • Por que fazer a pesquisa?
    “ Os testes de usabilidade são de grande utilidade para que possamos projetar produtos que sejam fáceis de usar e, mais do que isso, capazes de proporcionar uma boa experiência.” (MEMÓRIA, 2006, p. 138)
  • 18. PESQUISA - COMO FOI DEFINIDA
    • Utilizar um site que já está no ar;
    • Um site que tenha alguma característica incomum;
    • Testes rápidos.
  • 19. PESQUISA - COMO FOI APLICADA
    • Feita entre os dias 30/06/2007 e 05/06/2007 com um total de 58 alunos;
      • 25 de Sistemas de Informação (UNIDAVI);
      • 6 de Engenharia de Produção (UNIDAVI);
      • 7 do Curso de Informática Básica (NEP);
      • 20 do Curso Técnico de Manutenção e Programação de Computadores (SENAI);
  • 20. PESQUISA - RESULTADOS
    • Conhecimento em informática:
      • Baixo
      • Intermediário
      • Alto
  • 21. PESQUISA - RESULTADOS
    • Qual a periodicidade que você acessa a Internet?
      • Todos os dias
      • Uma vez por semana
      • Uma vez por mês
      • Raramente
  • 22. PESQUISA - RESULTADOS
    • Pra você, qual é a coisa mais marcante no site? Ou o que você clicou primeiro?
  • 23. PESQUISA - RESULTADOS
    • Para você qual é a principal função deste site?
  • 24. PESQUISA - RESULTADOS
    • Que cores você consegue lembrar que tem no site?
  • 25. PESQUISA - RESULTADOS
    • O site é dividido em três colunas. Você consegue se lembrar do conteúdo de cada uma delas?
      • Coluna da esquerda
  • 26. PESQUISA - RESULTADOS
    • O site é dividido em três colunas. Você consegue se lembrar do conteúdo de cada uma delas?
      • Coluna central
  • 27. PESQUISA - RESULTADOS
    • O site é dividido em três colunas. Você consegue se lembrar do conteúdo de cada uma delas?
      • Coluna da direita
  • 28. PESQUISA - RESULTADOS
    • Teve alguma informação que você queria achar no site e não conseguiu?
    Informações mais detalhadas 1 Falta de fotos para alguns imóveis 12 Preço do Villa Vicenza 2 Falta de explicação no formulário 1 Localização Geográfica dos imóveis 3 Busca por preço 2 Imóveis para locação 2 Busca por localização 4 Proprietário dos imóveis 1
  • 29. PESQUISA - RESULTADOS
    • Notou algum banner de divulgação?
  • 30. PESQUISA - RESULTADOS
    • Por acaso, você já visitou o site de outra imobiliária?
    • Caso Sim: São melhores ou piores que o site apresentado?
  • 31. PESQUISA - RESULTADOS
    • Em que o site precisa melhorar?
  • 32. PESQUISA - RESULTADOS
    • A última questão da pesquisa pedia sugestões dos usuários para que o site melhore. As sugestões mais relevantes para esta pesquisa são:
      • Melhorar a forma de busca, por preço, por localização ou buscas personalizadas;
      • Inclusão de mapas de localização dos imóveis;
      • Retirar os links nos e-mails da coluna da esquerda, isso porque algumas pessoas não sabem como copiar o e-mail e utilizá-lo em seu webmail, por exemplo. (o link no Windows abre automaticamente o Outlook);
      • Vídeos ou melhores fotos para cada imóvel, ajudando na escolha do usuário.
  • 33. ANALISE GERAL DA PESQUISA
    • Conteúdo;
    • Navegação;
    • Links de e-mail;
    • Buscas.
  • 34. CONCLUSÃO
    • Verificou-se com este trabalho os principais itens a se observar no desenvolvimento de sites para que a utilização do usuário final seja fácil e eficaz;
    • Foi demonstrada a importância de fazer testes para identificar possíveis falhas de usabilidade.
  • 35. PROPOSTAS DE CONTINUIDADE
    • Aplicar metodologias para a criação de Websites com design centrado no usuário;
    • Aplicação de testes de usabilidade em fase inicial de desenvolvimento;
    • Estudar a fundo a arquitetura da informação.
  • 36. Referências
    • AGNER, Luiz. Ergodesign e arquitetura de informação : trabalhando com o usuário. Rio de Janeiro: Quartet, 2006.
    • ASSOCIAÇÃO BRASILEIRA DE NORMAS TÉCNICAS. NBR 9241-11 : Requisitos Ergonômicos para Trabalho de Escritórios com Computadores: Orientações sobre Usabilidade. Rio de Janeiro: 2002.
    • DEITEL, H.M. Internet & World Wide Web , como programar. Tradução de: Edson Furmankiewicz. 2. ed. Porto Alegre: Bookman, 2003.
    • ______. XML , como programar. Tradução de: Luiz Augusto Salgado e Edson Furmankiewicz. Porto Alegre: Bookman, 2003.
    • DAMASCENO, Anielle. Webdesign : Teoria e Prática. Florianópolis: VisualBooks, 2003.
    • DIAS, Claudia. Usabilidade na WEB : Criando portais mais acessíveis. 3. ed., Rio de Janeiro: Alta Books, 2003.
    • FERNANDES, Francisco; LUFT, Celso Pedro; GUIMARÃES, F. Marques. Dicionário Brasileiro Globo. 36. ed., São Paulo: Globo, 1994.
  • 37. Referências
    • FURGERI, Sérgio. Business to business : Aprenda a desenvolver aplicações. São Paulo: Érica, 2001.
    • KRISHNAMURTHY, Balachander; REXFORD, Jennifer. Redes para Web. Tradução de Daniel Vieira. Rio de Janeiro: Campus, 2001.
    • KRUG, Steve. Não me faça pensar. Tradução de Acauan Pereira Fernandes. Rio de Janeiro: Alta Books, 2006.
    • MEMÓRIA, Felipe. Design para a Internet : projetando a experiência perfeita. Rio de Janeiro: Elsevier, 2005.
    • RADFAHRER, Luli. Design, web, design : 2. São Paulo: Market Press, 2003
    • RIOS, Rosângela Silqueira Hickson. Projeto de sistemas Web orientados a interface . Rio de Janeiro: Campus, 2003.
    • ZELDMAN, Jeffrey. Projetando web sites compatíveis : como construir web sites compatíveis com browsers e dispositivos variados. Rio de Janeiro: Elsevier, 2003.
  • 38. Perguntas?