Cours Webmaster

Cours webmaster : Ergonomie site web et apparence du site


Télécharger Cours webmaster : Ergonomie site web et apparence du site

★★★★★★★★★★4 étoiles sur 5 basé sur 1 votes.
Votez ce document:

Télécharger aussi :


2142

Ergonomie site web et apparence du site

...

Lorsqu’un utilisateur accède à l’Internet, il est fort probable qu’il visite un grand nombre de sites qui ont été développés selon les préférences individuelles de ses concepteurs et non pas dans le respect des règles de l’art du web design. Souvent ces sites posent des problèmes à plusieurs niveaux; tout d’abord, il est de plus en plus difficile de les maintenir à jour car la moindre modification, comme le fait d’ajouter une nouvelle image, demande des changements importants qui s’avèrent très coûteux en termes de temps. Par le fait d’ignorer les standards du web, les développeurs sont obligés d’implémenter une version différente d’un même site pour chaque client web pour lequel on aimerait que le site soit opérationnel. Parallèlement à l’implémentation nécessaire des standards dans les projets web, il est important que les designers puissent intégrer dans une seule et unique composition les concepts de graphisme et d’ergonomie d’interface. Très souvent, on a tendance à opposer ces deux notions, en adaptant une approche qui privilégie l’esthétique et l’identité graphique par rapport aux critères ergonomiques, tels que le guidage et la surcharge visuelle. Cependant, ce sont deux concepts tout à fait complémentaires qui permettent de créer des pages web modernes, répondant aux besoins du plus grand nombre d’utilisateurs.

Le design ergonomique et accessible a un poids important dans le succès de tout projet web. Par exemple, en offrant aux utilisateurs la possibilitéde personnaliser le graphisme des pages, ils pourront, entre autre, choisir le mode d’affichage (mode texte et graphique) le plus adaptéà leurs besoins. Ce faisant, il est possible d’enrichir l’expérience de l’utilisateur car on lui donne la possibilitéde prendre de décisions sur la présentation du contenu et les opérations d’affichage déclenchées par le site web.

L’un des bénéfices souvent liés à l’accessibilité est celui de l’accroissement du nombre de visiteurs potentiels. Cela s’explique par le fait que l’accessibilitéweb est guidée par des principes permettant de produire des documents compatibles avec les technologies exis-tantes et futures. Plus les possibilités d’accès au site augmentent, plus il y a des chances d’être visitépar un plus grand nombre des personnes. Par contre, un site web dont l’affi¬chage est optimisépour une plateforme spécifique est évidemment disponible à un public moins important. En plus, les contenus accessibles sont mieux indexés par les moteurs de recherches et obtiennent un meilleur positionnement dans ces derniers. Cela est un avan¬tage non négligeable sachant que le 90 % des utilisateurs vont cliquer sur les liens retournés dans les trois premières pages de la recherche et qu’ils n’iront pas plus loin [31]. Enfin, en ayant mis en pratique les principes d’accessibilité, on sera en mesure de toucher d’autres groupes utilisateurs, tels que les personnes âgées et les handicapés. Les premières sont de plus en plus nombreuses dans les sociétés de l’information et représentent une partie importante de la population. Bien qu’en Suisse seulement le 37 % des 50 ans et plus uti¬lisent quotidiennement l’Internet [17], d’autres pays, comme les Etats-Unis', enregistrent des proportions beaucoup plus élevés [1]. Quant aux personnes handicapées, le bénéfice

'Selon une étude réalisées aux Etats-Unis, 16 millions d’internautes américains étaient âgés entre 55 ans et 64 ans. Pendant la même année le nombre d’utilisateurs de plus de 64 ans a atteint 10 millions d’individus.

 est moins tangible mais tout aussi efficace car, selon une étude sur l’accessibilitédes sites web en Suisse [11], « la majoritédes handicapés utilisent l’Internet pour compenser leurs déficits en mobilité». Enfin, l’accessibilitéweb permet à une entreprise d’améliorer son image vis-à-vis de son environnement2, en mettant en avant son engagement social contre l’exclusion des minorités, en particulier les handicapés.

1.2 Objectifs

En réalisant une étude générale sur les principes et techniques du graphisme et de l’ergo¬nomie web, on poursuit deux objectifs concrets :

– Savoir s’il existe ou non un design web optimal qui permet, d’un côté, de garantir la pérennitéd’un site web face aux changements technologiques constants, de l’autre côté, de maximiser l’expérience des utilisateurs.

– Mettre en pratique les notions théoriques de l’ergonomie web dans le cadre d’un exemple précis, en l’occurrence, celui de l’évaluation du site www.amazon.fr. Cela permettra d’avoir une idée claire sur l’utilitédes outils de l’ergonomie web dans un projet de conception et développement d’un site web.

1.3 Structure

Ce travail est structuréen deux parties principales :

La partie théorique qui développe trois sujets essentiels du web design, à savoir :

– une introduction générale au web design,

– une description concise des notions de base du graphisme web, – une introduction aux principes d’ergonomie web.

Ensuite, la partie pratique applique une méthode d’évaluation ergonomique de sites web qui consiste à déceler les défauts d’ergonomie et de graphisme web, à l’aide de critères ergonomiques [34]. Le site choisi pour cette évaluation est www.amazon.fr.

2En économie, une bonne image peut devenir un argument de vente très efficace, notamment lors de contrats avec des entreprises publiques.

2 LE CONCEPT DU WEB DESIGN

2 Le concept du web design

2.1 Ce que l’on entend par web design

Lorsque que l’on essaie de trouver une définition formelle au terme de web design, on se rend compte qu’il existe deux interprétations principales. La première défini le web design comme l’étape pendant laquelle on crée les éléments graphiques et de présentation d’une page web. L’encyclopédie en ligne Wikipédia [9] adhère à cette vision et le défini comme suit : « le webdesign désigne la création du support visuel à destination d’un site Web. Il s’agit d’une phase prépondérante dans la conception d’un tel site. L’identitéd’un site Web, après avoir étéconceptualisée, sera transformée en lignes de code et images pour s’afficher dans un navigateur Web ». Comme on peut le constater dans cette définition, le web design est limitéaux questions graphiques et esthétiques des pages web, sans prendre en compte d’autres facteurs liés à la construction d’un site web. La deuxième définition va au-delàde la conception graphique et considère le web design comme une activitémultidisciplinaire permettant la conception et développement d’un site web. Elle inclut des questions, telles que l’architecture de l’information, la programmation d’applications web et le design visuel [26].

Dans le cadre de ce travail on préfère retenir la deuxième définition qui est plus près des principes et pratiques du web design actuel. Une vision plus étendue englobant différents spécialistes (designers graphiques, développeurs d’applications, experts en ergonomie web, etc.) qui mettent leurs compétences en commun pour construire un site web. Dans ce contexte la conception graphique est une étape clef du processus de développement web car elle est responsable de produire la partie visible de la page web, c’est à dire celle qui sera en contact directe avec l’utilisateur et qui lui permettra de se faire une première impression du site en question. Sachant que cette impression n’est pas uniquement visuelle mais aussi sensorielle ou d’un autre type, les designers en graphisme web ne se limitent pas aux techniques du graphisme mais ils appliquent avec rigueur les principes d’ergonomie et en particulier ceux de l’ergonomie web pour résoudre les problèmes d’utilisation susceptibles de gêner l’internaute.

2.2 L’affichage

Même si l’écran n’est pas une technologie web dans le sens strict du terme, il est d’une importance primordiale en tant que plateforme matérielle dans laquelle on affiche toutes les pages web. Une page d’accueil qui s’affiche correctement dans une configuration spé¬cifique va avoir une apparence différente dans un autre système, avec des conséquences parfois désastreuses. Ceci est dûen partie à la grande variétéde dispositifs, tels que les ordinateurs personnels, les téléphones cellulaires et les assistants numériques personnels (PDA), qui permettent d’accéder au web et dont chacun possède sa propre taille d’écran et un ensemble de résolutions possibles ainsi q’une palette de couleurs supportées.



Lors de la création graphique de l’interface web, les concepteurs doivent prendre en consi-dération qu’il existe un grand nombre d’écrans différents dont les tailles varient entre 2 pouces, pour les téléphones portables, et 30 pouces pour les tout derniers écrans, car l’affichage de la page web risque d’être très différent lorsque les tailles d’écran varient. C’est un problème qui touche surtout les sites développés sans le respect des standards et qui désirent être accessibles au moyen de n’importe quel dispositif web. Dans ce cas les desi-gners doivent concevoir différents types d’agencement de page pour chaque périphérique Internet, en fonction de la surface physique disponible. Par exemple, pour les téléphones portables et les PDA (Portable Digital Assistant) le défi du designer est de montrer les informations pertinentes dans une surface d’environ 2 pouces et 4 pouces respectivement. Pour les ordinateurs personnels, selon le format choisi, la taille est évidement plus impor¬tante et est comprise entre 14 et 30 pouces, à noter qu’il y a toujours des utilisateurs qui accèdent au web depuis un poste de télévision [36].

TAS. 1: Résolution d’écran en fonction de sa taille [35]

Diagonale           Format Résolution maximale supportée

14 pouces           4/3         800 x 600 pixels

15 pouces           4/3         1024 x 768 pixels

17 pouces           4/3         1280 x 1024 pixels

19 pouces           4/3         1280 x 1024 pixels

20 pouces           4/3         1280 x 1024 pixels

21 pouces           4/3         1600 x 1200 pixels

19 pouces           19/9       1440 x 900 pixels

20 pouces           19/9       1680 x 1050 pixels

21 pouces           19/9       1680 x 1050 pixels

22 pouces           19/9       1680 x 1050 pixels

23 pouces           19/9       1920 x 1200 pixels

24 pouces           19/9       1920 x 1200 pixels

26 pouces           19/9       1920 x 1200 pixels

27 pouces           19/9       1920 x 1200 pixels

30 pouces           19/9       2560 x 1600 pixels

Un autre aspect important dont il faut tenir compte est celui de l’affichage des pages web dans les formats 4/3 et 16/9 (proportion largeur et hauteur). Depuis longtemps le format 4/3 a étéle standard pour les écrans d’ordinateurs car il est bien adaptéau travail bureautique ainsi qu’aux pages web dont le contenu est principalement de type texte. Actuellement le format 4/3 est de plus en plus remplacépar le nouveaux écrans en 16/9 qui sont plus adaptés au contenu multimédia caractérisant le web d’aujourd’hui. Cependant, avec le format 16/9 on rencontre certains problèmes d’optimisation de l’affichage. Par exemple, l’affichage surdimensionnédes textes dans des écrans de plus en plus grands dont la résolution reste inchangée, comme on peut le voir dans le tableau 1. L’aspect visuel d’une page web peut être très différent en 16/9 car il est beaucoup plus large que le 4/3 et tend à laisser vide une grande partie de la zone dédiée à l’affichage. Ce problème est évidemment accentuélorsqu’on utilise de grands écrans.

Le paramètre le plus important n’est pas la taille physique de l’écran mais plutôt la réso¬lution supportée. Chaque utilisateur a la possibilitéde choisir la résolution avec laquelle il se sent le plus à l’aise, même si celle-ci n’est pas celle recommandée par le construc¬teur, ce qui augmente considérablement le nombre de configurations possibles à prendre en considération si l’on veut garantir un affichage et une lisibilitéoptimale. En général, plus la résolution est faible plus la surface pour y placer le contenu sera réduite [29]. Par conséquent l’utilisateur devra déployer davantage d’effort, comme par exemple, l’utilisa¬tion des ascenseurs pour visualiser le contenu de la page. Selon des statistiques récentes sur les résolutions d’affichage les plus utilisées par les internautes [21], on s’aperçoit qu’en janvier 2007 le 14 % d’écrans étaient configurées avec une résolution 800 × 600, contre 54 % avec la résolution 1024 × 768. Même si le 800 × 600 n’est plus la configuration de base la plus utilisée, elle est pourtant celle qui est recommandée comme le modèle standard de conception de l’agencement graphique des sites web car une page qui peut être lue dans un écran de résolution faible pourra forcément l’être sur un écran plus grand [29].

2.3 Les clients web

A l’heure actuelle on peut accéder au web par l’intermédiaire d’un navigateur, d’un client de courrier électronique ou d’un autre type de client capable d’interpréter les codes (ba¬lises, scripts) des pages demandées par l’utilisateur. Bien qu’au niveau des fonctionnalités ces logiciels offrent presque les mêmes possibilités, les designers se doivent de connaître les différences qu’ils présentent quant au support des standards et à la manière dont chacun interprète certaines versions de scripts et de langages donnés. En fait, ces particularités représentent l’une des contraintes les plus difficiles à gérer dans un tel projet.

...

2.4 Les langages du web design

HTML (Hyper Text Markup Language) est un langage de balisage qui a étédéfini conforme aux règles et syntaxes de son langage parent, le SGML (Standard Generalized Mark-up Language) mais qui est limitéau web. Il permet de décrire la façon dont les documents doivent être structurés pour produire des pages hypertextes ou hypermédias constituées de graphiques, de textes et de liens vers d’autres documents. Bien que pendant des an¬nées HTML a étéutilisépour des fins de design visuel (utilisation des tableaux pour l’agencement graphique), il n’est pas un langage adaptépour développer la présentation des contenus web. Jusqu’àaujourd’hui il a connu plusieurs versions (HTML 2.0, 3.2, 4.0, 4.01) qui ont ajoutédes nouveaux mécanismes tels que les feuilles de style, l’exécution de scripts, la mise en œuvre de l’accessibilitéet la gestion de cadres permettant de suivre l’évolution croissante du web et de combler les lacunes du langage quant au support mul¬timédia.

Un autre langage qui, par son caractère universel, mérite d’être mentionnéest XML (Ex-tensible Markup Language). C’est un métalangage, c’est-à-dire, un langage qui permet de créer d’autres langages de balisage que l’on appelle applications XML. A la différence de HTML, il a étédéfini à partir de SGML en tant que métalangage et non pas comme un langage tout court, il est donc assimiléà une version restreinte de SGML. Ses avantages sont nombreux, par exemple avec XML on peut décrire le contenu d’un document indé-pendamment de son formatage ce qui permet de générer plusieurs vues ou présentations pour un contenu donné. En se servant de XML on garantit que les sites web sont com-patibles avec n’importe quel client web ce qui élimine la contrainte de devoir développer

3En Suisse la loi sur l’égalitépour les handicapés, article 14 dit : L’information et les prestations de communication ou de transaction proposées sur Internet doivent être accessibles aux personnes handica-pées de la parole, de l’ouïe, de la vue ou handicapées motrices. A cet effet, les sites doivent être aménagés conformément aux standards informatiques internationaux, notamment aux directives régissant l’accessi¬bilitédes pages Internet, édictées par le Consortium World Wide Web et, subsidiairement, aux standards nationaux.



plusieurs versions d’un même site pour que ce dernier reste compatible avec les différents dispositifs web.

Comme mentionnéci-dessus, XML permet de créer d’autres langages de balisage comme le XHTML. Ce dernier est le standard de balisage actuel définit par le W3C comme étant une reformulation de HTML en XML, née avec l’objectif de remplacer le langage HTML. En effet, le langage XHTML présente beaucoup d’avantages par rapport à HTML car il a étéconçu pour interagir correctement avec d’autres langages à balises, applications, et protocoles fondés sur XML (MathML , SMIL ou SVG), XHTML fonctionne aussi bien sur les appareils mobiles, les lecteurs d’écran, et autres clients spécialisés que dans les navigateurs de bureau traditionnels ce qui supprime dans de nombreux cas la nécessitéde versions spéciales pour les appareils mobiles [39]. La première version est désignée par le nom XHTML 1.0 qui se décline en trois sous-versions :

– la Strict qui se focalise sur les éléments structurels et supprime toute balisage servant à la présentation du contenu. Autrement dit, il sépare strictement la structure du document de la présentation. Ce faisant, les développeurs doivent utiliser des feuilles de style CSS pour implémenter la présentation,

– la Transactionnelle est conçue pour faciliter la migration de HTML vers XHTML strict. Pour ce faire, elle supporte certains balisages pouvant être utilisés pour la présentation du contenu,

– la Frameset qui est la version recommandée lorsque l’on utilise des ” Frames ” dans les pages web. Par rapport à la prise en charge des éléments de présentation, cette version est similaire à la version transactionnelle.

Les évolutions suivantes, qui ont abouti à XHTML 1.1, divisent le langage XHTML en modules, chacun regroupant un type de fonctionnalités [25]. Enfin une version 2.0 est en cours de développement.

Le SVG (Scalable Vector Graphics, balisage XML pour les graphiques vectoriels) permet la représentation des formes vectorielles dans les pages web. Il se présente comme un langage complémentaire dont le balisage est conforme aux règles XML. Les images SVG peuvent être manipulées avec ECMAScript et Dom et consomment peu de bande passante lorsqu’elles s’affichent en grand format. Pour l’instant ce langage a besoin d’un plug-in pour fonctionner et il y a quelques incohérences dans son interprétation d’un navigateur à l’autre. A l’heure actuelle c’est la technologie Flash qui est la plus répandue.

Un projet web utilisant Flash peut créer des pages web interactives capables d’afficher des contenus multimédia qui combinent plusieurs formats (animations, vidéos, images vectorielles, son, etc.). Pour ce faire, il offre un outil de création et d’édition de documents Flash et une interface de programmation basée sur le langage orientéobjet appeléAction Script. Un document Flash optimisépour le web doit être enregistréau format SWF (Shockwave Flash) qui sont ensuite insérés et chargés dans les pages HTML [29]. Pour exécuter un document Flash dans une page web il est nécessaire d’avoir un plug-in prévu à cet effet, mais contrairement à d’autres technologies, il est largement répandu et presque la majoritédes utilisateurs en possède un intégréà son navigateur.

Au-delàdes langages de balisage, les designers et développeurs utilisent d’autres tech-nologies pour créer des effets visuels et interactifs. Ce sont des langages de Script, tels que JavaScript, JScript (version de JavaScript de Microsoft) et le VBScript, dont le code source est insérédans le code HTML ou référencépar celui-ci. Avec ces langages inter¬prétés la page web devient interactive et répond aux actions entreprises par l’utilisateur lorsque, par exemple, ce dernier remplis un formulaire ou fait passer la souris par-dessus un bouton ou un menu. A la différence des langages dynamiques qui sont exécutés côtéserveur (Java, ASP, Perl, etc.) et très performant pour générer du contenu à partir d’une base de données en fonction de la requête utilisateur, les langages de script sont exécutés côtéclient, par les navigateurs, et conçus pour programmer des fonctionnalités légères qui ne consomment que peu de ressources.

2.5 Les standards du web

A l’heure actuelle le web se trouve dans une phase oùde plus en plus de dispositifs ma¬tériels et logiciels (PDA, Smartphones, agents logiciels, etc.) sont capables d’y accéder, soit par intervention humaine, soit de manière complètement automatisée. Cette évolu¬tion est sûrement positive mais elle a aussi donnénaissance à de nombreux problèmes de compatibilité, d’interopérabilitéet d’accessibilitéau contenu. Une situation typique d’incompatibilitépotentielle est lorsque les designers utilisent des balises propriétaires et/ou obsolètes qui font que certaines pages ne sont plus compatibles avec certains na¬vigateurs. Quant à l’accessibilité, elle peut être menacée si les sites sont développés en HTML seulement sans prendre en compte une version équivalente en WML réduisant ainsi les possibilités d’accéder au site au moyen d’appareils mobiles.

Pour y remédier, les organismes de normalisation, le W3C (World Wide Web Consor¬tium) et l’ECMA (European Computer Manufacturers Association) ont mis au point un ensemble de langages structurels et de présentation, langages de script, ainsi qu’un mo¬dèle objet de documents. Au niveau de la structure d’une page web, HTML, XHTML et XML représentent les standards qui servent à formater les documents selon la signi¬fication structurelle des ses éléments. Pour la présentation ce sont les standards CSS1 et CSS2 (les feuilles de style en cascade) qui servent à mettre en forme la page web, en contrôlant la typographie, le positionnement, la couleur, etc. Au niveau du comportement, ECMAScript(version normalisée du JavaScript) et DOM (Document Objet Model) sont les technologies recommandés pour implémenter les comportements complexes des pages. Ces standards sont pris en charge par les différents navigateurs tels que Mozilla, Netscape 6 et suivants, Internet Explorer 5 et suivants (version macintosh) et à partir de la version 6 pour Windows et Opera à partir de la version 7.

Mais au-delàde la définition stricte de langages de balisage se cache une approche très intéressante du web design qui consiste à décomposer chaque page web en trois éléments distincts, à savoir la structure, la présentation et le comportement, afin d’optimiser plu¬sieurs aspects liés au développement et à la maintenance des sites. Par exemple, avec cette méthode un designer peut apporter des changements à la présentation sans que cette mo-dification ait un impact sur la structure de la page, autrement dit, ils n’ont plus besoin de toucher d’autres endroits dans le code pour accomplir leur travail et n’y interviennent que localement. La conséquence de cette indépendance est une économie de temps et une diminution sensible des coûts de maintenance et de développement.

3 LE GRAPHISME WEB

3 Le graphisme web

3.1 Le graphisme dans un environnement nouveau

Au fur et à mesure du développement technologique la palette graphique s’est multipliée jusqu’àcompter sur un nombre important d’éléments graphiques sophistiqués, tels que les photos de haute qualitéet les couleurs riches en nuances, que l’on peut intégrer dans une même composition graphique. Selon l’encyclopédie en ligne Wikipédia [8], « Le graphisme est une discipline intellectuelle et manuelle qui consiste à choisir et à utiliser des éléments graphiques pour élaborer un objet de communication ».

Quant au graphisme web, il est une extension du graphisme traditionnel qui adapte les principes élémentaires de cette discipline aux propriétés des médias électroniques qui constituent les outils de production et de diffusion du web [29]. Cette adaptation se re¬marque d’abord par une utilisation prudente de la bande passante, en créant des pages dont le poids n’excède pas une certaine limite en octets afin de garantir un affichage rapide dans les postes clients. Selon les différentes études réalisées sur le comportement des internautes, une personne est capable d’attendre jusqu’àdix secondes pour qu’une page web s’affiche entièrement, au-delàde cette valeur, elle se désiste et quitte le site en question.

La surface utile est un autre facteur auquel le graphisme a dûse conformer pour pénétrer le web. Cette surface qui est déterminée par la taille de l’écran, la résolution choisie et par la fenêtre du navigateur pose des limites aux designers car ils n’ont pas à leur disposition toute la surface de l’écran mais plutôt une aire définie par la surface ocupée par les options du navigateur moins la résolution de l’écran [29]. Si par exemple, la résolution est de 800× 600 et l’interface du navigateur occupe une surface de 20 pixels en largeur (10 px chaque bord vertical) et 200 pixels en hauteur (140 px de menus et 60 px de la barre de tâche), on peut déterminer que la surface utile dont on possède est de 780 × 400. A cela s’ajoute l’incertitude quant aux réelles résolutions que possèdent les utilisateurs, ce qui n’est pas le cas avec le support papier. Donc, le design web doit trouver un moyen de concevoir les pages pour tout type d’écran et de résolution en se basant sur une configuration « universelle » et en faisant le choix entre une composition figée avec des valeurs prédéfinies et une composition fluide qui s’adapte dynamiquement à la surface utile.



La colorimétrie est aussi gérée différemment dans le domaine du web. Les clients (systèmes d’exploitation et navigateurs) les plus modernes peuvent afficher des millions des couleurs ce qui permet de créer des graphismes assez expressifs mais il existe plusieurs limitations avec certains formats d’image comme le GIF qui possède une palette de 256 couleurs seulement, alors que l’être humain peut en distinguer des millions. Or, le web possède l’avantage du choix très flexible des couleurs lors de la mise à jour ou de la correction d’un projet; il n’en est rien pour les supports physiques dont le choix des couleurs est irréversible.

3.2 L’identitégraphique

Au début de la création graphique le designer doit se concentrer sur l’idée centrale du projet afin de définir l’identitégraphique du site web. En effet, il s’agit d’analyser le fond du projet pour créer un modèle visuel qui s’aligne avec l’image que l’on veut communi¬quer. Dans cette phase, ce n’est pas les couleurs et les formes qui sont importantes mais plutôt leur signification auprès du public cible. Une définition plus formelle [13] défini le concept d’identitégraphique comme « l’expression, grâce aux styles graphiques propes à l’entreprise, des valeurs, de l’activitéet des ambitions de celle-ci ». L’identitégraphique, selon Wikipédia [12], « permet de reconnaître d’un coup d’oeil un projet, une marque ou une entreprise. Cette identitésapplique également aux sites web. Elle permet à un utilisateur qui visionne les pages, de reconnaître lentreprise ou la marque ».

Afin de mieux saisir la notion d’identitégraphique et son efficacitéauprès des utilisateurs, on a supprimévolontairement le logo de la page d’accueil du site www.disney.com. Face à cette page l’utilisateur n’a aucun doute qu’il se trouve dans un site de divertissement pour enfants et plus précisément celui du monde Disney car la page met en œuvre un agencement graphique basésur les personnages animés qui l’identifie le mieux. D’autres dessins, comme les étoiles et la petite lune, permettent au site de communiquer la mission de l’entreprise qui est de faire rêver les enfants en leur proposant un monde magique. Le concept de monde magique est traduit par une disposition en rond des différents produits et services qui, dans ce contexte, représentent chacun un petit univers oùtout est beau et agréable.

FIG. 1: Malgrél’absence du logo sur la page d’accueil du site Walt Disney il n’est pas difficile de reconnaître de quelle entreprise il s’agit.

Un contre-exemple d’identitégraphique c’est celui du site www.nestle.com oùrien, sauf le logo, ne permet d’identifier l’organisation sous-jacente. Donc n’importe quelle institution proposant un service orientévers le bien-être et la santépeut utiliser ce design pour ses activités web car il manque visiblement d’identitépropre.

FIG. 2: Défaut d’identitégraphique forte. En supprimant le logo Nestléle design de la page est très général.

Pour mettre en place des interfaces utilisateur de bonne qualitégraphique il suffit d’ap¬pliquer quelques règles concrètes pour un design sobre et équilibré. Certains principes de base tirés du domaine de la psychologie, particulièrement de la théorie de Gestalt [30] sont à la base des techniques utilisées dans l’agencement des éléments d’interface graphique. Ces principes de perception visuelle décrivent (généralement) comment un observateur in¬terprète l’information visuelle en fonction de sa distribution spatiale. Elle part du principe que le « Tout » est perçu avant ses « Parties » le formant. Ainsi, la loi de la similitude dit que les objets similaires sont perçus comme appartenant à une même unité. La loi de proximitéétablit que les objets qui sont proches les uns des autres sont perçus comme appartenant à la même unité. Par la loi de continuitéon sait que la vision tend à grou¬per les éléments qui partagent le même alignement pour être perçus dans une continuité, comme des prolongements les uns par rapport aux autres. Enfin, la loi de clôture dit que l’unification d’une surface se fait d’autant mieux qu’elle constitue un ensemble fermésur lui-même.

FIG. 3: La navigation sur le site d’amazon est mise en place dans une perspective de continuité.

En plus des règles de la Gestalt, il existe d’autres principes [37] de dessin qui permettent d’améliorer l’organisation visuelle des informations. Ces principes sont :

– Équilibre : On cherche un ajustement parfait de la vision de l’utilisateur par rapport à la surface de visualisation, laquelle est divisée en deux axes imaginaires, horizontaux et verticaux, et un centre de gravitéà leur intersection. Grâce à cette division on peut distribuer les éléments visuels de façon à ce que la différence de leur poids visuel s’annule.

– Symétrie : Un objet est symétrique lorsqu’il peut être divisée en deux parties égales et

FIG. 4: Groupement par similitude et proximité. Grâce aux contours appliqués aux images des produits, l’utilisateur les considère comme étant similaires. Grâce à la proximité, ils sont considérés comme appartenant à une même unité. opposées autour d’un axe central, ce qui assure automatiquement la stabilitéou l’équi¬librage du dessin. Or, malgrél’universalitéde la symétrie, ce principe trouve surtout une application au niveau de blocs et non pas d’éléments individuels car c’est elle qui va jouer un rôle important dans l’opinion de l’utilisateur (la personne perçoit le tout avant ses parties).

– Régularité: C’est une technique pour obtenir une certaine uniformitéen plaçant les éléments selon une distribution régulière en lignes et colonnes.

– Alignement : Il s’agit de la mise en place des éléments de textes et graphiques selon une ligne donnée. Verticalement l’alignement peut se faire à gauche, centréou à droite. Horizontalement, on peut définir la hauteur de l’élément en question. Mais, le but est de produire un effet d’ordre, d’équilibre et de stabilitésur les différents éléments (boutons, champs de texte, etc.) afin de faciliter la lecture du contenu. Un texte qui n’est pas alignéest difficile à lire et crée des confusions dès le premier regard. Par contre, les documents qui respectent certaines marges, les données présentées sous forme tabulaire, oùles lignes et colonnes permettent d’aligner les données les unes par rapport aux autres, sont beaucoup plus agréables à regarder et ne génèrent pas de troubles de lecture.

– Grille de dessin : C’est un système de référence composéde plusieurs lignes verticales et horizontales qui servent de marquage pour l’emplacement des d’éléments et des zones dans une composition graphique. Grâce aux lignes de la grille le designer peut créer des zones principales et secondaires, travailler avec des blocs et conteneurs d’images ou de textes. Avec ce système, on ne se concentre pas sur l’aspect final qu’aura la composition mais sur l’organisation logique et régulière des éléments qui devra être la même pour l’ensemble des pages composant le site.



445