Acessibilidade e Usabilidade
 Acessibilidade
web
Conceito
 Padrões, legislação brasileira e norma internacional W3C
 Como validar a acessibilidade
 Exercício

 Usabilidade
web
Conceito
 Heurísticas

 Arquitetura
de Informação
Acessibilidade web
Conceito:

Desenvolver sites para todos, com ou sem deficiência

Todo conteúdo pode ser acessado por qualquer pessoa,
incluindo aquelas com necessidade especial que
acessam o conteúdo através de tecnologia assistiva.
Vídeo Acessibilidade web: Custo ou benefício
Acessibilidade web
Padrões:

O consórcio World Wide Web (W3C) criado por Tim BernersLee desenvolve padrões universais para web criou, em 1999, o
WAI (Web Accessibility Initiative) e publicou as
“Recomendações de Acessibilidade para o Conteúdo da Web
2.0”

No Brasil, o decreto nº 5.296 de dezembro de 2004
estabeleceu um prazo para tornar acessíveis os sites da
administração pública, de interesse público ou financiado pelo
governo.

Para viabilizar a implantação dessa lei, foi criado pelo Governo
Eletrônico e em conformidade com os padrões internacionais. o
Modelo de Acessibilidade Brasileiro (e-MAG), conjunto de
recomendações para que o processo de acessibilidade
dos sites do governo brasileiro seja conduzido de forma
padronizada e de fácil implementação.
Acessibilidade web
Como saber se o site é acessível?

Validar o site através de ferramentas automáticas e com
especialistas em acessibilidade web.

Exercício 1: verificar a acessibilidade de um site de um
órgão público com o validador DaSilva que utilize o emag. http://www.dasilva.org.br/
Exercício 2: verificar a acessibilidade de um site de um
validador que utilize o WCAG 2.0.
http://achecker.ca/checker/index.php

Usabilidade web
Conceito:

Usabilidade é a medida na qual um produto pode ser usado por
usuários específicos para alcançar objetivos específicos com
efetividade, eficiência e satisfação num contexto específico de uso.
(ISO 94241-11)

Atributos da Usabilidade
Usabilidade web
Atributos:

Eficiente no uso:

Uma vez que o usuário tenha aprendido a utilizar o sistema,
ele será capaz de manter a produtividade ?

Seguro no uso:
 O sistema previne o usuário de cometer erros graves e
permite que os erros sejam recuperados facilmente?

De boa utilidade:
 O sistema fornece um conjunto apropriado de funções que
permita aos usuários realizar todas as suas tarefas da
maneira que desejam?
Usabilidade web
Atributos:

Fácil de entender:
 O sistema é de fácil aprendizagem e permite que as
tarefas fundamentais sejam aprendidas rapidamente?

Fácil de lembrar como usar:
 O sistema fornece suporte de interface que auxiliam o
usuário a relembrar com as tarefas devem ser
realizadas?
Usabilidade web
Metas – Experiência do usuário:
Foco na experiência do usuário
(visão subjetiva da interação)
Desenvolver produtos interativos onde o
usuário desenvolva sua capacidade cognitiva
e criativa a partir do uso do sistema.
Usabilidade web
Metas – Experiência do usuário:









Satisfatórios
Agradáveis
Motivadores
Interessantes
Úteis
Emocionalmente adequados
Esteticamente apreciáveis
Incentivadores de criatividade
Compensadores
Usabilidade web
Heurísticas e Princípios de Usabilidade
Abstrações genéricas que visam orientar o projeto
de design
Não é um manual, ou um guia prático, mas parte de
premissas básicas e orienta para características
que o site deverá possuir.
Servem para avaliar o que foi desenvolvido
Usabilidade web
Heurística de Nielsen
Visibilidade do status do sistema
Compatibilidade do sistema com o mundo real
Controle do usuário e liberdade
Consistências e padrões
Ajuda os usuario a reconhecer, diagnosticar e recuperar-se de erros
Usabilidade web
Heurística de Nielsen
Prevenção de erros
Reconhecimento em vez de memorização
Flexibilidade e eficiência de uso
Estética e design minimalista
Ajuda e documentação
Usabilidade web
Como avaliar a usabilidade

Especialistas realizam testes
formais através de diferentes técnicas:

Com a participação de usuários
alvo do sistema
 Observação da interação
 Entrevistas e questionários
 Sem a participação de usuário
 Percurso Cognitivo
 Avaliação Heurística
Observar, registrar, quantificar e medir as
taxas de Eficácia, Eficiência e Produtividade
do usuário na interação com o sistema.
Fonte: http://www.indiana.edu/~usable/images/ucd_activities.jpg
Usabilidade web
O que é uma abordagem centrada no usuário ?
Para desenvolver um produto que leve em consideração as
necessidades dos usuários reais deve-se:
1 – Focar no usuário e nas tarefas - Entender quem são os usuários,
suas características cognitivas, comportamentais.
Como: observando-os durante a realização de suas tarefas, entendendo a
natureza destas tarefas e envolvendo-os no processo de design.
2 – Avaliação Empírica – Durante todo o processo de desenvolvimento,
as interações dos usuários com os protótipos devem ser registradas e
analisadas.
3 – Design Interativo – Ciclos de “design, teste, avaliação por usuários
reais e re-designe”, quantas vezes forem necessárias.
Usabilidade web
O que é uma abordagem centrada no usuário ?
Cinco atividades que nos ajudam a Focar no usuário e nas tarefas:
1 – Tarefas e metas do usuário são a força condutora por trás do
desenvolvimento – Ao invés de perguntarmos: “Onde podemos aplicar
essa nova tecnologia?”, perguntar: “Que tecnologias estão disponíveis para
melhorar a forma como os usuários interagem com o sistema?”
Usabilidade web
O que é uma abordagem centrada no usuário ?
Cinco atividades que nos ajudam a Focar no usuário e nas tarefas:
2 – Comportamento do usuário e contexto de uso são estudados, e
o sistema é projetado para fornecer suporte a eles – Entender o
comportamento dos usuários na realização de suas tarefas e quais metas
deverão ser alcançadas.
Usabilidade web
O que é uma abordagem centrada no usuário ?
Cinco atividades que nos ajudam a Focar no usuário e nas tarefas:
3 – As características dos usuários são capturadas para o design
atendê-las – deve-se levar em conta limitações cognitivas e físicas, bem
como os seguintes aspectos: atenção, memória e percepção.
A cognição se divide em dois modos:
- Cognição Experiencial
- Cognição Reflexiva
Usabilidade web
O que é uma abordagem centrada no usuário ?
Cinco atividades que nos ajudam a Focar no usuário e nas tarefas:
4 – Os usuários são consultados em todas as etapas do
desenvolvimento, desde as fases iniciais até as últimas, e sua
contribuição é seriamente levada em conta.
Usabilidade web
O que é uma abordagem centrada no usuário ?
Cinco atividades que nos ajudam a Focar no usuário e nas tarefas:
5 – Todas as decisões de design são tomadas dentro do contexto
dos usuários, seu trabalho e seu ambiente.
Arquitetura da Informação
O que isso tem a ver com acessibilidade e usabilidade
na web ?
...TUDO
Conceito:
 Tornar claro o que é complexo (Wurman, 1997)
 "A prática de projetar a infra-estrutura de um webwebsite,
especialmente a sua navegação" (WEST, 1999).
 A ciência e a arte de organizar e rotular sites dando suporte a
usabilidade e facilidade de busca (Information Architecture
Institute)
 Foco na organização da informação no site, fazendo com que o
usuário ache a informação desejada.
 Contexto – Conteúdo - Usuário
Arquitetura da Informação
O que isso tem a ver com biblioteconomia ?
...TUDO
Fonte: DUQUE,2010 apud Duque, 2001, p. 17.
Arquitetura da Informação

Os três pilares da arquitetura da informação:
Quantidade de documentos,
Formato/tipo, estrutura,
conteúdo
metadados, dinamismo.
contexto
usuário
Fonte: Rosenfeld & Peter Morville (1998)
objetivos do site,
cultura e política da empresa,
ambiente de uso,
tecnologia.
Necessidades, Comportamentos
de busca, experiências, vocabulário
Arquitetura da Informação

O que o arquiteto de Informação faz:

Prever o percurso do usuário para chegar a determinada
informação;
 Entender os diversos sistemas de signos que os distintos
usuários compreendem para facilitar a interação dos
usuários
 Estruturar os sites na web facilitando a navegação dos
usuários através de recursos como Menus de Navegação e
Vocabulário Controlado
Fonte: Santos, 2010
Arquitetura da Informação
A Arquitetura de Informação na web pode ser dividida
em quatro sistemas:

Sistema de Organização: Define a classificação de todo o conteúdo,
como ele será organizado de modo a evitar ambiquidades.
Fonte:usabilidoido.com.br
Fonte:http://www.loja.havaianas.com.br
Arquitetura da Informação

Sistema de Rotulação: Define as formas de representação, de
apresentação, da informação definindo rótulos claros e
informativos para cada elemento da página. Deve-se utilizar a
linguagem do usuário para representar informação rápida e eficaz

Exemplos:

Nomes dos títulos das páginas;
 Nomes dos itens do menu;
 Utilizar signos informativos.
Arquitetura da Informação

Sistema de Navegação: Define as maneiras de navegar entre os
links e a informação disponível, estabelecendo as categorias e
subcategorias de informação de forma a facilitar a navegação dos
usuários.

Exemplos:
 Menu principal (pull-down ou pop-up);
 Mapa do site;
 Breadcrump ajudar a orientar os usuários
 Link azul não visitado roxo visitado

Um bom sistemas de navegação deve responder as 3 perguntas
básicas:

Onde estou?
 Onde estive?
 Aonde posso ir?
Arquitetura da Informação

Sistema de Busca: Define as possíveis perguntas realizadas pelos
usuários e as respostas que ele irá obter.

Exemplo1:
por:




Quais caminhos o usuário irá percorrer para procura
um item conhecido: ele sabe o que quer encontrar
um item existente: ele tem idéia do que quer encontrar
Procura exploratória: ele quer saber o que pode encontrar
Exemplo2:




Disponibilizar mais de uma opção de busca,
Indicar outras fontes de informação relativas ao item buscado
Ajuda o usuário a não cometer erros
Exibir como resposta da busca as informações necessárias aos
usuários.
Fonte: ROSENFELD, MORVILLE (1998)
Arquitetura da Informação
Exemplo de problemas de usabilidade e arquitetura da informação
Fonte: (Agner, 2008)
Arquitetura da Informação





Exemplo de diferentes arquiteturas de informação com o
mesmo conteúdo.
Acessar: ZenGarden -www.csszengarden.com
Técnicas para organizar o conteúdo com ajuda dos usuários
cardsorting
Wireframe
Arquitetura da Informação
Entendendo o trabalho dos usuários - Design Participativo
Usuários participam de forma ativa do desenvolvimento de um site, como
co-designers e não apenas nos testes de protótipo e avaliação.
Card Sorting
É uma técnica simples e de baixo custo, pois para sua realização são
necessárias apenas papel e caneta. Entretanto, não tem foco na execução
das tarefas dos usuários, apenas na estrutura das informação necessária
para realização da tarefa.
Cada usuário cria e organiza a estrutura do site segundo sua lógica de
interação, posteriormente explicam o porquê de suas escolhas,
possibilitando ao designer entender como os usuários organizam as
informações de acordo com suas necessidades e as nomenclaturas
utilizadas por estes.
Arquitetura da Informação
Entendendo o trabalho dos usuários - Design Participativo
Card Sorting
...continuação...
Possibilita identificar atividades/áreas difíceis de classificar.
O card sort proporciona a visão ótima do usuário com relação ao produto.
Formas de aplicação:
Presencial: possibilita a troca entre os usuários e designers.
Não-presencial: realizado a distancia (on-line), alguns softwares criam relatórios
estatísticos automáticos, analisados posteriormente pelos designers.
Sites: OptimalSort - http://www.optimalworkshop.com
WebSor - http://websort.net
xSort - http://www.xsortapp.com
Arquitetura da Informação
Entendendo o trabalho dos usuários - Design Participativo
Wireframe
Utilizado em design de interface é utilizado para exibir uma proposta de estrutura
web, exibindo visualmente as funcionalidades básicas da página.
Esboços da interface que o usuário terá contato sem mostrar o design gráfico,
indicando links, botões e outros elementos da interface e suas relações (Van Dijck,
2003).
Dinâmica
Entendendo o trabalho dos usuários - Design Participativo
Dinâmica
1 – Separar os alunos em grupos de cinco pessoas
2 – Verificar exemplos de arquitetura da informação no link: Repositórios Dspace
no Brasil
3 – Acessar o site iPlotz, criar um login e senha
4 – para acesso e montar uma proposta de arquitetura de informação do site
Repositório Institucional da Fiocruz. (20 minutos)
5 – O resultado da organização será apresentado no quadro para discussão. (10
minutos)
Acessibilidade e Usabilidade
Dúvidas ???
Referências

Luiz Agner http://www.congressoebai.org/wp-content/uploads/ebai08/13.pdf. Arquitetura de informação na prática: Estudo de caso de uma
pesquisa de Doutorado. 2º EBAI – Encontro Brasileiro de Arquitetura de Informação – 2008

Design de Interação, 2005. Jenny Preece,Yvonne Rogers,Helen Sharp

Projetando além da usabilidade Felipe Memória - http://www.slideshare.net/fmemoria/projetando-alm-da-usabilidade

ROSENFELD, Louis, MORVILLE, Peter. Information architecture for the world wide web . Sebastopol, CA: O'Reilly, 1998.

WEST, A. The Art of Information Architecture. iBoost, 1999.

Arquitetura e Informação. Marcelo Luis B. dos Santos .
http://www.terraforum.com.br/biblioteca/Documents/arquitetura%20e%20informa%C3%A7%C3%A3o.pdf

BEZERRA, M. B. P. Mapeamento da Usabilidade do Produto através do Diagrama de Afinidades. XXVII Encontro Nacional de Engenharia
de Produção. Disponível em: www.abepro.org.br/biblioteca/ENEGEP2007_TR600454_9782.pdf . Acesso em: 4.out.2010.

Nielsen, J. Card Sorting to Discover the Users' Model of the Information Space. Disponível em: www.useit.com/papers/sun/cardsort.html.
Acesso em: 1.out.2010.

Preece, J, Rogers, Y; Sharp, H. Design de Interação: Além da Interação Homem-Computador. Porto Alegre: Bookman, 2005.

Spencer D. Card sorting: designing usable categories. New York: Rosenfeld Media; 2009.

Spencer, D, Warfel, T. Card sorting: a definitive guide - Boxes and Arrows: The design behind the design. Disponível
em:http://www.boxesandarrows.com/view/card_sorting_a_definitive_guide Acesso em: 1.out.2010.

Usability.gov - Card Sorting . Disponível em: http://www.usability.gov/methods/design_site/cardsort.html . Acesso em: 4.out.2010.