Trabalho usabilidade Site BoaDica

Preview:

DESCRIPTION

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.

Citation preview

Introdução: Site analisado Boa dica (www.boadica.com.br)

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.

BRIEFING DO

CLIENTE SITE BOA DICA

• 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

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

• 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

Conclusão

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

TESTES COM

VALIDADORES

Resultados dos Testes com Validadores

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:

Teste com o Markup Validation Service:

Teste com o Examinator:

CONCLUSÃO PARA

MELHORIAS PARA O SITE

• 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

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 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:

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;

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 encontrado;

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!!!

Recommended