%% nav-debut : généré par gen_navigation.py, ne pas modifier à la main %% > [!nav] > ↩ [[Design et Création Numérique/Design/User Interface/User Interface|Accueil · User Interface]] > > | [[Design et Création Numérique/Design/User Interface/3 Les composants et leurs états\|← Les composants et leurs états]] | [[Design et Création Numérique/Design/User Interface/5 De la maquette au développeur\|De la maquette au développeur →]] | > |:---|---:| %% nav-fin %% # 📘 4. Écrans adaptatifs et textes d'interface Un écran se consulte sur un téléphone, une tablette et un ordinateur. Il porte des textes que l'utilisateur lit pour agir. Cette page couvre l'adaptation aux largeurs et la rédaction des textes. ## 4.1 Trois largeurs | Appareil | Largeur | Colonnes | Ce qui change | |---|---|---|---| | **Téléphone** | Moins de 600 pixels | 4 | Une colonne de contenu, navigation repliée ou en bas d'écran, tableaux transformés en cartes. | | **Tablette** | 600 à 1024 pixels | 8 | Deux colonnes, navigation latérale repliable. | | **Ordinateur** | Plus de 1024 pixels | 12 | Plusieurs colonnes, navigation visible, tableaux complets. | Les largeurs où la mise en page change s'appellent des **points de rupture**. Trois points de rupture suffisent à la plupart des applications. **À manipuler :** faites varier la largeur de l'écran. La même maquette se réorganise à chaque point de rupture : navigation repliée, tableau transformé en cartes, boutons pleine largeur. ```sq-grille largeur: 1440 mode: maquette ``` ## 4.2 Concevoir d'abord pour le téléphone Commencer par l'écran le plus étroit force à trier : ce qui tient sur un téléphone est ce qui compte. Les largeurs supérieures ajoutent de l'espace, pas de l'information. Ce qui se réorganise entre les largeurs : - les colonnes se superposent ; - la navigation se replie derrière un bouton ou passe en barre inférieure ; - un tableau devient une liste de cartes, une carte par ligne, avec les colonnes les plus importantes ; - les boutons prennent toute la largeur ; - les cibles tactiles gardent 44 pixels au moins. C'est la recommandation pour un écran tactile ; la norme WCAG 2.2 fixe un minimum de 24 pixels. ## 4.3 Ce qui reste identique - La hiérarchie : le premier niveau reste le premier niveau. - La palette et la typographie, avec des tailles de titre réduites d'un cran. - Les composants et leurs états. - L'ordre des éléments dans la page, pour que l'utilisateur retrouve ses repères d'un appareil à l'autre. ## 4.4 Les textes d'interface Les textes d'une interface se rédigent avec autant de soin que sa mise en page. Ils sont courts, précis et orientés vers l'action. | Texte | Règle | Exemple | |---|---|---| | **Libellé de bouton** | Un verbe qui dit l'action, deux à trois mots. | « S'inscrire », « Enregistrer le semestre ». Le mot « OK » ne dit rien. | | **Titre d'écran** | Le nom de ce qu'on voit, identique à l'entrée de navigation. | « Mon planning ». | | **Étiquette de champ** | Le nom de la donnée, sans deux-points. | « Adresse mail ». | | **Message d'erreur** | La cause et la suite à donner. | « Inscription impossible : validez d'abord Design. » | | **Message de succès** | Le résultat obtenu. | « Inscription enregistrée. La compétence apparaît dans votre plan de charge. » | | **État vide** | Ce qu'il n'y a pas et comment en avoir. | « Aucune activité cette semaine. Le planning de la semaine prochaine est publié le vendredi. » | | **Confirmation destructrice** | La conséquence et le nom de l'action. | « Se désinscrire de Design Thinking ? Vous perdrez votre place en atelier. » Boutons : « Se désinscrire », « Annuler ». | Trois règles pour tous les textes : - **vouvoiement** et registre courant ; - **la même chose s'appelle toujours pareil** : « compétence » partout, jamais « module » ici et « cours » là ; - **pas de jargon technique** : « une erreur s'est produite » vaut mieux que « exception 500 », et « la cause et la suite à donner » valent mieux que les deux. **À manipuler :** pour chaque texte, choisissez la règle qu'il enfreint. ```sq-quiz ? Un bouton porte le libellé « OK ». - [x] Le libellé de bouton ne dit pas l'action. - [ ] Le message d'erreur ne donne pas la cause. - [ ] L'état vide ne dit pas comment le remplir. > Un libellé de bouton est un verbe qui dit l'action, par exemple « Enregistrer ». ? Un message affiche « Erreur 500 ». - [ ] Le libellé de bouton ne dit pas l'action. - [x] Le message d'erreur est en jargon technique et ne donne ni la cause ni la suite. - [ ] Le titre d'écran diffère de la navigation. > Un message d'erreur donne la cause et la suite à donner, sans jargon. ? Une liste vide affiche seulement « Aucune donnée ». - [ ] La confirmation ne nomme pas l'action. - [ ] Le vouvoiement n'est pas respecté. - [x] L'état vide ne dit pas comment obtenir des données. > Un état vide dit ce qu'il n'y a pas et comment en avoir. ? L'entrée de navigation s'appelle « Mon planning » et le titre de l'écran « Emploi du temps ». - [x] La même chose ne s'appelle pas toujours pareil. - [ ] Le libellé de bouton ne dit pas l'action. - [ ] Le message de succès ne donne pas le résultat. > Le titre d'écran reprend le nom de l'entrée de navigation. ? Une fenêtre demande « Êtes-vous sûr ? » avec les boutons « Oui » et « Non ». - [ ] L'étiquette de champ porte des deux-points. - [x] La confirmation ne dit ni la conséquence ni le nom de l'action. - [ ] Le texte n'est pas au vouvoiement. > Une confirmation destructrice nomme l'action et sa conséquence, et ses boutons reprennent le verbe : « Se désinscrire », « Annuler ». ``` ## 4.5 Exercice Ouvrez le planning de SkillQuest sur votre téléphone et sur un ordinateur. Notez ce qui se réorganise et ce qui reste identique. Relevez trois textes d'interface et vérifiez-les contre le tableau de la section 4.4. ## 4.6 À retenir - Trois largeurs, trois points de rupture, conception à partir du téléphone. - Les tableaux deviennent des cartes, la navigation se replie, les cibles gardent 44 pixels. - Un bouton porte un verbe, une erreur donne la cause et la suite, un état vide dit comment le remplir. %% nav-debut : généré par gen_navigation.py, ne pas modifier à la main %% > [!nav] > ↩ [[Design et Création Numérique/Design/User Interface/User Interface|Accueil · User Interface]] > > | [[Design et Création Numérique/Design/User Interface/3 Les composants et leurs états\|← Les composants et leurs états]] | [[Design et Création Numérique/Design/User Interface/5 De la maquette au développeur\|De la maquette au développeur →]] | > |:---|---:| %% nav-fin %% --- 🗓️ Historique Dernière mise à jour : `26 septembre 2026` Rédigé par : [[Julien DUQUENNOY]]