R&D

Interface Utilisateur (UI) : bonnes pratiques

Cet article synthétise les bonnes pratiques d’interface appliquées dans les différents thèmes Osuny, notamment le site de l’IUT Bordeaux Montaigne, le site Osuny et le site Communication & démocratie.

En mobile comme en desktop, le menu se masque au scroll, et réapparaît quand on scroll vers le haut. De cette façon, on ne gaspille pas l’espace vertical comme avec un menu fixe, et on évite de devoir scroller en haut de page pour retrouver le menu comme avec le menu en haut.

Desktop

Le menu classique présente le logo à gauche et la navigation à droite, ou le logo en haut et le menu dessous.

Le menu desktop fermé permet d’afficher des sous-niveaux, avec une ouverture pleine largeur. Le niveau 2 est colonné, sur 3 ou 4 colonnes. Le niveau 3 s’affiche dans chaque colonne. En l’absence de niveau 3, le menu peut afficher la description de la page de niveau 2.

Mobile

Le menu mentionne, à l’idéal, le terme menu en texte. Une icône peut être utilisée en complément, ou seule, même si ce dernier cas n’est pas idéal (toutes les personnes ne connaissent pas forcément la signification de 3 traits superposés).

Le menu ouvert affiche le niveau 2, avec des icônes indiquant l’ouverture possible. Presser le nom ou l’icône permet d’ouvrir le niveau 2, qui affiche les niveaux 2 et 3.

Les rubriques cliquables et la rubrique non cliquable sont très peu distinctes de façon à maintenir un bon rapport de contraste. Elles se distinguent par la présence ou l’absence de soulignement.

En mobile, le breadcrumb dépasse de la page, scrollable horizontalement.