Saltar para: Post [1], Comentar [2], Pesquisa e Arquivos [3]

UX sapo

Apontamentos sobre usabilidade no SAPO

UX sapo

Apontamentos sobre usabilidade no SAPO

JavaScript não deve comprometer Usabilidade

18.06.10, andr3

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.

  1. <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.

  2. <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.

  3. <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.

  1. Utilizador com javascript, partilha o endereço do browser: http://www.sapo.pt/#/noticias/tecnologia
  2. 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.

4 comentários

  • Imagem de perfil

    andr3

    21.06.10

    Paulo,

    O fragment identifier não é enviado para o servidor pelo browser... logo não é possível tomares decisões server-side tendo isto em conta.

    Por isso é que o :target no CSS é útil para alterar aspecto do fragmento seleccionado. Tudo acontece no browser.


    Quanto à questão das duas tabs.. bem apontado. Foi um ponto que considerámos e depois acabámos por apenas "memorizar" o último estado para não poluir demasiado o endereço. Porque depois começamos a guardar o estado de tudo na homepage: noticias, destaques, tab da pesquisa, widgets abertas, etc.

    Assim se quiseres partilhar, por exemplo, um link para o radar podes:
    http://www.sapo.pt/destaques/radar#destaques

    o fragment identifier faz match a um id existente na página e o browser faz scroll. :)

    Isso foi outro debate... se devíamos forçar o scroll via javascript no caso do "alvo" estar abaixo da linha de água... Qual é a tua/vossa opinião no caso:
    http://www.sapo.pt/#/destaques/cinema
    ?
  • Sem imagem de perfil

    Rui Lopes

    21.06.10

    Eu faria o scroll... é o comportamento esperado pelos utilizadores quando há um hash.
  • Imagem de perfil

    andr3

    21.06.10

    Hmmm.. certo!

    Mas e não achas confuso/não-coerente que uns endereços façam scroll e outros não?
  • Comentar:

    CorretorEmoji

    Se preenchido, o e-mail é usado apenas para notificação de respostas.

    Este blog tem comentários moderados.

    Este blog optou por gravar os IPs de quem comenta os seus posts.