Web Design. Accompagnement textuel. Ben niha taieb. IHM M2PLS Web Design

Transcription

1 Web Design Accmpagnement textuel Ben niha taieb IHM M2PLS Web Design

2 L'bjectif de cet expsé sera d étudier le web Design et ceci à travers les techniques utilisées pur la cnceptin et la structuratin des interfaces web et les principes pur qu un site sit de qualité. 1) intrductin Tut abrd, n va cmmencer par une intrductin u n va définir : Le web Le standard W3C Les sites web Et les web design Ensuite, n parlera des techniques pur la cnceptin et la structuratin des interfaces web. Et en fin n va mentinner des quelques principes à suivre pur qu un site sit de qualité tels que : Ergnmie Utilisabilté Dispnibilité Accessibilité Le Wrld Wide Web est un système hypertexte public fnctinnant sur internet qui permet de cnsulter, avec un navigateur, des pages accessibles sur des sites. L image de la tile d'araignée vient des hyperliens qui lient les pages web entre elles. Le Web n est qu une des applicatins d Internet. Il a été inventé plusieurs années après Internet, mais c est lui qui a rendu les médias grand public attentifs à Internet. Le nm Wrld-Wide Web a également été utilisé par les inventeurs du Web, mais le nm désrmais précnisé par le Wrld Wide Web Cnsrtium (W3C) sépare les tris mts sans trait d unin. Le Wrld Wide Web Cnsrtium, abrégé par le sigle W3C, est un rganisme de nrmalisatin chargé de prmuvir la cmpatibilité des technlgies du Wrld Wide Web telles que HTML, XHTML, XML, RDF, SPARQL, CSS, PNG, SVG et SOAP. Un site u site web est un ensemble de pages web hyper liées entre elles et accessible à une adresse web. On distingue deux srtes de catégrie de site : les sites web dynamiques Ce snt des "vitrines". Les visiteurs peuvent vir le cntenu du site mais ne peuvent pas y participer. Pur les réaliser, deux langages snt nécessaires : le (X)HTML et le CSS (en thérie, il est tutefis pssible d'utiliser uniquement le HTML u le XHTML). Le (X)HTML permet d'écrire le cntenu de sa page. Le CSS permet de la décrer. Et les sites web statiques Ces sites ne snt pas que des "vitrines" : les visiteurs peuvent y participer. Pur les réaliser, n a également besin du (X)HTML et du CSS, mais il faut aussi un autre langage qui crée dynamiquement les pages. Il existe plusieurs langages pur créer ces pages (Java, C#, PHP, Ruby, etc.). Leurs rôles est d'analyser les requêtes des visiteurs pur ensuite fabriquer une répnse adaptée.

3 Un site Internet u Intranet d'infrmatins reste avant tut une vitrine, un supprt. La mise en place d'un site dit être étudiée de façn apprfndie et ne peut être abrdée cmme la rédactin d'un dcument classique. Il s'agit de rendre chérent une masse d'infrmatin et de la mettre à dispsitin d'un panel hétérgène d'utilisateurs plus u mins initiés à la navigatin sur un site web. C'est purqui un intérêt tut particulier dit lui être prté, aussi bien au niveau du cntenu que de la présentatin. Dnc il est crucial de s'interrger sur la finalité du site car il dit répndre à un besin et nn pas à une envie. Ainsi pur éviter tut prblème n va étudier quelques étapes nécessaires pur la créatin d un site telles que : Initiatin et audit Il s'agit d'une phase de cllecte et de mise en frme des infrmatins : cmmuniquées par le client (bjectifs, utilités, myens, cibles, fnctinnalités,...) cllectées sur internet (activité du secteur, stratégie des cncurrents, benchmark,...). Cet audit débuche sur la rédactin de dcuments synthétisant et frmalisant les dnnées cllectées. Spécificatins fnctinnelles et techniques Le cahier des spécificatins fnctinnelles et techniques est un dcument qui permettra de présenter avec un maximum de détails et de thématiques abrdées l'ébauche du futur site Internet. Et n en truve: Prblématique du prjet : cntexte du prjet, utilité(s), cible(s), micr-utilités, psitinnement,... Accès au site Architecture du site Arbrescence du site et schéma des liens Ergnmie Cntenus, fnctinnalités et interactins Spécificités techniques Charte graphique En fnctin des spécificatins, des éléments et cntraintes ergnmiques, des fnctinnalités, est déclinée une charte graphique sus frme d'un u de plusieurs "images" du site. Elle est remaniée jusqu'à ce qu'elle satisfasse le client. C'est sa validatin qui cnditinne l'étape suivante. Intégratin et dévelppement Lrs de la cnstructin des pages, il est nécessaire de raisnner à chaque instant sur les chix effectués pur un garantir un maximum d'évlutivité et de pérennité au site, apprter au site la prtabilité la plus large, et faciliter l'utilisabilité du site et sn indexatin par les mteurs de recherche. La créatin d'un site peut être cnfiée à une agence web u faite si-même. Pur dévelpper un site web si-même, il est pssible d'utiliser un éditeur de pages web ; pur les dévelppeurs web avertis, un simple éditeur de texte peut suffire. On peut aussi avir recurs à un système de gestin de cntenu qui

4 permet de fabriquer des sites internet en utilisant des mdèles pré établis faits. Ces lgiciels snt dispnibles pur les débutants et simplifient certaines étapes cmme la prgrammatin infrmatique u l'architecture du site tels que JOOMLA, SPIP Le web design désigne la cnceptin de l'interface web : l architecture interactinnelle, l rganisatin des pages, l arbrescence et la navigatin dans le site web. Il s agit d une phase essentielle dans la cnceptin d un tel site. La cnceptin d'un design web tient cmpte des cntraintes spécifiques du supprt Internet, ntamment en termes d ergnmie, d utilisabilité et d accessibilité. Le web design réclame dnc des cmpétences variées : en prgrammatin, en ergnmie et en interactivité, ainsi qu'une bnne cnnaissance des cntraintes techniques liées à ce dmaine : diversité des terminaux web et de leurs affichages, accessibilité, spécificités des différents langages et prcessus, prtabilité, respect des recmmandatins du W3C. 2) Cnceptin de l'interface web A ce stade, nus déterminns ensemble de qui sera cnstitué vtre site, sn cntenu, nus établissns la navigatin du site et nus définissns la charte graphique. En fnctin des bjectifs fixés précédemment, n prpse tute une série de fnctinnalités devant amener le maximum d interactivité avec l internaute telles que La dimensin des pages En terme de largeur, l'ideal est d'pter pur une valeur inferieure a la définitin hrizntale de la majrité des visiteurs. Chisir la plus petite largeur sit 600 et 800 pixels de largeur par exemple). Agencement des pages

5 La structure traditinnelle d'une page web est la suivante : Un lg situé en haut à gauche. La plupart du temps le lg est cliquable et mène à la page d'accueil ; Une zne de navigatin (menu), située à gauche et/u à drite ; Un en-tête cntenant le nm du site, un bandeau de navigatin et une zne prévue pur une 0bannière (publicitaire u nn) ; Un crps de page, cntenant l'essentiel de l'infrmatin ; Un pied de page regrupant des infrmatins utiles telles que la date de mise à jur, un lien vers un frmulaire de cntact, un plan d'accès, etc. Utiliser des culeurs bien définies Mieux vaut utiliser un nmbre limité de culeurs. Le cahier des charges définie les culeurs. Elles snt là pur apprter une vraie valeur ajutée au site : ambiance graphique, identité visuelle, sutien de la mise en page et du cntenu, repères de navigatin. Les culeurs apprtent un plus à l'ergnmie web d'un site. Respecter le chix des culeurs définies dans une charte graphique est imprtant. Cela permet de garantir l'hmgénéité des pages d'un site. 3) Structuratin de l interface web

6 La structuratin du site web cnsiste à bâtir l'architecture glbale du site web en rganisant les différentes infrmatins. Il s'agit dans un premier temps de faire l'inventaire des cntenus du site web et de les regruper par thématique afin de cnstituer des rubriques, n parle alrs de rubriquage. Dès lrs que les principales rubriques snt identifiées (n veillera à ne pas dépasser une dizaine de rubriques principales), il faut alrs déterminer leur rganisatin et leur décupage en sus-rubriques. La plupart du temps la structuratin du site peut se représenter sus la frme d'une arbrescence dnt la racine est la page d'accueil : 4) Principe a suivre pur un site web de qualité 4.1) ergnmie L'ergnmie est la façn de rendre un site utilisable par le plus grand nmbre de persnnes avec un maximum de cnfrt et d'efficacité. Pur analyser en prfndeur l'ergnmie d'un site, il est pssible de faire des audits d'accessibilité et des test utilisateurs, mais il existe des principes de bases dnt vici une liste : Objectif du site : Afficher le nm et le lg de l'entreprise en grs et bien en vue. Ajuter une signature / slgan qui résume explicitement l'activité du site. Mettre en valeur les fnctins principales pur que la page d'accueil remplisse pleinement sn rôle de pint d'rientatin. Présentatin des infrmatins :

7 Inclure dans la page d'accueil un lien Cntactez-nus qui pinte sur une page cntenant tutes les crdnnées de l'entreprise. Si le site cntient des infrmatins sur les clients, ajuter sur la page d'accueil un lien Clause de cnfidentialité. Rédactin du cntenu : Privilégier un vcabulaire centré sur les clients (pas de termes internes, trp techniques u jargn cmmercial). Eviter les redndances, même pur suligner leur imprtance. Veiller à la chérence de la casse (majuscules/minuscules). Eviter les listes à puces cntenant un seul élément. Décrire les actins à accmplir de façn claire, emplyer de préférence l'impératif. Dévelpper la première ccurrence de chaque abréviatin et de chaque sigle. Navigatin : Installer la zne de navigatin principale en un pint stratégique, de préférence juste à côté du cntenu principal de la page. Regruper les cntrôles de navigatin similaires. Si le site prpse une fnctin de panier, insérer sur la page d'accueil un lien vers cette fnctin. Utiliser des icônes de navigatin seulement si elles snt claires. Dnner aux internautes un accès direct aux fnctins principales du site (technique du "zér clic"). Ne pas prpser d'utils qui se cntentent de dupliquer des fnctins du navigateur (ajut aux favris, en page de démarrage,...). Ne pas mettre en place de page "tunnel" (qu'il faut passer avant d'arriver au cntenu principal). Images et animatins : Se servir des images avant tut pur mettre en valeur le cntenu plutôt que pur décrer simplement la page. Ajuter une légende aux images et aux phts si le cntexte ne suffit pas à les rendre explicites. Ajuster les images à la taille d'affichage (plutôt rgner que rapetisser pur du JPG). Eviter les éléments graphiques en filigrane (images en arrière-plan et texte au premier plan). Ne pas utiliser d'animatins en page d'accueil : décnseillées parce qu'elles n'apprtent pas d'infrmatin et déturnent l'utilisateur du cntenu véritable. Pas d'animatin pur les éléments essentiels (lg, titre, signature): c'est suvent assimilé à de la pub. 4.2) Utilisabilité

8 Vérifier que sn site est utilisable par le plus grand nmbre revient a vérifier un certain nmbre de critères relativement simples que l'n cnnait suvent mais que l'n a tendance a ublier : Etes-vus sur que tus vs liens fnctinnent? Avez-vus place vtre lg en haut a gauche? Avez-vus fait un Site Map? Avez-vus valide vtre CSS en utilisant le service de validatin CSS du W3C? ) Accessibilité Chaque individu est différent et internet dit être adapté à tut le mnde, quel que sit sn handicap (physique, auditif, visuel,...). C'est pur cela qu'il existe également des standards et des nrmes d'accessibilité du Web (WCAG) qui est une nrme W3C qui a pur but de rendre les cntenus web plus accessibles aux persnnes en situatin d handicap. On peut regruper ces persnnes en quatre catégries : Les déficiences visuelles : Les bjets graphiques qui n'nt pas d'intitulé u de descriptif, des caractères trp petits u des culeurs peu cntrastées snt autant de barrières pur accéder à l'infrmatin. Les déficiences auditives. Le manque d'explicatins u de transcriptin des éléments snres peut priver les persnnes malentendantes de certaines infrmatins Les handicaps physiques. Certains utilisateurs peuvent avir du mal à manipuler le clavier u la suris. S'il existe des périphériques ptiques u manuels mieux adaptés, il n'en demeure pas mins que des caractères trp petits, ntamment au niveau des liens, ne permettrnt pas à certains utilisateurs de pinter u de sélectinner cnvenablement, ce qui les privera d'un accès cmplet au site. Les déficiences mentales u neurlgiques. Le manque de repères clairs et précis ainsi qu'un système de navigatin nn intuitif peuvent trubler de nmbreux utilisateurs.. L'abus d'effets visuels de type cligntement u d'animatins dnt la fréquence est trp élevée peut avir de sérieuses cnséquences sur des sujets sensibles sélectinner cnvenablement, ce qui les privera d'un accès cmplet au site. 5) Cnclusin Pur réfléchir et tenter de cnnaître le webdesign de demain, il ne faut pas chercher des tendances graphiques mais bien leurs supprts. Demain, ce n est pas le design qui va être révlutinné, mais les supprts permettant d avir accès à l infrmatin. Ce snt ces nuveaux supprts qui vnt changer du tut au tut et par cnséquent l ergnmie et la structure des éléments graphiques devrnt s y adapter.

9 Il ne faut dnc pas parler de nuvelles tendances mais plus directement de nuveaux supprts et de nuveaux utils.