Fermer

janvier 12, 2022

4 manières de rendre les applications mobiles plus accessibles


En moyenne, les gens passent plus de 3,5 heures par jour dans les applications mobiles. Si vous souhaitez éviter que l'inaccessibilité ne devienne une raison pour laquelle votre application ne peut pas retenir les utilisateurs, suivez ces suggestions.

Il y a de nombreux facteurs à prendre en compte lors de la conception d'une application pour qu'elle soit accessible : l'âge, la vision, l'audition, la mobilité, l'emplacement, etc. au. Pour cette raison, l'accessibilité des applications mobiles peut sembler assez intimidante.

Cependant, il existe un certain nombre de problèmes d'accessibilité courants dans la conception d'applications mobiles qui peuvent facilement être résolus. Ci-dessous, nous examinerons quatre exemples de ces problèmes et leurs correctifs. Il se peut que votre application ne parvienne pas à 100 % du chemin, mais elle s'en rapprochera vraiment. 6 minutes, en moyenne, sur leurs appareils mobiles chaque jour en 2021.

Les données d'eMarketer d'avril 2020 fournissent des statistiques et des estimations sur le temps que les adultes américains passent sur leurs appareils mobiles. Les données pour 2021 montrent une durée totale estimée de 4 heures 6 minutes, avec 3 heures 41 minutes dans les applications mobiles et 24 minutes dans le navigateur.

3 heures et 41 minutes de ce temps seront dans applications mobiles.

Maintenant, ce n'est pas parce que les gens passent plus de temps que jamais dans les applications mobiles qu'ils voudront passer plus de temps dans votre application. Si l'application n'est pas accessible, vous risquez de ne pas l'ouvrir pendant de longues périodes ou, pire encore, d'être désinstallée.

Voici donc ce que vous pouvez faire pour supprimer l'inaccessibilité de l'équation :

1. Concevoir la navigation pour les utilisateurs d'applications mobiles

La navigation est un élément essentiel de la conception d'applications mobiles. Cependant, inclure simplement une navigation ne suffit pas.

Regardons l'exemple de l'application mobile Kohl's :

L'application mobile Kohl's comprend trois éléments de navigation : une icône de menu hamburger en haut à gauche de l'en-tête gris, un panier à droite et une barre de recherche en dessous.

La première chose que vous remarquerez est que la navigation se fait dans l'en-tête gris de l'application. Bien que cela soit attendu et acceptable sur un site Web, ce n'est pas idéal pour les applications mobiles, surtout si ce sont les seuls éléments de navigation disponibles.

L'une des principales raisons est qu'il ne s'agit pas d'une conception conviviale pour les utilisateurs solitaires. C'est pourquoi la plupart des applications ont la navigation principale alignée en bas et les éléments cliquables les plus importants au centre de la page. Ceci est également connu sous le nom de "zone de pouce".

La façon dont cette navigation est conçue présente d'autres problèmes. Regardons un aperçu de celui-ci :

Un aperçu du fonctionnement de la navigation dans l'application Kohl. L'utilisateur commence par « Acheter par catégorie » dans le menu hamburger et termine par rechercher des filtres dans les résultats de recherche.

Sous le menu hamburger se trouve un méga-menu « Acheter par catégorie ». Les utilisateurs doivent parcourir trois niveaux avant de voir des résultats de recherche. Pour un magasin de cette taille, il faut s'y attendre.

Cependant, c'est la prochaine couche de navigation qui devient délicate.

Lorsque les utilisateurs font défiler les résultats de la recherche, le menu hamburger disparaît, donc tout ce qu'il leur reste est le nom de la sous-catégorie qu'ils consultent et un bouton « Filtrer et trier ». navigation.

Les options de filtrage et de tri ne sont pas non plus très bien conçues. La police devient très difficile à lire dans cette section et la zone du pouce est à nouveau ignorée, le bouton « Appliquer » étant situé dans le coin supérieur droit de l'en-tête.

Une manière plus accessible de concevoir la navigation peut être trouvée. dans Application mobile de Target :

L'application mobile de Target a une navigation inférieure collante avec des liens vers : Découvrir, À emporter, Portefeuille, Panier et Compte.

Navigation de Target. colle au bas de l'interface utilisateur de l'application à tout moment.

Ce qui est particulièrement agréable, c'est que ce menu est conçu pour l'expérience omnicanal en incluant « À emporter » comme l'une des options. De cette façon, les utilisateurs cibles qui achètent des trucs via l'application pour les récupérer en magasin ou les récupérer via le ramassage en bordure de rue n'ont pas à passer au crible un tas de paramètres supplémentaires pour trouver cette fonctionnalité.

Une autre caractéristique remarquable est que la plupart des les éléments cliquables sur les pages restent dans la zone du pouce :

Une présentation de l'application mobile Target. L'utilisateur sélectionne une catégorie dans l'onglet principal « Découvrir », parcourt les sous-catégories, puis trie et filtre sa recherche.

Bien que vous ne puissiez pas voir sur quoi je clique dans le GIF ci-dessus, ce que vous peut voir comment l'espace a été utilisé. L'en-tête principal contient trois éléments une fois qu'un utilisateur commence à naviguer dans les catégories :

  • Bouton « Précédent »
  • Étiquette de catégorie
  • Icône de recherche

Cela laisse l'action principale se dérouler dans la zone du pouce ci-dessous l'en-tête supérieur.

Considérez cela lorsque vous concevez vos applications. Même si vous avez des utilisateurs à deux mains qui peuvent y accéder plus facilement, la conception d'applications accessibles a appris aux utilisateurs à s'attendre à ce que la navigation soit en bas et l'activité principale au centre de l'application. Si vous n'avez pas à vous écarter de la norme, ne le faites pas.

2. Épeler vos icônes

Les icônes peuvent être un excellent économiseur d'espace dans la conception d'applications. Mais peut-être une chose plus importante à considérer lors de l'ajout d'icônes à votre interface utilisateur est de savoir si elles améliorent réellement l'expérience utilisateur.

Si vous y réfléchissez, il n'y a peut-être qu'une douzaine d'icônes qui sont (pour la plupart) universellement reconnaissables. Par exemple :

  • Menu mobile (hamburger)
  • Rechercher (loupe)
  • Accueil (maison)
  • Modifier (crayon)
  • Favori/aime (coeur)
  • Utilisateur/compte (profil )
  • Notification (cloche)

Pour les autres, vous ne pouvez pas supposer que les utilisateurs seront en mesure de comprendre ce qu'ils sont.

Au lieu de cela, chaque icône utilisée dans votre interface, de la navigation au contenu dans vos onglets doivent être associés à une étiquette suffisamment concise pour être comprise et suffisamment grande pour être lue. C'est le seul moyen de s'assurer que chaque utilisateur sait exactement ce qu'il va trouver sur l'application et ce qu'il peut faire lorsqu'il clique dessus.

Voici un exemple tiré de Chirp Access :[19659003]La navigation de l'application mobile Chirp Access comporte cinq boutons dans son menu : étoile, clé, réseau, utilisateurs, points de suspension. Il n'y a pas d'étiquettes présentes.

Il y a cinq onglets dans cette navigation. Je suppose que les gens peuvent comprendre à quoi servent deux d'entre eux :

  • L'étoile est l'endroit où vous enregistrez les « Favoris » ou les points d'entrée les plus couramment utilisés.
  • Les points de suspension sont l'endroit où vous trouvez les paramètres et autres extras.[19659033]Mais qu'en est-il des trois autres ?

    • L'icône de clé comprend une liste d'options de point d'entrée tout autour de la propriété.
    • Si Bluetooth est activé, l'icône de réseau affichera les options de point d'entrée disponibles.
    • Les utilisateurs L'icône permet aux utilisateurs d'inviter d'autres personnes à accéder à la propriété.

    Bien que je sois sûr que la mémoire musculaire aidera de nombreux utilisateurs à se déplacer dans cette application car elle est utilisée quotidiennement, le manque d'étiquettes sera problématique pour les autres qui pourraient ne soyez pas avertis en technologie ou n'ayez pas le meilleur rappel.

    Si vous craignez que les étiquettes prennent trop de place, ne le soyez pas. Voici à quoi ils ressemblent dans l'application OfferUp :

    L'application mobile OfferUp comporte cinq éléments dans sa navigation inférieure : Accueil qui utilise le logo OfferUp comme icône, Boîte de réception qui a une icône de message, Post qui a une icône d'appareil photo, Selling qui a une icône de ticket de vente et Account qui a une icône d'utilisateur.

    C'est l'exemple parfait de la façon dont les symboles bien reconnus ne sont pas toujours universels dans l'application. Par exemple, l'icône de la boîte de réception est ce que nous verrions normalement pour envoyer des SMS ou discuter. Et l'icône Publier est ce que nous verrions associé à la fonctionnalité de caméra intégrée à l'application.

    Ils sont tous les deux pertinents dans ce cas. Cependant, sans l'étiquette supplémentaire attachée à chacune, les icônes seules pourraient être déroutantes.

    3. Fournir des alternatives de clic aux gestes

    Les applications mobiles nous ont permis d'intégrer des gestes spéciaux dans l'expérience, comme le double appui, le balayage et l'inclinaison. Cela dit, bien que les gestes puissent accélérer certaines actions et rendre les applications plus attrayantes, elles ne sont pas toujours conviviales.

    Pour commencer, il y a le facteur de dextérité. Si l'utilisateur ne peut pas facilement exécuter le geste avec ses mains, cela pourrait rendre l'application inutilisable de manière réaliste.

    Il s'agit d'un problème avec l'application de rencontres Bumble :

     L'application de rencontres Bumble ne peut être contrôlée que par une série de gestes de balayage : à gauche pour « non », à droite pour « oui ». Le symbole de l'étoile jaune n'est là que pour les membres payants pour accéder à une fonction Super Swipe. ] Le bouton étoile jaune dans le coin inférieur droit est destiné aux Super Swipes. Cependant, si l'utilisateur ne paie pas pour cette fonctionnalité, ce bouton devient une responsabilité car il est trop facile de cliquer dessus par accident et de perturber toute l'expérience du processus.</p data-recalc-dims=

    Et en termes de consultation du profil de quelqu'un, le l'utilisateur doit balayer vers le bas pour l'afficher.

    Tinder a ce problème partiellement résolu :

    L'application Tinder permet aux utilisateurs d'utiliser des gestes de balayage pour parcourir les cartes ou utiliser un panneau de boutons en bas : refaire, « non », Super Like, « oui » et Passer la ligne.

    Tinder donne à ses utilisateurs la possibilité d'utiliser des gestes de balayage : à gauche pour « Non », à droite pour « Oui , " et jusqu'à " Super Like ". Ou ils peuvent utiliser le panneau de boutons sous les cartes.

    Il y a cinq boutons ici. Les icônes X et Cœur sont les plus grandes car elles sont les plus couramment utilisées (pour « Non » et « Oui », respectivement). L'étoile au centre fonctionne de la même manière que l'étoile de Bumble en ce sens que les utilisateurs cliquent dessus pour Super Likes. Les deux autres icônes sont pour des fonctionnalités supplémentaires. La flèche Retour permet aux utilisateurs d'annuler la dernière action, tandis que l'éclair les pousse au premier plan de la file d'attente.

    Quant à regarder le profil de quelqu'un, l'utilisateur peut cliquer sur le côté gauche ou droit de l'image pour faire défiler à travers les photos ou au centre pour lire le descriptif.

    Evidemment, le manque d'étiquettes est problématique pour l'accessibilité. Mais nous avons un autre problème ici. C'est l'incohérence dans la façon dont les mêmes fonctionnalités de clic fonctionnent sur des applications presque identiques.

    Je comprends que chaque application de rencontres a son propre schtick. C'est très bien. Mais ce shtick ne devrait s'appliquer qu'à l'identité de l'application et non à ses fonctionnalités.

    Lorsque vous vous écartez d'une conception ou d'une fonctionnalité très familière, vous augmentez le nombre d'erreurs commises par vos utilisateurs et, par conséquent, leur niveau de frustration. Cela pourrait très bien être la goutte d'eau pour les utilisateurs qui sont déjà mécontents de l'inaccessibilité de l'application.

    4. Placez les fonctionnalités d'accessibilité dans les paramètres

    L'accessibilité ne concerne pas seulement la taille du texte ou le contraste des couleurs, bien qu'il s'agisse certainement de facteurs importants pour les personnes malvoyantes.

    Prenez, par exemple, les utilisateurs plus âgés . Des choses comme la dextérité, l'ouïe et la cognition peuvent déterminer à quel point une application est accessible pour eux.

    De toute évidence, si vous essayez de concevoir une application pour chaque type de déficience ou de restriction possible, vous devrez faire des compromis sur de nombreux points. ce que vous envisagez pour cela. Il n'y a pas besoin de le faire cependant. Tout comme les sites Web sont désormais souvent dotés de panneaux d'accessibilité intégrés, vous pouvez faire de même pour les applications.

    Contrairement aux sites Web, cependant, je recommanderais d'inclure uniquement les fonctionnalités d'accessibilité qui ont du sens pour vos utilisateurs et qui sont pertinentes pour votre app.

    Par exemple, il s'agit du panneau Paramètres pour Plants vs. Zombies 2 :

    Dans Plants vs Zombies 2, les utilisateurs peuvent régler le volume de la musique et du son pour l'application mobile. .

    Il existe deux contrôles d'accessibilité, et tous deux concernent les sons provenant de l'application : Musique et Effets sonores. Idéalement, l'application ne jouerait pas automatiquement de la musique lorsque l'utilisateur la saisit. Cependant, étant donné qu'il s'agit d'un jeu mobile, je pense que la plupart des utilisateurs s'attendent à ce que la plupart des utilisateurs ouvrent une application nouvellement installée.

    Ce qui est important, c'est que ces commandes de volume et de son soient situées dans les paramètres et faciles à trouver.

    Suivant , examinons comment le jeu mobile Two Dots permet aux utilisateurs de personnaliser leur expérience accessible :

    Dans le jeu mobile Two Dots, les utilisateurs peuvent contrôler les paramètres d'accessibilité pour : Musique, SFX, Mode daltonien et haptique.

    Les utilisateurs peuvent activer/désactiver :

    • Musique
    • Effets spéciaux
    • Mode daltonien
    • Retour haptique
    • Vibration

    Ces paramètres tiennent compte des déficiences /restrictions autres que celles liées à l'audition :

    • La désactivation des effets spéciaux peut aider les personnes souffrant de problèmes cognitifs comme l'épilepsie.
    • L'activation du mode daltonien aide les personnes malvoyantes.
    • L'activation du retour haptique et des vibrations peut servir de complément nt pour les utilisateurs souffrant d'autres déficiences sensorielles.

    Bien que vous souhaitiez vous assurer que votre application mobile est accessible au plus grand nombre de personnes possible, veillez à ne pas trop en faire avec le nombre de paramètres que vous incluez. Plus il y a d'options, plus les utilisateurs devront passer du temps à les considérer ainsi qu'à les activer ou les désactiver.

    Résumé

    Alors que Google a officiellement fait de l'accessibilité une partie de son algorithme dans le nouveau Core. Mise à jour Web Vitals les magasins d'applications ne sont pas allés jusqu'à le faire pour les applications mobiles (ou du moins, nous le savons). Mais ce n'est pas parce que les magasins d'applications n'exigent pas l'accessibilité qu'elle peut être ignorée.

    Commencez par les quatre conseils ci-dessus. Vous pouvez ensuite utiliser cette liste de contrôle d'accessibilité pour vous assurer que vous avez pointé vos i et croisé vos t pour mettre tout le reste en ordre.




Source link