Trabalho usabilidade Site BoaDica

  • 2,850 views
Uploaded on

Trabalho acadêmico de usabilidade. Como exemplo foi usado o site BoaDica. Foi realizado teste de usabilidade, criação de wireframe e sugestões de melhorias.

Trabalho acadêmico de usabilidade. Como exemplo foi usado o site BoaDica. Foi realizado teste de usabilidade, criação de wireframe e sugestões de melhorias.

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Muito bom!
    Are you sure you want to
    Your message goes here
    Be the first to like this
No Downloads

Views

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

Actions

Shares
Downloads
43
Comments
1
Likes
0

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
  • SENHA PARA WIREFRAME: 010101
  • SENHA PARA WIREFRAME: 010101
  • SENHA PARA WIREFRAME: 010101

Transcript

  • 1.  
  • 2.
    • De acordo com a proposta de trabalho feita em sala de aula, nosso grupo optou por analisar a usabilidade do site Boa Dica (referência na pesquisa de preços, produtos e serviços de equipamentos de informática) e propor soluções para melhorar a experiência de navegação do usuário.
    Introdução: Site analisado Boa dica (www.boadica.com.br)
  • 3. BRIEFING DO CLIENTE SITE BOA DICA
  • 4.
    • Melhorar a arquitetura da Informação;
    • Valorizar a área de pesquisa de produtos, carro-chefe do site;
    • Melhorar o design do site, para torná-lo mais agradável ao usuário e mais vendedor;
    • Organizar todo o conteúdo do site em menos itens de menu, para torná-lo mais enxuto;
    • Preparar o site para novos formatos de publicidade (seja do Google Adwords) e vários tipos de banners possíveis;
    • Aumento de visitas pelo conteúdo de fóruns e reportagens ligando ao conteúdo de preços disponível;
    • Criar área de busca;
    • Melhorar a área de notícias;
    • Permitir que o site também seja referência pelo seu cadastro de prestadores de serviço, além da busca de preços e manuais;
    Briefing do Cliente com as melhorias solicitadas
  • 5. Página Inicial (atual)
  • 6. Página do Fórum
  • 7. Página de Notícias
  • 8. TESTES DE USABILIDADE TAREFAS E VÍDEO COM A EXPERIÊNCIA DO USUÁRIO
  • 9.
    • 1ª. Tarefa: Encontrar o melhor preço de um pendrive de 16 Gb;
    • 2ª. Tarefa: Localizar no fórum informações sobre pendrives para saber mais sobre as marcas disponíveis;
    • 3ª. Tarefa: Encontrar uma notícia específica "Falsos positivos desafiam fabricantes de anti-virus".
    Usuário: Sut-Mie Guibert Tarefas Solicitadas: Vídeo do Teste de Usabilidade
  • 10.
    • Encontramos diversas oportunidades de melhorias, em relação a:
    • Navegação dos menus
    • Busca de produtos no site
    • Área de notícias
    • Busca de notícias
    • Busca de informações do Fórum
    Conclusão
  • 11. TESTES COM VALIDADORES
  • 12.
    • Testamos o site Boa dica em dois validadores apresentados em sala de aula:
    • http://www.acesso.umic.pt/webax/examinator.php
    • http://validator.w3.org/
    • Em ambos foram encontrados uma série de erros, que podem ser resumidos nos slides seguintes:
    Resultados dos Testes com Validadores
  • 13. Teste com o Markup Validation Service:
  • 14. Teste com o Examinator:
  • 15. CONCLUSÃO PARA MELHORIAS PARA O SITE
  • 16.
    • Caixa de busca em todo o site;
    • Troca de posição do menu facilitando a abertura dos sub-itens;
    • Filtros adicionais na pesquisa de produtos;
    • Fórum com menu mais objetivo;
    • Área de notícias mais amigável,
    • Busca funcionando;
    • Áreas de anúncio de produtos pelo site sem poluir o conteúdo.
    Nossas propostas de melhoria
  • 17. PROPOSTA DE USABILIDADE PARA A VERSÃO MOBILE
  • 18. Seguindo as orientações dadas em sala de aula, procuramos desenvolver primeiro como seria a usabilidade do site Boa Dica no formato mobile, redefinindo a prioridade dos conteúdos para tornar a navegação mais fácil e rápida. Decidimos, portanto, que os serviços prioritários oferecidos na versão mobile seriam os citados ao lado:
  • 19. Uma vez selecionada, por exemplo, a opção de pesquisa de preço, o sistema levaria à seguinte navegação (em azul): 1ª. Etapa: Definição de categoria;
  • 20. Continuação da navegação (em azul): 2ª. Etapa: Definição de produto;
  • 21. Continuação da navegação (em azul): 3ª. Etapa: Busca por tipo;
  • 22. Continuação da navegação (em azul): 4ª. Etapa: Definição do Modelo;
  • 23. Continuação da navegação (em azul): 5ª. Etapa: Tela de informação do produto, com endereço da loja onde pode ser encontrado;
  • 24. Exemplo da tela de notícias: Opções de busca por data ou por texto/assunto
  • 25. PROPOSTA DE WIREFRAME PARA O SITE
  • 26. Página Principal SENHA PARA WIREFRAME: 010101
  • 27. Busca de Preços
  • 28. Página de Notícias
  • 29. Obrigado!!!