Rapport de conception Site vitrine du département MMI

Transcription

1 Rapport de conception Site vitrine du département MMI Alphakeys Nathan Berthelemy ; Maxime Thill ; Léo Biston ; Hugo Duverne 1

2 L'AGENCE : Les membres: Chef d'agence : Nathan Berthelemy Développeur : Maxime Thill Graphiste : Léo Biston Rédacteur : Hugo Duverne Pour le logo et le nom de l'agence, c'est notre graphiste qui a eu l'idée à partir de ce qu'il imaginait déjà au début de la formation de l'agence. Le mot "clé" a été mis en anglais pour une meilleure sonorité ainsi qu'une image de modernité et d'accord avec la langue la plus utilisée sur internet. Le canard est le symbole du département MMI, et apporte une image décontractée et jeune, elle aussi en accord avec le web. 2

3 Rappel des objectifs : La refonte: La refonte comme il a été précisé lors de l'entretien ne concerne pas l'aspect graphique ou le design du site, mais bien l'architecture de l'information, l'organisation des menus etc L'ajout de contenu et les modifications pertinents (comme des photos du studio, ou une présentation du DUT et département) a été encouragé. Certaines fonctionnalités utilisées pour le site actuel, sont encore hors de notre portée mais une majeure partie de celles-ci seront conservées après la refonte dans un souci de modernité et de confort de navigation. Le site doit refléter la qualité des enseignements prodigués par le département. Les publics cibles : Le site servant de vitrine au DUT et au département MMI, s'adresse à des personnes externes plus qu'internes. C'est pourquoi il faut adapter le site aux différents publics qui peuvent le visiter. Il y a trois publics principaux sur lesquels la refonte va se baser. Les futurs étudiants, les parents, et les entreprises intéressées par le département MMI. Malgré la catégorisation des informations, elles doivent continuer à être visibles par tous (par exemple le plan d'accès peut être rangé dans une catégorie mais des liens doivent y mener sur les autres pages du site) 3

4 Analyse sectorielle : Les Menus : La structure des menus déroulant, se basant sur un code couleur et des pictogrammes est très moderne et est un des points fort du site. Le menu constitue un répertoire du contenu du site et il est possible de savoir le contenu de chaque page juste en navigant dans les menus. Cependant ils comportent actuellement deux inconvénients : Le nombre de pages trop élevé et certaines catégories inadéquates. Il y a beaucoup de pages dans les sous menus qui ne sont pas hiérarchisées qui gagneraient à être regroupées. Les pages sur les licences professionnelles par exemple. Le changement de menu sera inspiré par le site du "strate college" qui propose trois catégories qui correspondent exactement à nos trois publics cibles. L'arborescence en page ***** détaille la refonte des sections de menu. Les catégories "anciens étudiants " et le lien vers l'intranet ne présente pas beaucoup d'intérêt. Une section dédiée aux anciens étudiants est à double tranchant et est à proscrire tant qu'il n'y a pas de contenu conséquent et pertinent à montrer (comme des entreprises montée par des anciens élèves ou des chiffres montrant les chances de trouver un emploi après le cursus). 4

5 La structure des pages : Le site utilise bien son en tête car elle ne bouge pas et laisse au visiteur voir le début du corps de la page. Cela permet au visiteur d'avoir des repères le long de la navigation et d'attirer son regard vers le contenu de la page à laquelle il vient d'accéder. L'utilisation des rectangle contenant des informations clés peut être optimisée (effets non constants lorsque la souris passe dessus ou disparition du texte) L'utilisation de tableaux sera également une solution pour rendre plus lisibles les pages contenant beaucoup de texte. Une présentation par items comme on peut le voir sur la page de présentation du DUT sera exploitée à plus grande échelle afin de mieux synthétiser les informations. Le bas de page, n'est pas visible, caché sous la section "ce qu'ils disent de nous". Cette section pourrait être intéressantes mais nous pensons qu'elle aurait plus sa place sur la page "entreprises déjà partenaires" et non à chaque page du site car elle cache les informations de contact et les liens vers les réseaux sociaux. Les différents onglets de la page d'actualités sont à homogénéiser. 5

6 Public cible : Synthèse des personae : Comme le détaille l'appel d'offre, le site est destiné à trois publics différents. Les futurs étudiants : L'étude du premier personae montre que les étudiants ont accès à toutes les informations qu'ils recherchent concernant l'enseignement et la vie étudiante mais qu'elles ne sont pas assez regroupées. Des formulaires de contact spécialement conçus pour les étudiants cherchant des informations directement auprès des enseignants seraient également une bonne idée. Les parents : L'étude du second personae montre que les parents trouvent les informations qui les intéressent plus facilement et s'appuierai plus sur ce site pour les informations concernant les débouchés et le site de l'iut de Troyes pour les informations de déplacement ou de portes ouvertes par exemple. Les entreprises : L'étude du troisième personae montre que les chefs d'entreprise désireux d'investir leur taxe d'apprentissage dans le département MMI retrouvent facilement les informations qui leur sont dédiés. Le département est actif grâce à ses actualités, et les productions audio-visuelles sont très attirantes. Les seuls bémols sont la section "ce qu'ils disent de nous" qui n'est pas très subtile. 6

7 Planning du projet : Étapes du projet Recherche de membres, nom et logo d'agence, attribution des rôles recherche pour le rapport de conception et redaction retour sur le rapport de conception réalisation de la maquette graphique pour le site et début de l'intégration Développement du site preparation de la soutenance Soutenance du projet 09-nov Du 10 novembre au 14 décembre 07-janv du 7 du 11 janvier du 11 au 21 janvier 21 et 22 janvier 7

8 Analyses sectorielles en tableau : Site analysé : Site vitrine du département MMI de l'iut de Troyes La Structure Les + Les - Bonne exploitation du fold, les entêtes sont accrocheurs Un bon système de menus déroulants qui permet de bien répertorier le contenu Le tableau sur la page "metiers après le DUT" est une bonne idée de mise en forme de l'information Certaines pages sont à regrouper en une seule (les licence pro), il y a trop de pages. Un lien vers l'intranet peu utile car il s'agit d'un site vitrine et non interne. Le système d'actualité doit être remis en forme ou finalisé car il comporte des éléments non finis Le Graphisme L'Ergonomie Un code couleur très bon très efficace Des animations très modernes qui sont en adéquations et qui flattent l'image de la formation. Un système d'actualités sur la page d'accueil très intéressant pour mettre en avant le côté événementiel La structure de menu est bien Le lien vers la page de contact doit être à part, et la page en elle-même remaniée. La favicon, même si elle reprend le code couleur, contient des lettres qui semblent aléatoires (et parfois elle disparait) Sur-utlisation du gras sur le texte parfois Mais il est à revoir sur la quantité d'info par page Mais il y a trop de liens dedans 8 Le footer est beau Mais il est trop bas et trop peu visible

9 Site analysé : MMI Montbéliard Les + Les - La Structure Menu interactif interréssant Page un peu trop grande Première page avec vidéo attrayante espace vide trop fréquent bonne répartition des différentes pages animation bien utiliser Le Graphisme page en plusieur partie disposé intelligemment pour retrouver son chemin Un code couleur très bon très efficace La seconde couleur (le rose) aggresse l'utilisteur Deux couleurs principale suffisante trop d'espace vide site très épuré L'Ergonomie Menu interactif utiliser intelligemment Prise en main compliqué Le footer est bea Footer trop bas car page trop grande Le site est responsive. 9

10 Site analysé : Strate college Les + Les - La Structure Menu afficher clairement première page comlptète pour un utilisateur lambda onglet explicitement présenter avec une rebrique nouveux étudiatns intéressantes Beaucoup trop de texte sur la premiére page on perd facilement ses repères lien trop proche pas de menu déroulement perte de visibilité Le Graphisme L'Ergonomie système de recherche intéressant (quoi, comment, sui) Simple avec peu de couleur Couleur respecter tout au long du site Site responsive Peu de couleur un graphisme peu travailler sur la page d'accueil faciliter pour naviguer entere les différents liens 10

11 Site analysé : MMi Bordeaux Les + Les - La Structure Structure en deux parties: une parte avec le menu sur la gauche et une partie image (faisant aussi partie du menu) Structuration interessante avec un menu en colone Aucune page pour les futurs étudiants Focaliser sur les matières étudiées aucun lien vers les partenaires sur la premières page Le Graphisme Utilisation d'image pour définir les matières Manque de couleur pour le menu afin d'accompagner le reste de la page L'Ergonomie menu très épurées Site responsive prise en main facile Difficulté a comprndre l'utilisation des images aucun lien vers les partenariats navigation facile et instinctive 11

12 12 Personae :