UX sapo

Jun 10

JavaScript não deve comprometer Usabilidade

publicado por andr3, às 16:55 | comentar | ver comentários (12)

Nos últimos anos tornou-se cada vez mais frequente encontrarmos com pequenos controlos na web que são enriquecidos com a magia do JavaScript.

Sejam eles tabs (abas em Português), paginações, votações, etc., o que interessa é que o controlo "quebra" o conceito de hiperligação (link) do hipertexto. Como conceito, os links servem para interligar hiper-documentos em que cada link refere um outro documento através do seu URL.

Ora, uma vez que o AJAX permite carregamento de conteúdo sem refrescar toda a página, esta é uma técnica perfeita para mostrar grandes quantidades de conteúdo que não são necessariamente acedidos em todas as visitas.

Exemplo do link Todo o SAPO na Homepage do SAPO

Evitar barreiras desnecessárias

Existem imensas formas de programar o comportamento do exemplo mostrado.

<a href="#" onclick="mostrarTodoOSapo();">Todo o SAPO</a>

O browser executa a função de JavaScript e segue o href, provocando às vezes um scroll para o topo. Sem JavaScript, nada acontece ao clicar/activar o link.
<a id="todo-o-sapo" href="#">Todo o SAPO</a> e num ficheiro à parte de JavaScript $('todo-o-sapo').onclick = function (){ mostrarTodoOSapo(); return false;};

O browser executa a função de JavaScript e não segue o href. Sem JavaScript, nada acontece ao clicar/activar o link.
<a id="todo-o-sapo" href="/todo-o-sapo">Todo o SAPO</a> e num ficheiro à parte de JavaScript $('todo-o-sapo').onclick = function (){ mostrarTodoOSapo(); return false;};

O browser executa a função de JavaScript e não segue o href. Sem JavaScript, o browser segue normalmente o href, logo que o documento servido nesse URL deve imitar a função desempenhada por JavaScript.

Neste último ponto, estamos a falar duma questão de acessibilidade visto que se trata de permitir acesso ao conteúdo. No entanto, ao resolver este problema estamos também a melhorar a usabilidade do link uma vez que passamos a permitir também que o utilizador opte por abrir o link numa nova Janela ou tab (opção "Abrir link numa nova Janela" do menu contextual).

Esta solução tem o custo de ter de desenvolver uma versão server-side da funcionalidade mas muitas vezes isso é bastante simples e justifica o investimento.

Exemplo prático

Quando desenvolvemos o sistema de tabs da Homepage do SAPO, tivemos todos estes cuidados. Para além disso, era crucial que o utilizador pudesse usar o endereço do browser para partilhar o link para determinada parte da homepage.

Assim sendo, adoptámos a seguinte estratégia...

location.hash = '/'+lnk.getAttribute('href');
//exemplo: http://www.sapo.pt/noticias => http://www.sapo.pt/#/noticias

Os links que tiveram esta atenção foram:

No entanto, não conseguimos resolver um cenário.

Utilizador com javascript, partilha o endereço do browser: http://www.sapo.pt/#/noticias/tecnologia
Utilizador sem javascript segue este link e vê a aba por omissão aberta e não a de tecnologia.

Nesta situação, não conseguimos que o link partilhado seja outro sem provocar um recarregamento da página. Também não conseguimos que o link partilhado funcione sem javascript porque a parte do endereço chamada "Hash" não é enviada para o servidor.

Se tiverem algumas ideias, deixem nos comentários em baixo.

Mais pormenores

Se ainda assim quiserem ler sobre esta técnica, normalmente apelidada de JavaScript Não-Obstructivo (Unobtrusive JavaScript), podem consultar os slides publicados em Abril de 2009 no Blog do Developers: JavaScript done right.

Categorias: acessibilidade, homepage, javascript, usabilidade

comentar

início