Améliorer la convivialité avec des clés de navigation supplémentaires

Les plats clés

• Des clés de navigation supplémentaires, telles que Page-Up, Page-Down, Home et End, améliorent considérablement la convivialité en fournissant plus de contrôle et en permettant une navigation rapide sur de grands groupes de données. Ces clés peuvent être particulièrement efficaces dans les commandes des curseurs, où elles peuvent être utilisées pour incrémenter ou décrémenter les plus grandes proportions ou régler le curseur sur son minimum et maximum.
• L'interprétation des frappes dépend du contexte et doit être soigneusement considérée lors du script. En général, la maison signifie minimum, démarrage ou premier; La fin signifie maximum, fin ou dernier; Page-Up signifie l'incrément par un morceau ou le passage à la prochaine division ou groupe; Page-Down signifie diminuer par un morceau ou passer à la division ou au groupe précédente.
• Les clés de navigation supplémentaires améliorent l'expérience et l'accessibilité des utilisateurs, conduisant potentiellement à une augmentation de l'engagement des utilisateurs, à une réduction des taux de rebond et à des taux de conversion améliorés. Cependant, ils doivent être implémentés intuitivement et sans écraser l'utilisateur pour éviter de nuire à l'expérience utilisateur.

Lors de la gestion des événements du clavier en JavaScript, la plupart des scripts et applications ont tendance à s'en tenir à la gamme de base des clés qui offrent l'accessibilité de base - la clé de l'onglet pour la navigation en série, les touches de flèche pour le forage ou pour la navigation bidimensionnelle, et Les touches Entrée et Espace pour cliquer et sélectionner des choses.

Tout cela est bon, mais il existe d'autres clés communes que vous pourriez également considérer, qui peuvent considérablement améliorer la convivialité en fournissant plus de contrôle - les clés de page et de page peuvent être utilisées pour une navigation rapide sur de grands groupes de groupes de groupes de groupes de groupes de groupes de groupes de groupes de grands groupes de Les données, tandis que les clés à domicile et à la fin peuvent être utilisées comme raccourcis vers la première et la dernière valeur.

La plupart des claviers Windows ont des clés dédiées pour ceux-ci, mais ils fonctionnent également sur les combinaisons Mac via des modificateurs. Par exemple, sur mon MacBook, il y a une clé FN (fonction) supplémentaire, et celle-ci est utilisée en combinaison avec les quatre clés de flèches (par exemple FN pour Page-Up, et FN laissé pour la maison).

Contrôles du curseur

Les commandes des curseurs sont un exemple parfait de l'endroit où ces clés peuvent être utilisées à bon escient. Les touches de flèche sont généralement utilisées pour incrémenter et décrémenter un curseur d'une seule valeur, mais nous pouvons également utiliser les touches de page-up et de page pour modifier la valeur par une proportion plus grande, ainsi que les clés à domicile et à la fin pour définir le curseur à son minimum et maximum.

Le code suivant est un extrait du curseur de recherche d'un lecteur vidéo:

<span>switch(true)
</span><span>{
</span>  <span>case (e.keyCode == 38 || e.keyCode == 39) : 
</span>    
    <span>if(++value > max) 
</span>    <span>{ 
</span>      value <span>= max; 
</span>    <span>}
</span>    <span>break;
</span>    
  <span>case (e.keyCode == 37 || e.keyCode == 40) : 
</span>    
    <span>if(--value     <span>{ 
</span>      value <span>= 0; 
</span>    <span>}
</span>    <span>break;
</span>    
  <span>case (e.keyCode == 33) : 
</span>    
    <span>if((value = value + Math.round(max / 10)) > max)
</span>    <span>{
</span>      value <span>= max;
</span>    <span>}
</span>    <span>break;
</span>    
  <span>case (e.keyCode == 34) : 
</span>    
    <span>if((value = value - Math.round(max / 10))     <span>{
</span>      value <span>= 0;
</span>    <span>}
</span>    <span>break;
</span>    
  <span>case (e.keyCode == 36) : 
</span>    
    value <span>= 0;
</span>    <span>break;
</span>    
  <span>case (e.keyCode == 35) : 
</span>    
    value <span>= (max - 1);
</span>    <span>break;
</span><span>}</span></span></span>

L'instruction Switch ajuste la valeur du curseur (et par conséquent, la position de recherche de la vidéo) en fonction du Keycode de l'événement - par une seule étape pour les touches de flèche, de 10% pour les touches de page et de page, ou pour Le début ou la fin de la vidéo pour les clés à domicile et à la fin, respectivement. Le cas échéant, les changements de valeur sont limités afin qu'ils ne dépassent pas leurs limites (par exemple, vous ne pouvez donc pas chercher au-delà de la fin).

Dans ce cas, le curseur a été écrit à partir de zéro pour inclure ces clés supplémentaires, mais c'est la véritable amélioration des scripts qui est facile à moderniser, car tout ce qu'elle nécessite est des conditions supplémentaires pour le code de manutention des clés que le script doit déjà contenir.

Gestion des événements clés

Pour référence, voici toutes les valeurs de keycode d'événement utilisées dans l'exemple précédent:

• 33 = page-up
• 34 = page-down
• 35 = end
• 36 = Home
• 37 = Arrot gauche
• 38 = up-arrow
• 39 = Arrote droite
• 40 = Arrow Down-Arrow

La gestion de ces clés n'est pas différente de la gestion des autres clés de navigation; Si vous souhaitez plus d'informations à ce sujet, consultez mon article précédent: Accessibilité JavaScript pratique.

La seule chose que je m'arrêterais pour mentionner explicitement ici, c'est que les clés de navigation ne peuvent être gérées qu'avec des événements Keydown et Keyup, et pas avec des événements de la baisse des touches (qui ne sont utilisés que pour les clés qui insérent réellement un caractère, comme les lettres et les chiffres). Les événements de clés peuvent également être utilisés pour bloquer les actions par défaut, ce qui est souvent nécessaire lors du script avec des clés de navigation, mais assurez-vous de le faire uniquement lorsque l'accent est à l'intérieur de votre widget, afin que vous ne finissez pas par les bloquer tout le temps.

Interpréter les comportements clés

Lors de l'utilisation de ces clés supplémentaires - ou des clés d'ailleurs - il est important de s'arrêter et de considérer ce que les touches seront signifier dans le contexte de votre script. Bien que nous ayons une idée claire de ce que, par exemple, la clé d'accueil signifie dans le contexte d'un éditeur de texte ou d'un processeur de mots, il peut ne pas être si évident dans un contexte de comportement différent.

Le curseur est un bon exemple car il est évident pour quoi ils devraient être utilisés, et je pense que nous pouvons prendre cet exemple spécifique pour dériver un ensemble de principes plus général:

• La maison signifie minimum, démarrer ou d'abord
• fin signifie maximum, fin ou dernier
• Page-Up signifie l'incrément d'un morceau, ou passer à la division ou groupe suivante
• Page-down signifie diminuer par un morceau, ou passer à la division ou groupe précédente

Alors peut-être, par exemple, dans le contexte de la vue de message d'une application de messagerie, la clé d'accueil peut sauter en haut de la liste et la clé finale à la fin. Ou dans le contexte du contrôle du volume d'un lecteur de musique, Page-Up peut augmenter le volume d'un quart ou demi, tandis que Page-Down fait le contraire.

Vous aurez la meilleure idée de la façon dont ces clés se rapportent à votre propre application. Il n'y a pas de règles strictes et rapides pour cela, et pas de conventions absolues, c'est juste un cas de réflexion sur ce que les actions de clavier existantes réalisent et comment ces touches supplémentaires pourraient être utilisées pour rendre cela plus facile ou plus rapide.

Les questions fréquemment posées sur l'amélioration de la convivialité avec des clés de navigation supplémentaires

Quels sont les avantages de l'utilisation de clés de navigation supplémentaires sur un site Web?

Les clés de navigation supplémentaires peuvent améliorer considérablement l'expérience utilisateur sur un site Web. Ils fournissent aux utilisateurs plus de contrôle sur leur expérience de navigation, leur permettant de naviguer dans le site plus efficacement. Cela peut entraîner une augmentation de l'engagement des utilisateurs, une réduction des taux de rebond et une amélioration des taux de conversion. De plus, les clés de navigation supplémentaires peuvent rendre un site Web plus accessible aux utilisateurs handicapés, élargissant encore sa portée et sa convivialité.

Comment puis-je implémenter des clés de navigation supplémentaires sur mon site Web?

Implémentation de clés de navigation supplémentaires Sur votre site Web, implique une combinaison de conception et de codage Web. Vous pouvez utiliser HTML, CSS et JavaScript pour créer et styliser les clés de navigation. Il est également important de s'assurer que ces clés sont intuitives et faciles à utiliser, et qu'elles améliorent l'expérience utilisateur globale plutôt que de la compliquer.

Quels sont quelques exemples de clés de navigation supplémentaires?

Les touches de navigation peuvent inclure des fonctionnalités telles que les boutons «Back to Top», les liens «sauter vers le contenu» et les raccourcis clavier. Ces fonctionnalités peuvent aider les utilisateurs à naviguer de manière plus efficace sur votre site, en particulier sur les pages longues ou complexes.

Comment les clés de navigation supplémentaires peuvent-elles améliorer l'accessibilité du site Web?

Les clés de navigation supplémentaires peuvent rendre votre site Web plus accessible en fournissant des moyens alternatifs pour naviguer sur le site. Par exemple, les raccourcis clavier peuvent être particulièrement utiles pour les utilisateurs ayant des troubles de la mobilité qui peuvent avoir du mal à utiliser une souris. De même, les liens «sauter vers le contenu» peuvent aider les utilisateurs avec les lecteurs d'écran contourner les menus de navigation et d'autres contenus répétitifs.

Les clés de navigation supplémentaires peuvent-elles améliorer le référence SEO, ils peuvent indirectement contribuer à l'amélioration des classements des moteurs de recherche en améliorant l'expérience utilisateur. Les moteurs de recherche comme Google considèrent les mesures d'engagement des utilisateurs, telles que le taux de rebond et le temps passé sur le site, lors du classement des sites Web. En améliorant l'expérience utilisateur, les clés de navigation supplémentaires peuvent aider à améliorer ces mesures, ce qui conduit potentiellement à des classements de moteur de recherche plus élevés.

Y a-t-il des inconvénients pour utiliser des clés de navigation supplémentaires?

Bien que les clés de navigation supplémentaires puissent Améliorez considérablement l'expérience utilisateur, ils doivent être mis en œuvre attentivement pour éviter les utilisateurs déroutants ou écrasants. Trop d'options de navigation peuvent rendre un site Web encombré et difficile à naviguer, potentiellement nuire à l'expérience utilisateur.

Comment puis-je tester l'efficacité de mes clés de navigation supplémentaires?

Vous pouvez utiliser diverses méthodes de test des utilisateurs pour évaluer l'efficacité de vos clés de navigation supplémentaires. Cela pourrait inclure des tests d'utilisation, où vous observez les utilisateurs interagissant avec votre site Web ou les tests A / B, où vous comparez différentes versions de votre site Web pour voir ce qui fonctionne mieux.

Quel est le rôle des clés de navigation supplémentaires dans La convivialité mobile?

Les clés de navigation supplémentaires peuvent être particulièrement bénéfiques pour la convivialité mobile. Sur les écrans plus petits, la navigation peut être plus difficile et les clés de navigation supplémentaires peuvent aider les utilisateurs à naviguer plus facilement sur votre site. Cependant, il est important de s'assurer que ces clés sont conçues et implémentées d'une manière qui fonctionne bien sur les appareils mobiles.

Comment puis-je rendre mes clés de navigation supplémentaires plus intuitives?

pour rendre votre supplément Clés de navigation plus intuitives, considérez les attentes et les habitudes de vos utilisateurs. Utilisez des symboles et des stages familiers pour vos clés et assurez-vous qu'ils sont clairement étiquetés. Les tests d'utilisateurs peuvent également être un outil précieux pour comprendre comment les utilisateurs interagissent avec vos clés de navigation et effectuent les ajustements nécessaires.

Les clés de navigation supplémentaires peuvent-elles aider les conversions de sites Web?

Oui, en améliorant l'expérience utilisateur Et pour rendre votre site Web plus facile à naviguer, des clés de navigation supplémentaires peuvent potentiellement conduire à des taux de conversion plus élevés. Lorsque les utilisateurs peuvent trouver ce qu'ils recherchent plus facilement, ils sont plus susceptibles de terminer les actions souhaitées, comme faire un achat ou s'inscrire à une newsletter.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!