Trata da forma de como se navega (vai de uma página para outra) por um site. De uma forma geral, se...

22

Transcript of Trata da forma de como se navega (vai de uma página para outra) por um site. De uma forma geral, se...

Page 1: Trata da forma de como se navega (vai de uma página para outra) por um site. De uma forma geral, se você pode ir de uma página para qualquer outra de.
Page 2: Trata da forma de como se navega (vai de uma página para outra) por um site. De uma forma geral, se você pode ir de uma página para qualquer outra de.

Trata da forma de como se navega (vai de uma página para outra) Trata da forma de como se navega (vai de uma página para outra)

por um site. De uma forma geral, se você pode ir de uma página por um site. De uma forma geral, se você pode ir de uma página

para qualquer outra de seu site com apenas dois cliques, para qualquer outra de seu site com apenas dois cliques, “O lema “O lema

aqui é: menos cliques”aqui é: menos cliques”, pode dizer que o site tem boa navegação. , pode dizer que o site tem boa navegação.

Três cliques são admitidos para sites com mais de 500 páginas, mas Três cliques são admitidos para sites com mais de 500 páginas, mas

se passar disso, tem alguma coisa errada com seus menus e botões. se passar disso, tem alguma coisa errada com seus menus e botões.

Se é preciso clicar em um botão ou link para voltar sempre que o Se é preciso clicar em um botão ou link para voltar sempre que o

visitante quer visitar outra página, está faltando navegabilidade e visitante quer visitar outra página, está faltando navegabilidade e

podemos dizer que o site está podemos dizer que o site está ‘travado’!.‘travado’!.

Page 3: Trata da forma de como se navega (vai de uma página para outra) por um site. De uma forma geral, se você pode ir de uma página para qualquer outra de.

Irrelevância das páginas:Irrelevância das páginas:

Diversos sites colocam páginas que são irrelevantes num 1º Diversos sites colocam páginas que são irrelevantes num 1º momento em lugar de destaque ao invés de privilegiar a momento em lugar de destaque ao invés de privilegiar a publicação dos produtos, serviços ou outra página mais publicação dos produtos, serviços ou outra página mais importante do que, por exemplo, “Quem somos”;importante do que, por exemplo, “Quem somos”;

Redundância de links e botões:Redundância de links e botões:

Múltiplas ocorrências de opções de navegação, como links e Múltiplas ocorrências de opções de navegação, como links e botões em áreas diferentes, o que torna o beneficiário confuso, botões em áreas diferentes, o que torna o beneficiário confuso, se perguntando se seriam de fato opções semelhantes;se perguntando se seriam de fato opções semelhantes;

Informação inadequadaInformação inadequada::

Slogans em linguagem de comercialmente apelativa e pouco Slogans em linguagem de comercialmente apelativa e pouco informativa.informativa.Cabeçalhos de notícia tão vagos ou curtos que não permitem Cabeçalhos de notícia tão vagos ou curtos que não permitem ao usuário ter uma noção do assunto sem precisar clicar sobre ao usuário ter uma noção do assunto sem precisar clicar sobre eles;eles;

Page 4: Trata da forma de como se navega (vai de uma página para outra) por um site. De uma forma geral, se você pode ir de uma página para qualquer outra de.

Inadequação de textoInadequação de texto

- Opções de menu nomeadas com termos que fazem mais - Opções de menu nomeadas com termos que fazem mais sentido para a empresa do que para seus potenciais sentido para a empresa do que para seus potenciais clientes;clientes;

- Uso exclusivo de letras maiúsculas ou minúsculas, com - Uso exclusivo de letras maiúsculas ou minúsculas, com prejuízo da legibilidade, em uma ou mais das seguintes prejuízo da legibilidade, em uma ou mais das seguintes áreas: título de janela, cabeçalho de notícia, opção de áreas: título de janela, cabeçalho de notícia, opção de menu ou slogan.menu ou slogan.

Posicionamento equivocado e má organizaçãoPosicionamento equivocado e má organização

- Elementos-chave, como logomarca e slogan, fora da área - Elementos-chave, como logomarca e slogan, fora da área focal (esquerda superior);focal (esquerda superior);

- Categorias e subcategorias de menus que poderiam ser - Categorias e subcategorias de menus que poderiam ser melhor agrupadas.melhor agrupadas.

Page 5: Trata da forma de como se navega (vai de uma página para outra) por um site. De uma forma geral, se você pode ir de uma página para qualquer outra de.

Um estudo recente, baseado em uma pesquisa Um estudo recente, baseado em uma pesquisa feita com feita com 1.0481.048 pessoas que compram pessoas que compram mercadorias online, concluiu que:mercadorias online, concluiu que:

- - 47% deles esperam que uma página carregue em 2 47% deles esperam que uma página carregue em 2 segundos ou menos, apresentando uma evolução em segundos ou menos, apresentando uma evolução em comparação com a pesquisa feita em 2008, que dizia que comparação com a pesquisa feita em 2008, que dizia que os "compradores online" esperariam 4 segundos ou menos.os "compradores online" esperariam 4 segundos ou menos.

- 40% deles não esperam mais do que 3 segundos para o - 40% deles não esperam mais do que 3 segundos para o site carregar, até abandoná-lo.site carregar, até abandoná-lo.

- 52% disseram que a velocidade do site é importante para - 52% disseram que a velocidade do site é importante para o seu retorno ao site, contra 40% em 2008.o seu retorno ao site, contra 40% em 2008.

Page 6: Trata da forma de como se navega (vai de uma página para outra) por um site. De uma forma geral, se você pode ir de uma página para qualquer outra de.

-Quando a velocidade do site é ruim, 64% Quando a velocidade do site é ruim, 64% simplesmente compram de outro sitesimplesmente compram de outro site, contra 48% em , contra 48% em 2008.2008.

-- 57% deles preferem um processo de check-out 57% deles preferem um processo de check-out (finalização da compra)(finalização da compra) rápido rápido, contra 47% em 2008., contra 47% em 2008.

- 33% dos clientes que abandonaram uma compra, estavam - 33% dos clientes que abandonaram uma compra, estavam insatisfeitos com o desempenho gráfico, acharam difícil insatisfeitos com o desempenho gráfico, acharam difícil concluir a compra por falta de conhecimento e de ajuda dos concluir a compra por falta de conhecimento e de ajuda dos sites.sites.

E,  para concluir, o dado que considero o mais importante: E,  para concluir, o dado que considero o mais importante: 15% desistem pois o site é confuso, mostrando que 15% desistem pois o site é confuso, mostrando que cada dia mais a falta de percepção em uma boa cada dia mais a falta de percepção em uma boa navegabilidade.navegabilidade.

Page 7: Trata da forma de como se navega (vai de uma página para outra) por um site. De uma forma geral, se você pode ir de uma página para qualquer outra de.

Campo de Busca Campo de Busca O campo de busca pode ser utilizado para facilitar a O campo de busca pode ser utilizado para facilitar a busca de assunto que não está facilmente indicado nos busca de assunto que não está facilmente indicado nos tópicos do menu, ou ainda, para agilizar o processo de tópicos do menu, ou ainda, para agilizar o processo de recuperação de informação.recuperação de informação.

Números de Cliques Números de Cliques Quanto menor for o número de cliques para encontrar a Quanto menor for o número de cliques para encontrar a informação, mais o usuário estará satisfeito. É informação, mais o usuário estará satisfeito. É importante que a equipe de produção estude caminhos importante que a equipe de produção estude caminhos que tornem o processo de busca de informações mais que tornem o processo de busca de informações mais fácil e rápido.fácil e rápido.

Page 8: Trata da forma de como se navega (vai de uma página para outra) por um site. De uma forma geral, se você pode ir de uma página para qualquer outra de.

Localização de Usuários:Localização de Usuários:A indicação de sessão na qual se encontra o usuário é de A indicação de sessão na qual se encontra o usuário é de extrema importância, assim como a apresentação dos níveis extrema importância, assim como a apresentação dos níveis hierárquicos até onde ele se encontra. Dessa maneira, o hierárquicos até onde ele se encontra. Dessa maneira, o usuário saberá exatamente onde está, de onde veio e para usuário saberá exatamente onde está, de onde veio e para onde pode ir.onde pode ir.

Mapa do Site: Mapa do Site: A existência de um mapa do site ajuda o usuário a encontrar o A existência de um mapa do site ajuda o usuário a encontrar o assunto mais rapidamente através de uma estrutura assunto mais rapidamente através de uma estrutura hierárquica de todos os itens mencionados. Quanto mais hierárquica de todos os itens mencionados. Quanto mais complexo for um site, mais existe a necessidade de um mapa.complexo for um site, mais existe a necessidade de um mapa.

Menu:Menu:A existência de um menu agiliza a busca do conteúdo A existência de um menu agiliza a busca do conteúdo desejado, pois através dos seus tópicos o usuário percebe desejado, pois através dos seus tópicos o usuário percebe quais são as sessões do site em que ele pode encontrar o que quais são as sessões do site em que ele pode encontrar o que deseja.deseja.Em geral, quanto mais informações um site contém, mais Em geral, quanto mais informações um site contém, mais menus são construídos para que o caminho entre o usuário e menus são construídos para que o caminho entre o usuário e a informação desejada seja curto.a informação desejada seja curto.

Page 9: Trata da forma de como se navega (vai de uma página para outra) por um site. De uma forma geral, se você pode ir de uma página para qualquer outra de.

Americanas um bom exemplo de boa navegabilidade

Page 10: Trata da forma de como se navega (vai de uma página para outra) por um site. De uma forma geral, se você pode ir de uma página para qualquer outra de.

Portal do Paraíso um ótimo exemplo de péssima navegabilidade

Page 11: Trata da forma de como se navega (vai de uma página para outra) por um site. De uma forma geral, se você pode ir de uma página para qualquer outra de.

A usabilidade pode também se referir aos A usabilidade pode também se referir aos métodos de avaliação de um website, no qual métodos de avaliação de um website, no qual usa-se como foco a qualidade do website, usa-se como foco a qualidade do website, visando uma melhor simplicidade e facilidade visando uma melhor simplicidade e facilidade com que uma interface, um programa de com que uma interface, um programa de computador ou um website pode ser utilizado;computador ou um website pode ser utilizado;

UsabilidadeUsabilidade é um termo usado para definir a é um termo usado para definir a facilidade com que as pessoas podem empregar facilidade com que as pessoas podem empregar uma ferramenta ou objeto a fim de realizar uma uma ferramenta ou objeto a fim de realizar uma tarefa específica e importante;tarefa específica e importante;

Page 12: Trata da forma de como se navega (vai de uma página para outra) por um site. De uma forma geral, se você pode ir de uma página para qualquer outra de.

ISO/IEC 9126ISO/IEC 9126:: "A usabilidade refere-se à capacidade de um "A usabilidade refere-se à capacidade de um software de ser compreendido, aprendido, utilizado e ser atrativo software de ser compreendido, aprendido, utilizado e ser atrativo para o utilizador, em condições específicas de utilização.para o utilizador, em condições específicas de utilização.

ISO/IEC 9241: ISO/IEC 9241: Para tanto, os critérios de medição da Para tanto, os critérios de medição da característica de usabilidade estabelecidos pela norma ISO 9241 característica de usabilidade estabelecidos pela norma ISO 9241 reflete na análise das características requeridas do produto num reflete na análise das características requeridas do produto num contexto de uso específico;contexto de uso específico;

-análise do processo de interação entre usuário e produto;-análise do processo de interação entre usuário e produto;

-análise da eficiência (agilidade na viabilização do trabalho), da -análise da eficiência (agilidade na viabilização do trabalho), da eficácia (garantia da obtenção dos resultados desejados) e da eficácia (garantia da obtenção dos resultados desejados) e da satisfação resultante do uso desse produto.satisfação resultante do uso desse produto.

ISO 13407: ISO 13407: O paradigma de desenvolvimento de uma O paradigma de desenvolvimento de uma interface com o usuário deve permitir a realização de sucessivos interface com o usuário deve permitir a realização de sucessivos ciclos de "análise/concepção/testes", com a necessária retro-ciclos de "análise/concepção/testes", com a necessária retro-alimentação dos resultados dos testes, de um ciclo a outro.alimentação dos resultados dos testes, de um ciclo a outro.

Page 13: Trata da forma de como se navega (vai de uma página para outra) por um site. De uma forma geral, se você pode ir de uma página para qualquer outra de.

Violação de convenções da WebViolação de convenções da Web : : (Links não (Links não evidentemente clicáveis).evidentemente clicáveis).

Como conseqüência desses problemas de usabilidade, o usuário das Como conseqüência desses problemas de usabilidade, o usuário das home pages:home pages:

- Nem sempre sabe onde encontrar a informação de que necessita e - Nem sempre sabe onde encontrar a informação de que necessita e perde tempo procurando;perde tempo procurando;

- Desiste de ler a grande quantidade de texto mal formatado para o - Desiste de ler a grande quantidade de texto mal formatado para o meio digital e perde a oportunidade de encontrar a informação de meio digital e perde a oportunidade de encontrar a informação de que necessita;que necessita;

Usabilidade mal percebidaUsabilidade mal percebida

-Há que evitar sempre o scroll, Deve estar tudo a três cliques de -Há que evitar sempre o scroll, Deve estar tudo a três cliques de distância, O que é necessário é interpretar adequadamente as distância, O que é necessário é interpretar adequadamente as recomendações de usabilidade e utilizar determinados recursos recomendações de usabilidade e utilizar determinados recursos quando aportam benefícios sublinhar sempre os linksquando aportam benefícios sublinhar sempre os links..

-Existe um volume de informação a partir do qual um site perde -Existe um volume de informação a partir do qual um site perde usabilidade. O sites são úteis como filtros de informação e não usabilidade. O sites são úteis como filtros de informação e não tentando abranger tudo que tem.tentando abranger tudo que tem.

Page 14: Trata da forma de como se navega (vai de uma página para outra) por um site. De uma forma geral, se você pode ir de uma página para qualquer outra de.

E é fácil medirmos os resultados deste retorno. Sabemos todos nós que os visitantes ao retornarem a determinado site, ele gera mais negócios e numa freqüência maior, num volume acima de 20% do que o visitante de primeira viagem. Verifique na ferramenta de Web Analytics do site da sua empresa se não estou com a razão. Caso você não tenha acesso a sua ferramenta de Analytics ou não consiga localizar este relatório, me envie um e-mail que retorno com diversos exemplos para sua análise.

. O lado direito do site não possui nenhuma informação importante, pois ele não recebe praticamente nenhuma atenção do visitante. É o que denominamos de área perdida. Imagina se sua empresa coloca nesta área seu produto revolucionário? O que irá acontecer? Fracasso de vendas com certeza.

Mas navegabilidade é uma coisa e usabilidade é outra. A partir da análise de navegabilidade do layout do projeto Web entra em cena a necessidade de desenvolver este site com total usabilidade, pois de nada adianta o usuário visualizar o que queremos, mas depois ele enfrenta dificuldades, nas páginas internas.

Muitas vezes o usuário navega durante muito tempo no site, mas não porque ele está satisfeito com o que encontrou mas sim porque ele não consegue localizar de forma simples o que deseja.

Page 15: Trata da forma de como se navega (vai de uma página para outra) por um site. De uma forma geral, se você pode ir de uma página para qualquer outra de.

Existem diversos estudos que usam o Eyetracking. Trata-se de uma tecnologia que permite seguir o movimento dos olhos do visitante, e desta forma obter dados sobre a eficácia do design do site. Outra ferramenta muito útil é o Google Website Optimizer (GWO), que é gratuita e permite testar e otimizar o conteúdo e o design do seu site.

Eu me atrevo a afirmar que um projeto Web será um sucesso ou não, não só pelo investimento para gerar audiência qualificada, mas principalmente ao gerar esta audiência, ele consiga atrair este visitante para que retorne o mais rápido possível, que denominamos de experiência de navegação atraente.

Page 16: Trata da forma de como se navega (vai de uma página para outra) por um site. De uma forma geral, se você pode ir de uma página para qualquer outra de.

Globo.com um BOM exemplo de Usabilidade...

Page 17: Trata da forma de como se navega (vai de uma página para outra) por um site. De uma forma geral, se você pode ir de uma página para qualquer outra de.

Surgiu.com.br um Exemplo péssima, horrível, etc. Usabilidade

Page 18: Trata da forma de como se navega (vai de uma página para outra) por um site. De uma forma geral, se você pode ir de uma página para qualquer outra de.

Usada principalmente para organizar de forma Usada principalmente para organizar de forma plausível um espaço de um sistema ou site.plausível um espaço de um sistema ou site.

Consiste no design de ambientes informacionais Consiste no design de ambientes informacionais compartilhados, que vem a ser o estado de desordem compartilhados, que vem a ser o estado de desordem natural de qualquer sistema, na ausência de uma força natural de qualquer sistema, na ausência de uma força organizadora.organizadora.

Estabelecimento de padrões capazes de homogeneizar Estabelecimento de padrões capazes de homogeneizar o significado de palavras, expressões e símbolos o significado de palavras, expressões e símbolos utilizados em todo o ciclo de produção das soluções de utilizados em todo o ciclo de produção das soluções de tecnologia da informaçãotecnologia da informação. Um vocabulário controlado . Um vocabulário controlado contribui muito para minimizar as barreiras de contribui muito para minimizar as barreiras de entendimento, proporcionando um meio eficiente e entendimento, proporcionando um meio eficiente e confiável para a troca de informações.confiável para a troca de informações.

Page 19: Trata da forma de como se navega (vai de uma página para outra) por um site. De uma forma geral, se você pode ir de uma página para qualquer outra de.

O objetivo do O objetivo do wireframewireframe é ajudar o é ajudar o desenvolvedor de sistemas a entender o desenvolvedor de sistemas a entender o que o cliente está querendo, mostrando que o cliente está querendo, mostrando os requisitos funcionais de um sistema.os requisitos funcionais de um sistema.

Wireframe é um desenho básico de uma Wireframe é um desenho básico de uma interface. Este desenho, no entanto, deve interface. Este desenho, no entanto, deve retratar toda a arquitetura de informação retratar toda a arquitetura de informação do sistema desejada pelo cliente.do sistema desejada pelo cliente.

Page 20: Trata da forma de como se navega (vai de uma página para outra) por um site. De uma forma geral, se você pode ir de uma página para qualquer outra de.

Existem muitas ferramentas para fazer Existem muitas ferramentas para fazer wireframes, entre as mais conhecidas o wireframes, entre as mais conhecidas o Axure e Microsoft Visio, MockupScreens Axure e Microsoft Visio, MockupScreens alguns arquitetos de informação alguns arquitetos de informação utilizam até mesmo o Microsoft Power utilizam até mesmo o Microsoft Power Point ou outro programa de Point ou outro programa de apresentação de slides para desenhar apresentação de slides para desenhar os rascunhos da interface.os rascunhos da interface.

Page 21: Trata da forma de como se navega (vai de uma página para outra) por um site. De uma forma geral, se você pode ir de uma página para qualquer outra de.
Page 22: Trata da forma de como se navega (vai de uma página para outra) por um site. De uma forma geral, se você pode ir de uma página para qualquer outra de.

Um sitemap (mapa do site) mostra o Um sitemap (mapa do site) mostra o framework interno e a organização de framework interno e a organização de conteúdo do seu site para os sistemas conteúdo do seu site para os sistemas de busca. O sitemap do seu site deve de busca. O sitemap do seu site deve refletir a maneira como seus visitantes refletir a maneira como seus visitantes irão intuitivamente trabalhar (ou irão intuitivamente trabalhar (ou navegar) através de seu site.navegar) através de seu site.