Programmation
Référence consultable pour décrire boutons, menus, formulaires, recherche, clavier et états de retour.
47 résultats
Pointeur et tactile
Click
onClickUne action du pointeur où l'utilisateur appuie et relâche un bouton de souris sur un élément.
Utilisez click pour les actions telles que l'ouverture de menus, la soumission de boutons, la sélection d'éléments ou la navigation avec des liens.
Lorsqu'on clique sur le bouton du menu, ouvrez le panneau du menu.
Pointeur et tactile
Tap
touch / pointerUne action tactile où l'utilisateur touche et relâche un élément.
Appuyer doit généralement effectuer le même travail important que le clic sur les téléphones et les tablettes.
Le comportement basé uniquement sur le survol est peu fiable sur les appareils tactiles.
Faites en sorte que le menu de catégorie s'ouvre en appuyant plutôt qu'en survolant sur les appareils mobiles.
Pointeur et tactile
Hover
:hoverL'état lorsque le pointeur de la souris se trouve au-dessus d'un élément.
Le survol peut prévisualiser l'effet visuel avec des modifications de couleur, de soulignement, d'arrière-plan ou d'ombre.
Ne faites pas dépendre les actions essentielles uniquement du survol.
Modifiez l'arrière-plan de l'élément de menu lorsqu'il est survolé.
Pointeur et tactile
Long press
touch holdUne action tactile où l'utilisateur maintient un doigt sur un élément pendant un moment plus long.
L'appui long est souvent utilisé pour les actions secondaires, mais il est moins facile à découvrir qu'un bouton visible.
Évitez la pression prolongée comme seule méthode d'accès aux fonctionnalités importantes.
Ne masquez pas les actions essentielles de copie derrière une simple pression longue.
Pointeur et tactile
Drag
pointerdown + pointermoveUne action du pointeur où l'utilisateur maintient et déplace un élément ou une sélection.
Les interactions de glisser nécessitent des poignées claires, des limites et des contrôles de secours lorsque la précision est importante.
Ajouter une poignée visible si un panneau peut être glissé.
Pointeur et tactile
Swipe
touch moveUn geste tactile où l'utilisateur déplace rapidement un doigt sur l'écran.
Le glissement peut déplacer les carrousels ou les panneaux, mais des contrôles visibles doivent toujours être présents.
Autoriser le glissement entre les exemples, mais conserver les boutons fléchés visibles.
Clavier
Keyboard event
keydown / keyupUne interaction causée par la pression ou le relâchement d'une touche du clavier.
Les événements clavier sont utilisés pour la fermeture avec la touche Échap, la soumission avec la touche Entrée, la navigation avec les touches fléchées et les raccourcis.
Fermer la fenêtre contextuelle lorsque la touche Échap est pressée.
Clavier
Escape key
EscapeUne touche du clavier couramment utilisée pour annuler, fermer ou quitter une interface utilisateur UI temporaire.
Les listes déroulantes, les menus, les modales et les info-bulles doivent généralement se fermer avec la touche Échap.
Faites en sorte que le menu déroulant de la langue et le menu du site se ferment en appuyant sur la touche Échap.
Clavier
Enter key
EnterUne touche du clavier souvent utilisée pour activer un contrôle mis en évidence ou soumettre un formulaire.
Un bouton mis en focus doit s'activer avec la touche Entrée. Les formulaires de recherche peuvent être soumis avec la touche Entrée.
Autoriser Enter à lancer la recherche lorsque le champ de recherche est sélectionné.
Clavier
Tab key
TabUne touche du clavier utilisée pour déplacer le focus à travers les contrôles interactifs.
L'ordre des onglets doit suivre l'ordre de lecture et d'interaction visible.
Conservez l'ordre des onglets logique dans les contrôles de l'en-tête.
États UI
Focus
:focus / :focus-visibleL'état dans lequel un élément est prêt pour la saisie au clavier ou l'activation.
Les éléments ayant le focus doivent avoir un contour visible ou un style de focus.
Rendez la zone de saisie de recherche mise en évidence clairement visible.
États UI
Blur
blur / focusoutLe changement d'état lorsqu'un élément perd le focus.
Le flou peut valider les entrées ou fermer une interface utilisateur UI légère, mais il ne doit pas surprendre les utilisateurs.
Ne supprimez pas le texte de recherche lorsque le champ perd le focus.
États UI
Active state
:activeUn état court pendant qu'un contrôle est enfoncé.
L'état actif peut afficher un effet de pression avec un léger arrière-plan, une bordure ou un changement de position.
Ajouter un état de pression subtil aux boutons d'icône.
États UI
Selected state
selected / aria-currentL'état d'un élément qui est actuellement sélectionné dans une liste, un menu, un groupe d'onglets ou un groupe de filtres.
Les éléments sélectionnés doivent être visuellement différents des éléments non sélectionnés.
Faites en sorte que la puce de catégorie active soit clairement différente des puces inactives.
États UI
Disabled state
disabled / aria-disabledUn état dans lequel un contrôle est visible mais ne peut pas être utilisé.
Les éléments désactivés doivent paraître inactifs, mais rester compréhensibles.
Désactiver le bouton de soumission jusqu'à ce que les champs obligatoires soient valides.
États UI
Checked state
checkedL'état "on" ou sélectionné d'une case à cocher, d'un bouton radio ou d'un élément de commande de type interrupteur.
L'état vérifié doit être clairement visible et annoncé par les règles de contrôle.
Afficher un état de sélection clair pour les options sélectionnées.
Ouverture et fermeture
Toggle
toggle stateUne action qui bascule entre deux états, tels que ouvert et fermé ou allumé et éteint.
Un interrupteur doit afficher son état actuel et mettre à jour cet état de manière prévisible.
Utilisez un seul bouton pour ouvrir et fermer chaque catégorie de menu.
Ouverture et fermeture
Open / close
open / closedUn état de visibilité dans lequel un panneau, un menu ou une section est affiché ou masqué.
Les états d'ouverture et de fermeture doivent être contrôlés de manière cohérente par des boutons, un clic en dehors, la touche Échap ou une sélection.
Fermer le menu du site lorsque le menu déroulant de la langue s'ouvre.
Ouverture et fermeture
Dropdown
button -> panelUne liste flottante qui apparaît à partir d'un bouton ou d'un champ.
Les listes déroulantes se ferment généralement après la sélection, un clic en dehors ou la touche Échap.
Lorsqu'une langue est sélectionnée, fermez le menu déroulant.
Ouverture et fermeture
Accordion
section toggleUn modèle d'interface utilisateur UI où les en-têtes de section ouvrent ou ferment leur contenu.
Les accordéons doivent indiquer clairement quelles sections sont ouvertes.
Conservez toutes les catégories d'accordéon fermées par défaut.
Ouverture et fermeture
Modal
open dialogUn panneau superposé mis en focus qui apparaît au-dessus de la page et bloque généralement le contenu de fond.
Les fenêtres modales nécessitent des contrôles de fermeture, un comportement d'échappement, une gestion du focus et un objectif clair.
Ajouter un bouton de fermeture et un comportement de fermeture par la touche "Échap" à la fenêtre modale.
Ouverture et fermeture
Outside click
document pointerdownUn clic ou un tap en dehors d'un panneau temporaire tel qu'un menu déroulant, un menu ou une fenêtre contextuelle.
Les panneaux temporaires se ferment généralement lorsque l'utilisateur clique en dehors de ceux-ci.
Les contrôles appartenant au même groupe d'en-tête ne peuvent pas être considérés comme externes, sauf si la logique est écrite de cette manière.
Fermer le menu lorsque l'utilisateur clique en dehors du panneau du menu.
Ouverture et fermeture
Focus trap
modal openUn comportement qui maintient le focus du clavier à l'intérieur d'une fenêtre modale ou d'une boîte de dialogue tant qu'elle est ouverte.
Le piège de focus empêche les utilisateurs du clavier de se déplacer accidentellement en dehors d'une fenêtre modale active.
Empêcher le focus de sortir de la fenêtre modale tant qu'elle n'est pas fermée.
Navigation
Link navigation
link clickDéplace vers une autre page, route ou section via un lien.
Les liens doivent utiliser les destinations correctes et fermer les menus temporaires après la navigation.
Fermer le menu après qu'un lien de menu a été cliqué.
Navigation
Route change
router navigationUn changement d'une route d'application ou d'un chemin d'URL à un autre.
Les modifications de cheminement doivent mettre à jour le contenu de la page, les métadonnées et l'état de navigation actif.
Mettre à jour l'état de navigation actif après les modifications de route.
Navigation
Scroll
wheel / touch scrollDéplacer la zone d'affichage visible à travers du contenu qui est plus grand que l'écran.
Le défilement peut se produire sur la page ou à l'intérieur d'un panneau avec son propre débordement.
Rendez les menus déroulants longs qui défilent dans le panneau au lieu de s'étendre hors de l'écran.
Navigation
Anchor scroll
href=#idUn comportement de lien qui fait défiler vers un élément avec un identifiant correspondant sur la même page.
Les liens d'ancrage sont utiles pour accéder à des outils, des références ou des sections.
Faites en sorte que le bouton Parcourir fasse défiler la section des outils.
Saisie et formulaires
Type
input eventSaisie de texte ou de valeurs dans un champ de saisie ou une zone de texte.
La saisie peut mettre à jour l'état immédiatement, valider l'entrée ou attendre la soumission.
Mettre à jour les résultats de la recherche au fur et à mesure que l'utilisateur tape.
Saisie et formulaires
Submit
submit eventEnvoi ou application de l'entrée de formulaire.
Le bouton "Soumettre" doit valider les champs obligatoires, empêcher les rechargements accidentels si nécessaire, et afficher des commentaires.
Empêchez le formulaire de recharger la page lorsqu'il est soumis.
Saisie et formulaires
Reset
reset actionRétablir l'état par défaut des contrôles ou des valeurs.
La réinitialisation doit être prévisible et éviter de supprimer des travaux importants sans avertissement.
Ajouter un bouton de réinitialisation qui efface la recherche et renvoie à toutes les catégories.
Saisie et formulaires
Validation
input / submitVérification de la complétude et de la validité des entrées utilisateur.
La validation doit expliquer ce qui ne va pas et comment le corriger.
Afficher un message de validation lorsque la valeur d'entrée n'est pas valide.
Recherche et filtrage
Search
query changeRecherche d'éléments correspondants en fonction du texte saisi par l'utilisateur.
Rechercher les champs utiles tels que les noms, les alias, les descriptions et les exemples.
Faites en sorte que la recherche corresponde aux mots coréens, aux termes anglais, aux alias et aux exemples de requêtes.
Recherche et filtrage
Filter
filter stateRéduire une liste aux éléments qui correspondent à une condition sélectionnée.
Les filtres doivent indiquer quelle condition est active et afficher le nombre d'éléments restants lorsque cela est utile.
Ajouter des filtres de catégorie au-dessus des cartes des termes d'interaction UI.
Recherche et filtrage
Sort
sort optionModifier l'ordre des éléments selon une règle telle que le nom, la date, la priorité ou la catégorie.
Le tri ne doit pas supprimer les éléments ; il ne modifie que leur ordre.
Trier les termes correspondants par ordre alphabétique après le filtrage.
Recherche et filtrage
Debounce
delayed inputAttendre brièvement après que l'utilisateur ait arrêté de taper avant d'exécuter une action coûteuse.
L'anti-rebond empêche les recherches, les validations ou les appels d'API de s'exécuter à chaque pression sur une touche.
Activez l'anti-rebond pour la zone de saisie de recherche si elle devient lente avec de nombreux éléments.
Recherche et filtrage
Clear
clear actionSuppression d'une valeur saisie, d'un filtre sélectionné ou d'un état temporaire.
Les actions d'effacement doivent affecter uniquement le champ ou l'état prévu.
Ajouter un bouton "Effacer" dans le champ de recherche.
Retour utilisateur
Loading
pending stateUn état temporaire pendant que les données, le contenu de la page ou une action sont toujours en cours de préparation.
Le message de chargement indique aux utilisateurs que l'application fonctionne et empêche les actions répétées si nécessaire.
Afficher un état de chargement pendant que le résultat de la conversion est en cours de préparation.
Retour utilisateur
Spinner
loading visualUn indicateur visuel qui signale qu'un chargement ou un traitement est en cours.
Les indicateurs de progression fonctionnent mieux pour les courtes attentes ; les attentes plus longues peuvent nécessiter une progression ou un texte plus clairs.
Afficher un petit indicateur de chargement à l'intérieur du bouton lors de la soumission.
Retour utilisateur
Toast
temporary messageUn court message temporaire qui apparaît après une action.
Les notifications sont utiles pour les confirmations telles que "copié", "enregistré" ou "mis à jour".
Afficher une notification après avoir copié le texte dans le presse-papiers.
Retour utilisateur
Error state
errorUn état qui indique à l'utilisateur qu'une erreur s'est produite.
Les messages d'erreur doivent être spécifiques, lisibles et expliquer la prochaine action utile.
Afficher un message d'erreur clair lorsque l'entrée ne peut pas être convertie.
Retour utilisateur
Success state
successUn état qui confirme qu'une action a été effectuée avec succès.
Les états de succès peuvent être subtils lorsque le résultat est déjà visible.
Afficher un petit message de succès après l'enregistrement des paramètres.
Retour utilisateur
Empty state
empty resultUn état affiché lorsqu'il n'y a pas de données ou de résultat correspondant.
Les états vides doivent expliquer pourquoi rien n'est affiché et suggérer une étape suivante.
Afficher un message "aucun résultat" lorsque la recherche ne renvoie aucun terme correspondant.
Retour utilisateur
Copy to clipboard
navigator.clipboardUne action qui place du texte dans le presse-papiers de l'utilisateur.
Les actions de copie doivent fournir un retour d'information afin que les utilisateurs sachent que le texte a été copié.
Copier la propriété CSS lorsque la puce de propriété est cliquée.
Mouvement et timing
Transition
CSS transitionUn changement progressif entre deux états visuels, tels que la couleur, l'opacité ou la position.
Les transitions peuvent donner une impression de professionnalisme à l'UI, mais doivent rester rapides pour les outils.
Ajouter une courte transition pour les couleurs de survol des éléments du menu.
Mouvement et timing
Animation
CSS animationUne séquence de mouvement visuelle qui peut s'exécuter une seule fois ou de manière répétée.
L'animation doit soutenir la tâche, et non distraire de la lecture ou du travail répétitif.
Utilisez une animation de glissement vers le bas subtile lorsque le menu déroulant s'ouvre.
Mouvement et timing
Delay
setTimeout / delayUn délai avant qu'il ne se passe ou disparaisse quelque chose.
Les délais peuvent rendre le retour d'information lisible, mais les délais longs peuvent donner l'impression que l'interface utilisateur UI est lente.
Maintenez le message de notification affiché pendant environ une seconde.
Mouvement et timing
Throttle
limited repeated eventsLimiter la fréquence à laquelle un gestionnaire d'événements répété peut s'exécuter.
La fonction "throttle" est utile pour les gestionnaires de défilement ou de redimensionnement qui s'exécutent de nombreuses fois.
Utilisez la fonction "throttle" pour le gestionnaire de défilement si la page devient lente.