Fermer

mars 8, 2021

Techniques de conception mobile obscures qui stimulent l'UX


À propos de l'auteur

Gert Svaiko est un rédacteur professionnel et travaille principalement avec des sociétés de marketing numérique aux États-Unis et dans l'UE.
En savoir plus sur
Gert

Pour inspirer les concepteurs mobiles, voyons comment certaines solutions de conception intelligentes abordent la navigation mobile, les dialogues de confirmation, les animations et la gamification de l'expérience d'attente.

Ce n'est un secret pour personne que l'utilisation des smartphones a doublé au cours des cinq dernières années. pour un estimé à 3,8 milliards d'utilisateurs cette année. Cela nous indique clairement où se trouve l'attention des internautes et à quel point les concepteurs Web mobiles sont importants pour améliorer l'expérience utilisateur.

Nous avons vu de nombreuses expériences de conception Web ces dernières années adoptées par des entreprises de toutes tailles. Ces changements incluent les tendances telles que le tristement célèbre défilement parallaxe, des dispositions non traditionnelles et une accessibilité améliorée avec le mode sombre. Cependant, de nombreux chemins restent à explorer, si nous sommes prêts à sortir des tendances.

Pour faire circuler cette créativité, examinons quelques joyaux cachés du design liés à la navigation et aux dialogues de confirmation , l'expérience d'attente et les animations de balayage. Bien que ces solutions soient pour la plupart non conventionnelles, il ne s’agit pas de les mettre en valeur pour elles-mêmes. Les solutions de conception doivent être construites avec les piliers d'accessibilité et de convivialité mais elles peuvent être affinées en fonction de vos objectifs ultimes d'interaction et d'expérience utilisateur.

Alors, apportons ces élégants hors des sentiers battus

Repenser la navigation

Le changement de épinglant le menu de navigation en bas a changé la donne pour les appareils portables car il permet un contrôle plus naturel du pouce la navigation. Mais au fur et à mesure que les écrans des smartphones deviennent plus volumineux, la portée du pouce devient de plus en plus restreinte. Par conséquent, nous attendons depuis longtemps de nouvelles solutions de conception mobile qui permettent un accès facile en utilisant uniquement le pouce.

Certaines approches créatives de ce problème combinent un design élégant et des fonctionnalités. Prenons quelques exemples.

Nature Encyclopedia

Nature Encyclopedia est une excellente ressource d'apprentissage pour les jeunes et les adultes. Il présente des infographies interactives et des illustrations ponctuelles, mais ce n'est pas la partie qui capture notre curiosité.

 Navigation à défilement de l'Encyclopédie de la Nature
Navigation à défilement de l'Encyclopédie de la Nature (Source: tubik studio ) ( Grand aperçu )

En plus de toutes les fonctionnalités de balayage auxquelles nous nous sommes habitués dans d'autres applications mobiles, il existe une fonction astucieuse qui vous permet de modifier les informations affichées en faisant défiler une molette . Vous pouvez également accéder aux informations précédemment affichées simplement en faisant défiler dans l'autre sens.

Bien que la molette d'action ait été implémentée pour faciliter l'accès aux informations, elle pourrait également être utilisée pour naviguer entre les écrans. Cela pourrait potentiellement résoudre la restriction de la portée du pouce sur les bords gauche et droit de l'écran, car vous pourrez désormais glisser sans effort vers la gauche ou la droite pour naviguer.

V For Wiki

Vous pouvez déjà accéder à Wikipedia dans le navigateur de votre téléphone. Cependant, V for Wiki l'a rendu encore plus accessible en présentant un style élégant de présentation du contenu. Il comporte une carte du monde astucieuse qui affiche instantanément des informations relatives à la zone à partir de laquelle vous naviguez.

 V pour la navigation à défilement Wiki
V pour la navigation à défilement Wiki (Source: V pour Wiki ) ( Grand aperçu )

Bien que la carte interactive rend la navigation beaucoup plus divertissante, ce n'est pas la fonctionnalité qui a attiré notre attention en premier.

Si vous regardez la navigation, en haut du guide, vous Vous verrez des lignes interactives vers divers points de repère et vous pourrez faire défiler les emplacements horizontalement. Il s'agit d'une autre façon magnifiquement conçue de naviguer dans le menu, car vous pouvez utiliser votre pouce sans effort.

Cette approche pourrait servir d'inspiration pour un menu de navigation déroulant dans lequel un client peut amener l'extrême gauche

Ada

Ada est une application pour la start-up Ada Health qui vise à révolutionner notre approche le médecin avec des solutions modernes, telles que l'IA, les appels vidéo et la conception interactive. Nous sommes tous passés par le terrier de la recherche sur Google pour obtenir des conseils sur les symptômes, donc obtenir un accès direct à des informations fiables est une aubaine.

 Navigation facile pour le pouce d'Ada
Navigation facile pour le pouce d'Ada (Source: ] Daniel Diggle ) ( Grand aperçu )

Outre l'aspect épuré de l'application, il est clair dès le départ qu'elle est conçue pour être utilisée sans effort avec le pouce, car le bouton de navigation est sur le en bas à droite et ouvre le menu dans une barre latérale à droite . De plus, tous les éléments actionnables sont à la portée du pouce, de sorte que l'utilisateur n'a généralement besoin que de cliquer sur la barre latérale inférieure ou droite pour se rendre là où il veut aller.

Ada, alors, est un autre exemple de navigation solide intégrée au concept de l'application dès le départ. L'expérience de la navigation dans l'application semble naturelle et accessible.

Révision des boîtes de dialogue de confirmation

Les boîtes de dialogue de confirmation font face aux mêmes défis que les menus de navigation parce que les gens tiennent leur smartphone d'une seule main . Les options sont généralement binaires, l'une sur le côté gauche et l'autre sur la droite. Au fur et à mesure que les appareils portables s'élargissent, l'accès à l'un des deux choix de dialogue devient compliqué en raison de la plage limitée de mouvement du pouce .

Examinons quelques solutions non conventionnelles aux dialogues de confirmation difficiles à atteindre. [19659034] Vice Versa

Vice versa est un modèle d'interface utilisateur diagonale pour les options binaires . Il prend en compte le mouvement naturel du pouce et reconnaît les limites des mouvements anormaux. Sur un petit écran, vous pouvez atteindre le côté opposé avec votre pouce, mais cela crée de la tension et est inconfortable.

 Boîte de dialogue de confirmation vice versa diagonale
Boîte de dialogue de confirmation vice versa diagonale (Source: Michael Oh ]) ( Grand aperçu )

Le motif vice versa résout ce problème en divisant l'écran en diagonale en deux permettant de créer des options binaires en utilisant uniquement le pouce. Non seulement cela permet au pouce d'accéder plus facilement aux deux options, mais le problème de précision est résolu en donnant aux utilisateurs une plus grande zone à toucher.

Bien que le concept vise à rendre les mécanismes de vote facilement accessibles, vous pouvez adapter ce logiciel interactif. conception à toutes sortes d'options binaires.

L'un des inconvénients évidents du modèle est qu'il est fortement optimisé pour une utilisation droitière. La solution à ce problème est qu'un client peut secouer le téléphone et l'orientation changera. Bonne solution? Nous ne savons pas, mais certainement une alternative intéressante pour les dialogues de confirmation.

Omni Swipe

Une autre solution pour les boutons de confirmation difficiles à atteindre (ou navigation, d'ailleurs) se trouve dans Omni Swipe . Bien que ce concept soit destiné à personnaliser l'interface utilisateur d'un smartphone, il pourrait également être adapté aux applications autonomes.

 Concept de confirmation et de navigation Omni Swipe
Concept de confirmation et de navigation Omni Swipe ( Grand aperçu ) [19659045] Concept de confirmation et de navigation Omni Swipe « />
Concept de confirmation et de navigation Omni Swipe (Source: PR Newswire ) ( Grand aperçu )

Alors que la plupart des boutons de navigation ouvrent le menu horizontalement ou verticalement, Omni Swipe permet aux utilisateurs d'accéder aux commandes dans la plage de mouvement du pouce . Cela résout le défi complexe de créer une solution de confirmation pour toutes les largeurs d'écran, car, quelle que soit la taille, les éléments actionnables apparaissent sous le pouce de l'utilisateur.

Contrairement au dernier concept exploré, qui n'autorise que des options binaires, cette solution a pratiquement aucune limitation aux choix que vous pouvez ajouter au menu.

Gamifying the Waiting Experience

Dans une étude réalisée par Statista en 2020, 65% des répondants aux États-Unis ont déclaré utiliser un smartphone pour Internet achats au cours des 12 derniers mois. Cela indique que l'expérience utilisateur du commerce électronique et la conception mobile vont de pair. De plus, si nous regardons les plates-formes de commerce électronique modernes nous pouvons voir que presque toutes mettent en évidence des thèmes optimisés pour les mobiles. Ensemble, ces deux facteurs brossent un tableau clair de la direction que prend l'industrie de la vente au détail en ligne.

Cependant, même la moindre perturbation peut entraîner l'abandon d'un panier ou créer une expérience d'achat négative. La recherche sur la psychologie de la perception de la vitesse montre que l’humeur d’une personne affecte sa perception du temps. Dans un environnement détendu et joyeux, vous sentirez le temps passer. Cependant, si vous êtes grincheux, de mauvaise humeur ou anxieux, le temps semble presque s’être arrêté.

Écrans de chargement flux d’expédition, étapes de préparation, etc. Regardons des exemples de la façon dont les concepteurs mobiles ont abordé la perception de la vitesse dans l'industrie de la commande et de la livraison de nourriture en ligne.

Wolt

Nous avions l'habitude de faire la queue avec anxiété à une cantine. Eh bien, nous le faisons toujours, mais de nos jours, nous pouvons facilement commander de la nourriture en ligne et nous la faire livrer. Cependant, nous devons encore attendre que le courrier arrive.

Wolt est l'une des nombreuses applications qui vous permettent d'acheter de la nourriture et de la faire livrer à votre porte par un coursier. Si vous n'aviez rien de mieux à faire, vous auriez l'impression qu'au lieu de faire la queue, vous attendriez le coursier à la place.

L'expérience d'attente ludique de Wolt (Source: Wolt app ])

Wolt possède de nombreuses fonctionnalités astucieuses qui ciblent cette perception de la vitesse. Il vous montre la progression par étapes, vous avertit une fois qu’une étape est terminée et vous montre la position GPS du courrier. Il y a aussi un petit jeu astucieux caché qui vous aide à passer le temps plus rapidement et à élever votre humeur (si vous êtes d'accord pour être un peu compétitif). Dans ce mini-jeu, vous appuyez sur l’écran autant de fois que vous le pouvez en cinq secondes pour essayer de battre l’équipe de Wolt.

Bien qu’une fonctionnalité simple, elle joue directement dans la psychologie humaine. Même si l'élément de jeu ne supprime pas votre sensation de faim, il vous aide à passer le temps plus rapidement.

Bolt Food

Dans l'exemple précédent, nous avons vu comment le jeu des temps d'attente aide les utilisateurs à passer le temps plus vite. Bolt Food est un autre exemple de coursier de nourriture confronté au même défi de temps d'attente.

Expérience d'attente animée Bolt Food (Source: Dribbble )

Leur approche pour montrer les progrès consiste à animer les étapes de livraison . Bien qu'il ne s'agisse pas d'un jeu simple, il combine toujours une sensation de mouvement avec la perception du temps par l'utilisateur. En bref, le principe est que si quelque chose bouge, alors il progresse. Si l'utilisateur fixait un écran sans vie, sa perception du temps ralentirait et, avec un estomac vide, cela le rendrait plus anxieux.

Donc, si votre service repose sur plusieurs étapes, au lieu de prendre le commande et en envoyant un e-mail de confirmation par la suite, interagissez avec le client en montrant les progrès à toutes les étapes.

Utilisation de l'animation pour faire glisser

Les écrans de cartes ont longtemps été un favori des designers . Les clients peuvent facilement accéder à différentes parties d'une application simplement en glissant et en changeant de carte . Cependant, au lieu d'appliquer simplement les aspects de l'interface utilisateur de la fonction de balayage, vous pouvez gamifier l'application pour améliorer l'expérience utilisateur.

Il est courant que les gens réagissent au mouvement et soient entraînés dans animation. Examinons quelques exemples qui utilisent le principe de gamify en action.

Bookotel

Bookotel est une application de réservation en ligne pour les restaurants et les cafés. Ce qui frappe à la maison avec la conception de cette application, c'est la façon innovante de créer l'animation de balayage dans les cartes d'introduction.

Concept d'animation de balayage de Bookotel (Source: Behance )

Au lieu de simplement passer à la carte suivante, toute l'application semble se déplacer et se transformer en l'image, le message et l'invite suivants.

Nous ne voyons pas cette interaction appliquée à d'autres parties de l'application , nous nous retrouvons donc avec quelques conjectures sur son apparence à plus grande échelle. Cependant, vous ne pouvez pas nier que cela attirerait l'utilisateur et le ferait jouer avec l'application.

Il convient de noter que ces mouvements pourraient devoir être réajustés si le client opte pour mouvement réduit pour empêcher les problèmes d'accessibilité de s'infiltrer.

Teatr Lalka

Teatr Lalka a été l'un des premiers théâtres de marionnettes en Pologne et a maintenant plus de 75 ans. Cependant, son site Web est tout sauf ancien. Son motif dominant est l'interactivité ce que vous espérez voir sur un site Web lié au divertissement.

Conception d'animation mobile Teatr Lalka (Source: Teatr Lalka )

] Les premières animations que vous voyez en visitant le site Web de Teatr Lalka sont les marionnettes. Tout en représentant les marionnettes réelles utilisées dans les spectacles, elles servent également un autre objectif: la gamification. Vous pouvez faire défiler les marionnettes animées dans un carrousel et interagir avec elles en cliquant dessus, ce qui déclenche le son et les vibrations de votre smartphone. Les marionnettes réagissent également au basculement. C'est un merveilleux exemple de la façon dont un site Web mobile peut interagir avec l'utilisateur dès la première page.

Vous pouvez appliquer les mêmes techniques à d'autres applications et sites Web, en améliorant l'expérience utilisateur et en interagissant de manière ludique avec les visiteurs.

Unconventional Solutions Préparez la voie à la conception mobile du futur

Vous avez là des solutions intelligentes à des problèmes apparemment simples; des solutions qui, espérons-le, améliorent à leur tour l'expérience utilisateur. Bien que suivre les tendances ne soit pas nécessairement une mauvaise chose, virer au bord de l'innovation peut donner un résultat plus gratifiant.

L'expérience utilisateur devenant une partie de plus en plus critique de notre vie numérique, il est payant de voir les choses d'un point de vue psychologique. N'ayez pas peur de tester des solutions de pointe qui jouent sur les habitudes, la psychologie et le sens de la commodité des gens. Cela pourrait en valoir la peine.

Autres ressources