A propos de l'auteur

Maitrik Kataria est consultant UX et CMO chez Simform, une société de développement de logiciels. Il aime aider les clients à améliorer l'expérience utilisateur et a collaboré avec de nombreux…
Plus à propos
Maitrik

90% des smartphones vendus aujourd'hui ont des écrans> 5 pouces. L'immobilier sur grand écran présente de nouveaux défis et opportunités pour les créateurs et les concepteurs d'applications. Voyons comment la conception d'applications pour une utilisation à une main peut résoudre ces défis.

Vendredi 2007, le monde s'est rétréci dans nos paumes en tant que trois produits révolutionnaires – l'iPod, un téléphone et un communicateur Internet révolutionnaire – ont été unifiés pour créer les smartphones que nous connaissons et aimons aujourd'hui.

Steve Jobs sur l'expérience utilisateur à une main
Le premier iPhone introduit en 2007 a marqué la chute du clavier et du stylet Qwerty. (Grand aperçu)

L'iPhone a été conçu pour être utilisé confortablement pour une utilisation à une main, permettant un mouvement plus fluide du pouce sur l'écran.

Steve Jobs a dit un jour que l'écran de 3,5 pouces était la «taille parfaite pour les consommateurs» et que les écrans plus grands étaient stupides.

Expéditions de smartphones dans le monde par taille d'écran de 2015 à 2021
(Grand aperçu)

Mais ce n'est qu'au tournant de la dernière décennie que phabletsa gagné en popularité en raison de leurs écrans plus grands, à tel point que moins de 1% des appareils vendus aujourd'hui avaient des écrans plus petits que 4 pouces.

90% des smartphones vendus aujourd'hui ont des écrans de plus de 5 pouces.

En attendant, cette ruée vers l'or pour les créateurs et concepteurs d'applications les plus grands et les mieux présentés offre la possibilité d'utiliser l'espace immobilier de l'écran pour proposer plus de contenu et de fonctions.

Par exemple, l'application CNN était parmi les rares à avoir obtenu un accès anticipé à l'iPhone 5 introduit en 2012. Les développeurs lui ont non seulement donné une transformation esthétique, mais ont également conçu une expérience conviviale et visuellement attrayante qui a fait la une des journaux.

Évolution de la zone du pouce dans la conception de l'interface utilisateur UX
Adapté du discours de Phil Schiller lors de l'événement spécial Apple 2012. (Grand aperçu)

Avec de plus grands écrans, la facilité d'accès et l'accessibilité en souffrent

Alors que les écrans plus grands sont parfaits pour afficher plus de contenu, la considération de conception n ° 1 de Steve Jobs pour fabriquer des téléphones 3,5 pouces souffre – conception pour une utilisation à une main.

Dans ses recherches de 2 mois – dans les aéroports, les rues, les cafés, les bus et les trains – Steven Hoober a mis en lumière les trois façons dont les utilisateurs tiennent leur téléphone.

Comment les gens détiennent et interagissent avec les téléphones mobiles
(Grand aperçu)

49% des utilisateurs tiennent leur téléphone d'une seule main spécifiquement lorsqu'ils sont en déplacement.

Faire un cas solide pour la conception d'applications pour une utilisation à une main. Steven a également constaté que les utilisateurs modifient fréquemment leur adhérence en fonction de leur confort et de leur situation.

Pourquoi la conception pour une utilisation à une main devrait devenir la première priorité des créateurs d'applications

Nous utilisons beaucoup nos téléphones lorsque nous sommes préoccupés ou pressés. Cela a un impact considérable sur la façon dont les utilisateurs tiennent leur téléphone et sur la façon dont ils utilisent les applications, ce qui se traduit par une utilisation à une main beaucoup plus importante que le nombre de 49% suggéré ci-dessus.

La recherche suggère qu'un utilisateur moyen vérifie ses téléphones jusqu'à 58 fois par jour, dont 70% des interactions mobiles durent moins de 2 minutes.

Nous utilisons nos téléphones en «utilisation distraite à courte rafale».

Crédit d'image: Rescue Time. (Grand aperçu)

Une équipe de chercheurs de Simform a observé l'utilisation et le comportement de l'utilisation sporadique à courte rafale dans plusieurs scénarios tels que:

Lorsque les utilisateurs utilisent des applications mobiles
Exemples de cas d'utilisation en rafale courte (grand aperçu)

Le directeur des produits de Google, Luke Wrobleski, définit ces courtes rafales comme une expérience d'utilisation mobile "un pouce, un œil". Il reflète la façon dont un environnement distrayant oblige les utilisateurs à s'engager dans une utilisation à une seule main pendant de courtes périodes d'attention partielle. Il ajoute en outre que le type d'utilisation de smartphone le plus optimal avec une seule main est celui où une interaction rapide est prise en charge par une fonctionnalité fluide.

Comment concevoir pour garder à l'esprit ces utilisations à une main en rafale courte?

La réponse est assez simple. Effectuez des tests d'utilisabilité en continu et étudiez les différentes manières dont vos utilisateurs tiennent leur téléphone dans diverses situations.

Si les utilisateurs de votre application ont tendance à beaucoup utiliser l'application dans des scénarios distrayants, vous devez vous concentrer sur la conception de modèles qui ciblent l'accessibilité et l'utilisation à une main.

Deux méthodes pour tenir un téléphone à écran tactile d'une seule main
(Grand aperçu)

Jetons un coup d'œil à l'évolution de l'interface de Spotify pour avoir une perspective du problème:

Zone de pouce pour l'interface utilisateur du menu Hamburger mobile
Ancienne navigation de Spotify – Menu Hamburger. (Grand aperçu)

Spotify a utilisé le menu Hamburger en haut à gauche qui dissimulait ces fonctionnalités et entraînait les utilisateurs dans une sorte de chasse au trésor. Avec l'avènement des écrans plus grands, cependant, un autre défi de conception a été ajouté à la liste –accessibilité .

Zone de pouce pour l'interface utilisateur du menu Hamburger mobile
Spotify – Un certain niveau de difficulté et d'inconfort a été ressenti lorsque les utilisateurs ont essayé de communiquer avec l'application. (Grand aperçu)

Cela a obligé l'équipe de Spotify à dérouler le menu Hamburger en 2016 et à placer ses principales fonctionnalités – Accueil, Parcourir, Rechercher, Radio et Bibliothèque – en bas, ce qui a entraîné une augmentation de 9% des clics en général et de 30% sur les éléments de menu.

Utilisez des modèles UX établis pour les scénarios d'utilisation courants des applications afin de faciliter l'utilisation à une main

Pourquoi réinventer la roue? Quand vous pouvez utiliser des modèles UX éprouvés qui fonctionnent. De nombreux concepteurs se sont déjà concentrés sur l'utilisation d'une seule main comme principe de conception.

Nous avons parcouru des centaines d'applications et des milliers de modèles pour trouver les meilleurs modèles à une main. Voyons donc ce qui fonctionne, quels problèmes sont résolus et quels avantages vous en retirerez.

Nous divisons le plus comportements et modèles UX courants en six catégories:

  1. Modèles UX de navigation
    par exemple. barres de menus, barres d'onglets et gestes pour vous déplacer facilement entre les sections les plus importantes de l'application;
  2. Conception d'actions
    Création, modification, publication, ajout, suppression et autres actions que les utilisateurs entreprennent pour utiliser les fonctionnalités de base de l'application;
  3. Modèles de conception de flux commerciaux, transactionnels et de paiement
  4. Modèles de recherche, de tri et de filtrage lorsque les utilisateurs souhaitent rechercher ou parcourir rapidement du contenu;
  5. Modèles d'entrée et d'interaction
    Curseurs, sélecteurs, sélecteurs, listes déroulantes, remplissages de formulaire, zoom, défilement qui constituent les blocs de construction de toute application;
  6. Motifs divers
    Lecture multimédia, capture photo, retouche photo et modèles de navigation sur carte.

1. Concevoir la navigation dans les applications en gardant à l'esprit l’utilisation à une main

Qu'Est-ce que c'est?

La base d'une grande application est une bonne conception de navigation. Une bonne navigation aide les utilisateurs à découvrir les fonctionnalités plus rapidement et à trouver ce qui est important pour eux.

70% des utilisateurs découvrent les fonctionnalités de l'application à l'aide de liens de navigation par rapport à la recherche ou à d'autres moyens. Les barres de navigation, les menus, les gestes, les liens, les onglets, etc. sont les modèles UX de navigation les plus courants.

Une bonne conception de navigation doit avoir toutes les sections importantes directement et facilement accessibles.

Défis

Les modèles UX courants comme la barre d'onglets d'Apple et le menu glissable de Google ont des limites. Vous ne pouvez mettre qu'un nombre limité de fonctionnalités dans la barre d'onglets et accéder à tous les éléments de menu glissables n'est pas facile.

Les utilisateurs ne devraient pas avoir à lutter pour atteindre une partie importante de l'application en s'étirant vers le haut de l'écran. C’est juste une mauvaise utilisation. Plus précisément, si les utilisateurs sont en déplacement et utilisent l'application en une courte rafale.

Solution

Facebook et de nombreuses autres applications résolvent ce défi en plaçant les éléments dans une icône d'onglet appelée Plus ou Menu à partir de laquelle les utilisateurs peuvent accéder à plus de fonctionnalités et de sections de l'application. Ceci, cependant, n'est pas idéal pour l'accessibilité et l'utilisation d'une seule main.

  • Utilisez le menu déroulant au lieu d'un menu pleine page pour l'accessibilité et l'ajustement dans plus de 5 éléments.
  • Barre d'onglets étendue lorsque vous avez plus de contenu.
  • Barre d'onglets personnalisée permettant aux utilisateurs expérimentés d'accéder rapidement à ce qu'ils aiment.
  • Utilisez des gestes pour profiter de la facilité d'accès dans les habitudes des utilisateurs.
  • Le retour et la fermeture d'une page devraient également être faciles.
  • Passer rapidement à une section de la page avec des modèles UX intelligents

Facebook, par exemple, cache de nombreuses fonctionnalités dans un menu Hamburger qui désencombre l'écran principal. Bien que cette inclusion ait un attrait plus propre et plus organisé, les utilisateurs souffrent d'une accessibilité à une seule main.

1.1 Qu'est-ce qui fait du menu Hamburger un VRAI problème?
Utiliser le menu volant au lieu d'un menu pleine page pour l'accessibilité

Heureusement, nous avons un moyen de résoudre ce défi –

Les menus pleine page peuvent être remplacés par des menus déroulants, qui comme son nom l'indique «fly-out» à partir du bas. Cela permet un accès plus facile aux options, même d'une seule main.

1.2 Modèles UX mobiles pour les conceptions de menu déroulant (crédit vidéo: Joox)
Développez la barre d'onglets lorsque vous avez plus de contenu

Les directives d'interface humaine recommandent de ne pas avoir plus de 5 fonctionnalités dans la barre de navigation inférieure. Il est donc difficile pour les constructeurs d'applications de présenter des fonctionnalités de base supplémentaires au premier plan.

C’est là que l’option ‘Plus’ (3 points) est utile. Situé dans la barre inférieure, il peut masquer d'autres fonctionnalités et les révéler en un clic.

1.3 Conception de la barre de navigation inférieure avec des options supplémentaires extensibles.
Barre d'onglets personnalisée permettant aux utilisateurs expérimentés d'accéder rapidement à ce qu'ils aiment

Chaque utilisateur est différent et une fonctionnalité importante pour un utilisateur peut ne pas l'être pour l'autre. Pour tirer le meilleur parti de votre application, vous pouvez permettre aux utilisateurs de personnaliser leurs barres d'onglets avec les fonctionnalités fréquemment utilisées.

1.4 Barre d'onglets inférieure personnalisée pour une accessibilité rapide aux fonctionnalités.
Les gestes sont faciles à intégrer dans les habitudes des utilisateurs pour une navigation rapide

Popularisée par Tinder, la navigation basée sur les gestes est une excellente technique pour faciliter l'utilisation d'une seule main. Les gestes, s'ils sont intelligemment utilisés, peuvent aider à étendre la navigation pour une utilisation à une main.

1.5 Navigation basée sur les gestes pour accéder aux fonctionnalités de l'application.
De la conception de «Aller à» à «Revenir» en utilisant les gestes et l'accessibilité

La navigation ne consiste pas seulement à accéder à un écran ou à une section de l'application. Il est important de concevoir pour – revenir à l'origine de l'utilisateur, fermer un écran ou passer à une section d'une page! Voyons comment les applications utilisent les gestes et les modèles UX pour faire ces choses facilement.

1.6 Utilisation de gestes pour naviguer sur plusieurs écrans (crédit vidéo: Zenly)
Modèles pour sauter rapidement vers différentes sections de l'application

Les applications avec de nombreuses catégories, sous-catégories et sections telles que des livres, des wiki, des menus de restaurant, des produits peuvent nécessiter plus d'organisation pour éviter aux utilisateurs de trouver du contenu.

Ceux-ci peuvent être organisés dans une hiérarchie et utiliser des modèles UX pour augmenter l'accessibilité et la facilité d'utilisation.

1.7 Barres d'onglets flottantes et gestes pour sauter entre les sections.

2. Modèles à une main pour les actions de base comme – Création, modification, publication, ajout, suppression et autres

Qu'Est-ce que c'est?

Les utilisateurs passent environ 50% de leur temps sur leur téléphone mobile à s'exprimer, à interagir sur les réseaux sociaux, à faire des achats en ligne, à gérer leurs finances, leur santé et leur productivité et à planifier les événements à venir. Ces modèles UX axés sur l'action incluent des choses comme la création de publications sociales, la modification de documents, la modification, quelques autres.

Défis

Lors de la conception d'applications axées sur l'action, nous devons nous assurer qu'elles ne prennent pas la banquette arrière. Comme avoir un article ou créer un bouton en haut au lieu de juste à côté de votre pouce.

Solution

Il y a trois choses à garder à l'esprit lors de la conception de l'expérience utilisateur de ces actions principales.

  1. Actions essentielles devrait attirer l’attention des utilisateurs par le placement proéminent de l’icône ou du bouton. Ne les placez pas dans le coin supérieur droit de l'application où ils peuvent être enterrés. Il doit être facilement accessible sans avoir besoin d'utiliser de seconde main ou de portée excessive.
  2. De plus, les utilisateurs devraient pouvoir terminer toute la création et l'ajout flux de tâches d'une seule main. Cela inclut des choses comme l'annulation de la tâche, la saisie avec l'ouverture du clavier, le passage à l'étape suivante, etc.
  3. Concevoir pour complexe modification des tâches avec des menus et des commandes d'édition à plusieurs niveaux.
  4. Avec l'accessibilité comme objectif, vous pouvez faire partager et envoyer des choses facile et simple aussi.
Le bouton ou l'icône de la tâche principale de l'application doit attirer les utilisateurs

Les tâches principales des applications se concentrent sur des choses telles que la capture d'images, la création d'une publication, l'ajout de fichiers, le partage, etc.

Par exemple, Snapchat cache tout et incite uniquement les utilisateurs à capturer des photos et des vidéos. De plus, le bouton "Envoyer" demande immédiatement aux utilisateurs de partager leurs histoires avec les autres.

2.1 Rendre les tâches principales facilement accessibles avec les gestes, les menus déroulants et les barres d'onglets flottantes.
Découper des tâches d'édition complexes avec des menus et des commandes spécialement conçus pour les mobiles

Pour de nombreux utilisateurs, les téléphones mobiles sont les appareils informatiques les plus utilisés. Il existe une génération d'utilisateurs qui font un vrai travail sur leurs téléphones mobiles. Par exemple, l'édition de documents n'est plus une affaire exclusivement informatique, car une multitude d'applications mobiles offrent le service.

Microsoft Word et WPS Office offrent une multitude d'outils d'édition et de menus à plusieurs niveaux à la portée du pouce. Ces systèmes de menus intuitifs sont intelligents et puissants permettant aux utilisateurs d'effectuer des opérations complexes et des choix multiples.

2.2 Placement des outils d'édition sur la moitié inférieure de l'écran pour des modifications plus rapides.
Avec l'accessibilité comme objectif, vous pouvez rendre le partage et l'envoi de choses faciles et simples aussi

Ce qui amplifie notre expérience avec notre musique préférée de nos jours, ce sont les options de partage ultra-rapides pour les médias sociaux, souvent à portée de clic.

Vous pouvez utiliser une extension de partage qui glisse vers le bas et permet aux utilisateurs de saisir directement des messages.

2.3 Modèles UX pour le partage d'une seule main de photos, vidéos, musique et plus encore.
Diviser la création ou l'ajout de tâches en plusieurs étapes

La création de tableaux, de favoris et de listes de souhaits peut être un frein, en particulier lorsqu'ils sont placés aux extrémités supérieures. Examinons les modèles qui gèrent les entrées de données en plusieurs étapes.

Flipboard et Airbnb gardent tout en bas et à portée du pouce. De la saisie à la sélection des étapes suivantes ou à l'annulation de l'action est très simple.

2.4 Placer les icônes «Créer» et «Ajouter» à la portée du pouce pour une utilisation fluide à une main.

3. Concevoir un paiement plus rapide et des expériences transactionnelles lorsque vous êtes en déplacement

Qu'Est-ce que c'est?

Selon l'indice de cybersécurité de Kaspersky, 50% des ventes de commerce électronique se produisent sur les téléphones mobiles. Ajoutez à cette transaction commerciale comme la réservation d'un trajet, d'un vol, d'une chambre d'hôtel, de billets de cinéma et de billets de concert et vous réalisez à quel point la conception d'une expérience de paiement mobile est importante. Un rapport du Baymard Institute suggère que 23% des acheteurs qui abandonnent leur panier l'abandonnent en raison du processus de paiement compliqué. Cela est particulièrement vrai pour les acheteurs mobiles pour qui le paiement est un processus en plusieurs étapes où la saisie des données n'est pas aussi facile.

Défis

Le processus de commande nécessite de nombreuses entrées et une attention particulière de la part des utilisateurs.

  • Concevoir une expérience de paiement à une main signifierait que les utilisateurs peuvent effectuer la transaction avec un mouvement minimal du pouce et moins d'étapes.
  • Ceci est particulièrement important pour les utilisateurs en déplacement ou qui doivent effectuer la transaction immédiatement.

Solution

Pour concevoir une expérience de paiement à une main, nous devons minimiser les informations requises des utilisateurs.

  • Lors du choix des variations de produits comme la taille, la couleur, l'heure / la date et autres, elles doivent être facilement accessibles et découvrables.
  • Nous pouvons utiliser des applications comme Google et le portefeuille Apple ou le remplissage automatique à partir de choses comme le trousseau, 1 mot de passe et LastPass pour remplir les informations comme les noms, les cartes de crédit, les adresses, les mots de passe à usage unique.
  • Nous devons également souligner les mouvements simples et minimes du pouce des utilisateurs.
Ajouter des articles aux paniers et choisir les préférences de produit à portée de pouce

La logistique des achats en ligne peut être simplifiée en trois étapes: ajouter des articles aux paniers, sélectionner des variantes de produits et terminer le processus de paiement.

En tant que concepteurs, il devient essentiel pour nous non seulement de rendre ces sélections visibles, mais aussi de les placer à la portée d'un pouce.

Une façon d'atteindre cet objectif consiste à afficher les variations de produit dans un plateau qui glisse lorsque l'utilisateur choisit un article.

Une autre façon est de permettre aux utilisateurs de faire défiler la page et de sélectionner rapidement les variantes d'un produit tandis que l'option "Passer la commande" ou "Acheter" reste statique en bas.

3.1 Flux de paiement en douceur avec options pour ajouter des articles et choisir des variantes de produit.
3.1 Ajout d'articles au panier pour les applications de livraison de commerce électronique sur demande. Crédits vidéo: Shopping Choisir | WE + AR TRBL | Tasty Hamburger App
Utilisation de portefeuilles électroniques et de gestionnaires de mots de passe pour un paiement rapide

Le rapport sur les méthodes de paiement 2019 suggère que plus de 71% des transactions en ligne sont effectuées via des portefeuilles électroniques comme Apple Pay, Google Pay, Alipay, Fitbit, Samsung Pay, YandexMoney, etc. Ces portefeuilles sont non seulement réputés plus rapides, mais ils sont également beaucoup plus sûrs et plus faciles d'accès.

Le processus de paiement peut être rendu plus efficace et plus simple. De plus, vous pouvez également ajouter une option de balayage pour payer pour des conversions plus élevées.

3.2 Modèles UX pour les contrôles de paiement pour les applications mobiles de commerce électronique.
3.2 Modèles UX pour les contrôles de paiement pour les applications mobiles de commerce électronique. (Crédits vidéo: SPACED Challenge (Travel + VR) | Checkout Promocode | Gamification Checkout)

4. Recherche, filtrage et tri du contenu avec l'accessibilité comme objectif principal

Qu'Est-ce que c'est?

Sans la bonne UX, trouver les bons produits ou articles peut être un défi fastidieux pour l'utilisateur. Les outils de recherche, de filtrage et de tri déterminent à quel point il est facile ou difficile pour l'utilisateur de parcourir le catalogue de produits et d'articles du site.

Les filtres sont un excellent outil pour réduire les volumes élevés de contenu et trouver les résultats les plus pertinents.

En théorie, ils sont différents: le tri organise le contenu selon un certain paramètre, le filtrage le supprime de la vue.

Au cours de l’étude sur les listes de produits et le filtrage de Baymard, il a été observé que les sites dont la liste de produits était utilisable moyenne affichaient des taux d’abandon de 67 à 90%. De plus, il y a eu environ 17 à 33% d'abandons d'utilisateurs essayant de trouver exactement les mêmes types de produits à partir de sites de commerce électronique avec un ensemble d'outils légèrement modifié. Cela a entraîné une augmentation d'environ 4X des prospects.

Défis

  • La recherche sur mobile doit être facilement accessible. Par exemple, Youtube, Amazon Prime, Slack, Google Maps rendent difficile pour les utilisateurs d'accéder au menu de recherche en les faisant atteindre le coin supérieur droit.
  • Organiser la hiérarchie d'informations des filtres car il y a trop de paramètres et de catégories pour que les utilisateurs trouvent rapidement ce qu'ils recherchent.
  • Gérez les informations à plusieurs niveaux dans l'interface utilisateur, en particulier lorsqu'il existe de nombreuses catégories et que chaque catégorie contient de nombreux éléments.
  • Changer l'interface utilisateur en fonction de différents états comme «Le filtre est appliqué» et ce que «Les filtres sont appliqués».
  • Tout cela doit être accompli par des utilisateurs à la portée du pouce des utilisateurs.

Solution

  • Utilisez des gestes ou des boutons facilement accessibles pour la recherche. Lorsque les utilisateurs accèdent à l'écran de recherche, faites des suggestions et ouvrez immédiatement la zone de texte.
  • Parlez la langue des utilisateurs et gardez à l'esprit l'intention des utilisateurs lors de l'organisation des filtres. Gardez le bouton filtres / tri à la portée des utilisateurs. Faites également accéder et fermer le menu des filtres d'une seule main.
  • Pour résoudre la complexité de l'information, utilisez soit un contrôle du filtrage en deux étapes ou contrôle de filtrage côte à côte.
  • Appliquez immédiatement les filtres. Rendez les filtres interactifs en fonction des actions des utilisateurs. Autorisez les utilisateurs à choisir plusieurs options. Modifiez les catégories de filtres pour qu'ils correspondent aux filtres appliqués.
  • Afficher d'abord les recommandations, les informations récemment utilisées ou les plus utilisées.

Pour de nombreuses applications, la recherche est l'une des 5 principales fonctionnalités utilisées. Mais de nombreux concepteurs d'applications rendent difficile l'accès à l'icône de recherche. Voir la comparaison ci-dessous pour Apple Maps vs Google Maps et Netflix vs Youtube.

Modèles de recherche UX pour Apple Maps et Google Maps
Comparaison de l'accessibilité de la barre de recherche – Apple Maps vs Google Maps. (Grand aperçu)
Modèles de recherche UX pour Netflix et YouTube
Comparaison de l'accessibilité de la barre de recherche – Netflix vs YouTube. (Grand aperçu)

Certaines applications utilisent l'écran de recherche comme écran de découverte de contenu. Ils recommandent aux utilisateurs ce qu'ils souhaitent, ce qu'ils ont recherché auparavant, les tendances, etc.

4.1 Création d'une page de recherche pour que les utilisateurs découvrent le contenu. (Grand aperçu)
Supprimer la friction et les étapes imminentes de la recherche et du filtrage

Pour rendre les choses très rapides pour les utilisateurs, nous pouvons faire en sorte que lorsqu'ils tapent sur l'icône de recherche dans la barre d'onglets, le clavier s'affiche immédiatement pour que les utilisateurs puissent commencer à taper leurs requêtes immédiatement. Voir les exemples de Netflix et SpotHero.

De nombreuses applications comme Amazon ou Google Drive utilisent la barre de recherche en évidence en haut de la page d'accueil. Dans de tels cas, nous pouvons utiliser des gestes (glisser vers le bas) comme l'application Inshorts pour commencer immédiatement à taper au lieu d'avoir à atteindre le haut et à appuyer sur la barre de recherche.

4.2 Recherche et filtrage simplifiés.
Appuyez deux fois sur l'icône de recherche pour tirer le clavier vers le haut

Si vous souhaitez utiliser votre page de recherche pour afficher des informations aux utilisateurs, vous pouvez également utiliser deux fois pour tirer le clavier comme Microsoft News, Spotify et Reddit Apollo.

4.3 Accéder au clavier en toute simplicité avec un double-clic sur l'icône «Rechercher».
Le menu du filtre accessible par le pouce devrait permettre aux utilisateurs de trouver plus rapidement les informations

Achats en ligne, réservation,à la demandeet d'autres applications peuvent contenir une liste d'articles à choisir parmi les utilisateurs.

La plus grande considération pour la conception d'un menu de filtrage pour les petits appareils est la hiérarchie des informations. Examinons ces exemples pour comprendre comment le filtrage et le tri peuvent être conçus lorsque les options sont nombreuses. Celles-ci montrent comment vous pouvez gérer la complexité de l'information sans laisser souffrir l'utilisation à une main.

De plus, les filtres doivent être réactifs et réactifs aux choix des utilisateurs et indiquer quand les filtres sont appliqués.

Pour rendre ce processus plus réactif, les résultats de la recherche peuvent être filtrés en arrière-plan simultanément lorsque les utilisateurs sélectionnent les choix.

4.4 Tri et filtrage des articles sur les applications mobiles de commerce électronique et de livraison à la demande.
4.4 Tri et filtrage des articles sur les applications mobiles de commerce électronique et de livraison à la demande. Crédit vidéo: Filtres | Autopartage avec des amis.

5. Contrôles de saisie utilisateur tels que formulaires, sélecteurs, sélecteurs, listes déroulantes, curseurs qui constituent les éléments constitutifs d'une application

Qu'Est-ce que c'est?

Avec des écrans plus petits, les biens immobiliers sont plus petits. Les interactions fondamentales avec les utilisateurs doivent être repensées afin d'augmenter la productivité des utilisateurs mobiles.

Des choses comme remplir des formulaires, taper le mot de passe, choisir la date / l'heure, faire une sélection, les popovers devaient bien traduire l'interface tactile sans abandonner les métaphores des PC.

Défis

La saisie de données sur des appareils mobiles est fastidieuse, en particulier lorsqu'il existe un certain nombre de champs de données à remplir.

Traduire les interactions des utilisateurs sur des appareils plus petits n'est pas facile. Les plus grands défis sont:

  • La vitesse d'entrée des utilisateurs doit être très rapide avec un mouvement minimal du pouce des utilisateurs.
  • Les informations doivent être recueillies en un nombre minimal d'étapes.
  • La conception du contrôle d'entrée doit avoir une interface et une métaphore faciles à comprendre.
  • L'expérience devrait être délicieuse et cohérente.
  • Les utilisateurs doivent connaître leur emplacement et les informations ne doivent pas être perdues.

Une fois fait correctement, l'ajout d'entrées dans les trackers, les calendriers et autres pourrait devenir une tâche courte.

Solutions

  • Toute action de l'utilisateur, comme remplir des formulaires ou faire des choix, devrait être plus proche du bas. Le flux d'actions et de choix doit être cohérent sans aucun changement d'interface choquant.
  • Les informations nécessaires pour avancer devraient être à portée de main.
  • Les options d'entrée de données, y compris les notifications, doivent être claires et proches du bas.
  • Les formulaires plus volumineux peuvent être divisés en formulaires multi-étapes et multi-écrans. Cette approche multi-écrans aurait dû aller de l'avant et revenir très facilement.
Correction du remplissage des formulaires à partir des formulaires d'inscription

Nous détestons tous remplir des formulaires d'inscription. Ils prennent du temps et demandent des informations inutiles.

Remplir des formulaires peut être moins laborieux en transformant un long formulaire en plusieurs écrans. L'utilisation de choses comme le remplissage automatique, les boutons accessibles par le pouce pour les étapes suivantes et précédentes, la présence continue du clavier et l'absence de défilement rendent cette approche plus rapide et plus facile.

5.1 Meilleures pratiques pour les flux d'intégration multi-écrans (Crédit vidéo: Zenly & AirBnB)
Obtenez une saisie rapide des utilisateurs avec un mouvement minimal du pouce

Le positionnement des commandes de saisie utilisateur vers le bas de l'écran permet une saisie plus rapide des données et des réponses rapides à l'appel à l'action.

Utilisez des sélecteurs, des listes déroulantes, des défileurs et des curseurs pour fournir des informations aux utilisateurs.

5.2 Contrôles d'entrée utilisateur à une main pour un remplissage précis des formulaires (crédit vidéo: périscope)
Modèles mobiles intelligents pour les contrôles d'entrée utilisateur

Examinons quelques modèles supplémentaires qui facilitent l'obtention des commentaires des utilisateurs.

5.3 Contrôles d'entrée utilisateur à une main pour les formulaires d'application mobile (Crédit vidéo: Peach | Zova Workout & Fitness | Square Order)

6. Motifs divers pour la lecture multimédia, la capture de photos, l'édition de photos et les modèles de navigation sur la carte

Avec plus de 2 millions d'applications sur Google Store et 1,83 million d'applications sur l'App Store, il est devenu impératif pour les concepteurs de faire ressortir leurs applications. Une façon de le faire est de rendre les fonctions communes amusantes et fluides pour les utilisateurs, et cette dernière section est un tour d'horizon des diverses interactions des utilisateurs.

6.1 Oubliez le pincement; Ces applications permettent aux utilisateurs de zoomer et dézoomer avec un seul pouce.
6.1 Que ce soit en sélectionnant des émoticônes, en envoyant des images ou en écoutant des clips audio, les gestes peuvent ajouter faciliter ces interactions avec les applications.
6.1 Que ce soit en sélectionnant des émoticônes, en envoyant des images ou en écoutant des clips audio, les gestes peuvent ajouter faciliter ces interactions avec les applications (Crédit vidéo: Concept Composer | Gamification + Checkout)

Conclusion

Bien que l'accessibilité soit une grande partie de sa conception pour une utilisation à une main, il ne s'agit pas seulement de garantir que tout est proche de la portée des utilisateurs. Les applications qui ont une bonne utilisation à une main permettent également de gagner du temps aux utilisateurs, d'éliminer les frictions, de supprimer les étapes inutiles et, plus important encore, de se concentrer sur l'accélération de «l'utilisation distraite en rafale courte» des applications.

Nous avons examiné de nombreux modèles que les concepteurs peuvent utiliser pour résoudre différents défis UX. Pour en savoir plus, vous pouvez consulter ces sites Web pour trouver des modèles qui vous aident à concevoir pour une utilisation à une main.

Smashing Editorial
(cc, yk, il)