SlideShare uma empresa Scribd logo
1 de 53
ALUNA: MAIARA ZENATTI TRONCO
ORIENTADORA: PROFª DRª HILDA CARVALHO DE OLIVEIRA
Arquitetura da Informação e Avaliação de
Websites, considerando critérios de
Usabilidade, Comunicabilidade e
Acessibilidade
Rio Claro
Jul. 2014 – Mar. 2015
TRABALHO DE
GRADUAÇÃO
3. Metodologia
2. Objetivos1.Introdução
5. Conclusão
4. Avaliações e
Guias de
Recomendações
3. Metodologia
1.Introdução
5. Conclusão
2. Objetivos
4. Avaliações e
Guias de
Recomendações
• Grandes quantidades de opções
de sites na Web
• Facilidade e rapidez na migração
de um Website para outro
4
Usuários menos tolerantes com
sistemas:
• De difícil recordação
• Com respostas lentas
•Que não satisfaçam suas
necessidades
Fonte: Netcraft (2015)
 Campo de estudo interdisciplinar
Design, Sociologia, Computação, Ergonomia, Psicologia Cognitiva
 Como e porque pessoas
 Soluções de interfaces centradas no ser humano
Interação agradável e intuitiva
5
Interação Humano-Computador (IHC)
utilizam SISTEMAS
COMPUTACIONAIS
6
7
Visual
Esqueleto
Estrutura
Escopo
Estratégia
Orientaçãoatarefas Orientaçãoainformações
Usabilidade
Comunicabilidade
Arquitetura da Informação
Acessibilidade
Trajetória do olhar
3. Metodologia
1.Introdução
5. Conclusão
4. Avaliações e
Guias de
Recomendações
2. Objetivos
Estudos e
levantamentos sobre
conceitos e técnicas
na área de IHC
voltados a Websites
Objetivos
EXPERIÊNCIA DO
USUÁRIO (UX)
Usabilidade
Comunicabilidade
Acessibilidade
ARQUITETURA DA
INFORMAÇÃO
Objetivos...
Conhecimentos
adquiridos e técnicas
de avaliação de IHC
10
Objetivos
Guia de recomendações
para melhorias na
interface
APLICAR
...Objetivos
1.Introdução
5. Conclusão
4. Avaliações e
Guias de
Recomendações
3. Metodologia
2. Objetivos
Visão e comportamento do usuário em relação
ao uso do sistema
• Facilidade de aprendizado
• Facilidade de recordação
• Eficiência
• Segurança no uso
• Satisfação do usuário
Usabilidade
Heurísticas de Nielsen
• Proposta em 1994
• Sun Microsystems
• Baseadas em 294 tipos de problemas
• Englobam 75% dos problemas
1999 → Princípios básicos para o ambiente Web
2000 → 10 heurísticas de Nielsen
1. Visibilidade do estado do sistema
2. Correspondência entre o sistema e o mundo real
3. Consistência e padronização
4. Reconhecimento em vez de recordação
5. Controle do usuário e liberdade
6. Flexibilidade e eficiência de uso
7. Prevenção de erros
8. Reconhecimento e reparação de erros pelos usuários
9. Estética e design minimalista
10.Ajuda e documentação
Fonte: Nielsen (2000)
HEURÍSTICAS DE NIELSEN
Princípios básicos para Web
Fonte: Nielsen (1999)
Clareza na arquitetura da informação
Mapa de localização das informações
Facilidade de navegação
Máximo três cliques
Simplicidade
Facilitar a localização das informações
Não omitir informações importantes
Relevância do conteúdo
Textos objetivos
Letras e cores adequadas
Manter consistência
Fontes comuns
Não usar layout ambicioso
Tempo suportável
Máximo 10 segundos
Foco nos usuários
Focar nas atividades dos usuários
• Visibilidade do estado
do sistema
• Correspondência entre
o sistema e o mundo real
• Consistência e
padronização
• Controle do usuário
e liberdade
• Flexibilidade e
eficiência de uso
• Estética e design
minimalista
Clareza na arquitetura da
informação
Tempo suportável
Relevância de conteúdo
Manter consistência
Facilidade de navegação
Simplicidade
Foco no usuário
HEURÍSTICAS DE NIELSEN x PRINCÍPIOS PARA WEB
Visão do projetista do que deve ser mais
adequado ao usuário
Comunicabilidade
Fonte: Barbosa e Silva (2010)
SIGNOS
Representações que guiam o usuário a interpretar
a informação passada pelo projetista
Signo
Fonte: Prates (2007)
Facilidade de acesso e de uso de sistemas por
qualquer pessoa e em diferentes contextos
Diretrizes de acessibilidade para conteúdo Web (WCAG)
Perceptível
Operável
Compreensível
 Robusto
Acessibilidade
Princípios de acessibilidade para Web
Fonte: W3C (2008)
Perceptível: informações e componentes da interface de
forma que os usuários possam perceber
 Operável: componentes da interface e navegação possam
ser operadas
Compreensível: informação e operação da interface
possam ser entendidas
 Robusto: interpretado por diferentes tecnologias
Categorização e disposição da informação de
forma que possa ser compreendida rapidamente
Arquitetura da informação
Fonte: Gallucci (2011)
• Categorias de informação
• Organização da estrutura
• Agrupamentos de conteúdo
• Terminologia apropriada
• Posicionamento dos elementos
MODELOS DE EXPLORAÇÃO DA INTERFACE
3. Metodologia
1.Introdução
5. Conclusão
4. Avaliações e
Guia de
Recomendações
2. Objetivos
Estudo de caso
4.5 Oficina de
Card Sorting
4.6 Guia de
Recomendações
4.3 Avaliação
Heurística
4.4 Teste de
Usabilidade
4.1 Reuniões
Preliminares
4.2 Pesquisa de
Opinião
CONFIGURAÇÃO ATUAL DO SITE
PROPOSTA DE NOVA REORGANIZAÇÃO DO SITE
29
PESQUISA DE OPINIÃO: QUESTIONÁRIO
...
• Princípios básicos de
Nielsen voltados para Web
• Heurísticas de Nielsen para
sistemas de modo geral
• Guia de recomendações de
acessibilidade para
conteúdo Web
• Google Forms (On-line)
• Duração: 15 dias
• 26 questões
• 210 respondentes
Perfil dos usuários:
• 69% < 24 anos
• 90% = graduação ou pós-graduação
• 60% >= 3º ano
Melhorar o layout, navegação ou disposição das informações
Facilitar o acesso aos serviços mais utilizados
Criar ou permitir a criação de aplicativos relacionados a Biblioteca
Criar versão mobile do site
Evitar a abertura de novas abas/janelas
Evitar o excesso de submenus e nomes confusos nos menus
Evitar o excesso de informações na página inicial
Revisar textos confusos que podem gerar dúvidas
Inserir link para o site da Biblioteca na página principal da Unesp
91% acessa o site pelo
menos uma vez por mês
86% utiliza o site para acessar os catálogos do acervo
ou realizar/obter informações dos serviços oferecidos
86% gostaria que os serviços e itens mais
utilizados estivessem na página inicial
79% têm interesse em acessar o site
através de tablets ou smartphones
72% acha que a navegação pelo site é
fácil, porém confusa em certas partes
Técnica de inspeção da interface usada para detectar possíveis
inadequações que acarretam em dificuldades na utilização do site
AVALIAÇÃO HEURÍSTICA
Seminário de
explicação sobre
heurísticas e princípios
Preenchimento de template
composto por heurísticas
Jéssica Duzo
Maria Anatania
Pucci
Tiago Neves
36
Técnica usada para avaliar a interação entre os usuários e o site,
visando a coleta de dados comportamentais
TESTE DE USABILIDADE
• Questionário Pré-teste
• Roteiro de orientação do participante
• Lista de tarefas
• Coleta de dados
• Questionário de avaliação
• Termo de consentimento
Área de atuação
Já utilizou o site
Frequência que utiliza o site
Tempo que utiliza o site
37
• 4 alunos de graduação
• 3 alunos de pós-graduação
• 2 docentes
- Duração ≈ 30 minutos
- Local de preferência do
participante
- Notebook 14’’ – Windows 8.1
- Morae TechSmith Recorder
e Manager v. 3.3.3 (Trial)
TESTE DE USABILIDADE
MORAE TECHSMITH RECORDER
MORAE TECHSMITH MANAGER
Linguagem simples
Dificuldade de navegação
Dificuldades em entender o sistema
Problemas com os termos utilizados
42
Oficina de Card Sorting
Técnica usada para descobrir como um grupo de usuários agrupam
itens de informação em sua mente (taxonomia)
• Engenharia de Software
• 21 participantes do curso de Computação
• Post-its coloridos numerados com nível hierárquico
• UXSort 2.3
44
ANÁLISE CLASSIFICATÓRIA
• Método estatístico
• Mede a associação e a
similaridade dos itens
• Agrupa itens usando medidas
de distância
• Diagrama de árvore
DIAGRAMA DE ÁRVORE
46
Guia de recomendações
Diretriz 1 - Contexto e navegação
1.1. Página inicial com propósito claro
1.2. Estrutura de navegação lógica e fácil
1.3. Conteúdos mais importantes em áreas visíveis da tela
1.4. Elementos da identidade visual no mesmo lugar
1.5. Acesso simples a conteúdos ou serviços mais utilizados
1.6. Ferramenta de busca
1.7. Links em uma mesma janela
1.8. Documentação, tutorial e ajuda de maneira dinâmica
1.9. Preenchimento de formulários
47
Diretriz 2 - Carga de informação
2.1. Excesso de informação na página inicial
2.2. Elementos desnecessários
2.3. Rolagem vertical ou horizontal da tela
Diretriz 3 - Autonomia
3.1. Função do botão “voltar”
3.2. Interromper ou cancelar o processamento
3.3. Controle sobre a navegação
Diretriz 4 - Erros
4.1. Ações reversíveis
4.2. Indisponibilidade de partes do site
4.3. Mensagens de erro concisas e explicativas
48
Diretriz 5 - Design
5.1. Design padrão em todas as páginas
5.2. Agrupamento e hierarquia claros
5.3. Espaços em branco para separar conteúdos e assuntos diferentes
5.4. Fundo com cores neutras
5.5 Cuidado com estilos de fontes utilizados
5.6 Cuidado com animações
5.7. Leitura agradável
5.8. Textos alinhados à esquerda
5.9. Tempo de carregamento
5.10. Imagens com ALT tags apropriadas
49
Diretriz 6 - Redação
6.1. Linguagem clara e familiar
6.2. Textos objetivos
6.3. Texto em tópicos
6.4. Títulos informativos e com apelo visual
6.5. Termos simples e claros em rótulos do menu
Diretriz 7 - Consistência e familiaridade
7.1. Utilização de convenções
7.2. Estrutura do site de acordo com o contexto das tarefas
7.3. Não ligar os links de contato a endereços eletrônicos
1.Introdução 2. Objetivos
3. Metodologia
4. Avaliações e
Guias de
Recomendações
5. Conclusão
Importância da participação do usuário no desenvolvimento ou
no re-projeto de um Website
- Diminuição de problemas futuros
Contribuições:
• Compilação de conhecimentos e técnicas de IHC
• Material utilizado, como deve ser feito e como analisar
• Guia de recomendações para melhorias na interface
CONCLUSÃO
Trabalhos futuros:
• Template para replicação do modelo de Rio Claro para outros Câmpus
• Aplicação dos métodos de avaliação de comunicabilidade de sistemas
(MAC e MIS)
Site da Biblioteca:
Interação está apta a ocorrer de forma eficaz
Causas das dificuldades:
Falhas na categorização e disposição da informação
Uso de terminologias desconhecidas ou confusas aos usuários
CONCLUSÃO
Arquitetura da Informação e Avaliação de Websites, considerando critérios de Usabilidade, Comunicabilidade e Acessibilidade

Mais conteúdo relacionado

Mais procurados

Usabilidade heurística
Usabilidade heurísticaUsabilidade heurística
Usabilidade heurísticaOtavio Augusto
 
Introdução à Arquitetura de Informação
Introdução à Arquitetura de InformaçãoIntrodução à Arquitetura de Informação
Introdução à Arquitetura de InformaçãoInstituto Faber-Ludens
 
Conceitos básicos de usabilidade e acessibilidade
Conceitos básicos de usabilidade e acessibilidadeConceitos básicos de usabilidade e acessibilidade
Conceitos básicos de usabilidade e acessibilidadeNécio de Lima Veras
 
Processos de Desenvolvimento de Software - teoria e prática
Processos de Desenvolvimento de Software - teoria e práticaProcessos de Desenvolvimento de Software - teoria e prática
Processos de Desenvolvimento de Software - teoria e práticaRalph Rassweiler
 
Arquitetura de Informação e Usabilidade na WEB
Arquitetura de Informação e Usabilidade na WEBArquitetura de Informação e Usabilidade na WEB
Arquitetura de Informação e Usabilidade na WEBSergio Luis dos Santos Lima
 
Usabilidade Aula-05. Processos: heuristicas
Usabilidade Aula-05. Processos: heuristicasUsabilidade Aula-05. Processos: heuristicas
Usabilidade Aula-05. Processos: heuristicasAlan Vasconcelos
 
Navegação e Arquitetura de Informação
Navegação e Arquitetura de InformaçãoNavegação e Arquitetura de Informação
Navegação e Arquitetura de InformaçãoLuiz Agner
 
Ergonomia e Usabilidade AULA 2: Conceitos, Engenharia de Usabilidade
Ergonomia e Usabilidade AULA 2: Conceitos, Engenharia de UsabilidadeErgonomia e Usabilidade AULA 2: Conceitos, Engenharia de Usabilidade
Ergonomia e Usabilidade AULA 2: Conceitos, Engenharia de UsabilidadeDra. Camila Hamdan
 
Introdução a analise de sistemas i
Introdução a analise de sistemas iIntrodução a analise de sistemas i
Introdução a analise de sistemas iRay Fran Pires
 
Projecto multimédia
Projecto multimédiaProjecto multimédia
Projecto multimédiaNuno Cardoso
 
Interação Humano-Computador - História, Conceitos e Heurísticas de Nielsen
Interação Humano-Computador - História, Conceitos e Heurísticas de NielsenInteração Humano-Computador - História, Conceitos e Heurísticas de Nielsen
Interação Humano-Computador - História, Conceitos e Heurísticas de NielsenRos Galabo, PhD
 
Aula - Introdução a Engenharia de Software
Aula - Introdução a Engenharia de SoftwareAula - Introdução a Engenharia de Software
Aula - Introdução a Engenharia de SoftwareCloves da Rocha
 
Sistema de rotulagem
Sistema de rotulagemSistema de rotulagem
Sistema de rotulagemRobson Santos
 
Apresentação TCC - Banca
Apresentação TCC - BancaApresentação TCC - Banca
Apresentação TCC - Bancaguest2c4508
 
Palestra - Grid : Estudos de Caso
Palestra - Grid : Estudos de CasoPalestra - Grid : Estudos de Caso
Palestra - Grid : Estudos de CasoLuiz Agner
 
Arquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e CenáriosArquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e Cenáriosposgraduacaorj
 
Usabilidade aula-01 Introdução
Usabilidade aula-01 IntroduçãoUsabilidade aula-01 Introdução
Usabilidade aula-01 IntroduçãoAlan Vasconcelos
 

Mais procurados (20)

Usabilidade heurística
Usabilidade heurísticaUsabilidade heurística
Usabilidade heurística
 
Arquitetura de Software
Arquitetura de SoftwareArquitetura de Software
Arquitetura de Software
 
Introdução à Arquitetura de Informação
Introdução à Arquitetura de InformaçãoIntrodução à Arquitetura de Informação
Introdução à Arquitetura de Informação
 
Conceitos básicos de usabilidade e acessibilidade
Conceitos básicos de usabilidade e acessibilidadeConceitos básicos de usabilidade e acessibilidade
Conceitos básicos de usabilidade e acessibilidade
 
Processos de Desenvolvimento de Software - teoria e prática
Processos de Desenvolvimento de Software - teoria e práticaProcessos de Desenvolvimento de Software - teoria e prática
Processos de Desenvolvimento de Software - teoria e prática
 
Arquitetura de Informação e Usabilidade na WEB
Arquitetura de Informação e Usabilidade na WEBArquitetura de Informação e Usabilidade na WEB
Arquitetura de Informação e Usabilidade na WEB
 
Arquitetura MVC
Arquitetura MVCArquitetura MVC
Arquitetura MVC
 
Usabilidade Aula-05. Processos: heuristicas
Usabilidade Aula-05. Processos: heuristicasUsabilidade Aula-05. Processos: heuristicas
Usabilidade Aula-05. Processos: heuristicas
 
Navegação e Arquitetura de Informação
Navegação e Arquitetura de InformaçãoNavegação e Arquitetura de Informação
Navegação e Arquitetura de Informação
 
Ergonomia e Usabilidade AULA 2: Conceitos, Engenharia de Usabilidade
Ergonomia e Usabilidade AULA 2: Conceitos, Engenharia de UsabilidadeErgonomia e Usabilidade AULA 2: Conceitos, Engenharia de Usabilidade
Ergonomia e Usabilidade AULA 2: Conceitos, Engenharia de Usabilidade
 
Introdução a analise de sistemas i
Introdução a analise de sistemas iIntrodução a analise de sistemas i
Introdução a analise de sistemas i
 
Projecto multimédia
Projecto multimédiaProjecto multimédia
Projecto multimédia
 
Interação Humano-Computador - História, Conceitos e Heurísticas de Nielsen
Interação Humano-Computador - História, Conceitos e Heurísticas de NielsenInteração Humano-Computador - História, Conceitos e Heurísticas de Nielsen
Interação Humano-Computador - História, Conceitos e Heurísticas de Nielsen
 
Usabilidade - Metas, Principios e Heuristicas
Usabilidade -  Metas, Principios e HeuristicasUsabilidade -  Metas, Principios e Heuristicas
Usabilidade - Metas, Principios e Heuristicas
 
Aula - Introdução a Engenharia de Software
Aula - Introdução a Engenharia de SoftwareAula - Introdução a Engenharia de Software
Aula - Introdução a Engenharia de Software
 
Sistema de rotulagem
Sistema de rotulagemSistema de rotulagem
Sistema de rotulagem
 
Apresentação TCC - Banca
Apresentação TCC - BancaApresentação TCC - Banca
Apresentação TCC - Banca
 
Palestra - Grid : Estudos de Caso
Palestra - Grid : Estudos de CasoPalestra - Grid : Estudos de Caso
Palestra - Grid : Estudos de Caso
 
Arquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e CenáriosArquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e Cenários
 
Usabilidade aula-01 Introdução
Usabilidade aula-01 IntroduçãoUsabilidade aula-01 Introdução
Usabilidade aula-01 Introdução
 

Destaque

Design Centrado no usuário
Design Centrado no usuárioDesign Centrado no usuário
Design Centrado no usuárioTatiana Tavares
 
Desing de navegação web parte III
Desing de navegação web parte IIIDesing de navegação web parte III
Desing de navegação web parte IIIWellington Marion
 
Aula - Interfaces e Estilos de Interação
Aula - Interfaces e Estilos de InteraçãoAula - Interfaces e Estilos de Interação
Aula - Interfaces e Estilos de InteraçãoFabio Moura Pereira
 
Heurística, Principios e Usabilidade na web
Heurística, Principios e Usabilidade na webHeurística, Principios e Usabilidade na web
Heurística, Principios e Usabilidade na webDaniel Brandão
 

Destaque (6)

Design Centrado no usuário
Design Centrado no usuárioDesign Centrado no usuário
Design Centrado no usuário
 
Cell injury
Cell injury Cell injury
Cell injury
 
Desing de navegação web parte III
Desing de navegação web parte IIIDesing de navegação web parte III
Desing de navegação web parte III
 
Design de navegação web
Design de navegação webDesign de navegação web
Design de navegação web
 
Aula - Interfaces e Estilos de Interação
Aula - Interfaces e Estilos de InteraçãoAula - Interfaces e Estilos de Interação
Aula - Interfaces e Estilos de Interação
 
Heurística, Principios e Usabilidade na web
Heurística, Principios e Usabilidade na webHeurística, Principios e Usabilidade na web
Heurística, Principios e Usabilidade na web
 

Semelhante a Arquitetura da Informação e Avaliação de Websites, considerando critérios de Usabilidade, Comunicabilidade e Acessibilidade

Introdução à Arquitetura da Informação com Card Sorting
Introdução à Arquitetura da Informação com Card SortingIntrodução à Arquitetura da Informação com Card Sorting
Introdução à Arquitetura da Informação com Card SortingJerry Medeiros
 
Desenvolvimento de Projetos Interativos: Especificação e Implementação
Desenvolvimento de Projetos Interativos: Especificação e ImplementaçãoDesenvolvimento de Projetos Interativos: Especificação e Implementação
Desenvolvimento de Projetos Interativos: Especificação e ImplementaçãoEdyd B. Junges
 
Usabilidade de interface para busca e recuperação de informação na web
Usabilidade de interface para busca e recuperação de informação na webUsabilidade de interface para busca e recuperação de informação na web
Usabilidade de interface para busca e recuperação de informação na webRobson Santos
 
Metodologia para criação de sites
Metodologia para criação de sitesMetodologia para criação de sites
Metodologia para criação de sitesCelina Uemura
 
29/09/2011 - 9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
29/09/2011 -  9h às 12h30 - oficina - arquitetura da informação em sistemas 2...29/09/2011 -  9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
29/09/2011 - 9h às 12h30 - oficina - arquitetura da informação em sistemas 2...Rio Info
 
Qualidade De Sites no INA ey5yb4y
Qualidade De Sites no INA                      ey5yb4y                      Qualidade De Sites no INA                      ey5yb4y
Qualidade De Sites no INA ey5yb4y guestef5899
 
Análise de usabilidade de Intranet - Case: Nova Intrawebb
Análise de usabilidade de Intranet - Case: Nova IntrawebbAnálise de usabilidade de Intranet - Case: Nova Intrawebb
Análise de usabilidade de Intranet - Case: Nova IntrawebbOtávio Souza
 
Avaliação de Usabilidade e Arquitetura de Informação do do Website da Prefeit...
Avaliação de Usabilidade e Arquitetura de Informação do do Website da Prefeit...Avaliação de Usabilidade e Arquitetura de Informação do do Website da Prefeit...
Avaliação de Usabilidade e Arquitetura de Informação do do Website da Prefeit...Marcelo Ramos
 
Como tornar seu site atraente
Como tornar seu site atraenteComo tornar seu site atraente
Como tornar seu site atraenteSuzana Viana Mota
 
A usabilidade na interface
A usabilidade na interfaceA usabilidade na interface
A usabilidade na interfaceOdair Cavichioli
 
RECOMENDAÇÃO DE DOCUMENTOS PARA OS USUÁRIOS DO AVA MOODLE A PARTIR DAS HASHTA...
RECOMENDAÇÃO DE DOCUMENTOS PARA OS USUÁRIOS DO AVA MOODLE A PARTIR DAS HASHTA...RECOMENDAÇÃO DE DOCUMENTOS PARA OS USUÁRIOS DO AVA MOODLE A PARTIR DAS HASHTA...
RECOMENDAÇÃO DE DOCUMENTOS PARA OS USUÁRIOS DO AVA MOODLE A PARTIR DAS HASHTA...Adelton Ribeiro
 
Planejamento e gestão de Portais Corporativos
Planejamento e gestão de Portais CorporativosPlanejamento e gestão de Portais Corporativos
Planejamento e gestão de Portais CorporativosSuzana Ribeiro
 
O Desafio da Usabilidade - Seminário de Metodologia do IBGE 2014
O Desafio da Usabilidade - Seminário de Metodologia do IBGE 2014O Desafio da Usabilidade - Seminário de Metodologia do IBGE 2014
O Desafio da Usabilidade - Seminário de Metodologia do IBGE 2014Luiz Agner
 
Metodologia para Avaliação de Sites
Metodologia para Avaliação de SitesMetodologia para Avaliação de Sites
Metodologia para Avaliação de SitesSimone Cervantes
 

Semelhante a Arquitetura da Informação e Avaliação de Websites, considerando critérios de Usabilidade, Comunicabilidade e Acessibilidade (20)

Introdução à Arquitetura da Informação com Card Sorting
Introdução à Arquitetura da Informação com Card SortingIntrodução à Arquitetura da Informação com Card Sorting
Introdução à Arquitetura da Informação com Card Sorting
 
Web Standards
Web StandardsWeb Standards
Web Standards
 
Desenvolvimento de Projetos Interativos: Especificação e Implementação
Desenvolvimento de Projetos Interativos: Especificação e ImplementaçãoDesenvolvimento de Projetos Interativos: Especificação e Implementação
Desenvolvimento de Projetos Interativos: Especificação e Implementação
 
Usabilidade de interface para busca e recuperação de informação na web
Usabilidade de interface para busca e recuperação de informação na webUsabilidade de interface para busca e recuperação de informação na web
Usabilidade de interface para busca e recuperação de informação na web
 
Metodologia para criação de sites
Metodologia para criação de sitesMetodologia para criação de sites
Metodologia para criação de sites
 
USABILIDADE.
USABILIDADE.USABILIDADE.
USABILIDADE.
 
29/09/2011 - 9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
29/09/2011 -  9h às 12h30 - oficina - arquitetura da informação em sistemas 2...29/09/2011 -  9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
29/09/2011 - 9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
 
Qualidade De Sites no INA ey5yb4y
Qualidade De Sites no INA                      ey5yb4y                      Qualidade De Sites no INA                      ey5yb4y
Qualidade De Sites no INA ey5yb4y
 
Análise de usabilidade de Intranet - Case: Nova Intrawebb
Análise de usabilidade de Intranet - Case: Nova IntrawebbAnálise de usabilidade de Intranet - Case: Nova Intrawebb
Análise de usabilidade de Intranet - Case: Nova Intrawebb
 
sites-boas-praticas
sites-boas-praticassites-boas-praticas
sites-boas-praticas
 
Regras de Design
Regras de DesignRegras de Design
Regras de Design
 
Avaliação de Usabilidade e Arquitetura de Informação do do Website da Prefeit...
Avaliação de Usabilidade e Arquitetura de Informação do do Website da Prefeit...Avaliação de Usabilidade e Arquitetura de Informação do do Website da Prefeit...
Avaliação de Usabilidade e Arquitetura de Informação do do Website da Prefeit...
 
Como tornar seu site atraente
Como tornar seu site atraenteComo tornar seu site atraente
Como tornar seu site atraente
 
A usabilidade na interface
A usabilidade na interfaceA usabilidade na interface
A usabilidade na interface
 
Interface Humano Computador - Aula03 - design de experiência de usuário e aná...
Interface Humano Computador - Aula03 - design de experiência de usuário e aná...Interface Humano Computador - Aula03 - design de experiência de usuário e aná...
Interface Humano Computador - Aula03 - design de experiência de usuário e aná...
 
RECOMENDAÇÃO DE DOCUMENTOS PARA OS USUÁRIOS DO AVA MOODLE A PARTIR DAS HASHTA...
RECOMENDAÇÃO DE DOCUMENTOS PARA OS USUÁRIOS DO AVA MOODLE A PARTIR DAS HASHTA...RECOMENDAÇÃO DE DOCUMENTOS PARA OS USUÁRIOS DO AVA MOODLE A PARTIR DAS HASHTA...
RECOMENDAÇÃO DE DOCUMENTOS PARA OS USUÁRIOS DO AVA MOODLE A PARTIR DAS HASHTA...
 
Planejamento e gestão de Portais Corporativos
Planejamento e gestão de Portais CorporativosPlanejamento e gestão de Portais Corporativos
Planejamento e gestão de Portais Corporativos
 
O Desafio da Usabilidade - Seminário de Metodologia do IBGE 2014
O Desafio da Usabilidade - Seminário de Metodologia do IBGE 2014O Desafio da Usabilidade - Seminário de Metodologia do IBGE 2014
O Desafio da Usabilidade - Seminário de Metodologia do IBGE 2014
 
Metodologia para Avaliação de Sites
Metodologia para Avaliação de SitesMetodologia para Avaliação de Sites
Metodologia para Avaliação de Sites
 
00 apresentacao
00   apresentacao00   apresentacao
00 apresentacao
 

Arquitetura da Informação e Avaliação de Websites, considerando critérios de Usabilidade, Comunicabilidade e Acessibilidade

  • 1. ALUNA: MAIARA ZENATTI TRONCO ORIENTADORA: PROFª DRª HILDA CARVALHO DE OLIVEIRA Arquitetura da Informação e Avaliação de Websites, considerando critérios de Usabilidade, Comunicabilidade e Acessibilidade Rio Claro Jul. 2014 – Mar. 2015 TRABALHO DE GRADUAÇÃO
  • 2. 3. Metodologia 2. Objetivos1.Introdução 5. Conclusão 4. Avaliações e Guias de Recomendações
  • 3. 3. Metodologia 1.Introdução 5. Conclusão 2. Objetivos 4. Avaliações e Guias de Recomendações
  • 4. • Grandes quantidades de opções de sites na Web • Facilidade e rapidez na migração de um Website para outro 4 Usuários menos tolerantes com sistemas: • De difícil recordação • Com respostas lentas •Que não satisfaçam suas necessidades Fonte: Netcraft (2015)
  • 5.  Campo de estudo interdisciplinar Design, Sociologia, Computação, Ergonomia, Psicologia Cognitiva  Como e porque pessoas  Soluções de interfaces centradas no ser humano Interação agradável e intuitiva 5 Interação Humano-Computador (IHC) utilizam SISTEMAS COMPUTACIONAIS
  • 6. 6
  • 8. 3. Metodologia 1.Introdução 5. Conclusão 4. Avaliações e Guias de Recomendações 2. Objetivos
  • 9. Estudos e levantamentos sobre conceitos e técnicas na área de IHC voltados a Websites Objetivos EXPERIÊNCIA DO USUÁRIO (UX) Usabilidade Comunicabilidade Acessibilidade ARQUITETURA DA INFORMAÇÃO Objetivos...
  • 10. Conhecimentos adquiridos e técnicas de avaliação de IHC 10 Objetivos Guia de recomendações para melhorias na interface APLICAR ...Objetivos
  • 11. 1.Introdução 5. Conclusão 4. Avaliações e Guias de Recomendações 3. Metodologia 2. Objetivos
  • 12.
  • 13. Visão e comportamento do usuário em relação ao uso do sistema • Facilidade de aprendizado • Facilidade de recordação • Eficiência • Segurança no uso • Satisfação do usuário Usabilidade
  • 14. Heurísticas de Nielsen • Proposta em 1994 • Sun Microsystems • Baseadas em 294 tipos de problemas • Englobam 75% dos problemas 1999 → Princípios básicos para o ambiente Web 2000 → 10 heurísticas de Nielsen
  • 15. 1. Visibilidade do estado do sistema 2. Correspondência entre o sistema e o mundo real 3. Consistência e padronização 4. Reconhecimento em vez de recordação 5. Controle do usuário e liberdade 6. Flexibilidade e eficiência de uso 7. Prevenção de erros 8. Reconhecimento e reparação de erros pelos usuários 9. Estética e design minimalista 10.Ajuda e documentação Fonte: Nielsen (2000) HEURÍSTICAS DE NIELSEN
  • 16. Princípios básicos para Web Fonte: Nielsen (1999) Clareza na arquitetura da informação Mapa de localização das informações Facilidade de navegação Máximo três cliques Simplicidade Facilitar a localização das informações Não omitir informações importantes Relevância do conteúdo Textos objetivos Letras e cores adequadas Manter consistência Fontes comuns Não usar layout ambicioso Tempo suportável Máximo 10 segundos Foco nos usuários Focar nas atividades dos usuários
  • 17. • Visibilidade do estado do sistema • Correspondência entre o sistema e o mundo real • Consistência e padronização • Controle do usuário e liberdade • Flexibilidade e eficiência de uso • Estética e design minimalista Clareza na arquitetura da informação Tempo suportável Relevância de conteúdo Manter consistência Facilidade de navegação Simplicidade Foco no usuário HEURÍSTICAS DE NIELSEN x PRINCÍPIOS PARA WEB
  • 18. Visão do projetista do que deve ser mais adequado ao usuário Comunicabilidade Fonte: Barbosa e Silva (2010) SIGNOS
  • 19. Representações que guiam o usuário a interpretar a informação passada pelo projetista Signo Fonte: Prates (2007)
  • 20. Facilidade de acesso e de uso de sistemas por qualquer pessoa e em diferentes contextos Diretrizes de acessibilidade para conteúdo Web (WCAG) Perceptível Operável Compreensível  Robusto Acessibilidade
  • 21. Princípios de acessibilidade para Web Fonte: W3C (2008) Perceptível: informações e componentes da interface de forma que os usuários possam perceber  Operável: componentes da interface e navegação possam ser operadas Compreensível: informação e operação da interface possam ser entendidas  Robusto: interpretado por diferentes tecnologias
  • 22. Categorização e disposição da informação de forma que possa ser compreendida rapidamente Arquitetura da informação Fonte: Gallucci (2011) • Categorias de informação • Organização da estrutura • Agrupamentos de conteúdo • Terminologia apropriada • Posicionamento dos elementos
  • 23. MODELOS DE EXPLORAÇÃO DA INTERFACE
  • 24. 3. Metodologia 1.Introdução 5. Conclusão 4. Avaliações e Guia de Recomendações 2. Objetivos
  • 26. 4.5 Oficina de Card Sorting 4.6 Guia de Recomendações 4.3 Avaliação Heurística 4.4 Teste de Usabilidade 4.1 Reuniões Preliminares 4.2 Pesquisa de Opinião
  • 28. PROPOSTA DE NOVA REORGANIZAÇÃO DO SITE
  • 29. 29 PESQUISA DE OPINIÃO: QUESTIONÁRIO ... • Princípios básicos de Nielsen voltados para Web • Heurísticas de Nielsen para sistemas de modo geral • Guia de recomendações de acessibilidade para conteúdo Web
  • 30. • Google Forms (On-line) • Duração: 15 dias • 26 questões • 210 respondentes Perfil dos usuários: • 69% < 24 anos • 90% = graduação ou pós-graduação • 60% >= 3º ano Melhorar o layout, navegação ou disposição das informações Facilitar o acesso aos serviços mais utilizados Criar ou permitir a criação de aplicativos relacionados a Biblioteca Criar versão mobile do site Evitar a abertura de novas abas/janelas Evitar o excesso de submenus e nomes confusos nos menus Evitar o excesso de informações na página inicial Revisar textos confusos que podem gerar dúvidas Inserir link para o site da Biblioteca na página principal da Unesp
  • 31. 91% acessa o site pelo menos uma vez por mês 86% utiliza o site para acessar os catálogos do acervo ou realizar/obter informações dos serviços oferecidos 86% gostaria que os serviços e itens mais utilizados estivessem na página inicial 79% têm interesse em acessar o site através de tablets ou smartphones 72% acha que a navegação pelo site é fácil, porém confusa em certas partes
  • 32. Técnica de inspeção da interface usada para detectar possíveis inadequações que acarretam em dificuldades na utilização do site AVALIAÇÃO HEURÍSTICA Seminário de explicação sobre heurísticas e princípios Preenchimento de template composto por heurísticas Jéssica Duzo Maria Anatania Pucci Tiago Neves
  • 33.
  • 34.
  • 35.
  • 36. 36 Técnica usada para avaliar a interação entre os usuários e o site, visando a coleta de dados comportamentais TESTE DE USABILIDADE • Questionário Pré-teste • Roteiro de orientação do participante • Lista de tarefas • Coleta de dados • Questionário de avaliação • Termo de consentimento Área de atuação Já utilizou o site Frequência que utiliza o site Tempo que utiliza o site
  • 37. 37 • 4 alunos de graduação • 3 alunos de pós-graduação • 2 docentes - Duração ≈ 30 minutos - Local de preferência do participante - Notebook 14’’ – Windows 8.1 - Morae TechSmith Recorder e Manager v. 3.3.3 (Trial) TESTE DE USABILIDADE
  • 40.
  • 41. Linguagem simples Dificuldade de navegação Dificuldades em entender o sistema Problemas com os termos utilizados
  • 42. 42 Oficina de Card Sorting Técnica usada para descobrir como um grupo de usuários agrupam itens de informação em sua mente (taxonomia) • Engenharia de Software • 21 participantes do curso de Computação • Post-its coloridos numerados com nível hierárquico • UXSort 2.3
  • 43.
  • 44. 44 ANÁLISE CLASSIFICATÓRIA • Método estatístico • Mede a associação e a similaridade dos itens • Agrupa itens usando medidas de distância • Diagrama de árvore
  • 46. 46 Guia de recomendações Diretriz 1 - Contexto e navegação 1.1. Página inicial com propósito claro 1.2. Estrutura de navegação lógica e fácil 1.3. Conteúdos mais importantes em áreas visíveis da tela 1.4. Elementos da identidade visual no mesmo lugar 1.5. Acesso simples a conteúdos ou serviços mais utilizados 1.6. Ferramenta de busca 1.7. Links em uma mesma janela 1.8. Documentação, tutorial e ajuda de maneira dinâmica 1.9. Preenchimento de formulários
  • 47. 47 Diretriz 2 - Carga de informação 2.1. Excesso de informação na página inicial 2.2. Elementos desnecessários 2.3. Rolagem vertical ou horizontal da tela Diretriz 3 - Autonomia 3.1. Função do botão “voltar” 3.2. Interromper ou cancelar o processamento 3.3. Controle sobre a navegação Diretriz 4 - Erros 4.1. Ações reversíveis 4.2. Indisponibilidade de partes do site 4.3. Mensagens de erro concisas e explicativas
  • 48. 48 Diretriz 5 - Design 5.1. Design padrão em todas as páginas 5.2. Agrupamento e hierarquia claros 5.3. Espaços em branco para separar conteúdos e assuntos diferentes 5.4. Fundo com cores neutras 5.5 Cuidado com estilos de fontes utilizados 5.6 Cuidado com animações 5.7. Leitura agradável 5.8. Textos alinhados à esquerda 5.9. Tempo de carregamento 5.10. Imagens com ALT tags apropriadas
  • 49. 49 Diretriz 6 - Redação 6.1. Linguagem clara e familiar 6.2. Textos objetivos 6.3. Texto em tópicos 6.4. Títulos informativos e com apelo visual 6.5. Termos simples e claros em rótulos do menu Diretriz 7 - Consistência e familiaridade 7.1. Utilização de convenções 7.2. Estrutura do site de acordo com o contexto das tarefas 7.3. Não ligar os links de contato a endereços eletrônicos
  • 50. 1.Introdução 2. Objetivos 3. Metodologia 4. Avaliações e Guias de Recomendações 5. Conclusão
  • 51. Importância da participação do usuário no desenvolvimento ou no re-projeto de um Website - Diminuição de problemas futuros Contribuições: • Compilação de conhecimentos e técnicas de IHC • Material utilizado, como deve ser feito e como analisar • Guia de recomendações para melhorias na interface CONCLUSÃO
  • 52. Trabalhos futuros: • Template para replicação do modelo de Rio Claro para outros Câmpus • Aplicação dos métodos de avaliação de comunicabilidade de sistemas (MAC e MIS) Site da Biblioteca: Interação está apta a ocorrer de forma eficaz Causas das dificuldades: Falhas na categorização e disposição da informação Uso de terminologias desconhecidas ou confusas aos usuários CONCLUSÃO

Notas do Editor

  1. Assim, os usuários dispõem cada vez mais de grandes quantidades de opções de sites na Web, além de facilidades que permitem rápida migração de um Website para outro. Isso tem tornado os usuários cada vez menos tolerantes a sites que apresentem dificuldades de entendimento e navegação. Se o usuário concluir que não consegue descobrir em alguns segundos como usar um Website, se achar que as respostas estão muito lentas ou que ele não satisfaz as suas necessidades, o usuário desiste e passa a navegar em outro site que lhe traga mais benefícios.
  2. Dessa forma, é importante que a interface com o usuário seja bem planejada para os Websistes, considerando a satisfação dos usuários. Devem ser considerados aspectos visuais e facilidades de acesso ao conteúdo, assim como outros aspectos tratados na área de estudos denominada Interação Humano-Computador (IHC).
  3. Dessa forma, é importante que a interface com o usuário seja bem planejada para os Websistes, considerando a satisfação dos usuários. Devem ser considerados aspectos visuais e facilidades de acesso ao conteúdo, assim como outros aspectos tratados na área de estudos denominada Interação Humano-Computador (IHC).
  4. Assim, os usuários dispõem cada vez mais de grandes quantidades de opções de sites na Web, além de facilidades que permitem rápida migração de um Website para outro. Isso tem tornado os usuários cada vez menos tolerantes a sites que apresentem dificuldades de entendimento e navegação. Se o usuário concluir que não consegue descobrir em alguns segundos como usar um Website, se achar que as respostas estão muito lentas ou que ele não satisfaz as suas necessidades, o usuário desiste e passa a navegar em outro site que lhe traga mais benefícios.
  5. O principal objetivo deste trabalho consistiu na determinação e investigação de parâmetros cinéticos, como a ordem de reação, conversão final e o cálculo da energia de ativação, das reações de gaseificação de coque em reator de leito fluidizado. Para se atingir o objetivo mencionado, o processo foi organizado em duas etapas sequenciais: obtenção do coque a partir do processo de pirólise de carvão e avaliação da qualidade do material resultante, bem como da distribuição do tamanho de partículas; estudo dos efeitos da temperatura e da concentração do agente de gaseificação nos parâmetros cinéticos reacionais. Foram determinadas a energia de ativação, a constante de velocidade, a ordem de reação, e a velocidade de reação para o conjunto de parâmetros reacionais.   O trabalho foi direcionado à obtenção de avanços científicos em termos de propriedades físicas e químicas para melhor utilização de coque e, por conseguinte, maior eficiência energética. Além disso, procurou-se criar uma base de conhecimento para comparações e para contribuir com o desenvolvimento de modelos computacionais e tecnologias futuras.
  6. O principal objetivo deste trabalho consistiu na determinação e investigação de parâmetros cinéticos, como a ordem de reação, conversão final e o cálculo da energia de ativação, das reações de gaseificação de coque em reator de leito fluidizado. Para se atingir o objetivo mencionado, o processo foi organizado em duas etapas sequenciais: obtenção do coque a partir do processo de pirólise de carvão e avaliação da qualidade do material resultante, bem como da distribuição do tamanho de partículas; estudo dos efeitos da temperatura e da concentração do agente de gaseificação nos parâmetros cinéticos reacionais. Foram determinadas a energia de ativação, a constante de velocidade, a ordem de reação, e a velocidade de reação para o conjunto de parâmetros reacionais.   O trabalho foi direcionado à obtenção de avanços científicos em termos de propriedades físicas e químicas para melhor utilização de coque e, por conseguinte, maior eficiência energética. Além disso, procurou-se criar uma base de conhecimento para comparações e para contribuir com o desenvolvimento de modelos computacionais e tecnologias futuras.
  7. Foi elaborado um questionário, que levou em consideração os critérios estudados nos capítulos anteriores e, principalmente, um conjunto de indicadores com base em três pilares.
  8. Para a avaliação heurística contou-se com a participação de três alunos de último ano do Curso de Bacharelado em Ciências da Computação da Unesp de Rio Claro: Jessica Duzo, Maria Anatania Pucci e Tiago Neves. Isso foi possível, pois todos já tinham conhecimentos de Engenharia de Software, inclusive em projetos de interfaces. Os alunos fazem parte do Laboratório de Engenharia de Software e Tecnologias da Informação (LesTIC) da Unesp, em Rio Claro. Convém observar que a autora deste trabalho também fez parte da equipe de avaliação, logo, a equipe foi composta por quatro avaliadores. Eles participaram de um seminário ministrado pela autora deste trabalho, no qual foi feita uma explanação sobre as heurísticas e princípios a serem utilizados. O processo para a realização da avaliação também foi apresentado, com a adoção de um arquivo composto por várias planilhas especialmente elaboradas para os testes. Cada planilha se referia a uma heurística de Nielsen. Cada avaliador desenvolveu sua própria avaliação, individualmente, e elaboraram os relatórios de seus trabalhos. Esses relatórios foram analisados, gerando uma relação de problemas classificados com os respectivos graus de severidade apontados pelos avaliadores. O APÊNDICE D traz os resultados dessa avaliação, apresentando um Quadro com todos os problemas encontrados na avaliação heurística.
  9. Para que os Websites sejam utilizados de forma efetiva, é importante considerar aspectos de interação do usuário com o sistema. Após a realização dos testes, concluiu-se que a interação dos usuários com o site está apta a ocorrer de forma eficaz. Os participantes dos testes de usabilidade foram capazes de concluir tarefas simples, porém, quando induzidos a realizar atividades mais sofisticadas, alguns demonstraram dificuldades por não conseguirem encontrar tais atividades. As dificuldades surgiram devido a falhas na categorização e disposição da informação, além do uso de terminologias desconhecidas ou confusas aos usuários.
  10. Para que os Websites sejam utilizados de forma efetiva, é importante considerar aspectos de interação do usuário com o sistema. Após a realização dos testes, concluiu-se que a interação dos usuários com o site está apta a ocorrer de forma eficaz. Os participantes dos testes de usabilidade foram capazes de concluir tarefas simples, porém, quando induzidos a realizar atividades mais sofisticadas, alguns demonstraram dificuldades por não conseguirem encontrar tais atividades. As dificuldades surgiram devido a falhas na categorização e disposição da informação, além do uso de terminologias desconhecidas ou confusas aos usuários.