avaliacao sites nov 2008

INA 2008 - Gestão da Qualidade de Sites Internet – Luís Vidigal 1

Luís Vidigal

INA – 10 e 11 de Novembro de 2008

Avaliação daQualidade dos Sites


Fases do desenvolvimento de um sítio Web

•Planear •Analisar •Design •Teste e refinamento


Objectivo e a visão para o sítio

•Qual é afinalidade do sítio?

•Quais são os objectivos do sítio?


Usabilidade

É a eficácia, eficiência e satisfação com que um conjunto específico de utilizadores consegue cumprir um conjunto concreto de tarefas num determinado ambiente

ISO (International Standard Organization)


Usabilidade

É um atributo de qualidade usado para aferir a facilidade de utilização de interfaces entre sistemas informáticos e utilizadores

Jakob Nielsen (Usability, 2003)


Corolários da Usabilidade

• Fácil de aprender• Difícil de esquecer• Minimizar o peso do trabalho• Reduzir a carga de trabalho• Encorajar e premiar a experimentação• Antecipar e perdoar erros• Proporcionar sempre feedback• Satisfatório e se possível agradável


Bibliografia de Jakob NielsenPrioritizing Web UsabilityJakob Nielsen e Hoa LorangerNew Riders Press; 1ª edição (Abril, 2006)432 páginas

Coordinating User Interfaces for ConsistencyJakob NielsenMorgan Kaufmann, (Janeiro, 2002) 1ª edição 1989152 páginas

Designing Web UsabilityJakob NielsenPeachpit Press, 2000; 1 edição (Dezembro,1999)Traduzido em 22 línguas432 páginas


Benefícios da Usabilidade• Reduzir o nível de experiência inicialnecessária dos utilizadores para dominar osistema

• Reduzir os custos de formação• Melhorar a performance geral do sistema• Reduzir os erros• Aumentar a satisfação no trabalho• Reduzir custos gerais• Menos solicitações ao serviço de apoio (help desk)


Estágios da Concepção Centrada no Utilizador

• Pesquisa e Planeamento: Estabelecimento da direcção do projecto, objectivos, valores de brand e necessidades dos utilizadores.

• Conceptualização: Criação de modelos detalhados de tarefas correntes e futuras (eventualmente, reconceptualizadas) e organização de tarefas e conteúdos.

• Concepção da Navegação: Definição do modelo navegacional para todas as páginas, e concepção básica (criação de templates) das páginas mais importantes.

• Desenho Detalhado de “Páginas”: Integra os aspectos relacionados com a apresentação, conteúdos e interacção em diversos tipos de página. (e durante todo este processo, TESTAR sempre!)


Métodos de Usabilidade• Classificação por Cartões• Entrevistas Contextuais• Grupos de Foco (Focal Groups)• Avaliação Heurística (a partir de guiões)• Entrevistas Individuais• Projectos Paralelos• Utilizador Ficcionado• Prototipagem• Questionários Online• Análise de Funções• Testes à Usabilidade• Casos do Utilizador (Use Cases)• Escrever para a Web

http://www.usability.gov/methods/


Concepção e design de sistemasAs Quatro Dimensões

• Navegação efectiva– Os utilizadores encontram facilmente os serviços

propostos?

• Concepção dos conteúdos– O que está disponível é o que os utilizadores querem?

• Design Gráfico atractivo– A apresentação visual pode reforçar o valor da experiência

de utilização e facilitar a compreensão dos conteúdos?

• Interacção eficiente– Os utilizadores podem agir sobre os conteúdos e

funcionalidades com facilidade?


Factores (objectivos) deAvaliação de Usabilidade

• Facilidade de Aprendizagem• Eficiência de Uso• Memorabilidade• Frequência e Severidade dos Erros• Satisfação Subjectiva


Navegabilidade

•Onde estou?•Onde posso ir?•Como vou?•Como regresso?


A estruturação de conteúdos• Estrutura Hierárquica (através de menus de acesso):

– Um único nível– Vários níveis

• Menus Persistentes (acesso aleatório ao conjunto de conteúdos):– Menu com botões– Menu estilo bloco de notas– Lista(s)

• Acesso Sequencial (passo-a-passo):– Formulários sequenciais– Wizards / tutores / formação

• Motores de Pesquisa (acesso directo):– Formulação da Pesquisa– Obtenção de Resultados


Os Princípios da Boa Navegação• Questões para uma boa navegação:

– Qual é a primeira coisa que os utilizadores vão ver?– O sítio é de facto sobre o quê?– O que os utilizadores podem fazer no sítio?– Os objectivos dos utilizadores serão alcançados?

• Chaves dos bons sistemas de navegação:– Complementam a arquitectura de informação– Mantêm o contexto– São eficientes e flexíveis– Limitam as escolhas na perspectiva de ajudar os utilizadores– Facilitam a aprendizagem por associação (a lógica é que uma pessoa é

mais capaz de se lembrar de informação se esta estiver associada a algo familiar ou se for claramente diferente).

– Reforçam as expectativas


Porquê páginas tipo?• A maior parte das páginas de qualquer sítio web

podem (devem!) ser suportadas com um máximo de 8 a 10 páginas tipo (normalmente cerca de metade);

• Basear o trabalho em páginas tipo aumenta a produtividade criativa, melhora a facilidade de uso (porque corta a tentação da confusão) e garante um suporte optimizado para a tarefa concreta na página em questão;

• Os utilizadores têm uma expectativa natural de que certas tarefas estarão associadas a certos tipos já familiares de páginas (e reinventar a roda é meter-lhes um obstáculo no caminho, não é ajudá-los).


Tipos de Templates StandardExemplos de páginas tipo para efeitos de navegação

• Informação Massiva• Contas• Publicações Online• Pesquisa• Menu com botões• Menu com hipergráficos segmentados• Menu com hipertexto simples• Painel de tarefas básico• Com objecto central• Menu dinâmico• Índice simples• Índice multinível• Mapa de sítio


Tipos de Templates StandardExemplos de templates standard para efeitos de

demonstração e exploração

• Documentos• Formulários sem interactividade• Tabelas sem interactividade• Formulários simples• Formulários complexos• Wizards• Bloco de notas• Check-list• Manutenção de Bases de Dados


Página Principal (“Home Page”)

Front PageURL principal de um dado sítio

Splash PagePágina de introduçãoNão Usar, excepto para:Escolha de língua, selecção de determinadas características de personalização, ou enquadramento dos conteúdos

Home PagePágina principal


A boa navegação começa em casa

• A página principal deve:– Estabelecer desde logo um modelo

consistente de navegação para todo o sítio;

– Informar o utilizador, quer com palavras quer com imagens, do tipo de conteúdo que pode esperar do sítio.


O estabelecimento dasexpectativas dos utilizadores

• A página principal, sobretudo se for a “front page”, estabelece desde logo o “look & feel” do sítio web:

• Define o branding (marca), os temas e o tom que caracterizam a interface;

• Apresenta a estruturação de conteúdos que o sítio web deverá seguir de forma consistente:– Os utilizadores devem poder determinar a localização

relativa de conteúdos concretos em função da respectiva localização na página principal;

– Os utilizadores têm a expectativa legítima de que o sítio será graficamente e estruturalmente consistente (se isto não ocorrer, pensarão com naturalidade que saíram do sítio webonde estavam na página anterior e estão a consultar agora outros conteúdos)


Tipos Standard de Página Principal• Informação Massiva

– A arquitectura de informação é o aspecto mais relevante na concepção de páginas principais caracterizadas por volumes massivos de dados e informação.

• Jornais / Notícias / Novidades– Nestes sítios web, os utilizadores precisam tipicamente de ler de

imediato um conjunto de conteúdos críticos para seleccionar as peças a explorar com mais atenção.

– O conteúdo da página . forçosamente servido através de motores dinâmicos (sistemas de gestão de conteúdos, content managementsystems).

• Conteúdos personalizados– O exemplo supremo deste tipo de conteúdos são os sítios como as

intranets, onde se apresentam contas pessoais do utilizador.– Nestes casos, o utilizador vê um sumário que captura uma determinada

relação (nomeadamente de cariz financeiro) e explora determinados aspectos da conta.

– Este é também o tipo de abordagem utilizada no caso dos sítios de bancos, para utilizadores registados.


O tipo de páginas mais adequadoAs Três Regras de Ouro

• Regra nº1 - Inventar o mínimo– Os utilizadores não aprendem a navegar na Web com o seu sítio web,

aprendem com os sítios dos outros. Reinventar a roda pode ser uma grande satisfação pessoal, mas é caro e a probabilidade é de nãoresultar. Portanto, a regra de ouro é fazer um esforço para não inventar!

• Regra nº2 - Antes de começar o desenvolvimento, dissecar o projecto e definir todos os templates a usar– No caso de se tratar de um sítio para um cliente externo, obter a

aprovação explícita para os templates, por escrito. Depois, começar o trabalho.

• Regra nº3 - COPIAR(a regra mais importante e realmente, um corolário forçoso da regra nº1)– Dos bons exemplos, escolhidos a dedo (aquilo a que se chama

benchmarking), não ter pejo de copiar. O mais possível


Níveis de processamento da informação

1. Formas e cores2. Planos, linhas e pontos3. Informação concreta


O scroll em documentos longos

• Os utilizadores não têm por norma qualquer problema com páginas compridas;

• O scroll em documentos longos é visto como algo natural;

• É mais irritante ter de estar sempre a clicar para continuar a ler algo, quando havia a possibilidade de se ler tudo no mesmo ecrã, graças à possibilidade de fazer scroll.


Criação de GruposPrincípios Gestalt


Confusão e DensidadeRegras essenciais:• Partir “um ecrã” com muita informação em dois ou mais

“ecrãs” menores, ou tentar arranjar outras formas de dividir a informação

• Minimizar o uso de cor e usar princípios de agrupamento para reduzir o ruído visual

Outros aspectos relevantes:• Evitar a confusão visual;• Perceber que ecrãs densos (podem ser densos e não ser

confusos) são adequados para utilizadores frequentes;• Proporcionar a informação necessária e só;• Usar alinhamentos poderosos e uma estrutura em grelha• Usar princípios de agrupamento


CSS e Web StandardsCSS - Cascading Style Sheet

Folha de estilo em cascata é um mecanismo simples para adicionar estilos (p.ex., fontes, cores, espaçamentos) aos documentos Web.

Web Standards ou Padrões WebTem por objectivo a criação de uma Web universal.Web Standards é um conjunto de normas, diretrizes, recomendações, notas, artigos, tutoriais e afins de carácter técnico, produzidos pelo W3C e destinados a orientar fabricantes, implementadores e designers para o uso de práticas que possibilitem a criação de uma Web acessível a todos, independentemente dos dispositivos usados ou de suas necessidades especiais.


CSS - Folha de estilo em cascata Vantagens• O controlo sobre o design gráfico e os elementos tipográficos é assinalável

e a sua conjunção com javascript ou outras linguagens script usadas pelos browsers permite efeitos muito interessantes;

• Proporciona maior controlo sobre documentos massivos. Basta alterar uma folha de estilo para modificar automaticamente milhares de páginas de uma só vez.

Desvantagens:• Pode ser importante que o conteúdo seja acessível a partir de browsers

diferentes e as CSS não são suportadas por todos os browsers;• Apesar de haver um standard oficial, a verdade é que a implementação do

IE suporta características extra; ou seja, CSS optimizadas para o IE podem produzir resultados estranhos noutros browsers (portanto, deve fazer-se um esforço para utilizar exclusivamente o padrão oficial).

Sítios de Referência:http://www.w3.org/Style/CSS/http://www.maujor.com/http://www.csszengarden.com/tr/portuguese/


O uso de botõesé um convite claro à acção

• Os botões são mais óbvios que links de texto para estimular uma acção

• Ficam mais realçados que links de texto• São maiores para cliques com o rato (portanto,

mais fáceis de usar).• Se houver tipos padrão de botões ("Anterior |

Seguinte"), usar, não reinventar o que já funciona.

Toque aqui


Os utilizadores esperam que um botão

• Se pareça com um botão;• Seja clicável;• Corresponda a um link

Usar botões para executar acções:Exemplos:• Gravar dados• Colocar uma encomenda• Apagar um formulário• Redesenhar um gráfico• Reordenar uma lista


Radio Buttons e Check / List BoxesOs botões de escolha ("radio button"):• São mutuamente exclusivos• Mostram todos os itens na lista• São usados para escolhas estáticas, não para

escolhas dinâmicas

As “check boxes” permitem escolhas múltiplas• Não são exclusivos e por isso proporcionam uma

escolha dinâmica.

As "list boxes" são caixas de texto alimentadas com uma lista.

• As listas são um excelente meio de proporcionar conjuntos dinâmicos de escolhas.

• No entanto, apresentam um problema de usabilidadeno que se refere a escolhas múltiplas: apesar de serem possíveis, a sua efectivação não é intuitiva, na medida em que:– O utilizador deve clicar na tecla <CTRL> em cada uma

das escolhas que fizer;– Nem todas as opções possíveis poderão ser mostradas

por questões de falta de espaço, o que implica o scroll.

http://images.google.pt/imgres?imgurl=http://msdn.microsoft.com/library/en-us/dnsmart00/html/gannon01.jpg&imgrefurl=http://msdn.microsoft.com/library/en-us/dnsmart00/html/sa00d8.asp%3Fframe%3Dtrue&h=348&w=271&sz=26&hl=pt-PT&start=13&tbnid=DpKJ43GzfiiL6M:&tbnh=120&tbnw=93&prev=/images%3Fq%3Dlist%2Bboxes%26svnum%3D10%26hl%3Dpt-PT%26lr%3D%26sa%3DG


Pouco espaço na página:lista “drop-down”

• Se a lista for estritamente alfabética, fazer com que a selecção de uma dada letra no teclado leve imediatamente à primeira palavra que comece com essa letra;

• Proporcionar a possibilidade de selecção automática pelo programa em função da escrita de uma dada palavra


Controlo e Prevenção de Erros • Sempre que

possível, usar um processo de selecção em vez de uma caixa de entrada de informação;

• Sempre que possível, proporcionar valores por omissão (valores seleccionados à partida);

• Providenciar instruções breves, quando necessário.


Seleccionar controlos para suportar as tarefas dos utilizadores

SE O ITEM .... E QUEM CONCEBE...

E A OPERAÇÃO SERÁ PRINCIPALMENTE...

ENTÃO, USAR ESTE CONTROLO

POR EXEMPLO

Passível de ser apresentado como se de escolha simples se tratasse

Sabe qual vai ser a opção do utilizador em 80% ou mais dos casos

baseada no rato Uma checkbox com valor por omissão

Incluir detalhes [checked]

baseada no teclado

Lista drop-down com opção por omissão

Incluir detalhes?[drop-down com Sim visível]


Problemas de AcessibilidadeTexto em imagens• Por vezes, opta-se por colocar o texto em formato gráfico por

questões de opção de design gráfico: a flexibilidade permitida émuito maior. Outras vezes, desenvolve-se um website usando tecnologias mais avançadas, de que o uso de Flash é um exemplo.

• Utilizadores com problemas sérios de visão, ou invisuais, não vêem sites: usam um aparelho apropriado que lhes lê o site. Quando este é uma sucessão de imagens, é pura e simplesmente como se não existisse.

Texto em colunas• Mesmo que se use sobretudo texto, ou só mesmo texto, no

caso de este ser organizado em colunas – o que muitas vezes é usado porque permite uma grande capacidade de compactação de conteúdos e facilita a respectiva consulta – a versão áudio, conseguida através de um aparelho chamado de “leitor de ecrã” ou “screen reader”, pode apresentar sérios problemas.


Problemas de AcessibilidadeInteracção• Scripts (programas que correm no browser), applets Java (programas em

Java, normalmente também correm no browser) e cookies (uma peça importante do funcionamento de lojas electrónicas, porque são o meio privilegiado de garantir persistência de informação durante a navegação) não funcionam em browsers concebidos para pessoas com deficiências. Não funcionam com leitores de ecrã. Muitas vezes, exigem o uso de rato, e não suportam teclas de atalho.

• Os menus rollover, são um excelente exemplo de uma solução de navegação impossível de implementar com este tipo de browsers.

• Solução simples: implementar uma página com o “Mapa do Site”, que permite acesso de um único ponto a todos os conteúdos.

• Ter sempre em consideração que qualquer tecnologias que permita aumentar a interactividade causam forçosamente problemas de acessibilidade, porque é pouco provável que sejam suportadas pelos browsers e equipamentos utilizados por pessoas com deficiências para aceder à Internet.

• Mesmo páginas concebidas só com texto e sem colunas, podem apresentar problemas sérios conforme os browsers a partir dos quais são acedidas.

• Este não é um problema de resolução simples.• Existem standards que é necessário considerar e um conjunto de

preocupações que é necessário ter em mente.


Equivalentes em texto


Navegação• A explicitação da navegação ajuda os utilizadores a

criar um mapa mental da estrutura do website;• O sistema de navegação deve ser consistente e

previsível;• Deve proporcionar-se informação de orientação:

descrever a navegação com texto;• Fornecer motor de pesquisa e mapa do site;• O texto dos links deve ser claramente informativo;• Deve tentar-se agrupar os links semelhantes e dar

ao conjunto um subtítulo suficientemente descritivo.


Questões de Concepção e Design“Podemos sempre usar uma borracha durante a fase de concepção ou um equipamento de demolição

após a construção.” - Frank Lloyd Wright (arquitecto)

• Layout• Conjuntos de caracteres• Traduções• Calão e expressões idiomáticas• Datas e Horas• Representações numéricas• Moeda• Nomes e moradas• Números de telefone• Tamanhos de papel e medidas• Linguagens• Direcção• Ortografia• Significados simbólicos• Cor• Gráficos


Linguagem simplificada(inglês simplificado)

Três das regras da AECMA (Associação Europeia da Indústria Aeroespacial; www.aecma.org) relativas ao “inglês simplificado”:

• As frases com instruções não podem ter mais de 20 palavras

• É proibido omitir os artigos em frases onde o substantivo é predominante

• Passos sequenciais devem ser expressos em frases separadas

Em consequência, este conjunto de regras:• Reduz a ambiguidade• Acelera a leitura• Melhora dramaticamente a compreensão por parte das

pessoas cuja primeira língua não é o inglês• Torna a tradução mais barata, mais fácil e melhora a

qualidade da tradução automática• Mantém o texto (excelentemente) legível para as pessoas

cuja língua nativa é o inglês.


A Pirâmide InvertidaOu a escrita jornalística.

O que os jornalista aprendem sobre a redacção de notícias para jornais tem todo o cabimento e utilidade no contexto da Web:

• Começar com as conclusões (que é tudo o que vai ser lido, se chegar a ser, pela maior parte das pessoas)

• Acabar nos detalhes (cuja leitura seja menos relevante)Vantagens:

• Os leitores são imediatamente recompensados;• Os leitores percebem o essencial sem terem de investir

(ou desperdiçar) tempo.

Para reforçar o estilo, a página deve incluir em cima o equivalente a um índice das matérias tratadas (em alguns casos, em que os artigos sejam mais compridos, mais vale incluir um índice real).

Aspectos fundamentais

Pormenores


A Pirâmide Invertida“For any given thousand words, it's hard to come up with a picture.” - Yuri Englehart

Aspectos fundamentais

Pormenores

http://www.msnbc.msn.com


Documentos compridos: assumir o scrollO que há a fazer é essencialmente:

• Junto ao princípio, incluir um índice com linksinternos para os conteúdos na própria página;

• De ecrã e meio a 2 ecrãs, incluir links de retorno ao índice;

• No fim, incluir as opções de navegação geral mais relevantes;

• Organizar o conteúdo com bastantes subtítulos e uma organização visual tão despojada e clara quanto possível.


Princípios gerais da“boa escrita” para a Web

• Fazer tudo para redigir texto:• Objectivo• Correcto• Activo• Interessante

Tentar em cada linha reduzir o rácio sinal/ruído:• A profusão de erros e adjectivos mascara o

“sinal” (ou mensagem ou conteúdos) com “ruído” que só serve para distrair.


Usar palavras curtas e simples

Em vez de usar Considerar adquirir obter conclusão fim duplicado cópia elementar simples evidente claro é sintomático de mostra


Escrita PromocionalCaracterizado pelo recurso a linguagem de marketing

• O Douro, Património da Humanidade reconhecido pela UNESCO, é umadas mais belas paisagens trabalhadas pelo homem que se pode apreciar em todo o mundo e uma das regiões mais memoráveis de Portugal e da Europa. As montanhas em terraços, plantadas com as vinhas do néctar mais sublime que se conhece no mundo, são uma imagem que permanece para sempre na memória de quem um dia, no correr do rio, ao fim de uma tarde num cruzeiro fluvial ou numa das quintas que aceitam hóspedes, tem o privilégio de experimentar um pôr-do-sol sem comparação. Percebe-se finalmente, com a clareza das certezas, porque motivo a palavra usada na língua portuguesa para descrever os lugares com vista é "miradouro". Entre a Régua e o Tua, é ainda possível viajar num comboio a vapor, como em tempos mais elegantes e apreciar os impressionantes panoramas das montanhas de Trás-os-Montes. No alto, enquanto o comboio negoceia a montanha e apita, consegue-se perceber um grupo a saudar a vida com champanhe, num voo de balão. E à noite, numa das Pousadas do Douro, o jantar termina com uma sobremesa conventual e um copo de Vintage, na companhia do seu criador. Paraíso? Sim, em Portugal, a oriente do Porto e a ocidente de Castela.


Texto ConcisoCaracterizado por uma redução do texto para cerca de metade do tamanho

• A região do Douro, no norte de Portugal, foi reconhecida pela Unesco como Património da Humanidade. A região é dominada por montanhas em terraços, plantadas com as vinhas que estão na origem do Vinho do Porto e dos vinhos do Douro, e que proporcionam imagens e experiências memoráveis. A visita ao Douro pode ser feita por carro ou por cruzeiro, havendo diversas opções quer de percursos automóveis quer de navios e programas. Outras experiências possíveis são os passeios no antigo comboio da linha do Tua e os voos de balão. As alternativas de alojamento incluem quintas que aceitam hóspedes, hotéis de charme e Pousadas regionais e históricas.


Uso de ListasAdequado para apreensão imediata (“scannable layout”)

A região do Douro, no norte de Portugal, é reconhecida pela Unesco como Património da Humanidade, pela sua beleza agreste e impressionante que deve muito ao trabalho do homem. Para o viajante, a região oferece:

• Memórias perenes de vistas impressionantes• Cruzeiros fluviais de um a seis dias• Passeios de carro ao longo do Douro, por quintas e montes• Viagens no comboio da linha do Tua• Voos de balão• Hospedagem em quintas, hotéis de charme e Pousadas• Provas de vinhos do Douro e de Vinho do Porto• E muito mais...


Escrita ObjectivaUsando uma abordagem neutra em vez de subjectiva,

elogiosa ou exagerada (fora isso, igual à primeira)

• A região do Douro, no norte de Portugal, encontra-se classificada como Património da Humanidade pela Unesco. A região é caracterizada por montanhas em terraços com plantações de vinha que sobem desde o rio Douro. Este é hoje navegável em toda a sua extensão em Portugal e até Espanha e pode ser percorrido em diversos cruzeiros fluviais de duração variável. São ainda possíveis passeios de automóvel, de comboio a vapor ou em voos de balão. As alternativas de alojamento incluem quintas, hotéis de charme e Pousadas. Muitas quintas estão abertas ao público, no quadro da “Rota do Vinho do Porto”, e proporcionam provas de vinhos do Douro e de Vinho do Porto.


Versão CombinadaRecorre simultaneamente à

concisão, apreensão, objectividade

O Douro é Património da Humanidade. Para conhecer a região, cujas vistas estão na origem do termo “miradouro”, pode explorar as seguintes alternativas:

• Cruzeiros fluviais de um a seis dias• Passeios de carro ao longo do Douro• Viagens de comboio entre a Régua e o Tua• Voos de balão• Hospedagem em quintas, hotéis e pousadas• Provas de vinhos do Douro e de Vinho do Porto


Eliminar a repetição de palavras

Em vez de se usar:

Deve usar-se:

Em vez de se usar:

Deve usar:


Imagens tipográficas


Imagens tipográficasRecorrendo a gráficos, em vez de a texto e factores de controlo de texto,

pode ser-se mais criativo no tratamento dos tipos de letra:• Efeitos que só sejam possíveis com programas como o Photoshop e seus

plug-ins;• Tratamento mais sofisticado de cores;• Outros tipos de letra para além das que se sabe que existem em todos os

sistemas.Os recurso a gráficos podem ajudar a criar maior riqueza e variedade

visual.E podem também ser um risco...

Limitações:• Tempo de download maior• Não são passíveis de ser objectos de pesquisa em texto integral• Correcções e actualizações são mais complicadas• Questões de acessibilidade (para que as imagens possam ser “lidas”) é

essencial não esquecer de usar os tags apropriados• Necessidade de controlo sobre as questões técnicas envolvidasSugestões:• Usar sempre o tag ALT para especificar o conteúdo da imagem;• Dar ao ficheiro um nome que reflicta o conteúdo da imagem (um botão que

diga Clique aqui deve chamar-se “Clique_aqui.gif”, por exemplo)


Tipos de letra tipicamente suportados pelos sistemas operativos mais vulgarizados:


Espaços, fontes e itálicos


Representações de caracteres• EBCDIC – Mainframes IBM• ASCII – PC workstations• Unicode – International Character sets

– ISO/IEC 10646-1 Information technology -- Universal Multiple-Octet Coded Character Set (UCS)

• Part 1: Architecture and Basic Multilingual Plane• Part 2: Supplementary Planes

– ISO/IEC DIS 14651 International string ordering and comparison -- Method for comparing character strings and description of the common template tailorable ordering

– ISO/IEC PRF TR 14652 Information technology --Specification method for cultural conventions

– ISO/IEC 14755:1997 Information technology -- Input methods to enter characters from the repertoire of ISO/IEC 10646 with a keyboard or other input devices

– Unicode 3.2• RFC 2279 UTF-8, a transformation format of ISO 10646


UNICODE (latino)


Olhar e Ver“Não vemos o mundo como é; vemos o mundo como

somos.” - do Talmud

Imagem – Conceito de...

A representação mental na memória colectiva de um estereotipo ou de um

conjunto significativo de atributos, capazes de influenciar os nossos comportamentos e modificá-los


Velha ou jovem?


Mulher vaidosa ou caveira?


A cara de um índio ou um esquimó?


Saxofonista, ou rosto de mulher?


Limites no uso exclusivo de cor para fornecimento de pistas

A pesquisa de um dado objecto baseada no uso de uma cor permite aumentar dramaticamente a performance dos utilizadores, porque a cor torna-se fácil de identificar e revela-se uma ajuda preciosa.

No entanto, quanto cinco ou mais cores são usadas para o mesmo propósito, a performance pode ficar reduzida a níveis inferiores aos dos monitores monocromáticos.

A regra é portanto a redução do número de cores (uso de um máximo de 4 a seis cores) para efeitos de identificação de objectos num dado ecrã. Kodak


Limites no uso exclusivo de cor para fornecimento de pistas

Kodak


Teste de Ishihara


Contraste de cor

Texto cinzento em fundo branco (#EEEEEE)

Texto cinzento em fundo branco (#CCCCCC)

Texto cinzento em fundo branco (#AAAAAA)

Texto cinzento em fundo branco (#888888)





Texto cinzento em fundo preto (#222222)




Texto cinzento em fundo preto (#AAAAAA)

Texto cinzento em fundo preto (#CCCCCC)

Texto cinzento em fundo preto (#DDDDDD)

Texto cinzento em fundo preto (#EEEEEE)

Texto preto no fundo vermelho

Texto preto no fundo azul

Texto amarelo no fundo verde

some combinations are not so bad:


LógicaLógicaRaciocínioRaciocínioLinguagemLinguagemNúmerologiaNúmerologiaAnáliseAnáliseLinearidadeLinearidadeDigitalidadeDigitalidadeAbstracçãoAbstracção

RítmoRítmoMúsicaMúsica

ImaginaçãoImaginaçãoImagensImagens

CôrCôrFormasFormas

FantasiasFantasiasCriatividadeCriatividade

LadoLadoEsquerdoEsquerdo

LadoLadoDireitoDireito


F f isegf f fiseff fsdfh

sf f ff fj

TextoTexto ImagemImagem SomSom EscolhaEscolha

10%10%20%20%50%50%70%70%80%80%


Evitar textos extensos• Não se deve escrever mais de quatro

parágrafos sem um título ou subtítulo• Usar tabelas ou frames para restringir o

tamanho das colunas de texto• Sempre que possível quebrar o texto com

bullets ou numeração• Poder ser lido rapidamente• Utilizar links para documentos mais

desenvolvidos• Restringir-se ao essencial

Luís Vidigal


Sequencial Em Rede(Hipermedia)

?1 2 3 4Início Fim

Luís Vidigal

http://www.alentejodigital.pt/liceuevora/Paginas_dos_Cursos/paginas_dos_cursos.html


Hipertexto• O documento em papel é inerte• O hipertexto, sem pretender dar-lhe vida,

oferece-lhe movimento• O leitor participa na criação do conteúdo

da sua leitura• Estimula a criatividade e a descoberta• Uma nova forma de escrever, ler e

classificar• É um modo de navegação muito próximo

dos mecanismos do pensamento e da memória humana

Luís Vidigal


Fazer-se entenderÉ preciso utilizar

•Palavras curtas inferiores a três sílabas;•Palavras precisas;•Palavras correntes: evitar a gíria siglas ou abreviaturas;•Palavras concretas.

Formular frases curtas•Nunca frases com mais de duas linhas;•Nunca ter parágrafos com uma só frase.

Fazer parágrafos curtos“Um parágrafo é igual a uma ideia”

Ter um estilo próprio•Simples e directo•Explícito e preciso•Activo

Luís Vidigal


MáximaMáximaImagemImagem??

ResoluçãoResoluçãoe e côrcôr

MáximoMáximoMovimentoMovimento??

QuantidadeQuantidade de de imagensimagensporpor segundosegundo emem

AnimaçãoAnimação e e VídeoVídeo

MáximoMáximoSomSom??FidelidadeFidelidade

ComunicarComunicar electronicamenteelectronicamenteUmaUma questãoquestão de de gestãogestão

Produções ambiciosas têm dificuldades tecnológicas(hardware, armazenamento, processamento e distribuição)


and Smart

Um Princípio desde os anos 60(Programa Apollo)


Hiper-gráficos segmentados


Vantagens e desvantagens de hiper-gráficos segmentados

Desvantagens:• Podem ter tempos de download elevados• Pode não ser claro o que é seleccionável /

clicávelVantagens:• Podem permitir o uso de um tema ou

metáfora forte;• Podem proporcionar um apelo visual

relevante.


Usar Gráficos em vez de tabelas

Usar gráficos para:• Mostrar visualmente grandes

quantidades de dados• Mostrar relações entre dadosAs tarefas dos utilizadores determinam o

formato, gráfico ou tabelas:• Gráficos de linha mostram tendências• Gráficos de barras mostram diferenças

entre valores, num dado enquadramento


Ícones: Consistência e ContextoConsistência Contexto


Ligações hipertextuais (“links”)O link é de facto o controlo HTML fundamental para

navegação. Se não houvesse mais nada, tudo funcionaria com links de

texto – e funcionaria bem!Os links podem:• Ser embebidos no texto;• Ser apresentados separadamente (numa lista à parte,

como num menu).Os links foram o fundamento do aparecimento e viabilidade

da World Wide Web. Portanto, existem raízes profundas para se usarem links em aplicações e websites.


Links no texto• Colocar os links nas palavras

chave (seleccionar as palavras a que os links serão afectos);

• Numa lista, não fazer de tudo o que está escrito, links;

• Em listas ou textos em forma de listas em que os linkssejam relevantes, evitar linksembebidos (i.e., links no correr do texto)

• Se a lista for constituída por título e texto, usar os títulos para o efeito; é mais fácil identificar os links se forem cabeçalhos ou títulos.


Grupos e interesses envolvidos

do livro The Invisible Computer, de Don Norman


Factores possíveis para avaliação da Qualidade


Conteúdos1. Adequado às expectativas dos clientes?2. Actualizado e rigoroso?3. Estimulante?4. Layout e estrutura são fáceis de entender e usar?5. Exaustivo?6. Escrita clara e de fácil compreensão?7. Uso adequado de elementos multimédia?8. As imagens disponíveis comunicam claramente e

acrescentam valor?9. O conteúdo foi concebido especificamente para a

Web?


Funcionalidade1. Os serviços nucleares da organização são prestados online?2. O valor do sítio justifica o seu uso?3. As 5 necessidades principais dos clientes são resolvidas

através do uso do sistema de informação em causa? O sítio é personalizável?

4. Adapta-se a necessidades específicas de clientes?5. As funções disponíveis online estão integradas com o sistema

de informação da organização?6. O sítio está estruturado à volta das necessidades dos clientes

ou da organização interna da organização?7. Os clientes recebem respostas atempadas (ie, rápidas)?8. Existe um processo para os clientes avaliarem o andamento

dos seus assuntos (UPS, etc.)?9. O sítio encoraja os clientes a aprofundar assuntos e a

enriquecer a interacção?


Branding (Marca)• O impacto visual é consistente com a imagem da organização?• O utilizador reconhece no sistema de informação ou sítio o

valor que atribui à marca/organização?• A forma como a marca é tratada é consistente em todas as

secções e níveis do sistema de informação?• Está concebido de modo a permitir construir uma relação entre

o cliente e a marca, ao longo do tempo?• “Alavanca” as capacidades específicas da Internet para

melhorar e reforçar a imagem de marca?• Comunica explicitamente objectivos relativos aos clientes e

intenções da organização?• Reflecte a qualidade dos produtos e serviços oferecidos pela

organização?• A imagem global da organização evolui “interactivamente” para

se adequar melhor à Web?


Usabilidade1. O sítio ou a aplicação permite aos utilizadores saberem

sempre onde se encontram e onde podem/devem ir a seguir?2. O tipo de linguagem utilizado está de acordo com a audiência

identificada?3. O sítio ou aplicação permite ao utilizador sentir que está a

controlar os acontecimentos e que é livre?4. Visualmente, editorialmente, estruturalmente, funcionalmente,

etc.:5. Há coerência? Há standards?6. O sítio ou aplicação está feito de maneira a impedir que o

utilizador cometa erros? E se ele cometer um erro, ajuda-o?7. O utilizador pode navegar rapidamente pelas diversas secções

do sítio ou funções da aplicação?8. O sítio comunica, pela forma como se apresenta, a estrutura

de informação que o define?9. A aplicação ajuda os utilizadores a cumprirem as tarefas a que

se propõem?


Perigos da não usabilidade“na Web, a usabilidade é uma condição de sobrevivência.Se um sítio é difícil, as pessoas vão-se embora.Se a homepage falha em transmitir claramente o que a empresa

faz e oferece através do sítio, as pessoas abandonam.Se os utilizadores se perdem num sítio, vão dar uma volta a outro

lado.Se a informação num sítio é difícil de ler ou não responde às

perguntas dos utilizadores, estes desaparecem.O que não falta são sítio webs, em qualquer tipo de mercado.Ir para outra é a primeira linha de defesa dos utilizadores quando

enfrentam dificuldades.E de qualquer modo, no caso do comércio electrónico, as

pessoas não podem comprar se não descobrirem os produtos”

Jakob Nielsen (Usability 101, 2003)


Medir o ROIRetorno do investimento como critério para se medir a importância da

Análise Centrada no Utilizador

Fontes Ambiente MelhoriaMédia

Aumento de Produtividade Intranet Software corporativo 160%

Transacções Completadas(tais como vendas efectivas,registos, entrada de dados)

sítios de e-Commerce 100%

Rácio de Abandono sítios de e-Commerce 150%

Redução dos Custos de Formação Software corporativo 100%

Redução nas chamadas a call centers e help desk Pacotes de Software 200%

Nielsen Norman Group, 2002


Aumento de ProdutividadeMedidas de Correcção

• Destaque para as notícias;• Separação da informação em blocos perfeitamente

identificados, com realce para a informação mais solicitada pelos utilizadores;

• Links e títulos com linguagem menos técnica;• Separação clara da informação institucional;• Criação de elementos de navegação mais claros;• Utilização de princípios de design gráfico para melhor

separação e identificação de conteúdos;• Design gráfico mais moderno e leve, que torna a

experiência de utilização mais agradável.


Análise e Estruturação Conceptual de Sistemas

• CENTRADAS NO UTILIZADOR!• O utilizador é aqui o “conceito operativo”• Aprender a pensar os sistemas TAMBÉM em

função dos utilizadores• Capacitar os participantes para a criação de

interfaces efectivas e de utilização fácil e intuitiva

• Aprendizagem de métodos para analisar requisitos de sistema – do ponto de vista do utilizador


Método de Observação Directa• Os membros do grupo devem alternar na tarefa de

navegar nos sites. Um dos elementos navegará exclusivamente no site A e o outro no B. Enquanto um dos membros do grupo navega ("elemento utilizador"), o outro ("elemento observador") deve observar o seu comportamento e reacções de modo a permitir o posterior preenchimento da grelha de avaliação para o site em causa.

• O grupo dispõe de um máximo de 15 minutos para cumprir cada tarefa. A partir desse limite, considera-se que a tarefa não foi cumprida em tempo útil, devendo esse facto ser registado na grelha de avaliação do site.

• Depois de realizadas as tarefas, devem os dois elementos do grupo preencher as grelhas de avaliação dos dois sites.


Tarefas a Efectuar• O estudo irá incidir sobre dois sites. Cada grupo deve

efectuar a navegação nos sites de modo a cumprir em ambos os sites, as tarefas indicadas.

• Site A: http://www.amazon.co.uk• Site B: http://oninet.mediabooks.pt

– Descubra o nome do último livro publicado pelo autor do "Deception Point", bem como a data de publicação, o preço e o ISBN .

– "Encomende" (siga todo o processo até à introdução de dados pessoais) dois exemplares deste livro. Indique quanto custariam no total e indique quanto pagaria pelos portes.

– Considere que pretende pagar utilizando cartão de crédito mas não quer enviar o nº do cartão através da Internet, que alternativas lhe proporciona a livraria?


Metodologia para o Elemento Utilizador

• Em princípio, não deve existir comunicação entre os elementos do grupo durante a navegação. No entanto, se o utilizador encontrar sérias dificuldades no cumprimento de uma tarefa, pode pedir sugestões ao observador. Este facto deve ser registado na grelha de avaliação.


Metodologia para o Elemento Observador

• O elemento observador de cada grupo deve, especificamente, registar o seguinte:

• Número de enganos cometidos na navegação: – Voltar atrás num link, por se constatar que não conduz à página

desejada. – Interromper o carregamento de uma página. – Erros a preencher campos de formulários. – Como regra geral, qualquer outra situação que pareça enquadrar-se

nesta categoria. Erros por parte do software do lado do cliente (browserque “crasha”, etc.), não devem ser considerados.

• Tempo necessário para completar cada uma das tarefas. • Número de links seguidos. • Reacções e comentários do elemento navegador. • Após o cumprimento de cada tarefa, o elemento observador

deverá registar na grelha de avaliação os seguintes elementos:


Avaliação da Navegação– O Informação de navegação

• A - Não existe • B - Está em locais diferentes de página para página • C - Está no mesmo local na maioria dos casos • D - Está no mesmo local em todas as páginas

– Todas as Páginas têm meio de regressar à página inicial/anterior? • A - Não vi nenhum • B - Algumas têm • C - A maioria tem • D - Têm todas

– Ao navegar pelo sítio, é dada informação da localização dentro do mesmo:

• A - Nunca (é difícil saber onde me encontro durante a navegação). • B - Algumas vezes (algumas ajudas à navegação) • C - A maioria das vezes (a maioria dos caminhos está claramente

assinalada). • D - Sempre (nunca me perdi, soube sempre onde estava).


Avaliação sobre o Aspecto Visual das Páginas

• Organização espacial das páginas: – A - Sem organização aparente – B - Existe, mas dificulta o acesso ao conteúdo – C - Cuidada, mas não determinante para o fácil acesso ao conteúdo – D - Cuidada e contribui para destacar o conteúdo

• Utilização de cores:– A - Variável de página para página – B - Há consistência entre grupos de páginas – C - Há consistência entre grupos de páginas e os grupos fazem sentido – D - Uniforme e ajuda à navegação

• Uso de imagens: – A - Não existem imagens e sente-se a falta – B - Existem em excesso / distraem desnecessariamente – C - Existe equilíbrio entre entre as imagens e o texto – D - Existe equilíbrio entre entre as imagens e o texto e contribuem para destacar o

conteúdo • Uso de animações:

– A - Não existem – B - Existem em excesso / distraem desnecessariamente – C - Existe equilíbrio entre as animações e o texto – D - Existe equilíbrio entre as animações e o texto e contribuem para destacar o conteúdo


Avaliação do Feedback• Os campos nos formulários estão claramente assinalados e existem

instruções para o seu preenchimento: – A - Não – B - Por vezes – C - Quase sempre – D - Sempre.

• Validação dos dados de entrada: – A - Não é efectuada – B - É efectuada algumas vezes – C - É efectuada sempre – D - É efectuada sempre e contribui para a resolução e detecção de erros


Apreciação Global do Sítio – Identificação da(s) tarefa(s) que cada sítio suporta

• A - Não existe • B - Existe por vezes • C - Existe sempre • D - Existe e destaca claramente a sua funcionalidade

– Organização do sítio: • A - Desorganizado, sendo difícil relacionar as suas partes • B - Alguma organização, mas notam-se algumas incoerências • C - Está bem organizado, mas a organização não é uma mais-valia na sua utilização • D - Organização cuidada que contribui para suportar a utilização

– Facilidade de efectuar as tarefas: • A - Surgiram 2 ou mais erros graves • B - Surgiram alguns erros pouco relevantes • C - Não surgiram erros • D - Não surgiram erros e foi extremamente fácil cumprir as tarefas

– Se necessitar do serviço fornecido pelo sítio: • A - Nunca mais o usarei • B - Usarei se for obrigado • C - Usarei • D - Usarei e recomendá-lo-ei


Guia de Boas Práticas

na Construção de Web Sites

da Administração Directa e Indirecta do Estado


Grelha com as recomendações por

grupo


Grelha com as recomendações por

grupo(cont.)


#1 - Informação mínima publicada no web site• Identificação e descrição do organismo que tutela o web

site (com a missão, a descrição das actividades e serviços prestados, a descrição da estruturaorganizacional, com eventual recurso a diagramas)

• Lista de contactos (Correio postal, telefones, faxs e endereço de correio electrónico), pessoais, funcionaise/ou institucionais;

• Lista com todas as publicações do organismo e respectivos documentos;

• Legislação pertinente para a actividade da entidade;• Eventos programados ou em curso;• Relatório de contas;• Plano de actividades e orçamento;• FAQ (Perguntas mais frequentes);• Novidades;• Formulários para download;• Política de privacidade e segurança.


#2 – Actualização da Informação

Atributos visíveis ao visitante:

• Origem/autoria(com endereço de correio electrónico ou WWW)

• Data de criação• Data de publicação/revisão• Periodicidade de actualização• Data da próxima actualização.


#3 – Apresentação dainformação

• Usar um estilo consistente• Colocar informação baseada em texto• Imagens e sons• Texto• Utilizar uma linguagem clara e acessível a

todos os cidadãos• Indicar sempre o tamanho dos ficheiros

disponíveis para download• Línguas estrangeiras


#4 - Arquivo documental

Todos os documentos e informação diversa que estãopublicados num web site deverão, terminado o seu prazode vida, passar para o arquivo e este ser disponibilizadoaos visitantes.Motores de pesquisa devem ser empregues para facilitara procura de informação.


#5 - Questões legais e direitos de autorA responsabilidade que a instituição tem sobre os conteúdosexistentes no(s) seu(s) web site(s) deverá ficar clara e explícitanum documento apropriado. De igual forma, as questõesassociadas com a utilização da informação pelos visitantes deverão ficar claras e explícitas no web site.

#6 – Ligações a outros web sitesInformação pertinente presente noutros web sites, do mesmoorganismo público ou não, deve ser referenciada preferencialmenteatravés de links.


#7 – Software adicional

Se for necessário utilizar algum software específico para podervisualizar um conteúdo, dever-se-á informar o utilizador desse aspectoe disponibilizar o link para o fornecedor do software, para poderexecutar o download das versões apropriadas

WindowsMedia Player

><font><font><font

http://www.adobe.com/products/acrobat/readstep.html

http://java.sun.com/getjava/download.html

http://www.microsoft.com/windows/ie/

http://channels.netscape.com/ns/browsers/download.jsp

http://www.opera.com/download/

http://office.microsoft.com/home/default.aspx

http://www.microsoft.com/windows/windowsmedia/PT/players.asp


#8 - Registo do web siteem motores de pesquisa

http://www.sapo.pt/adicionar.html


#9 - Links em outros web sitesA equipa de gestão do web site deverá promover o respectivoendereço ao identificar outros web sites que possam servir comoporta de entrada e lá colocar links para o seu endereço.


#11 – Rapidez no download daprimeira página

Testes deverão ser realizados sobre o download da primeira página, com ligações a diferentes débitos, nomeadamente com modems de 56kbps, e obter tempos de download inferiores a 8 segundos.

#12 – Compatibilidade htmlNão deverão ser utilizadas instruções html (tags) apenassuportadas por um web browser.

#10 – Compatibilidade de browsersDeverão ser realizados testes sobre as páginas em diferentesbrowsers e em diferentes versões, pelo menos para os dois browsers com maior divulgação, nas suas duas últimas versões.


#13 - Disponibilização dos metadadosA página principal, ou homepage, e outras páginas principaisutilizadas para registo nos motores de pesquisa deverão contermetadados.

#14 – Promoção do web site noutrossuportes

Garantir que o URL do web site apareça em toda a documentaçãopublicada de modo a divulgar o web site.

#15 – Ligações na primeira páginaVárias categorias de informação deverão estar disponíveis naprimeira página, através da presença de ligações explícitas.


Acesso imediato a informação pertinente

• Identificação e descrição do organismoque tutela o web site

• Publicações• Formulários• Novidades• Primeira visita• Contacto• Mapa do web site• Motor de busca• FAQ (Perguntas mais frequentes)


#16 – Barras de navegaçãoDeverão ser definidas barras de navegação para todas as páginas, com diferenças para a primeira página ou homepage.

A página inicial deverá conter na barra de ferramentas as ligações para:• Homepage do Governo, Administração Directa e Indirecta do Estado/Sectorial ou Ministerial• Contactos• Mapa do web site• Motor de busca

Em todas as restantes páginas, as ligações deverão ser para:• Página principal• Mapa do web site• Motor de busca• Sugestões• “Voltar” (“Back”)


#17 – Rapidez no download das páginasTestes deverão ser realizados sobre o download das páginas com ligações a diferentes débitos, nomeadamente com modems de 56kbps, e obter tempos de carregamento inferiores a 20 segundos.

#18 - Resolução gráficaA concepção das páginas deverá permitir a navegação mesmo com a resolução gráfica diminuta.

#19 – Concepção de páginasUm conjunto de conselhos deverão ser observados na concepção e desenvolvimento das páginas para que o acesso por cidadãos com necessidades especiais não possa ficar vedado.


Páginas para Cidadãos com NecessidadesEspeciais

• Procurar a simplicidade na forma como a informação ou os conteúdos sãoposicionados nas páginas.

• Manter a informação em formato texto sempre que possível, para que estesconteúdos possam ser lidos por software específico, como sintetizadores.

• Evitar o uso supérfluo de gráficos, imagens ou sons. Quando usados, dever-se-á oferecer também um texto alternativo, o chamado equivalente textual, para cada um desses objectos. O contrário, apresentar equivalentes nãotextuais para os textos é também de considerar, especialmente para pessoasque têm dificuldades de leitura, por exemplo.

• ALT+TAGS nas imagens, contendo uma breve descrição da imagem, pois estainformação é lida de forma automática por software específico para invisuais. Desta forma, consegue-se transmitir algo sobre a imagem que é apresentada, seja ela uma simples fotografia ou um ícone para passar para outra página.

• Não basear a compreensão da informação por diferenças de cor, dada a incapacidade de certos cidadãos em distinguir as variações de cor, ou a possibilidade de alterar as cores com que a informação está a ser lida

• Aplicar um elevado contraste entre o fundo das páginas e o texto, e evitar o contraste verde/vermelho


Páginas para Cidadãos com NecessidadesEspeciais

• Minimizar a utilização de tabelas, pois essa disposição de informaçãoé de difícil tratamento pelo software específico de muitos utilizadores.

• O acesso ao motor de pesquisa deve estar no início da página. Estaestratégia permite que os programas de reconhecimento de textoencontrem essa facilidade mais rapidamente. De igual modo, osresultados das pesquisas devem ser apresentados o mais próximopossível do topo da página, uma vez mais para que os sistemas de reconhecimento de texto não tenham que passar por muita informaçãoacessória até chegar ao primeiro resultado da pesquisa.

• Assegurar que todos os objectos que apresentem movimento, scrolling, blinking, etc, possam ficar suspensos.

• Preparar o web site para que este possa ser acedido por diferentesequipamentos terminais, para além do teclado e do rato. Permitir queas várias funcionalidades e documentos possam ser acedidos atravésde várias formas, por equipamento diverso.

• Indicar outras fontes que possam auxiliar um qualquer cidadão nautilização de tecnologias concebidas para facilitar o acesso à informação.


#20 – Testes de acessibilidade específicos

A acessibilidade dos web sites deverá ser testada, nomeadamente com o recurso a sistemas como o “Bobby”

http://bobby.watchfire.com

#21 - Formulários para downloadTodos os formulários utilizados pelo organismo ou serviço em causadeverão estar disponíveis para download e impressão.

http://www.cogentis.com.au/online-free-accessibility-test.htmlhttp://wave.webaim.org/http://www.tawdis.net/taw3/cms/en


#23 - Pagamentos on-lineDeve ser indicado:

• O valor do pagamento;• O produto ou o serviço adquirido;• As formas de pagamento possíveis;• A forma como se processa a entrega ou disponibiliza o acesso.

Todo o organismo público deverá, de forma planeada e sustentada, permitir que as interacções entre o cidadão e o estado se façam de forma electrónica, nas quais o fornecimento de informação se farápor formulário on-line e os diferentes estados dos processosadministrativos serão visíveis para o cidadão. Esta preocupaçãodeverá ter tradução no plano director do web site.

#22 - Preenchimento de declarações/formulários on-line


#24 - Interacção com o cidadão

Deverão ser disponibilizados no web site mecanismos ou serviçosque permitam e promovam a interacção entre o cidadão e o serviçoou organismo da Administração Pública

• Serviço de Newsletter• Correio electrónico - Sugestões• Forum• Chat on-line - help-desk• Linhas telefónicas e fax dedicados ao apoio aos utilizadores• Livro de sugestões/reclamações


#25 - Resposta às mensagens de correio electrónico recebidas

Toda as solicitações realizadas por correio electrónico para osserviços ou organismos da Administração Directa e Indirecta do Estado, sejam pedidos de esclarecimento, sugestões ou reclamações, deverão ser objecto de resposta com a maior brevidade possível, que não excederá 5 dias úteis.

#26 – Plano directorA equipa de gestão do web site deverá procurar definir, emconjunto com a administração do organismo público, a estratégia e o plano de desenvolvimento do web site, bem como as tarefastransversais de gestão e de suporte. Esta actividade deve levar à definição de um plano de director de desenvolvimento.


#27 – ResponsabilidadeDeverá existir uma clara atribuição de responsabilidades sobre osdiferentes componentes do web site, nomeadamente da suaadministração, produção de conteúdos e infraestrutura tecnológicade suporte.


#28 – Indicadores de gestãoA equipa de gestão deverá definir os indicadores de desempenho e de utilização do web site que considera mais apropriados e a forma de recolha desses indicadores.

• Número de hits• Número de visitas ou de sessões• Tempo médio por sessão• Número de utilizadores únicos• Número de impressões• Páginas/Informação mais acedida• Páginas/Informação menos acedida• Páginas mais utilizadas como entrada no web site• Número de visitas originadas por cada web site que referencieo web site do organismo• Acessos por hora, para identificar picos de tráfego e “horasmortas”• Numero acessos ao servidor com sucesso/insucesso


#29 - Satisfação dos utilizadoresA equipa de gestão do web site deverá conceber e construir um sistema para avaliação da satisfação dos utilizadores. Esta práticade recolha de indicadores de satisfação deve ser descrita no seumétodo, elementos a avaliar, forma de recolha da informação e periodicidade.

#30 – Controlo dos conteúdosDeverá ser criada e mantida uma lista sumária com a indicação dos documentos que estejam on-line no web site, para facilitar as tarefasde gestão dos conteúdos e consequentemente a melhoria daqualidade da informação.


#31 – FormaçãoDeverão ser definidos planos de formação específicos ou integradosem planos de formação mais abrangentes, sobre as questõestecnológicas, operacionais e sociais da Sociedade da Informaçãopertinentes para o organismo da Administração Directa e Indirecta do Estado. De igual forma, o controlo da execução dos planos de formação deverá ser objecto de um relatório periódico.

#32 – Auto-avaliaçãoA equipa responsável pela gestão do web site deverá definir e realizar um exercício de auto-avaliação do web site, actividade daqual deverá resultar num relatório, documento importante para a definição do plano director.


#33 - Política de privacidadeQualquer web site deverá apresentar de forma clara a suaposição relativamente ao respeito pela privacidade e protecçãodos dados individuais recolhidos.

#34 – Cookies e clickstreamsA utilização de cookies e clickstreams deverá ser comunicada aosvisitantes e devidamente explicadas a sua utilidade e funcionalidade.

#35 – Dados pessoais de elementos daAdministração Directa e Indirecta do EstadoCuidados deverão ser observados perante a publicação de informação pessoal sobre elementos internos do organismo, de modo a que não sejam violados os princípios da privacidade e protecção de dados individuais.


Recolha e Tratamento dos Dados Pessoais1. O tratamento dos seus dados é feito no cumprimento da

legislação sobre a protecção de dados pessoais. Os mesmos, sujeitos a tratamento informático, constarão na(s) base(s) de dados da ______________ e destinam-se ao registo, operaçõesestatísticas e apresentação de produtos e serviços, bem comoinformação institucional, a disponibilizar pelas mesmas.

2. O seu fornecimento é facultativo e é garantido, nos termos da lei, o direito de acesso, rectificação e anulação de qualquer dado quelhe diga directamente respeito, pessoalmente ou por via escrita, directamente para o endereço constante na página inicial destesite.

3. Apesar dos sites da ______________ terem áreas seguras, emque a informação circula encriptada, outros dados pessoais háque circulam em rede aberta, não estando protegidos contra desvios eventuais. Portanto, a ______________ não se poderáresponsabilizar pela comunicação de senhas de acesso, passwords, códigos confidenciais e de qualquer informaçãosensível que possa, eventualmente, ser desviada.


Política de Privacidade1. Os dados recolhidos destinam-se prioritariamente a aferir o

comportamento dos utilizadores no contexto do nosso site. A ______ pretende desta forma conhecer melhor os seusutilizadores, com o objectivo de optimizar os conteúdos e personalizar os serviços disponibilizados;

2. Adicionalmente, pretendemos também apresentar outros serviçose/ou produtos desenvolvidos por esta organização e que, de algum modo, sejam interessantes para os utilizadores. Caso nãoqueira receber informações, ou queira seleccioná-las, poderáfazê-lo abaixo, nos campos definidos para o efeito.

3. A política de privacidade da _____ enquadra-se dentro do que a lei aplicável prevê. Em momento algum cederemos os dados recolhidos a terceiras entidades ou faremos deles um usodiferente do referido nos pontos 1 e 2.

CookiesO site _____ instala e envia cookies, deste mesmo site, para o computador do visitante registado, desde que essa opção estejaactivada no computador utilizado para fazer a navegação. Este procedimento facilitará a navegação e personalização. Caso estaopção não esteja activada, cada nova visita às áreas protegidas do site terá de ser precedida da introdução do user name e dapassword.


Alterações à presente Política de PrivacidadeA _______ poderá rectificar esta política a qualquer momento. Em caso de serem efectuadas alterações significativas quanto aomodo de utilização dos dados pessoais do visitante registado, faremos circular um anúncio de destaque nas nossas páginas duranteum determinado período de tempo ou enviaremos um avisoindividual por via electrónica.

Disposição finalCaso não concorde com as políticas e procedimentos, mesmooptando por não receber qualquer informação da ____, poderáreflectir essa opção no final. Nessa situação, o seu registo não seráconsiderado e não obterá acesso às áreas restritas deste site. Enquanto não fizer a sua opção não receberá o e-mail que consolidao registo efectuado, o qual contém a sua password de acesso.


#36 – Autenticação•Cada organismo público deverá definir, com clareza e exactidão, as ferramentas e os procedimentos a adoptar para controlar o acesso a informação considerada como restrita ou a autenticaçãode informação recebida.

• Autenticação: é possível identificar univocamente quem enviou a mensagem.• Integridade: O conteúdo da mensagem não foi alterado entre a emissão e a recepção.• Não-repúdio: O emissor não pode negar que compôs e queenviou a mensagem.• Confidencialidade: Só o destinatário da mensagem a poderáabrir.


#37 – SegurançaCada organismo deverá ter um plano de segurança no qual sãodescritos os mecanismos e os procedimentos apropriados parasegurança da infra-estrutura electrónica.

#38 – Aquisição de serviços de hosting e de concepção, desenvolvimento e

manutenção de web sitesA contratação de serviços em regime de outsourcing, nomeadamente de hosting, concepção, desenvolvimento e manutenção de web sites, deverá observar um conjunto de aspectos que garantam a qualidade do serviço prestado.


Contratação de um ISP• Nível de conectividade – O nível de conectividade apropriado

deve ser definido pela instituição e negociado com o ISP. Eventuais penalizações podem ser definidas para aplicar aoISP no caso em que este não consiga garantir os níveisdesejados.

• Segurança – Os mecanismos, procedimentos e sistemasdestinados à segurança da informação devem ser analisadospela instituição contratante.

• Backup – Os procedimentos de backup devem ser conhecidose analisados.

• Estatísticas – Os indicadores de utilização e de desempenhoa fornecer pelo ISP devem estar de acordo com a recomendação #29 constante neste guia, além de satisfazer as necessidades de gestão do web site.

• Apoio – O tipo de apoio prestado ao cliente pelo ISP, como a existência de uma linha azul, deve ser solicitado para posterior análise.


Contratação de um site• Concepção – A concepção do web site, nas questões de

conteúdo, navegação ou grafismo, deve respeitar o presentedocumento, pelo que a instituição deverá garantir pelomecanismo mais adequado que tal é realizado.

• Desenvolvimento – O desenvolvimento de um web site deverespeitar a concepção do mesmo, pelo que o presentedocumento constitui um documento de referência. De igualforma a instituição deverá assegurar que a entidade contratadapara o desenvolvimento cumpre a concepção do web site e segue as directivas do guia.

• Manutenção – Por manutenção aqui entende-se a actualização dos conteúdos. No caso de ser uma entidadeexterna a responsável por realizar as actualizações, os tempos para a realização das actualizações após a sua notificaçãodeve ser objecto de contrato.


Grelha de Avaliação


Grelha de Avaliação Qualitativa dos Web Sitesda Administração Directa e Indirecta do Estado

Critérios(qualitativos)

Peso Indicadores Peso Medidas

1. descrição do organismo:a) missãob) estrutura orgânicac) serviços prestados

9,1%9,1%9,1%

S/NS/NS/N

2. contactos 9,1% Semáforo

3. publicações 9,1% Semáforo

4. novidades 9,1% Semáforo

5. FAQ (perguntas mais frequentes) 9,1% S/N

6. serviços e respectivos contactos incluindo e-mail 9,1% Semáforo

7. informação sobre os formulários e documentos do serviço para download (com indicação do tamanho, do formato, do software especial necessário e link para empresa), ou em HTML

9,1% Semáforo

8. data da última e da próxima actualização dos documentos (quando se aplicar)

9,1% Semáforo

9. diversidade dos conteúdos 9,1% Semáforo

10. apresentação da política de privacidade e segurança

9,1% S/N

11. versão em outras línguas sempre que se justifique 9,1% Semáforo

1 Conteúdos(RCM 22/2001 “clareza da forma como é apresentada”)(RCM 22/2001 “cumprimento das disposições legais relativas ao conteúdo e forma de apresentação das páginas dos organismos públicos -reclamações sobre conteúdo, protecção de dados pessoais, notificação, copyright, etc...”)

20%





1. legislação 100% / nº de indicadores aplicáveis

Semáforo

2. informação sobre o organismo (organigrama, lei orgânica)

100% / nº de indicadores aplicáveis

Semáforo

3. eventos programados ou em curso 100% / nº de indicadores aplicáveis

Semáforo

4. contas, relatório de actividades e plano de actividades

100% / nº de indicadores aplicáveis

Semáforo

5. plano de actividades 100% / nº de indicadores aplicáveis

Semáforo

6. estatísticas, publicações e estudos 100% / nº de indicadores aplicáveis

Semáforo

7. outra informação 100% / nº de indicadores aplicáveis

Semáforo

2 Actualização dos Conteúdos(RCM 22/2001 “graude actualização dainformaçãodisponibilizada”)

20%





1. a página principal deve correr em diferentes browsers e em diferentes versões:a. NetScape 6b. Internet Explorer 6c. NetScape 4d. Internet Explorer 5

14,3%14,3%14,3%14,3%

S/NS/NS/NS/N

2. URL em toda a documentação publicada 14,3% S/N

3. principais motores de busca(sapo (http://www.sapo.pt), aeiou (http://www.aeiou.pt), altavista (http://www.altavista.com), yahoo (http://www.yahoo.com))

14,3% Semáforo

4. tempo de carregamento de página(inferior a 8 segundos)

14,3% S/N

3 Acessibilidade(acesso à primeirapágina)

20%





1. as páginas devem correr em diferentes browsers e em diferentes versões:a. NetScape 6b. Internet Explorer 6c. NetScape 4d. Internet Explorer 5

10%10%10%10%

S/NS/NS/NS/N

2. mapa do Web Site 10% S/N

3. tempo de carregamento de página(inferior a 20 segundos)

10% Semáforo

4. barra de navegação na página principal com links (para página do governo / Administração Pública / Sectorial ou Ministerial, contactos, mapa do Web Site, motor de busca, caixa de sugestões)

10% Semáforo

5. nas outras páginas, barra de navegação com links (para página principal, mapa do Web Site, motor debusca, voltar, caixa de sugestões)

10% Semáforo

6. motor de busca 10% S/N

7. links activos 10% Semáforo

4 Navegabilidade(navegação interna) 20%





1. conformidade com o nível A, correspondente à Prioridade 1, das Directivas para a acessibilidade do conteúdo da web do W3C

50% S/N

2. conformidade com o nível Double-A, correspondente à Prioridade 2, das Directivas para a acessibilidade do conteúdo da web do W3C

10% Semáforo

3. conformidade com o nível Triple-A, correspondente à Prioridade 3, das Directivas para a acessibilidade do conteúdo da web do W3C

10% Semáforo

4. símbolo de acessibilidade na primeirapágina a que reconhecidamente sejamassociadas características de desenhouniversal e um texto 2 explicativo(RCM 97/1999 - 3º “Os sítios da Internet dos organismos ... que satisfaçam osrequisitos de acessibilidade nele referidosdeverão indicá-lo de forma clara, através de símbolo a que reconhecidamente sejaassociada essa característica.”)

30% S/N

5 Facilidades para Cidadãos com Necessidades Especiais(RCM 22/2001 “cumprimento das disposições legais relativas aoconteúdo e forma de apresentaçãodas páginas dos organismospúblicos, designadamente a suaacessibilidade por cidadãos com necessidades especiais”)(RCM 97/1999 sobre a acessibilidade dos sítios daAdministração Pública na Internet pelos cidadãos com necessidadesespeciais)(RCM 95/1999 4.2 “deverão ser levadas em linha de conta as exigências específicas dos cidadãos com necessidadesespeciais”)Mais informação em

http://www.acesso.mct.pt, http://www.cast.org/bobby e Plano de Acção eEurope 2002 – Capítulo: Participação de todos na economiado conhecimento

20%


Grelha de Avaliação da Maturidade dos Web Sitesda Administração Directa e Indirecta do Estado

Critérios(Maturidade)

Indicadores Peso Medidas

1. declarações / formulários on-line paradownload

100% / n.º indicadores aplicáveis Semáforo

2. preenchimento e entrega on-line 100% / n.º indicadores aplicáveis Semáforo

3. sugestões e reclamações on-line 100% / n.º indicadores aplicáveis S/N

4. pagamentos on-line 100% / n.º indicadores aplicáveis S/N

5. segurança nos pagamentos on-line 100% / n.º indicadores aplicáveis S/N

6. respostas aos e-mails recebidos 100% / n.º indicadores aplicáveis Semáforo

7. newsletter, forum, chat on-line e outras facilidades on-line


8. e-mail, telefone, fax, chat on-line com acesso a help-deskdedicados a apoio aos utilizadores


Serviços on-line


Níveis da avaliação das Autarquias• Nível 5 - Ausência na Internet da Câmara Municipal. • Nível 4 - Web sites que publicam informação genérica sobre o

município e a autarquia, direccionada para todos mas seminformação sobre os formulários dos serviços e sem serviçosonline.

• Nível 3 - Web sites que dispõem de interacção entre a câmaramunicipal e o cidadão através do download de formuláriosrelativos aos serviços.

• Nível 2 - Web sites que dispõem de interacção nos doissentidos entre a câmara municipal e o cidadão através do processamento de formulários incluindo autenticação.

• Nível 1 - Nível da transacção, os web sites que permitemtratamento, decisão e entrega, incluindo pagamento, dos serviços fornecidos pela autarquia.


Acessibilidade - Níveis de prioridade• [Prioridade 1]

Pontos que os criadores de conteúdo Web têm absolutamente de satisfazer. Se o não fizerem, um ou mais grupos de utilizadores ficarãoimpossibilitados de aceder a informações contidas no documento. A satisfação deste tipo de pontos é um requisito básico para quedeterminados grupos possam aceder a documentos sediados na Web.

• [Prioridade 2] Pontos que os criadores de conteúdos na Web devem satisfazer. Se não o fizerem, um ou mais grupos de utilizadores terão dificuldades em aceder a informações contidas no documento. A satisfação deste tipo de pontostraduzir-se-á na remoção de barreiras significativas ao acesso a documentos sediados na Web.

• [Prioridade 3] Pontos que os criadores de conteúdos na Web podem satisfazer. Se não o fizerem, um ou mais grupos poderão deparar-se com algumas dificuldadesem aceder a informações contidas nos documentos. A satisfação deste tipode pontos irá melhorar o acesso a documentos sediados na Web.


AcessibilidadeNíveis de conformidade

• Nível de conformidade "A": foram satisfeitostodos os pontos de verificação de prioridade 1;

• Nível de conformidade "Duplo A": foramsatisfeitos todos os pontos de verificação de prioridades 1 e 2;

• Nível de conformidade "Triplo A": foramsatisfeitos todos os pontos de verificação de prioridades 1, 2 e 3.


Conselhos para fazer sites acessíveis (1)

• Imagens e animações: Utilize o atributo alt para descrever a função de cada elemento visual;

• Mapas de imagem: Utilize mapas de cliente (anotação MAP), empregando texto nos pontos activos;

• Multimédia: Disponibilize legendas e transcrições da componente sonora e descrições da componente visual;

• Ligações de hipertexto: Utilize texto que faça sentido, mesmo que lido fora do contexto. Por exemplo: evite “clique aqui”;

• Organização das páginas: Utilize cabeçalhos, listas e uma estrutura consistente. Sempre que possível, utilize CSS para efeitos de disposição e estilo;

http://www.w3.org/

http://www.w3.org/WAI


• Gráficos e esquemas: Forneça resumos ou utilize o atributo longdesc;

• Scripts, applets e suplementos: Forneça conteúdo alternativo, se as características activas não forem acessíveis ou se não forem suportadas pelo navegador;

• Frames: Utilize a anotação NOFRAMES e empregue títulos com significado;

• Tabelas: Faça com que a leitura linha-a-linha seja compreensível. Forneça resumos;

• Verifique o trabalho: Efectue validações. Recorra a ferramentas e às directivas existentes em www.w3.org/TR/WCAG

Conselhos para fazer sites acessíveis (2)

http://www.w3.org/

http://www.w3.org/WAI


Os Indicadoresde Avaliação

deGoverno Electrónico

Uma proposta para o Governo brasileiroem 2005

Luís Vidigal


Indicadores de Avaliação do Governo Electrónico1. Conveniência para o Cidadão

1. Maturidade do serviço prestado electronicamente2. Orientação Social3. Capacidade de comunicação e influência4. Multiplicidade de acesso a canais5. Facilidade de uso6. Transparência e Conveniência

2. Impacto para a Administração Pública1. Eficiência e Efectividade2. Inovação organizacional e informacional3. Inovação tecnológica


Grupos de Indicadores de Avaliação do Governo Electrónico

40

60

0 10 20 30 40 50 60 70

Conveniênciapara o Cidadão

Impacto naAdministração

Pública


1 - Indicadores de Conveniência para o Cidadão

• Maturidade do serviço prestado• Orientação Social• Comunicação e influência• Acesso a canais• Facilidade de uso• Transparência e Conveniência


Indicadores de Conveniência para o Cidadão

15

15

15

15

20

20

0 5 10 15 20 25

Maturidade

Orientação Social

Comunicação e influência

Acesso a canais

Facilidade de uso

Transparência e Conveniência


Maturidade do serviço prestado electronicamente

1. Informação sobre direitos e obrigações2. Serviços analógicos num só sentido (puxar

formulários)3. Serviços digitais num só sentido (preenchimento

e submissão on-line de formulários)4. Serviços digitais integrais (dois sentidos) para

microprocessos (certidões, atestados, etc.)5. Serviços digitais integrais (dois sentidos) para

macroprocessos (licenciamentos e outros serviços básicos globais da “Linha da Vida”.)

6. Proactividade (antecipação das necessidades do cidadão)


Orientação Social• Volume de uso em locais de acesso

comunitário• Alinhamento a Políticas Sociais


Capacidade de comunicação e influência

1. Mail e telefone das instituições envolvidas2. Mail e telefone dos funcionários públicos

intervenientes3. Consulta Pública a documentos (Fóruns,

chat, inquéritos, etc.) sobre assuntos do quotidiano

4. Consulta Pública a documentos (Fóruns, chat, inquéritos, etc.) sobre opções políticas

5. Referendos e sondagens on-line, com autenticação digital


Multiplicidade de acesso a canais

• Acesso privativo a serviços• Quiosques ou PCs de acesso público• Intermediação presencial a serviços

electrónicos• Call center (com serviços fixos ou

móveis)• Contact center (com serviços fixos ou

móveis)


Facilidade de uso• Linguagem compreensível• Navegabilidade• Rapidez• FAQ, Ajuda on-line ou pelo telefone• Acesso a cidadãos com necessidades

especiais


Transparência e Conveniência

• Prestação de Contas• Prontidão 24x7• Pagamentos on-line ou pelo telefone• Acompanhamento electrónico do estado

dos processos


2 - Indicadores de Impacto para a Administração Pública

• Eficiência e Efectividade• Inovação organizacional e informacional• Inovação tecnológica


Indicadores de Impacto para a Administração Pública

30

30

40

0 10 20 30 40 50

Eficiência eEfetividade

Inovaçãoorganizacional e

informacional

Inovaçãotecnológica


Eficiência e Efetividade

• Tempo• Custo de funcionamento• Volume de Uso


Inovação organizacional e informacional

1. Solução parcial de um organismo2. Solução global de um organismo3. Solução global inter-departamental4. Utilização de repositórios de

informação comuns5. Replicabilidade a outras situações6. Sustentabilidade (Outsourcing,

externalização, modelo de gestão, etc.)


Inovação tecnológica• Soluções normalizadas e abertas• Plataformas de interoperabilidade• Web Services• Gestão Documental e Workflow• CRM• Segurança (Autenticidade,

Confidencialidade, Integridade e Não Repúdio)

• Infra-estrutura de cluster e grid


Certificação da Qualidade dos Sites

http://www.qwebmark.net

BBB Accreditation Standards

http://boston.bbb.org

Open Web Application Security Project (OWASP) http://www.owasp.org

http://www.w3.org/TR/WAI-WEBCONTENT/Web Content Accessibility Guidelines 1.0


Regras de Acessibilidade do W3C

• ATAGAuthoring Tool Accessibility Guidelines 1.0 http://www.w3.org/TR/WAI-AUTOOLS/

• WCAGWeb Content Accessibility Guidelines 1.0http://www.w3.org/TR/WAI-WEBCONTENT/

• UAAGUser Agent Accessibility Guidelines 1.0http://www.w3.org/TR/WAI-USERAGENT/


Especificações Técnicas do W3C

• HTML, XML, CSSW3C Technical Reports and Publicationshttp://www.w3.org/TR/

• SVGScalable Vector Graphicshttp://www.w3.org/Graphics/SVG/

• SMILSynchronized Multimedia Integration Languagehttp://www.w3.org/TR/2005/REC-SMIL2-20050107/


WAI - Web Accessibility Initiativehttp://www.w3.org/WAI/guid-tech.html

avaliacao sites nov 2008

Education