<ul><li>De acordo com a proposta de trabalho feita em sala de aula, nosso grupo optou por analisar a usabilidade do site B...
BRIEFING DO CLIENTE   SITE BOA DICA
<ul><li>Melhorar a arquitetura da Informação; </li></ul><ul><li>Valorizar a área de pesquisa de produtos, carro-chefe do s...
Página Inicial (atual)
Página do Fórum
Página de Notícias
TESTES DE USABILIDADE   TAREFAS E VÍDEO COM A EXPERIÊNCIA DO USUÁRIO
<ul><li>1ª. Tarefa:  Encontrar o melhor preço de um pendrive de 16 Gb;  </li></ul><ul><li>2ª. Tarefa:  Localizar no fórum ...
<ul><li>Encontramos diversas oportunidades de melhorias, em relação a: </li></ul><ul><li>Navegação dos menus </li></ul><ul...
TESTES COM VALIDADORES
<ul><li>Testamos o site Boa dica em dois validadores apresentados em sala de aula:  </li></ul><ul><li>http://www.acesso.um...
Teste com o Markup Validation Service:
Teste com o Examinator:
CONCLUSÃO PARA MELHORIAS   PARA O SITE
<ul><li>Caixa de busca em todo o site; </li></ul><ul><li>Troca de posição do menu facilitando a abertura dos sub-itens; </...
PROPOSTA DE USABILIDADE   PARA A VERSÃO MOBILE
Seguindo as orientações dadas em sala de aula, procuramos desenvolver primeiro como seria a usabilidade do site Boa Dica n...
Uma vez selecionada, por exemplo, a opção de pesquisa de preço, o sistema levaria à seguinte navegação (em azul): 1ª. Etap...
Continuação da navegação (em azul): 2ª. Etapa:  Definição de produto;
Continuação da navegação (em azul): 3ª. Etapa:  Busca por tipo;
Continuação da navegação (em azul): 4ª. Etapa:  Definição do Modelo;
Continuação da navegação (em azul): 5ª. Etapa:  Tela de informação do produto, com endereço da loja onde pode ser encontra...
Exemplo da tela de notícias: Opções de busca por data ou por texto/assunto
PROPOSTA DE WIREFRAME PARA O SITE
Página Principal SENHA PARA WIREFRAME: 010101
Busca de Preços
Página de Notícias
Obrigado!!!
Próximos SlideShares
Carregando em…5
×

Trabalho usabilidade Site BoaDica

3.638 visualizações

Publicada em

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.

Publicada em: Educação
1 comentário
0 gostaram
Estatísticas
Notas
  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
3.638
No SlideShare
0
A partir de incorporações
0
Número de incorporações
6
Ações
Compartilhamentos
0
Downloads
59
Comentários
1
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • SENHA PARA WIREFRAME: 010101
  • SENHA PARA WIREFRAME: 010101
  • SENHA PARA WIREFRAME: 010101
  • Trabalho usabilidade Site BoaDica

    1. 2. <ul><li>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. </li></ul>Introdução: Site analisado Boa dica (www.boadica.com.br)
    2. 3. BRIEFING DO CLIENTE SITE BOA DICA
    3. 4. <ul><li>Melhorar a arquitetura da Informação; </li></ul><ul><li>Valorizar a área de pesquisa de produtos, carro-chefe do site; </li></ul><ul><li>Melhorar o design do site, para torná-lo mais agradável ao usuário e mais vendedor; </li></ul><ul><li>Organizar todo o conteúdo do site em menos itens de menu, para torná-lo mais enxuto; </li></ul><ul><li>Preparar o site para novos formatos de publicidade (seja do Google Adwords) e vários tipos de banners possíveis; </li></ul><ul><li>Aumento de visitas pelo conteúdo de fóruns e reportagens ligando ao conteúdo de preços disponível; </li></ul><ul><li>Criar área de busca; </li></ul><ul><li>Melhorar a área de notícias; </li></ul><ul><li>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; </li></ul>Briefing do Cliente com as melhorias solicitadas
    4. 5. Página Inicial (atual)
    5. 6. Página do Fórum
    6. 7. Página de Notícias
    7. 8. TESTES DE USABILIDADE TAREFAS E VÍDEO COM A EXPERIÊNCIA DO USUÁRIO
    8. 9. <ul><li>1ª. Tarefa: Encontrar o melhor preço de um pendrive de 16 Gb; </li></ul><ul><li>2ª. Tarefa: Localizar no fórum informações sobre pendrives para saber mais sobre as marcas disponíveis; </li></ul><ul><li>3ª. Tarefa: Encontrar uma notícia específica &quot;Falsos positivos desafiam fabricantes de anti-virus&quot;. </li></ul>Usuário: Sut-Mie Guibert Tarefas Solicitadas: Vídeo do Teste de Usabilidade
    9. 10. <ul><li>Encontramos diversas oportunidades de melhorias, em relação a: </li></ul><ul><li>Navegação dos menus </li></ul><ul><li>Busca de produtos no site </li></ul><ul><li>Área de notícias </li></ul><ul><li>Busca de notícias </li></ul><ul><li>Busca de informações do Fórum </li></ul>Conclusão
    10. 11. TESTES COM VALIDADORES
    11. 12. <ul><li>Testamos o site Boa dica em dois validadores apresentados em sala de aula: </li></ul><ul><li>http://www.acesso.umic.pt/webax/examinator.php </li></ul><ul><li>http://validator.w3.org/ </li></ul><ul><li>Em ambos foram encontrados uma série de erros, que podem ser resumidos nos slides seguintes: </li></ul>Resultados dos Testes com Validadores
    12. 13. Teste com o Markup Validation Service:
    13. 14. Teste com o Examinator:
    14. 15. CONCLUSÃO PARA MELHORIAS PARA O SITE
    15. 16. <ul><li>Caixa de busca em todo o site; </li></ul><ul><li>Troca de posição do menu facilitando a abertura dos sub-itens; </li></ul><ul><li>Filtros adicionais na pesquisa de produtos; </li></ul><ul><li>Fórum com menu mais objetivo; </li></ul><ul><li>Área de notícias mais amigável, </li></ul><ul><li>Busca funcionando; </li></ul><ul><li>Áreas de anúncio de produtos pelo site sem poluir o conteúdo. </li></ul>Nossas propostas de melhoria
    16. 17. PROPOSTA DE USABILIDADE PARA A VERSÃO MOBILE
    17. 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:
    18. 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;
    19. 20. Continuação da navegação (em azul): 2ª. Etapa: Definição de produto;
    20. 21. Continuação da navegação (em azul): 3ª. Etapa: Busca por tipo;
    21. 22. Continuação da navegação (em azul): 4ª. Etapa: Definição do Modelo;
    22. 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;
    23. 24. Exemplo da tela de notícias: Opções de busca por data ou por texto/assunto
    24. 25. PROPOSTA DE WIREFRAME PARA O SITE
    25. 26. Página Principal SENHA PARA WIREFRAME: 010101
    26. 27. Busca de Preços
    27. 28. Página de Notícias
    28. 29. Obrigado!!!

    ×