Fermer

août 27, 2018

Aidez les utilisateurs à remplir votre formulaire mobile (partie 2)20 minutes de lecture

Aidez les utilisateurs à remplir votre formulaire mobile (partie 2) - Smashing Magazine


À propos de l'auteur

Stéphanie est concepteur UX et UI et expert en téléphonie mobile. Elle se concentre sur la création d'une expérience utilisateur exceptionnelle pour les applications mobiles, les tableaux de bord complexes et le Web réactif …
Plus sur Stephanie

Ceci est la deuxième partie d'une série sur l'amélioration des formulaires mobiles pour les utilisateurs. Dans la première partie nous avons vu des directives générales sur la façon d'améliorer la lisibilité des formulaires pour les utilisateurs mobiles, le placement et la taille des étiquettes, les coûts d'interaction et le traitement des erreurs.

Dans cette seconde partie, je souhaite me concentrer davantage sur les capacités spécifiques aux mobiles. HTML5, par exemple, nous a apporté de nombreuses fonctionnalités très 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 aider . Ensuite, nous irons au-delà des éléments de formulaire «classiques» et verrons comment utiliser les fonctionnalités mobiles telles que les scanners de caméras, de géolocalisation et d’empreintes digitales pour faire passer votre expérience mobile sur des sites Web et des applications natives.

Contenu de format utilisateur avec HTML5

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

Qualité optimisée pour le mobile HTML5

Le HTML5 ouvre tout un éventail de possibilités pour optimiser les formulaires pour mobile et appareils tactiles. De nombreux nouveaux types d’intérêts intéressants peuvent déclencher différents claviers pour aider les utilisateurs. Nous pouvons également faire des choses intéressantes avec la capture de média directement dans le navigateur.

Saisie de données numériques

input type = number

L'attribut HTML5 limite 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 numéro.

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 numéros ce qui réduit les fautes de frappe et les erreurs de validation de formulaire. L'aspect de l'entrée dépend du système d'exploitation.


 A gauche, le clavier d'Android et à droite le clavier iOS avec chiffres.
A gauche, le clavier d'Android et à droite le clavier iOS. avec des nombres. ( Grand aperçu )

L'entrée devrait permettre des nombres décimaux et des 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 = number consiste à déterminer si le contrôle des entrées devrait avoir une interface spinbox (par exemple, avec" up "et" bas 'flèches) ". 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.

Le modèle Et Attributs

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.

:

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 le signe moins ou la virgule, donc les utilisateurs perdent la possibilité d'utiliser des nombres négatifs et des décimales. En outre, 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.

L'utilisation de ce modèle uniquement ne fonctionnera pas sur la plupart des téléphones Android. Vous aurez toujours besoin d'une combinaison de type d'entrée = numéro et de l'attribut pour effectuer ce travail.


 Démo Android et iOS avec type d'entrée = numéro, modèle et mode d'entrée.
Démo Android et iOS avec type d'entrée = numéro modèle et mode de saisie . ( Grand aperçu )

inputmode

Si vous voulez seulement déclencher le clavier numérique mobile mais ne voulez pas traiter avec le modèle = numéro et , vous pouvez utiliser une entrée de texte et appliquer l’attribut inputmode = numeric . Cela ressemblerait à ceci:

Malheureusement (au moment de la rédaction du présent document), seul le mobile Chrome 67 supporte cette mais il devrait arriver à Chrome desktop 66 sans drapeau.

sur la façon de saisir des chiffres dans un formulaire, lisez " Je voulais saisir un numéro ".

input type = tel

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


 type d’entrée = tel sur Android et iOS
type d’entrée = tel sur Android et iOS ( Grand aperçu )
Saisie de dates

Même si ce sont des données techniquement numériques, les dates méritent leur propre section. Il existe quelques types de saisie HTML5 pour la saisie de dates. Le type le plus utilisé est = date . Il 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 le rendu des navigateurs input type = "date" je vous recommande de lire " Rendre le type d'entrée = compliqué "


 -picker basé sur le type d'entrée = date sur Android et iOS
Un sélecteur de date basé sur type d'entrée = date sur Android et iOS ( Grand aperçu )

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). Autant de choix!


 Exemple de sélecteur de date avec plus d'options sur Android
Exemple de sélecteur de date avec plus d'options sur Android (semaine, date et heure, etc.) ( Grand aperçu )

type d'entrée = date fonctionne bien pour les interfaces de réservation, par exemple. Vous pourriez avoir besoin de construire votre propre sélecteur de date, cependant ( 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 insérer une bibliothèque JavaScript complète dans le site Web pour le travail.

type = date pour les dates est mieux. Prenons l'exemple d'une date de naissance. Si je suis né en 1960 (je ne suis pas – ce n'est qu'un exemple), il me faudrait beaucoup de taps 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, je reçois une sorte de roue déroulante avec toutes les années. Un peu mieux, mais ça demande quand même pas mal de défilement.

Un utilisateur de m'a dit sur Twitter :

"Je suis né en 1977 et je peux confirmer le dérangement. prend pour faire défiler, plus vous vous sentez plus vieux 🙁 "

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


 Avec le sélecteur de date d'Android, même si vous pouvez appuyer sur un choix de l'année, choisir une date de naissance est toujours fastidieux.
Avec le sélecteur de date d'Android, même si vous pouvez appuyer sur l'année pour obtenir un sélecteur, choisir une date de naissance est toujours fastidieux ( Grand aperçu )

Les téléphones mobiles masquent d'autres avantages du clavier et de l'optimisation des entrées qui améliorent l'expérience de l'utilisateur lors du remplissage d'un formulaire. Le diable est dans les détails, comme on dit.

L'utilisation du champ input type = url affichera un clavier optimisé sur mobile, avec / (la barre oblique) directement accessible. Selon le système d'exploitation, vous pouvez également accéder rapidement 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. Ceci est également livré avec une validation automatique du navigateur qui vérifie que le format de l'URL est valide.


 type d'entrée = clavier URL sur Android et iOS
type d'entrée = url clavier sur Android et iOS ( Grand aperçu )

Le champ input type = email affiche un clavier optimisé pour le courrier électronique 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.


 type d'entrée = clavier électronique sur Android et iOS
type d'entrée = email clavier sur Android et iOS ( Grand aperçu )

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


 type d'entrée = clavier de recherche sur Android et iOS
type d'entrée = recherche clavier sur Android et iOS ( Grand aperçu )
Range And Color

Les deux derniers types d'entrées que nous avons examinés ne sont pas particulièrement optimisés pour les mobiles, mais leur utilisation nous évite d'avoir à charger de lourdes bibliothèques JavaScript personnalisées, ce qui est une bonne idée pour les utilisateurs mobiles. 19659013] type d'entrée = plage fournit un curseur visuel d'interface utilisateur pour entrer un nombre. L'interface utilisateur de ce contrôle dépend du navigateur.

type d'entrée = couleur permet à l'utilisateur d'entrer facilement une valeur de couleur. Dans de nombreuses implémentations de navigateur, un sélecteur de couleurs est ajouté.


 type d'entrée = plage et type d'entrée = couleur sur Android et iOS
type d'entrée = plage et type d'entrée = couleur sur Android et iOS ( Grand aperçu )
Capture multimédia HTML: Prendre et télécharger des images et enregistrer le son

Je me souviens du temps de l'iPhone 3, alors qu'Apple ne permettait même pas d'utiliser un simple type de fichier sur un site Web , pour des raisons de sécurité. Ces temps sont révolus depuis longtemps. Avec l'API de capture multimédia il est désormais possible d'accéder à différents capteurs d'un périphérique. 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 support à 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:


 L'attribut accept est défini sur image. Le navigateur vous demande si je souhaite accéder directement à la caméra ou aux fichiers sur le périphérique.
L'attribut accept est défini sur image . Le navigateur demande si je souhaite accéder directement à la caméra ou aux fichiers de l'appareil. ( Grand aperçu )

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

  // ouvre la caméra>
  // ouvre la caméra en mode vidéo
  // ouvre l'enregistreur vocal

 Le navigateur mobile ouvre directement le mécanisme de capture: à gauche, la caméra, à droite, le magnétoscope.
Le navigateur mobile ouvre directement le mécanisme de capture: à gauche, la caméra, à droite, l'enregistreur vidéo. ( Grand aperçu )

Pour plus de détails sur l'utilisation des médias directement dans le navigateur, lisez la section « Accès et gestion des images, vidéo et audio directement dans le navigateur » dans mon article sur les pouvoirs secrets des navigateurs mobiles.

Autos HTML5: correction automatique, saisie semi-automatique, remplissage automatique, autocapitalisation et autofocus

Le HTML5 est doté de nombreux attributs automatiques. Pour améliorer l'expérience mobile, vous devez être intelligent sur ce qui peut être automatisé et ce qui ne peut pas l'être. Voici quelques règles générales:

  • Désactivez la correction automatique sur les choses pour lesquelles le dictionnaire est faible : adresses e-mail, numéros, noms, adresses, villes, régions, indicatifs régionaux, numéros de cartes de crédit.
  • pour les champs email et autres champs, le cas échéant (par exemple, les URL de site Web). Notez que type = email fait le travail pour vous dans la version récente d'iOS et d'Android, mais désactivez-le quand même pour les anciennes versions ou si type = email n'est pas supporté.
  • peut définir l'attribut autocapitalize à mots pour automatiquement majuscule la première lettre de chaque mot les types d'utilisateurs. Cela peut être utile pour les noms, les lieux, etc., mais, encore une fois, soyez prudent et testez-le.

 Utilisez le type d'entrée = email pour les adresses électroniques. Si vous ne le faites pas, désactivez au moins la mise en majuscules automatique. Aucune adresse électronique ne commence par une lettre majuscule.
Utilisez pour le type d'entrée = email pour les adresses électroniques. Si vous ne le faites pas, désactivez au moins la mise en majuscules automatique. Aucune adresse e-mail ne commence par une majuscule. ( Grand aperçu )
  • Pour type d'entrée = tel définissez autocomplete = "tel" .
  • Vous pouvez utiliser autofocus pour mettre en évidence un élément de contrôle lorsque l'utilisateur charge la page. Mais simplement parce que l'utilisateur ouvre la page "contact", cela ne signifie pas qu'il est prêt à accéder directement au premier champ de votre formulaire. Donc, encore une fois, utilisez-le judicieusement.

 Dans cet exemple, nous pourrions utiliser l'autofocus pour amener l'utilisateur directement au premier champ une fois qu'il a cliqué sur le bouton.
Dans cet exemple, nous pourrions utiliser autofocus pour amener l'utilisateur directement au premier champ une fois qu'il a cliqué sur le bouton. ( Grand aperçu )

Si vous voulez plus d'options de saisie semi-automatique, une liste complète se trouve sur le wiki WhatWG . Assurez-vous que vous utilisez les bons. Implémenter, tester et tester à nouveau.

HTML5 Form Validation

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 domaines . C'est bien si vous ne voulez pas utiliser une bibliothèque JavaScript pour afficher les messages de validation en ligne. Voici les principaux points à connaître en tant que concepteur UX sur la validation de formulaire HTML5:


 Validation du formulaire HTML natif dans un navigateur Android
Validation du formulaire HTML natif dans un navigateur Android ( Grand aperçu )

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.

Enregistrer les données utilisateur

Beaucoup de problèmes peuvent survenir, en particulier sur les mobiles. Des erreurs se produisent. Un utilisateur peut confondre le bouton Retour du navigateur et perdre toutes ses données.

Si l'utilisateur revient à la page, il serait intéressant de réafficher ses données . Il en va de même si le navigateur plante ou que l'utilisateur ferme l'onglet. Vous pouvez stocker les données de l'utilisateur dans le stockage local ou de session pour vous assurer que rien n'est perdu en cas de problème. Geoffrey Crofte a écrit une bibliothèque JavaScript pour vous aider dans cette tâche .

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

  • stocker les données dans le cache,
  • essayer de les renvoyer automatiquement

Pour apprendre à coder ceci, consultez l'article sur « Formulaires non liés à une connexion hors ligne ».

Les capacités des périphériques mobiles peuvent faire passer l'expérience à un niveau supérieur [19659006] Dans partie 1 nous avons appliqué les éléments et attributs de base du formulaire HTML de base pour améliorer les formulaires mobiles. Mais les capacités des appareils mobiles vont bien au-delà de l'affichage des pages Web HTML, CSS et JavaScript. Ces petits appareils viennent équipés de nombreux capteurs . Et nous pourrons utiliser beaucoup de ces applications natives et sur le Web pour faciliter la vie de nos utilisateurs.

Détecter l'emplacement de l'utilisateur

Dans la section précédente, j'ai écrit sur le pré-remplissage des informations pour les lieux et les adresses. C'est un bon début. Nous pouvons aller plus loin. Au lieu de demander aux utilisateurs de taper un emplacement, nous pouvons le détecter . Rencontrez 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 aide les utilisateurs à planifier leurs voyages. Lorsque l'utilisateur entre dans le premier champ, il voit l'option "Utiliser l'emplacement actuel". S'ils le sélectionnent, ils sont invités à autoriser le navigateur à accéder à leurs données de géolocalisation. C'est l'API de géolocalisation. Le navigateur remplit alors automatiquement l'emplacement trouvé et l'utilisateur peut accéder au champ de destination. L'application native fonctionne à peu près de la même manière.


Citymapper propose l'emplacement actuel de l'utilisateur comme point de départ du voyage.

Soyez intelligent en demandant l'autorisation à l'utilisateur

Vous avez peut-être remarqué dans la vidéo précédente J'ai dû accepter de donner accès à mon poste sur le site Web de Citymapper. Dans le navigateur, l'utilisateur gère le site Web d'autorisation par site Web, API par API.

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

Voici quelques conseils généraux pour demander des autorisations sur le Web:

  • Ne soyez pas le traqueur de géolocalisation ou de notification: Ne demandez pas de permission dès que possible. l'utilisateur arrive sur votre site web . Ils ne sont peut-être pas encore au courant pour vous ou votre service.
  • Laissez l’utilisateur découvrir votre site Web et votre service. Ensuite, demande la permission en contexte . Si vous voulez 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 permission et ce que vous en ferez [19459247]

 pour accéder à l'emplacement de l'utilisateur uniquement quand il en a besoin. La suppression des autorisations après le refus de l'utilisateur peut devenir très compliquée car l'utilisateur devra rechercher dans ses paramètres pour ce site Web.
Citymapper demande l'accès à l'emplacement de l'utilisateur uniquement lorsque cela est nécessaire. La suppression des autorisations après le refus de l'utilisateur peut devenir très compliquée car l'utilisateur devra rechercher dans ses paramètres pour ce site Web. ( Grand aperçu )

Si vous voulez aller plus loin, Luke Wroblewski (oui, lui encore) a créé une belle vidéo pour vous aider avec la permission -procéder à un processus .

19659008] Un grand domaine d’amélioration des formulaires est l’expérience de paiement par caisse. Là encore, les capteurs sur l'appareil peuvent en faire une expérience presque indolore. La seule difficulté sera la somme dépensée par l'utilisateur.

Scanner de cartes de crédit iOS

Dans la section précédente, j'ai décrit l'autodétection de cartes de crédit et les fonctions d'auto-complétion basées sur la saisie précédente de l'utilisateur. Cela signifie toujours que l'utilisateur doit taper au moins une fois ses données de carte de crédit.

Apple a franchi une nouvelle étape avec son scanner de carte de crédit . Depuis iOS 8 dans Safari, les utilisateurs de peuvent utiliser leur appareil photo pour numériser et compléter automatiquement leurs informations de carte de crédit . Pour effectuer cette magie, vous devrez ajouter l’attribut autocomplete cc-number 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 Stack Overflow .

Safari a également options de remplissage automatique peut utiliser pour ajouter leur carte de crédit leur permettant de les réutiliser sur plusieurs sites Web.


 L'option de numérisation par carte de crédit apparaît lorsque Safari détecte un champ correspondant au format de carte de crédit. Si l'utilisateur possède déjà une carte enregistrée sur le téléphone, il peut utiliser l'option de remplissage automatique.
L'option de numérisation par carte de crédit apparaît lorsque Safari détecte un champ correspondant au format de carte de crédit. Si l'utilisateur possède déjà une carte enregistrée sur le téléphone, il peut utiliser l'option de remplissage automatique. ( Grand aperçu )
Passer à la caisse avec l'API Google Pay

Google a lancé quelque chose de similaire: l'API Google Pay . Lorsqu'elle est implémentée sur un site Web, l'API élimine le besoin de saisir manuellement les informations de paiement . Il va encore plus loin: il peut également stocker les adresses de facturation et d'expédition.

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


 La fenêtre pop-up de l'API Google Pay déclenchée sur un site de commerce électronique
La fenêtre pop-up de l'API Google Pay déclenchée sur un site de commerce électronique ( Source ) ( Grand aperçu )

Une version normalisée de de l'API de demande de paiement est actuellement une recommandation de candidat du W3C . Si cela est implémenté dans les navigateurs, cela permettrait aux utilisateurs de vérifier avec un seul bouton, ce qui demanderait l'API. Par la suite, chaque étape serait gérée par des boîtes de dialogue de navigateur natives.

Rendre l'authentification plus facile

Dans la plupart des cas, les téléphones mobiles sont des périphériques personnels que les utilisateurs ne partagent généralement pas. Cela ouvre des opportunités intéressantes pour l'authentification.

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 au hasard. Pour vous connecter à un nouvel espace de travail Slack, je dois:

  1. ouvrir mon gestionnaire de mots de passe,
  2. saisir mon mot de passe principal,
  3. rechercher l'espace de travail,
  4. copier le mot de passe dans l'application Slack.

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

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

Ce lien magique contient un jeton d'authentification. L'application Slack l'attrape et vous authentifie sans avoir besoin du mot de passe.


 Lorsque vous utilisez l'option lien magique, Slack vous envoie un email avec un lien qui vous permet de vous connecter sans avoir à entrer votre mot de passe. l'option lien magique, Slack vous envoie un email avec un lien qui vous permet de vous connecter à votre jeu sans avoir à entrer votre mot de passe. (<a href= Grand aperçu
)
Empreinte digitale pour une identification intelligente

Je fais presque toutes mes opérations bancaires sur mon appareil mobile. Et quand il s’agit de se connecter à mes comptes bancaires, il y a un monde de différence entre l’application de la banque française Societe General et l’application allemande N26.

Je peux demander à l'application de mémoriser la chaîne de connexion, qui est composée 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 rappeler et entrer la phrase de passe à six chiffres sur un clavier personnalisé. Bien sûr, les positions des numéros changent à chaque fois que je me connecte. Sécurité – oui, je sais. De plus, je dois changer cette phrase secrète tous les trois mois. La dernière fois que j'ai été obligé de changer la phrase secrète, j'ai fait ce que font la plupart des gens: choisir presque la même phrase secrète, car je ne veux pas avoir à mémoriser un autre numéro à six chiffres. Et bien sûr, j'étais sûr que je m'en souviendrais, alors je ne l'ai pas saisi 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 que ce compte pour faire des économies. Dans l'application, vous pouvez demander un nouveau code d'accès. Il a fallu près d'une semaine à la banque pour m'envoyer une nouvelle phrase secrète à six chiffres par courrier sur papier à mon domicile à Luxembourg. Oui,

N26, par contre, utilise mon adresse e-mail comme chaîne de connexion. Je peux m'en souvenir sans gestionnaire de mot de passe. Lorsque je veux me connecter, je mets le 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 numérise mon empreinte digitale et s’authentifie. Si cela ne fonctionne pas, je peux utiliser un mot de passe.

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


 Dropbox a un autre exemple d'authentification par empreinte digitale. (<a href= Grand aperçu
)

De plus en plus d'applications sur Android et iOS offrent aux utilisateurs la possibilité de s'authentifier avec une empreinte digitale . Fini les 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 l'Institut national des normes et de la technologie (NIST), la biométrie n'est pas considérée comme suffisamment sûre . Il conseille de combiner la biométrie avec un second 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 en utilisant son pouce pour déverrouiller son téléphone alors qu'il dormait?

2018, Apple a lancé l'iPhone X avec le tout nouvel identifiant . Les utilisateurs peuvent déverrouiller leur iPhone X en utilisant leur visage . Bien entendu, d'autres téléphones Android, tablettes et ordinateurs Windows avaient proposé cette fonctionnalité plus tôt. Mais quand Apple lance quelque chose, cela tend à devenir "une chose". Pour le moment, cette technologie est principalement utilisée comme authentification pour déverrouiller les téléphones et les ordinateurs.

La technologie de reconnaissance faciale pose de gros problèmes. Premièrement, certains algorithmes peuvent être trompés par une image de la personne, ce qui est facilement piratable. La diversité est une autre préoccupation majeure. Les algorithmes de reconnaissance faciale ont tendance à avoir du mal à reconnaître les personnes de couleur. Par exemple, un chercheur noir a dû porter un masque blanc pour tester son propre projet. La chercheuse est Joy Buolamwini et elle a donné un exposé sur la question ED

Certains logiciels de reconnaissance faciale sont également utilisés par certains services douaniers pour accélérer le traitement des 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é pour déverrouiller les téléphones peut devenir controversé et effrayant.

Google: One-Tap Sign-Up

Si un utilisateur possède un compte Google, il peut bénéficier de 19659179] un signe tap -u p . Lorsque vous visitez un site Web et que vous êtes invité à créer un compte dans une boîte de dialogue en ligne, l'utilisateur n'a pas besoin de saisir un mot de passe. Google fournit un compte sécurisé sans mot de passe basé sur des jetons, lié au compte Google de l'utilisateur. À leur retour, les utilisateurs sont automatiquement connectés. S'ils stockent leurs mots de passe dans le verrou Smart Lock ils sont également automatiquement connectés à d'autres appareils.


 Boîte de dialogue de connexion unique de Google [19659015] Boîte de dialogue d'inscription d'un clic de Google (<a href= Source
) ( Grand aperçu )

Note : Ceci est une solution intéressante sans mot de passe. Bien sûr, en l’utilisant, les utilisateurs sont liés à Google, ce qui n’est pas à la portée de tous .

Conclusion

Lorsque vous utilisez les fonctionnalités mobiles pour aider les utilisateurs à utiliser sous des formes. Nous avons besoin d'un état d'esprit de mobile-first lors de la construction des formes ;

Encore une fois, soyez prudent avec les capacités du périphérique: a toujours une solution de secours au cas où un capteur échoue ou que l'utilisateur refuse l'accès. Évitez de faire de ces fonctionnalités les seules options pour ces fonctions (à moins que vous ne construisiez une application de carte reposant sur la géolocalisation).

Ceci est la fin d'une série de deux très longs articles dans lesquels conseils d'utilisation et meilleures pratiques. En fin de compte, quelle que soit votre forme et vos utilisateurs . Certaines choses décrites ici peuvent même ne pas fonctionner spécifiquement pour vos utilisateurs – qui sait? Donc, quoi que vous fassiez, ne prenez pas mon mot (ou celui de Luke) pour cela. Testez-le, avec de vrais utilisateurs, sur des appareils réels. Mesure le. Et tester à nouveau. Effectuer des recherches d'utilisateurs et des tests d'utilisabilité . User experience is not only about best practices and magic recipes that you copy and paste. You need to adapt the recipe to make it work for you.

So, in short: Test it. Test it on real devices. Test it with real users.

Smashing Editorial(lf, ra, al, il)





Source link