Oficina avaliação de Sítios - 10ª Oficina de Inclusão Digital

governoeletronico.gov.br

Ministério do Planejamento, Orçamento e Gestão

Secretaria de Logística e Tecnologia da Informação

Departamento de Governo Eletrônico

Avaliação de Sítios

governoeletronico.gov.br 2 de 40

Olá, nós somos o DGE

Departamento de Governo Eletrônico

Implantar de forma unificada serviços por meios eletrônicos no governo federal;

Integrar outros níveis de governo na prestação de serviços;

Desenvolver e-serviços orientado por eventos da vida de cidadãos e demais setores sociais;

Definir e Implantar padrões de usabilidade e acessibilidade para e-Serviços;


Legislação (algumas...) relativa a presença do Governo na internet.

Diretrizes do Programa de Governo Eletrônico Resolução nº 07 de 29 de julho de 2002, que estabelece regras e

diretrizes para os sítios da APF; IN SLTI nº 04/2010, que trata da contratação de serviços de Tecnologia da

Informação; Resolução do CGI.br/RES/2008/008/P, que regulamenta os procedimentos

de registro de domínio; Manual de Aplicação da Barra de Identidade Visual do Governo Federal na

Internet, que estabelece padrões de identidade visual para sítios e portais; Portaria nº 03 de 07 de Maio de 2007 que institucionaliza o Modelo de

Acessibilidade em Governo Eletrônico – e-MAG. Portaria normativa nº 05 de 14 de Julho de 2005 que institucionaliza os

Padrões de Interoperabilidade de Governo Eletrônico – e-PING.


Padrões do Governo Federale-PING

Arquitetura de Interoperabilidade em Governo Eletrônico - entre aplicações/órgãos

e-MAG

Modelo de Acessibilidade em Governo EletrônicoAcessibilidade

e-PWG Padrões Web em Governo EletrônicoCamada de apresentação


e-PWG

- Guia de administração de sítios

Cartilhas:

- Codificação- Usabilidade- Redação Web- Desenho de Interação



Análise SínteseCodificação, , Desenho e Acessibilidade


Encontrar pontos de melhoria nas páginas e e-serviços do governo federal.Busca levantar os problemas mais evidentes que vão impactar na experiência de uso do cidadão.

Características:

● Preliminar● Não exaustiva● Generalista

Periodicidade:Realizada sob demanda.

Objetivo


Elementos da avaliaçãoDois documentos:

• Procedimentos de avaliação-base• Analise-documento-modelo

Escopo• A página inicial• Formulário de Fale Conosco • Uma página secundária (citar – url)• Uma página de consulta/serviço (citar – url)• Resultados da caixa de busca (citar - url)

Seções: • Análise de código • Análise de desenho • Análise de acessibilidade


Ferramentas utilizadasASES

Websiteoptimization - http://www.websiteoptimization.com/services/analyze/

Firefox - br.mozdev.org/firefox/download.html

Internet Explorer

Extensões Firefox

HTML Validator, Awesome screenshot, Web developer, Yslow, Fangs, Firebug, Contrast Checker, Wappalizer

http://www.websiteoptimization.com/services/analyze/

http://br.mozdev.org/firefox/download.html


Observações:

• Cuidar o português;

• Analisar globalmente;

• Fechar escopo quando necessário;

• Fornecer exemplos, detalhes;

• Ilustrar;

• Consultar as cartilhas durante a análise;

• ...e citar as cartilhas no documento de análise;

• É um instrumento de avaliação humana, não mecânico;

• Buscar melhoria do instrumento.


Análise do Código

• Semântica• Maturidade• Conformidade com os Padrões Web• Estrutura:

– Avaliação– Diagnóstico– Recomendações


URL

“.gov.br”Urls existentesFuncionamento sem o prefixo “www”

• Deve funcionar sem o www• S/ www abrindo em interface administrativa –

muito ruim

Página inicial e secundárias: url amigáveis – sem $8?-132321/


Doctype

Presença de doctype no cabeçalho, conformidade. Em caso de frames, testar doctypes de todos documentos

Descrição do TitleEm caso de frames, testar doctypes de todos documentosVerificar páginas secundárias.

Title


Declaração de idiomaEm caso de frames, testar em todos os arquivos que compõe o quadro

Testar secundárias

Mapa de caracteres

Em caso de frames, testar em todos os arquivos que compõe o quadro

Testar secundárias

Em caso de frames, testar em todos os arquivos que compõe o quadro

Testar secundárias

Verificar discrepâncias (banco-declaração)



Navegadores

SGC

Ie7.

Firefox

Próprio

Não detectado

Indícios de uso


Semântica e conformidade Padrões W3C

Estilos (CSS)

Erros no código (a partir do doctype)

H1, listas, tabela, p, blockquote

inline

Abuso de classes

Folhas repetidas



errado<div id="main">

<div class="maincontent">

<p class="maincontenttext">O texto.</p>

</div>

</div>

certo

<div id="main">

<div>

<p>O texto.</p>

</div>

</div>

CSS: div#main p { /* regras */ }


Funcionamento sem javascript

Atributos positivos:

Preservação das funções vitais do sítio: navegação, busca.

Atributos negativos:

funções triviais (menus) param de funcionar;

Informações somem.

Não é possível acessar informações básicas (sub itens de menu).


Atributos proprietários ou em desuso

Peso dos elementos

Citar quais. Exemplificar

Itens pesados

Desproporção

Excesso de itens

Peso

Presença de técnicas de otimização


Página Inicial Fale Conosco

22kB

1%22kB

2%

2350kB

72%

253kB

22%

789kB

24% 786kB

68%

1kB

0%1kB

0%

102kB

3%102kB

9%

Peso dos Elementos das Páginas

Documento Imagens Scripts Objetos Folhas de Estilo


Análise do Desenho

• Identidade• Padronização• Leitura• Navegação• A forma segue a função


Atributos positivos: • Existência da barra e logotipos.

Atributos negativos:• Inexistência da barra;• barra antiga;• Logotipos errados.

Identidade Visual


Padronização Visual

Atributos positivos: • Identidade visual consistente entre a página inicial e secundárias.

Atributos negativos:seções ou serviços sem e/ou com outra identidade visual;identidade visual fraca, sítio com identidade desvinculada da família (portal).


CabeçalhoAtributos positivos: cabeçalho ocupando menos que ¼ da área visível.utilização de elementos pertinentes: Identificação do sítio, atalhos para Fale

Conosco, busca e login, etc. Uso consistente de imagens.

Atributos negativos:cabeçalho ocupando mais de ¼ da área visível;falta de identificação clara do que se trata o sítio;cabeçalho “pirotécnico” - apenas visual, sem atalhos ou ferramentas.


Atributos positivos: uso da cor respeitando a identidade;cor utilizada como informação complementar em funcionalidades e informações;palheta de cores que facilita o entendimento das informações;bom contraste entre figura-fundo.

Atributos negativos:cor como única em funcionalidades e informações;palheta “pirotécnica”;Problemas de contraste e ruído colorido (uso de cores muito próximas na palheta);

Cor


Animação e multimídiaAtributos positivos: uso da multimídia quando pertinente;multimídia inobstrusiva; presença de alternativas ao conteúdo multimídia e/ou de desligá-lo;uso da animação em apenas um ponto.

Atributos negativos:uso indiscriminado da multimídia; multimídia obstrusiva; impossibilidade de acesso ao conteúdo de outras formas ou desligar a animação;uso da animação em mais de um ponto.


Pregnância e Relevância das imagensAtributos positivos:

fotos com foco no assunto;

imagens decorativas utilizadas de forma comedida e visando enriquecer a informação; ícones pregnantes;

banners com fins de divulgação de novidades;

selos obrigatórios utilizados de forma a não comprometer o fluxo da informação.


fotos sem objetivo específico;

imagens decorativas utilizadas para preeenchimento de espaço, rococós, sem objetivo;

ícones não associados a função a qual estão vinculados;

banners utilizados como substituto a itens de menu, banners antigos com informação ultrapassada.


Formato da imagemAtributos positivos: utilização correta da extensão (jpg, png, gif);imagens bem definidas de fácil interpretação;

Atributos negativos:utilização incorreta da extensão; fotos com excesso de artefatos, tornando impossível a identificação de

rostos, por exemplo;imagens sem definição, de difícil interpretação.


Diagramação e uso de área brancaAtributos positivos:

diagramação consistente na página inicial e secundárias;

uso de grelha (grid);

páginas com áreas e hierarquia claramente demarcadas;

existência de “áreas de respiro” entre os blocos de informação;

uso de áreas brancas.


ausência de diagramação;

diagramação desinteressante;

Falta de hierarquia ou áreas demarcadas.

ausência de áreas brancas;

poluição visual.


LeiturabiidadeAtributos positivos:

textos alinhados a esquerda;

o menor tamanho da fonte ser igual ou superior a 10pt;

links bem caracterizados;

entrelinhas consistentes nos blocos de conteúdo;

bom contraste entre o texto e o fundo.


textos blocados (justificados) criando “rios brancos”;

tamanhos muito pequenos de fonte;

links de difícil identificação;

entrelinhas apertadas;

texto com pouco contraste.


Acessibilidade

• Conteúdo alternativo• Fluxo da informação• Atalhos• Navegação• A forma segue a função


Simulação de leitor de tela


presença de todas informações da página em ordem.


perda de informações;

texto alternativos mal-formatados;

leitura incoerente.


Avaliação ASES


sítio acessível;

sítio com poucos erros de fácil solução.


sítio inacessível.


Navegação por teclado


Possibilidade de navegar pela página via teclado;

Presença de atalhos de teclado com acesso as principais funções: Busca, Fale Conosco;


Impossibilidade de navegar pelas informações por teclado.


Uso da atributo alt em imagens


Imagens com descrições pertinentes;

Imagens decorativas com alt vazio.


Imagens sem atributo alt;

Imagens com atributo alt não descritivo: Ex: imagem01.gif, foto.gif, ico.png, Novotelefone.png (sem citar o numero), logo.gif, etc...

Imagens decorativas com descrição: Ex: barraesquerda.gif, espaçador.gif, etc...


Quebras de navegação


todos os links abrem na mesma instancia do navegador.


links abrindo em nova janela.

pop-ups


Fernanda Hoffmann Lobatogovernoeletronico.gov.br

Twitter: @[email protected]

+55 (61) 2020 1738

Technology

Oficina avaliação de Sítios - 10ª Oficina de Inclusão Digital