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.
Breadcrumb
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.
Texte
Hiérarchisation
La hiérarchisation des styles de texte permet de structurer le contenu des pages. Les Headings sont différents du corps de texte et des liens cliquables. Il n'y a qu'un seul H1 par page, et il définit la thématique de cette dernière.
Interlignes et espacement des lettres
Entre chaque ligne il y a au minimum 1.5 fois la taille du texte et entre chaque paragraphe 2 fois la taille du texte. Le texte respecte aussi l'espacement entre les lettres, tenant au minimum entre chaque lettre 0,12 fois la taille du texte et entre chaque mot 0,16 fois la taille du texte3.
3. Voir WCAG
Couleur
Contraste
Afin de rendre le contenu accessible et lisible à la majorité de personnes, même souffrant de troubles visuels, les couleurs respectent un ratio de minimum 7:14.
4. Voir WCAG
Call to action
Les call to action sont supérieurs à 44x44px7 qui est la limite de taille à respecter pour une accessibilité et une lisibilité optimale.
7. Voir OPQUAST
Éléments de navigation
Les éléments de navigations sont explicites8 et indiquent vers quels genres de pages ou de contenus ils dirigent l'utilisateur.
8. Voir OPQUAST