Ergonomie CRM iPad et Design UI

  • CSS3
  • Fireworks CS6
  • HTML5
  • Illustrator CS6
  • LESS
  • Photoshop CS6
Contexte

Le client : 

Leader français du service en manutention

 

La demande :

Les commerciaux déléguaient la plupart des actions de remplissage de l’ERP par leurs secrétaires équipées de PC de bureau, car ils étaient dans l’incapacité de remplir les informations lors de leurs rendez-vous commerciaux.

L’objectif est de créer une ergonomie pour un outil également utilisable sur le terrain. Il est prévu d’équiper la flotte de commerciaux par des tablettes iPad. Le CRM est développé sous la forme d’une webapp en interne.

Les principales attentes sont les suivantes :

  • Mise en place d’une interface et d’une ergonomie aussi bien efficace sur tablette que sur PC de bureau;
  • Créer des méthodes ergonomiques d’alimentation des données rapide (pour l’ERP), en live par le commercial sur le terrain;
  • Proposer une lisibilité rapide des données permettant au commercial d’améliorer in situ sont argumentaire commercial, mais aussi pour permettre aux responsable de visualiser et d’analyser l’activité de leurs commerciaux;
  • Des exigences fortes sont exprimées dès le départ en terme de design d’interface.

 

 
Notre intervention

Les délais sont courts et le développement de l'application est déjà initié. Les contraintes et spécificités métiers sont très fortes. Il existe également certaines contraintes fonctionnelles qui impliquent une collaboration importante avec l'équipe de développement.

Développement de l’ergonomie, du design de l’application, et développement d’un mini framework CSS responsive :

  • Benchmark ergonomique préalable.

 

2 itérations :

  • Avec les experts métier, étude des problématiques métier, des données présentes et des fonctionnalités, orientées utilisateur;
  • Mockups;
  • Conception et validation du design de l’application;
  • Définition de scénarios utilisateurs représentatif;
  • Conception de maquettes fil de fer sur ces scénarios;
  • Enrichissement de l’ergonomie sur l’ensemble des fonctionnalités;
  • Mise en place d’une charte pictographique sémantique;
  • Ajout de la couche graphique;
  • Création d’une maquette interactive et d’une vidéo sur un scénario utilisateur riche;
  • Entretiens utilisateurs et corrections/modification;
  • Développement d’un mini framework CSS reponsive, basé sur bootstrap, et utilisant LESS. Conception d’une page Html de démo. Intégration des pictos en tant que typographies intégrées au framework.

 

Les solutions ergonomiques proposées et mises en place

Voici la liste et le descriptif des solutions mises en place sous forme de maquettes graphiques et ergonomiques :

 

La lisibilité des données clés doit être immédiate et rapide.

  • Un tableau de bord permettant une représentation visuelle, synthétique et hierarchisée des données importantes (graphiques et courbes) : problématique de représention des données;
  • Un code couleur strict et une teinte spécifique pour les alertes et les éléments importants;
  • Une représentation sémantique de certains éléments récurents : des icones sont utilisées et optimisent la lecture après un apprentissage interne;
  • La représentation d'un maximum d'information sur une page avec un scroll dans l'écran. 

 

L'optimisation est essentielle.

  • Très peu d'éléments graphiques soient nécessaires à la bonne lisibilité et à l'esthétique de l'interface;
  • L'utilisation d'une typographie-icone afin d'optimiser le poids des icones.

 

La navigation doit être rapide sur tablette, et optimale sur PC.

  • Une navigation spécifique pour l'ajout rapide d'éléments, optimisé pour tablette.
  • Des informations exhaustives et lisibles pour la consultation sur ordinateur de bureau.
  • Un design responsive qui s’adapte aux différents écrans et modes de navigation.

 

L’outil doit être adapté à différents métiers.

  • Mise en place de rôles spécifiques et d’interfaces adaptées à ces différents rôles, afin qu’il puissent accéder en priorité aux éléments qui les intéressent.