aula acessibilidade

35
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

Upload: thalyson-luiz

Post on 27-Sep-2015

221 views

Category:

Documents


0 download

DESCRIPTION

Acessibilidade Web

TRANSCRIPT

  • Acessibilidade webConceitoPadres, legislao brasileira e norma internacional W3CComo validar a acessibilidadeExerccioUsabilidade webConceitoHeursticasArquitetura de InformaoAcessibilidade e Usabilidade

  • Acessibilidade webDesenvolver 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

    Conceito:

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

  • Acessibilidade webValidar 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

    Como saber se o site acessvel?

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

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

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

  • 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 webMetas Experincia do usurio:

  • Satisfatrios AgradveisMotivadoresInteressantesteisEmocionalmente adequadosEsteticamente apreciveisIncentivadores de criatividadeCompensadores

    Usabilidade webMetas Experincia do usurio:

  • 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.Usabilidade webHeursticas e Princpios de UsabilidadeServem para avaliar o que foi desenvolvido

  • Heurstica de NielsenVisibilidade do status do sistemaCompatibilidade do sistema com o mundo realControle do usurio e liberdadeConsistncias e padresAjuda os usuario a reconhecer, diagnosticar e recuperar-se de errosUsabilidade web

  • Heurstica de NielsenPreveno de erros Reconhecimento em vez de memorizaoEsttica e design minimalistaAjuda e documentaoFlexibilidade e eficincia de usoUsabilidade web

  • Especialistas realizam testes formais atravs de diferentes tcnicas: Com a participao de usurios alvo do sistemaObservao da interaoEntrevistas e questionriosSem a participao de usurio Percurso CognitivoAvaliao Heurstica

    Observar, registrar, quantificar e medir astaxas de Eficcia, Eficincia e Produtividadedo usurio na interao com o sistema.Usabilidade webComo avaliar a usabilidadeFonte: http://www.indiana.edu/~usable/images/ucd_activities.jpg

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

    Para desenvolver um produto que leve em considerao as necessidades dos usurios reais deve-se:O que uma abordagem centrada no usurio ?Usabilidade web

  • 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? O que uma abordagem centrada no usurio ?Usabilidade web

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

    O que uma abordagem centrada no usurio ?Usabilidade web

  • 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. O que uma abordagem centrada no usurio ?- Cognio Experiencial - Cognio ReflexivaA cognio se divide em dois modos:Usabilidade web

  • 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.O que uma abordagem centrada no usurio ?Usabilidade web

  • 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.O que uma abordagem centrada no usurio ?Usabilidade 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 InformaoO que isso tem a ver com acessibilidade e usabilidade na web ?

  • ...TUDO

    Arquitetura da InformaoO que isso tem a ver com biblioteconomia ?Fonte: DUQUE,2010 apud Duque, 2001, p. 17.

  • Os trs pilares da arquitetura da informao:

    contedocontextousurioFonte: Rosenfeld & Peter Morville (1998) Quantidade de documentos,Formato/tipo, estrutura, metadados, dinamismo.objetivos do site, cultura e poltica da empresa, ambiente de uso, tecnologia.Necessidades, Comportamentos de busca, experincias, vocabulrioArquitetura 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

  • Sistema de Organizao: Define a classificao de todo o contedo, como ele ser organizado de modo a evitar ambiquidades. Arquitetura da InformaoA Arquitetura de Informao na web pode ser dividida em quatro sistemas:Fonte:http://www.loja.havaianas.com.brFonte:usabilidoido.com.br

  • 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;Breadcrump ajudar a orientar os usuriosLink 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:Quais caminhos o usurio ir percorrer para procura por:um item conhecido: ele sabe o que quer encontrarum item existente: ele tem idia do que quer encontrarProcura exploratria: ele quer saber o que pode encontrar Exemplo2: Disponibilizar mais de uma opo de busca, Indicar outras fontes de informao relativas ao item buscadoAjuda o usurio a no cometer errosExibir como resposta da busca as informaes necessrias aos usurios.

    Fonte: ROSENFELD, MORVILLE (1998) Arquitetura da Informao

  • Fonte: (Agner, 2008)Arquitetura da InformaoExemplo de problemas de usabilidade e 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 usurioscardsortingWireframeArquitetura da Informao

  • Entendendo o trabalho dos usurios - Design ParticipativoUsurios 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

  • 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.comWebSor - http://websort.net xSort - http://www.xsortapp.comEntendendo o trabalho dos usurios - Design ParticipativoArquitetura da Informao

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

    Entendendo o trabalho dos usurios - Design ParticipativoArquitetura da Informao

  • 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) Entendendo o trabalho dos usurios - Design ParticipativoDinmica

  • Dvidas ???

    Acessibilidade e Usabilidade

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

    Referncias