Incluso e Acessibilidade Digital

Prof. Anderson Maia

Email:andersontrindade@ufpa.br

Acessibilidade e Usabilidade

Acessibilidade web

Usabilidade web

Conceito
Padres, legislao brasileira e norma internacional W3C
Como validar a acessibilidade
Exerccio
Conceito
Heursticas

Arquitetura de Informao

Acessibilidade web
Conceito:

Desenvolver sites para todos, com ou sem deficincia

Todo contedo pode ser acessado por qualquer

pessoa, incluindo aquelas com necessidade especial
que acessam o contedo atravs de tecnologia
assistiva.
Vdeo Acessibilidade web: Custo ou benefcio

Acessibilidade web
Padres:

O consrcio World Wide Web (W3C) criado por Tim

Berners-Lee desenvolve padres universais para web
criou, em 1999, o WAI (Web Accessibility Initiative) e
publicou as Recomendaes de Acessibilidade para o
Contedo da Web 2.0

No Brasil, o decreto n 5.296 de dezembro de 2004

estabeleceu um prazo para tornar acessveis os sites da
administrao pblica, de interesse pblico ou financiado
pelo governo.

Para viabilizar a implantao dessa lei, foi criado pelo

Governo Eletrnico e em conformidade com os padres
internacionais. o Modelo de Acessibilidade Brasileiro (e-

MAG), conjunto de recomendaes para que o

processo de acessibilidade dos sites do governo
brasileiro seja conduzido de forma padronizada e de
fcil implementao.

Acessibilidade web
Como saber se o site acessvel?

Validar o site atravs de ferramentas automticas e

com especialistas em acessibilidade web.

Exerccio 1: verificar a acessibilidade de um site de

um rgo pblico com o validador DaSilva que utilize
o e-mag. http://www.dasilva.org.br/
Exerccio 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

usurios especficos para alcanar objetivos especficos com
efetividade, eficincia e satisfao num contexto especfico de
uso. (ISO 94241-11)

Atributos da Usabilidade

Usabilidade web
Atributos:

Eficiente no uso:

Uma vez que o usurio tenha aprendido a utilizar o

sistema, ele ser capaz de manter a produtividade ?

Seguro no uso:
O sistema previne o usurio de cometer erros graves e
permite que os erros sejam recuperados facilmente?

De boa utilidade:
O sistema fornece um conjunto apropriado de funes
que permita aos usurios realizar todas as suas tarefas
da maneira que desejam?

Usabilidade web
Atributos:

Fcil de entender:
O sistema de fcil aprendizagem e permite que as
tarefas fundamentais sejam aprendidas
rapidamente?

Fcil de lembrar como usar:

O sistema fornece suporte de interface que
auxiliam o usurio a relembrar com as tarefas
devem ser realizadas?

Usabilidade web
Metas Experincia do usurio:

Foco na experincia do usurio

(viso subjetiva da interao)

Desenvolver produtos interativos onde o

usurio desenvolva sua capacidade cognitiva
e criativa a partir do uso do sistema.

Usabilidade web
Metas Experincia do usurio:

Satisfatrios
Agradveis
Motivadores
Interessantes
teis
Emocionalmente adequados
Esteticamente apreciveis
Incentivadores de criatividade
Compensadores

Usabilidade web
Heursticas e Princpios de Usabilidade

Abstraes genricas que visam orientar o projeto

de design
No um manual, ou um guia prtico, mas parte
de premissas bsicas e orienta para caractersticas
que o site dever possuir.

Servem para avaliar o que foi desenvolvido

Usabilidade web
Heurstica de Nielsen
Visibilidade do status do sistema
Compatibilidade do sistema com o mundo real
Controle do usurio e liberdade
Consistncias e padres
Ajuda os usuario a reconhecer, diagnosticar e recuperar-se de erros

Usabilidade web
Heurstica de Nielsen
Preveno de erros
Reconhecimento em vez de memorizao
Flexibilidade e eficincia de uso
Esttica e design minimalista
Ajuda e documentao

Usabilidade web
Como avaliar a usabilidade

Especialistas realizam testes

formais atravs de diferentes tcnicas:
Com a participao de usurios
alvo do sistema
Observao da interao
Entrevistas e questionrios
Sem a participao de usurio
Rercurso Cognitivo
Avaliao Heurstica

Observar, registrar, quantificar e medir as

taxas de Eficcia, Eficincia e Produtividade
do usurio na interao com o sistema.
Fonte: http://www.indiana.edu/~usable/images/ucd_activities.jpg

Usabilidade web
O que uma abordagem centrada no usurio ?
Para desenvolver um produto que leve em considerao as
necessidades dos usurios reais deve-se:
1 Focar no usurio e nas tarefas - Entender quem so os usurios,
suas caractersticas cognitivas, comportamentais.
Como: observando-os durante a realizao de suas tarefas, entendendo a
natureza destas tarefas e envolvendo-os no processo de design.

2 Avaliao Emprica Durante todo o processo de desenvolvimento,

as interaes dos usurios com os prottipos devem ser registradas e
analisadas.

3 Design Interativo Ciclos de design, teste, avaliao por usurios

reais e re-designe, quantas vezes forem necessrias.

Usabilidade web
O que uma abordagem centrada no usurio ?
Cinco atividades que nos ajudam a Focar no usurio e nas tarefas:
1 Tarefas e metas do usurio so a fora condutora por trs do
desenvolvimento Ao invs de perguntarmos: Onde podemos aplicar
essa nova tecnologia?, perguntar: Que tecnologias esto disponveis para
melhorar a forma como os usurios interagem com o sistema?

Usabilidade web
O que uma abordagem centrada no usurio ?
Cinco atividades que nos ajudam a Focar no usurio e nas tarefas:
2 Comportamento do usurio e contexto de uso so estudados, e
o sistema projetado para fornecer suporte a eles Entender o
comportamento dos usurios na realizao de suas tarefas e quais metas
devero ser alcanadas.

Usabilidade web
O que uma abordagem centrada no usurio ?
Cinco atividades que nos ajudam a Focar no usurio e nas tarefas:
3 As caractersticas dos usurios so capturadas para o design
atend-las deve-se levar em conta limitaes cognitivas e fsicas, bem
como os seguintes aspectos: ateno, memria e percepo.
A cognio se divide em dois modos:
- Cognio Experiencial

- Cognio Reflexiva

Usabilidade web
O que uma abordagem centrada no usurio ?
Cinco atividades que nos ajudam a Focar no usurio e nas tarefas:
4 Os usurios so consultados em todas as etapas do
desenvolvimento, desde as fases iniciais at as ltimas, e sua
contribuio seriamente levada em conta.

Usabilidade web
O que uma abordagem centrada no usurio ?
Cinco atividades que nos ajudam a Focar no usurio e nas tarefas:
5 Todas as decises de design so tomadas dentro do contexto
dos usurios, seu trabalho e seu ambiente.

Arquitetura da Informao
O que isso tem a ver com acessibilidade e usabilidade
na web ?
...TUDO
Conceito:
Tornar claro o que complexo (Wurman, 1997)
"A prtica de projetar a infra-estrutura de um webwebsite,
especialmente a sua navegao" (WEST, 1999).
A cincia e a arte de organizar e rotular sites dando
suporte a usabilidade e facilidade de busca (Information
Architecture Institute)
Foco na organizao da informao no site, fazendo com
que o usurio ache a informao desejada.
Contexto Contedo - Usurio

Arquitetura da Informao
O que isso tem a ver com biblioteconomia ?

...TUDO

Fonte: DUQUE,2010 apud Duque, 2001, p. 17.

Arquitetura da Informao

Os trs pilares da arquitetura da informao:

Quantidade de documentos,
Formato/tipo, estrutura,
contedo
metadados, dinamismo.

contexto

usurio

Fonte: Rosenfeld & Peter Morville (1998)

objetivos do site,
cultura e poltica da empresa,
ambiente de uso,
tecnologia.

Necessidades, Comportamentos
de busca, experincias, vocabulrio

Arquitetura da Informao

O que o arquiteto de Informao faz:

Prever o percurso do usurio para chegar a
determinada informao;
Entender os diversos sistemas de signos que os
distintos usurios compreendem para facilitar a
interao dos usurios
Estruturar os sites na web facilitando a navegao dos
usurios atravs de recursos como Menus de
Navegao e Vocabulrio Controlado

Fonte: Santos, 2010

Arquitetura da Informao
A Arquitetura de Informao na web pode ser dividida
em quatro sistemas:

Sistema de Organizao: Define a classificao de todo o

contedo, como ele ser organizado de modo a evitar
ambiquidades.

Fonte:usabilidoido.com.br

Fonte:http://www.loja.havaianas.com.br

Arquitetura da Informao

Sistema de Rotulao: Define as formas de representao, de

apresentao, da informao definindo rtulos claros e
informativos para cada elemento da pgina. Deve-se utilizar a
linguagem do usurio para representar informao rpida e
eficaz

Exemplos:

Nomes dos ttulos das pginas;

Nomes dos itens do menu;
Utilizar signos informativos.

Arquitetura da Informao

Sistema de Navegao: Define as maneiras de navegar entre os

links e a informao disponvel, estabelecendo as categorias e
subcategorias de informao de forma a facilitar a navegao
dos usurios.

Exemplos:
Menu principal (pull-down ou pop-up);
Mapa do site;
Link azul no visitado roxo visitado

Um bom sistemas de navegao deve responder as 3 perguntas

bsicas:
Onde estou?
Onde estive?
Aonde posso ir?

Arquitetura da Informao

Sistema de Busca: Define as possveis perguntas realizadas pelos

usurios e as respostas que ele ir obter.

Exemplo1:
por:

Quais caminhos o usurio ir percorrer para procura

um item conhecido: ele sabe o que quer encontrar

um item existente: ele tem idia do que quer encontrar
Procura exploratria: ele quer saber o que pode encontrar

Exemplo2:

Disponibilizar mais de uma opo de busca,

Indicar outras fontes de informao relativas ao item buscado
Ajuda o usurio a no cometer erros
Exibir como resposta da busca as informaes necessrias aos
usurios.

Fonte: ROSENFELD, MORVILLE (1998)

Arquitetura da Informao
Exemplo de problemas de usabilidade e arquitetura da informao

Fonte: (Agner, 2008)

Arquitetura da Informao

Exemplo de diferentes arquiteturas de informao com o

mesmo contedo.
Acessar: ZenGarden -www.csszengarden.com
Tcnicas para organizar o contedo com ajuda dos
usurios
cardsorting
Wireframe

Arquitetura da Informao
Entendendo o trabalho dos usurios - Design Participativo
Usurios participam de forma ativa do desenvolvimento de um site, como
co-designers e no apenas nos testes de prottipo e avaliao.

Card Sorting
uma tcnica simples e de baixo custo, pois para sua realizao so
necessrias apenas papel e caneta. Entretanto, no tem foco na execuo
das tarefas dos usurios, apenas na estrutura das informao necessria
para realizao da tarefa.
Cada usurio cria e organiza a estrutura do site segundo sua lgica de
interao, posteriormente explicam o porqu de suas escolhas,
possibilitando ao designer entender como os usurios organizam as
informaes de acordo com suas necessidades e as nomenclaturas
utilizadas por estes.

Arquitetura da Informao
Entendendo o trabalho dos usurios - Design Participativo
Card Sorting

...continuao...

Possibilita identificar atividades/reas difceis de classificar.

O card sort proporciona a viso tima do usurio com relao ao produto.
Formas de aplicao:
Presencial: possibilita a troca entre os usurios e designers.
No-presencial: realizado a distancia (on-line), alguns softwares criam relatrios
estatsticos automticos, analisados posteriormente pelos designers.
Sites: OptimalSort - http://www.optimalworkshop.com
WebSor - http://websort.net
xSort - http://www.xsortapp.com

Arquitetura da Informao
Entendendo o trabalho dos usurios - Design Participativo
Wireframe
Utilizado em design de interface utilizado para exibir uma proposta de estrutura
web, exibindo visualmente as funcionalidades bsicas da pgina.
Esboos da interface que o usurio ter contato sem mostrar o design grfico,
indicando links, botes e outros elementos da interface e suas relaes (Van Dijck,
2003).

Dinmica
Entendendo o trabalho dos usurios - Design Participativo
Dinmica
1 Separar os alunos em grupos de cinco pessoas

2 Verificar exemplos de arquitetura da informao no link: Repositrios Dspace

no Brasil
3 Acessar o site iPlotz, criar um login e senha
4 para acesso e montar uma proposta de arquitetura de informao do site
Repositrio Institucional da Fiocruz. (20 minutos)
5 O resultado da organizao ser apresentado no quadro para discusso. (10
minutos)

Acessibilidade e Usabilidade

Dvidas ???

Referncias

Luiz Agner http://www.congressoebai.org/wp-content/uploads/ebai08/13.pdf. Arquitetura de informao na prtica: Estudo de caso

de uma pesquisa de Doutorado. 2 EBAI Encontro Brasileiro de Arquitetura de Informao 2008

Design de Interao, 2005. Jenny Preece,Yvonne Rogers,Helen Sharp

Projetando alm da usabilidade Felipe Memria - 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 Informao. 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 atravs do Diagrama de Afinidades. XXVII Encontro Nacional de
Engenharia de Produo. Disponvel 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. Disponvel em:
www.useit.com/papers/sun/cardsort.html. Acesso em: 1.out.2010.

Preece, J, Rogers, Y; Sharp, H. Design de Interao: Alm da Interao 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. Disponvel
em:http://www.boxesandarrows.com/view/card_sorting_a_definitive_guide Acesso em: 1.out.2010.

Usability.gov - Card Sorting . Disponvel em: http://www.usability.gov/methods/design_site/cardsort.html . Acesso em: 4.out.2010.