Arquivo do mês: outubro 2010

Usabilidade para desenvolvedores front-end

A usabilidade possui diversos critérios a serem trabalhados durante todo o processo de desenvolvimento de uma interface, mas no dia-a-dia podemos melhorar a experiência do usuário através de pequenos detalhes.

A usabilidade é uma qualidade das interfaces que caracteriza a facilidade de uso. Várias diretrizes sobre usabilidade de interfaces web foram desenvolvidas ao longo dos últimos 15 anos e o interesse em proporcionar interfaces de fácil utilização tem crescido entre designers e desenvolvedores.
Entre as várias diretrizes de usabilidade, os princípios convergem para a seguinte tríade:

  • Fácil de usar: o uso da interface deve ser intuitivo, com recursos de fácil reconhecimento e elementos que não dificultem a navegação, leitura, interpretação, clique, etc.
  • Fácil de aprender: uso de termos, ícones, padrões de interface e recursos de ajuda que possibilitem novos usuários reconhecer e facilmente aprender como utilizar a interface. Consistência é fundamental neste quesito.
  • Fazer com que o usuário não cometa erros: neste quesito entram entram dicas, ajuda, validação, boas mensagens de erro e outros recursos que possam prevenir a ocorrência de erros e ajudar o usuário na correção dos mesmos.

Mas, na prática, como podemos implementar estes princípios? Neste artigo apresento algumas dicas simples de usabilidade que podemos praticar efetivamente durante o rotina de desenvolvimento do HTML e do CSS.

Facilitando a leitura com line-height

Um espaçamento adequado entre linhas permite que as pessoas possam ler um texto com maior facilidade e mais rapidamente. O espaçamento não pode ser muito reduzido, pois pode deixar o texto “amontoado”, nem muito extenso, caso contrário as pessoas terão dificuldade de encontrar a próxima linha.
Particularmente recomendo utilizar espaçamento de 1.5 relativo ao tamanho da fonte, ou seja, se você utilizar fonte de 12px, o espaçamento entre as linhas será de 18px. No CSS, controlamos o espaçamento entre linhas com o line-height.

Utilize margins e paddings para distinguir itens

Espaços em branco entre os elementos da página podem ser usado a favor da usabilidade e também da arquitetura de informação do seu site. Creio que muitos já devem ter passado pela situação de alguém falar o seguinte a respeito de um site que você fez: “Ah, mas esse conteúdo X não tem a ver com o Y? É porque estava tudo junto então achei que tinha a ver”.
Os espaços entre itens permite identificar quais elementos estão relacionados e quais são distintos. Portanto, utilize margin e/ou padding mais generosas para afastar elementos que sejam distintos e aproxime os elementos que estejam relacionados, evitando erros de interpretação e mesmo de utilização de alguns recursos presentes na página. Isto serve principalmente para:

  • Estabelecer relação entre títulos e texto
  • Identificar rótulo de formulário e o campo a qual ele se refere
  • Imagens e o respectivo conteúdo textual
  • Páginas que tenham múltiplos formulários ou outros recursos com botões de ação que possam fazer com que o usuário clique em um determinado botão pensando ser relativo a outro recurso

O logo deve ser clicável

Por uma convenção que foi sendo consolidada ao longo do anos, os usuários tendem a clicar no logotipo para retornar à página inicial e é frustrante quando isso não ocorre, pois já é uma ação que o usuário espera ao clicar no logo. 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.

Textos que não são links não devem ser sublinhados

Atualmente, nem todo link precisa estar sublinhado para transmitir a ideia de link, mas todo texto sublinhado ainda transmite a ideia de link. É intuitivo o usuário clicar em uma palavra sublinhada esperando acessar uma página (imagine então se, além de sublinhado, o texto estiver em azul, como já vi em alguns lugares). Portanto, é aconselhável que, para dar ênfase em palavras nos textos, sejam utilizadas as tags strong, em que já têm essa função.

Atributos “alt” e “title” para imagens

O atributo alt para a tag img tem a função de fornececer um texto alternativo caso a imagem não seja carregada ou caso um browser leitor de tela esteja analisando o conteúdo da página. Por isso, é importante que este texto tenha uma boa descrição sobre o conteúdo da imagem. Mas em algumas imagens é interessante que ela não somente tenha um texto alternativo, mas que também exiba uma dica descritiva da imagem ao passar o mouse sobre ela. Isto é muito útil, por exemplo, ao utilizar ícones que indiquem ações, status ou representem link para algum conteúdo sem o uso de um texto descritivo junto à imagem. Para isso, podemos utilizar o atributo title do HTML.

Associando label à campos de formulário

A tag label serve para associar um rótulo a um campo de formulário. Mas muitos desenvolvedores esquecem de realizar essa associação através do atributo for, que deve remeter ao id do campo de formulário.
A principal vantagem dessa associação é permitir que o usuário selecione o campo do formulário ao clicar no label, o que facilita muito especialmente no caso de campos do tipo checkbox ou radio, pois aumenta a região clicável, ajuda diminuir o tempo e a chance de erros para selecionar estes campos.

Destaque o campo ativo do formulário com :focus

Quando um usuário estiver preenchendo um formulário, ele deve perceber claramente em qual campo está inserindo os dados, pois somente mostrar o cursor dentro do campo pode não ser suficiente.
Para isso, pode-se utilizar a pseudo-classe :focus no CSS para o seletor de input, que possibilita aplicar um estilo ao elemento quando ele recebe foco para receber dados do teclado, como uma borda mais espessa ou de outra cor e um background diferenciado, como no exemplo abaixo:

/* Campos no estado normal possuem um background neutro e uma borda clara */
input.text, select, textarea
{ background: #FFF; border: 1px solid #999; }
 
/* Campos no estado :focus possuem um background diferenciado e uma borda de maior destaque */
input.text:focus, select:focus, textarea:focus
{ background: #FFC; border: 2px solid #D8A561; }

A usabilidade possui muitos outros critérios a serem trabalhados durante todo o processo de desenvolvimento de uma interface para a web, mas no dia-a-dia podemos melhorar a experiência do usuário através de pequenos detalhes.

Fonte: http://www.tableless.com.br | Por: Talita Pagani

Deixe um comentário

Arquivado em Usabilidade na internet

O que é uma assinatura digital?

Você pode usar uma assinatura digital pelos mesmos motivos que o fazem assinar um documento impresso. Uma assinatura digital é usada para autenticar (autenticação: o processo de verificar se as pessoas e os produtos são o que dizem ser. Por exemplo, confirmar a origem e a integridade de um código de editor de software por meio da verificação da assinatura digital usada para assinar o código.) as informações digitais — como modelos de formulário, emails e documentos — usando a criptografia do computador. As assinaturas digitais podem ajudar a estabelecer as seguintes garantias:

Assinatura Digital

Assinatura Digital

  • Autenticidade A assinatura digital ajuda a garantir que o signatário é quem ele/ela diz ser.
  • Integridade A assinatura digital ajuda a garantir que o conteúdo não foi alterado ou violado desde que foi assinado digitalmente.
  • Sem rejeição A assinatura digital ajuda a provar a origem do conteúdo assinado para todas as partes. “Rejeição” significa o ato de um signatário negar qualquer associação com o conteúdo assinado.

Para ter essas garantias com relação a um modelo de formulário, você deve assiná-lo digitalmente. Também é possível habilitar assinaturas digitais para o seu modelo de formulário de modo que seus usuários possam ter as mesmas garantias com relação aos formulário que preenchem. Em ambos os casos, os seguintes requisitos devem ser atendidos para assinar digitalmente um formulário ou um modelo de formulário:

  • A assinatura digital é válida (válido: refere-se ao status de um certificado verificado no banco de dados de uma autoridade de certificação e que é legítimo, atual e não expirado ou revogado. Os documentos assinados por um certificado válido e não alterados desde a assinatura são considerados válidos.).
  • O certificado (certificado: um meio digital de fornecer identidade e autenticidade. Os certificados são emitidos por uma autoridade de certificação e, como acontece com uma carteira de motorista, podem expirar ou ser revogados.) associado à assinatura digital é atual (não expirou).
  • A pessoa ou organização que assina, conhecido como o editor, é confiável (confiar: indica se você confia no indivíduo ou grupo para o qual o certificado é emitido. A configuração padrão é Herdar Confiança do Emissor, o que significa que o certificado é confiável já que o emissor, geralmente uma autoridade de certificação, é confiável.).
  • O certificado associado à assinatura digital é emitido para o editor por uma autoridade de certificação (CA) (autoridade de certificação (CA, certificate authority): uma organização comercial que emite certificados digitais, controla quem é atribuído a um certificado, assina os certificados para verificar sua validade e monitora quais certificados expiraram ou foram revogados.) confiável.

Deixe um comentário

Arquivado em Diversos, Informação

Dimensões e características da web brasileira: um estudo do .gov.br

O Censo da Web.br tem como objetivo aumentar o conhecimento e o entendimento da Internet brasileira a partir da coleta e análise detalhada de dados dos sítios hospedados sob o domínio .br.

Dimensões e características da brasileira: um estudo do .gov.br

Dimensões e características da web brasileira: um estudo do .gov.br

Os resultados servirão de base para responder diversas questões como: Quanto sítios há na Web.br? Qual o tamanho da Web.br e como se dá seu crescimento? Que tecnologias são utilizadas? Os sítios da Web estão hospedados no Brasil ou no exterior? Os sítios são aderentes aos padrões Web, como HTML e CSS? Os sítios são acessíveis? Há suporte a IPv6? Quais tecnologias são usadas para os servidores, páginas, imagens, documentos, vídeos etc? Os servidores mantêm seus relógios sincronizados à Hora Legal Brasileira?

Como primeira etapa do projeto, foi realizada a coleta e a análise dos dados da Web brasileira governamental, ou seja, dos sítios sob o domínio .gov.br.

Download da publicação
“Dimensões e características da Web brasileira: um estudo do .gov.br”
PDF – 2.4 MB.

Deixe um comentário

Arquivado em Diversos, Informação, Internet