Acessibilidade web Conceito Padrões, legislação brasileira e norma internacional W3C

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

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

3. Acessibilidade web Padrões: • 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.

4. 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 e-mag. 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

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

6. 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?

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

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

9. Usabilidade web Metas – Experiência do usuário: • Satisfatórios • Agradáveis • Motivadores • Interessantes • Úteis • Emocionalmente adequados • Esteticamente apreciáveis • Incentivadores de criatividade • Compensadores

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

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

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

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

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

15. 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?”

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

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

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

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

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

21. Arquitetura da Informação O que isso tem a ver com biblioteconomia ? ...TUDO Fonte: DUQUE,2010 apud Duque, 2001, p. 17.

22. Arquitetura da Informação • Os três pilares da arquitetura da informação: Quantidade de documentos, Formato/tipo, estrutura, metadados, dinamismo. objetivos do site, cultura e política da empresa, ambiente de uso, tecnologia. conteúdo contexto Necessidades, Comportamentos de busca, experiências, vocabulário usuário Fonte: Rosenfeld & Peter Morville (1998)

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

24. 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:http://www.loja.havaianas.com.br Fonte:usabilidoido.com.br

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

26. 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?

27. 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. Fonte: ROSENFELD, MORVILLE (1998)

28. Arquitetura da Informação Exemplo de problemas de usabilidade e arquitetura da informação Fonte: (Agner, 2008)

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

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

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

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

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

34. Acessibilidade e Usabilidade Dúvidas ???

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