Comment nous utilisons la navigation, la recherche et les alertes pour créer une excellente expérience utilisateur sur SmartHub®

En conséquence de cet engagement, nous revisitons régulièrement certains des éléments de base de notre plateforme, tels que la typographie, la navigation et la recherche. Nous passons des heures à essayer de comprendre comment les employés interagissent avec eux et quels sont leurs défis que nous pouvons aider à résoudre en améliorant la plateforme.

En conséquence, nous avons observé le comportement des utilisateurs suivant :

• Les nouveaux utilisateurs ont tendance à scroller
• Les utilisateurs réguliers utilisent plus majoritairement le moteur de recherche

Armés de ces connaissances, nous avons construit notre navigation pour faciliter l'engagement avec la plateforme pour les employés de nos clients. Cela inclut :

• Nouvelles alertes informatives et personnalisées

De plus, des améliorations des fonctionnalités sur :

• La barre de menu de navigation supérieure
• La boîte de recherche principale
• La typographie de la plateforme

Nouvelles alertes informatives et personnalisées

Pour une meilleure expérience utilisateur, un site web doit toujours tenir les utilisateurs informés, en fournissant des retours appropriés. En plus des indicateurs visuels et des messages de validation, nous tenons également nos visiteurs informés des changements sur la plateforme et de l'état d'un événement via des 'Alertes'.

Les alertes sont un canal de communication extrêmement précieux car elles permettent aux employés de gagner du temps en leur évitant de découvrir personnellement ce qui est nouveau sur leur plateforme et ce qui les intéresse. Nous fournissons des alertes sur site, par email et par navigateur afin que les visiteurs ne manquent jamais les mises à jour importantes. Bien sûr, les employés peuvent choisir les alertes qu'ils souhaitent recevoir et les canaux par lesquels les recevoir.

Une alerte utile est de notifier l'employé lorsque son Cashback a été approuvé et est prêt à être utilisé. Une autre est lorsque quelqu'un a commenté un article qu'il a écrit. Avec de nouvelles alertes mises en ligne régulièrement, nous croyons vraiment qu'elles deviendront une section incontournable du site pour tous les employés.

La barre de menu de navigation supérieure

Notre objectif est de garantir que les utilisateurs naviguent sur la plateforme avec facilité. Nous y parvenons en nous concentrant sur :

Effort de navigation minimal

Les visiteurs doivent pouvoir accéder à un élément d'intérêt dans la barre de menu de navigation supérieure avec le moins d'effort possible. Cela signifie moins de clics pour atteindre le bon contenu. Pour atteindre cet objectif, notre plateforme permet un méga menu en plus d'un style de menu déroulant simple.

• Les méga menus sont de grands menus rectangulaires qui regroupent les options de navigation, ils éliminent le défilement et utilisent la typographie, les icônes et les infobulles pour organiser le contenu de manière facilement digestible.
• Les méga menus montrent tout en un coup d'œil, de sorte que les utilisateurs peuvent voir plutôt que d'essayer de se souvenir.
• Les méga menus vous permettent de mettre visuellement en évidence les relations entre les éléments. Cela aide à nouveau les utilisateurs à comprendre leurs choix.

Bon contraste des couleurs

Nous savons que le texte à faible contraste est mauvais pour l'utilisabilité. C'est pourquoi nous nous sommes assurés d'avoir toujours un texte sombre sur un fond blanc dans le menu afin que les personnes malvoyantes puissent utiliser et apprécier la plateforme autant que leurs collègues voyants.

Logos de marque de la plus haute qualité

Il y a très peu de fournisseurs qui se soucient de l'image de marque de leurs clients autant que nous. Puisque nous avons des designers de superstar créant des logos de plateforme incroyables pour nos clients, il est juste que nous utilisions la dernière technologie pour les afficher de la manière la plus nette possible.

Nous convertissons tous les logos de marque de PNG basse résolution en la plus haute résolution disponible ; les SVG.

• Les SVG restent de haute qualité quelle que soit la résolution de l'écran sur lequel ils sont affichés – peu importe l'écran, ils s'afficheront toujours parfaitement, surtout sur les écrans retina
• Les SVG accélèrent les temps de chargement du site - ils sont minuscules en comparaison avec les PNG.
• Les SVG peuvent être animés et stylisés avec CSS - cela ouvre un monde de créativité pour le web, alors gardez un œil sur des animations sympas à l'avenir.  

Descriptions de menu utiles

Nous savons grâce à nos tests A/B que les nouveaux visiteurs peuvent avoir du mal à comprendre où mènent certains éléments de menu en lisant uniquement les noms des menus. En conséquence, les utilisateurs hésitent davantage à cliquer dessus. Pour résoudre cette confusion, nous avons permis qu'une description de menu soit visible sur le menu, donnant à l'utilisateur un contexte utile sur l'essence du contenu ou du produit derrière le lien.

Renforcer la crédibilité via « Tendance chez les collègues »

Pour montrer aux nouveaux visiteurs qu'ils peuvent faire confiance à la plateforme, nous avons une section « Tendance chez les collègues » dans le méga menu Réductions et la recherche principale. Savoir ce que leurs collègues de travail font déjà confiance et comment ils utilisent la plateforme est un excellent moyen de renforcer la crédibilité dès le début.

Cette fonctionnalité met également en avant le contenu le plus populaire grâce à la puissance des recommandations tierces. En tant qu'humains, nous sommes généralement plus enclins à croire ce qu'un ami ou un collègue a trouvé attrayant ou intéressant. La nature dynamique de « Tendance chez les collègues » rend le contenu pertinent et opportun.

Recherche principale

Comme pour tout le reste, nous nous attendons à ce que notre recherche travaille aussi dur pour le bénéfice de l'utilisateur que toute autre partie de notre plateforme. Par conséquent, elle affiche non seulement les résultats de recherche de manière claire et visuelle, mais elle donne également un accès rapide aux derniers contenus créés sur la plateforme.

Voici un exemple de ce que l'utilisateur verra avant de commencer à taper son terme de recherche :

Une fois qu'ils ont recherché :

Typographie de la plateforme

Pour améliorer la lisibilité et les performances globales de notre plateforme, nous avons décidé de nous éloigner de la police web standard Arial. Nous utilisons désormais les polices System UI. Cela signifie que nous n'avons plus une seule police, mais plutôt une police différente selon le système d'exploitation de l'utilisateur.

Par exemple, si un employé visite la plateforme sur Chrome, il verra le contenu en police Roboto de Google. En revanche, s'il utilise Safari sur un Mac, il verra la police San Francisco.

(Source de l'illustration : Cătălin Bridinel)

Avoir une police dynamique qui s'ajuste en fonction de l'appareil et du navigateur crée une meilleure expérience utilisateur. Voici pourquoi :

• En raison de leur comportement natif, ces polices sont très lisibles et accessibles.
• Ils sont considérés comme les meilleurs en typographie web.
• Ils sont frais et modernes.
• Familiarisés avec l'utilisateur grâce aux interactions quotidiennes avec eux sur les navigateurs et les appareils.
• Ces polices évoluent constamment de la même manière que les produits s'améliorent grâce à la recherche et aux retours. Grâce à cela, elles sont toujours à jour avec les dernières avancées technologiques.