Upload
keidi-nienkotter
View
3.133
Download
0
Embed Size (px)
DESCRIPTION
Apresentação de Trabalho de Conclusão de Curso.
Citation preview
ESTUDO DAS MELHORES PRÁTICAS DE USABILIDADE NO DESENVOLVIMENTO WEB
Keidi Nienkötter
Prof. Orientador Francisco Spaeth
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)
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)
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).
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)
NAVEGAÇÃO LOCAL
NAVEGAÇÃO CONTEXTUAL
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.
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)
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.
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)
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.
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)
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)
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)
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
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)
PESQUISA - COMO FOI DEFINIDA
Utilizar um site que já está no ar; Um site que tenha alguma característica
incomum; Testes rápidos.
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);
PESQUISA - RESULTADOS
Conhecimento em informática: Baixo Intermediário Alto
34%
61%
5%
Alto
Intermediário
Baixo
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
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
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
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
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
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
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
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
PESQUISA - RESULTADOS
Notou algum banner de divulgação?
55%
45%
Sim
Não
PESQUISA - RESULTADOS
Por acaso, você já visitou o site de outra imobiliária?
Caso Sim: São melhores ou piores que o site apresentado?
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
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.
ANALISE GERAL DA PESQUISA
Conteúdo; Navegação; Links de e-mail; Buscas.
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.
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.
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.
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.
Perguntas?