Articles :: Création :: Ergonomie

L’ergonomie des sites web (partie 2)

mercredi 22 décembre 2004 par Brageira

Sommaire

Après la première partie, dans cette deuxième partie nous allons aborder des critères plus précis de l’ergonomie des sites Web (En l’occurence les critères émis par Bastien et Scapin) et les illustrer.

guidage

Le premier des points sur lesquels il faut faire attention, c’est le Guidage. Le guidage est composé de 4 critères.

l’incitation L’incitation doit permettre de connaître l’état ou le mode en cours. Cela est le cas par exemple pour site MacTouch : en colorant en rouge le menu dans lequel on se trouve, l’utilisateur sait dans quelle partie du site il navigue.

groupement/distinction des items Il faut que visuellement il soit facile à l’utilisateur de se retrouver entre des éléments similaires et des éléments différents soit par leur localisation soit par leur format.

Illust:Mauvais exemple, 20.5 ko, 307x254

Mauvais exemple

Ici, la liste de lien est donné d’un ordre quelconque ni par ordre alphabétique ni par ordre de pertinence

feedback immédiat Sur le web, les gens ne sont pas patient, comme je l’ai déjà noté passé quelques secondes, on a déjà l’impression d’attendre. Lors de l’affichage de page il est donc important de prendre soit de ces images (souvent l’élément le plus gros à afficher)

Illust:Sur Google, 7.8 ko, 250x142

Sur Google

Lors d’un recherche d’image, le site affiche progressivement tous les résultats en plus d’indiquer le nombre de documents trouvés, cela aide à patienter

lisibilité La lisibilité du texte joue également toute sont importance, il est nécessaire de faire attention à son choix de police, de couleur etc...Le texte doit avoir un bonne taille et un bon contraste avec la couleur de fond.

Charge de travail

brièveté La brièveté ne signifie pas forcément que vous donnez peu d’informations, mais bien que la hiérarchie de vos pages doit être réfléchie de telle façon que la navigation se fasse en cliquant le moins de fois possible. On dit souvent qu’il faut que l’utilisateur arrive à l’information qu’il cherche en 3 clics.

densité informationnelle Encore une fois, il ne s’agit pas du volume d’information mais de la façon de l’organiser. Il faut savoir mettre en avant l’information principale

Illust:Sur ce site, 35.1 ko, 250x300

Sur ce site

La page d’accueil propose une multitude d’objets non classés, on a l’impression d’un site fouilli et on a peu de chance de trouver ce que l’on cherche.

contrôle explicite

Cette partie designe le fait que l’utilisateur doit pouvoir prendre conscience qu’il a le contrôle sur les activités. Cela peut se faire soit par des boutons OK qui viennent valider un formulaire mais c’est également par la présence de liens ou de bouton dont le nom donne une explication clair de leurs actions

Illust:En dehors du web, 12.3 ko, 176x187

En dehors du web

Un contre-exemple qui n’est pas sur le web, mais qui fait toujours rire les MacUsers, sur Windows il faut toujours cliquer sur "démarrer" pour arrêter l’ordinateur

adaptabilité

Flexibilité La flexibilité doit permettre à l’utilisateur d’arriver à la même information ou au même résultat en utilisant plusieurs façons de le faire.

Illust:Sur le site SNCF, 23.3 ko, 300x181

Sur le site SNCF

Pour trouver les horaires d’un train, plusieurs possibilités vous sont offertes dans différents menus.

prise en compte de l’expérience de l’utilisateur N’oubliez pas dans vos pages que des populations très différentes peuvent s’y retrouver, des personnes ne connaissant pas forcément internet pour lesquelles il faudra utiliser des systèmes simples avec des termes clairs, mais aussi des personnes expérimentées qui chercheront quelque chose de pointu.

Illust:Sur ce site, 13.4 ko, 300x145

Sur ce site

Il est possible de consulter le contenu selon son niveau de connaissance dans le domaine

gestion des erreurs

La gestion des erreurs sur un site, ça veut dire prévenir les erreurs et renseigner de manière compréhensible lorsqu’il y a des erreurs.

Illust:Sur le site SNCF, 7.8 ko, 300x107

Sur le site SNCF

Il est spécifié qu’il est impossible pour une personne à mobilité réduite de faire une réservation, mais il est possible à l’utilisateur de faire les 2 choix

homogénéité et cohérence

c’est un élément que l’on a déjà abordé, il est important que vos pages aient une allure et une organisation similaire cela va faciliter l’apprentissage et la navigation

signifiance des codes et dénominations

Il est important que les noms des boutons et des menus fassent sens. Cela n’est pas toujours facile. On peut donc utiliser d’autre moyen comme les petites étiquettes qui apparaissent lorsque l’on survole avec la souris un élément.

Illust:Sur ce site, 7.5 ko, 250x143

Sur ce site

Lorsque l’on passe sa souris au dessus des éléments du menu, une petite étiquette apparait décrivant un peu plus le contenu

compatibilité

La compatibilité si elle ne peut jamais être complétement universelle, doit pourtant être fortement prise en compte. Le simple respect des standards web ne suffit pas à la garantir (déjà parce que explorer ne suit pas les standards). Il faut donc tester vos pages sur le plus grand nombre de navigateurs et le plus grand nombre de plate-formes que vous pourrez

Voilà, j’espère que tous ces petits conseils et ces illustrations vous auront servis à quelque chose et que vous pourrez appliquer certains de ces conseils dans vos sites pour qu’il deviennent plus ergonomiques.

Les anciennes réactions :

  • > L’ergonomie des sites web (partie 2)

    , par maya

    Très interessant, et très vrai, mais paske j’aime bien faire des remarques négatives : y’a des mots douteux, genre signifiance ou autres qui me semblent ... compliquer les choses ! En matière d’ergonomie, une bonne idée, c’est de toujours multiplier les liens, même, et surtout redondant, tu le dis, je sais ... mais tu le fait pas ! : exemple : on voit mal sur les images, donc un lien. Et un autre vers l’article #1 que j’ai pas lu, mais dont il semble que celui-ci soit la suite ... pas de lien == je vais pas voir et je ne comprend pas, voir pire, je ne lis pas du tout parce que je cherche en vai le premier article (ok j’abuse, mais c’est ça penser en débutant : une bonne methode : faire tester à ses grands-parents ;) )
    • > L’ergonomie des sites web (partie 2)

      , par ctrl_alt_suppr

      Il s’agit ni plus ni moins que des critères ergonomiques de Scapin et Bastien, qui sont LA référence absolue en matière de conception d’IHM.

      Ces critères ne sont pas le fruit du hasard, ils ont été décrit d’après les traveaux de psychologie cognitive, et en particulier la théorie de l’action de Donald Norman (qui travaillait chez Apple, soit dit en passant).

      • > L’ergonomie des sites web (partie 2)

        , par

        cela est tte à fait exacte je vais de ce pas le rajouté au début de l’article.

Recherche

A propos — Site collaboratif édité sous licence GNU FDL [pourquoi ?] — © 2004-08 — Mentions légalesContact
Syndication RSS — Powered by SPIPstockbanddonné


Contenu édité sous licence GNU FDL sans sections invariantes
© MacTouch 2004-08 — Powered by SPIP
http://www.mactouch.com/.