951
edits
Changes
Lab tech de l'ÉFPC/vExpo/Lignes directrices sur la conception et le contenu (view source)
Revision as of 15:45, 25 November 2020
, 15:45, 25 November 2020no edit summary
<br>
<br>
== Salle d'accueil vExpo ==
== Salle d'accueil vExpo ==
<div style="float:right">[[file:Lobby elements.png|link=https://wiki.gccollab.ca/images/e/ec/Lobby_elements.png|750px]]</div>
<div style="float:right">[[file:Lobby elements FrCA.png|link=https://wiki.gccollab.ca/images/d/de/Lobby_elements_FrCA.png|750px]]</div>
<p>La salle d'accueil vExpo permet aux participants de trouver facilement le contenu et les activités de l’événement, dont des liens vers :
<p>La salle d'accueil vExpo permet aux participants de trouver facilement le contenu et les activités de l’événement, dont des liens vers :
*l’ordre du jour de l’événement;
*l’ordre du jour de l’événement;
<span style="font-size: 1.5em;">Ce que nous attendons de vous</span><br>
<span style="font-size: 1.5em;">Ce que nous attendons de vous</span><br>
<p>Pour nous aider à développer la salle d'accueil virtuel dans les délais requis, nous aurons besoin que vous nous fournissiez les éléments suivants :</p>
<p>Pour nous aider à développer la salle d'accueil virtuel dans les délais requis, nous aurons besoin que vous nous fournissiez les éléments suivants :</p>
❏ Titre de l’événement (dans les deux langues officielles)
❏ Titre de l’événement (dans les deux langues officielles)<br>
❏ Date et heure de l’événement
❏ Date et heure de l’événement<br>
❏ Image de marque ministérielle, si elle doit être utilisée dans la salle
❏ Image de marque ministérielle, si elle doit être utilisée dans la salle d'accueil <br>
❏ Fichiers sources pour les visuels de l'événement, illustrations, image de marque, s'ils doivent être utilisés dans la salle d'accueil
❏ Fichiers sources pour les visuels de l'événement, illustrations, image de marque, s'ils doivent être utilisés dans la salle d'accueil <br>
:*Ceci garantira une présentation uniforme dans toute la promotion de l’événement (p. ex. en utilisant les mêmes éléments visuels pour les fiches de médias sociaux et sur l’écran de présentation de la salle ExpoV).
:*Si les éléments visuels ne sont pas fournis, notre concepteur en proposera.
<br>
❏ Liens vers votre contenu (i.e. programme de l'événement, biographies)
❏ Liens vers votre contenu (i.e. programme de l'événement, biographies)<br>
❏ Liens vers les présentation de l’événement
❏ Liens vers les présentation de l’événement<br>
<p>Remarque : Il se peut que vous souhaitez ou ayez besoin que la salle d'accueil reflète l'aspect et la convivialité de l'image de marque visuelle de l'événement (ex : matériel promotionnel). Si des visuels, logos, etc. supplémentaires doivent être inclus dans la conception visuelle de l'événement, veillez nous en informer et nous envoyer les fichiers sources avec le modèle de soumission de contenu (facultatif).</p>
<p>Remarque : Il se peut que vous souhaitez ou ayez besoin que la salle d'accueil reflète l'aspect et la convivialité de l'image de marque visuelle de l'événement (ex : matériel promotionnel). Si des visuels, logos, etc. supplémentaires doivent être inclus dans la conception visuelle de l'événement, veillez nous en informer et nous envoyer les fichiers sources avec le modèle de soumission de contenu (facultatif).</p>
== Kiosques virtuels ==
== Kiosques virtuels ==
<div style="float:right">[[file:VKiosk elements.png|link=https://wiki.gccollab.ca/images/7/77/VKiosk_elements.png|750px]]</div>
<div style="float:right">[[File:VKiosk elements FrCA.png|link=https://wiki.gccollab.ca/images/0/04/VKiosk_elements_FrCA.png|750px]]</div>
<p>The virtual kiosks are designed to provide participants with easy access information about partners and their initiatives. Kiosks usually include:
<p>Les kiosques virtuels sont conçus pour fournir aux participants des renseignements facilement accessibles sur les partenaires et leurs initiatives. Les stands comprennent généralement ce qui suit.
*Kiosks name
*Nom du kiosque
*Contact information
*Coordonnées
*Links to websites, videos and podcasts, etc.
*Liens vers des sites Web, des vidéos et des balados, etc.
</p>
</p>
<p>All content accessible through the kiosks must comply with the requirements outlined below.</p>
<p>Tout contenu accessible par le kiosque doit être conforme aux exigences décrites ci-après.</p>
=== Content requirements ===
=== Exigences relatives au contenu ===
<p>All content to be included in a kiosk must:
<p>Voici les exigences à l’égard du contenu d’un kiosque.
*Be '''available on the web''' (e.g. department site, GCwiki, GCpedia, Youtube, etc.) so that we can link to it directly.
*Être '''accessible sur le Web''' (p. ex. site du ministère, GCwiki, GCpédia, YouTube, etc.) afin que nous puissions y accéder directement
:''Note: the Digital Academy will not host any content for the kiosk. However, the team can provide guidance to help you find the best options to make your content available on the Web.''
:''Remarque : L’Académie du numérique n’hébergera aucun contenu du kiosque. Toutefois, l’équipe peut vous conseiller pour trouver les meilleures façons de rendre votre contenu accessible sur le Web.''
*Be available in '''both official languages'''.
*Être offert dans les '''deux langues officielles'''
*Be '''accessible''' (i.e readable using assistive technology, alt text, transcripts, closed captions, etc.)
*Être '''accessible''' (c.-à-d. être consultable à l’aide de technologies d’assistance, de texte alternatif, de transcriptions, de sous-titres, etc.)
:''Note: The CSPS Digital Academy is committed to offer content and products that are fully accessible and inclusive. Content that does not meet accessible requirements will not be included in the kiosk (e.g. no PDFs will be accepted).'' </p>
:''Remarque : L’Académie du numérique de l’EFPC s’engage à offrir des contenus et des produits qui sont totalement accessibles et inclusifs. Le contenu qui ne répond pas aux exigences d’accessibilité ne sera pas inclus dans le stand (p. ex. aucun document PDF ne sera accepté).''
==== Public Access ====
</p>
<p>The vExpo is available publicly on the Web for anyone to see and access. By default, all content available from the lobby and in the kiosk should:
==== Accès public ====
*have open access to be viewed publicly, without login or restricted permissions.
<p>Le vExpo est accessible sur le Web, pour que tout le monde puisse la voir et y accéder. Par défaut, le contenu accessible dans la salle doit être conforme à ce qui suit.
*have the appropriate copy rights to be shared publicly.
*Être librement consultable et être exempt de connexion restreinte.
:''Note: Although we do not recommend it, it is possible to restrict access to GC employees by hosting your content on a GCpedia page, which can only be accessed when on the GC network.''</p>
*Détenir les droits de copie nécessaires pour la diffusion publique.
:''Remarque : Bien que nous ne le recommandions pas, il est possible de restreindre l’accès aux employés du gouvernement du Canada en hébergeant votre contenu sur une page GCpédia, qui ne peut être consultée qu’à partir du réseau du gouvernement du Canada.''</p>
{| width="100%" cellpadding="10" cellspacing=15px
{| width="100%" cellpadding="10" cellspacing=15px
|style="border-left: 10px solid #3f2a56; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); color: black; background-color: white; font-size:1em;" |
|style="border-left: 10px solid #3f2a56; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); color: black; background-color: white; font-size:1em;" |
<span style="font-size: 1.5em;">What we need from you</span><br>
<span style="font-size: 1.5em;">Ce que nous attendons de vous</span><br>
❏ Titre et logo/image du kiosque, le cas échéant (dans les deux langues officielles)<br>
❏ Image de marque ministérielle, si elle doit être utilisée pour le kiosque<br>
❏ fichers sources pour les visuels du kiosque, illustrations, image de marque, s'ils doivent être utilisés pour le kiosque<br>
❏ Tous les éléments de contenu s’appliquant au kiosque.<br>
<p>For each individual piece of content becoming a hotspot:
<p>Ajouter ce qui suit à chaque élément de contenu servant de point d’accès<br>
❏ Une '''image ou icône''' représentative (dont le texte est rédigé dans les deux langues officielles, le cas échéant) <br>
❏ Un '''élément textuel décoratif''' (facultatif) ajouté à l’image du point d’accès<br>
❏ Des '''liens''' vers le contenu (en français et en anglais)<br>
❏ Un '''bref descriptif''' de chaque fiche de point d’accès (voir la remarque sur les points d’accès susmentionnée)<br>
**This should be a call to action, enticing participants to click on the link
:*Cela devrait inciter les participants à cliquer sur le lien.<br>
**Character limit: 100 (including spaces)
:*Limite de 100 caractères, y compris les espaces<br>
**In both official languages
:*Dans les deux langues officielles<br>
❏ '''Icône''' à utiliser sur la fiche du point d'accès (dans les deux langues officielles, si elle comporte du texte) - (voir la remarque sur les points d’accès susmentionnée).<br>
**These icons are used to accompany the hotspot’s descriptive text, therefore should correspond with the text
:*Les icônes accompagnant le descriptif du point d’accès doivent correspondre au texte. <br>
**If not provided, our designer will use standard icons from our library
:*Si elles ne sont pas fournies, notre concepteur vous proposera des icônes standards de notre bibliothèque. <br>
❏ Descriptif de l’emplacement général préféré où vous souhaitez que les différents éléments de contenu s’affichent dans le stand (c.-à-d. sur le panneau gauche, central ou droit).<br>
</p>
</p>
<div class="btn">[[Media:VExpo Content Submission Template Kiosk.docx |vExpo Kiosk Content Submission Template (download Word file)]]</div>
<div class="btn">[[Media:VExpo Content Submission Template Kiosk.docx |Modèle de soumission de contenu pour un kiosque (télécharger le fichier Word)]]</div>
|}
|}
=== Design and Visual Guidelines ===
=== Lignes directrices sur la conception et le contenu visuel ===
<p>The virtual kiosks are used to provide users with an overview of a department’s or group’s mandate, projects and/or initiatives. To have a successful product, here are some key considerations when gathering and submitting content to be included in your kiosk.</p>
<p>Les kiosques virtuels présentent un aperçu du mandat, des projets ou des initiatives d’un ministère ou d’un groupe. Afin que votre produit soit efficace, vous devez tenir compte de certains facteurs au moment de définir et de présenter le contenu de votre kiosque.</p>
==== <big>General layout</big> ====
==== <big>La disposition générale</big> ====
<p>A balanced composition normally is achieved by using 3 panels to showcase your content, accompanied with a separator panel that usually displays a title.
<p>Une composition équilibrée est généralement constituée de trois panneaux de contenu, accompagnés d’un élément séparateur affichant le titre.
[[File:Kiosk 3 panel.png|center|350px]]
[[File:Kiosk 3 panel.png|center|350px]]
<div style="text-align: center;">''Example of a virtual kiosk with 3 panels''</div>
<div style="text-align: center;">''Exemple d’un kiosque virtuel à trois panneaux''</div>
<br>
<br>
<br>
<br>
:''Note: It can sometimes be tempting to want to add as much information as possible on the kiosk and use as much real-estate as possible. However, this is not recommended as it can become overwhelming for the viewers and fail to achieve the main objective - to encourage viewers to click on the kiosk links and learn more about what you have to offer.''</p>
:''Remarque : Il peut être tentant de coincer le plus de renseignements possible dans les panneaux du kiosque. Un tel excès de renseignements est toutefois déconseillé, car cela peut décourager l’utilisateur et nuire à l’atteinte de l’objectif principal : encourager l’utilisateur à cliquer sur les liens du stand pour en savoir plus sur votre proposition.''</p>
<br>
<br>
<br>
<br>
<p><big>Kiosks often include 4 key elements:</big></p>
<p><big>Un kiosque devrait comprendre les quatre éléments suivants.</big></p>
<p>'''Kiosk identity:''' Positioned at the top of the middle panel, this area includes the name of the kiosk (e.g. organization name) and, if available, any image or official logo associated with it.
<p>'''L’identification du kiosque :''' Cette zone, dans la partie supérieure du panneau central, comprend le nom du kiosque (p. ex. le nom de l’organisation) et les images ou logos officiels connexes.
[[File:Kiosk panel title.png|center|350px]]
[[File:Kiosk panel title.png|center|350px]]
<div style="text-align: center;">''Example of a kiosk title panel using a logo and a name.''</div>
<div style="text-align: center;">''Exemple de panneau de titre de kiosque utilisant un logo et un nom.''</div>
</p>
</p>
<br>
<br>
<p>'''Content elements:''' This includes the different pieces of content that are displayed on the kiosk. They are the key elements that attracts the viewers’ attention, on which they can click to navigate to more detailed information (i.e. Website, video, etc.). This usually includes a combination of icons or images (ex: screens-shots of a web page or video, stock images, etc) with some short decorative text that helps to give some quick and short context to what the idea or project is about.
<p>'''Éléments de contenu :''' Cela comprend les différents éléments de contenu affichés dans le kiosque. Les utilisateurs peuvent cliquer sur ces éléments clés pour accéder à des renseignements plus détaillés (p. ex. le site Web et une vidéo). Cela est généralement constitué d’icônes ou d’images (p. ex. la capture d’écran d’une page Web ou d’une vidéo, et des images génériques) accompagnées d’un bref texte définissant le contexte d’un concept ou d’un projet.
[[File:Kiosk decorative text.png|center|350px]]
[[File:Kiosk decorative text.png|center|350px]]
<div style="text-align: center;">''Example of a piece of content represented by a screenshot and short decorative text.''</div>
<div style="text-align: center;">''Exemple de contenu représenté par une capture d’écran et un bref texte décoratif.''</div>
</p>
</p>
<br>
<br>
<p>'''Contact information:''' This will be the points of contact that can be used by viewers to reach out to you, follow you on social media, etc., usually making use of social media icons.
<p>'''- Coordonnées :''' Ce sont les renseignements dont les utilisateurs ont besoin pour vous joindre, vous suivre sur les médias sociaux, etc.
[[File:SM icons.png |center|200px]]
[[File:SM icons.png |center|200px]]
<div style="text-align: center;">''Example of a contact information section.''</div>
<div style="text-align: center;">''Exemple d’une section de coordonnées.''</div>
</p>
</p>
<br>
<br>
<p>'''Hotspots:''' Any of these elements mentioned above will be converted into a hotspot ( link) that viewers can click on to navigate to the target destination (i.e. Website), which is the actual content we want people to see. Each hotspot is accompanied by an information card that appears at the bottom of the screen on mouse-over (when the viewer’s cursor hovers over the hotspot). This information card includes a descriptive text and icon, and is used as a call to action, explaining why they should click on the link (e.g. Learn about the Discover Series. Visit the Website,). The text and icon used within the information card is also re-used for the mobile and accessible version of kiosk.
<p>'''Points d’accès : ''' Ce sont les éléments susmentionnés qui seront convertis en liens sur lesquels les utilisateurs pourront cliquer pour accéder à la destination cible, soit le site Web où se trouve le contenu à leur présenter. Chaque point d’accès s’accompagne d’une fiche d’information qui s’affiche dans la partie inférieure de l’écran lorsque l’utilisateur le survole à l’aide de sa souris. Cette fiche d’information comprend un descriptif et une icône qui incite l’utilisateur à cliquer sur le lien (p. ex. pour en savoir plus sur la série Découvrir, veuillez consulter le site Web). Le texte et l’icône utilisés dans la fiche d’information sont réutilisés dans la version mobile et accessible du kiosque.
[[File:Kiosk hotspot desc cards.png|center|350px]]
[[File:Kiosk hotspot desc cards.png|center|350px]]
<div style="text-align: center;">''Example of a hotspot and its description card.''</div>
<div style="text-align: center;">''Exemple de point d’accès et de fiche d’information connexe.''</div>
</p>
</p>
==== <big>Visual content guidelines</big> ====
==== <big>Lignes directrices sur le contenu visuel</big> ====
<p>'''Display the optimal amount of content.''' To ensure a good and effective design, we recommend having 1 to 5 hotspot in each panel of your kiosk. Plan and choose the key projects or initiatives you want to showcase, to effectively guide viewers to click on each hotspot. If one panel has no hotspot, it’s a missed opportunity. On the other hand, having too many hotspots (more than 5) will overload the viewers and their attention will be split in too many directions, making it less effective.
<p>'''Afficher la quantité optimale de contenu.''' Pour que votre conception soit efficace, nous vous conseillons d’intégrer d’un à cinq points d’accès dans chaque panneau du kiosque. Déterminez les principaux projets ou initiatives que vous souhaitez promouvoir, afin d’orienter efficacement les utilisateurs vers chaque point d’accès. Le panneau qui ne propose aucun point d’accès est infructueux. Toutefois, si le panneau propose un nombre excessif de points d’accès (plus de cinq), il surchargera l’utilisateur et diluera son attention, le rendant moins efficace.
[[File:Kiosk content do & donts.png|center|750px]]
[[File:Kiosk content do & donts.png|center|750px]]
</p>
</p>
<br>
<br>
<p>'''Keep decorative text short and simple.''' The text used directly in the kiosk background acts as a decorative visual element and should only be used to provide additional context to the hotspot (often represented by an image or icon). As a result, the decorative text needs to be very short and simple, creating curiosity. This text is only decorative, and does not appear on the mobile and accessible version of the kiosk. As a result, do not include any important information in the decorative text that is not available elsewhere. Keep it short and sweet… using a long paragraph tends to discourage users and will lose their attention.
<p>'''Le texte décoratif doit être bref et évocateur.''' Le texte en toile de fond étant un élément visuel décoratif, il ne doit servir qu’à expliciter le point d’accès, qui n’est souvent représenté que par une image ou une icône. Le texte décoratif doit être bref et évocateur de sorte à stimuler la curiosité de l’utilisateur. N’étant que décoratif, le texte ne s’affiche pas sur la version mobile et accessible du stand. Veuillez donc éviter d’y joindre des renseignements importants inaccessibles ailleurs. Ce texte doit être bref et concis, car un excès de mots découragera l’utilisateur et diluera son attention.
[[File:Kiosk decoractive text do & donts.png|center|650px]]
[[File:Kiosk decoractive text do & donts.png|center|650px]]
</p>
</p>
<br>
<br>
<p>'''Consider the overall look when selecting images.''' The proper selection of images is key. Each image must be coherent with the context in which they are used while also considering the overall design composition of the kiosk. The images should share the same style and tone to ensure a professional look. Combining images with different styles and colors schemes could lead to the impression of disorganization and lack of structure, affecting the effectiveness of the kiosk.
<p>'''Songez à la présentation générale dans le choix d’images.''' Le bon choix d’images est primordial. Chaque image doit s’intégrer au contexte d’utilisation et respecter la composition conceptuelle générale du kiosque. Les images doivent être de style et ton similaires pour créer une présentation professionnelle. Le fait de combiner des images de couleurs et de styles différents pourrait donner une impression de désorganisation et de manque de structure, ce qui minerait l’efficacité du kiosque.
:''Note: If you are uncertain about what images to include, you can suggest images and icons, which we will use as guides to create the final designs, ensuring a coherent look and feel.''
:''Remarque : Si vous ne savez pas quelles images utiliser, vous pouvez présenter des images et icônes dont nous nous servirons comme guides pour créer la conception définitive qui garantira une présentation cohérente.''
</p>
</p>
<br>
<br>
<p>'''Share your departmental branding books, guidelines, etc.''' Let us know if your kiosk should follow a specific departmental branding or look and feel. In order to insure that the final design respects the visual identity of the organization, make sure to share the branding book, or material. You are responsible to work with, and confirm with your communications team if and how the departmental branding should be used on the kiosk.</p>
<p>'''Fournissez vos guides et lignes directrices sur l’image de marque ministérielle. ''' Indiquez-nous si votre kiosque doit respecter l’image de marque ou la présentation du Ministère. Afin que la conception définitive respecte l’image de marque de l’organisation, veuillez nous fournir le guide ou les documents sur l’image de marque. Il vous incombe de confirmer, de concert avec votre équipe des communications, si l’image de marque ministérielle doit être affichée sur le stand, et de quelle manière elle doit l’être.</p>
<br>
<br>
<p>'''Provide the right asset format and quality.''' To ensure high quality visuals, please send all assets in vector format (.ai, .eps, .svg, etc.). If not possible, send only high resolution images.
<p>'''Fournir des éléments visuels dans le bon format et de bonne qualité.''' Afin d’avoir des images de bonne qualité, veuillez les envoyer en format vectoriel (.ai, .eps, .svg, etc.). Si ce n’est pas possible de le faire, envoyez des images en haute résolution seulement.
:''Note: Each panel in the kiosk is 2000x3000px. In this context, high resolution will have to be enough size to have a good representation of the given asset in that canvas size.''
:''Remarque : La définition de chaque panneau est de 2000 x 3000 px. La résolution devra être suffisante pour bien rendre l’élément visuel dans ce format.''
</p>
</p>