domingo, 23 de maio de 2010

Explorando melhorias de usabilidade alinhadas aos padrões do W3C

Recomendações do W3C sobre usabilidade

Usabilidade pode ser definida de várias maneiras. Vemos usabilidade amplamente de acordo com a definição ISO 9241: "Eficácia, eficiência e satisfação com que determinados usuários atingem metas específicas para cada tipo de ambiente". Eficácia, eficiência e satisfação podem ser definidos como:

  • Eficácia: a exatidão e a integralidade com que usuários conseguem atingir seus objetivos específicos em determinados ambientes;
  • Eficiência: os recursos gastos em relação à exatidão e integridade das metas almejadas;
  • Satisfação: o conforto e a aceitação do sistema alcançados pelos usuários e outras pessoas afetadas por seu uso;

A usabilidade está vinculada ao modo como o grupo de usuários interage com o sistema, este por sua vez, pode apresentar vários defeitos. Por exemplo, muitos sites sem usabilidade têm problemas como esses:

  • Estrutura: fornecer uma estrutura lógica e eficaz, que facilite as tarefas mais comuns;
  • Navegação: fornecer um contexto para o usuário (Onde eu estou? De onde eu vim? Onde posso ir?);
  • Coerência: modelos de design para o layout, apresentação e interação de páginas individuais;
  • Feedback: destacar as informações importantes, fornecendo feedback sobre as ações do usuário;
  • “Pesquisabilidade”: fornecer metadados para apoiar a procura efetiva, proporcionando um contexto do site em qualquer página;
  • Controle e segurança: controle de usuário, proporcionando perfis de acesso e restrições que impedindo que pessoas não autorizadas acessem as informações confidenciais do site.

As definições de acessibilidade geralmente coincidem com as de usabilidade. Acessibilidade pode ser vista como a usabilidade para usuários com deficiências, os quais podem usar modos de entrada alternativos ou especializados, como também tecnologias auxiliares, como leitores de tela ou dispositivos braille. Normalmente, um site acessível:

É perceptível e de fácil interação com dispositivos alternativos que podem ser facilmente identificados e efetivamente utilizados para auxiliar a navegação.

A acessibilidade identifica defeitos de usabilidade, procurando evitar que o uso de um site por um grupo de usuários com deficiência, tenha o conteúdo padrão prejudicado, independentemente do modo de interação escolhido. Sites que são considerados difíceis de usar e pesados apresentam geralmente não apenas os defeitos genéricos em usabilidade, mas também problemas de acessibilidade que podem impedir totalmente a sua utilização para os usuários com problemas cognitivos, deficiência visual ou outras deficiências.

O W3C desenvolve recomendações técnicas que muitas vezes parecem estar muito longe da realidade do usuário final, bem como orientações que visam melhorar a experiência do usuário, além de diretrizes para melhorar a acessibilidade do conteúdo. Seguir as recomendações técnicas traz um efeito importante na experiência do usuário e define os limites dentro dos quais os projetistas devem seguir no desenvolvimento dos sites.

O desafio é trazer o contexto do usuário para as pessoas que desenvolvem os sites, seguir as recomendações técnicas do W3C pode facilitar o processo de decisão, de quais técnicas devem ser usadas, para melhorar a usabilidade dos produtos.

O desenvolvimento de um site ou sistema que segue as recomendações técnicas propostas tende a atingir maiores graus de acessibilidade e usabilidade. No entanto, embora as recomendações sejam exigentes, é importante analisar as necessidades gerais da aplicação em diferentes cenários, ferramentas e agentes, para que eles possam ser usados de uma forma que não restrinja desnecessariamente o design do site.

As recomendações do W3C

A maioria das recomendações do W3C são muito técnicas, e em muitos casos requerem algum conhecimento técnico prévio, para serem totalmente compreendidas. No entanto, existe um esforço para adaptar estas recomendações de um ponto de vista menos técnico. Para isso o W3C tem utilizado um grupo de usuários menos técnicos dispostos a ler as recomendações e anotações e identificar problemas de compreensão. Para então explicá-las em um glossário ou o através de anotações no texto principal.

Finalmente, ferramentas e materiais educativos são desenvolvidos para ajudar os usuários a utilizar as recomendações. Por exemplo, o W3C tem um validador de XHTML e CSS. Para verificar se o código escrito no CSS está padrões corretos e se a página apresenta links quebrados. Como também sugere como a página pode ser corrigida.

Desenvolvendo heurísticas de usabilidade

Heurísticas de usabilidade ajudam os desenvolvedores a não se esquecer de verificar as principais causas dos defeitos de usabilidade. Por exemplo, uma lista de heurísticas de interface de usuário, em geral podem apresentar as seguintes características:

  • Diálogo simples e natural;
  • Linguagem próxima a linguagem do usuário;
  • Minimização da carga de memória da aplicação;
  • Coerência;
  • Feedback do usuário;
  • Tratamento de exceções através de mensagens de erros com conteúdo amigável ao usuário
  • Link para ajuda
  • Documentação do site

Implementação de melhores práticas de usabilidade

Há uma quantidade enorme de áreas de estudo no campo da usabilidade. Grande parte das normas do W3C depende de um quadro de referência comum entre os participantes, mas carece de uma abordagem comum de usabilidade, devido ao rápido desenvolvimento, tanto da Web quanto das práticas de usabilidade. Quanto mais cedo nós decidirmos utilizar melhores práticas de usabilidade, melhor se tornará o processo de design e conseqüentemente o resultado final. Aumentar a capacidade de entendimento das recomendações do W3C, um bom exemplo disso. Além de que vale a pena olhar outros cenários relacionados com métodos de usabilidade, como estes podem ser adotados no ciclo de vida do projeto.

Um dos elementos mais valiosos dos grupos de trabalho está em reunir pessoas interessadas em usabilidade e estimular a troca de conhecimentos e experiências. Como também é extremamente importante que o feedback dos usuários seja levado em consideração, para potencializar o processo de desenvolvimento de melhores práticas, criando um efeito ainda maior sobre o modo como interagimos com a Web, e em geral no sentido de levar experiências do usuário para um terreno mais comum, e mais perto do usuário final. Estas boas práticas devem ser integradas aos processos de W3C, fazendo parte do material desenvolvido, e documentos do processo, orientações sobre design e regras de publicação.

sábado, 17 de abril de 2010

Dicas de Qualidade para webmasters

<title>: O elemento mais importante de uma página web de qualidade

O elemento <title> em HTML foi projetado para fornecer um pequeno pedaço de texto no documento nos seguintes casos:

  • Barra de título da Janela;
  • lista de favoritos;
  • lista de resultado do serviço de busca.

Por isso devemos sempre dar um bom título ao nosso site, não sendo muito curto e nem muito longo.

Não use “Clique aqui” como texto de um link

Ao chamar o usuário para ação o link deve fornecer:

  • Informações quando lida fora do contexto;

  • Explicar o que o link oferece;

  • Não falar sobre mecânica,

  • Não é uma expressão verbal.

Exemplo:
Evitar a seguinte frase na sua página:



Para fazer o download do IRPF 2010 / Receita Fazenda, clique aqui

Ou


Para fazer download do IRPF 2010, vá para o sitio da Receita e obtenha o software necessário.

Ambas as sentenças divulga muito a mecânica de obtenção do software da Receita. Se quiser chamar o leito à ação, use algo como:


Obter IRPF 2010

Use o atributo alt para descrever a função de cada elemento visual

O atributo alt é definido em um conjunto de tags (img, área, input, applet, etc) para permitir que você forneça um equivalente contextual para o objeto.

Benefícios para o seu site com o uso do alt:

  • Atualmente, os navegadores da web estão disponíveis em uma grande quantidade de plataformas com capacidades muito diferentes, alguns não podem exibir imagens ou apenas um conjunto restrito de tipos de imagens. Se o código tem o atributo alt definido na suas imagens, a maioria dos navegadores exibirá a descrição que você deu, em vez das imagens.

  • Alguns de seus visitantes não podem ver as imagens, sejam eles cegos, daltônicos, com visão reduzida. O atributo alt é de grande ajuda para estas pessoas terem uma ideia do que está em sua página.

  • Obs.: Se a imagem apresenta uma série de informações importantes, tente resumi-la em uma pequena linha para o alt e adicionar o atributo longdesc para uma descrição mais detalhada.

    Cuidado com o tamanho da fonte

    Uma certa tendência para os designers, acreditando que o texto pequeno da página web dá uma aparência mais elegante e oferece mais espaço por “página” de conteúdo real, muitas vezes resulta na utilização de tamanhos de letra excessivamente pequeno.

    Outro fator importante é esquecer <font> e utilizar o CSS, pois é a forma mais adequada para definir o tamanho do texto exibido além de ser mais flexível, mais fácil de manter e economiza largura da banda.

    Não é uma boa prática especificar o font-size em pt, utilize xx-small, x-small, x-large ou em.

    GIF x PNG

    - GIF desenvolvida em 1980 e ainda é amplamente utilizado.

    - PNG desenvolvida em 1995 e tornou-se uma recomendação do W3C em 1996.

    Para a Web, PNG tem três grandes vantagens:

    - Canais Alpha (transparência variável);

    - Correção gamma-cross platform (controle de brilho da imagem) e cor;

    - Entrelaçamento bidimensional (um método de visualização progressiva).

    E aí? Gostou? Escreva seu comentário enviando mais dicas. :)

Participação do e-gov no atendimento aos pradrões W3C

Após a grande explosão da chamada web 2.0, com a maciça participação do usuário, surge a tão falada Web 3.0, anunciada como a terceira onda da Internet, que projeta estruturar todo o conteúdo disponível na rede mundial de computadores. É aí onde o governo eletrônico entra com sua parcela de colaboração.

Segundo o gerente da W3C, Vagner Diniz, declarou que a evolução da Internet está relacionada ao desenvolvimento de tecnologias que seguem padrões internacionalmente aceitos e que o mundo digital colaborativo faz com que o governo também adote a prática de compartilhar dados.

A área de Comunicação Empresarial é fundamental no processo de agilizar o atendimento ao cidadão. Ou seja, quando não há integração entre as áreas, o resultado pode ser a não credibilidade de resposta.

Portanto, é importante sempre seguir os padrões propostos pela W3C, com o objetivo agilizar a disponibilização de dados governamentais para o público, através da utilização de padrões como o XML e o CSS.

W3C? Padrões Web? O que é isso??

O Consórcio World Wide Web (W3C) é um consórcio internacional no qual organizações filiadas e o público trabalham juntos para desenvolver padrões para a web afim de garantir o crescimento do WWW.
Padrões Web ou Web Standards é um conjunto de normas, diretrizes, recomendações, notas, artigos, tutoriais e afins de caráter técnico, destinados a orientar fabricantes, desenvolvedores e projetistas para o uso de práticas que possibilitem a criação de uma Web acessível a todos, independentemente dos dispositivos usados (palms, celulares, TV Digital, etc) ou de suas necessidades especiais.

Tabelas Zebradas no padrão W3C

Muitos dos WEB Designers e desenvolvedores se preocupam em aprender a utilizar ferramentas IDE sofisticadas para construção de sites, mas esquecem que existem uma infinidade de recursos nos padrões W3C que de forma simples e padronizada podem ser implementadas.

Um exemplo simples é uma tabela zebrada, existe no CSS uma forma de fazer sem a necessidade de programar código JavaScript, jQuery, etc, essa forma é utilizando os seletores do CSS, mais precisamente a pseudo-classe nth-child().

A classe nth-child() possibilita a selação de um determinado elemento dentro de uma árvore de elementos, neste caso selecionaremos linhas ímpares dentro de uma tabela.

O regra que utilizaremos para o nth-child será: an + b

De forma simplificada, podemos dizer que para cada a linhas será selecionada a linha de número b.


Exemplo de uma Tabela Zebrada

Como uma tabela zebrada tem uma linha da mesma cor a cada 2 linhas podemos usar a seguinte regra:

Veja abaixo uma tabela com a regra 2n+1:


Veja abaixo uma tabela com a regra 3n+2:

É isso ai pessoal, espero ter ajudado a mostrar o quanto é importante conhecermos os padrões da web W3C.


sexta-feira, 16 de abril de 2010

O Início da Web

Não podemos falar de "Padrões Web" sem antes mencionar o nascimento da Web. A World Wide Web foi criada no final de 1990, por Tim Berners-Lee. Um Computador Nextcube foi usado para escrever o primeiro navegador e também como o primeiro servidor web. Com isso Berners-Lee já possuía todas as ferramentas necessárias para o sistema.

No Brasil começou um pouco mais tarde, só em 1991 com a Rede Nacional de Pesquisa – RNP. Ainda hoje a RNP (http://www.rnp.br/) é o backbone principal e envolve várias instituições (FAPESP, FAPEPJ, etc), Universidades, etc.

O backbone da rede Ipê foi projetado para garantir a largura de banda necessária ao tráfego internet de navegação web, correio eletrônico, transferência de arquivos, etc. Tudo isso para garantir nossa conectividade.


Breve História da World Wide Web:

  • 1945 - Vannevar Bush descreve um sistema chamado Memex que permite fazer e seguir links entre documentos armazenados em microfilm.

  • 1960 - Doug Engelbart produz um sistema chamado "oNLine System" (NLS) que permite fazer e seguir links em documentos de texto.

  • 1969 - É criada a ARPAnet. Primeiros computadores ligados entre si.

  • 1971 - Ray Tomlinson inventa o email para trocar mensagens entre si.

  • 1974 - Vint Cerf e Bob Kahn publicam "A Protocol for Packet Network Interconnection", o qual especifica o Transmission Control Protocol (TCP).

  • 1978 - TCP é dividido em TCP (Transmission Control Protocol) e IP (Internet Protocol).

  • 1980 - Tim Bernes-Lee (a trabalhar no CERN) escreve um programa chamado "Enquire-Within-Upon-Everything", que permite estabelecer links entre diversos nós. Cada nó tem um título.

  • 1989 - Tim Bernes-Lee escreve "Information Management: A proposal". http://www.w3.org/History/1989/proposal.html

  • 1990-Out - Tim Berners-Lee começa a trabalhar na implementação de um browser+editor usando o ambiente NEXTStep. Chama o programa de "WorldWideWeb".

  • 1990-Nov - Primeiro servidor web: nxoc01.cern.ch (mais tarde: info.cern.ch).

  • 1991 - Browser em linha de comando é posto no ar para computadores vax, rs6000 e sun4.

  • 1991 - Internet no Brasil.

  • 1993 - Marc Andreesen e Eric Bina (Estudantes) escrevem o browser "Mosaic", que corre em diversas plataformas (Unix, MAC e Windows). Permitia a inclusão de imagens na mesma janela.

  • 1993-Abr - CERN permite que qualquer pessoa possa utilizar o código e o protocolo da web (HTTP) de graça.

  • 1994 - Netscape Corporations e primeiros ISPs.

  • 1994-Out - Criado o World Wide Web Consortium (W3C) w3c.org