Estudos e levantamentos sobre conceitos e técnicas na área de IHC voltados a Websites com aplicação das técnicas, modelos e tecnologias resultantes dos estudos no site da Biblioteca da Unesp do Câmpus de Rio Claro.
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
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
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...
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
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
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
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
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
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.
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).
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).
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.
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.
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.
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.
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.
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.
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.