13

Um exemplo simples, não precisa de código:

Se eu pressionar CTRL + F, automaticamente o navegador abre uma barra de busca na página.

Eu fiz com que ao pressionar CTRL + F ele apontasse para um input dentro do sistema.

Pretendo colocar varios outros controladores, como por exemplo, mudar uma tab boostrap com CTRL + TAB, fechar um modal com ESC. abrir a ajuda interna com F11 entre outros.

Exemplos:

Para Navegar entre tabs usando CTRL + SETA

  var change_tab = function () {
        var map = {37: false, 39: false, 17: false};
        $(document).keydown(function (e) {
            if (e.keyCode in map) {
                map[e.keyCode] = true;
                if (map[37] && map[17]) {
                    var $el = $('.nav.nav-tabs').find('li');
                    $el.each(function () {
                        if ($(this).hasClass('active') === true) {
                            $(this).prev('li').find('a').trigger('click');
                        }
                    });
                }
                if (map[39] && map[17]) {
                    var $el = $('.nav.nav-tabs').find('li');
                    $el.each(function () {
                        if ($(this).hasClass('active') === true) {
                            $(this).next('li').find('a').trigger('click');
                        }
                    });
                }
            }
        }).keyup(function (e) {
            if (e.keyCode in map) {
                map[e.keyCode] = false;
            }
        });
    }

Para maximizar um formulário com CTRL + F11:

var make_full = function () {
        var map = {17: false, 122: false};
        $(document).keydown(function (e) {
            if (e.keyCode in map) {
                map[e.keyCode] = true;
                if (map[17] && map[122]) {
                    $('.fullscreen').trigger('click');
                }
            }
        }).keyup(function (e) {
            if (e.keyCode in map) {
                map[e.keyCode] = false;
            }
        });
    }

A dúvida é simples:

  • Esse tipo de prática é considerada user friendly?

  • Existe algum problema em substituir as teclas de atalho nativas do navegador pelas teclas que eu quiser interagir dentro do meu sistema (EX: CTRL + F para abrir a busca)?

  • Existe alguma recomendação ou padrão (como a PSR-4 para autoload em PHP) sobre como utilizar esse tipo de funcionalidade corretamente ?

PS: No caso em questão o alvo é um sistema interno, não é algo pra ser comercializado, eu só preciso que quem for usar, possa fazer o maior número de coisas no menor tempo possível, ja que o foco do sistema é justamente agilizar processos, aqui tenho exemplos simples, mas tenho atalho que preenchem datas, que disparam filtros, solicitam push de notificações, e diversas outras coisas, algumas estão acima de ações nativas.

4
  • O que vejo no mercado em aplicativos web em sua maioria é a criação padrões de teclas alternativas para funcionalidades internas, como por exemplo: Alt+F ou Ctrl+Alt+F para procurar algo no aplicativo ao invés de utilizar o Ctrl+F que impossibilita utilizar via atalho a funcionalidade padrão. Mas também tem alguns aplicativos que simplesmente sobrescrevem essas funcionalidades, como é o caso do Google Drive, que em um documento ao efetuar Ctrl+F abre uma busca internar. Commented 23/10/2017 às 18:29
  • Talvez a pergunta recebesse mais atenção com um título mais adequado ao cerne da questão, algo como: "Qual o impacto de substituir atalhos de teclado?", ou "Devo utilizar atalhos de teclado personalizados que sobrescrevem os atalhos do browser?"
    – nunks
    Commented 24/10/2017 às 14:49
  • @nunks.lol mas acho que as referencias que você deu na pergunta + a resposta ja foram o suficiente, só não aceitei ainda pra ver se alguém responde mais alguma coisa Commented 24/10/2017 às 14:50
  • Legal, que bom que tô ajudando =). Achei muito bom esse artigo no Medium, leva o assunto praticamente à exaustão...
    – nunks
    Commented 24/10/2017 às 14:55

2 Respostas 2

10
+50

Via de regra, evite alterar o funcionamento do browser para não incorrer posteriormente em problemas de acessibilidade. Caso o público de seu site seja restrito e esteja particularmente informado sobre os atalhos, menos mal, mas e se a pessoa for míope e você tiver substituído o ctrl++ por outra coisa? Interferir com o funcionamento dos atalhos do browser pode provocar contratempos para quem depende deles.

Acredito que o caminho utilizado pelo Google em aplicações como o Gmail, com ponto de interrogação para overlay de ajuda e combinações de atalho que não atropelam aqueles definidos nos browsers, seja a saída mais segura no geral.

Uma exceção seria no caso de funcionalidades que replicam aquela já implementada pelo browser: ctrl+f para utilizar a busca interna da aplicação, ctrl+z para desfazer uma alteração de interface etc, desde que não impossibilite seu uso em controles padrão, ou seja, mantenha o ctrl+z "original" quando o usuário estiver digitando em um campo de formulário.

Dessa forma, usuários que passam o dia inteiro na sua aplicação terão atalhos para facilitar a vida sem que isso interfira com seus hábitos de navegação em outros ambientes, mantendo a padronização de combinações conhecidas. Quem não detesta o fato de cada editor de texto existente no planeta ter seu atalho específico para refazer: ctrl+y, ctrl+shift+z, ctrl+r...

Algumas referências...

2

Estou tentando ajudar porque ninguém de UX tentou ajudar até o momento. Na minha opinião esta não é uma boa pratica. Os softwares web que costumo usar não sobrescrevem atalhos do navegador, uma vez que quando usamos os atalhos do navegador queremos utilizar uma funcionalidade que já conhecemos.

Abs

3
  • Mas no meu caso é um sistema interno, não é algo pra ser comercializado, eu só preciso que quem for usar, possa fazer o maior número de coisas no menor tempo possível, ja que o foco do sistema é justamente agilizar processos Commented 23/10/2017 às 18:18
  • Ok, mas você não poderia utilizar outras teclas de atalho que não são utilizadas pelo navegador? Juntamente você pode criar uma página listando os atalhos ou utilizar tooltip para informar qual é a tecla de atalho. Commented 23/10/2017 às 19:06
  • Eu vou começar a analisar isso, somente algumas colidem com a do navegador, eu achava que seria mais fácil pro usuário do que ter um manual de uso, mas pelas respostas acho que tens razão. Commented 23/10/2017 às 19:09

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .