L’UX/UI design au service de l’industrie 4.0

Amber Innovation est une entreprise spécialisée dans l’optimisation des processus de production et d’apprentissage. Dans le cadre de la refonte technique d’un de leur logiciel, en collaboration avec Yoop Digital, nous les avons accompagné dans le design et l’ergonomie d’interface de leur solution à destination de l’industrie.

Problématique

Comment refondre et améliorer l'utilisabilité d'un logiciel métier ?

L'approche Yumans

Une approche Lean UX orientée sur l’utilisabilité

Conserver et améliorer l’historique fonctionnel

Une conception multi-device pour répondre aux usages

Intégrer en amont les contraintes front-end

Se focaliser sur l’usage

Pour définir le design et l’ergonomie d’un logiciel métier, il est toujours important de comprendre dans quel contexte il sera utilisé, par quelle typologie d’utilisateurs et pour quelles activités.
Cet outil cible principalement deux typologies d’utilisateurs aux objectifs, conditions d’utilisations et temporalités différents. L’application se doit d’être utilisable en mobilité pour des actions temps réel mais également sur un poste de travail pour des actions qui demandent plus d’analyse. Néanmoins, les différentes activités suivent la même logique et la même chronologie. Partant de ce postulat et avec toutes les contraintes identifiées, il devient possible de rentrer plus dans le détail des parcours utilisateur.

Définir le parcours utilisateur

Avant d'entamer dans le maquettage des écrans, il est important de valider le parcours utilisateur de la future solution. L’objectif est d’identifier les pages clés, l'organisation et l’emplacement des fonctionnalités, la coquille de navigation et la structure générale des pages. Pour cela, nous utilisons une représentation de type userflow avec l’identification des fonctionnalités dans chacune des pages.

Matérialiser les écrans fonctionnels

Une fois les parcours utilisateur validés, nous sommes rentrés dans la phase de wireframing. L’objectif est de matérialiser et positionner les fonctionnalités sous la forme de composants web afin de rendre l’application la plus simple et intuitive possible pour les utilisateurs. Une attention particulière est donné sur le fait de prioriser les informations et les actions. Les actions prioritaires sont ainsi mieux valorisées et les actions secondaires positionnées à des niveaux inférieurs. Il est également nécessaire de penser la logique responsive afin d’intégrer les usages tablette et mobile.

Maquetter l'interface

Partant des wireframes, les interfaces finales de Bérénice ont été élaborées sur la base de la librairie Angular Prime NG identifiée sur ce projet. Le design de l’application et de ses composants, intègre cette spécificité technique dans sa phase de création. L’enjeu étant de proposer une interface originale et plus moderne, respectueuse de l’expérience utilisateur, tout en rationalisant son intégration front-end.

© Photos by Science in HD