Melhor combinação de teclas modificadoras para atalhos da Web

14

Muitos usuários do meu site solicitaram atalhos de teclado para acessar as páginas mais visualizadas. Eu sei que os links podem ter, accesskeymas acessá-los é inconsistente nos navegadores . Vou usar o JavaScript para detectar atalhos e gostaria da sua opinião sobre quais devem ser as chaves modificadoras. Estou inclinado para Ctrl+ Shift.

Mikhail
fonte

Respostas:

12

Dois exemplos provavelmente não são suficientes para chamá-lo de "prática estabelecida", mas são pelo menos dois grandes exemplos: o Google e o Twitter não usam nenhum. Ou, se você quiser ver dessa maneira, a tecla modificadora para navegação é G.

Para ir para a página de "favoritos" do Twitter, clique Gem F. Para ir para a pasta de rascunhos do gmail, pressione Gentão D.

Atalhos que não são de navegação também usam letras simples; por exemplo, Jpara avançar em uma lista (tweets, e-mails, etc.), Kpara retroceder. *

* No meu livro, isso está absolutamente errado. Para mim, "J" estar à esquerda de "K" significa "J" deve ser "anterior" e "K" deve ser "próximo". No entanto, fazer o contrário parece ser o padrão.

Nenhum dos dois usa uma chave modificadora "real". Também estamos começando a procurar atalhos de teclado para os sites do Stack Exchange e provavelmente faremos o mesmo. Mais duas razões que vejo por não usar uma chave modificadora:

  • Menos provável tropeçar em algo que já está em uso. Qualquer combinação de Ctrl, Alt, Meta, Command, Shift com uma letra provavelmente já é usada por algum sistema operacional, gerenciador de janelas, navegador, plugin de navegador ou script Greasemonkey. Apenas carta? Não muito.
  • Mais fácil de usar. "Pressione Ctrl-Alt-Q para abrir a guia Foo, depois Meta-Shift-F12 para executar a ação Bar" - isso não facilita / acelera minha vida, que é o objetivo de todos os atalhos de teclado.

Por outro lado, aqui estão duas advertências a serem consideradas:

  • Obviamente, você precisará ignorar as teclas digitadas quando elas ocorrerem enquanto o usuário estiver digitando em uma caixa de texto. Este não é um problema técnico, mas significa que o usuário não pode usar os atalhos.

    Se, por exemplo, sua página focalizar automaticamente a caixa de pesquisa ou se o seu aplicativo da Web for muito pesado para entrada de texto, isso pode ser um problema.

  • Você pode pensar em ativar / desativar. Atalhos de teclado são um recurso de usuário avançado; um usuário "normal" pode se surpreender ao acionar acidentalmente um atalho de teclado (obviamente, uma tecla modificadora tornaria isso menos provável).

    O Gmail, por exemplo, tem os atalhos de teclado desativados por padrão, com a exceção de ?que (naturalmente) mostra a ajuda do atalho de teclado - incluindo um link para ativar / desativar os atalhos. Eu acho que os atalhos de teclado são uma área em que você pode dizer que não há problema em defini-la (as preferências do usuário são algo que geralmente tentamos evitar nos sites do Stack Exchange), e a solução do Google para isso parece interessante.

    Mas "desativado por padrão" obviamente oculta a descoberta, o que pode ou não ser um problema.

- mas, considerando tudo, "nenhuma chave modificadora" parece ser uma boa solução para mim.

balpha
fonte
3
Outro ponto nos combos de modificadores compostos (pressione Ctrl-Alt-Q para abrir a guia Foo, depois Meta-Shift-F12) - isso é realmente bastante estranho do ponto de vista da acessibilidade. Ou mesmo se você tiver um teclado esquisito (tosse), algumas combinações podem exigir ginástica dos dedos. Teclas individuais: sem esforço.
Marc Gravell
2
Esse é um excelente post @balpha. Eu quero ressaltar que J está "inativo" e K está "ativo". Editor de texto VIM usa a mesma lógica
Mikhail
@ Mikhail: Estou ciente disso, mas não concordo com essa lógica - afinal, J está à esquerda de K. Para mim, se J está "inativo", então U tem que estar "ativo" . Mas acho que vou me acostumar com isso :)
balpha
1
rollmops.wordpress.com/2006/05/01/vintage-computer As chaves HJKL foram usadas dessa maneira desde antes da existência da Web. Neste ponto, é tradição!
Kevin Panko
8

Não há opção melhor ou modificador de chave universal

Suas melhores opções são:

  1. Use nenhuma tecla modificadora (apenas pressionamentos de tecla únicos) e pare de detectar pressionamentos de tecla quando o cursor do usuário estiver em um campo de entrada ou área de texto, como o Google faz com os atalhos do Gmail.

    - ou -

  2. Escolha um padrão que seja adequado à maioria dos visitantes com base nas estatísticas do sistema operacional dos dados do Google Analytics. Permita que usuários avançados que desejam que os atalhos os ativem e substituam a tecla modificadora nas configurações do usuário, da mesma forma que o software de desktop.

    - ou -

  3. Use uma tecla 'trigger' em vez de uma tecla modificadora. Considere ,2ir para a segunda guia na sua área de navegação com guias e ,3para a terceira, por exemplo. A combinação de uma vírgula seguida imediatamente por um número é incomum o suficiente para reduzir a probabilidade de conflitos ou pressões acidentais.

Em todos os casos, considere desabilitar as teclas de atalho por padrão para evitar comportamentos inesperados para a maioria dos usuários que provavelmente não se importam com as teclas de atalho.

Por que não escolher apenas uma combinação de modificadores?

A razão pela qual sugiro esses métodos é que não há chave modificadora de plataforma cruzada padronizada que você considere segura para usar com JavaScript em um ambiente de navegador. Qualquer coisa que contenha Ctrl, Shift, Alt, ou Cmdprovavelmente vai quebrar alguns atalhos do navegador em algumas plataformas.

Sua sugestão de usar Ctrl+ Shift, por exemplo, interromperá os atalhos do Firefox no Windows, muitos dos quais usam essa combinação para executar funções especiais , como Ctrl+ Shift+ D, que marca todas as guias abertas.

Os fabricantes de navegadores usam atalhos diferentes para acionar teclas de acesso em cada plataforma diferente precisamente porque não há um padrão entre plataformas. A Apple usa Ctrlno Mac e Altno Windows no Safari, por exemplo.

Além do mais, cada navegador resolve conflitos de atalhos de maneira diferente e isso leva a consequências inesperadas para seus usuários. Quando você liga uma pressão de tecla a uma função em JavaScript que também possui uma ligação como atalho nativo do navegador ...

  • O Firefox executará o atalho JavaScript sozinho, se você, return false;mas executará sua função JavaScript, seguida pelo atalho do navegador Firefox, se você return true;(ou seja, executa os dois por padrão).
  • O IE executará a função JavaScript seguida pelo atalho do navegador IE.
  • O Safari / Chrome / Opera processará o atalho do navegador, mas não o JavaScript.

[Fonte: o adendo ao pé da página leia-me de jquery.hotkeys de John Resig .]

usuario
fonte
Eu gosto da abordagem não simultânea. Embora eu provavelmente usasse o; chave
Mikhail