Public : - Etudiants externes & internes- Bacheliers- Enseignants

Contenu :

c) présentation des différents acteurs (enseignants, administratifs,…)d) calendriers des examense) Actualité : - séminaires

- publications - colloques- …

f) Liens utiles : - Bibliothèques- …

a) les départements

1er 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 l’ensemble de la charte graphique du site, de façon contextuelle.

A savoir sur :- le logo ITIC situé en haut d’interface- la couleur des liens hypertextes- la couleur de titre ou couleur de fond des titres- l’aspect des icônes - …

1er proposition – février 2011

Contenu & ergonomie d’interface :

1er proposition – février 2011

Quelles que soient les informations contenues dans cette partie (1), l’objectif est de laisser le plus de place au contenu lui-même (2). D’éviter de se retrouver avec des éléments qui n’ont aucun niveau d’information (telles que des images que l’on retrouve souvent dans des « bandeaux » pour habiller ces derniers).

Cette partie comportera l’ensemble des modalités de navigation. Toujours dans un souci de gain d’espace, de compréhension, de hiérarchisation de l’information et d’un accès rapide à l’information, 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 d’interface présentés dans ce document, font office de croquis. Ces éléments

ne sont en rien désignés.

(3)

1er proposition – février 2011

Propositions: la première interface du site (ou page d’accueil) sera constituée d’un menu (permettant d’accéder à diverses informations- en cours de définition) (1), ainsi qu’une vue panoptique des différents parcours proposés par l’institut (schéma 2) . Ce schéma sera doté d’interactivité et permettra, entre autres, des accès à l’information (dont certains sont redondants avec le menu du haut. Cette redondance n’est en rien une répétition maladroite, car les modalités d’interaction entre le menu et le schéma sont différentes – comme cela sera détaillé plus loin). L’utilisation de la schématique doit permettre à l’utilisateur une compréhension plus rapide, plus explicite, globale et hiérarchique d’une information (contrairement au texte qui nécessite un temps de lecture supérieur).

Autre proposition, à droite de l’interface, par défaut : la liste des différentes actualités de l’institut (liste qui peut comporter des liens permettant d’accéder à de plus amples détails selon les besoins).

Contenu & ergonomie d’interface : (« 1ère interface ou « page d’accueil »)

Rappel : les éléments d’interface 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 n’est en rien adapté à une plateforme web .

(1)

(2)

(3)

1er 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 d’informations, tout en restant au sein de la même interface (ce qui ne serait pas possible dans le cas d’une interface construite en HTML (voir plus loin).

Plusieurs problématiques ont été soulevées lors de la précédente réunion :•L’accessibilité 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 d’une animation « Flash », afin que ces informations puissent être correctement explorées, par des outils de décryptage d’interface spécialisés pour les non-voyants.

Ergonomie d’interface - Technologie :

(« 1ère interface ou « page d’accueil »)

Voir : http://www.adobe.com/accessibility/products/flash/tutorial/ http://help.adobe.com/fr_FR/flash/cs/using/WSd60f23110762d6b883b18f10cb1fe1af6-7c47a.html

Dans tous les cas, l’ensemble du site devra être testé par différents outils de ce type (tel que « JAWS », …)

•Lecture sur iPhone et iPad : la politique d’Apple n’accepte toujours pas, à l’heure 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 qu’ils 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 « d’accueil » en « dur » (Html, image, …) et de détecter automatiquement (à l’aide de codes), si l’utilisateur visite le site par le biais d’un iPhone ou d’un iPad, et de le rediriger automatiquement et de manière invisible sur l’interface adéquate. Maintenant, il est évident que l’on 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 s’allonger et/ou l’information devra être scindée en plusieurs parties.

1er proposition – février 2011

Proposition : Mis à part un simple clic sur une icône (exemple) pour explorer le contenu d’une licence, la technologie Flash permet de mettre en place des scénarios interactifs : animatiques, qui offriraient à l’utilisateur l’accè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 à l’utilisateur un accès plus direct à une information mieux ciblée, lui évitant un temps de recherche inutile.

Ergonomie d’interface – Niveaux d’informations - Technologie :

(exemple)Il est important de garder, ce type de modalité d’interaction tout au long de l’exploration de l’interface : le roll-over pour faire apparaitre des informations (qui fait donc office d’exploration)•le clic, qui est un acte et une décision de l’utilisateur, pour accéder à un contenu.

Calendrier des examens

Annonces

Offres de stages…

1er proposition – février 2011

Concernant les informations, à droite de l’interface (1) (qui par défaut affiche les « actualités »), nous pouvons imaginer plusieurs items, sous forme d’onglets cliquables, qui changeraient l’affichage des informations dans cet espace (1) et permettraient à l’utilisateur 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 l’utilisateur ne change pas d’item (sur les onglets), cette mise en exergue reste présente afin de permettre à l’utilisateur de choisir le parcours et plus précisément la Formation (exemple : L2 – semestre 3) à laquelle il veut accéder (au clic).

Ergonomie d’interface – Niveaux d’informations :

(exemple)

(1)

1er proposition – février 2011

La proposition est de mettre sur une même page l’ensemble des informations qui concernent un parcours. Une nomenclature commune aux différents parcours devra être établie. Par exemple :1.Descriptifs et objectifs du parcours2.Contacts des responsables et du personnel administratif rattachés au parcours3.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 l’interface.

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 d’interactions (voir fiche suivante notamment). Lorsque l’utilisateur choisira la Licence d’un parcours , il tombera nez à nez avec le contenu concerné au sein de la page (au moyen d’ancre invisible). Libre à lui d’explorer la suite du parcours en faisant défiler cette page ou au moyen du menu (voir fiche suivante), sans l’obliger à revenir sur la page d’accueil pour faire un autre choix.

A noter aussi, qu’en terme de maintenance, il est plus rapide de modifier une unique et seule page qui regrouperait l’ensemble des informations d’un parcours.

Exemple concernant le parcours « Info Doc »

1er proposition – février 2011

Menu contextuel – Ergonomie & Modalité d’interaction

Comme souligné à plusieurs reprises, l’ensemble de l’interface voix/son/code couleurs s’adaptent aux couleurs du département.Comme dans la page d’accueil, il y a la possibilité, par le biais d’un menu qui se déploie et se contracte, d’accé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 l’utilisateur ne perde pas ses repères.

Quelques possibilités pour explorer l’ensemble du contenu (et autres) :-La possibilité d’accé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 l’endroit où l’on se situe dans la page, le menu doit constamment rester présent à l’écran (donc fixe).-La possibilité d’accéder directement à un autre parcours (2).-Par le biais d’un item du menu, la possibilité d’accé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)