UI

Comme nous l’avons évoqué plus haut, une interface web se doit d’être accessible, navigable et utilisable. La capacité d’une interface à s’adapter au périphérique utilisé pour y accéder se nomme le “responsive”. Le contenu doit s’adapter au périphérique, qu’il soit un ordinateur de bureau, une tablette ou un téléphone portable.

L’utilisation croissante et bien souvent prédominante des téléphones portables amène aujourd’hui les designers à réfléchir à leur design sur ce périphérique avant de l’adapter aux plus grands formats, cette tendance se nomme “mobile first”. 

Les usages varient en fonction des périphériques, il conviendra au designer de les étudier et d’apporter des réponses dédiées.

Exemples d’usages (en 2023) : 

• Sur desktop le “hover” est intéressant et rend la navigation plus ludique. Dans la majeure partie des cas, une souris est utilisée, l’écran n’est pas tactile. L’accès au clavier est aisé…

• Sur mobile, l’écran est tactile, pas de hover mais une approche complètement différente de l’utilisateur au périphérique. La façon dont l’utilisateur tient le téléphone aura un impact sur sa facilité à accéder à certains liens de menu par exemple…

• Une tablette peut se poser sur un bureau, se lire en horizontale et verticale, se prendre à deux mains. La tablette est tactile…

• https://web.dev/responsive-web-design-basics/ 

• http://glossaire.infowebmaster.fr/responsive-web-design/

• Une bonne navigation commence par une bonne structuration des contenus (voir chapitre plus haut)

• Une bonne navigation réduit le nombre de clics nécessaire

• La navigation est liée à l’architecture de l’information

• Conserver seulement les éléments essentiels dans la navigation

• Garder un premier niveau de navigation relativement épuré

• Prévoir un état de survol des liens

Menu hamburger 

• Remarque : il est moins naturel d’un point de vue ergonomique d’aller toucher un menu placé en haut de l’écran. Le bas de l’écran est plus accessible. 

Icônes en bas de l’écran 

• 5 icônes maximum (dans le cas où il est nécessaire d’inclure plus de 5 destinations, une icône “+” pourra être ajoutée avec les liens supplémentaires.

• On inclut du texte avec ou sans icône lorsque la signification de l’icône ne permet pas une clarté suffisante.

• Pas de double navigation (on n’ajoute pas de menu burger lorsque l’on a choisi une navigation avec un menu “icône” en bas. 

Onglet

• Utilisé en navigation secondaire, principalement en milieu d’écran. 

Menu classique :

• Haut de l’écran

• Standard pour les sites web et les sites e-commerce.

• Utilise peu d’espace

• Fonctionne lorsqu’il y a un nombre réduit de liens de premier niveau

Menu à gauche 

• Plus facile à parcourir

• Plus visible

• Permets d’intégrer un nombre de destinations plus important et des textes de liens plus longs

Menu hamburger 

• De plus en plus utilisé sur Desktop

• Utilise très peu d’espace, le contenu ressort de façon maximale

• Permets la création de menus plus complexes, voire plus originaux