L’édition numérique gratuite pour tablettes met en valeur la profondeur des textes et offre une expérience riche, immersive et engageante grâce à des images et à des graphiques interactifs, à des vidéos ainsi qu’à des galeries photos. Le panneau En direct propose également l’actualité en temps réel. L’application permet de retrouver les éditions antérieures et les hors-séries de La Presse.
La nature du produit
La vitrine
La vitrine permet de retrouver les éditions antérieures et les hors-séries de La Presse. Les hors-séries sont des numéros spéciaux souvent promotionnels et des contenus thématiques rédactionnels.
L’édition
L’édition propose une expérience quotidienne enrichie. Les textes, grands dossiers et enquêtes des journalistes, chroniqueurs, collaborateurs et de l’éditorialiste en chef sont mis en valeur par des images interactives, des vidéos, des cartes et des galeries de photos.
Menu des sections
À partir du bouton d’action 
, il est possible d’accéder au menu des sections de l’application. Le menu des sections a pour objectif d’aider les utilisateurs à naviguer à travers les différentes sections de l’édition.
Le mode plein écran
Il permet à l’utilisateur de consulter les textes, les vidéos et les photos en mode plein écran pour une expérience immersive. Lors de la consultation d’un texte en mode plein écran, il est possible d’augmenter la taille des caractères, d’opter pour le mode nuit et d’activer le défilement automatique du texte.
L’aperçu des sections
L’aperçu des sections permet à l’utilisateur de trouver rapidement ce qu’il recherche en lui donnant directement accès à un écran.
Panneau en direct
Lorsque l’utilisateur est connecté, il peut utiliser le panneau en direct pour consulter des nouvelles en continu et la météo. Le panneau est accessible par le bouton « En direct » 
positionné dans le coin supérieur droit de l’application.
Le fiche auteur
À partir du bouton d’action 
, il est possible d’accéder à la fiche auteur. La fiche auteur présente une courte biographie.
Fenêtre web
À partir du bouton 
, il est possible d’accéder à des contenus complémentaires disponibles sur le web.
Les principales gestuelles
Des gestuelles précises permettent à l’utilisateur de naviguer dans l’édition et de manipuler tous les objets (textes, vidéos, graphiques, etc.).
Toucher
Toucher la surface pour activer un objet.
Appuyer longuement
Toucher la surface pendant une période prolongée pour activer le contenu contextuel.
Faire glisser
Glisser le bout du doigt sur la surface pour déplacer latéralement.
Écarter
Toucher la surface avec deux doigts puis séparer les doigts pour agrandir.
Pincer
Toucher la surface avec deux doigts puis rapprocher les doigts pour réduire.
Les attributs de l’édition
L’édition de La Presse+ regroupe un ensemble de caractéristiques visant à fidéliser les lecteurs et à offrir une expérience utilisateur optimale. Voici les principaux attributs de conception de l’édition:
L’entrée dans l’édition
La Une principale et la deuxième Une constituent l’entrée dans l’édition. Les articles annoncés sur ces deux écrans sont sélectionnés par la salle de rédaction. L’entrée dans l’édition doit être visuellement attrayante et doit guider le lecteur à travers l’offre de contenus du jour. Chaque article est touchable, ce qui permet au lecteur d’accéder rapidement aux contenus qui l’intéressent.
Navigation
Chaque case doit être touchable afin de diriger le lecteur vers l’article.
Une de section
La Une de section regroupe les articles de la section sélectionnés par la salle de rédaction. Elle doit être visuellement attrayante et doit guider le lecteur à travers l’offre de contenus du jour. Chaque article est touchable, ce qui permet au lecteur d’accéder rapidement aux contenus qui l’intéressent.
Écran simple
Un écran simple contient une seule histoire présentée dans une bande défilante superposée à une photo. La bande défilante peut accueillir du texte, des photos, de la vidéo, des graphiques et des capsules.
Navigation
La navigation est tributaire des objets interactifs qui composent cet écran.
Écran complexe
Il est conçu pour raconter une histoire complexe de façon séquentielle et chronologique à l’intérieur d’un même écran. L’écran complexe présente divers types de contenus et il doit exploiter au maximum l’interactivité et les fonctionnalités narratives possibles pour enrichir une histoire. Le graphisme n’est pas décoratif; il doit être au service de l’histoire et mettre en valeur l’information.
Navigation
La navigation est tributaire des objets interactifs qui composent cet écran.
Demi-écran et l’écran épaule
Le demi-écran et l’écran épaule sont des espaces restreints où du contenu rédactionnel peut cohabiter avec de la publicité.
Il est fortement recommandé que chaque écran exploite au maximum les objets suivants : texte, photo, vidéo ou infographie, afin de diversifier et de dynamiser cet espace.
Navigation
La bande défilante est l’outil tout indiqué pour mettre en valeur le demi-écran.
Écran unique
L’écran unique existe en un seul exemplaire et il est toujours positionné au même endroit dans l’édition. Le contenu et l’affichage ne changent pas régulièrement.
Publicité
L’édition propose des formats immersifs et interactifs. Voici les principaux formats :
Xtra
Un Xtra regroupe des contenus promotionnels produits par ou pour des annonceurs.
Les modèles d’écrans
Les modèles d’écrans contribuent à l’homogénéité de La Presse+. Ils renforcent le sentiment de confiance des lecteurs en facilitant l’apprentissage du produit. Le lecteur lit et mémorise plus facilement les informations quand il sait où les retrouver. Les modèles comportent des éléments interactifs. Il est nécessaire de les mettre en évidence pour que le lecteur puisse bien les identifier. Des modèles existent pour chaque type d’écran. Ils sont déclinés pour chaque section de l’application. Des modèles spécifiques ont également été imaginés pour certaines rubriques.
Voici les principaux modèles :
Bande défilante
La bande défilante est superposée à une photo. Elle s’active du bas vers le haut. Il est possible de la placer à droite, à gauche ou au centre de l’écran. Elle peut accueillir du texte, des photos, de la vidéo, des graphiques et des capsules. On peut écarter le texte, la photo et la vidéo pour les consulter en mode plein écran. La hauteur de départ de la bande défilante ne doit pas amoindrir l’impact de la photo.
La bande défilante pleine hauteur
La bande défilante fixe a les mêmes caractéristiques que la bande défilante, mais elle n’est pas superposée à une photo. Elle s’active du bas vers le haut et est placée à droite ou à gauche de l’écran. Elle permet de mieux mettre en valeur une photo carrée, qui aurait autrement été difficile à recadrer.
Questions – réponses
L’écran questions-réponses contient une bande défilante. L’écran a une identité visuelle propre (QR) et permet au lecteur de l’identifier rapidement. Les questions et les réponses ont des styles de paragraphes différents, ce qui facilite la lecture.
Les chroniques, analyses et décryptages
Les chroniques, analyses et décryptages ont une présentation différente afin de mettre en valeur leurs auteurs.
Éditorial et caricature
L’éditorialiste en chef et le caricaturiste ont des blocs spéciaux verticaux. Leurs pleins écrans sont toujours présentés dans la section Actualités.
Dossiers à onglets horizontaux
Le dossier à onglets horizontaux permet de regrouper plusieurs textes d’un même reportage ou portant sur le même thème. Le lien qui unit les textes est décrit dans le premier onglet, que l’on appelle « Accueil », au moyen d’un titre accrocheur et d’une amorce.
Le dossier à onglets horizontaux est formé de sous-écrans qui s’affichent sur un même écran. Le nombre d’onglets varie entre trois et cinq. Le menu de navigation est linéaire, de gauche à droite. Son comportement est le même dans toutes les sections.
Minimum de 3 onglets et un maximum de 5 onglets.
Affichage de l’onglet sélectionné
- Teinte 0 du nuancier de la section.
- Texte : capitales, gras et blanc.
Affichage de l’onglet non sélectionné
- Teinte +5 du nuancier de la section.
- Texte : capitales, gras et teinte -1 du nuancier de la section.
Dossiers à onglets verticaux avec accueil
Le dossier à onglets verticaux avec accueil permet de regrouper plusieurs textes d’une même histoire. Il peut également être utilisé pour diviser en chapitres une longue chronique.
Le premier onglet un titre accrocheur et une amorce. Le nombre d’onglets varie entre trois et six. Il est possible de conserver la même photo de fond pour tous les onglets. Le menu est toujours placé à gauche de l’écran, les onglets les uns au-dessus des autres.
Le premier onglet est sélectionné au premier passage du lecteur. Le lecteur peut ensuite sélectionner les onglets dans l’ordre ou le désordre. À tout moment, il peut revenir en arrière.
Dans les cas où une seule personne signe les textes de tous les onglets, on ne place qu’un seul bloc auteur, au-dessus des onglets. Si plusieurs plumes cohabitent, chaque texte sera coiffé d’un bloc auteur.
Les onglets verticaux doivent toujours être à 2 px du bord de l’écran.
Minimum de 2 à un maximum de 6 onglets.
Affichage de l’onglet sélectionné
- Teinte 0 du nuancier de la section.
- Texte doit toujours être en capital.
- Caractères gras et blanc.
Affichage de l’onglet non sélectionné
- Teinte +5 du nuancier de la section.
- Texte en capital, caractères gras.
- Teinte -1 du nuancier de la section.
Dossiers à onglets verticaux sans accueil
Le dossier à onglets verticaux sans accueil permet de regrouper des textes portant sur un même thème. Le nombre d’onglets varie entre deux et six.
Le premier texte est présenté au premier onglet, sans accueil. Une courte mise en contexte peut toutefois être placée au-dessus des onglets. La même photo de fond peut être conservée pour tous les onglets.
Le menu est toujours placé à gauche de l’écran, les onglets les uns au-dessus des autres.
Le premier onglet est sélectionné au premier passage du lecteur. Le lecteur peut ensuite sélectionner les onglets dans l’ordre ou le désordre. À tout moment, il peut revenir en arrière.
Les onglets verticaux doivent toujours être à 2 px du bord de l’écran.
Minimum de 2 à un maximum de 6 onglets.
Affichage de l’onglet sélectionné
- Teinte 0 du nuancier de la section.
- Texte doit toujours être en capital.
- Caractères gras et blanc.
Affichage de l’onglet non sélectionné
- Teinte +5 du nuancier de la section.
- Texte en capital, caractères gras.
- Teinte -1 du nuancier de la section.
Brèves défilantes
Cette formule permet de rassembler des brèves dans des bandes défilantes. Les bandes défilantes sont placées en superposition sur un fond de couleur du nuancier de la section. Elles s’activent du bas vers le haut de l’écran.
Les onglets d’actualités
Les onglets d’actualités ont été créés pour rassembler des textes secondaires, sans lien entre eux, qui n’ont pas été sélectionnés pour une présentation plein écran mais qui bonifient l’offre du jour. Ces textes sont généralement plus courts que les textes présentés en mode plein écran. Le dernier onglet de cet écran regroupe généralement des nouvelles brèves.
Le menu est toujours placé à gauche de l’écran, les boutons les uns au-dessus des autres. Les onglets de navigation (entre trois et cinq) sont plus larges que dans les dossiers à onglets verticaux et horizontaux, et comportent un titre complet et un visuel. Le titre est rédigé en bas de casse, pour une meilleure lisibilité.
Le premier onglet est sélectionné au premier passage du lecteur. Le lecteur peut ensuite sélectionner les onglets dans l’ordre ou le désordre. À tout moment, il peut revenir en arrière.
Le texte doit être lisible dans chaque onglet, que l’onglet soit sélectionné ou non.
Affichage de l’onglet sélectionné
- Teinte 0 du nuancier de la section.
- Texte: toujours en bas de cases
- Caractères gras et blanc.
Affichage de l’onglet non sélectionné
- Teinte +5 du nuancier de la section.
- Texte: toujours en bas de cases
- Caractères gras, teinte -1 du nuancier.
Défilante à ancres navigation principale (ancres foncées)
La bande défilante à ancres permet de découper un texte. Elle a les mêmes caractéristiques que la bande défilante, mais permet à l’utilisateur de toucher les boutons pour accéder directement à un contenu.
Dans les modèles verticaux, les boutons sont placés à gauche ou à droite de l’écran, ou des deux côtés. Dans les modèles horizontaux, les boutons sont placés en bas de l’écran. Le premier bouton est sélectionné au premier passage du lecteur. Le lecteur peut ensuite sélectionner les boutons dans l’ordre ou le désordre. À tout moment, il peut revenir en arrière.
Affichage d’ancre sélectionnée
- Teinte 0 du nuancier de la section.
- Texte en capital, caractères gras et blanc
Affichage d’ancre foncée non sélectionnée
- Teinte -5 du nuancier de la section.
- Texte en capital, caractère gras et blanc.
À noter qu’il doit toujours avoir :
- un filet de 1 px au bouton, de la teinte 0 du nuancier de la section ;
- un filet de 1 px sous les boutons, de la teinte 0 du nuancier de la section ;
- une marge de 20 px de chaque côté du bouton ;
- un fond opaque sous les boutons de navigation.
Défilante à ancres navigation principale (ancres pâles)
La bande défilante à ancres permet de découper un texte. Elle a les mêmes caractéristiques que la bande défilante, mais permet à l’utilisateur de toucher les boutons pour accéder directement à un contenu.
Dans les modèles verticaux, les boutons sont placés à gauche ou à droite de l’écran, ou des deux côtés. Dans les modèles horizontaux, les boutons sont placés en bas de l’écran. Le premier bouton est sélectionné au premier passage du lecteur. Le lecteur peut ensuite sélectionner les boutons dans l’ordre ou le désordre. À tout moment, il peut revenir en arrière.
Affichage d’ancre sélectionnée
- Teinte 0 du nuancier de la section.
- Texte en capital, caractères gras et blanc
Affichage d’ancre pâle non sélectionnée
- Teinte -5 du nuancier de la section.
- Texte en capital, caractère gras et blanc.
À noter qu’il doit toujours avoir :
- un filet de 1 px au bouton, de la teinte 0 du nuancier de la section ;
- un filet de 1 px sous les boutons, de la teinte 0 du nuancier de la section ;
- une marge de 20 px de chaque côté du bouton ;
- un fond opaque sous les boutons de navigation.
Bande défilante avec des ancre contenus complémentaires (ancres foncées)
Cet écran comporte un bande défilante simple et une bande défilante à ancres qui permet d’afficher des contenus complémentaires.
Un minimum de 3 ancres est requis. Aucun bouton n’est sélectionné au premier passage de l’utilisateur dans l’écran. Dans les modèles verticaux, les boutons sont placés à gauche ou à droite de l’écran. Dans les modèles horizontaux, les boutons sont placés en bas de l’écran. Le modèle horizontal peut accueillir un maximum de 3 boutons.
Affichage d’ancre sélectionnée
- Teinte 0 du nuancier de la section.
- Texte en bas de casse, caractères gras et blanc.
Affichage d’ancre foncée non sélectionnée
- Teinte -5 du nuancier de la section.
- Texte en capital, caractère gras et blanc.
À noter qu’il doit toujours avoir :
- un filet de 1 px au bouton, de la teinte 0 du nuancier de la section ;
- un filet de 1 px sous les boutons, de la teinte 0 du nuancier de la section ;
- une marge de 20 px de chaque côté du bouton.
Bande défilante avec des ancre contenus complémentaires (ancres pâles)
Cet écran comporte un bande défilante simple et une bande défilante à ancres qui permet d’afficher des contenus complémentaires.
Un minimum de 3 ancres est requis. Aucun bouton n’est sélectionné au premier passage de l’utilisateur dans l’écran. Dans les modèles verticaux, les boutons sont placés à gauche ou à droite de l’écran. Dans les modèles horizontaux, les boutons sont placés en bas de l’écran. Le modèle horizontal peut accueillir un maximum de 3 boutons.
Affichage d’ancre sélectionnée
- Teinte 0 du nuancier de la section.
- Texte en bas de casse, caractères gras et blanc.
Affichage d’ancre pâle non sélectionnée
- Teinte -5 du nuancier de la section.
- Texte en capital, caractère gras et blanc.
À noter qu’il doit toujours avoir :
- un filet de 1 px au bouton, de la teinte 0 du nuancier de la section ;
- un filet de 1 px sous les boutons, de la teinte 0 du nuancier de la section ;
- une marge de 20 px de chaque côté du bouton.
Présentation tuiles
La présentation par tuiles permet de raconter une histoire grâce aux photos. L’utilisateur peut toucher les tuiles afin de lire le texte associé à chacune des photos. Il peut aussi découvrir le contenu associé aux photos en cliquant sur le bouton d’action, qui doit être mis en évidence dans l’écran.
Règle
Chacune des tuiles doit avoir un filet de 5 px.
Fiches de mise en contexte
La fiche permet de donner rapidement du contexte aux utilisateur occasionnels (chronologie, bio, fiche d’entreprise, compte rendu de match sportif). Le texte doit être très court (100 mots maximum), et tenir en trois ou quatre points. Il est possible de fermer la fiche à partir du bouton d’action.
Bouton
- Bouton de la couleur 0 du nuancier
- Élément (+ / x ) blancs
Blanc / 0
Image interactive
Des boutons d’information superposés à une carte, à une photo ou à un graphique composent l’image interactive.
Les boutons doivent être utilisés pour présenter du contenu bref, en lien avec le visuel. Le 
et le , qui permettent d’ouvrir et de fermer la fiche, doivent demeurer au même endroit.
Les boutons ne doivent pas servir à présenter un texte d’accompagnement.
Bouton pâle
- Intérieur blanc.
- Filet de 4px dans la teinte 0 du nuancier de la section.
Bouton foncé
- Intérieur dans la teinte 0 du nuancier de la section.
- Filet de 4px blanc.
La galerie de photos
La galerie de photos permet de rassembler plusieurs photos et leurs légendes. Elle peut être accompagnée d’un titre, d’une amorce et de blocs auteurs.
Photoreportage
Le photoreportage vise à raconter une histoire à travers une série de photographies soigneusement sélectionnées et accompagnées de légendes explicatives.
La signalétique
Tous les jours, La Presse offre une information de qualité qui se distingue par sa couverture riche et diversifiée de l’actualité. La Presse doit s’assurer de mettre de l’avant ses contenus à valeur ajoutée qu’elle offre à ses lecteurs quotidiennement. Elle doit guider et accompagner ses lecteurs à travers son offre de contenus. Voici le répertoire des normes relatives à l’affichage des étiquettes dans La Presse+.
Une d’édition
Guider et accompagner les lecteurs à travers l’offre de contenus.
Règle
Afficher le nom de la section en utilisant la teinte 0 de son nuancier.
Exemple d’étiquette de section
INSPIRATION
Recommandation
Pour les cahiers de type magazine, ajouter le nom de la sous-section sur la droite, en utilisant la teinte -2 du nuancier de la section.
Exemple d’étiquette de sous-section
VOYAGE
Une de section
Guider et accompagner les lecteurs à travers l’offre de contenus.
Règle
Afficher le nom de la sous-section ou de la rubrique, s’il y en a une, en utilisant la teinte 0 du nuancier de la section.
Exemple d’étiquette de sous-section
Exemple d’article sans sous-section
TRANSPORT RÉGIONAL AÉRIEN
Affichage des chroniques
Règle
Afficher l’étiquette chronique en utilisant la teinte 0 du nuancier de la section.
Faire suivre du nom du chroniqueur dans une étiquette de la teinte -2 du nuancier.
Exemple d’article sans sous-section
CHRONIQUE
PRÉNOM NOM
Règle d’affichage dans le cahin
Afficher le mot chronique dans le cahin.
Priorité 2
Voici la liste des étiquettes :
EN PHOTOS
GRANDE ENTREVUE
TÉMOIGNAGE
POUVOIR D’ACHAT
DÉCRYPTAGES
PLACE AUX LECTEURS
CE QUE LA PRESSE EN PENSE
L’ANGLE POSITIF
ANALYSE
Règle
Une étiquette de priorité 2 est toujours placée devant l’étiquette de section / sous-section, s’il y a lieu.
Elle est affichée dans la teinte -2 du nuancier de la section.
Les étiquettes thématiques
L’étiquette thématique ne vit que dans le cahin, sauf exception, et sert à identifier une thématique ponctuelle qui peut être présente dans plusieurs cahiers de l’édition.
Règle
La thématique remplace la rubrique, section ou sous-section. Elle se place sur la gauche, à la suite d’une étiquette de priorité 1 ou 2, s’il y a lieu.
Les étiquettes choix de La Presse
L’étiquette spéciale «Choix de La Presse» est utilisée pour mettre de l’avant les contenus à valeur ajoutée de La Presse, sélectionnés quotidiennement par la rédaction.
Règle
Positionner l’étiquette sur la droite du cahin, et penser à l’ajouter manuellement dans la vignette du navigateur.
Les boutons
Le bouton sert à déclencher une commande ou à faire apparaître tous types d’objets : articles, photos, vidéos, graphiques, etc. Il est visible en permanence et son principal intérêt est de permettre un accès rapide aux commandes. Le lecteur doit toujours pouvoir revenir en arrière en tout moment ou annuler son action. Le bouton porte une couleur spécifique à chaque section et une icône représentant le type de contenu qu’il affiche. L’intitulé dans le bouton doit guider le lecteur et lui permettre de prévoir les résultats de son action.
Corde à l’inge
Indique l’accès à une série de contenus.
Fenêtre Web
Indique l’accès au navigateur web.
Écrivez-nous
Indique aux lecteurs qu’ils peuvent nous envoyer un courriel.
Carte
Indique l’accès à une carte.
Vitrine
Indique l’accès au rail Hors-séries de la vitrine.
Panneau En direct
Toucher la surface avec deux doigts puis rapprocher les doigts pour réduire.
Rafraichir
Indique l’accès au panneau En direct.
App Store
Indique l’accès à l’App Store.
Indique l’accès à Facebook.
X
Indique l’accès à X.
Indique l’accès à Instagram.
Indique l’accès à Pinterest.
Spotify
Indique l’accès à Spotify.
Threads
Indique l’accès à Threads.
Bluesky
Indique l’accès à Bluesky.
Indique l’accès à LinkedIn.
Youtube
Indique l’accès à Youtube.
TikTok
Indique l’accès à TikTok.