Redesign du site impots.gouv.fr

Projet

Avant d'entrer dans les détails, voici un aperçu global de la Home originale et du redesign.

Vue semi-détaillée

Commençons par citer les points à améliorer, suivi d'une solution.

Le header

Dans le header, l'empilement de trois boutons, dont deux pour se connecter et l'autre pour accéder à la partie "Contact et RDV", qui permet de trouver les coordonnées d'un professionnel. Ici nous pouvons dire que seuls les boutons de connexion sont importants, alors que le bouton "contact et RDV" est secondaire. De plus, le fait d'avoir un bouton gris peut suggérer que ce bouton est désactivé.

Solution

La solution proposée à partir du design system de l'État, et par conséquent du composant de l'en-tête, est de garder les accès pour se connecter, que l'utilisateur soit un particulier ou un professionnel, sous forme de lien. Quant à l'accès "Contact et RDV" il a été déplacé dans la navigation principale.

La barre de recherche principale, le bloc "Mise en avant" et les actualités

Ici, nous avons trois éléments:

• la barre de recherche principale

• un bloc de mise en avant d'une actualité

• les dernières actualités

La barre de recherche contient des suggestions pour l'utilisateur dans le cadre d'une future recherche. L'emplacement de la barre, juste au-dessus d'un bloc bleu imposant, donne une impression d'effacement de cette barre, le bloc bleu s'impose visuellement.

Ce qui nous amène tout naturellement à ce fameux bleu bloc. Il est constitué de deux parties. La première partie, permet d'accéder à la déclaration des revenus (il arrive sur la page de connexion). La seconde, permet à l'utilisateur d'accéder à une liste de questions/réponses sur la déclaration des revenus.

Le bloc des dernières actualités est précédé d'un message d'avertissement, assez neutre dont le risque est qu'il attire peu l'attention de l'utilisateur. Ensuite, nous avons trois tuiles, dont chacune correspond à une actualité.

Solution

La solution proposée est de placer sous la navigation principale, le message d'avertissement, plus visible pour l'utilisateur, car c'est une information importante. Ensuite, le bloc media/mise avant, toujours constituer de deux parties, nécessaire pour le responsive (la partie de gauche se mettra au-dessus de la partie de droite. Pour la barre de recherche, l'objectif est qu'elle soit plus visible et une aide pour l'utilisateur. Pour se faire, des tags, dont chacun correspond à un sujet juste sous la barre de recherche. Pour finir, le bloc "Actualités", le but est d'afficher les trois dernières actus sous forme de carte, sur une seule ligne, avec une image, un label et un titre.

Démarches et outils

Concernant la partie "Démarche et outils", à première vue l'utilisateur ne sait pas trop à quoi cela correspond. Sur la version originale, il n'y a aucun titre de partie, il y a trois tailles différentes de cartes, et cela manque d'organisation. Une carte ressort plus que les autres, celle adressée aux professionnels.

Solution

La solution proposée est, tout d'abord, de nommer cette partie de façon à la délimiter, notamment de la partie "Actualités". L'objectif ensuite, est d'utiliser la même taille de tuile, pour avoir une cohérence et une organisation. Le dernier élément est de mettre en avant la tuile destiné aux professionnels, sans pour autant qu'il s'impose trop visuellement. Il s'agit donc de le "marquer" en utilisant la couleur dédiée aux professionnels.

Blocs "À savoir" et "Services"

Ces deux blocs sont similaires, aucune différenciation, c'est la même tuile utilisée. Chaque tuile du bloc "À savoir" mériterait d'avoir une description en plus du titre, pour donner plus d'indication à l'utilisateur. Il y a également trop de tuiles présentes, ce qui alourdit et surtout rallonge la page.

Solution

Les objectifs de la solution proposée est donc de créer et faire une distinction entre ces deux blocs. Là où le bloc "À savoir" a besoin d'une description dans chaque tuile, pour la partie "Vous voulez" qui est devenue "Services" les titres sont suffisamment claires, chaque tuile est une "action", la description n'est donc pas nécessaire. Pour éviter une répétition de tuiles, nous avons besoin de limiter à un certains nombres. Ce sera une délimitations par six pour chaque bloc.

Blocs "Contact", "Questions" et Footer

Pour cette fin de page, il est simplement question de mettre à jour ces composants en utilisant le design system de l'État.

Vue détaillée

Zoom sur les différentes parties du redesign de la Home.