Acessibilidade na Web

Para quem é?• Acessibilidade é para todos e não somente para

pessoas com algum tipo de eficiência física.• Pessoas mais idosas;• Pessoas que acessam dispositivos móveis

(celulares);• Crianças aprendendo a “mexer” nos

dispositivos• Pessoas com “aversão ao uso de tecnologia”

• Conformidade com o decreto de lei 5296 (dez/04) e com a convenção da ONU que ganhou força de lei (ago/08) ;

• 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 na WebConceito:

• O consórcio World Wide Web (W3C) criado por Tim Berners-Lee 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 webPadrões:

Acessibilidade webComo saber se o site é acessível?

• Validar o site através de ferramentas automáticas e com especialistas em acessibilidade web.

• http://validator.w3.org/• http://jigsaw.w3.org/css-validator/• http://www.dasilva.org.br/ • http://achecker.ca/checker/index.php• http://www.sidar.org/hera/index.php.pt• http://www.acesso.umic.pt/webax/examin

ator.php

• http://www.totalvalidator.com

• 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 webConceito:

• 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 webAtributos:

• 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 webAtributos:

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:

Usabilidade web

Metas – Experiência do usuário:

• Satisfatórios • Agradáveis• Motivadores• Interessantes• Úteis• Emocionalmente adequados• Esteticamente apreciáveis• Incentivadores de criatividade• Compensadores

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 webHeurísticas e Princípios de Usabilidade

Heurística de Nielsen

• Visibilidade do status do sistema• Compatibilidade do sistema com o mundo

real• Controle do usuário e liberdade• Ajuda os usuário a reconhecer,

diagnosticar e recuperar-se de erros• Consistências e padrões

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

• 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 astaxas de Eficácia, Eficiência e Produtividadedo usuário na interação com o sistema.

Usabilidade webComo avaliar a usabilidade

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.

Para desenvolver um produto que leve em consideração as necessidades dos usuários reais deve-se:

O que é uma abordagem centrada no usuário ?

Usabilidade web

Há 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?”

O que é uma abordagem centrada no usuário ?

Usabilidade web

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

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.

- Cognição Experiencial- Cognição Reflexiva

A cognição se divide em dois modos:

Usabilidade web

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

5 – Todas as decisões de design são tomadas dentro do contexto dos usuários, seu trabalho e seu ambiente.

Usabilidade 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çãoO que isso tem a ver com acessibilidade e usabilidade na web ?

...TUDO

Arquitetura da InformaçãoO que isso tem a ver com biblioteconomia ?

• Os três pilares da arquitetura da informação:

conteúdo contexto

usuário

Fonte: Rosenfeld & Peter Morville (1998)

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

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

Arquitetura da Informação

• Sistema de Organização: Define a classificação de todo o conteúdo, como ele será organizado de modo a evitar ambiquidades.

Arquitetura da InformaçãoA Arquitetura de Informação na web pode ser dividida em quatro sistemas:

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

• 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: Quais caminhos o usuário irá percorrer para procura por:• 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.

Arquitetura da Informação

Fonte: (Agner, 2008)

Arquitetura da InformaçãoExemplo de problemas de usabilidade e 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

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.comWebSor - http://websort.netxSort - http://www.xsortapp.com

Entendendo o trabalho dos usuários - Design Participativo

Arquitetura da Informação

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).

Entendendo o trabalho dos usuários - Design Participativo

Arquitetura da Informação