Meilleurs entrées de formulaire pour de meilleures expériences utilisateur mobiles

Un moyen facile et pratique d'améliorer les performances des applications mobiles: configurez toujours les champs d'entrée HTML avec les propriétés type , inputmode et autocomplete . Bien que ces trois attributs soient souvent discutés séparément, ils sont les plus importants dans l'expérience utilisateur mobile lorsque vous les considérez dans son ensemble.

Comme nous le savons tous, le remplissage des formulaires sur les appareils mobiles est long et lourd, mais en configurant correctement les champs d'entrée, nous pouvons nous assurer que le processus d'entrée de données est aussi fluide que possible pour l'utilisateur. Examinons quelques exemples et meilleures pratiques pour créer une meilleure expérience utilisateur mobile.

Utilisez le type d'entrée correct

C'est la chose la plus simple à bien faire. Les types d'entrée tels que email , tel et url sont bien pris en charge dans divers navigateurs. Bien que les avantages de l'utilisation du type tel sur un navigateur de bureau plutôt que le type text plus général puissent être difficiles à détecter, il est clair en un coup d'œil sur les appareils mobiles.

Le choix du bon type modifie le clavier qui apparaît lorsque l'utilisateur se concentre sur les champs sur les appareils Android et iOS. Avec très peu d'effort, nous pouvons afficher un clavier personnalisé pour le courrier électronique, le numéro de téléphone, l'URL et même les entrées de recherche avec le bon type.

Il convient de noter que les deux input type="email" et input type="url" ont des fonctions de vérification. Lorsqu'un utilisateur soumet un formulaire, les navigateurs modernes affichent un message d'erreur lorsque sa valeur ne correspond pas au format attendu. Si vous souhaitez désactiver cette fonctionnalité, ajoutez simplement la propriété novalidate au formulaire inclus.

Une brève introduction à la date

L'entrée HTML comprend non seulement une entrée de texte spéciale, mais également des boutons radio, des cases à cocher, etc. Cependant, aux fins de cet article, je discute principalement des entrées plus basées sur le texte .

Il existe un type d'entrée qui réside dans l'espace critique entre plus de texte de texte libre et des widgets d'entrée comme les boutons radio: date . Il existe de nombreuses variations du type d'entrée de date et sont bien pris en charge sur les appareils mobiles, y compris date , time , datetime-local et month . Lorsqu'ils sont concentrés, ces widgets personnalisés apparaissent dans iOS et Android. Au lieu de déclencher un clavier dédié, ils montrent une interface de type sélection dans iOS, montrant différents types de widgets sur Android (où les sélecteurs de date et de temps sont particulièrement lisses).

J'étais excité au début de pouvoir utiliser des paramètres par défaut natifs sur mon appareil mobile jusqu'à ce que je regarde autour de moi et que je réalise que la plupart des principales applications et sites mobiles utilisent des cueilleurs de date personnalisés au lieu des types d'entrée de date natifs. Il peut y avoir plusieurs raisons à cela. Tout d'abord, j'ai constaté que le sélecteur de dattes iOS natif n'est pas aussi intuitif que le widget de type calendrier. Deuxièmement, même les implémentations Android magnifiquement conçues sont assez limitées par rapport aux composants personnalisés - par exemple, il n'y a pas de moyen facile de saisir une plage de dates au lieu d'une seule date.

Néanmoins, si le sélecteur de date personnalisé que vous utilisez ne fonctionne pas bien sur votre appareil mobile, le type d'entrée de date vaut la peine d'essayer. Si vous souhaitez essayer des widgets d'entrée natifs sur iOS et Android, tout en vous assurant que les utilisateurs de bureau voient des widgets personnalisés au lieu du menu déroulant par défaut, ce code CSS peut masquer le menu déroulant Calendar du navigateur de bureau qui l'implémente:

 :: - webkit-calendar-picker-indicator {
  Affichage: aucun;
}

Enfin, il est important de noter que le type de date ne peut pas être remplacé par inputmode dont nous allons discuter.

Pourquoi devrais-je me soucier de l'entrée?

inputmode vous permet de remplacer le clavier mobile spécifié par le type d'entrée et de déclarer directement le type de clavier affiché à l'utilisateur. Quand j'ai appris cette propriété pour la première fois, je n'ai pas été impressionné - pourquoi ne pas utiliser le bon type dès le début? Cependant, bien que inputmode soit généralement inutile, il peut être très utile à certains endroits. Le cas d'utilisation le plus important pour inputmode que j'ai trouvé est de créer de meilleures entrées numériques.

Bien que certains types d'entrée HTML5, tels que url et email , soient simples, input type="number" est différente. Il a quelques problèmes d'accessibilité et une interface utilisateur un peu maladroite. Par exemple, les navigateurs de bureau tels que Chrome affichent de petites flèches incrémentielles qui sont facilement déclenchées de façon inattendue lors du défilement.

C'est donc un modèle qui doit être rappelé et utilisé plus tard. Pour la plupart des entrées numériques, n'utilisez pas ceci:

<input type="number">

… Vous voulez réellement utiliser ceci:

<input type="text" inputmode="decimal">

Pourquoi ne pas utiliser inputmode="numeric" au lieu de inputmode="decimal" ?

Les valeurs d'attribut numeric et decimal produisent le même clavier sur Android. Sur iOS, cependant, numeric montre un clavier qui affiche à la fois les nombres et la ponctuation, tandis que decimal affiche une grille numérique ciblée qui est presque exactement la même que tel , sauf qu'il n'y a pas d'options liées au numéro de téléphone redondantes. C'est pourquoi c'est mon premier choix pour la plupart des types d'entrées numériques.

Christian Oliff a écrit un excellent article introduisant spécifiquement inputmode .

N'oubliez pas la saisie semi-automatique

Plus important que d'afficher le clavier mobile correct est d'afficher des suggestions de saisie semi-automatique utiles. Cela contribue grandement à créer une expérience utilisateur plus rapide et plus fluide sur les appareils mobiles.

Bien que les navigateurs aient des heuristiques pour afficher les champs de saisie semi-automatique, vous ne pouvez pas compter sur eux et vous devez toujours vous assurer d'ajouter le bon attribut autocomplete . Par exemple, dans iOS Safari, j'ai constaté que input type="tel" ne montrera que l'option Assommée semi-automatique que si j'ajoute explicitement autocomplete="tel" .

Vous pourriez penser que vous connaissez des options de base de base, telles que les options qui aident les utilisateurs à remplir les numéros de carte de crédit ou à l'adresse des champs de formulaire, mais je vous recommande de les vérifier pour vous assurer de comprendre toutes les options. La spécification répertorie plus de 50 valeurs! Saviez-vous autocomplete="one-time-code" peut rendre le processus utilisateur de vérification du téléphone très fluide?

À propos de la saisie semi-automatique…

Je voudrais mentionner un autre élément qui vous permet de créer votre propre fonction de saisie semi-automatique personnalisée: datalist . Bien qu'il crée une expérience de base de base - bien que un peu basique - sur le chrome et safari de bureau, il se démarque sur iOS en montrant des suggestions dans des lignes pratiques directement au-dessus du clavier, qui se trouve souvent à cet endroit. De plus, il permet à l'utilisateur de basculer entre le texte et l'entrée sélective.

D'un autre côté, sur Android, datalist crée un menu déroulant plus typique de la saisie semi-automatique, avec la zone au-dessus du clavier conservant les propres fonctionnalités dactylographiées du système. (Dans iOS, afin de visualiser le contenu autre que les trois premières correspondances, les utilisateurs doivent déclencher le sélecteur de sélection en appuyant sur l'icône de la flèche vers le bas.)

Vous pouvez utiliser cette démo pour essayer datalist :

Vous pouvez utiliser cet outil que j'ai fabriqué pour explorer toutes les options autocomplete ainsi que les valeurs inputtype et inputmode pour vous aider à prévisualiser rapidement diverses configurations d'entrée sur votre appareil mobile.

Résumer

Lorsque je construis des formulaires, j'ai souvent tendance à me concentrer sur la perfectionnement de l'expérience de bureau et à considérer les réseaux mobiles comme une réflexion après coup. Mais même si cela nécessite un travail supplémentaire pour s'assurer que le formulaire fonctionne bien sur les appareils mobiles, ce n'est pas nécessairement difficile. J'espère que cet article a montré qu'avec quelques étapes simples, vous pouvez rendre les formulaires sur votre appareil mobile plus pratiques pour les utilisateurs.

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!