Acessibilidade web Conceito Padrões, legislação brasileira e norma internacional W3C Como validar a acessibilidade Exercício Usabilidade web Conceito

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 e Usabilidade

Acessibilidade web

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

Conceito:

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:

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

Acessibilidade webComo saber se o site é acessível?

http://www.dasilva.org.br/

http://www.dasilva.org.br/

http://achecker.ca/checker/index.php

http://achecker.ca/checker/index.php

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 webMetas – Experiência do usuário:

Usabilidade webMetas – 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.

Usabilidade webHeurísticas e Princípios de Usabilidade

Servem para avaliar o que foi desenvolvido

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

Estética e design minimalistaAjuda e documentação

Flexibilidade e eficiência de uso

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

Fonte: http://www.indiana.edu/~usable/images/ucd_activities.jpg

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

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


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 ?

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

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

Fonte: Santos, 2010


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.


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?


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)


Fonte: (Agner, 2008)


Exemplo 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


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.


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



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

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)


Dinâmica

Dúvidas ???

Acessibilidade e Usabilidade

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.

Referências

http://www.guilhermo.com/ai_biblioteca/referencia.asp?referencia=41







