Kadeal.com: ergonomie et interfaces pour un réseau social

ergonomie kadeal old accueil

ergonomie kadeal page de resultatsergonomie kadeal old page elementergonomie kadeal old dashboard
cliquez sur les images pour les augmenter

 

En 2009 la start-up kadeal.com avait besoin de retravailler entièrement les interfaces de son produit phare : un moteur de recherche / annuaire commercial associé à un réseau social destiné aux entreprises pour faire du B2B. Ce projet audacieux avait plein de fonctionnalités innovantes. Pourtant il n’avait pas une interface adéquate pour mettre en valeur ses atouts.

Voici, à côté, quelques extraits de sa première version. Dans l’ordre :

  • Page d’accueil
  • Page de résultats d’une recherche
  • Page profil d’une entreprise
  • Page tableau de bord de l’utilisateur connecté

À première vue, on peut déjà constater beaucoup de problèmes, sans tomber dans une analyse purement esthétique, mais en se concentrant plutôt sur un diagnostic fonctionnel :

  • La barre de recherche ne trouve pas une place fixe dans le site. Elle est même absente sur la page du tableau de bord!
  • Pareil pour le menu. Ça ne conforte pas l’utilisateur, s’il souhaite changer de rubrique. Des menus différents apparaissent et disparaissent… avec un aspect et positionnement qui varie légèrement selon la page.
  • L’usage des couleurs et des formes n’est pas uniforme dans le site. Il n’a pas de valeur fonctionnelle qui attribue une perception visuelle à un type d’interaction. Les couleurs de la charte graphique — une palette de bleus et oranges — prédominent dans le site, mais son usage est presque aléatoire.
  • Les informations concernant l’utilisateur connecté étaient dispersées et pouvaient apparaître dans des zones auparavant attribuées aux autres entreprises. Confusion entre identité et altérité.
  • Certains éléments/modules n’étaient pas compatibles avec le cahier de charges du client, comme les résultants d’une recherche, mis en deux colonnes. La colonne centrale affichait les fiches des entreprises et la colonne à droite montrait les projets des entreprises abonnées. Cette configuration des éléments ne permettrait pas l’affichage de plus que 3 projets par recherche (pas de pagination envisagée non plus). Enfin, cette interface méprisait une des fonctionnalités essentielles du système, la possibilité de lancer des projets et faire des partenariats.
animation :  ergonomie kadeal. première version de l'interface analyse des problèmes

La barre de recherche se balade dans la page sans trouver sa position fixe, même diagnostic pour le(s) menu(s) et l’usage des couleurs: pas de logique standardisée.

Mais c’est uniquement avec l’analyse complète du cahier de charges de la start-up qu’un diagnostique beaucoup plus complet e et profond a pu être donné. Avant exposer la solution détaillée dans cet article, voici un aperçu du rendu final, par les mêmes 4 pages refaites.

Kadeal.com ergonomie et interfaces d'un réseau socialKadeal.com ergonomie et interfaces d'un réseau socialKadeal.com ergonomie et interfaces d'un réseau socialKadeal.com ergonomie et interfaces d'un réseau social

cliquez sur les images pour les augmenter

 

Éléments permanents x contextuels

Des structures comme le header, le footer, ou une éventuelle barre latérale existent pour héberger des éléments fixes, toujours visibles dans le site afin de conforter l’usager. La première version de Kadeal avait un header. Mais il contenait seulement le logo, le slogan, un sélecteur de langues et un menu composé par des liens très marginaux comme « partenaires » ou « bienvenue sur kadeal » mais aussi l’accès à l’interface de connexion, essentiel.

Mais certains éléments devraient absolument trouver sa place dans le header :

  • La barre de recherche (la promesses majeur de Kadeal était une recherche puissante des entreprises) devait absolument y figurer. Très visible.
  • Le menu principal visible aux utilisateurs connectés était indispensable.
  • Le module de connexion/inscription pouvait trouver une place définitive dans cette structure, bien qu’elle serait remplacée par un module avec les informations personnelles, une fois connecté.
new-header-kadeal

Le header de la nouvelle interface de Kadeal. Qu’on soit connecté ou pas, les éléments ne bougent jamais. Le module de connexion laisse sa place aux données de l’utilisateur connecté.

Mais pour toute règle il y a une exception. Sur les pages des formulaires d’inscription, il ne fallait pas proposer une distraction, sous peine d’annuler une adhésion. Inutile de proposer un bloc de connexion, l’utilisateur n’a pas encore ses identifiants. Évidement. Pourtant l’espace privilégié du header pourrait guider et renforcer la procédure d’abonnement:

header inscription kadeal

Ce sont des petites transformations, qui stabilisent et corrigent les erreurs les plus flagrantes du site, mais d’autres suggestions ont rendu cette proposition encore plus performante.

Représenter une double dimension sociale :
Les identités personnelles et corporatives

kadeal connexion

La double identité est juxtaposée dans le module d’identification personnelle

Une des spécificités de Kadeal (négligée dans la maquette précédente) c’est qu’il n’est pas censé à gérer des profils strictement personnels comme la plupart des réseaux existants (Facebook, Twitter, Linkedin, etc.). Les utilisateurs de Kadeal avaient une double représentation identitaire, celles son entreprise et celle en tant qu’employé. Il fallait en plus trouver une bonne composition pour associer visuellement ces deux dimensions des utilisateurs pour que les niveaux d’interaction soient clairement compris:

« qui lit mon message, avec qui j’établis contact ? “l’entreprise”, son directeur technique, d’opérations, etc. ? Ou le responsable commercial ? »

Toutes ces questions que j’ai soulevées à l’époque ont demandé une réévaluation du cahier de charges initial. En simulant des interactions entre petites structures de 10 employées et des grandes compagnies de 1000 salariés, nous avions pu identifier la bonne mesure pour l’affichage correct des interactions-types B2B envisagés par les services de Kadeal.

kadeal mail

Kadealmail : les interfaces traditionnelles, comme celle d’une messagerie doivent s’adapter aux particularités du système. Ici une colonne de tri supplémentaire est ajoutée : on peut chercher un message par contact, ou par son entreprise.

 

Gestion iconographique des éléments d’interface

Dans un système complexe, dans lequel on doit représenter plusieurs niveaux d’interlocuteurs, d’éléments d’interactions, etc. l’usage de métaphores graphiques peut faciliter sa compréhension. Je suis allé chercher dans la culture corporative, dans les documents couramment utilisés dans les bureaux pour représenter les entités-type du site.

  • dossier : entreprise
  • feuille de papier : projet
  • carte/fiche d’adresse : membre/employé
  • lettre : messagerie
  • post-it : observations personnelles

 

dossier-kadeal

hommage aux typiques dossiers avec ses onglets pour classer les archives des entreprises.

 

 

projets-kadeal

Les projets lancés par les entreprises. Ici, la représentation usuelle des documents, une feuille de proportions A4 avec son coin plié.

 

 

membres-kadeal

L’affichage des membres prenait plutôt une forme horizontale, comme une carte de visite ou des anciennes fiches d’adresse de contact.

 

 

post-it-kadeal

Les post-its ce représentaient les informations confidentielles des utilisateurs sur les autres entreprises.

 

 

 

Standardisation des icônes

Toute création de pictogrammes devrait suivre certaines recommandations pour assurer sa correcte intégration dans le site :

1. couleurs : usage monochromatique, sans dégradé, à partir d’une palette préétablie de tons.

icons

2. Forme: les coins arrondis et les tracés devraient avoir un contour de 2 pixels. Une épaisseur plus fine était tolérée en fonction de la complexité du dessin.

deuxpixels

3. Minimalisme : Pas de perspective, ombrage, volume, lumière, enfin tout effet était interdit. Priorité pour les formes élémentaires (cercle, carré, triangle) et les angles droits (30 °, 45 °, 60 °, 90 °) pour simplifier au maximum chaque représentation. Si besoin d’intégrer des éléments textuels cela devrait respecter la charte graphique en utilisant la typographie établie pour ces fins.

 

carre-cercle-triangle

Association visuelle:

couleurs = types d’interactions

Les couleurs qui composent la palette graphique de kadeal sont le bleu, l’orange, le gris. L’usage abondant de blanc est aussi un facteur important de l’identité visuelle de la nouvelle version de kadeal.

Chaque couleur a un symbolisme spécifique et doit être utilisée dans les cas appropriés.

Orange : pour les interactions considérées « hot » (fonctionnalités, boutons de recherche, validation, panneaux d’avertissement, liens, etc.)

orange

Bleu : En gros, toutes les informations corporatives des entreprises affichées dans le site, les interactions entre les compagnies.

bleu

Gris : Applats et structures concernant le site lui-même. La « voix » de Kadeal, ses menus, ses informations étaient représentés avec cette couleur neutre pour organiser tous les autres éléments. Les boutons de baisse interaction, ou de valeur négative (annuler, fermer, défaire des actions) ont pris cette même couleur.

gris

 

Quelle stratégie pour la page d’accueil ?

Dans la conception d’un site, la création de la page d’accueil reste souvent pour la fin. C’est logique, ainsi comme la couverture d’un livre ou l’écriture de l’introduction d’un texte, on présente quelque chose qui a été conçue préalablement.

Ce raisonnement est valable pour les sites dont la page d’accueil a la fonction de résumer le contenu du site, en dosant un échantillon frais de la base de données. Dans ce cas, l’objectif est de donner au visiteur un extrait récent du système, de lui mettre à jour sur son contenu.

Mais la stratégie pour la conception de la page d’accueil de Kadeal était autre : pousser les visiteurs à l’inscription. Il s’agissait d’un nouveau service et son premier objectif était de former une communauté.

Cette priorité n’était pas claire dans la proposition initiale et aucune mention de gratuité, par exemple y figurait. Le module de connexion était assez timide, en compétition avec plein d’autres informations dans la page. Dans la nouvelle proposition, le bouton d’inscription s’avère le plus grand et visible du site entier.

Il fallait pourtant, expliquer les avantages de Kadeal pour convaincre les visiteurs à s’inscrire. Une grande mais simple animation alternait entre les 3 arguments pour s’inscrire. (visibilité de l’entreprise, recherches mieux ciblées, relations avec d’autres entreprises).

Il ne fallait pas trop charger la page d’accueil en déviant l’attention de son objectif principal, mais on a décidé d’en mettre plus bas, un module qui rapporte les nouvelles adhésions afin de montrer le flux d’entrée. (En quelque sorte, un deuxième argument.)

Kadeal.com ergonomie et interfaces d'un réseau social

- – -

Kadeal a eu une vie courte. Cette start-up a été absorbée par des investisseurs plus grands, dans le dynamique marché de l’innovation technologique. Sa disparition me permet au moins de dévoiler ici un extrait de cette prestation…

 

Leave a Reply

Your email address will not be published. Required fields are marked *

*

6,883Commentaires spam bloqué jusqu'à présent parSpam Free Wordpress

Les balises HTML ne sont pas autorisés.