L3MAN CHARTE GRAPHIQUE ET ERGONOMIQUE
Sarah ALFATH Mélanie GARRIC
CHU de ROUEN
Jessica GOUILLON Kim NGUYEN 2010 L3MAN
SOMMAIRE DEFINITION GENERALE DU PROJET ..................................................................3 AVANT / APRES ......................................................................................... 4 AVANT REFONTE ...................................................................................4 APRES REFONTE ....................................................................................8 ARBORESCENCES ...................................................................................... 13 DESCRIPTIF ET EXPLICATIF DES CHANGEMENTS ET AMELIORATIONS APPORTES ......... 16 SPECIFICATION TECHNIQUE ......................................................................... 16 LIGNE GRAPHIQUE DE LA PAGE D’ACCUEIL ....................................................... 17 LIGNE GRAPHIQUE DES PAGES INTERIEURES : ................................................... 19 PRINCIPES ERGONOMIQUE DE NAVIGATION ....................................................... 21 DESCRIPTION ET JUSTIFICATION DES PRINCIPES ERGONOMIQUES APPLIQUES ........... 21 TYPOGRAPHIE.......................................................................................... 30 COULEURS .............................................................................................. 34 PAGE D’ACCUEIL ................................................................................. 34 ESPACE JUNIOR ................................................................................... 34 PALETTES DE COULEUR ......................................................................... 35 ELEMENTS GRAPHIQUES ............................................................................. 36 MENU PRINCIPAL ................................................................................. 36 CONTENU .......................................................................................... 37 BOUTONS PRINCIPAUX ........................................................................... 38 MASCOTTE ........................................................................................ 39 ANIMATIONS FLASH .............................................................................. 39 ANALYSE DE LA CONCURRENCE .................................................................... 41
www.hss.edu : Hospital for Special Surgery ............................................ 41
www.chu-nantes.fr : CHU de Nantes .................................................... 42
www.chu-toulouse.fr : CHU de Toulouse ................................................ 43
http://www.ch-meaux.fr/web/guest/home : CHU de MEAUX ....................... 44
http://www.chu-grenoble.fr/ : CHU de Grenoble ..................................... 45
http://gapext.chru-lille.fr/~chrulille/index.shtml : CHU de Lille .................. 46
L’AUDIT GRAPHIQUE ET ERGONOMIQUE .......................................................... 47 L’AUDIT GRAPHIQUE ............................................................................. 47 L’ERGONOMIE ..................................................................................... 50
Sarah ALFATH – Mélanie GARRIC – Jessica GOUILLON – Kim NGUYEN 2
DEFINITION GENERALE DU PROJET Le Centre Hospitalier Universitaire de Rouen dispose d’un site internet où se trouve d’importantes informations, tels que : le plan d'accès aux bâtiments, les démarches administratives en vue d'une consultation ou d'une hospitalisation, les informations médicales utiles, les numéros de téléphones à appeler en cas d'urgence, les formations et l'enseignement... Le site internet est actuellement l’un des plus populaires dans le domaine des hôpitaux. En effet, on le retrouve dans les dix premiers CHU dans les moteurs de recherche tel que Google ou Yahoo. Nous allons travailler sur la refonte du site internet du CHU de Rouen (http://www.chu-rouen.fr/). Actuellement, le site présente plusieurs défauts en ce qui concerne la navigation, le graphisme et l’ergonomie. Dans ce dossier nous allons établir la charte graphique et ergonomique du site internet du CHU de Rouen. Les objectifs de notre refonte sont de simplifier la navigation et de créer un visuel plus en adéquation avec le thème de l’hôpital. Les principaux visiteurs du site du CHU de Rouen sont principalement, des patients, des visiteurs, les professionnels, les chercheurs, puis, les enseignants. Notre nouveau concept sur le site a été de créer un menu spécialement dédier à ces principaux visiteurs afin de leur faciliter la navigation. Nous allons adopter la technologie Flash ou bien du Javascript afin de rendre interactif ce menu. Nous avons rajouté aussi une nouvelle rubrique qui sera le Diagnostic en ligne que nous trouvons très utile pour toute catégorie de personne visitant le site. L’esprit général consiste à créer un visuel plus simple d’utilisation et mieux structuré. Nous voulons à tout prix que l’internaute se sente à l’aise et qu’il puisse trouver l’information le plus facilement possible. Nous avons adopté une démarche graphique sobre, dans les tons bleus avec des lignes fines. L’univers de l’hôpital est plutôt calme et sécurisant. C’est ce que nous essayons de faire ressentir graphiquement sur le site.
Sarah ALFATH – Mélanie GARRIC – Jessica GOUILLON – Kim NGUYEN 3
Avant / Après AVANT REFONTE Copie Ecran 1 : Page d’accueil
- Descriptif de la page d’accueil La page d’accueil du CHU de Rouen représente assez bien les différents catégories en fonction de leur client (patient, professionnel, recherche, hospitalier). Deux rubriques attirent l’attention de l’internaute par un effet de clignotement : les numéros urgents, à gauche, et l’actualité, à droite. Le site met bien en avant les deux rubriques « Nous » et « Vous » afin de bien diriger le client venant sur le site. La navigation paraît simple et la recherche d’information rapide. Un catalogue de langue médicaux et la prise de rendez vous en imagerie sont mise en place dès la page d’accueil et les espaces Junior et Ados sont bien distinctifs.
Sarah ALFATH – Mélanie GARRIC – Jessica GOUILLON – Kim NGUYEN 4
Graphiquement, on aperçoit trois couleurs principales : le bleu, le orange et blanc. Le site respect la forme de leur logo et tout le design s’inspire de celui-ci. Les inconvénients de cette page sont, tout d’abord, l’emplacement de la page non centré sur la page, puis leur trop plein d’information sur la page d’accueil. Leur menu principal est séparé en six catégories. On ajoute à cela sept autres rubriques. On remarque dans la navigation que deux endroits cliquables, nous amène à la même page. La page ne présente pas de footer, mais un menu se situant en haut de page qui en fait office. Cependant, celui-ci disparait dans les autres pages.
Copie Ecran 2 : 12 Ecoles et instituts
- Descriptif d’une page type : les 12 Ecoles et Instituts On remarque lors de la navigation, que la page qui se trouve entre la page d’accueil et la page d’information cherchée, n’est d’aucune utilité. On y trouve seulement une image (souvent hors d’usage) et le menu de la rubrique. Cela perd Sarah ALFATH – Mélanie GARRIC – Jessica GOUILLON – Kim NGUYEN 5
du temps au client. Sinon, nous arrivons quand même à trouver les informations voulues, et, dans un bloc en haut à droite, le site nous suggère d’autres liens à visiter en rapport avec la page où nous nous trouvons. Nous constatons, en bas à gauche, la présence d’un rectangle orange qui va permettre à l’internaute de naviguer dans la catégorie formation. Un footer apparaît en bas de page ainsi que la barre de recherche. Celle-ci n’attire pas le regard de l’internaute. Il y a la présence d’un fil d’Ariane. Copie Ecran 3 : Page d’accueil de l’espace Junior
- Descriptif de l’espace Junior, l’accueil Destiné aux enfants, cet espace Junior est guidé par une mascotte, un ourson, qui présente une animation sonore de ce qu’il y a inscrit dans la bulle. Pour plus d’interactivité, cette page est réalisée en Flash. Cependant, cette page présente des inconvénients. Il n’y a pas de bouton de retour pour revenir au site du CHU de Rouen, ni de bouton pour couper le son. La page présente trois menus dont le texte paraît trop complexe pour un enfant. Sarah ALFATH – Mélanie GARRIC – Jessica GOUILLON – Kim NGUYEN 6
L’ourson s’adresse à un enfant se prénommant Rémi, cela peut déstabiliser le jeune internaute. L’espace Junior, nous emmène dans un univers totalement différent au niveau graphique et ergonomique. Nous avons la sensation de sortir du site Internet du CHU de Rouen. Copie Ecran 4 : Pages des Urgences de l’espace Junior
- Descriptif de l’espace Junior, une page type Nous nous trouvons dans la catégorie « recevoir des soins rapidement ». Dans chaque catégorie, il y a les mêmes possibilités de rubriques qui sont « ton accueil », « tes soins », « le personnel » et « ta sortie ». Toutes les informations présentées, sont illustrées dans l’encadré rose. Les images permettent aux enfants de pouvoir se repérer pour une éventuelle visite aux urgences. L’inconvénient est que le rectangle présenté sur la page, se rapproche de la forme d’une télévision, et peut laisser présager d’une éventuelle vidéo qui s’animerait, mais en fait ce n’est qu’une image fixe. Il manque de l’interactivité sur cette page. Sarah ALFATH – Mélanie GARRIC – Jessica GOUILLON – Kim NGUYEN 7
APRES REFONTE La page d’accueil
Sarah ALFATH – Mélanie GARRIC – Jessica GOUILLON – Kim NGUYEN 8
Une page type : les 12 Ecoles et Instituts
Sarah ALFATH – Mélanie GARRIC – Jessica GOUILLON – Kim NGUYEN 9
L’espace Junior : la page d’accueil
Sarah ALFATH – Mélanie GARRIC – Jessica GOUILLON – Kim NGUYEN 10
Une page type de l’espace Junior : les Urgences
Sarah ALFATH – Mélanie GARRIC – Jessica GOUILLON – Kim NGUYEN 11
Une page type de l’espace Junior : les Urgences, « Ton arrivée »
Sarah ALFATH – Mélanie GARRIC – Jessica GOUILLON – Kim NGUYEN 12
ARBORESCENCES
Sarah ALFATH – Mélanie GARRIC – Jessica GOUILLON – Kim NGUYEN 13
Arborescence 1 : avant refonte
Sarah ALFATH – Mélanie GARRIC – Jessica GOUILLON – Kim NGUYEN 14
Arborescence 2 : après refonte
Sarah ALFATH – Mélanie GARRIC – Jessica GOUILLON – Kim NGUYEN 15
DESCRIPTIF ET EXPLICATIF DES CHANGEMENTS ET AMELIORATIONS APPORTES L’arborescence actuel du site est beaucoup trop dense, non rangé et pas du tout mise à jour. On retrouve certain liens en double, et d’autres qui ne sont plus utilisés. Le plus important changement a été de regrouper des catégories et d’alléger les menus principaux sur la page d’accueil, afin de permettre une meilleure navigation. Nous avons aussi déplacé des pages dans des catégories que l’on pensait plus intuitives pour l’internaute. Certaines pages qui n’avaient pas été mise à jours depuis deux à trois ans, ont été supprimé. Nous avons changé l’intitulé de certaines catégories afin de les rendre plus compréhensible. Une rubrique a été rajoutée : le Diagnostic en ligne. Nous avons décidé de ne pas dépasser trois niveaux dans l’arborescence. Nous avons mis un code couleur sur l’arborescence par niveau. Le rose : l’accueil Le bleu : les menus principaux Le jaune : les rubriques principales Sans couleur : les sous rubriques
SPECIFICATION TECHNIQUE Nous avons opté pour une résolution de 1000 * 700. Contrairement à la résolution actuelle, le site prendra toute la page nécessaire sans perte d’espace. La nouveauté que nous voulons attribuer au site est l’interactivité. Sur la page d’accueil, le menu principal concernant les clients principaux du CHU sera réalisé en Flash ou Javascript. Sur la page des 12 écoles et instituts, la technologie de Flash sera aussi adoptée. Dans l’espace Junior, des vidéos seront intégrées afin de captiver les enfants au monde hospitalier. Cela requiert aussi à la technologie de Flash. Les pages du site seront codées en HTML/CSS, compatibles aux normes W3C. Le site sera débuggé pour tous les navigateurs (Internet Explorer 7&8, Firefox, Opéra, Safari, Google Chrome) afin d’être bien à la porter de tout le monde. Les images utilisées sont des images libres de droit. Sarah ALFATH – Mélanie GARRIC – Jessica GOUILLON – Kim NGUYEN 16
LIGNE GRAPHIQUE DE LA PAGE D’ACCUEIL Nous avons voulu respecté le thème du milieu hospitalier et sérieux tout en restant dans un environnement agréable, intuitif, moderne et simple. Nous avons adopté des couleurs dans les tons bleus et violacés se référant au domaine de l’hôpital, des dégradés et quelques touches de gris afin de ne pas être étouffé de bleus, des lignes épurées pour rester simple et quelques images pour représenter les différentes catégories. La page se divise en cinq parties.
1
2
3
4
5
Sarah ALFATH – Mélanie GARRIC – Jessica GOUILLON – Kim NGUYEN 17
Partie 1 : On y trouve tout d’abord le logo, le message de bienvenue puis le menu principal de ce site. Ce menu est destiné aux principaux clients du CHU de Rouen, il est séparé en trois catégories illustrées chacune par une image. Cette partie est présente sur toutes les pages du site Internet. Partie 2 : Au centre nous pouvons remarquer la zone d’information principale, c’est dans cette zone que nous pourrons lire les actualités. Partie 3 : A droite, nous trouvons les numéros urgents, « tout savoir sur le CHU » où nous trouverons les informations essentielles concernant l’hôpital et un nouvel outil permettant le diagnostique en ligne. A gauche du site, nous trouvons la barre de recherche. Toute cette partie 3 est présente dans toutes les pages du site Internet. Partie 4 : Cette partie est destinée essentiellement aux enfants et aux adolescents. Ils y trouveront leur espace instinctif. Partie 5 : C’est le footer, on y trouve les Mentions légales, le Plan du site, l’Annuaire, les Fournisseurs, le Plan et les Contacts.
Sarah ALFATH – Mélanie GARRIC – Jessica GOUILLON – Kim NGUYEN 18
LIGNE GRAPHIQUE DES PAGES INTERIEURES : Les différentes pages du site Internet adoptent le même modèle que la page d’accueil. La partie centrale et la partie de droite sont les seules parties changées laissant place aux nouvelles informations cherchées.
1
3
4 2
5
Sarah ALFATH – Mélanie GARRIC – Jessica GOUILLON – Kim NGUYEN 19
Partie 1 : Le menu de navigation a permit d’accéder dans « Formation & enseignement », puis d’arriver à une sous rubrique qui donne enfin à la destination voulue, « 12 Ecoles et Instituts ». Partie 2 : Dans cette partie, nous trouvons le titre de la rubrique choisie, le contenu et un visuel pour illustrer le sujet. Nous remarquons la présence du fil d’Ariane. Nous avons gardé le même code couleur que la page d’accueil, à savoir le gris pour cette zone. Partie 4 : On trouve les rubriques et sous rubriques de la catégorie choisie. Ici est un cas particulier, c’est le menu des « 12 Ecoles et Instituts » où nous trouvons la liste des 12 écoles avec leur couleur respective. Partie 5 : C’est le footer, on y trouve les Mentions légales, le Plan du site, l’Annuaire, les Fournisseurs, le Plan et les Contacts.
Sarah ALFATH – Mélanie GARRIC – Jessica GOUILLON – Kim NGUYEN 20
PRINCIPES ERGONOMIQUE DE NAVIGATION DESCRIPTION ET JUSTIFICATION DES PRINCIPES ERGONOMIQUES APPLIQUES - En général -
Le logo se situe en haut à gauche du site. Présent sur toutes les pages, il permet de revenir à la page d’accueil.
Le fil d’Ariane est présent dès lorsqu’on quitte la page d’accueil. Chaque étape parcourue au fil de la navigation de l’internaute, est présenté par l’intermédiaire d’un lien afin de bien le positionner au sein du site et il a la possibilité de revenir sur ses pas depuis la page d’accueil.
Les différentes rubriques de la page d’accueil sont présentées en boutons en formes rectangulaires. Tout l’espace est cliquable pour une simplicité de navigation.
Sarah ALFATH – Mélanie GARRIC – Jessica GOUILLON – Kim NGUYEN 21
- Sur la Home -
Voici le menu de navigation.
Au survol de la souris, nous pouvons voir avec plus de précision les catégories Patient & vsiteur ou Professionnels & recherche ou encore Formation et enseignement. Ici nous mettons le curseur sur la première catégorie, les deux autres se retrouvent alors glissés vers le bas et sont bleutés. La catégorie choisie est alors mise en valeur en dévoilant l’image entière, et, de plus, sur la partie de droite, on retrouve le titre écrit en gros qui prend la place du message de bienvenue, et une image en arrière plan illustre cette rubrique. Cela permet de bien informer l’interaute où il se trouve.
Sarah ALFATH – Mélanie GARRIC – Jessica GOUILLON – Kim NGUYEN 22
Lorsque l’internaute a choisit sa rubrique, il clique alors sur celle-ci. Le titre change alors de couleur (bleu) et le fond du titre change aussi de couleur qui est celle du fond du déroulé du premier niveau (blanc cassé). Le titre écrit en gros sur la droite disparait alors pour laisser place au déroulé du menu de second niveau.
L’internaute clique alors sur la rubrique voulue, celui-ci change alors de couleur, le même bleue que le titre du menu. On voit alors apparaître le déroulé du second niveau.
On arrive enfin au troisème et dernier niveau. Les trois niveaux sont séparés et présentent la même couleur de fond afin de bien faire comprendre à l’internaute que ces rubriques appartiennent au même menu. Seule la police des rubriques changent. Le premier niveau le texte est gras, au seconde niveau, le texte est
Sarah ALFATH – Mélanie GARRIC – Jessica GOUILLON – Kim NGUYEN 23
simple, et dans le dernier niveaux, la police a diminué de 1 pixel. Cela permet la hiéarchisation du texte, du général au particulier. Pour une meilleure lisibilité des listes, des puces sont utilisées. Nous pouvons changer de catégorie facilement en cliquand dessus. Pour revenir au menu de départ, il suffit de placer le curseur hors de ce menu. Cela facilite la navigation en restant que dans cette partie de menu, cela évitera des va et vient d’une page intérieur à la page d’accueil.
- Dans les pages intérieurs -
Nous voyons apparaitre une maquette de l’hôpital avec l’emplacement de ces 12 écoles sous forme de petite icône de couleur permettant d’accéder aux informations de cette école. Nous respectons un code couleur pour que l’internaute puisse mieux se repérer. Pour cette partie, nous souhaitons utiliser une animation flash pour crée une interactivité.
Sarah ALFATH – Mélanie GARRIC – Jessica GOUILLON – Kim NGUYEN 24
Lorsque que nous passons notre souris sur une puce de couleur, nous apercevons qu’un cercle de même couleur nous délimite le bâtiment où à lieu la formation. De plus, nous apercevons dans le menu de gauche, un fond associé au même code couleur de la formation, apparaît derrière le nom de la formation.
Sarah ALFATH – Mélanie GARRIC – Jessica GOUILLON – Kim NGUYEN 25
Ici, nous avons sélectionné le bâtiment rouge correspondant à « Institut de formation ambulancier ». Le menu se trouvant à droite, laisse place aux informations de la rubrique concernée. Le fond devient alors un dégradé de la couleur de la formation vers le blanc. Le contour e la rubrique est aussi de la couleur de la formation. En haut, on remarque qu’à la place de Menu, nous avons maintenant Retour Menu qui permet un retour au menu des 12 Ecoles et Instituts.
Sarah ALFATH – Mélanie GARRIC – Jessica GOUILLON – Kim NGUYEN 26
- Dans l’espace Junior -
Voici la page d’accueil de l’espace Junior. Le menu est très simplifié pour les enfants, un mot désigne une rubrique.
Sarah ALFATH – Mélanie GARRIC – Jessica GOUILLON – Kim NGUYEN 27
Au clic d’une rubrique, une liste se déroule et les autres rubriques se trouvent glissés vers le bas ou vers le haut (selon la rubrique choisie). Nous arrivons sur une page illustrant la rubrique choisie.
Lorsqu’on clique sur une catégorie, celle-ci change de couleur, passant du Sarah ALFATH – Mélanie GARRIC – Jessica GOUILLON – Kim NGUYEN 28
violet au bleu. Une autre illustration apparait alors pour cette catégorie.
Simulation du bouton Lecture et du bouton Son.
Les boutons sont assez gros pour facilité l’utilisation de l’enfant. Le bouton Lecture et du Son ont la même couleur violette. Le bouton Pause devient un peu plus clair pour montrer à l’enfant qu’il a interagit avec le bouton. Lorsque le volume est coupé, une simple barre noire vient couper le bouton. Grâce à ces options, l’internaute devient maître de ses actions.
Sarah ALFATH – Mélanie GARRIC – Jessica GOUILLON – Kim NGUYEN 29
TYPOGRAPHIE Il y a trois polices utilisées dans tout le site. Trebuchet MS : le message de bienvenue, les N°Urgents, dans la barre de recherche, tout l’espace Junior. Myriad pro : pour le retour à l’accueil général du site dans l’espace Junior Tahoma : tout le reste. C'est-à-dire, le logo, le menu principal, les titres des rubriques, des sous rubriques, toutes les informations, les textes. Tahoma est une police d’écriture sans-serif. Elle possède un corps moins large, des espaces renfermés plus petits, des espaces interlittéraux peu importants. Il s’agit de la police d’écriture qui s’affiche par défaut à l’écran dans l’interface graphique de Windows 2000, Windows XP. Elle est très fréquemment utilisée comme alternative à la police Arial. Myriad est une police de caractère sans serif, elle possède des courbes arrondies. Myriad est utilisée par le constructeur informatique Apple, Inc. Trebuchet MS est une police d’écriture sans-serif pour Miscrosoft.
Sarah ALFATH – Mélanie GARRIC – Jessica GOUILLON – Kim NGUYEN 30
- Le menu principal sur la page d’accueil Tahoma, Regular, 10pt, #a9cfe5, (logo)
Trebuchet MS, Bold, 30pt, #ffffff, lueur externe # 101259 (image)
Tahoma, Regular, 9pt, #ffffff, lueur externe #10374c (image)
Sarah ALFATH – Mélanie GARRIC – Jessica GOUILLON – Kim NGUYEN 31
- Contenu Tahoma, Regular, 15pt, #2d2c61
Tahoma, Bold, 11pt, #1274ad
Tahoma, Regular, 9pt, #1274ad, les citations sont en italiques
Tahoma, Regular, 10pt, #000000, les mots importants sont en gras, et les liens sont en soulignés et de couleur #0c3158
Tahoma, Regular, 9pt, #3b81a9, footer
Sarah ALFATH – Mélanie GARRIC – Jessica GOUILLON – Kim NGUYEN 32
- Espace Junior –
Trebuchet MS, Regular, 24pt, #ffffff, contour #da69b7
Trebuchet MS, Regular, 16pt, #ffffff, contour #2494bd
Trebuchet MS, Regular, 16pt, #ffffff, contour #9d5581 Trebuchet MS, Regular, 14pt, #0d1b55
Sarah ALFATH – Mélanie GARRIC – Jessica GOUILLON – Kim NGUYEN 33
COULEURS PAGE D’ACCUEIL
Hexadécimal : #baddf1 RVB : 186 / 221 / 241
Hexadécimal : #307ba3 RVB : 48 / 123 / 163
Hexadécimal : #dadae4 RVB : 218 / 218 / 228
Les couleurs principaux du site sont le bleu et le gris. Le bleu rappelle le logo du CHU de Rouen et le gris vient adoucir les divers bleus sur la page. Le bleu symbolise l’infini, le spirituel, la paix, le calme, la fraîcheur. Cela permet à l’internaute de se sentir à l’aise et en sécurité sur le site. Les dégradés sont beaucoup utilisés afin d’alléger les couleurs et donner une impression de calme dans le domaine de l’hôpital.
ESPACE JUNIOR
Hexadécimal : #a13cb6 RVB : 161 / 60 / 182
Dans l’espace Junior, la couleur violette a été rajoutée. Celle-ci apparaît pour être en adéquation avec la mascotte qui est l’hippopotame de couleur violet. Cela donne de la couleur vive et sort du décor de l’hôpital. Cette couleur symbolise le mystère, l’inconscient, le secret, la douceur et la tendresse. Cela permettra à l’enfant de se sentir dans son univers qui lui est propre.
Sarah ALFATH – Mélanie GARRIC – Jessica GOUILLON – Kim NGUYEN 34
PALETTES DE COULEUR Voici la palette de couleur de la page d’accueil. On remarque que le bleu est dominant et qu’il y a beaucoup de nuance de bleu.
Voici la palette de couleur de l’espace Junior. On remarque beaucoup de violet et la dominance de couleurs pastels.
Sarah ALFATH – Mélanie GARRIC – Jessica GOUILLON – Kim NGUYEN 35
ELEMENTS GRAPHIQUES MENU PRINCIPAL
Ce menu possède les dimensions 817 * 213, possède les coins arrondis afin de rester dans une ambiance calme et doux, et présente plusieurs images. Tout d’abord, les trois images représentant les trois catégories de clients du CHU de Rouen. Chaque image possède la taille de 194 * 69 avec le titre intégré dedans. Ces images représentant des personnes sont choisies afin de bien illustrer chaque catégorie et que l’internaute puisse s’y identifier. L’image principale possède la taille de 621 * 213 pixels. Pour le message de bienvenue, l’image représente le bâtiment de l’hôpital. Ceci permet à l’internaute de visualiser le lieu du CHU de Rouen. Ensuite, pour chaque catégorie, l’image change en fonction de la rubrique. Elle renforce l’information et donne confiance à l’internaute sur sa recherche. Ces images ont une capacité de 46% sur un fond bleu (#328ec3).
Lorsqu’on entre dans une catégorie, l’image prend alors la hauteur de 117 pixels, les autres images sont réduis à 47 pixels. Toutes ces images du menu seront en format JPG.
Sarah ALFATH – Mélanie GARRIC – Jessica GOUILLON – Kim NGUYEN 36
Chaque rubrique du menu principal contient une puce en forme de trait. Cela reste simple et permet juste de lister les différentes rubriques. CONTENU Dans l’actualité, il y aura toujours une image afin d’illustrer le contenu. Cela permet d’attirer le regard de l’internaute et apporter un visuel au texte. L’image a une dimension de 107 * 76 pixels. Les coins sont arrondis comme le rectangle arrondi que forme la rubrique. Cela évite un caractère fort et sévère des coins pointus. On reste dans l’harmonie et la douceur que connote le site. A l’intérieur des pages, cela dépend de la rubrique, de la place et s’il est nécessaire de rajouter une image.
Sarah ALFATH – Mélanie GARRIC – Jessica GOUILLON – Kim NGUYEN 37
BOUTONS PRINCIPAUX Le bouton du « tout savoir sur le CHU » est de la taille 142 * 128 pixels. L’autre bouton est de 142 * 167 pixels. Celui-ci est plus grand puisque pour le diagnostic en ligne, l’image d’un homme de la tête au pied est indispensable. Donc pour une optimisation, nous avons agrandit ce bouton. Les deux pictogrammes ont été détouré, traite et possèdent une ombre portée pour les faire mettre en valeur.
Ces boutons d’espace Junior et Ado sont de tailles 160 * 133 pixels. Ils sont différents des deux autres puisqu’ils ne concernent seulement un jeune public et, de plus, en dehors de la page d’accueil, ces boutons disparaissent. Les deux mascottes ont été détourées, traité et possèdent une ombre portée pour les mettre en valeur.
C’est le bouton de retour à la page d’accueil de l’espace Junior lorsqu’on se trouve à l’intérieur de l’espace Junior. Il est dans la même nuance de couleur que l’hippopotame, en violet, en arrondie. Il est facile à l’enfant de le repérer, de plus, le texte « retour » est indiqué.
Sarah ALFATH – Mélanie GARRIC – Jessica GOUILLON – Kim NGUYEN 38
MASCOTTE
Voici la mascotte de l’espace Junior. Nous l’avons choisi par ses formes très arrondies et disproportionnées. En effet, il possède une bouche énorme qui est bien mise en avant, des yeux globuleux, des narines bien rondes, deux dents qui pendent et son minuscule corps que l’on remarque en second lieux. De plus, il est déjà en situation pour présenter quelque chose. Il donne alors un effet comique et on lui présente une sorte de compassion par l’attitude inquiète qu’il dégage. Il sera le guide des enfants dans l’espace Junior. Il communique avec l’enfant par la présence d’une bulle comme dans une BD, et, il y a en plus, une animation sonore de ce qu’il dit.
ANIMATIONS FLASH
Comme expliqué plus haut dans le dossier, la rubrique 12 Ecoles et instituts fonctionne par la technologie Flash. Sarah ALFATH – Mélanie GARRIC – Jessica GOUILLON – Kim NGUYEN 39
Sur la page d’accueil de la page Junior, se trouve une animation Flash. La scène se passe à l’extérieur de l’hôpital, on se trouve juste en face du bâtiment, prêt à rentrer. Seuls les nuages et les oiseaux bougeront.
Sur la page des « Urgences et de « Ton arrivée » se trouveront également des animations Flash en forme de vidéo d’explication. Dans la maquette des « Urgences », nous trouvons un petit garçon entouré de l’infirmière et du pédiatre qui rassure le garçon ainsi que le jeune internaute. Dans la maquette de « Ton arrivée », on se retrouve dans la salle d’attente, à l’accueil de l’hôpital. On voit alors apparaître un pédiatre prêt à recevoir un patient.
Sarah ALFATH – Mélanie GARRIC – Jessica GOUILLON – Kim NGUYEN 40
ANALYSE DE LA CONCURRENCE
www.hss.edu : Hospital for Special Surgery
Points négatifs : - scroll trop long - thème de l’hôpital non exploité - absence de fil d’Ariane - absence de point de situation - non respect de la règle des 3 clics pour arriver à l’information voulue
Points positifs : - belle qualité d’image - offre témoignage - moderne (zoom image…) - mini diagnostic en direct - envoyer la page par mail - imprimer et partager la page, sur Facebook entre autre.
Solution : réduire le scroll, mettre en place un fil d’Ariane et le point de situation et respecter la règle des 3 clics.
A retenir : l’image en haut de page prenant toute la largeur, l’aspect moderne avec le zoom sur cette image, le gabarit de la page d’accueil
Sarah ALFATH – Mélanie GARRIC – Jessica GOUILLON – Kim NGUYEN 41
www.chu-nantes.fr : CHU de Nantes
Points négatifs : - problème dans « autres langages « ne fonctionne pas en langage Arabique et ne traduit qu’une seule page - les types de rubriques ne sont pas assez mis en avant - absences de liens en tant que professionnel, patient etc.… - 4 blocs sur la page d’accueil - absence du thème de l’hôpital
Solution : éviter les 4 blocs sur la même page, résoudre le problème du changement de langue, séparer les catégories de personnes, changer le design pour que se soit moins terne
Points positifs : - présence de fil d’Ariane - liens vers d’autres hôpitaux de Nantes - lettre d’info à envoyer directement - respecte la règle des 3 couleurs
A retenir : les liens vers les autres hôpitaux de la région, lettre d’information à envoyer par mail directement
Sarah ALFATH – Mélanie GARRIC – Jessica GOUILLON – Kim NGUYEN 42
www.chu-toulouse.fr : CHU de Toulouse
Points négatifs : - absence de logo donc pas de retour à l’accueil sur la page - contact pas mis en évidence
Points positifs : - règle des 3 clics respectés - thème de l’hôpital bien exploité - images très explicites - annuaire des spécialités - domaine Patient Professionnel mis en évidence - tout tient sur la page - page centré - respecte la règle des 3 couleurs
Solution : mettre un logo impérativement, bien mettre en présence les contacts pour pouvoir communiquer avec le personnel de l’hôpital
A retenir : les images bien en relation avec le thème de l’hôpital, l’annuaire des spécialités accessible dès l’accueil, page centré et le contenu tien sur la page
Sarah ALFATH – Mélanie GARRIC – Jessica GOUILLON – Kim NGUYEN 43
http://www.ch-meaux.fr/web/guest/home : CHU de MEAUX
Points négatifs : - présence d’un onglet accueil alors que nous somme dans l’accueil - scroll long, le contenu ne tient pas sur la page
Points positifs : - séparation des catégories de personne - présence d’un plan interactive - menu déroulant avec des intitulés corrects - présence de téléchargement de formulaire dès l’accueil - présence d’un questionnaire de satisfaction (prouve l’intérêt qu’on porte à l’internaute) - possibilité d’imprimer chaque page par l’icône de l’imprimante - présence d’une recherche avancée
Solution : réduire le scroll
A retenir : les séparations bien distinctes des catégories de personne, l’aspect moderne du site avec le diaporama, l’harmonie des couleurs, la recherche avancée sur toutes les pages
Sarah ALFATH – Mélanie GARRIC – Jessica GOUILLON – Kim NGUYEN 44
http://www.chu-grenoble.fr/ : CHU de Grenoble
Points négatifs : - absence du thème de l’hôpital - texte du menu du haut écrit trop petit, l’accès et la compréhension deviennent difficile - incompréhension de la couleur verte qui domine, trop unicolore : un peu glauque - site trop monotone malgré les couleurs pour les titres, n’attire pas l’attention sur les textes
Solution : mettre en évidence les catégories de personne et exploité le thème de l’hôpital, mettre des couleurs plus vives pour attirer l’attention de l’internaute
Points positifs : - site sobre qui prouve le sérieux de l’hôpital - image : montagne et ciel, ce qui rappel la vie et évite l’image lugubre d’un hôpital - image qui change selon l’onglet et le thème sur lequel on clique, aspect proche de l’internaute - moteur de recherche accessible sur toutes les pages - mise en relation avec les sites des soins interrégionaux - présence de fil d’Ariane et point de situation - règles des 3 clics respectés
A retenir : un site sobre, images à l’intérieur des rubriques en relation avec le thème de l’hôpital
Sarah ALFATH – Mélanie GARRIC – Jessica GOUILLON – Kim NGUYEN 45
http://gapext.chru-lille.fr/~chrulille/index.shtml : CHU de Lille
Points négatifs : - page mal cadré, situé principalement sur la gauche - absence de ligne d'Ariane - thème de l'hôpital non exploité - quelques pages manquantes - quelques liens non mis à jour - photos sans intérêts - page d'accueil trop chargé, texte illisible parfois
Points positifs : - séparations des catégories pour Patient, professionnel, autre, et étudiants, - règles des 3 couleurs respectés - 2 menus toujours présents et bien distincts - règles des 3 clics respectés
Solution : bien cadré le contenu au centre de la page, remettre à jour le site, éviter les photos superflus, allégé le texte
A retenir : les menus toujours présents et bien distincts dans tous les pages du site, règle des trois couleurs respectés
L’AUDIT GRAPHIQUE ET ERGONOMIQUE L’AUDIT GRAPHIQUE Décrivez vos premières impressions dès votre arrivée sur le site ? La page est mal cadrée, non centrée, trop petite et n’utilise pas toute la surface de la fenêtre. Le logo n’est pas mis en valeur, il se fond dans l’arrière plan. Le thème de l’hôpital n’est pas bien exploité. Vos premières impressions sont elles en adéquations avec le sujet ou la marque ? On ne comprend pas, au premier regard, que l’on se trouve sur un site d’hôpital. Le nombre de couleur utilisé ? Trois couleurs sont utilisées : Les deux couleurs principales sont le bleu et l’orange. Le fond est blanc. Il y a un code de quatre couleurs pour chaque rubrique : violet, bleu, orange, rose. Les formes du site sont elles en adéquations avec le sujet ou la marque ? Les formes ne sont pas en adéquation avec le thème de l’hôpital. Elles sont en rapport avec le logo du CHU qui prend forme arrondie, celle ci génère la sécurité et la douceur. L’unité du site est il cohérent ? Oui, quand on navigue dans le site, on n’est pas dépaysé.
Sarah ALFATH – Mélanie GARRIC – Jessica GOUILLON – Kim NGUYEN 47
Diriez-vous que l’apparence du site est : jeune, à la mode, vielle, décalé, hors sujet, étonnant, innovant etc.… L’apparence du site n’est pas original, ni innovant, ni surprenant. Elle est vieille et hors sujet.
Sarah ALFATH – Mélanie GARRIC – Jessica GOUILLON – Kim NGUYEN 48
Les visuels sont ils pertinents avec le sujet et sont ils utiles ? Les visuels représentent essentiellement des hommes, ce qui peut rassurer les internautes. Chaque rubrique est illustrée par des images, ce qui donne de la convivialité. Une zone se situe à part pour l’actualité. Néanmoins, dans chaque rubrique, on trouve des illustrations différentes de celle du départ. Cela est abusif. De plus, les images sont souvent hors sujet et sont donc inutiles. Le gyrophare à la page d’accueil pour les numéros urgents, est une bonne idée pour attirer l’œil sur cette rubrique. L’équilibre des éléments graphiques et informatiques est il efficace ? Le site a voulu équilibrer les éléments graphiques et informatiques mais beaucoup d’images sont inutiles. L’équilibre n’est donc pas efficace. L’emplacement des éléments importants est il pertinent ? Oui, l’emplacement des éléments est pertinent puisqu’il se trouve au centre. Cependant, l’emplacement de l’espace Junior et Ado n’est pas pertinent en bas de page, il n’est pas assez mis en valeur. L’élément ou principe graphique pour le marquage du point de situation, est il présent ? Et si oui, est il efficace ? L’élément pour le marquage du point de situation n’apparait pas au deuxième clic mais au bout de plusieurs clics. Ceci n’est pas du tout efficace, l’internaute peut se perdre en naviguant sur le site. Y a-t-il des éléments graphiques type puces, photos, schémas etc. … ? Les puces sont très présentes, sobres et utiles. Les photos sont trop nombreuses et superflues. Les schémas sont inexistants.
Sarah ALFATH – Mélanie GARRIC – Jessica GOUILLON – Kim NGUYEN 49
Les éléments graphiques sont ils utiles à la lisibilité et/ ou la compréhension du contenu du site ? Certaines photos sont utiles à la lisibilité du contenu du site afin d’embellir la page mais d’autres sont inefficaces. La hiérarchie des éléments textes est elle respectée ? Oui, la hiérarchie des éléments textes est respectée. Le titre est plus gros et mise en avant par rapport au sous titre. Il y a des alinéas à chaque début de texte. La numérotation est présente dans chaque paragraphe.
L’ERGONOMIE La règle des trois clics est elle respectée ? Oui, elle est bien respectée. Identifions nous toujours où on se trouve dans le site ? Oui, il y a la présence du point de situation. Y a-t-il un lien sur le logo permettant le retour à l’accueil ? Oui le logo permet un retour à l’accueil. Quel est le nombre de rubriques dans le menu principal ? Il y a 25 rubriques dans le menu principal. Les libellés de rubriques sont ils pertinents ? Oui, ils sont pertinents. Combien de menus existent-t-ils ? Sarah ALFATH – Mélanie GARRIC – Jessica GOUILLON – Kim NGUYEN 50
Il existe 6 menus. Combien de niveau d’arborescence existent t ils dans le menu principal ?
Il existe 21 niveaux d’arborescence dans le menu principal dont 9 niveaux principaux. Existe-t-il un point de situation et un fil d’Ariane ?
Il existe un point de situation mais le fil d’Ariane n’apparait qu’au quatrième clic. Existe-t-il un code couleur ? Et si oui est-t-il respecté ? Oui, les couleurs dominantes sont le bleu, orange et violet. Il est à moitié respecté puisqu’il y a une présence d’une touche de rose. La navigation du site est elle intuitive ? Non il n’est pas évident de naviguer sur ce site car les rubriques ne sont pas mise en valeur. De plus, à l’intérieur des rubriques, il existe plusieurs autres rubriques et un nouveau menu apparaît. Au premier regard, il n’est pas facile de s’y retrouver.
Sarah ALFATH – Mélanie GARRIC – Jessica GOUILLON – Kim NGUYEN 51