Exemple de site web revampé

Afin de continuer les explications sur le processus centré sur l'utilisateur, ce prochain message portera sur un exercice fait en classe, soit de refaire l'interface d'un site web existant. J'ai choisi le site de NHL.com. Le design est à mon avis dèjà très bien réussi. C'est plutôt du côté de la structure du contenu qu'il y a un problème. Il y a tellement d'informations projetées vers l'utilisateur que celui-ci ne sait plus où donner de la tête.

Voici le site web de NHL.com tel qu'on peut le voir présentement.

On peut remarquer que beaucoup d'éléments normallement essentiels comme la navigation, la barre de recherche, etc. ne sont pas assez mis en évidence. Il est donc trop facile de passer à côté de ce que l'on cherche. Le problème est donc lié directement à la structure surchargée du site.

J'ai donc décidé de faire un prototype de base de la page d'accueil en donnant plus d'importance à ces éléments (navigation, sections, recherche...) tout en gardant l'aspect du design original qui n'est pas mal du tout. Et voici ce que ça donne...

(Cliquez sur l'image pour l'agrandir)

C'est une ébauche assez simplifié et il manque beaucoup de choses, mais en gros, le but est vraiment de démontrer que la structure est très importante pour l'utilisateur. Ici, on peut constater que les marges blanches entre chaque section aident à l'organisation du contenu. J'ai grossi la barre de navigation pour la rendre plus visible et j'ai changé la barre de recherche sous la section Headlines pour éviter de surcharger la bannière. La section Spotlight donne accès aux galleries d'images et de vidéos.

Encore une fois, ce n'est pas une version extrêmement élaborée, mais le concept y est. J'espère que vous aurez saisi l'idée principale.