1 . Architecture fonctionnelle du site web La conception ou Pélaboration de l’architecture fonctionnelle peut être réalisée pour la création ou la refonte d’un site Web, selon son ampleur ou pour certaines fonctionnalités. Etant la responsable de l’architecture fonctionnelle du site, j’étais amenée à faire la conception de l’interface en traitant les points suivants : l’arborescence, la navigation dans un site web, ainsi que l’architecture interactionnelle et l’organisation des pages. 1 . 1.
Arborescence : « La chose la plus importante à considérer lorsqu’on prépare le design d’un site W La facilité avec laquel éterminera la fréqu Eviter de frustrer les Et au bout du compt or7 es utilisateurs. recherchent iendront sur le site. principal du design. mation qu’on présente est la base ondamentale d’une expérience réussie sur le Web. » (Valérie Casey, professeur de Web Design à l’Université de San Francisco) Le but est de fournir à l’usager l’information qu’il souhaite en un minimum d’étapes et donc un minimum de temps.
Pour autant que des normes strictes existent en la matière, on parle de la « règle des 3 clics » selon laquelle toute information de votre site doit être disponible en maximum 3 clics de souris. Il faut donc iérarchiser l’information selon une
Le Web se prête bien à ce genre d’organisation puisque la plupart des sites offrent d’abord une page d’accueil, qui mène à différentes sections. En effet ce genre de structure de type hiérarchisée, en plus d’être facile à utiliser parce que familière pour tout le monde, force le créateur du site à bien organiser son nformation et à faire une bonne analyse du sujet avant de créer le site, et cela ne peut qu’avoir des répercussions positives sur le site. 1 . 1. 1 .
Arborescence du site avant refonte L’ancienne arborescence du site est étalée sur 4 niveaux de profondeurs, toute information est accessible depuis un menu présenté sur la page d’accueil et divisé en 6 rubriques : Accueil, L’école, Formations, Recherche, International, Entreprises. Un menu isolé se présente à gauche de la page d’accueil divisé en six sous rubriques : ENSIAS, ENSIAS dans la presse, Rapports d’activités, Dépliant ENSIAS Archives, 20 ENSIAS. Les informations concernant les actualités occupent en approximation 70% de Pespace présenté par la page d’accueil.
Accueil L’école Présentation Direction Services Département Corps Enseignant Lauréats Conseil de l’école Commissions Ressources Formations Formation ingénieur PAG » rif 7 en entreprises Recrutement des lauréats ENSIAS ENSIAS dans la presse Rapports d’activités Dépliant ENSIAS Archives 20 ENSIAS Figure : La structure hiérarchisée du site avant refo nte 1 . 1. 2. Arborescence du site après refonte : Pour le nouveau site www. ensias. ma, nous devons refaire une navigation plus adaptée au contenu. Pour cela J’ai proposé de gardé presque le même contenu.
Le plus gros du travail a été de retravaillé l’accessibilité de façon à optimiser la façon d’accéder aux informations. Ma proposition était alors de garder la navigation ayant 4 niveaux de profondeur et d’apporter les modifications suivantes pour le nouveau site de l’ENSIAS: Le menu isolé sur la partie page d’accueil fera partie nc;F3CF7 lauréats L’étudiant Vie estudiantine plateforme étudiant Inscription en ligne Inscription ingénieur Inscription master Inscription doctorale Figure • La structure hiérarchisée du site après efonte 1. . Page d’accueil Après avoir me documenter sur la bonne conception d’un site web, j’ai pu constater que la page d’accueil constitue le pont d’entrée d’un site Web et que c’est généralement par-là que les visiteurs arrivent, et il est donc normal qu’on y consacre beaucoup de temps lors de la refonte de notre site. La page d’accueil doit inviter le visiteur à entrer. Elle ne présente pas (ou bien peu) de contenu u contenu qui se trouve mise à Jour On évitera dans la page d’accueil : Toute forme de publicité mensongère quant au contenu.
Des liens externes vers d’autres sites. De devoir utiliser les barres de défilement vertical. Au delà de 2 écrans, la page d’accueil risque d’être beaucoup trop détaillée et donc pas assez attractive. 1. 2. 1 . Page d’accueil du site après refonte : Pour des raisons d’attractivité et d’optimisation du contenu rai proposé d’apporter les modifications suivantes à la page d’accueil du site existant : Diminuer l’espace dédié aux données d’actualités. Redimensionner la taille du logo ENSIAS de sorte à ce qu’il occupera tout l’entête de la page d’accueil.
Faire recours aux éléments visuels (logo, image, icône symbolique) pour occuper d’avantage l’espace d’accueil photos de l’environnement interne de l’école, photos de la vie estudiantine). 1. 3. Outils de navigation Une fois la structure du site web est placée, il faut ensuite fournir aux visiteurs les outils de navigation indispensables pour une exploration aisée de ce site. Ces outils de navigations sont aussi indispensables à la circulation du site web que les panneaux de circulation du réseau routier.
Ces outils de navigation se présentent par des liens sous forme de texte ou seront plus agréablement conçus sous forme de petites images, boutons, icônes ou barres d’information. 3. 1. 1. Navigation du site avant refonte : L’important dans la navigation du site existant de l’ENSIAS est sa capacité de pouvoir situer ec le type de navigation site lors de la navigation sur les pages, de continuer la navigation , de revenir en arrière et de retourner à la page d’accueil en un seul clic, toute en conservant les mêmes icônes dans les même endroits.
Figure : Principe de navigation avant 3. 1. 2. Navigation du site Après refonte : Pour le nouveau site de l’ENSIAS, ma proposition pour cette partie, était de procéder par le principe de navigation, généralement adopté par tous les concepteurs de site web et qui semble plus simple et plus attractif. Ainsi les utilisateurs de ce site peuvent revenir à tout moment vers la page d’accueil ou vers les principaux points de navigation en cliquant sur des liens sous forme d’une petite image se présentant sur toutes les pages.
On veillera alors à une symbolique, simple et intuitive de ces petites images car ils se doivent d’être efficaces mais aussi de rester discret par rapport au contenu et au visuel proprement dit. Ces outils de navigation qui se retrouvent de pages en pages contribuent aussi à créer l’identité graphique de notre site. Ainsi j’ai proposé que chaque page du site se serve du menu suivant en haut de la page . 4.
Le recours aux images • Les images liens ont plusieurs désavantages car elles se chargent plus lentement que le texte et n’indiquent pas si elles ont déj? été activées, mais tout cela n’em ache qu’elles sont de très importants éléments inter litent la communication ? PAGF6Cf7 l’image peut être pertinente dans certains cas particuliers : images attrayantes.. Les images devraient occuper au plus de l’espace dans une page.
Le reste doit être réservé à l’Image (ou à la couleur) de fond. Si cette règle n’est pas respectée, on se retrouve avec une page trop dense et donc difficile à lire. 1. 4. 1. Site avant refonte : Le site existant de l’ENSIAS ne présente que quelques images de type statiques sans animations, sur la page d’accueil, ce qui rend l’interactivité et la communication à travers les images moins efficaces. 1. 4. 2.
Site après refonte Pour remédier aux problèmes cités en avant, j’ai proposé le recours à un slideshow ou un diaporama, faisant circuler les images les unes après les autres, ce qui permettra d’améliorer l’interactivité du site web. Ainsi on réalise l’affichage d’un ensemble d’Images en entête de la page d’accueil d’une façon dynamique (activités scolaires, professeurs, lauréats, images ollectives… ) 1. 5.
Contacts et Adresse Il est fort important de placer quelque part sur la page d’accueil un lien vers une (ou plusieurs) adresses de courriel permettant de rejoindre les personnes importantes selon le contenu du site ou les besoins des utillsateurs. Le site existant de l’ENSIAS offre la possibilité de contact à travers une adresse ainsi que des numeros de téléphones indiqués ? travers l’onglet « Contact Cette dernière ne semble pas très visible en occupant un petit espace sur la zone droite d ccueil, pour remédier ? PAGF3CF7 espace sur la zone droite de la page d’accueil, pour remédier
