Melhores Práticas de Usabilidade no Desenvolvimento Web
-
Upload
keidi-nienkotter -
Category
Technology
-
view
3.133 -
download
0
description
Transcript of Melhores Práticas de Usabilidade no Desenvolvimento Web
![Page 1: Melhores Práticas de Usabilidade no Desenvolvimento Web](https://reader033.fdocumentos.com/reader033/viewer/2022051111/555b32a7d8b42afc348b4d5b/html5/thumbnails/1.jpg)
ESTUDO DAS MELHORES PRÁTICAS DE USABILIDADE NO DESENVOLVIMENTO WEB
Keidi Nienkötter
Prof. Orientador Francisco Spaeth
![Page 2: Melhores Práticas de Usabilidade no Desenvolvimento Web](https://reader033.fdocumentos.com/reader033/viewer/2022051111/555b32a7d8b42afc348b4d5b/html5/thumbnails/2.jpg)
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)
![Page 3: Melhores Práticas de Usabilidade no Desenvolvimento Web](https://reader033.fdocumentos.com/reader033/viewer/2022051111/555b32a7d8b42afc348b4d5b/html5/thumbnails/3.jpg)
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)
![Page 4: Melhores Práticas de Usabilidade no Desenvolvimento Web](https://reader033.fdocumentos.com/reader033/viewer/2022051111/555b32a7d8b42afc348b4d5b/html5/thumbnails/4.jpg)
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).
![Page 5: Melhores Práticas de Usabilidade no Desenvolvimento Web](https://reader033.fdocumentos.com/reader033/viewer/2022051111/555b32a7d8b42afc348b4d5b/html5/thumbnails/5.jpg)
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)
![Page 6: Melhores Práticas de Usabilidade no Desenvolvimento Web](https://reader033.fdocumentos.com/reader033/viewer/2022051111/555b32a7d8b42afc348b4d5b/html5/thumbnails/6.jpg)
NAVEGAÇÃO LOCAL
![Page 7: Melhores Práticas de Usabilidade no Desenvolvimento Web](https://reader033.fdocumentos.com/reader033/viewer/2022051111/555b32a7d8b42afc348b4d5b/html5/thumbnails/7.jpg)
NAVEGAÇÃO CONTEXTUAL
![Page 8: Melhores Práticas de Usabilidade no Desenvolvimento Web](https://reader033.fdocumentos.com/reader033/viewer/2022051111/555b32a7d8b42afc348b4d5b/html5/thumbnails/8.jpg)
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.
![Page 9: Melhores Práticas de Usabilidade no Desenvolvimento Web](https://reader033.fdocumentos.com/reader033/viewer/2022051111/555b32a7d8b42afc348b4d5b/html5/thumbnails/9.jpg)
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)
![Page 10: Melhores Práticas de Usabilidade no Desenvolvimento Web](https://reader033.fdocumentos.com/reader033/viewer/2022051111/555b32a7d8b42afc348b4d5b/html5/thumbnails/10.jpg)
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.
![Page 11: Melhores Práticas de Usabilidade no Desenvolvimento Web](https://reader033.fdocumentos.com/reader033/viewer/2022051111/555b32a7d8b42afc348b4d5b/html5/thumbnails/11.jpg)
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)
![Page 12: Melhores Práticas de Usabilidade no Desenvolvimento Web](https://reader033.fdocumentos.com/reader033/viewer/2022051111/555b32a7d8b42afc348b4d5b/html5/thumbnails/12.jpg)
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.
![Page 13: Melhores Práticas de Usabilidade no Desenvolvimento Web](https://reader033.fdocumentos.com/reader033/viewer/2022051111/555b32a7d8b42afc348b4d5b/html5/thumbnails/13.jpg)
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)
![Page 14: Melhores Práticas de Usabilidade no Desenvolvimento Web](https://reader033.fdocumentos.com/reader033/viewer/2022051111/555b32a7d8b42afc348b4d5b/html5/thumbnails/14.jpg)
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)
![Page 15: Melhores Práticas de Usabilidade no Desenvolvimento Web](https://reader033.fdocumentos.com/reader033/viewer/2022051111/555b32a7d8b42afc348b4d5b/html5/thumbnails/15.jpg)
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)
![Page 16: Melhores Práticas de Usabilidade no Desenvolvimento Web](https://reader033.fdocumentos.com/reader033/viewer/2022051111/555b32a7d8b42afc348b4d5b/html5/thumbnails/16.jpg)
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
![Page 17: Melhores Práticas de Usabilidade no Desenvolvimento Web](https://reader033.fdocumentos.com/reader033/viewer/2022051111/555b32a7d8b42afc348b4d5b/html5/thumbnails/17.jpg)
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)
![Page 18: Melhores Práticas de Usabilidade no Desenvolvimento Web](https://reader033.fdocumentos.com/reader033/viewer/2022051111/555b32a7d8b42afc348b4d5b/html5/thumbnails/18.jpg)
PESQUISA - COMO FOI DEFINIDA
Utilizar um site que já está no ar; Um site que tenha alguma característica
incomum; Testes rápidos.
![Page 19: Melhores Práticas de Usabilidade no Desenvolvimento Web](https://reader033.fdocumentos.com/reader033/viewer/2022051111/555b32a7d8b42afc348b4d5b/html5/thumbnails/19.jpg)
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);
![Page 20: Melhores Práticas de Usabilidade no Desenvolvimento Web](https://reader033.fdocumentos.com/reader033/viewer/2022051111/555b32a7d8b42afc348b4d5b/html5/thumbnails/20.jpg)
PESQUISA - RESULTADOS
Conhecimento em informática: Baixo Intermediário Alto
34%
61%
5%
Alto
Intermediário
Baixo
![Page 21: Melhores Práticas de Usabilidade no Desenvolvimento Web](https://reader033.fdocumentos.com/reader033/viewer/2022051111/555b32a7d8b42afc348b4d5b/html5/thumbnails/21.jpg)
PESQUISA - RESULTADOS
Qual a periodicidade que você acessa a Internet? Todos os dias Uma vez por semana Uma vez por mês Raramente
88%
9%0%3%
Todos os dias
Uma vez por semana
Uma vez por mês
Raramente
![Page 22: Melhores Práticas de Usabilidade no Desenvolvimento Web](https://reader033.fdocumentos.com/reader033/viewer/2022051111/555b32a7d8b42afc348b4d5b/html5/thumbnails/22.jpg)
PESQUISA - RESULTADOS
Pra você, qual é a coisa mais marcante no site? Ou o que você clicou primeiro?
45%
22%
10%
7%
5%5% 2%
2%
2%
Menu
Fotos
Propaganda Villa Vicenzi
Imóveis
Organização
Lay-out
Praticidade
Simplicidade
História da empresa
![Page 23: Melhores Práticas de Usabilidade no Desenvolvimento Web](https://reader033.fdocumentos.com/reader033/viewer/2022051111/555b32a7d8b42afc348b4d5b/html5/thumbnails/23.jpg)
PESQUISA - RESULTADOS
Para você qual é a principal função deste site?
34%
47%
9%10%
Divulgação de imóveis
Divulgação de imóveis a venda
Venda e locação de imóveis
Mostrar produtos / Mostrar figuras/ Negócios / Compra de imóveis /Informação / Divulgar o trabalho daimobiliária
![Page 24: Melhores Práticas de Usabilidade no Desenvolvimento Web](https://reader033.fdocumentos.com/reader033/viewer/2022051111/555b32a7d8b42afc348b4d5b/html5/thumbnails/24.jpg)
PESQUISA - RESULTADOS
Que cores você consegue lembrar que tem no site?
52
6
43
12
49
24
0
10
20
30
40
50
60
Amarelo Laranja Branco Verde Azul Cinza
Amarelo
Laranja
Branco
Verde
Azul
Cinza
![Page 25: Melhores Práticas de Usabilidade no Desenvolvimento Web](https://reader033.fdocumentos.com/reader033/viewer/2022051111/555b32a7d8b42afc348b4d5b/html5/thumbnails/25.jpg)
PESQUISA - RESULTADOS
O site é dividido em três colunas. Você consegue se lembrar do conteúdo de cada uma delas? Coluna da esquerda
49
29
1
810
37
0
10
20
30
40
50
60
Menu
Contatos
Informações
Endereço
Telefones
Logotipo
Não respondeu
![Page 26: Melhores Práticas de Usabilidade no Desenvolvimento Web](https://reader033.fdocumentos.com/reader033/viewer/2022051111/555b32a7d8b42afc348b4d5b/html5/thumbnails/26.jpg)
PESQUISA - RESULTADOS
O site é dividido em três colunas. Você consegue se lembrar do conteúdo de cada uma delas? Coluna central
25
32
1514
0
5
10
15
20
25
30
35
Banner FormulárioContato
Link empresa Não respondeu
Banner
Formulário Contato
Link empresa
Não respondeu
![Page 27: Melhores Práticas de Usabilidade no Desenvolvimento Web](https://reader033.fdocumentos.com/reader033/viewer/2022051111/555b32a7d8b42afc348b4d5b/html5/thumbnails/27.jpg)
PESQUISA - RESULTADOS
O site é dividido em três colunas. Você consegue se lembrar do conteúdo de cada uma delas? Coluna da direita
22%
39%
36%
3%
Somente imóveis
Observou todo o conteúdo
Só observou as fotos
Não respondeu
![Page 28: Melhores Práticas de Usabilidade no Desenvolvimento Web](https://reader033.fdocumentos.com/reader033/viewer/2022051111/555b32a7d8b42afc348b4d5b/html5/thumbnails/28.jpg)
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
![Page 29: Melhores Práticas de Usabilidade no Desenvolvimento Web](https://reader033.fdocumentos.com/reader033/viewer/2022051111/555b32a7d8b42afc348b4d5b/html5/thumbnails/29.jpg)
PESQUISA - RESULTADOS
Notou algum banner de divulgação?
55%
45%
Sim
Não
![Page 30: Melhores Práticas de Usabilidade no Desenvolvimento Web](https://reader033.fdocumentos.com/reader033/viewer/2022051111/555b32a7d8b42afc348b4d5b/html5/thumbnails/30.jpg)
PESQUISA - RESULTADOS
Por acaso, você já visitou o site de outra imobiliária?
Caso Sim: São melhores ou piores que o site apresentado?
![Page 31: Melhores Práticas de Usabilidade no Desenvolvimento Web](https://reader033.fdocumentos.com/reader033/viewer/2022051111/555b32a7d8b42afc348b4d5b/html5/thumbnails/31.jpg)
PESQUISA - RESULTADOS
Em que o site precisa melhorar?
16
21
25
22
0
5
10
15
20
25
30
Organização Beleza Conteúdo Serviços
Organização
Beleza
Conteúdo
Serviços
![Page 32: Melhores Práticas de Usabilidade no Desenvolvimento Web](https://reader033.fdocumentos.com/reader033/viewer/2022051111/555b32a7d8b42afc348b4d5b/html5/thumbnails/32.jpg)
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.
![Page 33: Melhores Práticas de Usabilidade no Desenvolvimento Web](https://reader033.fdocumentos.com/reader033/viewer/2022051111/555b32a7d8b42afc348b4d5b/html5/thumbnails/33.jpg)
ANALISE GERAL DA PESQUISA
Conteúdo; Navegação; Links de e-mail; Buscas.
![Page 34: Melhores Práticas de Usabilidade no Desenvolvimento Web](https://reader033.fdocumentos.com/reader033/viewer/2022051111/555b32a7d8b42afc348b4d5b/html5/thumbnails/34.jpg)
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.
![Page 35: Melhores Práticas de Usabilidade no Desenvolvimento Web](https://reader033.fdocumentos.com/reader033/viewer/2022051111/555b32a7d8b42afc348b4d5b/html5/thumbnails/35.jpg)
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.
![Page 36: Melhores Práticas de Usabilidade no Desenvolvimento Web](https://reader033.fdocumentos.com/reader033/viewer/2022051111/555b32a7d8b42afc348b4d5b/html5/thumbnails/36.jpg)
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.
![Page 37: Melhores Práticas de Usabilidade no Desenvolvimento Web](https://reader033.fdocumentos.com/reader033/viewer/2022051111/555b32a7d8b42afc348b4d5b/html5/thumbnails/37.jpg)
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.
![Page 38: Melhores Práticas de Usabilidade no Desenvolvimento Web](https://reader033.fdocumentos.com/reader033/viewer/2022051111/555b32a7d8b42afc348b4d5b/html5/thumbnails/38.jpg)
Perguntas?