La notion d’interactions hommes – machine, avec ce nom étrangement évocateur, est un des piliers centraux du travail quotidien de notre agence UX sur les projets web.
Depuis 2010 ce domaine s’est anglicisé et a été séparé en deux métiers bien distinct nommés respectivement UX design et UI design, que l’on peut résumer très grossièrement par l’ergonomie et l’apparence graphique.
Vous le savez sûrement, mais l’utilisateur sur internet ne supporte pas de perdre du temps lorsqu’il cherche à accéder à une information ou à accomplir une tâche, quelques secondes de trop ou un clic inutile et il ferme l’onglet du navigateur persuadé qu’il n’arrivera pas au bout de son parcours.
C’est pour éviter ces situations qu’intervient donc l’UX design à l’agence ux Data Projekt.
Il se découpe en deux grandes étapes, qui peuvent être parfois précédées d’un (ou plusieurs) ateliers de design thinking.
On aborde d’abord la définition de la hiérarchie de l’information avec l’arborescence et ensuite la structure des pages via des zonings puis, si nécessaire, des wireframes.
Il est primordial de commencer par lister toutes les informations qui seront présentes dans votre site, et de les relier entre elles en les regroupant généralement par rubriques et sous-rubriques.
Une fois cette première phase faite avec vous, nous pouvons compiler ça sous forme d’arborescence permettant ainsi d’avoir une bonne vision d’ensemble de la structure de votre information.
La deuxième phase consiste en un travail de nomenclature de chaque rubrique, ainsi qu’une optimisation SEO pour les moteurs de recherche.
Avec l’Université de Strasbourg et tout particulièrement son BETA (Bureau d’économie théorique et appliquée), l’agence a réalisé le site de l’école de management en créativité (CREASXB) en partant de zéro.
La phase d’arborescence a donc pris tout son sens ici, puisqu’il a fallu définir les différents contenus avec le client, pour ensuite les structurer dans une organisation logique pour l’utilisateur final.
L’arborescence étant validée, il convient alors de s’atteler à l’organisation de chaque page. Au même titre qu’à l’étape précédente il faut hiérarchiser les contenus en fonction de leur importance et des objectifs de la page.
C’est à cette étape qu’on définit également les call-to-action qui feront en sorte de s’assurer que l’internaute voit l’information qu’on souhaite lui donner à cet endroit.
Cela prendra la forme d’un zoning, composé de blocs très basiques qui symbolisent les contenus et fonctionnalités de la rubrique. Ils sont souvent réfléchis avec un crayon et du papier et sont finalisés sur un logiciel pour vous le présenter.
En fonction de la complexité du projet et du besoin de précision nécessaire à cette étape, nous pouvons également réaliser des wireframes, qui sont une version plus précise des zonings et donneront des informations plus fines sur la disposition des contenus et leur mise en page, mais toujours sans travailler l’apparence graphique qui viendra à l’étape suivante.
Ce sont des phases à ne pas négliger pour la bonne réussite d’un projet web, et c’est à ça qu’on reconnaît une bonne agence UX !
Avec les outils réalisés lors de la phase d’UX design, nous pouvons désormais passer à celle du design graphique des pages, appelé désormais l’UI design à l’agence.
Elle est tout aussi importante que la précédente, car vous pouvez avoir la meilleure expérience utilisateur possible, elle ne sera toujours pas parfaite sans une apparence du même niveau.
C’est ici qu’interviennent les directeurs artistiques et graphistes de notre agence ui design, pour sublimer l’expérience utilisateur.
Il vont pour ce faire, devoir définir la charte graphique de votre projet web incluant différents éléments allant de la typographie aux couleurs, en passant par les illustrations et animations de certains contenus (ils adorent faire ça).
Chacun de ces éléments devra être réfléchi faisant partie d’un tout, dans l’objectif d’arriver à un rendu final cohérent et le plus intuitif possible pour l’internaute.
Ce que l’on applique à un site complet peut également l’être à une simple page produit.
La société Domtech nous a demandé de mettre en valeur un de leur produit phare le Smartbip, un petit tracker géolocalisé pour les activités outdoors avec bouton SOS.
C’est donc toute une charte graphique qui a été pensé ici pour un site onepage, qui se devait d’être clair au niveau des informations et très visuel pour toucher la cible visée. Objectif atteint !
Chez l’agence ux design Data Projekt on a même dématérialisé nos outils de travail. Pour le design de l’interface nous travaillons avec l’outil Figma, qui en plus d’être accessible pour nous depuis un simple navigateur, vous permet d’accéder à une version de la maquette interactive en ligne (desktop, mobile, tablette) qui sera en permanence à jour avec les dernières modifications apportées par l’équipe créative.
Pour vous c’est transparent, et les temps d’échanges, retours et modifications sont grandement réduits pour laisser plus de temps à la réflexion et au développement qui va suivre.
