FICHES POUR PRÉPARER LA SCÉNARISATION DES PAGES ÉCRANS L exemple utilisé pour illustrer la première section de la fiche de découpage d une page écran s appuie sur une interface graphique réalisée avec le logiciel Flash. Il s agit d une animation visuelle et sonore avec des hyperliens principalement de type fonctionnel (par opposition à relationnel). Afin de nous assurer de la compréhension de chaque composant de la fiche A, nous ajoutons les quelques explications suivantes. Numéroter chaque page-écran. 1. Titrer chaque page (sous-titre, citation/slogan pour la première page du site), avant de déterminer les objets qui marqueront chacune d elles. 2. Penser au fond d écran: présence de la couleur, de la texture ou d une image pour créer un décor : à déterminer pour la page d entrée et les pages modèles. 3. Imaginer les formes iconiques: images qui vont s imposer comme figures, elles ont un degré d analogie plus ou moins élevé avec un objet de la réalité; ici, le rôle de l image et son rapport au verbe (mots écrits en légende ou intégrés dans l image) vont déterminer le choix d images réalistes, telle la photo, ou schématisées pour représenter un phénomène tel un ouragan. 4. Rédiger (une partie de) le texte courant, jouant sur i) des paramètres techniques tels que le type de caractères, la taille, le style; ii) des paramètres sémantiques tels que le rôle du titre ou du sous-titre (rôle attentionnel), le contenu courant du texte (rôle notionnel) ou de synthèse, en encadré ou en tableau récapitulatif (rôle rétentionnel). 5. Prévoir des sons: parole, bruits ou musique pouvant être intégrés dans une page. Dans l exemple choisi, il n y a aucun son au départ; il faut choisir la version Flash pour entendre la musique qui accompagne l ouverture de la page d accueil; des bruits marquent les points d entrée principaux de cette version; la parole ne joue pas de rôles, mais elle aurait pu être intégrée comme support de communication, complémentaire dans certaines sections. 6. Déterminer la palette de couleurs dominante: les couleurs de base qui marqueront le site.
La fiche A : nature de l information Cette fiche A sert à identifier tous les objets visuels et sonores qui peuvent ête insérés dans une page. À côté de chaque objet (textuel, iconique ou sonore), son origine en termes de nom de fichier, d adresse web, est inscrite. Dans la colonne de gauche (au 1/3 du tableau), les six premiers composants figurent, et, dans le corps du tableau (au 2/3 du tableau), c est l application proposée qui figure; il s agit en fait d informations tirées de la page d entrée du site de MONKEYMEDIA 1. Fiche A Nature de l information IDENTIFICATION ÉCRAN no : 1 MISE EN PAGE ÉCRAN 2 Page d entrée en html qui annonce la version animée en Flash. Mise en page, sans cadres, dans un tableau transparent avec trois cellules pour le corps de la page. NATURE DE L INFORMATION 1- TITRE ET RAPPORT À MONKEYmedia : http://www.monkey.com L IMAGE d accueil : soustitre/slogan/ schématisée de singe. Rapport de redondance entre le titre (majuscule du site) et le logo, tête Titre en rouge (#CC0000), caractère helvetica, sans sérif. Sous-titre en noir: interface design, information architecture, interaction technology Ancien slogan sous forme interrogative : - qui interpelle le visiteur : What does user friendly mean to you? 2- FOND OU ARRIÈRE PLAN : avec couleur, texture ou image. 3- IMAGES OU FIGURES ET FORMAT images fixes : photos (jpg), dessins (gif), tableau, graphisme, schéma, arborescence. Deux couleurs, dans les tons de vert/marron, en arrière-plan (#CCCC66 et #999933) Images en mouvement, intégrées ou non : animation flash, gifs animés, capsules vidéo Page d entrée : la tête de singe (logo en gif de 93 pixels par 93 pixels) nous accueille et est insérée dans une cellule de tableau, en haut à gauche de l écran. Entrée par le vivant. 4- TEXTE COURANT : informatif, implicatif, poétique, expressif 5- SONS intégrés ou en option : musique, parole, bruits Aucun texte courant sur cette page d entrée. Le son n apparaît qu après cette première page, dans la version flash ; son en option : bruit tribal au début qui se module et évolue selon les points d entrée. Des bruits accompagnent le choix des menus et sous-menus. 6- PALETTE DE COULEURS Le rouge (#CC0000) pour les figures et le jaune vert (#CCCC66) pour le fond dominant. 1 http://www.monkeymedia.com 2 Le chapitre sur la structure de la page web et son format, dans l ouvrage de C. Barroca, Graphisme et ergonomie des sites web, explique bien la différence entre taille d affichage de la page conçue au départ (par exemple 800x 600 pixels) et la résolution d écrans qui peut varier selon le paramétrage de l écran choisi par l internaute (p.121 à 130).
La fiche B : nature de l interactivité Cette fiche propose une manière de décrire les composants associés à l interactivité. Nous rappelons les supports multimédias et les outils logiciels mis au service de stratégies de communication afin, par exemple, d illustrer un phénomène, d aider à la recherche d informations, d'attirer l attention sur un élément vivant (animation de la page d entrée, fonction d accroche souvent exploitée au début, puis abandonnée pour les pages de contenu). L'exemple qui suit illustre la fiche B, inspirée par la page d entrée en html du site Monkeymédia. Fiche B Nature de l interactivité NATURE DE L INTERACTIVITÉ INTERACTIVITÉ FONCTIONNELLE Menu (ou barre) principal et sous menus avec liens d entrée. Menu (barre) secondaire : icônes, boutons pour retourner à l accueil, plan/carte du site, mission, aide avec charte graphique/de navigation, d éthique, les droits d auteurs Liens 3 par des flèches, du texte, des images, un programme pour avancer dans le site INTERACTIVITÉ RELATIONNELLE Outils de communication : courriel, forum, chat, babillard pour échanger. Les premiers outils d interactivité fonctionnelle sont situés dans la partie inférieure de la toute première page, dans une barre rouge de navigation. Cette barre de navigation est insérée dans une cellule de 109 pixels par 29 pixels et se termine à droite par un verbe prédicat (enter) sur fond rouge, nous invitant à choisir la version en FLASH Le voici : De plus, dans cette barre de navigation rouge, des hyperliens textuels donnent accès à la charte de communication de l entreprise (all rights reserved) et aux emplois disponibles (career opportunities). On nous donne aussi accès au téléchargement du logiciel Flash si besoin. Dans cette barre inférieure, on peut aussi contacter par courriel le responsable du site (contact us) en cliquant sur ce mot-clé. Utilitaires: moteur de recherche, tableau blanc, boîte à outils Site conçu en fonction d un écran de 15 pouces et d une résolution de 800 x 600 pixels. Croquis de l interface graphique de la page Dans cette fiche B, le menu principal du site MONKEYMEDIA n est pas encore affiché sur cette première page; on nous annonce le 10 e anniversaire de l entreprise avant d offrir la version interactive en Flash. Nous avons retenu deux catégories 4 d outils d interactivité, selon qu ils relèvent d applications qui favorisent la communication homme-machine (interaction fonctionnelle) ou qu ils favorisent la communication entre les personnes (interaction relationnelle). Nous les développerons davantage dans la dernière section de ce chapitre en ajoutant une nouvelle avenue, celle de l interactivité ayant un impact sur le comportement responsable d'individus ou d organismes. Enfin, une partie facultative à la fiche B peut être exploitée pour venir en aide à l équipe qui veut se représenter l interface graphique à venir. Il s agit d un espace réservé pour le croquis de la page écran ainsi découpée. 3 Plusieurs types de liens sont possibles, tels imbriqués, structurels, associatifs ou linéaires, et sont expliqués dans l ouvrage pratique de Christina Barroca à la page 100. 4 Nous empruntons cette distinction (et non le concept comme tel )- interactivité fonctionnelle et interactivité relationnelle- au professeur Marcel Lebrun, à partir de son ouvrage : Des technologies pour enseigner et apprendre, Éd.De Boeck, Bruxelles, 1999
Synthèse des fiches A et B : le storyboard Nom du site web : MONKEYmedia Titre de la page : Austin: Monkeymedia User Interface Design Lien page avant No : 0 Saisie d écran No 1 : Statut de la page : entrée Lien page après : No :2 : entrée, version Flash Texte, image, couleur et symbole Titre : MONKEYmedia Sous-titre : 10 th anniversary/year of the Monkeymedia Image/symbole : tête du singe, logo de l entreprise en rouge sur fond vert. Mise en page écran L organisation des éléments en deux zones : 1) partie supérieure: 2/3 de l écran 2) partie inférieure:.barre de navigation Cette organisation favorise une lecture découpée en deux temps: d abord la partie dominante organisée autour du cercle, puis la partie linéaire, en bas de page, en rouge. Interactivité Le participant peut cliquer sur la barre de navigation en bas de page qui offre des hyperliens textuels: l accès au responsable du site (contact us) et à la charte de communication (all rights reserved).
Nom du site web : MOMKEYmedia Titre de la page : Austin: Monkeymedia User Interface Design Lien page avant No : 1 Saisie d écran No 2 : page d entrée en Flash Aucune linéarité Texte, image, couleur et symbole : Titre : MONKEYmedia en rouge Sous-titre explicatif : interface design, information architecture, interaction technology. Menu principal autour d un cercle imaginaire Profile, Services, Mentor, Technology, Portfolio. Images : - identité du site: tête du singe à gauche (logo); -5 icônes ou pictogrammes complémentaires aux points d entrée ; - 3 symboles d aide à la navigation en haut à droite de l écran : accueil, courriel, son Mise en page écran L organisation des éléments en trois zones : 1) partie supérieure : logo+titre+soustitre 2) partie centrale: menu principal 3) partie inférieure: all rights reserved Cette organisation favorise une lecture qui converge vers le centre. Interactivité: Le participant peut cliquer sur la barre de navigation en bas de page, offre des hyperliens textuels: l accès aux auteurs du site (contact us) et à la charte de communication de l entreprise (all rights reserved) y sont offerts..