L'UX pour le design web

Répartir le contenu des pages

Testez gratuitement nos 1304 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Mettez en avant les informations prioritaires en les plaçant au-dessus de la ligne de flottaison. Puis répartissez judicieusement les contenus dans les différentes pages.
03:54

Transcription

Avant d'entrer dans les détails sur la façon d'organiser les structures des pages spécifiques comme la page d'accueil, ou des pages de catégories ou des pages produits, voyons les conditions générales pour que l'organisation des pages produise une meilleure expérience utilisateur. Si nous regardons cet écran, nous constatons ici que nous avons ce que l'on appelle une carte des températures, c'est-à-dire quelles vont être sur une page, les zones chaudes, c'est-à-dire les zones les plus vues, et quelles vont être les zones froides, c'est-à-dire les zones les moins vues. Bien entendu, en rouge, nous avons les zones les plus vues, et puis les dégradés vont nous amener vers le blanc où les zones sont le moins vues possible. Vous remarquez également, ici, qu'il y a une ligne qui est tracée en bas de l'écran. Il s'agit de la ligne de flottaison. C'est-à-dire que lorsqu'on va passer sur les écrans suivants, eh bien on va s'apercevoir avec cette carte des températures que les éléments vont être de moins en moins vus. À partir du troisième écran, tous les tests démontrent que les éléments ne seront pas vus par les utilisateurs. Il va donc falloir prendre en compte cette ligne de flottaison pour pouvoir définir les priorités. On va placer les éléments les plus importants en haut, et puis nous devrons placer les éléments de priorité 2 en dessous, puis les éléments de priorité 3, et ces trois niveaux de priorités devront être inclus dans le premier écran, c'est-à-dire l'écran qui se trouve au-dessus de la ligne de flottaison. Il y a également de bonnes pratiques qu'il va falloir mettre en place de manière générale pour toutes les pages, quel que soit leur niveau dans le site. La navigation devra donc être cohérente, c'est-à-dire qu'elle sera toujours au même emplacement et avec la même présentation de manière à ce que l'utilisateur n'ait pas sur une section ou une autre section du site à refaire un travail d'apprentissage pour détecter où se trouvera cette navigation. Le repérage dans la page devra être évident, nous allons donc placer un fil d'Ariane qui va permettre de se repérer, c'est-à-dire de savoir à tout moment à quel niveau du site nous nous trouvons en pouvant naviguer pour remonter sur des niveaux antérieurs. Et nous allons également mettre en place un système de mises en évidence de la section active, par exemple, en présentant des onglets qui vont être d'une couleur différente pour indiquer la section dans laquelle l'utilisateur se trouve. Bien entendu, la mise en page devra être le plus sobre possible. Nous allons employer une typographie qui va être extrêmement lisible et nous éviterons les typographies très enrichies. Nous limiterons également l'usage de la couleur, de manière à ce que celle-ci soit systématiquement liée à une fonction. Enfin, nous allons privilégier des structures qui seront du type monocolonne, pour deux raisons, d'une part parce que cela permet une meilleure accessibilité, et d'autre part parce que c'est quelque chose qui va être beaucoup mieux géré lorsque nous travaillerons des sites responsives qui devront s'adapter aux différentes tailles des écrans des périphériques mobiles sur lesquels ils seront consultés. Il y a également de bonnes pratiques qui vont concerner les images qui devront toutes présenter un attribut alt, c'est-à-dire une description de l'image, et puis ces images seront légendées. Et enfin, il ne faudra pas oublier l'interaction. Toutes les pages, quels que soient leurs niveaux dans le site, devront donner un accès direct au contact et puis permettre le partage des contenus par les utilisateurs et l'envoi de commentaires. Nous allons dans la vidéo suivante voir les spécificités des pages d'accueil, mais si pour commencer nous mettons ces bonnes pratiques en action, nous allons optimiser d'autant l'expérience de nos utilisateurs.

L'UX pour le design web

Adoptez une méthode de conception web efficace. Optimisez la structure, les textes, l'accessibilité, les interactions avec l’utilisateur, ainsi que l'optimisation pour mobile.

1h42 (32 vidéos)
Aucun commentaire n´est disponible actuellement
 
Spécial abonnés
Votre/vos formateur(s) :
Date de parution :6 déc. 2016
Durée :1h42 (32 vidéos)

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !