Cet article synthétise les bonnes pratiques d'interface appliquées dans les différents thèmes Osuny - lien externe, notamment le site de l'IUT Bordeaux Montaigne - lien externe, le site Osuny - lien externe et le site Communication & démocratie - lien externe.
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.
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.
Corps de texte
Afin de favoriser une bonne accessibilité, le texte du corps de texte est de minimum 18px, et va jusqu'à 22px1. Le texte est écrit en minuscule, et se ferre à gauche2.
1. Voir WCAG - lien externe
2. Voir OPQUAST - lien externe
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 - lien externe
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 - lien externe
Liens
Les liens sont identifiables5 et ne dépendent pas uniquement de la couleur6 afin de pouvoir être facilement identifiés par n'importe qui.
5. Voir OPQUAST - lien externe
6. Voir OPQUAST - lien externe
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 - lien externe
É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 - lien externe