Public : - Etudiants externes & internes - Bacheliers - Enseignants Contenu : c) présentation des différents acteurs (enseignants, administratifs,…) d) calendriers des examens e) Actualité : - séminaires - publications - colloques - … f) Liens utiles : - Bibliothèques - … a) les départements 1 er proposition – février 2011 Présentation générale -Présentation du parcours, objectifs,… - Présentation par année (L1, L2, …) et semestres b) les formations

Aspect général (Charte graphique) : Chaque département possède son propre code couleur Ce code couleur se répercutera sur lensemble de la charte graphique du site, de façon contextuelle. A savoir sur : - le logo ITIC situé en haut dinterface - la couleur des liens hypertextes - la couleur de titre ou couleur de fond des titres - laspect des icônes - … 1 er proposition – février 2011

Contenu & ergonomie dinterface : 1 er proposition – février 2011 Quelles que soient les informations contenues dans cette partie (1), lobjectif est de laisser le plus de place au contenu lui-même (2). Déviter de se retrouver avec des éléments qui nont aucun niveau dinformation (telles que des images que lon retrouve souvent dans des « bandeaux » pour habiller ces derniers). Cette partie comportera lensemble des modalités de navigation. Toujours dans un souci de gain despace, de compréhension, de hiérarchisation de linformation et dun accès rapide à linformation, ce menu pourra se déployer et se rétracter (3), laissant apparaître différents accès qui sont rattachés à des items généraux. (1) (2) (« Partie haute ») A noter: les éléments dinterface présentés dans ce document, font office de croquis. Ces éléments ne sont en rien désignés. (3)

1 er proposition – février 2011 Propositions: la première interface du site (ou page daccueil) sera constituée dun menu (permettant daccéder à diverses informations- en cours de définition) (1), ainsi quune vue panoptique des différents parcours proposés par linstitut (schéma 2). Ce schéma sera doté dinteractivité et permettra, entre autres, des accès à linformation (dont certains sont redondants avec le menu du haut. Cette redondance nest en rien une répétition maladroite, car les modalités dinteraction entre le menu et le schéma sont différentes – comme cela sera détaillé plus loin). Lutilisation de la schématique doit permettre à lutilisateur une compréhension plus rapide, plus explicite, globale et hiérarchique dune information (contrairement au texte qui nécessite un temps de lecture supérieur). Autre proposition, à droite de linterface, par défaut : la liste des différentes actualités de linstitut (liste qui peut comporter des liens permettant daccéder à de plus amples détails selon les besoins). Contenu & ergonomie dinterface : (« 1 ère interface ou « page daccueil ») Rappel : les éléments dinterface présentés dans ce document, font office de croquis. Ces éléments ne sont en rien désignés. Plus particulièrement dans le schéma ici présent qui nest en rien adapté à une plateforme web. (1) (2) (3)

1 er proposition – février 2011 Propositions : Technologie Flash : La technologie Flash, dans le cas ici présent, permettrait la juxtaposition rapide et efficace de plusieurs niveaux dinformations, tout en restant au sein de la même interface (ce qui ne serait pas possible dans le cas dune interface construite en HTML (voir plus loin). Plusieurs problématiques ont été soulevées lors de la précédente réunion : Laccessibilité de ce contenu auprès des personnes non-voyantes : La technologie Flash, depuis sa version CS4 a pris des mesures pour permettre de renseigner, de façon hiérarchique, les différents contenus dune animation « Flash », afin que ces informations puissent être correctement explorées, par des outils de décryptage dinterface spécialisés pour les non-voyants. Ergonomie dinterface - Technologie : (« 1 ère interface ou « page daccueil ») Voir : Dans tous les cas, lensemble du site devra être testé par différents outils de ce type (tel que « JAWS », …) Lecture sur iPhone et iPad : la politique dApple naccepte toujours pas, à lheure actuelle, que les média de type Flash soient lus sur ces types appareils. Etant donné que la technologie Flash est incontournable sur le web et que bon nombre de sites fonctionnent avec cette dernière, on commence à voir apparaitre des applications embarquées sur ces outils mobiles afin quils puissent accéder à ces types de contenus. En tout cas il est certain que les choses vont évoluer dans ce sens, vue la demande croissante des usagers et des solutions qui sont mises en place. Nous concernant, en attendant une telle évolution, il est possible de développer la page « daccueil » en « dur » (Html, image, …) et de détecter automatiquement (à laide de codes), si lutilisateur visite le site par le biais dun iPhone ou dun iPad, et de le rediriger automatiquement et de manière invisible sur linterface adéquate. Maintenant, il est évident que lon ne peut pas arriver au même résultat ergonomique quand on développe « en dur », par rapport au développement en Flash. La page devra considérablement sallonger et/ou linformation devra être scindée en plusieurs parties.

1 er proposition – février 2011 Proposition : Mis à part un simple clic sur une icône (exemple) pour explorer le contenu dune licence, la technologie Flash permet de mettre en place des scénarios interactifs : animatiques, qui offriraient à lutilisateur laccès à des contenus et des informations parallèles. Ces informations apparaitraient rapidement, au roll over et disparaitraient une fois que la souris sortirait de la zone explorer. Le clic sur ces dernières offrirait à lutilisateur un accès plus direct à une information mieux ciblée, lui évitant un temps de recherche inutile. Ergonomie dinterface – Niveaux dinformations - Technologie : (exemple) Il est important de garder, ce type de modalité dinteraction tout au long de lexploration de linterface : le roll-over pour faire apparaitre des informations (qui fait donc office dexploration) le clic, qui est un acte et une décision de lutilisateur, pour accéder à un contenu. Calendrier des examens Annonces Offres de stages …

1 er proposition – février 2011 Concernant les informations, à droite de linterface (1) (qui par défaut affiche les « actualités »), nous pouvons imaginer plusieurs items, sous forme donglets cliquables, qui changeraient laffichage des informations dans cet espace (1) et permettraient à lutilisateur de visualiser rapidement les Formations qui traitent des sujets abordés. Du style : Mots clés Métiers … Dans le roll-over sur ces informations, le schéma mettrait alors en exergue rapidement les Formations qui abordent ces sujets. Tant que lutilisateur ne change pas ditem (sur les onglets), cette mise en exergue reste présente afin de permettre à lutilisateur de choisir le parcours et plus précisément la Formation (exemple : L2 – semestre 3) à laquelle il veut accéder (au clic). Ergonomie dinterface – Niveaux dinformations : (exemple) (1)

1 er proposition – février 2011 La proposition est de mettre sur une même page lensemble des informations qui concernent un parcours. Une nomenclature commune aux différents parcours devra être établie. Par exemple : 1.Descriptifs et objectifs du parcours 2.Contacts des responsables et du personnel administratif rattachés au parcours 3.Contenu de la licence 1 (semestre 1 et semestre 2) 4.Contenu de la licence 2 (semestre 2 et semestre 3) 5.Contenu de la licence 3 (semestre 4 et semestre 5) 6.Master La mise en page de ces informations devra être claire. Chaque partie devra être visuellement identifiable : exemple : L1, L2, … (voir ci-contre) qui sont encadrés dans un rectangle (aux couleurs du département) dont la largeur prend toute la longueur de linterface. Il est communément établi que la lecture sur écran est moins aisée que celle sur papier. Ainsi que le fait que de longues pages avec beaucoup de texte est « indigeste ». Le parti-pris, ici proposé, réside dans les modalités dinteractions (voir fiche suivante notamment). Lorsque lutilisateur choisira la Licence dun parcours, il tombera nez à nez avec le contenu concerné au sein de la page (au moyen dancre invisible). Libre à lui dexplorer la suite du parcours en faisant défiler cette page ou au moyen du menu (voir fiche suivante), sans lobliger à revenir sur la page daccueil pour faire un autre choix. A noter aussi, quen terme de maintenance, il est plus rapide de modifier une unique et seule page qui regrouperait lensemble des informations dun parcours. Exemple concernant le parcours « Info Doc »

1 er proposition – février 2011 Menu contextuel – Ergonomie & Modalité dinteraction Comme souligné à plusieurs reprises, lensemble de linterface voix/son/code couleurs sadaptent aux couleurs du département. Comme dans la page daccueil, il y a la possibilité, par le biais dun menu qui se déploie et se contracte, daccéder à diverses informations (liens ou autres). Même si ces accès se voient octroyer la couleur du département, ils devront être situés au même endroit et garder leur même aspect afin que lutilisateur ne perde pas ses repères. Quelques possibilités pour explorer lensemble du contenu (et autres) : -La possibilité daccéder directement à une partie du contenu situé sous ce menu (voir fiche précédente), sans être obligé de faire défiler la page elle-même (1). A noter : quel que soit lendroit où lon se situe dans la page, le menu doit constamment rester présent à lécran (donc fixe). -La possibilité daccéder directement à un autre parcours (2). -Par le biais dun item du menu, la possibilité daccéder aux objectifs du parcours et aux contacts des responsables et du personnel administratif,… -la possibilité de revenir à tout moment à la page d »accueil » (non stipulé ici dans cette ébauche). -… (1) (2)