Embed Size (px)
DESCRIPTION
Guia
Citation preview
GUIA FRONT-END Guia rápido de boas práticas para o
desenvolvimento front-end de web sites.
Em desenvolvimento: 2011
Por: Bruno José Dos Santos | Blog: brunojose.com.br
Designer de Interação
Esta obra foi licenciada com uma Licença Creative Commons - Atribuição - Partilha nos Mesmos Termos 3.0 Não Adaptada http://creativecommons.org/licenses/by-sa/3.0/br/ Você tem a liberdade de: • Compartilhar — copiar, distribuir e transmitir a obra. • Remixar — criar obras derivadas. Sob as seguintes condições: • Atribuição — Você deve creditar a obra da forma especificada pelo autor ou licenciante (mas não de maneira que sugira que estes concedem qualquer aval a você ou ao seu uso da obra). • Compartilhamento pela mesma licença — Se você alterar, transformar ou criar em cima desta obra, você poderá distribuir a obra resultante apenas sob a mesma licença, ou sob uma licença similar à presente. Ficando claro que: • Renúncia — Qualquer das condições acima pode ser renunciada se você obtiver permissão do titular dos direitos autorais. • Domínio Público — Onde a obra ou qualquer de seus elementos estiver em domínio público sob o direito aplicável, esta condição não é, de maneira alguma, afetada pela licença. • Outros Direitos — Os seguintes direitos não são, de maneira alguma, afetados pela licença: • Limitações e exceções aos direitos autorais ou quaisquer usos livres aplicáveis; • Os direitos morais do autor; • Direitos que outras pessoas podem ter sobre a obra ou sobre a utilização da obra, tais como direitos de imagem ou privacidade. • Aviso — Para qualquer reutilização ou distribuição, você deve deixar claro a terceiros os termos da licença a que se encontra submetida esta obra.
Índice
Introdução
1- Estruturação básica
2- CSS
3- Listas e tabelas
4- Acessibilidade
5- Usabilidade
6- Redação
7- Design
1 INTRODUÇÃO
O guia de boas praticas para o desenvolvimento front-end de websites contém instruções a serem seguidos na hora do desenvolvimento. Essas instruções são um conjunto de dicas e diretrizes que analisei ao longo da minha carreira.Os documentos que analisei para a construção deste, encontram-se disponíveis nas últimas páginas deste guia.
Este guia orienta o desenvolvedor para que, desde o início do desenvolvimento, já exista a preocupação com a Estruturação do site em XHTML, CSS, listas e tabelas, acessibilidade, usabilidade e o design, assim evitando retrabalho e facilitando o teste de usuários e especialistas.
Estruturação básica 1- Declare o doctype correto da página: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2- Declare o Idioma utilizado: Em XHTML <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" > Como meta etiqueta <meta http-equiv="Content-Language" content="pt-br" /> 3- Identifique os 3 principais elementos de uma interface: HTML 4 <body> <div id=”header”>conteúdo topo</div> <div id=”content”>conteúdo corpo</div> <div id=”footer”>conteúdo rodapé</div> </body> HTML5 <body> <header>conteúdo topo</header> <div id=”content”>conteúdo corpo</div> <footer>conteúdo rodapé<footer> </body> 4- Use caixa baixa e aspas em todos os valores: errado: <A HREF="index.html" CLASS=interno> certo: <a href="index.html" class="interno"> 5- Todos elementos devem ser fechados, incluindo os elementos que em XHTML possuem tag de fechamento: errado: <img src=”ilustracao.gif” alt=” ”> certo: <img src=” ilustracao.gif” alt=” ” />
6- Nenhum atributo pode ser abreviado: Em HTML alguns atributos podem ser minimizados, mas em XHTML isso não é permitido. errado: <input type="checkbox" id="checkbox1" name="checkbox1" checked> certo: <input type="checkbox" id="checkbox1" name="checkbox1" checked="checked" /> 7- Declare a localização e o pais da página: <meta name="target_country" content="br" /> <meta name="country" content="Brazil" /> 8- Descreva a codificação de caracteres da página: o conjunto de caracteres mais adequados para documentos XML e HTML 4.0 é Unicode (utf-8). <meta http-equiv="Content-Type" content="text/html;charset=utf-8" / > 9- Palavras-chave – Meta TAG: <meta name="keywords" content="Palavras-chave"> Número máximo de caracteres: 1 000 Compatibilidade: Todos os motores Separe cada palavra ou grupo de palavras com uma vírgula. Você também deve saber que apenas os primeiros 200 a 300 serão realmente úteis.
10- Descrição – Meta TAG: Sintaxe: <meta name="Descrição" content="Descrição do site e/ou da página..."> Número máximo de caracteres: 200 Compatibilidade: Todos os motores, porém evite os acentos (em certos motores eles não são levados em conta).
11- Categoria – Meta TAG: Sintaxe: <meta name="category" content="nome">
Número máximo de caracteres: nenhum Compatibilidade: Alguns motores Exemplo <meta name="category" content="internet"> 12- Autor – Meta TAG: Sintaxe: <meta name="author" lang="pt" content="Nome Sobrenome"> Número máximo de caracteres: nenhum Compatibilidade: Todos os motores Você pode, se quiser, colocar vários autores (separados por uma vírgula) 13- Endereço da página – Meta TAG: Sintaxe: <meta name="identificar-url" content="URL da página"> Número máximo de caracteres: nenhum Compatibilidade: Todos os motores 14- Endereço de e-mail – Meta TAG: Sintaxe: <meta name="reply-to" content="seu@email"> Número máximo de caracteres: nenhum Compatibilidade: Todos os motores - Cuidado com o spam! 15- A estrutura das páginas está uniforme? A “div” conteúdo encontrase antes da “div” menu? o conteúdo seja lido antes que o menu. Visualmente menu e conteúdo continuam na mesma disposição, mas para usuários de leitores de tela, a ordem de leitura passa a ser: conteúdo e depois menu. 16- Restrições para os motores de busca: Sintaxe: <meta name="robots" content="....."> As linhas pontilhadas são para
serem substituídas por "index" ou "noindex" (para permitir ou não a indexação das páginas) e "follow" ou "nofollow" (para permitir ou não de seguir os links das páginas). O par "index, follow" pode ser substituído por "all" mas, de qualquer maneira, é inútil, porque os robôs usam isso por padrão, e o par "noindex, nofollow" pode ser substituído por "none". Compatibilidade: Todos os motores Exclua todos os diretórios protegidos ou "sensíveis" por um arquivo .htacess. 17- Evite a utilização de tabelas para layouts: A implementação atual de folhas nos navegadores torna desnecessária a utilização de tabelas para diagramação. O uso de HTML para estruturar a página e CSS para formatar a apresentação visual, beneficia a acessibilidade da página, inclusive ao carregar em dispositivos móveis, além de diminuir consideravelmente o tamanho do código. 18- Utilize preferencialmente unidades de tamanho relativas: Evite o uso de tamanhos de fontes em unidades absolutas px ou pt nas folhas para mídias digitais, dando preferência pelo uso de tamanhos relativos tipo em e %. Para o tamanho padrão de texto utilize 1em ou 100%, use tamanhos menores apenas para informações de copyright ou semelhante. 19- O conteúdo e o propósito de um cookie deve ser sempre informado ao usuário: O motivo da instalação de um cookie deve ser sempre avisado ao usuário. O usuário deve ter a opção de recusar um cookie se achar conveniente.
20- O usuário pode recusar o uso de um cookie sem afetar a usabilidade central do conteúdo: A recusa da instalação de um cookie não deve afetar o objetivo central do sítio. O cookie não deve ser utilizado como prerrogativa para acesso a página principal do sítio ou tarefas banais, como uma escolha de seção.
21- Nenhuma instalação deve ser necessária para acessar a página inicial ou executar tarefas banais: A exemplo dos cookies, nenhuma instalação de plugin deve ser necessária
para acessar a página inicial ou executar qualquer tarefa rotineira ou banal (ex: enviar um formulário de contato) do site. 22- Na navegação por teclado o usuário é remetido primeiramente ao conteúdo da interface? No XHTML a seção conteúdo deve vir antes do menu e depois posicionados por CSS. 23- Não utilize scripts que não ofereçam um benefício relevante ao conteúdo: O uso de scripts deve ser evitado se não tiver uma função relevante ao funcionamento da página: textos animados, janelas pop-ups, efeitos especiais, etc, devem ser evitados.
Acessibilidade 1- O Título <title></title> deve ser relevante e presente em todas as páginas: É importante que o título esteja de acordo com o conteúdo. O título define o rótulo padrão dos favoritos e é a chamada na listagem dos motores de busca, ela deve ser um super resumo do conteúdo, o usuário devera entender o que ira encontrar na página pelo titulo, ela é a frase principal da página.
2- A TAG <title></title> nos títulos: Quando for usado o atributo title nos títulos, usar no title o mesmo conteúdo que no título, seguido de informações adicionais, caso desejar. Isso porque quando há um title no elemento alguns leitores de tela dão preferência ao title e não leem o conteúdo. Ex: <h1> <a href="http://portal.mec.gov.br" title=” Educação Ministério da Educação – Clique para acessar o site”> Educação Ministério da Educação </a>
3- Evite expressões redundantes: Ex: “bem-vindo ao sítio do clube xxx” ou “site do club xxx”, “página”, “homepage”, entre outros; Não utilize qualquer tipo de slogan no início do título, Utilize, de preferência, o assunto da página seguido pelo nome do órgão separado por hífen. Ex: <title>Contato - Ministério do Planejamento Orçamento e Gestão, se for o caso colocar ramo de atuação, cidade, estado e pais </title>
4- Não “polua” o título com palavras-chaves: A inserção de palavras-chaves antes ou após o título principal da página pode confundir os usuários que utilizam leitores de tela.
Alguns buscadores apenas mostrarão os primeiros 50 – 60 caracteres do título, enquanto outros mostrarão o título completo. Escreve um título com no máximo 60 caracteres;
5- A logomarca deve ser clicável: Ao clicar no logotipo para retornar à página inicial o usuário será redirecionado para a pagina inicial do site. Independente do logo ser uma imagem ou um background dentro de uma outra tag, deve-se colocar um link para a página inicial do site.
6- Abreviar cabeçalho com a tag abbr: Colocar o atributo abbr para abreviar um cabeçalho longo de modo que ele não seja lido por inteiro toda vez que o leitor de tela passar por ele; Em alguns casos os desenvolvedores utilizam colunas vazias em cabeçalhos ou dados para obter um espaçamento entre as colunas de uma tabela. O leitor de telas Jaws, por exemplo, lê "blank" toda vez que encontra uma célula vazia e isto pode reduzir a usabilidade e a acessibilidade das tabelas de dados. Nesse caso CSS deve ser usado no lugar de células vazias para controlar a apresentação de uma tabela de dados.
7- Utilize a tag accesskey: Faça atalhos via teclado DOS LINKS PRINCIPAIS? Ex: <a accesskey="6" href="contato.html">Eu chego aqui teclando á tecla de comando do navegador + 6</a> o Alt+1 para menu o Alt+2 para conteúdo o Alt+3 página inicial o Alt+4 Pesquisar
8- Utilizando ancoras sempre com ID (saltos): <a href="#conteudo” class="irconteudo" id=”irconteudo” > Ir para conteúdo</a> Úma âncora para comando abaixo que está localizado no início da área de conteúdo da página.
<a href="#irconteudo” accesskey="1" name="irconteudo"> <img class="imagemsemborda" alt="início da área de conteúdo" src="/lupadigital/templates/lupadigital/images/nulo.gif"/>
9- Forneça alternativa em texto para vídeo e áudio: Para garantir a acessibilidade deve haver descrições (legendas) dos arquivos de áudio e vídeo. Forneça uma versão descrita de um vídeo quando a descrição é necessária para usuários sem visão entenderem o conteúdo (o áudio descrito pode ser distribuído com o conteúdo do vídeo ou como um arquivo de áudio apenas).
10- Play, Áudio e vídeo: Certifique-se que todos os vídeos, caso não iniciem automaticamente, tenham um controle de início acessível.
11-Descrição textual [d]: Um recurso utilizado é colocar, após a imagem, um link com a letra "d", conhecido como "d-link", o qual fará referência a uma página html com a descrição textual da imagem. Como outros links, este receberá o foco após o usuário pressionar a tecla TAB na imagem. Ex: <a href="/descricaodologotipo.htm"> <img class="imagemsemborda" src="//lupadigital/images/stories/logoacess.gif" alt="Logotipo de acessibilidade" name="logoacessibilidade" /> </a> <a href="/descricaodologotipo.htm" title="Descrição textual do logotipo de acessibilidade"> [d] </a>
12- Descrição textual long desc para imagens: Fornecer um texto equivalente para cada elemento não-texto .Isso abrange: imagens, representações gráficas de texto (incluindo símbolos), regiões de mapa de imagem, animações (por exemplo, GIFs animados), applets e objetos
programados, arte ASCII, frames, scripts, imagens utilizadas como pontos de enumeração, espaçadores, botões gráficos, sons (reproduzidos com ou sem interacção do utilizador), stand-alone arquivos de áudio, faixas de áudio de vídeo, e vídeo. Quando um equivalente de texto curto não é suficiente para transmitir adequadamente a função ou o papel de uma imagem, fornecer informações adicionais em um arquivo designado pelo atributo "longdesc": Ex: <IMG src="97sales.gif" alt="Sales for 1997" longdesc="sales97.html"> In sales97.html: Um gráfico que mostra como as vendas, em 1997, progrediu. O Gráfico é um gráfico de barras mostrando aumentos percentuais nas vendas por mês. Vendas em janeiro subiram 10% desde Dezembro de 1996, as vendas em fevereiro caiu 3%, .. Para os agentes que não suportam "longdesc", fornecer um link descritivo, bem ao lado do gráfico: Ex: <IMG src="97sales.gif" alt="Sales for 1997" longdesc="sales.html"> <A href="sales.html" title="Description of 1997 sales figures">[D]</A> Ao usar OBJECT, especifique mais texto equivalente no conteúdo do elemento: Ex: <OBJECT data="97sales.gif" type="image/gif"> Sales in 1997 were down subsequent to our <A href="anticipated.html">anticipated purchase</A> ... </ OBJECT> Note que o conteúdo objeto, ao contrário de "alt" de texto, pode incluir marcação. Assim, desenvolvedores de conteúdo pode fornecer um link para informações adicionais a partir de dentro do elemento OBJECT: Ex: <OBJECT data="97sales.gif" type="image/gif"> Chart of our Sales in 1997. A <A href="desc.html">textual description</A> is available. </ OBJECT>
13- Identifique mudanças na linguagem: Ex: <P> E com uma certa <SPAN lang="fr"> je ne sais quoi </ SPAN>,
ela entrou tanto o quarto, e sua vida, para sempre. Meu nome <Q> é Natasha, </ Q>, disse. <Q Lang="it"> Piacere, </ Q> ele respondeu em italiano impecável, trancando a porta. Ex: <P> <ABBR Title="World Wide Web"> WWW </ ABBR> <ABBR lang = "fr" title = "Société Nationale des Chemins de Fer"> SNCF </ ABBR> <ABBR Lang="es" title="Doña"> Doña </ ABBR> <ABBR Title="Abbreviation"> abbr. </ ABBR>
14- Ênfase as frases: Use as tags para marcar ênfase: EM e STRONG as mudanças de inflexão de voz, etc)
15- Siglas e abreviaturas: Marcar abreviaturas e siglas com ABBR e ACRONYM e use " título "para indicar a expansão: <P> Bem-vindo ao title="World <acronym Ampla Web"> WWW </ acronym>! <ABBR Title="Social Segurança Number"> SS # </ ABBR>
16- Citações: Ex: <BLOCKQUOTE Cite="http://www.mycom.com/tolkien/twotowers.html"> <p> Eles foram em fila única, correndo como cães em um perfume forte, e uma luz ansiosa estava em seus olhos. Quase oeste da ampla faixa de marcha Orcs tramped seu slot feio; a grama doce de Rohan tinha sido ferido e enegrecida enquanto passavam. </ p> </ Blockquote>
17- Texto pré-formatado: A PRE elemento: Ex: <PRE>
Ainda mais elevado e maior Da terra tu springest Como uma nuvem de fogo; O wingest tu azul profundo, E cantando ainda dost soar, e subindo cada vez singest. </ PRE>
18- Desgin de URLs amigáveis e funcionais: As URLs devem funcionar sem o "www" Ex: Certo: http://www.portal.gov.br/contato Errado: http://www.portal.gov.br/default.php?reg=2&p_secao=18
19- Hyperlinks e seu contexto: Evita o uso de "Clique aqui" ao escrever texto para hiperlinks . Sempre que possível escreva cabeçalhos descritivos e textos de links que podem ser compreendidos fora do contexto Ex: Errado: Para obter informações básicas sobre a abelha-de-mel, clique aqui Certo: Há informações básicas adicionais sobre a abelha-de-mel
20- Hiperlinks e suas cores: Para as cores de hyperlinks use um conjunto consistente de cores para indicar o estado não visitado e visitado.
21- TAG “alt”: o atributo alt que indica a substituição da imagem pelo texto alternativo. Ex: <img src="/img/bandeira.png" alt="A bandeira do Brasil">. Seja breve com o conteúdo do atributo mas forneça detalhes quando eles derem significado dentro do contexto. <img src=”cavalinho.jpg” alt=”cavalo recém nascido deitado na terra, sendo acariciado pela mãe” />
22-Evite o uso de Captchas : Captchas são campos que pedem para que você escreva o que aparece na imagem a todo custo. Faço o Maximo possível para não usa-ló. No entanto se você realmente não tem saída forneça um Captcha alternativo em áudio. Uma boa solução é o reCAPTCHA.
23- Operando os componentes do site: Verifique se os componentes do site podem ser operados por meio de diferentes dispositivos, em particular, teclado e mouse.
24-Todas as páginas devem ter recursos de impressão amigável: As páginas devem fornecer recursos de impressão amigável, seja via javascript ou via a utilização de uma CSS voltada para impressão. Deve-se verificar a real necessidade do usuário, retirando da impressão elementos não relevantes como banners e menus.
25- Os arquivos para download devem apresentar a extensão a qual são disponibilizados. Confira se estão compatível com os leitores de telas? De preferência a arquivos em formato PDF ou RTF, os quais são lidos pela maioria dos leitores de tela. Sugerimos também a extensão .DOC devido ao fato de ser lido por quaisquer leitores.
26-Não crie páginas que abram e funcionem em tela cheia: O uso de tela cheia (fullscreen) como um expediente para maior controle do desenho tira da pessoa o seu poder sobre as ações do navegador.
27- As ações do portal devem ser reversíveis: Erros cometidos devem ser passiveis de correção. O cidadão deve ser capaz de desfazer pelo menos a última ação realizada. Saber que pode corrigir possíveis erros encoraja a pessoa a explorar opções desconhecidas do portal.
28- Arquivos para download: Os arquivos disponibilizados para download estão em formato acessível para os leitores: doc, txt (cuidado: pdf é acessível apenas para alguns leitores)?
29- Avalie a real necessidade do uso de um arquivo para baixar: O nome do arquivo a ser baixado deve ser relacionado ao seu conteúdo. Informe o tamanho e o formato do arquivo a ser baixado. Isso permite que o usuário programe a baixa de arquivos e tenha uma idéia de quanto tempo a tarefa demorará a ser concluída.
30- Forneça uma alternativa ao conteúdo script utilizando o atributo NOSCRIPT: O conteúdo deste elemento é renderizado quando os scripts não estão habilitados. Exemplo. <SCRIPT Type="text/tcl"> ... Algum script Tcl para mostrar um outdoor de resultados desportivos ... </ SCRIPT> <NOSCRIPT> Resultados <P> de jogos de ontem: </ P> <DL> <DT> Bulls 91, Sonics 80. <DD> <A Href="bullsonic.html"> Bulls vs destaques jogo Sonics </ A> ... Pontuações mais ... </ DL> </ NOSCRIPT>
31- Eventos via teclado: Como o mouse praticamente não é utilizado, certifique-se de que todo evento ativado através do mouse possua um tratamento redundante, permitindo também sua ativação através do teclado. Use "onmousedown" com "onkeydown". Use "onmouseup" com "onkeyup" Use "onclick" com "onkeypress" Use "onmouseover" com "onfocus" Use "onmouseout" com "onblur"
Verifique
1- O documento deve ser acessível mesmo com o script desabilitado. 2- Há alterações temporais do conteúdo, atualização automática da tela ou animações? 3- O usuário tem o controle sobre essas alterações temporais? 4- A interface apresenta o atalho “Voltar para a Página Principal”? 5- A interface apresenta o atalho “Voltar para a Página Anterior”? 6- A interface apresenta o atalho “Ir para o Menu”? 7- A interface apresenta o atalho “Ir para o Conteúdo”? 8- A interface apresenta o link “contraste”? 9- A interface apresenta o link “Aumentar tipografia”? 10- É fornecido um mapa do site que mostra como ele é organizado.
CSS 1- MEDIA TYPES: Crie folhas de estilos para cada dispositivo screen – computadores; print – impressoras; handheld – PDAs, mobiles Palmtops; OBS:Uma forma de permitir a melhor acessibilidade dos conteúdos é evitar o atributo media all. O mais correto é utilizar a media screen quando a folha de estilos for desenvolvida para apresentação no computador.
2- Utilize para marcar títulos e subtítulo de acordo com sua hierarquia: <h1>, <h2>, <h3>, <h4>, <h5> ou <h6> , sendo: <h1> o título mais alto. <p> para demarcar os parágrafos. OBS:Não crie classes de CSS para apresentar um elemento em um formato não condizente com seu objetivo. EX: Um título de nível dois. Errado: <div id="main">
<p class="titulosec"> O subtítulo </p>
</div> Certo: <div id="main">
<h2> O subtítulo </h2>
</div>
3- A página deve possuir apenas um elemento H1:
Toda página deve possuir um e apenas um elemento H1. O conteúdo do cabeçalho deve guardar semelhança com o conteúdo do elemento TITLE do cabeçalho.
4- Nomeie classes e IDs pela sua função, não pela apresentação: O nome de classes e IDs devem ser pensados de acordo com a sua finalidade e não por sua localização na diagramação ou suas características. Isso evita que ao mudar o visual da página o sentido do nome da classe ou ID se perca. EX: Uma classe que defina um texto de aviso ou advertência. Errado: .vermelho {/* regra */} Certo: .aviso {/* regra */} EX2: Uma div que contenha uma lista vertical de menu: Errado: #colunaesquerdavertical {/* regra */} Certo: #menu {/* regra */}
5- Utilize preferencialmente unidades de tamanho relativas: Evite o uso de tamanhos de fontes em unidades absolutas px ou pt nas folhas para mídias digitais, dando preferência pelo uso de tamanhos relativos tipo “em” e ”%”. Para o tamanho padrão de texto utilize 1em ou 100%, use tamanhos menores apenas para informações de copyright ou semelhante.
6- Na navegação por teclado o usuário é remetido primeiramente ao conteúdo da interface? Obs.: No HTML a seção conteúdo deve vir antes do menu e depois posicionados por CSS.
7- Organize o código por seções: “Divida sua folha de estilos em seções específicas, por exemplo: estilos global, Topo, Estrutura da Página, Cabeçalhos, estilos para Textos, Navegação, Formulários, Comentários, Extras. Isto é uma prática fácil de implementar e facilitará a leitura e manutenção do código até mesmo depois de passados anos que tenha sido escrito. Será mais fácil encontrar classes e elementos que precisam ser alterados. Exemplos: /* Estrutura */, /* Tipografia */ etc
/* -----------------------------------*/ /* ---------->>> GLOBAL <<<-----------*/ /* -----------------------------------*/
8- Criação de “índice”: A criação de um pequeno índice no ínicio de cada folha de estilo que cria, irá ajudar você, e outros, uma navegação mais fácil no documento.
Exemplo:
/***************************************************** 1. ÁREA de CABEÇALHO 2. ÁREA de NAVEGAÇÃO/MENU 3. ÁREA de CONTEÚDO 4. ÁREA de RODAPÉ *****************************************************/
9- Espaçamento entre linhas: Use 1.4em – 1.6em para line-height. “line-height:1.4” para linhas legíveis, linhas com comprimento razoável não mais longas do que 10 palavras e cores com contraste suficiente mas sem exagero. Por exemplo, preto total em branco total normalmente é um contraste muito forte para monitores CRT, então adote um branco como #fafafa e um cinza escuro como #333333 para um bom contraste.”
10- Use uma folha de estilos mestre: Ao codificar um web site você deve antes de mais nada, limpar os estilos padrão do navegador. A estilização padrão leva a diferenças na aparência do design em diferentes navegadores e não há motivo para xingar este ou aquele navegador Organizar auxilia na manutenção do site. Comece com uma folha de estilos mestre. Dentro desta folha importe as folhas para limpar estilos padrão reset.css, a folha global.css, flash.css (se necessária), a folha para estrutura do site structure.css e ocasionalmente uma folha para tipografia. A seguir um exemplo de folha de estilo "mestre" e de como incorporá-la a um documento:” master.css
@import url("reset.css"); @import url("global.css"); @import url("flash.css"); @import url("structure.css"); <style type="text/css" media="Screen"> /*\*/@import url("css/master.css");/**/ </style>
11- Monte uma biblioteca de classes CSS: Isto é muito útil para ‘debugar’, mas deve ser evitado na versão de lançamento do site (separar apresentação de marcação). Uma vez que é permitido e válido usar várias classes (por exemplo: <p class="floatLeft alignLeft width75">…</p>), tire proveito disto para debugar sua marcação. (updated) CSS: .width100 { width: 100%; } .width75 { width: 75%; } .width50 { width: 50%; } .floatLeft { float: left; } .floatRight { float: right; } .alignLeft { text-align: left; } .alignRight { text-align: right; }
12- Use constantes CSS para agilizar o desenvolvimento: Um uso bastante comum é a criação de um ‘glossário de cores’. Você terá uma referência rápida das cores usadas no site que evitará erros na definição das cores e auxiliará na eventual necessidade de alterar uma cor em toda a CSS por um processo de busca e troca. “Se você acha que uma determinada propriedade será reutilizada várias vezes, separe-a na folha de estilos pois com isto será possível controlar de um lugar aquela propriedade.” # /* # Cinza escuro (texto): #333333 # Azul escuro (cabeçalhos, links) #000066 # Azul (topo) #333399 # Azul claro (navegação superior) #CCCCFF # Cinza: #666666 # */
13- Use as tags: <small>, <em> e <strong>:
“Muitas vezes você tem seções no site que apresentam variações tipográficas em uma mesma linha ou mesmo próximas umas as outras. Nestes casos, em lugar de criar divs e classes para estilizar, somente porque elas não carregam semântica e tambám não poluem o seu belo código XHTML não é a melhor solução. Use tags semânticas
14- Ordene as propriedades alfabeticamente: Ordenar as propriedades alfabeticamente facilita sua localização. body { background:#fdfdfd; color:#333; font-size:1em; line-height:1.4; margin:0; padding:0; }
15- Para usar EMs como se fossem pixels defina font-size 62.5% para body: O valor default para font-size é 16px; adotando para body um tamanho de font igual a 62,5% você faz com o valor default passe a ser 10px pois 16pixel x 62.5% = 10pixel. Defina um valor de font-size para body igual a 62.5%. Com isto você ira consiguir usar EMs para tamanhos raciocinando em termos de pixel, por exemplo: 1.3em é aproximadamente igual a 1.3px.
16- Minimize o uso das propriedades: Se não existe razão para declarar uma determinada propriedade e se uma mesma propriedade foi declarada em lugares diferentes na sua folha de estilos, verifique a possibilidade de colocar a declaração em um lugar apenas.”
17- Use o mínimo de hacks possível:
Não use hacks a menos que se trate de correção para um bug bem conhecido e documentado. Esta é uma dica valiosa, pois é comum ver-se uso de hacks para corrigir coisas que não causadas por bugs. Ao se deparar com uma situação que você considere ser necessário usar hack para solucionar, faça primeiro uma busca (o Google é sua salvação nestas horas) para ver se encontra alguma documentação relatando o problema que você está tendo.
18- Nomeie IDs baseado no valor semântico: Evite usar nomes baseados na apresentação. Nomear algo como coluna-direita não é uma escolha acertada, pois no futuro uma mudança de layout poderá impor que sua coluna-direita esteja posicionada à esquerda. E isto trará confusões no futuro, então é bom evitar nomes baseados na apresentação.
19- Saiba explorar o efeito cascata das CSS: Suponha que você tenha dois boxes bem parecidos no seu web site – você pode escrever regras CSS separadas para cada um deles ou escrever regras para ambos e a seguir regras para contemplar as pequenas diferenças entre eles.
20- Defina as pseudo classes para links na ordem certa: Link, Link visitado, Link hover, Link ativo. “Para ter certeza de todos os estilos para links funcionem apropriadamente você deve declarar as regras CSS na ordem correta “link-visitado-hover-ativo”. Se você pretende usar um estilo para focus ele deverá ser colocado no final – contudo leia esta explicação até o final antes de decidir.” a:link { color: blue; } a:visited { color: purple; } a:hover { color: purple; } a:active { color: red; }
21- Defina margin, padding e border na ordem certa: Top, Right, Bottom, Left. “A ordem para declarar margin, padding e border é a ordem horária a partir de top: Top, Right, Bottom, Left.”
22- Válido para toda a tipografia – defina famílias de fontes genéricas:
p { font-family: Arial, Verdana, Helvetica, sans-serif; }
23- Distinguir links externos automaticamente: Muitos usam o não standard atributo de relacionamento rel="external" para distinguir links externos ao site. Contudo esta solução implica em marcar o atributo rel em cada link externo e isto consome muito tempo e é desnecessário.A regra de estilo a seguir marca os links externos colocando logo após o link uma seta inclinada no sentido nordeste. a[href^="http://"]:not([href*="smashingmagazine.com"])::after { content: "\2197"; }
24- Para remover o pontilhado nos links use “outline: none;” : a:focus { outline: none; }
25- Centralizar o Layout: Use margin: 0 auto; para centrar seu layout na horizontal. “para centrar em elemento na horizontal é necessário declarar uma largura e margens horizontais.” XHTML: <div id="wrap"> <!-- Layout aqui --> </div> CSS: #wrap { width:80%; /* Altere a largura do layout aqui */ margin:0 auto; }
26- Forneça folha de estilo para impressão: Você pode criar uma folha de estilo para impressão de modo semelhante a uma folha de estilo comum de apresentação da página:
<link rel="stylesheet" type="text/css" href="print.css" media="print"> ou <style type="text/css" media="print"> @import url(print.css); </style>
Debugando
1- Adicione bordas para identificar containers:
Use CSS tal como bordas auxiliares ou cores de fundo como auxiliares no desenvolvimento dos seus documentos ou com propósitos de identificação de bugs. div { border:1px red dashed; } é um auxiliar efeciente. Existe ainda a ferramenta bookmarklets that apply borders que auxilia no processo de desenvolvimento e correção.” Você pode usar a regra * { border: 1px solid #ff0000; }. Definir bordas para um elemento ajuda na identificação de sobreposições ou de espaços extras em branco onde sua identificação não seria tão óbvia sem auxílio da borda.
* { border: 1px solid #f00; }
2- Confira o fechamento de todas as tags quando estiver debugando: Muitas vezes uma simples modificação quebra um layout de forma totalmente inesperada e isto pode ter sido causado por falta de uma tag de fechamento de um elemento na página 3- Uma ID e muitas classes em cada página. Confira as IDs: Somente um elemento no documento pode conter uma ID com determinado nome, ao contrário do nome escolhido para uma classe que póde ser atribuida a vários elementos no mesmo documento. Nomes para classes e id devem conter caracteres de[A-Za-z0-9] e hífens (-), e não podem começar com hífen ou dígito 4- A página deve ser compreendida e usável com o css desabilitado: 5- Utilize preferencialmente letras para nomear classes e ids:
Listas e tabelas Marque listas de itens e objetos de forma adequada. Existem três tipos básicos de listas: ordenada, não-ordenada, e de definição. Deve-se escolher o tipo de lista a partir da informação que se quer inserir. Lista Ordenada (ordered list – Tag OL): Sempre que a lista necessitar de uma ordem, como a classificação em um concurso público, a lista ordenada é a escolha correta. Lista Sem Ordem (unordered list – Tag UL): Utilizar quando a necessidade for listar itens sem uma ordem de colocação. É a forma ideal para a codificação de menus e barras de navegação. Lista de Definições (definition list – tags DL, DT e DD): Tem por objetivo exibir uma lista de itens e suas respectivas definições. A lista de definições possui duas partes distintas. O termo a ser definido ou descrito (tag DT), e a descrição propriamente dita (tag DD). É o formato ideal para glossários.
Ex: <dl> <dt>Navegador</dt> <dd>Programa que permite ao usuário consultar e interagir com o material publicado na Internet. </dd> <dt>Padrões Web (Web standards)</dt> <dd>Padrões Web são regras de tecnologia definidos pelo W3C e outros órgãos da área utilizados para criar e interpretar o conteúdo Web.</dd> </dl> Para a formatação de visual, na folha de estilos, além dos elementos comuns as demais tags, as listas possuem a propriedade list-style-type (tipo de estilos de lista). Os atributos variam de acordo com o tipo de lista. EX: A lista ordenada tem como padrão a lista numérica em ordem crescente, mas é possível mudar de acordo com o atributo dado: list-style-type: lower-alpha; (a, b, c, d, e etc) list-style-type: upper-roman ; (I, II, III, IV, V, etc.) list-style-type: decimal-leading-zero ; (01, 02, 03, etc.) list-style-type: none (nenhum estilo de lista aparece)
4. Tabelas devem ser utilizadas para dados tabulares. Para tornar os dados das tabelas acessíveis é importante utilizar os diversos componentes disponíveis como o cabeçalho <th> e o atributo de sumário. Para maiores detalhes da marcação acessível em tabelas consulte a cartilha técnica do e-MAG.
5. Formate os formulários de forma correta e acessível. O formulário deve ser construído de forma lógica utilizando os elementos disponíveis
corretamente. Os elementos <label>, <fieldset> e <legend> devem ser utilizados
Cuidados importantes:o Utilização do atributo summary, pois ele é um resumo da tabela. Coloque apenas em tabelas que realmente necessitam de um resumo; o Usar o elemento caption para título da tabela; esse elemento é o título principal da mesma Para tabelas simples, o uso apropriado do elemento th é essencial para tornála acessível. Contudo com um pouco mais de esforço, podemos incrementar a acessibilidade aos dados da tabela. thead e tfoot são usados para agrupar uma linha de cabeçalhos no topo e outra no final da tabela. Se thead e tfoot forem usados, você deverá usar também tbody para definir o corpo da tabela, que é a parte que contém as células de dados. Na verdade uma tabela poderá conter mais de um tbody Em tabelas de dados com dois ou mais níveis lógicos de cabeçalhos de linha ou de coluna, utilizar marcações para associar as células de dados às células de cabeçalho. Para associar dados das células, deve ser seguida uma das formas abaixo: Usar o atributo 'headers' para as células de tabelas <td> em conjunto com o atributo id na célula de cabeçalho <th>
Colocar o atributo abbr para abreviar um cabeçalho longo de modo que ele não seja lido por inteiro toda vez que o leitor de tela passar por ele Em alguns casos os desenvolvedores utilizam colunas vazias em cabeçalhos ou dados para obter um espaçamento entre as colunas de uma tabela. O leitor de telas Jaws, por exemplo, lê "blank" toda vez que encontra uma célula vazia e isto pode reduzir a usabilidade e a acessibilidade das tabelas de dados. Nesse caso CSS deve ser usado no lugar de células vazias para controlar a apresentação de uma tabela de dados. Quando o campo de texto editável recebe o foco, um grande problema é que, muitas vezes, o Virtual Vision não lê o título do campo, deixando de informar o que deve ser preenchido. Com isto, apesar de saber que algo tem que ser preenchido, não se sabe qual deverá ser o conteúdo. Para resolver este problema, basta utilizar o elemento <LABEL> envolto ao campo, dando um título ao mesmo. Ex: <form id="cadastro" action="cadastro.asp" method="GET" name="cadastro"> <label for="s_nome">Seu nome</label><br> <input id="s_nome" type="text" name="s_nome" size="15" ><br> <label for="s_email">Seu e-mail</label><br> <input id="s_email" type="text" name="s_email" size="15" ><br> <input type="submit" value="Enviar" name="submit2"> </form> <form name="livro" action="http://www.hpg.com.br/scripts/cgi-bin/FormMail.pl" method="post">
<label for="nome">Nome</label><br> <input type="text" id="nome" name="s_nome" size="45" tabindex="1"><br> <label for="email">E-mail</label><br> <input id="email" type="text" name="s_email" size="45" tabindex="2"><br> <label for="pais">País</label><br> <input id="pais" type="text" name="s_pais" size="45" tabindex="3"><br> <label for="estado">Estado</label><br> <input id="estado" type="text" name="s_estado" size="45" tabindex="4"><br> <label for="comentarios">Comentário</label><br> <textarea id="comentarios" name="s_comentarios" cols="55" rows="7" tabindex="5"></textarea><br> <input type="submit" value="Enviar" name="submit" tabindex="6"> </form> <form name="DV" method="get" class="corpo"> <fieldset class="moldura_botoes-selecao"> <legend>Selecione um dos itens abaixo</legend <label for="mod11"> <input id="mod11" type="radio" name="modulo" value="mod11" checked tabindex="0"> 1. MÓDULO 11 </label><br> <label for="cnpj"> <input id="cnpj" type="radio" name="modulo" value="cnpj" tabindex="1"> 2. CNPJ - cadastro nacional de pessoa jurídica </label><br> <label for="cpf"><input id="cpf" type="radio" name="modulo" value="cpf" tabindex="2"> 3. CPF - cadastro de pessoa física </label><br> </fiedlset> </form>
Tags fieldsets, legend e label
A tag fieldset serve para agrupar elementos de controle similares dentro de um formulário, por
exemplo: campos que vão receber dados referentes ao endereço do usuário.
<fieldset class="campos_endereco">
<input id="estado" name="estado" type="text" value="" tabindex="10">
<input id="cidade" name="cidade" type="text" value="" tabindex="20">
</fieldset>
A tag legend serve para especificar os agrupamentos feitos pelas tags fieldsets.
<fieldset class="campos_endereco">
<legend>Endereçamento:</legend>
<input id="estado" name="estado" type="text" value="" tabindex="10">
<input id="cidade" name="cidade" type="text" value="" tabindex="20">
</fieldset>
A tag label serve para especificar os rótulos de cada campo input.
<fieldset class="campos_endereco">
<legend>Endereçamento:</legend>
<label for="estado">Estado:</label>
<input id="estado" name="estado" type="text" value="" tabindex="10">
<label for="cidade">Cidade:</label>
<input id="cidade" name="cidade" type="text" value="" tabindex="20">
</fieldset>
Menu de opções Agrupamento
Desenvolvedores de conteúdo devem grupo de informação onde natural e apropriado. Para longas listas de opções do menu (que pode ser difícil de controlar), desenvolvedores de conteúdo devem grupo SELECIONAR itens (definida por OPÇÃO ) em uma hierarquia usando o OPTGROUP elemento. Especifica um rótulo para o grupo de opções com o rótulo de atributo em OPTGROUP. Exemplo. <FORM Action="http://example.com/prog/someprog" method="post"> <P> <SELECT Name="ComOS"> <OPTGROUP Label="PortMaster 3"> <OPTION Label="3.7.1" value="pm3_3.7.1"> PortMaster 3 com Comos 3.7.1 <OPTION Label="3.7" value="pm3_3.7"> PortMaster 3 com 3,7 Comos <OPTION Label="3.5" value="pm3_3.5"> PortMaster 3 com 3,5 Comos <OPTGROUP /> <OPTGROUP Label="PortMaster 2"> <OPTION Label="3.7" value="pm2_3.7"> PortMaster 2 com 3,7 Comos <OPTION Label="3.5" value="pm2_3.5"> PortMaster 2 com 3,5 Comos <OPTGROUP /> <OPTGROUP Label="IRX"> <OPTION Label="3.7R" value="IRX_3.7R"> IRX com Comos 3.7R <OPTION Label="3.5R" value="IRX_3.5R"> IRX com Comos 3.5R <OPTGROUP /> </ SELECT> </ FORM> Campos input e textárea <TEXTAREA Name=yourname rows="20" cols="80"> Digite seu nome aqui. </ TEXTAREA>
Use a tag de agrupamento de campos <fieldset> com tags de legenda <legend> para associar com campos de seleção e caixas de checagem (checkbox). Exemplo: Considerando um campo que pergunta o sexo do usuário e oferece as opções “Masculino” e “Feminino”, o label “Sexo:” ficaria dentro de uma tag <legend>, que por sua vez junto com os outros dois elementos ficaria dentro da tag <fieldset>.
Validação de formulários Mais comum do que se pensa, designers se esquecem de prever a validação de um formulário (sucesso e erro) e o comportamento das pseudo-classes nos inputs fields (:focus). Estes atributos são essenciais para a boa experiência da interface.
Os menus estão em forma de lista? Quando há submenus ocultos, é disponibilizado um aviso para mostrar/ocultar esses submenus? ·Os menus devem estar em forma de lista/itens. ·Caso o menu apresente subitens ocultos, o site deve informar ao usuário a existência dos mesmos, com mensagens para mostrar/ocultar subitens.
VERIFIQUE
A entrada do CEP deve recuperar parte do endereço
Quando possível, posicione o cursor no campo com problemas, facilitando sua correção Fornecer mensagens de erro orientadas a tarefas, com sugestões ou instruções simples e construtivas para a correção do erro Não limpe o conteúdo do formulário inteiro por causa de um erro
Design Convenções de desenho de interface
A padronização das interfaces é um conceito básico e um dos mais importantes
para quem projeta sites. Passados alguns anos, certas convenções já são
utilizadas e respeitadas em uma série de sites.
Elementos da Interface
Posicionamento
Marca da empresa
Canto superior Esquerdo
Barra superior de acessibilidade
Canto superior Direito
Busca
Parte Superior
Navegação Global
Parte Superior com links na horizontal
Navegação Local
Coluna da esquerda abaixo da navegação global
Breadcrumbs
Parte Superior, da navegação local
Conteúdo global e contextual
Ao lado da navegação local(Área central)
Conteúdo relacionado
Ao lado do conteúdo global e contextual
Barra de acessibilidade Inferior
A cima do rodapé
Navegação de Rodapé
Área central Inferior
Proposta de estrutura básica de um website
1- Marca da Empresa: A posição da marca da empresa foi um padrão que provavelmente surgiu como derivação da cultura ocidental de leitura da esquerda para a direita, de cima para baixo. A marca seria teoricamente a primeira imagem a ser percebida pelos visitantes. É recomendado também que a marca da empresa possua um link pra a homepage do site em todas as telas, menos na própria home.
2- Barra superior de acessibilidade: Ela fornece meios para que usuários com necessidades especiais possam navegar pelo site sem dificuldades, nela esta inseridas os seguintes links:
3- Saltar para o conteúdo: Link com uma ancora pula os links que se repetem frequentemente no site, como o menu global.
4- Contraste fonte: Altera combinação de cores do texto e fundo da tela aumentando seu contraste (fundo branco com a tipografia preta e fundo preto com tipografia branca).
5- Aumentar tipografia: Aumenta o tamanho dos textos do site.
6-Imprimir: Possibilita controlar aparência do que irá para o papel, deixando a página mais amigável e mais agradável de ser ler, além de contribuir com a sustentabilidade do planeta pois a economia de folhas impressas será garantida.
7-Acessibilidade deste site: Como o nome diz, é a página que explica a acessibilidade que o site oferece.
8- Busca: O recurso de busca é, reconhecidamente um dos mais importantes elementos de interface de um site. Caso sejam oferecidas funções de busca, verifique se há diferentes tipos de pesquisa, bem como diferentes tipos de apresentação de resultados (ex.: resumido, detalhado, ordenação, etc.), correspondendo a diferentes níveis de habilidade e de preferências dos usuários.
9- Navegação Global: Existem dois padrões de navegação global (vertical e horizontal) A navegação horizontal tem a desvantagem de ter um espaço físico limitado para a inclusão de links, em sites que tem uma grande quantidade de links a navegação disposta na vertical e mais eficiente. Porém possui uma melhor navegação para o menu de navegação local e para o
conteúdo relacionado A navegação na vertical resolve melhor quando existe a necessidade constante de adicionar ou retirar links, muito comum em grandes portais.
10- Navegação Local: A utilização da navegação global na horizontal, torna natural a utilização da navegação local, na coluna da esquerda, já que as pessoas também esperam encontrar elementos de navegação por ali.Lembrando que a navegação local esta associado ao link da navegação global.
11- Breadcrumb: Indicado apenas para sites de médio e grande porte. 1. Ex.: Você está em: Início > Notícias > Esportes
12- Conteúdo global e contextual: Área destina a todo conteúdo de link do site e lembre-se as pessoas que acessam páginas de conteúdo, como artigos ou detalhes de produtos, normalmente querem ver itens relacionados ao assunto. A idéia central é estimular as pessoas a consumir mais conteúdo. No entanto não deve haver a preocupação de não interferir no que realmente interessa na página: o conteúdo central. Os links não podem competir com o conteúdo.
13- Conteúdo relacionado: O conteúdo relacionado devera ser um conteúdo de expansão ao conteúdo ali existente, deverá fornecer caminhos ao usuário que pretende se aprofundar em tal assunto
14- Barra de acessibilidade Inferior: Ela fornece meios para que usuários com necessidades especiais possam navegar pelo site sem dificuldades, nela esta inseridas os seguintes links: voltar para o conteúdo, voltar para o menu global e voltar para o topo.
15- Navegação de Rodapé: A navegação de rodapé, ou navegação redundante, é outra convenção de
interface já consagrada na Internet. Espaço é muito utilizado para informações de copyright, data da ultima atualização, política de privacidade, contato e links de acessibilidade.
16- Zonas da tela com maior prioridade: EyeTrack – É um aparelho que segue os olhos dos usuários pela tela enquanto eles vêm uma página web. Ao combinar os dados de vários indivíduos, podemos descobrir padrões representativos que se aplicam à maioria da população. Neste estudo foram observadas 46 pessoas durante 1 hora enquanto os seus olhos navegavam na tela por alguns sites de notícias. O estudo caracterizou três zonas de maior prioridade.
17- Para onde eu olho primeiro ? Todas as telas, principalmente a home, devem ter um ponto mais forte, um
ponto principal em que o usuário bata o olhe e fale “ok, eu começo por aqui e minhas outras opções são aquelas ali. Do contrario a pagina pode passar a idéia de confusão e desorganização, principalmente quando estamos falando de portais com um grande volume de informação.
18- Página inicial clara. A página inicial do portal deve deixar claro o que é o síte, seu objetivo e as informações e serviços nele disponíveis.
19- O conteúdo mais importante antes da dobra. A “dobra” é um termo que tem origem no jornalismo. É o ato de dobrar o jornal ao meio para facilitar a leitura. No caso de páginas web, a dobra é a primeira rolagem. Em todas as páginas a parte do conteúdo mais importante e da navegação devem estar acima da dobra.
20- O conteúdo ocupa a maior parte da interface? Ver livro nielsen
21- Não use páginas de transição Não usar páginas sem conteúdo útil, de transição, de abertura (splash-pages) ou “em construção”, que apenas oneram a navegação. Apenas o que já está pronto deve ser visível e passível de ser acessado.
22- Significado das cores: A cor não deve ser usada sozinha para transmitir um significado. Assegurar que todas as informações veiculadas com cor estejam também disponíveis sem cor.
23- Cores do primeiro e segundo plano: Assegurar que a combinação de cores entre o fundo e o primeiro plano seja suficientemente contrastante para poder ser vista por pessoas com cromodeficiências, bem como pelas que utilizam monitores de vídeo monocromáticos.
24- Tipografia: Escolha com cuidado a tipografia, espaçamento e teste a leitura dos textos, preocupação que se deve ter com fontes é a adequação dos contrastes para daltônicos e para pessoas com algum outro tipo de deficiência visual.
25- Alinhamento tipografia: Nada de texto justificado. O ideal para a web é alinhar à esquerda.
26- Prever títulos grandes e elementos fluidos: Para evitar esse problema, é interessante que o designer exagere de propósito no tamanho dos títulos e dos textos com mais caracteres do que ele imagina para conseguir antecipar e prever o comportamento dos outros elementos da página. Isso é importante para que, na hora da implementação do front-end (html+css), o desenvolvedor saiba que aquele elemento é fluido e pode aplicar as propriedades corretas aos outros elementos para evitar erros futuros de CSS.
27- Tamanho dos objetos de controle: Verifique se os objetos de controle, como links, botões de comando, caixas de atribuição, barras de rolagem, etc., apresentam uma área sensível às ações dos usuários suficientemente grande para permitir um fácil e confortável acionamento por parte do usuário idoso e usuários com destreza manual limitada.
28- Não crie páginas que abram e funcionem em tela cheia: O uso de tela cheia (fullscreen) como um expediente para maior controle do desenho tira da pessoa o seu poder sobre as ações do navegador. Caso o cidadão prefira, ele pode optar por trabalhar em tela cheia, ou em qualquer outro formato, desde que o seu interesse e comodidade não seja afetada.
29- O site utiliza a interface gráfica com consistência em todas as páginas? Fontes, cores, formas e a localização de objetos e textos.
30- Formulários: Quando necessário forneça links de ajuda ou instruções sobre como preencher os campos do formulário.
31- Favicon: O ícone favicon é usado pelos browsers para salvar algum site como favorito, e também é usado para a navegação entre as abas abertas.
32- A interface está dividida por blocos lógicos de informações? Ex.: Títulos facilmente identificados.
33- Página 404 - Fazer página personalizada: Mesmo tomando cuidado para checar links quebrados, em um sistema de gerenciamento de conteúdo, poderá acontecer de passar algum link sem verificar ou o usuário poderá digitar o endereço errado. Se essas páginas estiverem com links externos de outros sites, como mecanismos de busca, a página 404 é a única forma de orientar o usuário para que ele encontre o conteúdo que está sendo buscado. As páginas de erro do sítio devem possuir links para a página inicial, de “Fale conosco” (para relato da página não encontrada) e contar com um campo busca.
34- Faça uma imagem de “sem imagem” : Cadastros que possivelmente podem ter fotos e por algum motivo o administrador não cadastrá-la, esta imagem ira aparecer em seu lugar.
35- Um bom design tem que responder essas 3 perguntas: Onde estou? Onde estive? Onde posso ir?
36- Utilizar linguagem mais clara e simples possível, adequada ao conteúdo do site:
USABILIDADE Os critérios ergonômicos de usabilidade apresentam recomendações para que os sistemas computacionais apresentem atributos relacionados à usabilidade como a facilidade de aprendizado, a eficiência de uso, a facilidade de memorização, a baixa taxa de erros e a satisfação subjetiva.
1. Orientação - meios para advertir, orientar, informar, instruir e guiar o
usuário na interação.Facilita a navegação no aplicativo,facilita a compreensão da interface, facilita a memorização, facilita o aprendizado, redução dos erros melhoria do desempenho. O sistema deve apresentar meios para orientar o usuário.
1.1- Feedback- Diz respeito às respostas do sistema com relação às ações do usuário. Oferece ao usuário satisfação pela realização das ações e sensação de alívio funciona como sinal para preparar o usuário para o próximo grupo de ações permite ao usuário saber exatamente o mudou o estado que se encontra o sistema, bem como o que fez para se encontrar nessa situação a qualidade e rapidez do feedback são importantes para o estabelecimento de satisfação e confiança do usuário permite ter um melhor entendimento do funcionamento do sistema conhecer as ações permitidas, bem como suas conseqüências a falta ou a demora de feedback podem ser desconcertantes para o usuário os usuários podem suspeitar de uma falha no sistema, e podem tomar atitudes prejudiciais para os processos em andamento.
1.2- Interface gráfica- diz respeito à organização visual dos itens de informação, relacionados uns com os outros. Permite aos usuários saber a sua localização no sistema numa seqüência de interações ou na execução de uma tarefa permite detectar os diferentes itens ou grupos de itens e aprender suas relações mais facilmente, se eles forem apresentados de uma maneira organizada por exemplo: ordem alfabética, freqüência de uso, características gráficas.
1.3 - Ajuda ao usuário - guias, manuais ou sistemas online que auxiliam o usuário na dificuldade de utilização do sistema Auxilia o usuário em situações de dificuldade permite obter informações adicionais diminui a solicitação da equipe de TI.
2. Carga de memória- diz respeito a todos elementos da interface que
têm um papel importante na redução da carga cognitiva e perceptiva do usuário, e no aumento da eficiência do diálogo. Nenhuma das habilidades do usuário deve ser sobrecarregada, o método de operação seja explícito, quanto maior for a carga de trabalho cognitivo, maior será a probabilidade de se cometer erros, diminui a ocorrência de erros, aumento da eficiência, aumento da produtividade. Deve-se diminuir a carga de memória do usuário.
2.1 - Densidade informacional - carga de trabalho do usuário, do ponto de vista perceptivo e cognitivo, com relação ao conjunto total de itens de informação apresentados aos usuários. Quanto menos o usuário se distrair com informações desnecessárias, estará mais capacitado a desempenhar suas tarefas com eficiência quanto mais sucintos forem os itens, menor será o tempo de leitura quando a densidade da informação é muito alta ou muito baixa, a ocorrência de erros é mais provável.
2.2 - Ações mínimas - carga de trabalho com relação ao número de ações necessárias para completar um objetivo ou tarefa. Quanto menos ações forem solicitadas, mais rápidas são as interações quanto mais numerosas e complexas forem as ações necessárias para se chegar a uma meta, maior será a carga de trabalho e a probabilidade de ocorrência de erros.
2.3 Legibilidade - características das informações apresentadas na tela que possam dificultar/facilitar a leitura da informação. A performance melhora quando a apresentação da informação na tela leva em
conta as características cognitivas e perceptivas dos usuários uma boa legibilidade facilita a leitura da informação apresentada.
2.4 Significado dos códigos - adequação entre o objeto ou a informação apresentada ou solicitada, e sua referência. Quando a codificação é significativa, a recordação e o reconhecimento são mais .Fáceis códigos e denominações não significativos para os usuários podem sugerir operações inadequadas para o contexto, conduzindo-os ao erro.
3. Controle do usuário - Diz respeito tanto ao processamento de ações
explicitas do usuário, como do controle que os usuários têm sobre o Tratamento de suas ações. Os erros e as ambigüidades são limitados,permite entender melhor o funcionamento da aplicação, portanto melhora o aprendizado, quanto mais os usuários tiverem controle sobre o diálogo, melhor será a aceitação do sistema, projetos com ajustes favorecem o controle das ações .O usuário deve ter controle sobre o sistema
4- Adaptabilidade e compatibilidade - diz respeito à capacidade de
um sistema de se comportar conforme o contexto, e conforme as necessidades e preferências do usuário. Usuários diferentes possuem diferentes necessidades, atende mais tipos de usuários, diminui os erros, aumenta a eficiência e produtividade, melhora a Aprendizagem, o sistema deve ser compatível e adaptável ao usuário.
4.1- Flexibilidade - meios que permitem customizar a interface considerando estratégias, hábitos e exigências da tarefa. Quanto mais formas de efetuar uma tarefa existirem, maiores serão as chances de que o usuário possa escolher e dominar uma delas no curso de sua aprendizagem.
4.2 – Compatibilidade - considera a memória, percepção, hábitos, competências, idade, expectativas e experiência dos usuários. Usuário os procedimentos e as tarefas são organizados respeitando as expectativas e práticas dos usuários traduções, as interpretações, ou referências são minimizadas.
4.3 - Experiência do usuário - meios implementados que permitem que o sistema respeite o nível de experiência do usuário. Usuários experientes e inexperientes têm diferentes necessidades atalhos podem permitir a eles acesso às funções do sistema mais rapidamente os usuários podem se tornar especialistas, devido à utilização continuada, ou menos especialistas, depois de um longo período de não utilização.
5. Administração do erro- se refere a todos os meios que permitem
evitar ou reduzir a ocorrência de erros, e quando eles ocorrem, que favoreçam sua correção. As interrupções provocadas pelos erros têm conseqüências negativas, prolongam as transações e perturbam o planejamento, quanto menor é a possibilidade de erros,menos interrupções ocorrem e melhor é o desempenho. O sistema deve evitar os erros, e se ocorrerem, deve favorecer a sua correção. 5.1 - Proteção contra erros - meios para detectar e prevenir os erros, ou possíveis ações com conseqüências desastrosas e/ou não recuperáveis. É preferível detectar os erros no momento da entrada do que no momento da validação isto pode evitar perturbações no planejamento da tarefa. 5.2 - Qualidade das msgs erro - pertinência, facilidade de leitura e exatidão da informação dada ao usuário sobre o erro cometido. Favorece o aprendizado do sistema indicando ao usuário: a razão ou a natureza do erro cometido, o que ele fez de errado, o que ele deveria ter feito,
o que ele deve fazer. 5.3 - Correção dos erros - meios colocados à disposição do usuário com o objetivo de permitir a correção de seus erros. Erros são bem menos perturbadores quando eles são fáceis de corrigir.
6. Padronização - se refere à forma na qual as escolhas na concepção da
interface (códigos, denominações, formatos, procedimentos, etc.) São conservadas idênticas em contextos idênticos, e diferentes para contextos diferentes. Os procedimentos, rótulos, comandos etc., são mais bem reconhecidos, localizados e utilizados, quando seu formato, localização, ou sintaxe são estáveis de uma tela para outra. O sistema é mais previsível, a aprendizagem é facilitada e o número de erros é reduzido. Sua falta pode aumentar o tempo de procura consideravelmente. Sua falta é uma importante razão de recusa na utilização por parte dos usuários. O sistema deve utilizar padronizações. Os critérios de usabilidade devem ser aplicados antes, durante e após o projeto da interface para que a usabilidade seja atingida.
Métodos de avaliação de Usabilidade
1. Métodos empíricos- com usuários. 1.1 - Conversação com câmera - envolve participantes em uma conversação com uma câmera, falando sobre tópicos pré-definidos Vantagem: ausência do entrevistador, facilidade de se expressar se forem 2 pessoas. Desvantagem: falta de controle da seção, demanda tempo, difícil resolver questões ambíguas. 1.2 - Focus group - pessoas reunidas para discutir por exemplo, experiências de uso, exigências para um novo produto, informações sobre tarefas particulares ou problemas de usabilidade associadas ao uso de um produto. Vantagem: qualquer estágio de design, suscitar idéias não pensadas pelo líder , estimular idéias nos participantes. Desvantagem: não capta dados quantitativos, Integrantes podem falar mais que outros, opinião de parte do grupo pode ser tomada como verdade, exige habilidade do líder para moderar a dinâmica. 1.3 - Think aloud protocols - um participante falando sobre o que está fazendo e pensando enquanto interage com um produto. Tarefas específicas ou exploração livre. Vantagem: possível entender não somente quais os problemas eles têm com a interface, mas também porque esses problemas surgem, o método é excelente para apontar diretamente soluções de design, poucos participantes. Desvantagem: alguns usuários podem ter dificuldade de verbalizar suas ações ou se sentir bloqueados. 1.4 - Incidentes diários - mini questionários distribuídos aos usuários, os quais podem anotar quaisquer problemas que tiverem durante o uso do produto
Vantagem: econômico em termos de tempo e esforço, fácil de aplicar, não necessita laboratórios. Desvantagem: não existe garantia de que os usuários irão completá-los sempre que os problemas ocorrerem, podem completar de maneira incorreta, podem ser imprecisos. 1.5 - Features checklists - lista de funcionalidades do produto. Os usuários são solicitados a marcar quais características são usadas ou não Vantagem: econômico em termos de tempo e esforço, fácil de aplicar, não necessita laboratórios, bom para obter uma visão geral do produto. Desvantagem: não fornece dados mais ricos sobre a experiência de uso do Produto. 1.6 - Observação de campo - observação realizada no ambiente em que os usuários normalmente usam o produto. Isto pode oferecer um grau de informações mais próximas da realidade do que uma avaliação realizada num ambiente de laboratório. Vantagem: o método é provavelmente o único que se aproxima da análise do produto em circunstâncias naturais. Desvantagem: análise de dados é mais difícil, problemas éticos, ruídos, somente com produto final. 1.7 - Questionários - questionários de respostas fixas (múltipla escolha ou escalas) e questionários de respostas abertas. Vantagem: método barato e fácil de ser aplicado por poder se fazer cópias dos questionários, pode ser aplicado a uma grande quantidade de pessoas, qualquer estágio de design, ausência do pesquisador. Desvantagem: apenas cerca de 25% dos questionários são respondidos, deve-se ter muito cuidado com a formulação das questões.
1.8 - Entrevistas - 3 tipos: não estruturadas, semi estruturadas e estruturadas. Vantagem: pode ser aplicada em todo o processo de design, erros na interpretações são menores. Desvantagem: demanda esforço e tempo, presença do pesquisador, dificuldade de conseguir participantes. 1.9 – Eyetracking - com uso de aparelhos especiais é usado para determinar o que um indivíduo está olhando. Vantagem: entender quais elementos do produto são mais chamativos para o usuário e quais não são observados por ele. Desvantagem: aparelhos e softwares caros, demanda tempo.
2. métodos não empíricos - com especialistas 2.1 - Análise de tarefas - analisa o desempenho do produto numa série de etapas. quanto mais passos necessários, mais complexa a tarefa, quanto menos passos necessários, mais simples a tarefa. Vantagem: não envolve participantes, dados confidenciais, durante a avaliação o especialista pode encontrar outros problemas e sugerir soluções. Desvantagem: o esforço necessário para cada passo não é considerado, poderá existir uma tendência em favorecer soluções que minimizem o número de passos necessários, ao invés de minimizar as exigências associadas com cada passo. 2.2 - Property checklists - pesquisador verifica se o produto possui as propriedades de design conforme as propriedades da lista. Vantagem: sem usuários, dados confidenciais, pode apontar soluções de design, pode ser aplicado em todo o processo de design.
Desvantagem: dependente do julgamento de uma pessoa ou pessoas que compilaram a lista de verificação. 2.3 - Avaliações especialistas - um ou mais especialistas avaliam a usabilidade do produto. Especialista tem de ser a pessoa que entenda de usabilidade mas seja especialista naquele determinado produto. Ex.carro. Vantagem: não precisa da presença de participantes, o método é bom para fornecer diagnóstico. Desvantagem: existe evidência de que os problemas apontados pelo especialista sejam, de fato, problemas para o usuário. O método é muito suscetível ao conhecimento do investigador. 2.4 - Cognitive walkthroughs (orientações cognitivas)- avaliação de um especialista, porém com o ponto de vista do usuário. O investigador tenta prever se o usuário terá qualquer dificuldade para completar uma tarefa. Vantagem: não requer usuários e resulta em diagnósticos diretos, é rápido, pois não requer coleta nem análises de dados, neste método a avaliação é baseada no contexto de uma tarefa específica. Desvantagem: o investigador deve estar apto a fazer julgamentos com relação às habilidades cognitivas, conhecimentos e habilidades dos usuários. 2.5 - Avaliação heurística - especialistas avaliam a interface de acordo com critérios de usabilidade – heurísticas. Vantagem: ausência de participantes, consegue encontrar grande parte dos problemas de usabilidade das interfaces. Desvantagem: quanto mais avaliadores, melhor, no entanto, demanda mais tempo e dinheiro para pagamento dos especialistas.
PROCESSO DE TESTE
O processo de teste de usabilidade passa pelas seguintes etapas: 1. Planejamento do teste 2. Escolha do ambiente de teste 3. Escolha de participantes 4. Preparo do material de teste 5. Condução da sessão 6. Questionamento final 7. Analise dos dados coletados 8. Relato e recomendações 9. Implementação das alterações e re-teste
1. Planejamento do teste: Antes de aplicar o teste é necessário definir o seu objetivo, por exemplo, avaliar o formulário do “Fale Conosco”. As perguntas que serão feitas durante o teste são listadas e definidas as características das pessoas a serem escolhidas comoparticipantes. 2. Escolha do ambiente de teste: Nessa etapa define-se o ambiente do teste e como ele será realizado. É escolhido o lugar, definindo o tipo de laboratório e o equipamento necessário. 3. Escolha de participantes: Na escolha dos participantes prefira escolher pelo perfil de comportamento/ necessidades do que por estratos demográficos. Exemplo: Se o teste é para um serviço de teleconferência o melhor é recrutar pessoas que usam ou que gostariam de utilizar esse recurso. 4. Preparo do material de teste: O material de teste consiste em guias e listas com o objetivo de orientar o avaliador durante o teste. Não é, literalmente, apenas listar as perguntas que serão feitas ao participante, mas sim fornecer informações sobre o objetivo do teste e cenários para o desenvolvimento das tarefas. 5. Condução da sessão: Durante a sessão, o avaliador tem por função deixar o participante à vontade e orientar sobre as tarefas. O avaliador não deve induzir respostas mas pode auxiliar em caso
de “becos sem saída” se isso contribuir para o andamento da sessão. O avaliador também faz anotações e recebe orientações dos observadores da outra sala. A equipe de observadores, que inclui membros da equipe de desenvolvimento e outros avaliadores, observa a sessão tomando notas. É importante que cada membro da equipe de desenvolvimento assista, pelo menos, a duas sessões. 6. Questionamento final: No final da sessão, deve-se questionar ao participante como foi a experiência. Dispensa-se o participante e uma reunião rápida é feita entre o avaliador e os observadores para troca de impressões. 7. Analise dos dados coletados: Após o final de todas as sessões devem-se reunir todas as observações e analisar os dados coletados. Isto inclui a revisão cuidadosa das gravações realizadas (vídeo e áudio) e a análise das respostas aos questionários. 8. Relatório e recomendações: É gerado um relatório unificado com os problemas encontrados e possíveis soluções. Se possível, este relatório deverá estar embasado com os trechos mais significativos das gravações, exemplificando os principais problemas encontrados. 9. Implementação das alterações e re-teste: A equipe de desenvolvimento implementa as soluções e um novo teste de usabilidade é feito a partir da interface corrigida.
Checklist básico de usabilidade
1. O sistema deve apresentar meios para orientar o usuário: O sistema deve retornar respostas ao usuário para cada ação, seja ela grande, pequena, ou um conjunto de ações. As respostas devem ser significativas, apropriadas para cada situação e em tempo razoável.O sistema deve informar ao usuário o que está ocorrendo com o sistema (status do sistema). Deve-se oferecer meios para o usuário se localizar no sistema. Deve-se fornecer ajuda para utilização do próprio sistema e suas ferramentas. O sistema deve fornecer indicações de como o usuário deve proceder. O sistema deve apresentar as informações de forma organizada (localização, características gráficas, ordem alfabética, freqüência de uso etc.). 2- Deve-se diminuir a sobrecarga mental do usuário: A interface não deve sobrecarregar a visão com número elevado de informações, assim com informações irrelevantes ou pouco necessárias. Se o canal visual estiver ocupado, pode-se empregar o canal de áudio, sem sobrecarregá-los. As tarefas devem ser simples, reduzindo o número de passos para realizá-las. Todas as informações presentes no sistema devem ser legíveis, respeitando características textuais como cor, brilho, contraste, tamanho de corpo e espaçamentos. Todas as informações – gráficas ou textuais – devem ser claras e objetivas. A interface deve ser projetada de forma que a maneira de utilização do sistema seja explícita. Deve-se priorizar as características mais relevantes ao projetar a interface. 3. O usuário deve ter controle sobre o sistema: A velocidade de uso do sistema deve ser controlada pelo usuário. Se possível, o sistema deve fornecer ações de fazer e desfazer (CTRL+Z)
O sistema não deve executar ações que o usuário não tenha solicitado. Se possível, o sistema deve fornecer ajustes e personalização das interfaces. 4. O sistema deve ser compatível e adaptável ao usuário: O sistema deve estar de acordo com nível de instrução, faixa etária, limitações dos usuários e formas de utilização normalmente aceitas. O sistema deve utilizar termos familiares aos usuários, inclusive idioma (exceto termos estrangeiros já adotados pela língua). O sistema deve ser flexível para atender diferentes níveis de experiência dos usuários (principiantes ou experientes). O sistema deve fornecer alternativas para que usuários experientes ocultem informações destinadas a usuários principiantes. Se possível, o sistema deve fornecer ajustes e personalização das interfaces. O sistema deve fornecer meios diferentes para se alcançar um mesmo objetivo. 5. O sistema deve evitar os erros e se ocorrerem, deve favorecer a sua correção: A interface deve ser projetada de maneira a evitar a ocorrência de erros, eliminando circunstâncias propícias aos erros. Para prevenir erros, o sistema pode solicitar as informações por etapa. Se possível, o sistema deve fornecer ações de fazer e desfazer (CTRL+Z). O sistema deve solicitar a confirmação do usuário para ações irreversíveis. Quando ocorrerem, os erros devem ser apresentados ao usuário. Os erros devem ser recuperados de maneira rápida e fácil. O sistema deve fornecer meios para que o usuário corrija somente a parte incorreta. As mensagens de erro devem ser claras e objetivas, utilizando vocabulário neutro (não devem reprovar, julgar o usuário ou utilizar tom de humor). 6. O sistema deve utilizar padronizações: A identidade visual (cores, formas, fontes) deve ser respeitada em todo o sistema. Deve existir padronização de localização dos elementos do sistema.
Deve existir padronização na forma como são realizadas as tarefas. Deve existir padronização de termos utilizados no sistema.
Redação A comunicação em sítios do governo é sobretudo utilitária, visando prestar serviços e informações aos cidadãos. A redação deve levar em conta a audiência, o conhecimento das pessoas que acessam o sítio. O texto deve ser diagramado para facilitar o entendimento da informação. Em resumo: O site deve "falar" a língua das pessoas, com palavras, frases e conceitos familiares; O texto deve ser objetivo.
1 - Utilizar uma linguagem clara e familiar: A linguagem utilizada na divulgação das informações e orientações para realização de serviços deve ser clara e objetiva. Apenas utilizar linguagem técnica e/ou corporativa quando estas forem familiares ao público do sítio. 2 - O texto objetivo: Em textos, começar sempre pelo mais importante, expondo uma idéia por parágrafo. O texto deve ser direto e simples; palavras desnecessárias devem ser omitidas. As informações mais importantes devem estar nos dois primeiros parágrafos. 3 - Dividir o texto em tópicos: Divida o texto em pequenas unidades, pequenos parágrafos, subtítulos e listas para facilitar a exploração da página e o entendimento do conteúdo da informação. 4 - Títulos informativos e com destaque visual: O título é o principal marco visual e o ponto de entrada do olhar, onde a pessoa identifica o conteúdo da página. Portanto, o cabeçalho – ou seja, o título da informação, notícia ou serviço - deve ser facilmente identificado e o seu conteúdo deve ser descritivo. 5 - Título da página explanatório e único: O título da página, elemento <title>, que aparece na barra do menu, é o que os serviços de busca e as pessoas veem primeiro. O título deve ser
explanatório e de acordo com o conteúdo da página, guardando sempre relação entre o título das páginas e o título da janela do navegador. 6 - Utilizar termos simples e claros como rótulos de menu. Os rótulos de menu devem ser facilmente compreendidos pelo cidadão: Não devem ser utilizados siglas, abreviações ou termos técnicos. Devem manter consistência textual com os títulos das páginas a que se eles referem; Os rótulos de itens de menus em todo o sítio devem ser consistentes quanto ao estilo gramatical e a terminologia. 7 - Gramática correta: O texto deve passar por uma leitura e correção antes de ser publicado. Erros de ortografia diminuem a credibilidade do texto. 8 - Use ênfase e negrito: Para ressaltar partes importantes no texto use os elementos HTML de ênfase <em> e negrito <strong>, que atraem a atenção do leitor. Grife, de preferência em negrito, a palavra-chave que defina cada parágrafo. Ao 'escanear' (passar os olhos rapidamente) a página, o cidadão poderá saber, em questão de segundos, quais são os aspectos abordados sobre o assunto ao longo do texto.
![[INFNET] Criando layouts em PSD pensando no front-end e back-end](https://img.document.onl/doc/110x75/558c38d3d8b42a6e738b4577/infnet-criando-layouts-em-psd-pensando-no-front-end-e-back-end.jpg)
