Acessibilidade e Usabilidade

Apresentação em tema: "Acessibilidade e Usabilidade"— Transcrição da apresentação:

1 Acessibilidade e Usabilidade
Acessibilidade web Conceito Padrões, legislação brasileira e norma internacional W3C Como validar a acessibilidade Exercício Usabilidade web 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º 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. Exercício 2: verificar a acessibilidade de um site de um validador que utilize o WCAG

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 ) 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 Foco na experiência do usuário (visão subjetiva da interação)
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 Servem para avaliar o que foi desenvolvido
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:

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:usabilidoido.com.br Fonte:

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 - 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 - WebSor - xSort -

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
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 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, Jenny Preece,Yvonne Rogers,Helen Sharp Projetando além da usabilidade Felipe Memória - 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 . 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: . Acesso em: 4.out.2010. Nielsen, J. Card Sorting to Discover the Users' Model of the Information Space. Disponível em: 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: Acesso em: 1.out.2010. Usability.gov - Card Sorting . Disponível em: . Acesso em: 4.out.2010.