UX et HTML5 : aidons les utilisateurs à remplir votre formulaire mobile (partie 2)

Dans cette deuxième partie, je souhaite me concentrer davantage sur les capacités spécifiques aux mobiles. HTML5, par exemple, nous a apporté de nombreuses fonctionnalités vraiment intéressantes pour aider les utilisateurs à remplir des formulaires mobiles et à formater leurs données. Nous verrons en détail comment les attributs HTML5 peuvent vous y aider . Ensuite, nous irons au-delà des éléments de formulaire "classiques" et verrons comment utiliser les fonctionnalités mobiles telles que l'appareil photo, la géolocalisation et les scanners d'empreintes digitales pour vraiment faire passer votre expérience de formulaire mobile au niveau supérieur sur les sites Web et dans les applications natives.

Aider l'utilisateur à formater le contenu avec HTML5

Dans la première partie de cette série, nous avons vu quelques conseils généraux sur la façon d'afficher les champs. Il est maintenant temps d'aller un peu plus loin et de voir comment quelques lignes de code HTML5 bien conçues peuvent améliorer vos formulaires mobiles.

Bonté HTML5 optimisée pour les mobiles

HTML5 ouvre tout un monde de possibilités pour optimiser les formulaires pour les appareils mobiles et tactiles. De nombreux nouveaux types de saisie intéressants peuvent déclencher différents claviers pour aider les utilisateurs. Nous pouvons également faire des choses intéressantes en capturant des médias directement dans le navigateur.

Saisie de données numériques

input type= number

L'attribut HTML5 <input type=number> restreint un champ de saisie aux nombres. Il dispose d'un système de validation intégré qui rejette tout ce qui n'est pas un nombre.

Dans certains navigateurs de bureau, cette entrée est présentée avec de petites flèches à droite sur lesquelles l'utilisateur peut cliquer pour incrémenter le nombre. Sur mobile, il ouvre un clavier avec des chiffres , ce qui réduit les fautes de frappe et les erreurs de validation de formulaire. L'apparence de l'entrée dépend du système d'exploitation.

L'entrée doit autoriser les décimales et les nombres négatifs (mais peu de claviers respectent cela). Comme expliqué dans les spécifications du W3C, "un moyen simple de déterminer s'il faut utiliser type = nombre est de déterminer s'il serait logique que le contrôle d'entrée ait une interface spinbox (par exemple avec des flèches 'haut' et 'bas')". Cela signifie que l'entrée n'est pas censée être utilisée pour les cartes de crédit ou les indicatifs régionaux.

Les attributs pattern et inputmode

Pour ajouter des restrictions à vos entrées numériques, vous pouvez utiliser l'attribut pattern pour spécifier une expression régulière par rapport à laquelle vous souhaitez contrôler les valeurs.

Voici à quoi cela ressemble :

 <input type="number" name="quantity" pattern="[0-9]*" inputmode="numeric" />

Vous pouvez utiliser ce modèle pour afficher le clavier numérique à gros boutons sur l'iPhone (mais pas sur l'iPad). Ce clavier n'a pas de signe moins ni de virgule, de sorte que les utilisateurs perdent la possibilité d'utiliser des nombres négatifs et des décimales. De plus, ils ne peuvent pas revenir à un autre clavier ici, alors soyez prudent lorsque vous l'utilisez.

Notez également que les modèles peuvent être appliqués à tout autre type d'entrées.

Utiliser uniquement ce modèle ne fonctionnera pas sur la plupart des téléphones Android. Vous aurez toujours besoin d'une combinaison de input type=number et de l'attribut pour que cela fonctionne.

inputmode

Si vous souhaitez uniquement déclencher le clavier numérique mobile mais que vous ne souhaitez pas gérer le désordre type=number et pattern , vous pouvez utiliser une saisie de texte et appliquer l'attribut inputmode=numeric . Cela ressemblerait à ceci :

 <input type="text" name="quantity" inputmode="numeric" />

Malheureusement (au moment de la rédaction), seul Chrome 67 mobile le prend en charge, mais il devrait arriver dans Chrome desktop 66 sans indicateur.

Pour en savoir plus sur la façon de saisir des nombres dans un formulaire, lisez « Je voulais saisir un nombre ».

input type=tel

Si vous souhaitez que les utilisateurs saisissent un numéro de téléphone, vous pouvez utiliser l'entrée type=tel. Comme vous pouvez le voir dans la capture d'écran ci-dessous, il déclenche les mêmes chiffres sur le clavier d'iOS que l'attribut de motif décrit ci-dessus. En raison de la complexité des numéros de téléphone dans le monde, il n'y a pas de validation automatique avec ce type d'entrée.

Saisie des dates

Même s'il s'agit techniquement de données numériques, les dates méritent leur propre section. Il existe quelques types d'entrée HTML5 pour la saisie de dates. Le plus utilisé est input type=date . Cela déclenchera un sélecteur de date dans les navigateurs pris en charge. L'apparence du sélecteur de date dépend du navigateur et du système d'exploitation. Pour en savoir plus sur la façon dont les navigateurs rendent input type="date" , je vous recommande de lire « Making input type=date compliqué ».

Il y a aussi type=week pour choisir une semaine, type=time pour entrer une heure (jusqu'à l'heure et la minute) et type=datetime-local pour choisir une date et une heure (en utilisant l'heure locale de l'utilisateur). Tant de choix!

input type=date fonctionne bien pour les interfaces de réservation, par exemple. Cependant, vous pourriez avoir des besoins qui vous obligent à créer votre propre sélecteur de date (comme nous l'avons déjà vu dans la section sur les valeurs par défaut sensibles). Mais input type=date est toujours une option intéressante si vous avez besoin d'un sélecteur de date et que vous ne souhaitez pas intégrer une bibliothèque JavaScript complète sur le site Web pour le travail.

Pourtant, il est parfois préférable de ne pas utiliser type=date pour les dates. Prenons l'exemple d'une date de naissance. Si j'étais né en 1960 (ce n'est pas le cas — c'est juste un exemple), il me faudrait plusieurs pressions pour choisir ma date de naissance si je commençais à partir de 2018. Sur Android, j'ai découvert récemment que si j'appuyais sur l'année dans le sélecteur, j'obtiens une sorte de roue déroulante avec toutes les années. Un peu mieux, mais cela nécessite toujours une bonne quantité de défilement.

Un utilisateur m'a dit sur Twitter :

"Je suis né en 1977 et je peux confirmer l'agacement. Plus il faut de temps pour défiler, plus on se sent vieux :-("

Alors, peut-être que les dates de naissance ne sont pas le meilleur candidat pour les sélecteurs de date.

URL, e-mail, tél et recherche

Les téléphones portables cachent d'autres qualités d'optimisation du clavier et de la saisie qui améliorent l'expérience de l'utilisateur lorsqu'il remplit un formulaire. Le diable est dans les détails, comme on dit.

L'utilisation du champ input type=url fera apparaître un clavier optimisé sur mobile, avec / (la touche slash) directement accessible. Selon le système d'exploitation, vous pouvez également donner un accès rapide aux domaines de premier niveau communs, comme le .fr dans la capture d'écran ci-dessous. Si vous appuyez longuement sur ce bouton, des raccourcis vers d'autres domaines de premier niveau apparaîtront. Cela s'accompagne également d'une validation automatique du navigateur qui vérifie que le format de l'URL est valide.

Le champ d'entrée type=email fait apparaître un clavier optimisé pour les e-mails donnant un accès rapide au symbole @ . Cette entrée nécessite la présence de @ quelque part dans le champ pour être valide. C'est la seule vérification qu'il fait.

Le champ input type=search affiche un clavier optimisé pour la recherche. L'utilisateur peut directement lancer la recherche à partir d'un bouton du clavier. Il y a aussi une petite croix pour vider le champ et taper une nouvelle requête.

Gamme et couleur

Les deux derniers types d'entrée que nous avons examinés ne sont pas particulièrement optimisés pour les mobiles, mais en les utilisant, nous pouvons éviter d'avoir à charger de lourdes bibliothèques JavaScript personnalisées, ce qui est une bonne idée pour les utilisateurs mobiles.

input type=range fournit un curseur d'interface utilisateur visuel pour saisir un nombre. L'interface utilisateur de ce contrôle dépend du navigateur.

input type=color permet à l'utilisateur d'entrer facilement une valeur de couleur. Dans de nombreuses implémentations de navigateur, cela vient avec un sélecteur de couleurs.

Capture multimédia HTML : prise et téléchargement d'images et enregistrement de son

Je me souviens de l'époque de l'iPhone 3, quand Apple n'autorisait même pas l'utilisation d'un simple input type=file sur un site Web, pour des raisons de sécurité. Ces temps sont révolus depuis longtemps. Avec l'API de capture multimédia HTML, il est désormais possible d'accéder à différents capteurs d'un appareil. Nous pouvons capturer des photos et des vidéos, et nous pouvons même enregistrer la voix directement dans le navigateur.

L'attribut accept vous permet de spécifier le type de média à accepter en entrée : audio, image, vidéo. L'utilisateur peut donner au navigateur un accès direct à sa caméra, par exemple.

Le code ressemble à ceci :

 <input type="file" accept="image/*">

L'attribut capture vous permet de spécifier le mode de capture préféré. Si vous ajoutez l'attribut de capture au-dessus de l'attribut d' accept , vous pouvez faire en sorte que le navigateur ouvre directement la caméra ou l'enregistreur vocal.

 <input type="file" accept="image/*" capture> // opens the camera>

 <input type="file" accept="video/*" capture> // opens the camera in video mode

 <input type="file" accept="audio/*" capture> // opens the voice recorder 

Pour plus de détails sur la façon d'utiliser les médias directement dans le navigateur, lisez la section "Accéder et gérer les images, la vidéo et l'audio directement dans le navigateur" dans mon article sur les pouvoirs secrets des navigateurs mobiles.

Automatiques HTML5 : correction automatique, saisie semi-automatique, remplissage automatique, mise en majuscule automatique et mise au point automatique

HTML5 est livré avec une multitude d'attributs automatiques. Pour améliorer l'expérience mobile, vous voudrez être intelligent sur ce qui peut être automatisé et ce qui ne le peut pas. Voici quelques règles générales :

• Désactivez la correction automatique sur les éléments pour lesquels le dictionnaire est faible : adresses e-mail, numéros, noms, adresses, villes, régions, indicatifs régionaux, numéros de carte de crédit.
• Désactivez la mise en majuscule automatique pour les champs d'e-mail et d'autres champs, le cas échéant (par exemple, les URL de sites Web). Notez que type=email fait le travail pour vous dans les versions récentes d'iOS et d'Android, mais désactivez-le quand même pour les anciennes versions ou si type=email n'est pas pris en charge.
• Vous pouvez définir l'attribut autocapitalize sur des words pour mettre automatiquement en majuscule la première lettre de chaque mot saisi par l'utilisateur. Cela peut être utile pour les noms, les lieux et autres, mais, encore une fois, soyez prudent avec cela et testez-le.

• Pour input type=tel , définissez autocomplete="tel" .
• Vous pouvez utiliser l' autofocus pour donner le focus à un élément de contrôle lorsque l'utilisateur charge la page. Mais ce n'est pas parce que l'utilisateur ouvre la page "contact" qu'il est prêt à passer directement au premier champ de votre formulaire. Alors, encore une fois, utilisez-le à bon escient.

Si vous voulez plus d'options de saisie semi-automatique, une liste complète se trouve sur le WhatWG Wiki. Assurez-vous simplement d'utiliser les bons. Implémentez, testez et testez à nouveau.

Validation de formulaire HTML5

Je n'entrerai pas dans les détails techniques ici, mais vous devez savoir que HTML5 a une API de validation de formulaire intégrée pour de nombreux champs. C'est bien si vous ne voulez pas utiliser une bibliothèque JavaScript pour afficher les messages de validation en ligne. Voici les principales choses que vous devez savoir en tant que concepteur UX sur la validation de formulaire HTML5 :

• Le message de validation est un contrôle du navigateur. Vous ne pouvez pas le styler en CSS, et c'est différent pour chaque navigateur.
• Vous pouvez modifier le texte du message en JavaScript à l'aide setCustomValidity .
• CSS3 fournit :invalid, :valid et :required et d'autres pseudo-classes pour la validation des formulaires HTML. Celles-ci se déclenchent sur le flou, elles sont donc pratiquement inutiles pour le moment.

Dans « Native Form Validation, Part 1 », Peter-Paul Koch explique en détail pourquoi la validation des formulaires HTML et CSS n'améliore pas vraiment les formulaires pour le moment.

Assistance hors ligne pour enregistrer les données utilisateur

Beaucoup de choses peuvent mal tourner, surtout sur mobile. Des erreurs se produisent. Un utilisateur pourrait appuyer par erreur sur le bouton de retour du navigateur et perdre toutes ses données.

Si l'utilisateur revient sur la page, ce serait bien d'afficher à nouveau ses données . Il en va de même si le navigateur plante ou si l'utilisateur ferme l'onglet. Vous pouvez stocker les données de l'utilisateur dans un stockage local ou de session pour vous assurer que rien ne se perd en cas de problème. Geoffrey Crofte a écrit une bibliothèque JavaScript pour vous aider.

Si la connexion est perdue lorsque l'utilisateur soumet le formulaire, il peut également perdre les données. Pour éviter cela, vous pouvez utiliser une combinaison de l'** API hors ligne HTML5** et de l' API Service Workers pour :

• stocker les données dans le cache,
• essayez de le renvoyer automatiquement lorsque la connexion revient.

Pour savoir comment coder cela, consultez l'article sur les "formulaires hors ligne".

Les capacités des appareils mobiles peuvent faire passer l'expérience au niveau supérieur

Dans la partie 1, nous nous sommes tenus aux éléments et attributs de formulaire HTML communs de base pour améliorer les formulaires mobiles. Mais les capacités des appareils mobiles vont désormais bien au-delà de l'affichage de pages Web HTML, CSS et JavaScript. Ces petits appareils sont équipés de nombreux capteurs . Et nous pourrons en utiliser beaucoup dans les applications natives et sur le Web pour faciliter la vie de nos utilisateurs.

Détection de l'emplacement de l'utilisateur

Dans la section précédente, j'ai écrit sur les informations de pré-remplissage pour les lieux et les adresses. C'est un bon début. Nous pouvons aller plus loin. Au lieu de demander aux utilisateurs de saisir un emplacement, nous pouvons le détecter . Découvrez l'API de géolocalisation pour le Web. Il existe également des API de géolocalisation natives iOS, Android et Windows Phone.

Citymapper est un site Web et une application qui aident les utilisateurs à planifier leurs déplacements. Lorsque l'utilisateur entre dans le premier champ, il voit l'option "Utiliser l'emplacement actuel". S'il la sélectionne, il lui est demandé d'autoriser le navigateur à accéder à ses données de géolocalisation. C'est l'API de géolocalisation. Le navigateur complète alors automatiquement l'emplacement qu'il a trouvé et l'utilisateur peut passer au champ de destination. L'application native fonctionne à peu près de la même manière.

Soyez intelligent lorsque vous demandez la permission de l'utilisateur

Vous avez peut-être remarqué dans la vidéo précédente que j'ai dû accepter de donner accès à ma position au site Citymapper. Dans le navigateur, l'utilisateur gère les autorisations site par site, API par API.

Vous devez également faire attention à la façon dont vous demandez la permission . L'utilisateur peut refuser l'accès à la géolocalisation, à la notification ou à une autre API si vous le demandez trop tôt. Ils peuvent également refuser s'ils ne comprennent pas pourquoi vous avez besoin de la permission. Vous obtenez une chance; utilisez-le à bon escient . Après cela, il sera presque impossible de récupérer. Je suis un utilisateur expérimenté d'Android et je dois même rechercher les options de mon navigateur lorsque je souhaite réinitialiser les autorisations que j'ai accordées à un site Web. Imaginez les problèmes que vos utilisateurs auront.

Voici quelques conseils généraux sur la demande d'autorisations sur le Web :

• Ne soyez pas le harceleur effrayant de la géolocalisation ou des notifications : ne demandez pas la permission dès que l'utilisateur arrive sur votre site Web . Ils ne vous connaissent peut-être pas encore, ni votre service.
• Laissez l'utilisateur découvrir votre site Web et votre service. Ensuite, demandez la permission dans context . Si vous souhaitez accéder à leur emplacement, ne leur demandez que lorsque vous en avez besoin (Citymapper en est un bon exemple).
• Expliquez pourquoi vous avez besoin d'une autorisation et ce que vous en ferez .

Si vous voulez aller plus loin, Luke Wroblewski (oui, encore lui) a créé une jolie vidéo pour vous aider dans le processus de demande d'autorisation.

Une meilleure expérience de paiement

Un grand domaine d'amélioration pour les formulaires est l'ensemble de l'expérience de paiement à la caisse. Là encore, les capteurs de l'appareil peuvent en faire une expérience presque indolore. La seule douleur sera le montant d'argent que l'utilisateur dépense.

Scanner de carte de crédit iOS

Dans la section précédente, j'ai écrit sur la détection automatique des cartes de crédit et les fonctionnalités d'auto-complétion basées sur l'entrée précédente de l'utilisateur. Cela signifie toujours que l'utilisateur doit saisir au moins une fois les données de sa carte de crédit.

Apple a fait passer cela au niveau supérieur avec son scanner de carte de crédit . Depuis iOS 8 dans Safari, les utilisateurs peuvent utiliser leur appareil photo pour numériser et compléter automatiquement les informations de leur carte de crédit. Pour effectuer cette magie, vous devrez ajouter l'attribut cc-number copie automatique et un nom pour l'identifier comme un champ de carte de crédit. Apple n'a pas beaucoup d'informations officielles à ce sujet, mais certaines personnes ont fait des tests et mis les résultats sur StackOverflow.

Safari propose également des options de remplissage automatique que les utilisateurs peuvent utiliser pour ajouter leur carte de crédit, ce qui leur permet de la réutiliser sur plusieurs sites Web.

Allez plus loin dans le paiement avec l'API Google Pay

Google a lancé quelque chose de similaire : l'API Google Pay. Lorsqu'elle est mise en œuvre sur un site Web, l'API élimine le besoin de saisir manuellement les informations de paiement . Cela va encore plus loin : il peut également stocker les adresses de facturation et de livraison.

L'utilisateur obtient une boîte de dialogue dans Chrome qui affiche les diverses informations de paiement qu'il a stockées. Ils peuvent choisir lequel utiliser et payer directement via la boîte de dialogue .

Une version standardisée de l'API de demande de paiement est actuellement une recommandation candidate du W3C. Si cela est implémenté dans les navigateurs, cela permettrait aux utilisateurs de payer avec un seul bouton, qui demanderait l'API. Chaque étape suivante serait gérée par les boîtes de dialogue natives du navigateur.

Simplifier l'authentification

Les téléphones mobiles sont, dans la plupart des cas, des appareils personnels que les gens ne partagent généralement pas avec d'autres. Cela ouvre des opportunités intéressantes pour l'authentification.

Lien magique

J'utilise un gestionnaire de mots de passe. Je ne connais pas 99% de mes mots de passe. Ils sont tous générés aléatoirement. Pour me connecter à un nouvel espace de travail Slack, je dois :

1. ouvrir mon gestionnaire de mots de passe,
2. entrer mon mot de passe maître,
3. rechercher l'espace de travail,
4. copiez et collez le mot de passe dans l'application Slack.

C'est un processus fastidieux, mais Slack était assez intelligent pour offrir une meilleure option.

De nombreux utilisateurs ont leur messagerie synchronisée sur leur téléphone. Slack l'a compris. Lorsque vous ajoutez un nouvel espace de travail Slack dans l'application, vous pouvez soit vous connecter à l'aide du mot de passe, soit demander l'option "lien magique". Si vous optez pour ce dernier, Slack envoie un lien magique vers votre boîte mail . Ouvrez le courrier, cliquez sur le gros bouton vert et — ta-da ! — vous êtes connecté.

En coulisses, ce lien magique contient un jeton d'authentification. L'application Slack détecte cela et vous authentifie sans avoir besoin du mot de passe.

Empreinte digitale pour une identification intelligente

Je fais presque toutes mes opérations bancaires sur mon appareil mobile. Et en ce qui concerne la connexion à mes comptes bancaires, il y a un monde de différence entre mon application bancaire Société Générale française et l'application allemande N26.

Avec Société Générale, j'ai une chaîne de connexion et une phrase de passe. Je peux demander à l'application de se souvenir de la chaîne de connexion, qui est de 10 chiffres aléatoires. Je ne peux pas me souvenir de celui-là ; J'utilise un gestionnaire de mots de passe pour cela. Je dois encore me souvenir et entrer la phrase secrète à six chiffres sur un clavier personnalisé. Bien sûr, la position des chiffres change à chaque fois que je me connecte. Sécurité — oui, je sais. De plus, je dois changer cette phrase de passe tous les trois mois. La dernière fois que j'ai été obligé de changer la phrase secrète, j'ai fait ce que la plupart des gens font : choisir presque la même phrase secrète, car je ne veux pas avoir à me souvenir d'un autre numéro à six chiffres. Et bien sûr, j'étais sacrément sûr que je m'en souviendrais, donc je ne l'ai pas entré dans mon gestionnaire de mots de passe. Erreur de débutant. Deux semaines plus tard, j'ai essayé de me connecter. Bien sûr, je l'ai oublié. J'ai fait trois tentatives infructueuses, puis mon compte a été bloqué. Heureusement, je n'utilise ce compte que pour faire des économies. Dans l'application, vous pouvez demander un nouveau mot de passe. Il a fallu près d'une semaine à la banque pour m'envoyer une nouvelle phrase secrète à six chiffres par courrier papier à mon domicile au Luxembourg. Ouais.

N26, d'autre part, utilise mon adresse e-mail comme chaîne de connexion. Je m'en souviens sans gestionnaire de mots de passe. Lorsque je veux me connecter, je mets mon doigt sur le bouton de démarrage de mon téléphone Xperia, et c'est tout. En arrière-plan, mon téléphone scanne mon empreinte digitale et m'authentifie. Si cela ne fonctionne pas, je peux me rabattre sur un mot de passe.

Même appareil, deux applications, deux expériences totalement différentes.

De plus en plus d'applications sur Android et iOS offrent désormais aux utilisateurs la possibilité de s'authentifier avec une empreinte digitale . Plus de mots de passe - c'est une solution intéressante et élégante.

Bien sûr, les gens ont exprimé des préoccupations en matière de sécurité à ce sujet. Pour le National Institute of Standards and Technology (NIST), la biométrie n'est pas considérée comme suffisamment sécurisée. Elle conseille de combiner la biométrie avec un deuxième facteur d'authentification.

Les capteurs d'empreintes digitales peuvent également être trompés - oui, comme dans les films d'espionnage. Avez-vous entendu parler de l'avion qui a été forcé d'atterrir parce qu'une femme a appris l'infidélité de son mari après avoir utilisé son pouce pour déverrouiller son téléphone pendant qu'il dormait ?

Reconnaissance faciale et identification faciale

En 2018, Apple a lancé l'iPhone X avec le tout nouveau Face ID. Les utilisateurs peuvent déverrouiller leur iPhone X en utilisant leur visage . Bien sûr, certains autres téléphones Android et tablettes et ordinateurs Windows avaient proposé cette fonctionnalité plus tôt. Mais quand Apple lance quelque chose, cela a tendance à devenir « une chose ». Pour le moment, cette technologie est principalement utilisée comme authentification pour déverrouiller les téléphones et l'ordinateur.

Il y a des défis assez importants avec la technologie de reconnaissance faciale. Premièrement, certains algorithmes peuvent être trompés par une photo de la personne, qui est facilement piratable. Une autre préoccupation plus importante est la diversité. Les algorithmes de reconnaissance faciale ont tendance à avoir du mal à reconnaître les personnes de couleur. Par exemple, une chercheuse noire a dû porter un masque blanc pour tester son propre projet. La chercheuse est Joy Buolamwini, et elle a donné une conférence TED sur la question.

Certains logiciels de reconnaissance faciale sont également utilisés par certains services douaniers pour accélérer le traitement aux frontières. Il est utilisé en Nouvelle-Zélande et sera utilisé au Canada.

La plupart d'entre nous ont vu suffisamment de science-fiction pour voir les problèmes potentiels et les conséquences des systèmes qui utilisent la reconnaissance faciale à grande échelle. Ce type de technologie utilisé en dehors de l'espace privé de déverrouillage des téléphones peut devenir controversé et effrayant.

Google : inscription en un clic

Si un utilisateur possède un compte Google, il peut bénéficier de l'inscription en un clic de Google. Lorsqu'il visite un site Web et qu'il est invité à créer un compte dans une boîte de dialogue en ligne, l'utilisateur n'a pas besoin de saisir de mot de passe. Google fournit un compte sécurisé sans mot de passe basé sur un jeton, lié au compte Google de l'utilisateur. Lorsque l'utilisateur revient, il est automatiquement connecté. S'il stocke ses mots de passe dans le Smart Lock, il est également automatiquement connecté sur d'autres appareils.

Remarque : Il s'agit d'une solution sans mot de passe intéressante. Bien sûr, en l'utilisant, les utilisateurs sont liés à Google, avec lequel tout le monde ne se sentira pas à l'aise .

Conclusion

Vous pouvez faire beaucoup de choses vraiment intéressantes lorsque vous commencez à utiliser les fonctionnalités mobiles pour aider les utilisateurs à remplir des formulaires. Nous avons besoin d'un état d'esprit axé sur le mobile lors de la création de formulaires ; sinon, nous resterons bloqués sur les fonctionnalités de bureau que nous connaissons.

Encore une fois, soyez prudent avec les capacités de l'appareil : ayez toujours une solution de secours en cas de défaillance d'un capteur ou de refus d'accès par l'utilisateur. Évitez de faire de ces fonctionnalités les seules options pour ces fonctions (sauf si vous créez une application cartographique qui repose sur la géolocalisation).

Ceci est la fin d'une série de deux très longs articles dans lesquels je vous ai donné quelques conseils généraux sur l'UX et l'utilisabilité et les meilleures pratiques. Au final, ce qui compte, ce sont votre formulaire et vos utilisateurs . Certaines choses décrites ici pourraient même ne pas fonctionner spécifiquement pour vos utilisateurs - qui sait ? Donc, quoi que vous fassiez, ne me croyez pas (ou celle de Luke) sur parole. Testez-le, avec de vrais utilisateurs, sur de vrais appareils. Mesure le. Et testez à nouveau. Effectuez des recherches sur les utilisateurs et des tests d'utilisabilité . L'expérience utilisateur ne concerne pas seulement les meilleures pratiques et les recettes magiques que vous copiez et collez. Vous devez adapter la recette pour qu'elle fonctionne pour vous.

Donc, en bref : testez-le. Testez-le sur de vrais appareils. Testez-le avec de vrais utilisateurs.