Stratégie d’évolution des interfaces produits Sellsy

Chers utilisateurs,

‍

Lancé le premier janvier 2010, Sellsy a connu tout au long de l’aventure de très nombreuses innovations. D’une première version ultra basique conçue, est née, au fur et à mesure, la version très complète que vous connaissez aujourd’hui.

Durant toutes ces années, nous avons donné la priorité aux fonctionnalités, à votre demande et en échangeant avec vous.

Avec le temps, la richesse fonctionnelle a augmenté, et il est vrai que Sellsy sait faire de très nombreuses choses pour aider les entreprises à vendre vite et mieux.

Mais ces ajouts ont un peu alourdi l’interface, et vous êtes nombreux à nous le remonter, souvent avec des remarques très pertinentes.

Aujourd’hui, Sellsy est une société de 50 personnes avec (enfin) un département dédié à l’UX/UI, c’est-à-dire à l’expérience utilisateur et au design de l’application.

Depuis de nombreux mois, cette équipe travaille dans l’ombre pour préparer le Sellsy du futur.

Ces évolutions vont suivre de nombreuses étapes, dont la première, une refonte intégrale de l'apparence de l’interface arrivera dès le mois de juillet. Elle sera rapidement suivie d’une refonte de l’expérience utilisateur elle-même.

‍

Ce post a pour vocation de vous présenter notre démarche et ses objectifs.

‍

Première étape : clarifier l’interface utilisateur

‍

La première opération a été de créer un guide de l’interface (styleguide), avec la définition de l’ensemble des éléments qui compose l’interface comme les boutons, listes, formulaires, icônes, espacements, couleurs, etc.

‍

‍

La seconde opération est de faire évoluer de façon rapide et agile l’interface actuelle de la plateforme en reprenant au maximum les éléments de ce nouveau guide, et en les implémentant dans l’interface actuelle.

L’un des gros objectifs est de rendre la plateforme plus claire et lisible.

Premièrement, nous pensons qu’il est possible par le choix des couleurs, formes, espacements et dimensions des éléments, etc. d’améliorer la lisibilité et compréhension de notre interface.

Secondairement, un travail sur la cohérence des couleurs sur les textes ou éléments de l’interface permettra d’améliorer la compréhension de l’utilisateur dans ses interactions avec l’interface.

Nous avons décidé de faire évoluer l’interface Sellsy en nous inspirant du style de design Complexion reduction.

Il s’agit de concentrer au maximum l’utilisateur sur les informations importantes en réduisant le bruit visuel qui peut perturber sa lecture de l’interface.

Quelques exemples majeurs dans ce mouvement récent sont les services Instagram, AirBnB, etc.

Ce mouvement est applicable sur la plateforme en suivant ces 3 principaux axes :

• Réduction du nombre de couleurs
• Amélioration de la hiérarchisation de la typographie
• Revue des dimensions et espacements des éléments

‍

En diminuant le nombre de couleurs, nous permettons de réduire la structure de forme émise par ces couleurs. En effet, l’oeil va d’abord faire un balayage général pour ensuite se focaliser sur les informations, et les couleurs sont des marqueurs importants dans cette phase d’analyse de la structure. Et, évidemment, plus il y a de couleurs, plus l’analyse est complexe.

Réduire le nombre de couleurs

Dans cette optique de réduction du nombre de couleurs, nous sommes passés d’un peu plus d’une cinquantaine de couleurs différentes à 13 couleurs. Nous trouvons ainsi une couleur d’interaction : le bleu, signalant l’ensemble des interactions possibles sur le produit. Des nuances de gris servant à construire les éléments qui composent l’interface, et quelques couleurs secondaires telles que le vert qui ramène à la notion d’acceptation ou de validation, ou encore le rouge pour le refus ou l’impossibilité.

Améliorer la hiérarchisation de la typographie

Nous avons également fait le choix de changer la typographie utilisée, en passant de l’Open Sans à la Proxima Nova, réputée pour sa clarté et sa lisibilité. En utilisant cette typographie, nous redonnons une hiérarchie plus claire. L’utilisateur analyse et identifie ainsi plus rapidement et facilement la composition des informations textuelles de l’interface.

Optimiser les dimensions et les espaces entre les éléments

Ce travail s’accompagne aussi d’une revue intégrale des espacements et des dimensions des éléments. Intervient ici un jeu d’équilibriste où la théorie de Gestalt (ou théorie des formes), basée sur la perception des formes par le cerveau humain ( lien Théorie de Gestalt par NunDesign.fr ), prend ici tout son sens, permettant ainsi de donner un sentiment d’espace et de régularité, très apprécié par l’oeil humain.

Ce travail d’ensemble aide fortement l’utilisateur à être mieux focalisé sur l’essentiel et augmente également sa sensation de confort. Un exemple percutant pour illustrer ces propos est celui de l’application AirBnB visible ci-dessous :

Cet important travail sur l’interface du produit est en cours, il a déjà été opéré récemment sur les mails de Sellsy, comme vous pouvez l’apercevoir ci-dessous. Nous en avons profité pour mieux définir les intitulés et informations des mails. La mise en ligne pour l’ensemble de nos clients est planifiée pour le courant du mois de juillet.

Prochaine étape : premières évolutions sur l’expérience utilisateur

‍

Dans un second temps, nous souhaitons augmenter significativement l’expérience du produit en termes de navigation. Nous allons mettre en place des accès rapides à des fonctions très utilisées nécessitant actuellement 3, voire 4 interactions. Par exemple : l’ajout d’un contact, la modification des informations d’une opportunité, etc.

L’objectif est de gagner un temps précieux sur les tâches ou actions régulières.

‍

Dashboard

‍

Le dashboard est amené à subir une évolution massive. Nous avons pour objectif de le rendre personnalisable. Il répondra ainsi de façon plus pertinente aux besoins de vos différents profils métiers en leur affichant des informations importantes et nécessaires à votre métier.

L’agenda et les tâches, visibles sur le dashboard, seront tournés vers l’utilisateur et non plus sur le groupe.

Dans la continuité de cette vision utilisateur, une page profil est également en réflexion. L'objectif est de retrouver l’ensemble des données et informations d’un utilisateur de son équipe, tels que ses commentaires, son agenda, ses modifications, sa disponibilité immédiate, etc.

‍

Les filtres et les listes

‍

Autre gros sujet sur cette évolution : les filtres et les listes. Ils représentent une part conséquente du produit et sont très utilisés.

Le fonctionnement des filtres et des listes est rapide quand on possède peu de contenu et de champs personnalisés. Cependant, il devient rapidement lourd et compliqué avec un grand nombre de filtres et de champs personnalisés.

Nous pensons que nous pouvons améliorer l'expérience en adoptant une logique d’assemblage de brique par sélection restreinte. Cette approche s'articule avec une barre de recherche, où l’utilisateur va effectuer une recherche de filtre via des mots clés. Il pourra ensuite ajouter ces briques à son filtrage et les paramétrer. Cela nous semble un des meilleurs dispositifs pour améliorer la navigation que peut engendrer le système de filtres.

La fonction de sauvegarde de la recherche sera également améliorée. On pourra y voir plus facilement l’ensemble des informations d’une recherche, comme les filtres et les paramétrages inclus.

Chacune de ces évolutions mises bout à bout nous permettra d’améliorer grandement l’expérience de nos produits. Ces travaux permettront également de lancer l’équipe dans cette continuité de modifications régulières nécessaires sur l’expérience de notre produit. Afin que les produits Sellsy répondent aux attentes de nos clients de façon toujours plus claire, simple et intuitive.

‍

Théo - Product Designer