• 15 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

Ce cours est en vidéo.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

Ce cours est diplômant et vous permet d'obtenir des crédits universitaires européens (ECTS).

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Repensez l’ergonomie

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Le fait de maquetter la version "aperçu desktop" de mon site photo m'oblige à prendre en considération ce que nous avions rapidement abordé dans la première partie : l'ergonomie.

En effet, en plus d'influer sur "la mise en page" pour profiter au mieux du nouvel espace, ce changement d'échelle mobile/desktop influe également sur les éléments de navigation de mon site.

L'outil permettant l'interaction avec les éléments d'interfaces à l'écran est maintenant déporté sur un outil dédié : le trackpad ou la souris. Qui sera bien plus adroit et précis que vos simples doigts !

très souvent sur ordinateur la navigation est non tactile mais cela ne durera pas
Très souvent sur ordinateur, la navigation est non tactile.

Cela va évidemment nous inviter à repenser l'ergonomie du site...

Un menu de navigation moins à l'étroit

Le menu de navigation qui me permet d'accéder à toutes les parties de mon site se transforme en passant de la version "mobile" à la version "desktop" :

La navigation se transforme pour mieux s'adapter à l'écran où il sera affiché
La navigation se transforme pour mieux s'adapter à l'écran où il sera affiché

Je retrouve ici un menu entièrement déplié, plus classique mais toujours accessible.

La taille des éléments

Rappelez-vous dans la partie 1, je vous parlais de la résolution/densité de l'écran. Et bien c'est typiquement à cause d'elle que mes éléments vont devoir changer de taille entre les deux maquettes.

Cela peut vous sembler contradictoire, mais ce n'est pas parce qu'on a un écran plus large que l'on va doubler en taille tous les éléments de la page sur vos maquettes en aperçu desktop ! Certains vont même avoir droit à un petit régime...

Par exemple les boutons :

  • Sur ma maquette "aperçu mobile" : mon bouton fait 439 pixels de largeur et 102 pixels de hauteur.

  • Sur ma maquette "aperçu desktop" : il ne fait plus que 160 pixels de largeur et 38 pixels de hauteur !

A gauche le bouton
A gauche le bouton "aperçu mobile" et à droite la version "aperçu desktop" en taille réelle sur votre maquette Photoshop

C'est aussi valable pour le texte :

Sur ma maquette "aperçu mobile" mon texte d'introduction fait 42 points alors que sur ma maquette "aperçu desktop", il ne fait que 18 points.

En haut le texte en
En haut le texte en "aperçu mobile" et à droite la version "aperçu desktop" en taille réelle sur votre maquette Photoshop

Les éléments survolés

Sur la version desktop de mon site, je vais aussi profiter de la possibilité de survoler un élément avec le curseur ("hover" en anglais) pour ajouter des propriétés à ma maquette !

Par exemple, Je peux ajouter dans la partie "Galerie" une indication visuelle au survol d'une photo, afin d'apporter plusieurs informations supplémentaires. J'indique ainsi rapidement la position de mon curseur sur l'interface (le bloc devient orange dans l'exemple ci-dessous), et si le curseur reste assez longtemps sans bouger, je peux aussi indiquer à l'utilisateur qu'il est possible de cliquer sur la photo pour avoir plus d'informations sur celle-ci.

Sur mon site il y a une effet de survol sur les vignettes en version
Sur mon site il y a un effet de survol sur les vignettes en version "desktop"

L'ergonomie n'est pas à prendre à la légère et se cache parfois dans de petits détails... À vous d'y penser pour maximiser l'expérience utilisateur.

Mais je vais vous montrer a présent comment j'adapte en pratique mes éléments d'interface d'une version à l'autre avec Photoshop.

Exemple de certificat de réussite
Exemple de certificat de réussite