Retour

Conception UX & UI - Récylum

Etude ergonomique & design d’interfaces : soigner l’expérience utilisateur

Design | Experience Utilisateur
Brief & enjeux

Proposer une expérience agréable et efficiente

Récylum, leader français de la collecte et du recyclage de Déchets d’Equipements Electriques et Electroniques (DEEE), a souhaité revoir l’ergonomie de ses Systèmes d’Information existants (espaces dédiés au personnel Récylum et aux clients).

Une double mission :

  • Mettre en exergue, par l’intermédiaire d’un rapport d’étonnement, les points faibles rencontrés lors de l’utilisation des différentes applications et proposer des axes d’amélioration ;
  • Traduire sous forme de maquettes graphiques ces propositions, et réaliser l’intégration HTML/CSS/JS des interfaces pour permettre leur exploitation par le prestataire en développement.
Analyse de l'existant & préconisations

Adopter des solutions d’utilisation appropriées, au-delà du bon sens du concepteur

Simplicité, fluidité, accompagnement, vocabulaire utilisé : l’environnement numérique de Récylum est passé au crible afin d’en identifier les éventuelles lacunes. Les impératifs suivants sont alors distingués :

  • Les mots utilisés doivent être porteurs de sens et les phrases concises et explicites. Eviter le « jargonnage » autant que possible afin d’améliorer la compréhension et l’impact ;
  • Stimuler les gestes intuitifs et les repères dans l’espace. L’utilisateur doit être en mesure de savoir instantanément s’il est au bon endroit, où il doit s’orienter, ce qu’il doit faire pour trouver l’information qu’il convoite.
  • L’approche doit porter sur le besoin de l’utilisateur. La progression dans la navigation sous forme « d’entonnoir » (de la quête d’information à la solution recherchée) sont appréciées.
Récylum : analyse
Ergonomie & expérience utilisateur

Le french « K.I.S.S. » Keep It Simple Stupid

Guidés par les objectifs définis lors de notre analyse de l’existant, Proximit Agency, en tant que prestataire UX, met à plat tous les processus et les fonctionnalités à disposition des utilisateurs, puis les organise dans des écrans logiques, définit leur enchainement et met en place les codes sémiotiques qui permettront un apprentissage aisé et une prise en main rapide de l’environnement, tout en excluant autant que possible les situations anxiogènes pour l’utilisateur face à l’écran. Un travail est également fait sur l’ensemble des messages qui accompagnent l’utilisateur dans sa navigation.

Ces principes sont décrits dans des cahiers de conception fonctionnelle des écrans qui représentent en quelques sorte le squelette et la morphologie de chaque écran (wireframes), sans design graphique pour le moment.

Au fil de nos recherches, des sessions de co-working sont organisées, de façon à présenter et commenter l’analyse des différents espaces accessibles aux utilisateurs, puis d’échanger avec Récylum et le prestataire en développement sur les comportements attendus et leur mise en œuvre.

Design

Clarté et structure

Faisant écho aux solutions présentées dans nos descriptions des écrans, le design des différentes pages est réalisé :

  • Epuré et fidèle à la charte de Récylum, le graphisme permet surtout à l’utilisateur de s’orienter aisément et d’identifier les contenus qui le concernent (Ex : espaces pros / particuliers) ;
  • La composition des pages et leur intégration répond aux contraintes liées au responsive design (adaptation de la mise en page du contenu / lisibilité sur diverses tailles d’écrans) ;
  • L’utilisation de codes graphiques homogènes permet à l’utilisateur de s’approprier rapidement la logique des différentes espaces et de maitriser l’environnement dans lequel il évolue. (Ex. plutôt que de tendre vers la « surenchère graphique », de simples pictogrammes viennent faciliter la perception de l’information et appellent à l’action – call to action).

Une fois les maquettes graphiques validées, nous développons et livrons l’ensemble des modèles HTML/CSS/JS, testés en ligne et commentés afin de permettre une exploitation aisée et optimale par Axyus, la SSII prestataire en développement sur ce projet.

HTML5 CSS3 Bootstrap