Agence WEX

Étiquette : app

  • Que faut-il retenir de la nouvelle application de voyages-sncf.com ?

    Pour Voyages-sncf.com, l’application mobile est un pilier stratégique de ses ventes et de sa relation client. Offrir une expérience utilisateur proche de la perfection est donc indispensable. Et, comme je l’ai expliqué sur Capitaine-commerce.com, les moyens déployés pour y parvenir sont impressionnants. On peut donc légitimement assumer que « le boulot est bien fait » et que l’application reflète un exemple à suivre, d’autant que Voyages-sncf.com « drive » le marché grâce à sa position de leader.

    Quels sont les éléments à reprendre de cette dernière version ?

    Le plus impressionnant : l’utilisation de la reconnaissance vocale

    Même si elle ne rentre que doucement dans les moeurs (en France, mais aux Etats-Unis, elle est de plus en plus intégrée à la vie des américains), il ne faut pas douter qu’elle deviendra une habitude comme une autre d’ici un ou deux ans. Alors, autant s’y préparer le plus vite possible. Et c’est ce que fait Voyages-sncf.com en ayant intégré une partie de son chatbot dans la réservation de billet.
    Il suffit de dire par exemple : « Je veux partir demain de Lille pour aller à Paris à partir de 10h » et l’app vous sortira toute une liste de résultats répondant à votre demande. Sans erreur !
    Quand on y réfléchit, la performance technologique qu’il y a derrière est très impressionnante et repose sur la fameuse intelligence artificielle et le big data.

    Une véritable simplification de l’interface

    L’agence de voyages de la SNCF va là aussi dans le sens du marché en rendant son interface plus simple, composée de moins d’éléments, et plus facile à utiliser.
    Mais comment ? Voyons un peu cela.

    Un écran d’accueil limité à une fonctionnalité

    La recherche est mise très en avant sur l’écran d’accueil et reflète la fonction principale de l’application. Elle est positionnée en bas d’écran pour pouvoir être plus facilement manipulée que si elle était en haut.
    Ecran accueil app voyages-sncf oct 2016

    Un écran de recherche plus intuitif

    Là aussi l’information a été limitée de manière à permettre à l’utilisateur de se concentrer sur sa tâche.
    Ecran recherche app voyages-sncf oct 2016
    Les dates de voyages sont affichées sous forme d’onglets bien visibles en haut de l’écran. Le nombre de voyageurs apparait également clairement sous ces mêmes onglets. Toute l’information nécessaire à la composition du voyage est donc rassemblée dans la partie supérieure de l’écran pour permettre un rapide contrôle d’un coup d’oeil. La signifiance des boutons et l’affordance des éléments de l’interface sont bonnes. Il est, par exemple, assez aisé de deviner que l’onglet de date à gauche peut-être touché pour être modifié. Pour l’ajout de nouveaux éléments dans la commande, le signe « + » est systématiquement utilisé ce qui là aussi rend la compréhension de l’interface naturelle.
    Le nombre de couleurs est très restreint : bleu et blanc. Une photo évoquant un ciel bleu est « collée » en fond d’écran et crée la partie émotionnelle de l’interface, la promesse que les choses se passeront bien avec Voyages-sncf.com.

    Un gros effort de lisibilité sur les résultats de recherche

    app-voyages-sncf-3
    Les résultats de recherche ont également été retravaillés de manière à rendre leur lecture plus rapide et plus simple. Le prix est le critère principal mis en avant en l’affichant en gras et dans une police de caractère de taille supérieure aux autres textes. Une couleur rouge-orange vive signale les prix promos. On ne peut donc pas les manquer.
    Le second critère de choix est bien sûr l’horaire et de par sa position à gauche des blocs d’offres, on comprend que c’est lui qui ordonne l’ordre d’affichage. L’heure de départ est majorée par rapport à l’heure d’arrivée, encore une fois en jouant sur une taille de caractères plus grosse.
    Grâce à une petite flèche grise très discrète située en bas à droite de chaque bloc, des détails sur chaque offre peuvent être affichés. Sont alors proposées les différentes options pour chaque offre, ainsi que le détail du trajet (services à bord du train, durée du trajet, changements). L’information affichée est limitée et l’espacement entre les éléments est important afin de contribuer encore plus à rendre cette simplicité évidente.
    app-voyages-sncf-4

    Une étape supplémentaire peut-elle nuire à la conversion ?

    Le choix de la place dans le wagon a pris une importance nouvelle dans l’application en étant devenue une étape à part entière dans le processus de commande. Je ne peux dire si cela aura un impact négatif sur le taux de conversion, mais on peut supposer que le besoin et la demande ont été forts pour avoir apporté cette modification à une fonction qui n’était que secondaire auparavant.
    app-voyages-sncf-5

    Conclusion rapide

    Il reste encore beaucoup à dire sur l’application de Voyages-sncf.com, mais quelques lignes de blog ne peuvent y suffire. Dans le meilleur des cas, une web analyse plus un test utilisateur complet permettrait réellement de connaître la qualité de l’UX et de trouver de nouveaux moyens de l’améliorer.
    Ce qu’il faut en retenir est toutefois la volonté de vouloir simplifier l’interface tout en gardant sa complexité fonctionnelle. C’est aujourd’hui le challenge de beaucoup d’applications.

    Le replay :

  • Analyse UX de l’application mobile de La Poste

    La page d'accueil de l'application est on ne peut plus limpide, grâce à un graphisme coloré, mais pas trop, et à une limitation volontaire du nombre d'éléments d'interface visible à l'écran
    La page d’accueil de l’application est on ne peut plus limpide, grâce à un graphisme coloré, mais pas trop, et à une limitation volontaire du nombre d’éléments d’interface visible à l’écran

    L’application mobile de La Poste permet d’accéder désormais à de nombreux services offerts par notre postier national : achat de timbres, envoi de recommandé, affranchissement de courrier. La Poste est bien entrée dans l’ère du digital, mais son application mobile est-elle à la hauteur de ses ambitions ? C’est ce que nous allons voir (vidéo en bas de page)

    Une application au design simple et engageant

    Le gros point fort de l’application, je trouve, c’est son design graphique. Simple : il est composé de couleurs douces, pastels, peu agressives, reposantes. Ce que j’appelle la densité d’informations à l’écran est faible : il y a peu ou pas beaucoup d’éléments visibles par page. On n’a pas entassé les liens, les images, les boutons, etc. pour en faire une bouillie informe.
    Les espacements entre ces éléments sont suffisamment grands pour qu’ils se distinguent bien les uns des autres. La taille des éléments cliquables est suffisamment grande également pour que l’utilisateur n’ait pas besoin d’être trop précis pour les viser et donc pour qu’il n’ait pas besoin de se concentrer trop pour y arriver (économie d’énergie).
    L’ensemble présente donc un aspect avenant et fédérateur qui prépare l’utilisateur à une bonne expérience. Que l’utilisabilité soit bonne ou pas, un premier bon point est de donner à l’interface cet aspect qui met en confiance, et, donnera à l’utilisateur une plus grande capacité de tolérance.

    Dans la boutique, point trop de produits n'en faut. Les éléments d'interface sont grands et facilement cliquables. L'application en devient agréable à utiliser.
    Dans la boutique, point trop de produits n’en faut. Les éléments d’interface sont grands et facilement cliquables. L’application en devient agréable à utiliser.

    Une bonne structuration

    Une application sera facile à utiliser d’autant plus que ses fonctionnalités et son architecture seront faciles à mémoriser.
    De ce côté là aussi, c’est réussi. Des codes couleurs forts sont utilisés pour aider l’utilisateur à se repérer entre les différentes « grosses » fonctionnalités. Le menu principal de navigation ne comporte que 5 éléments. D’autres existent, mais sont affichés en gris, ce qui minimise leur importance et permet de diminuer la charge cognitive sur le cerveau de l’utilisateur lorsqu’il regarde l’écran d’accueil.
    L’application utilise beaucoup d’icônes pour aider au repérage. Parfois signifiantes, parfois pas, elles sont censées aider à accélérer la reconnaissance des liens et des fonctions de l’app. Le cerveau allant plus vite à regarder les images simples qu’à lire des texte. Il y en a beaucoup, peut-être trop. Parfois, elles ne sont pas utiles, comme dans l’onglet suivre un envoi. Il n’est donc pas évident que les utilisateurs s’appuieront vraiment sur ces icônes pour accélérer leur navigation, d’autant que la fréquence d’utilisation pour un particulier ne doit pas être très élevée (combien de fois par an achetez-vous des timbres, envoyez-vous un colis ou un recommandé ?). Leur utilité n’est pas totalement avérée, mais, en tout cas, elles ne dégradent pas l’expérience utilisateur.

    Si les icônes peuvent aider à la navigation, l'app en utilise peut être un peu trop. Qui mémoriserait toutes ces icônes ?
    Si les icônes peuvent aider à la navigation, l’app en utilise peut être un peu trop. Qui mémoriserait toutes ces icônes ?

    Vous reprendrez bien un peu de fun ?

    Au fond, ce qu’il manque un peu à l’application de La Poste, c’est un peu de fun, un peu d’animation, un peu d’effets de surprise (je ne parle pas des bugs). La Poste peut très bien se permettre d’avoir une image un peu « amusante » et ça aurait certainement été une bonne idée d’introduire des micro-animations au survol ou au toucher sur certains éléments de l’interface. En effet, l’ensemble est très sérieux (notamment par l’adoption de graphismes « carrés »), trop sérieux.

  • Comment développer une application mobile efficacement ? Le cas Zalando.

    En terme d’expérience utilisateur, la nouvelle application mobile de Zalando, n°1 de la mode en Europe, apporte son lot d’innovation qu’il serait dommage de ne pas connaître. Notre Capitaine Commerce s’est lancé la semaine dernière dans son analyse « live ». En voici le résumé par écrit et la vidéo en bas de page

    Une interface simplifiée

    La concurrence sur les applications mobile étant plus que féroce, il est primordial de proposer une expérience utilisateur réussie dès la première utilisation. C’est le cas de l’app de Zalando. Et cela grâce à plusieurs subterfuges qui donnent à l’utilisateur final l’impression d’une application simple et facile à utiliser.

    Une page d'accueil épurée
    Une page d’accueil épurée avec très peu d’éléments visibles au premier abord. Voilà qui repose le regard et donne envie d’avancer à l’utilisateur.

    Surprise ! Il n’y a pas de navigation. En fait, si, il y en a une, même si elle est un peu cachée, ce qui n’est pas plus mal. Ainsi, l’attention de l’utilisateur est soit portée vers le moteur de recherche, soit directement vers les catégories de produits mises en avant. Résultat : une interface plus légère visuellement, plus simple, plus attirante.
    Mieux encore, et dans une intention d’efficacité et de rapidité, l’ensemble des contenus de l’écran d’accueil peuvent être personnalisés en fonction des préférences utilisateurs. Mais ne pensez pas à un configurateur compliqué. Non, Zalando ne vous demande que si vous êtes un homme, une femme ou si vous cherchez des vêtements pour vos enfants. Une fois le choix effectué, pour pourrez le changer à tout moment.
    App Zalando
    Ecran de choix des préférences pour les femmes…

     
    App Zalando
    … et pour les hommes…

     
    Petite attention délicate, qui rend compte d’une autre façon de penser les apps, je suis accueilli par un message me souhaitant la bienvenue de manière personnalisée également. Sans compter une petite phrase d’accueil dont le contenu change en fonction, par exemple, du contenu de mon panier. Chaque détail a son importance, n’est-ce pas ?

    Une navigation plus fluide, plus intuitive et plus libre

    L’aspect le plus innovant de l’app Zalando repose dans le fait que la navigation y est devenue beaucoup plus libre et plus agréable. Contrairement à beaucoup d’apps, il y devient possible de slider avec le doigt soit à l’horizontale, soit à la verticale, depuis la fiche produit. Le premier faisant défiler les différentes vues du produit. Le deuxième permettant de passer d’un produit à l’autre dans la liste. Plus besoin de revenir en arrière dans la page liste !

    App Zalando
    Vue zoomée sur un produit. Tout l’écran est occupé par la photo.

     
    App Zalando
    La fiche produit en mode normal. Même dans cette configuration, beaucoup d’espace est donné à la photo.

     
    Mieux encore : le mode zoom fonctionne un peu comme la touche majuscule d’un clavier d’ordinateur. Vous pouvez l’activer ou le désactiver à volonté pour pouvoir naviguer soit en mode d’affichage normal, soit en mode zoomé permanent. C’est une solution qui offre une nouvelle expérience de navigation beaucoup plus fluide, plus immersive, autant que cela soit possible sur un terminal téléphonique. Et qui, c’est quasiment certain, devrait contribuer à augmenter le temps de navigation.
    Rapidité : il est impossible de tester la rapidité d’une application sans faire de véritables mesures. Mais je dois avouer que mon test en vidéo et en 4G n’a souffert d’aucun ralentissement. Cela reste à vérifier, mais il est fort probable que les concepteurs de l’app Zalando aient aussi fait le ménage du côté du code.

    Le paiement rendu transparent avec Touch ID

    A ma grande surprise, j’ai découvert via l’app de Zalando qu’il était désormais possible d’exploiter Touch ID,  la fonction d’identification digitale de l’iPhone pour pouvoir s’identifier sur une application mobile. Et c’est réellement un grand pas en avant dans l’amélioration de la conversion des applications mobiles. Toute la transpiration nécessaire à s’identifier sur la plupart des applications disparait ici en étant remplacée par un simplement toucher de doigt sur le bouton principal de l’iPhone. Une fonction qui prend encore plus de sens pour un marchand dont la fréquence d’achat doit être plutôt élevé pour les clientes fidèles.

    App Zalando Paiement
    Lors du passage au paiement, Touch ID est proposé à l’utilisateur pour qu’il puisse s’identifier simplement.

     
    App Zalando Paiement
    Touch ID se configure depuis les préférences utilisateurs.

    Comment Zalando est arrivée à ce résultat ?

    Ce qu’il faut retenir par dessus ces innovations en terme d’expérience utilisateur est aussi la méthode pour y parvenir. L’application a été conçue en interne par l’équipe web de Zalando à qui une autonomie presque totale a été donnée. Du GO à la validation des principes de l’utilisation, à peine 4 semaines se sont écoulées. Et ceci sans attendre à chaque fois les décisions du top management.
    Les équipes ont bien sûr travaillé en mode agile, mais y ont ajouté une touche d’auto-apprentissage. 20% du temps du projet y était consacré. D’où un temps de développement record de 3 mois pour livrer l’application !
    Comme quoi une bonne expérience utilisateur n’est pas qu’entre les mains des ux designers ou des développeurs, mais dépend entièrement d’un mode de management agile, faite de courtes phases d’auto-apprentissage, mais aussi d’une bonne dose d’autonomie, ainsi que d’une collaboration accrue entre les compétences métiers. Un exemple à suivre et dans lequel Wexperience peut aussi vous accompagner.

    Pour ceux et celles qui auraient manqué le webinar :