Fermer

février 20, 2020

Comment concevoir des applications mobiles pour une utilisation à une main11 minutes de lecture



À 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…
En savoir plus
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 seule main peut résoudre ces défis.

Vendredi 2007, le monde est entré dans nos mains comme 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 One-Handed UX
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 sont stupides.

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

Mais ce n'est que le début de la dernière décennie où les phablets ont 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 plus grands que 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 a la possibilité d'utiliser l'espace de l'écran pour servir plus de contenu et de fonctions.

Par exemple, le CNN App était parmi les rares à avoir eu un accès anticipé à l'iPhone 5 édité 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 Thumb Zone dans UX UI Design
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

Bien que les écrans plus grands soient parfaits pour afficher plus de contenu, la considération de conception n ° 1 de Steve Les travaux de fabrication de téléphones de 3,5 pouces souffrent – la conception pour une utilisation à une main .

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

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

49% des utilisateurs tiennent leur téléphone avec d'une part spécifiquement pendant qu'ils sont en déplacement. [19659013] Arguments solides pour la conception d'applications à usage d'une seule main. Steven a également constaté que les utilisateurs modifiaient 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 priorité absolue des créateurs d'applications

Nous utilisons beaucoup nos téléphones lorsque nous sommes préoccupés ou dans pressé. 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 seule main beaucoup plus importante que le nombre de 49% suggéré ci-dessus.

téléphones jusqu'à 58 fois par jour, dont 70% de l'interaction mobile dure 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:

Grand aperçu )

Le directeur des produits de Google, Luke Wrobleski, qualifie ces courtes rafales de « un pouce, un globe oculaire » pour une utilisation mobile expérience. 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 et 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, alors vous devez vous concentrer sur la conception de modèles qui ciblent l'accessibilité et un-

 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:

 Thumb Zone pour Mobile Hamburger Menu UI
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'arrivée d'é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 des difficultés et de l'inconfort ont été ressentis lorsque les utilisateurs ont tenté 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 sur 9% de clics en général et 30% sur les éléments de menu .

Utilisez des modèles UX établis pour les scénarios d'utilisation courants des applications pour 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 étudié des centaines d'applications et des milliers de modèles pour trouver les meilleurs modèles d'utilisation à une main. Voyons donc ce qui fonctionne, quels problèmes sont résolus et quels avantages vous en retirerez.

Nous divisons les comportements utilisateur et schémas UX les plus courants en six catégories:

  1. Navigation UX Patterns
    par exemple barres de menus, barres d'onglets et gestes pour se déplacer facilement entre les sections les plus importantes de l'application;
  2. Conception des actions
    Création, modification, publication, ajout, suppression et autres actions que les utilisateurs entreprennent pour utiliser la fonctionnalité principale 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 pour les utilisateurs qui souhaitent rechercher ou parcourir rapidement du contenu;
  5. Modèles d'entrée et d'interaction [19659052] Sliders, pickers, selectors, dropdowns, form fills, zooming, scrolling that make the building blocks of any app;
  6. Miscellaneous Patterns
    Lecture multimédia, capture de photos, retouche photo et modèles de navigation sur la carte. [19659061]1. Conception de la navigation dans une application en gardant à l'esprit l'utilisation à une main

    Qu'est-ce que c'est?

    Le fondement d'une excellente application est une bonne conception de la 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 devrait avoir toutes les sections importantes directement et facilement accessibles.

    Défis

    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 du menu glissant n'est pas facile.

    Les utilisateurs ne devraient pas avoir à se battre 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 d'où les utilisateurs peut 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 à 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 élargie pour quand vous en avez plus
    • 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.
    • Sauter rapidement à une section de la page avec des motifs 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 problème –

    Les menus pleine page peuvent être remplacés par des menus déroulants, qui, comme leur nom l'indique, «survolent» depuis le 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 [19659080] 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

    l'utilisateur est différent et une fonctionnalité qui est 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 des fonctionnalités.
    Les gestes sont faciles à intégrer dans les habitudes des utilisateurs pour une utilisation rapide Navigation

    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 seule 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 n'est pas pas seulement pour 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 Utiliser les gestes pour naviguer à travers plusieurs écrans (Crédit vidéo: Zenly )
    Modèles pour passer rapidement à différentes sections de L'application

    Les applications comportant 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 en hiérarchie et utiliser des modèles UX pour augmenter l'accessibilité et la facilité d'utilisation.

    1.7 Barres à onglets flottants et gestes pour sauter entre les sections.

    2. Modèles à une main pour des actions essentielles telles que la création, l'édition, la publication, l'ajout, la suppression, etc.

    Qu'est-ce que c'est?

    Les utilisateurs passent environ 50% de leur temps sur leur téléphone mobile à s'exprimer librement , l'interaction sociale, les achats en ligne, la gestion des finances, la santé et la productivité, et la planification des événements à venir. Ces modèles UX pilotés par l'action incluent des éléments tels que la création de publications sociales, la modification de documents, la modification, etc.

    Défis

    Lors de la conception d'applications pilotées par l'action, nous devons nous assurer qu'elles ne prennent pas la banquette arrière. Par exemple, avoir un message ou créer un bouton en haut plutôt que 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 principales 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 devrait être facilement accessible sans avoir besoin d'utiliser de seconde main ou de dépassement de capacité.
    2. En plus de cela, les utilisateurs devraient pouvoir terminer l'ensemble du flux de tâches de création et d'ajout 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. Conception de tâches d'édition complexes avec des menus et des commandes d'édition à plusieurs niveaux.
    4. Avec l'accessibilité comme objectif, vous pouvez rendre le partage et l'envoi de choses faciles et simples aussi.
    Le bouton ou l'icône de la tâche principale de l'application doit attirer les utilisateurs dans

    Les tâches principales des applications se concentrent autour de des choses comme la capture d'images, la création d'une publication, l'ajout de fichiers, le partage, etc. Il devient nécessaire que les utilisateurs se concentrent d'abord sur ces derniers et les rendent – accessibles et découvrables.

    Par exemple, Snapchat cache tout et incite uniquement les utilisateurs à capturer des photos et des vidéos. En outre, 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 contrôles conçus Spécifiquement pour les mobiles

    Pour de nombreux utilisateurs, les téléphones portables 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 proposent 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 de multiples choix.

    2.2 Placement des outils d'édition dans la moitié inférieure de l'écran pour des modifications plus rapides.
    Avec l'accessibilité comme objectif, vous pouvez faire du 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 haut depuis le

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

    Création de tableaux, de favoris et de les listes de souhaits peuvent être un frein, surtout lorsqu'elles sont placées 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 à la 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 Placement des icônes "Créer" et "Ajouter" à portée de pouce pour une utilisation fluide à une main.

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

    Qu'est-ce que c'est?

    Selon Kaspersky Cybersecurity Index 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 de Baymard Institute suggère que 23% des acheteurs qui abandonnent leur charrette 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 de données n'est pas aussi facile.

    Défis

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

    • Conception d'un une expérience de paiement à la main signifie 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 qui sont 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 la saisie 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 la simplicité
    Ajout d'articles aux paniers et choix des préférences de produits à 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

    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 est d'afficher les variations de produits dans un plateau qui glisse vers le haut 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 Ajouter des articles au panier pour le commerce électronique sur les applications de livraison à la demande. Crédits vidéo: Shopping Choisissez | 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 e- Des portefeuilles comme Apple Pay, Google Pay, Alipay, Fitbit, Samsung Pay, YandexMoney et autres. Ces portefeuilles sont non seulement réputés être 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 paiements par paiement pour les applications mobiles de commerce électronique.
    3.2 Modèles UX pour les paiements par paiement pour les applications mobiles de commerce électronique. (Crédits vidéo: SPACED Challenge (Travel + VR) | Checkout Promocode | Gamification Checkout )

    4. Rechercher, filtrer et trier le 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. [19659014] 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 Baymard's Product Listings & Filtering study il a été observé que les sites avec une moyenne la convivialité de la liste des produits a connu 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 4 fois du nombre de prospects.

    Défis

    • La recherche sur mobile devrait être facilement accessible. Par exemple, Youtube, Amazon Prime, Slack, Google Maps empêchent 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 peuvent trouver rapidement ce qu'ils recherchent.
    • Gérer 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.
    • Modification de l'interface utilisateur en fonction de différents états comme «Le filtre est appliqué» et "Des filtres sont appliqués".
    • Tout cela doit être accompli par les utilisateurs à portée de 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. Vous pouvez également accéder et fermer le menu des filtres d'une seule main.
    • Pour résoudre la complexité des informations, utilisez un contrôle de filtrage en deux étapes ou un contrôle de filtrage côte à côte.
    • Appliquez immédiatement des 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.
    • Affichez d'abord les recommandations, les informations récemment utilisées ou les plus fréquemment 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, ce qui est tendance, etc.

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

    Pour rendre les choses vraiment 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 apparaît immédiatement pour que les utilisateurs puissent commencer à taper immédiatement leurs requêtes. 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 adaptés au pouce.
    Double -Appuyez 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 appuyer deux fois pour tirer le clavier comme Microsoft News, Spotify et Reddit Apollo.

    4.3 Accès au clavier simplifié en double-cliquant sur l'icône «Rechercher».
    Le menu du filtre accessible au pouce devrait permettre aux utilisateurs de trouver plus rapidement les informations

    Achats en ligne, réservation, à la demande et d'autres applications peuvent également 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 une utilisation à une main souffrir.

    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 recherche peut être filtré en arrière-plan simultanément lorsque les utilisateurs sélectionnent les choix.

    4.4 Tri et filtrage des éléments sur le commerce électronique et la livraison à la demande des applications mobiles.
    4.4 Tri et filtrage des éléments sur le commerce électronique et la livraison à la demande Application mobile. Crédit vidéo: Filtres | Autopartage avec des amis

    5. Contrôles d'entrée 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 espaces 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 se traduire pour toucher l'interface sans abandonner les métaphores des PC.

    Défis

    La saisie de données sur les appareils mobiles est fastidieuse, surtout quand il y a 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 les suivants:

    • La vitesse d'entrée des utilisateurs doit être très rapide avec un minimum de mouvement 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 compréhension facile interface et métaphore.
    • L'expérience doit être agréable 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, calendriers et autres pourrait devenir un tâche courte.

    Solutions

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

    Nous détestons tous remplir des formulaires d'inscription. Ils prennent beaucoup de 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 )
    Obtenir une saisie rapide des utilisateurs avec un mouvement de pouce minimal

    Le positionnement des commandes de saisie utilisateur vers le bas de l'écran permet une saisie plus rapide des données et un appel rapide à l'appel réponses d'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: Periscope )
    Motifs mobiles intelligents pour les contrôles de saisie utilisateur

    Examinons quelques autres motifs qui facilitent la saisie des utilisateurs.

    5.3 Contrôles de saisie utilisateur à une main pour les formulaires d'application mobile (crédit vidéo: Peach | Zova Workout & Fitness | Ordre carré )

    6. Motifs divers pour la lecture multimédia, la capture de photos, la retouche photo et les modèles de navigation dans les cartes

    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 d'y parvenir 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 faire un zoom avant et arrière avec un seul pouce.
    6.1 Que ce soit pour sélectionner des emojis, envoyer des images ou écouter des clips audio, les gestes peuvent ajouter faciliter ces interactions avec les applications.
    6.1 Que ce soit pour sélectionner des emojis, envoyer des images, ou en écoutant des clips audio, les gestes peuvent ajouter faciliter ces interactions avec les applications (crédit vidéo: Concept du compositeur | Gamification + Checkout )

    Conclusion

    Bien que l'accessibilité soit une grande partie de il est conçu pour une utilisation à une main, il ne s'agit pas seulement de s'assurer 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 par 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.

     Editorial fracassant (cc, yk, il)




Source link