Ergonomie et Navigabilité

Voici une première approche Ergonomique. Cette approche ne présume pas des éléments graphiques mais de l'agencement de l'interface. Les schémas proposés sont assez simplistes.

Tout d'abord, afin que tout le monde comprenne bien l'objectif de l'Ergonomie, qui souvent est complétée d'une Architecture de l'Information, je vous livre une base de travail.

Elle est issue des recherches de Scarpin et Bastien, des ergonomes reconnus (je parlerais presque d'intégristes de l'ergonomie )

Ils ont mis en évidence qu'une interface quelque soit l'objet (site, logiciel,jeux...) devait répondre à 8 critères principaux :

LES CRITERES ERGONOMIQUES

1. Guidage
1.1. Incitation
1.2. Groupement / Distinction entre Items
1.2.1. Groupement / Distinction par la localisation
1.2.2. Groupement / Distinction par le format
1.3. Feedback Immédiat
1.4. Lisibilité

2. Charge de Travail
2.1. Brièveté
2.1.1. Concision
2.1.2. Actions Minimales
2.2. Densité Informationnelle

3. Contrôle Explicite
3.1. Actions Explicites
3.2. Contrôle Utilisateur

4. Adaptabilité
4.1. Flexibilité
4.2. Prise en compte de l’expérience de l’utilisateur

5. Gestion des Erreurs
5.1. Protection contre les Erreurs
5.2. Qualité des Messages d’Erreurs
5.3. Correction des Erreurs

6. Homogénéité / Cohérence

7. Signifiance des Codes et Dénominations

8. Compatibilité

Plus en détail, cela donne

Guidage


La dimension de guidage comprend 4 sous-critères. D'un point de vue général, il s'agit d'évaluer la façon dont le système prend en charge l'utilisateur.

L'utilisateur doit comprendre clairement ce qu'il peut faire et comment il peut le faire. Le système doit donc le prendre en main pour le conduire efficacement.

Ceci peut être gênant lorsque la population à laquelle on s'adresse est experte avec l'outil informatique ou avec le système. En effet, certains des procédés permettant d'optimiser le guidage vont de pair avec une augmentation de la vitesse d'exécution des actions.

On ne peut cependant pas remettre en cause l'objectif du guidage. Il s'agit seulement de réfléchir en fonction de la population cible. Si elle est experte, on devra veiller à ne pas entraver ses actions et à lui permettre de les exécuter rapidement.

Incitation


Le critère d'incitation permet de juger des moyens mis en œuvre pour faire connaître à l'utilisateur le contexte dans lequel il se trouve et les actions qu'il peut effectuer.

Selon le contexte, on doit faire savoir à l'utilisateur quelles alternatives s'offrent à lui. Dans le domaine du web, il s'agit par exemple d'indiquer à l'utilisateur où il se trouve dans le site web et quels éléments sont cliquables. Les éléments propres à la page sont aussi des indicateurs intéressants pour optimiser le guidage. On s'attachera par exemple à concevoir des titres de page clairs et adaptés au contenu.

Nous n'avons pas pour objectif de recenser tous les exemples possibles d'incitation dans cette partie. Cependant, on peut remarquer que les problématiques d'architecture de l'information sont très liées à ce critère.

Groupement / Distinction entre Items


Il est fondamental de regrouper les éléments qui vont ensemble et de séparer ceux qui ne vont pas ensemble.

Avant de penser à la manière de le faire, il faut réfléchir aux groupes eux-mêmes. On doit principalement se demander si les groupements effectués sont pertinents. Là encore, on revient sur des problèmes d'architecture de l'information.

Lorsque les groupes sont bien définis, on peut réfléchir à la manière de les figurer. Deux procédés sont classiquement employés :

Groupement / Distinction par la localisation

Distinguer des éléments par la localisation, c'est les éloigner ou les séparer d'un point de vue géographique pour signifier leur différence.

Groupement / Distinction par le format

Distinguer des éléments par le format, c'est attribuer des formats différents aux éléments qui sont différents.
Par exemple, dans le menu d'une application, on peut griser les options qui sont inaccessibles pour les différencier des options accessibles.
C'est aussi cette distinction par le format qui est souvent utilisée pour confirmer à l'utilisateur d'un site web la rubrique dans laquelle il se trouve.

Feedback Immédiat


Un troisième critère participant au guidage est le feedback immédiat. Il s'agit d'informer l'utilisateur sur l'efficacité de ses actions.

Le système doit réagir à chacune des actions de l'utilisateur. Par exemple, l'action d'enregistrer un document doit avoir un correspondant visuel permettant à l'utilisateur d'être certain que le système enregistre le document.

L'idée est surtout de penser à fournir ce feedback. Lorsqu'il est présent, on doit juger de sa pertinence et de sa compréhensibilité.

Lisibilité


La lisibilité est le dernier critère qui permette d'optimiser le guidage. Elle correspond au fait que les informations présentées à l'utilisateur doivent être compréhensibles. Elles doivent donc être adaptées à l'utilisateur.

Par exemple, un langage technique pourra être employé dans une application métier mais pas dans une application grand public.

Pour être compréhensibles, les informations doivent aussi être adaptées au média. La lecture sur écran est une activité différente de la lecture papier. Elle nécessite donc des contenus formatés sur-mesure, que ce soit dans le domaine du web ou du logiciel.
Enfin, pour être lisibles, les informations doivent être facilement perçues. On doit optimiser la taille des polices, leur format (l'italique est par exemple moins lisible qu'un format classique), l'espacement entre les lignes, entre les lettres, les contrastes fond / caractères, etc.

Charge de Travail


L'intervention d'un ergonome dans un projet informatique doit faciliter l'activité de l'utilisateur. On doit lui fournir des moyens d'atteindre ses objectifs, de les atteindre rapidement et le plus facilement possible.

Dans l'idéal, on doit supporter la tâche de l'utilisateur de bout en bout. La charge de travail doit être reportée sur le système. La perception et la mémorisation des informations doivent être facilitées. Plusieurs critères permettent d'alléger la charge de travail de l'utilisateur :

Brièveté

La notion de brièveté réfère aux fait que le système et son interface doivent être conçus pour limiter le travail de l'utilisateur, en perception et mémorisation comme en action. Deux critères participent de la brièveté :


Concision
La concision concerne les éléments de l'interface pris un par un. Il s'agit de limiter pour chaque paquet d'information l'effort à fournir par l'utilisateur. On doit donc présenter l'information de façon claire et adaptée à ce que connaît l'utilisateur dans le monde réel.

Les aspects perceptifs sont très importants pour alléger le travail de l'utilisateur. On doit optimiser l'interface pour que la perception soit facilitée. De plus, on doit faciliter le traitement cognitif des informations. La taille des groupes comme la taille des éléments individuels (mots, boutons, liens…) doivent donc être adaptées.


Exemple : taille du libellé d'un lien :

[url]Pour nous contacter, vous pouvez cliquer sur ce lien et alors on vous répondra très vite[/url]

versus

[url]contactez-nous[/url]




Actions Minimales
Le critère d'actions minimales concerne la réalisation d'une procédure, d'une suite d'actions. Pour satisfaire à ce critère, on doit éviter de solliciter une action inutile et fournir des raccourcis. Le nombre d'étapes d'une procédure doit être limité pour que l'utilisateur puisse accomplir sa tâche le plus rapidement possible.

Densité Informationnelle
Limiter la charge de travail, c'est aussi se poser la question de la pertinence des contenus présentés à l'utilisateur. On doit limiter le nombre d'informations présentées en même temps. Si certaines sont inutiles, il est nécessaire de les supprimer ou de les transférer à un autre endroit.

On doit raisonner de la même façon lorsque l'on propose un choix à l'utilisateur. On ne peut choisir efficacement que parmi un nombre d'informations restreint.

Contrôle Explicite

Actions Explicites


Lorsqu'un utilisateur est amené à interagir avec un système informatique, il s'attend implicitement à ce que le système lui obéisse. On doit donc éviter des actions de la part du système lorsque l'utilisateur n'a rien demandé.

Puisque dans la plupart des interfaces informatiques, l'utilisateur doit avoir le dessus sur le système, il faut que toute action du système corresponde à une demande explicite de l'utilisateur.

Concernant les applications automatisées (par exemple la mise à jour d'un anti-virus), elles sont en général automatisées car l'utilisateur l'a demandé à un moment ou à un autre. Elles correspondent donc bien à une action explicite, conduisant par la suite à l'automatisation d'un traitement.

Note. On doit mettre à part de cette réflexion les domaines à risques (nucléaire, chimique…), où le système peut être amené à réagir à certains indices physiques et à effectuer certaines actions de manière spontanée. Là encore, on reste dans le cadre d'une action explicite: l'humain demande à la machine de le protéger ou de se protéger elle-même de façon automatique, puisque ses capacités de détection de signal, de traitement de l'information ou de vitesse de réaction sont plus importantes que les notres.
Les actions du système proviennent donc d'une demande explicite de l'utilisateur.

Contrôle Utilisateur

Dans le même ordre d'idées, l'utilisateur doit être persuadé qu'il a le contrôle sur le système. Il doit avoir le contrôle du fonctionnement du système, c'est à dire pouvoir annuler un traitement informatique qu'il aurait demandé ou revenir à une étape antérieure du processus.

Adaptabilité

Le critère d'adaptabilité comprend deux sous-critères : flexibilité et prise en compte de l'expérience utilisateur.

Flexibilité

La flexibilité d'un système concerne sa capacité à être adapté en fonction des besoins de l'utilisateur. Ce dernier doit pouvoir choisir de "personnaliser" l'interface selon sa façon de travailler, les commandes qu'il utilise fréquemment, etc. On doit donc prévoir plusieurs façons d'obtenir le même résultat.

Prise en compte de l’expérience de l’utilisateur


Un système qui prend en compte l'expérience de l'utilisateur est susceptible de fournir au novice une aide et à l'expert des raccourcis.
Le novice doit être guidé pas à pas dans sa découverte du système alors que l'expert qui est déjà efficace a besoin d'aller plus vite.

Gestion des Erreurs


La gestion des erreurs est une question fondamentale en informatique. Le développement de l'informatique grand public laisse de moins en moins de place pour les systèmes rigides.

Puisqu'il est dans la nature de l'être humain de se tromper, on doit prévoir que l'utilisateur fera des erreurs. On doit surtout concevoir des moyens de pallier ce problème. 3 composantes sont à prendre en compte. On doit pouvoir :
- protéger l'utilisateur contre d'éventuelles erreurs
- l'avertir lorsqu'il a commis une erreur que l'on peut détecter
- corriger ou l'aider à corriger ses erreurs :

Protection contre les Erreurs


La protection contre les erreurs doit passer par une détection de la part du système. On peut prévenir des erreurs minimes (exemple la saisie d'une lettre dans un champ de numéro de téléphone) ou plus importantes (exemple la suppression d'un document). Dans tous les cas, le système doit avoir été conçu pour empêcher l'utilisateur de faire des erreurs.

Lorsque l'utilisateur est sur le point d'accomplir une action irréversible, le système doit demander confirmation. Dans ce cas, le choix par défaut devrait être celui qui annule l'action demandée. On évite ainsi que l'utilisateur détruise des données par mégarde.
Cette recommandation entre toutefois en conflit avec les standards utilisés dans certains systèmes d'exploitation et applications. Il s'agit donc de choisir en fonction du contexte le choix par défaut proposé par le système.

Qualité des Messages d’Erreurs


Un problème fréquemment rencontré dans le domaine informatique est que les messages d'erreurs sont conçus par des techniciens. Ces messages sont donc souvent exprimés dans un langage technique, qui n'a aucun sens pour un utilisateur grand public.

De plus, et de façon conséquente, les messages d'erreur n'ont souvent aucune utilité pour l'utilisateur. Ils devraient être plus contextuels, informer l'utilisateur sur la raison de l'erreur, sur sa nature et sur les façons de la corriger si elles existent.

Correction des erreurs


Un système optimisé en termes de correction des erreurs est capable de fournir à l'utilisateur des moyens de faciliter la tâche de correction. Il doit donc guider l'utilisateur concernant les étapes à suivre afin de rectifier l'erreur.

Un pré requis à cette possibilité est l'identification précise de l'erreur. Si le système a clairement identifié l'erreur, il devrait pouvoir la mettre en valeur et proposer de modifier précisément ce qui est erroné.

Homogénéité / Cohérence


Le critère d'homogénéité est un critère qui recouvre la totalité de l'interface et du système sous-jacent. Juger de l'homogénéité d'une interface c'est donc s'intéresser à tous les aspects de cette interface, du global au particulier.

Il faut veiller à ce que les choix que l'on fera pour les éléments de l'interface soient respectés dans la totalité de l'application. Cet aspect touche à la fois le visuel des éléments, leur appellation, les réactions du système, les procédures…

Le revers de ce critère est que les éléments qui ne se ressemblent pas doivent être différenciés visuellement et dans leur terminologie. L'utilisateur ne doit pas confondre deux éléments parce qu'ils se ressemblent. La recherche de la cohérence ne doit donc pas faire oublier que l'hétérogénéité est souvent pertinente et qu'on doit aussi la travailler.

Signifiance des Codes et Dénominations


Les informations dans une interface informatique sont transmises de plusieurs façons. Il ne suffit pas de transmettre à l'utilisateur un message, encore faut-il que ce message soit compréhensible et utile. Pour cela, on doit faire attention au style employé (éviter les termes techniques), à la culture de l'utilisateur et à la pertinence des informations du point de vue de l'utilisateur.

Tous les éléments que l'utilisateur doit interpréter doivent être explicites. L'utilisateur doit être à même de savoir ce qui se cache derrière un bouton, une icône, le titre d'un rubrique ou l'intitulé d'un lien. On doit donc travailler à la fois sur le texte et sur les représentations visuelles d'un concept.

La réflexion sur les codes et dénominations devra prendre en compte les standards existants dans des interfaces comparables, afin de capitaliser sur les connaissances préalables des utilisateurs.
Pour les applications professionnelles ou spécialisées, il sera essentiel de s'imprégner du vocabulaire des personnes afin de concevoir une interface signifiante pour eux.

Il est important de faire participer les utilisateurs pour optimiser ce critère. Encore une fois, ce sont les plus à mêmes de révéler des défauts des codes et dénominations et d'en proposer de plus appropriés.

Compatibilité

Le critère de compatibilité est très large. Il comprend toutes les interactions utilisateur / système. Ces interactions doivent être conçues pour que le système s'adapte au mieux aux caractéristiques de l'utilisateur.

Ces caractéristiques peuvent être intrinsèques (l'utilisateur est un enfant, il est déficient visuel, il est expert avec l'outil informatique…) ou liées à la tâche de l'utilisateur (l'utilisateur doit aller le plus vite possible, ne pas faire d'erreurs, obtenir telle information à tel moment…).

Le système doit aussi être compatible avec les différentes technologies. Dans le domaine du web, cet aspect prend une importance particulière. En effet, l'utilisateur final ne dispose pas du même environnement technologique que le concepteur.
Ce dernier doit donc vérifier que le site qu'il développe est compatible avec tous les navigateurs et leurs différentes versions, qu'il s'affiche correctement dans toutes les résolutions, avec les vitesses de téléchargement les plus faibles… Pour la plupart des sites, on ne doit pas exiger de l'utilisateur qu'il dispose d'un plug-in particulier. On peut faire exception pour certains sites dont le contenu justifie la nécessité de ce plug-in. Cependant, on doit penser en amont de la conception à ce type de problème et essayer d'adapter les choix de conception pour ne pas avoir besoin de plug-in spécifiques.

Tout ceci étant dit, nous pouvons donc entrer dans le vif du sujet.

L'interface doit donc etre claire, simple, répondre au fait que l'utilisateur peut passer beaucoup de temps devant.

Pour cette dernière contrainte, il faudra donc tenir compte de cela dans le choix des couleurs. Ne pas être trop sombre, ni trop brillant, afin d'éviter ou de limiter la fatigue visuelle. Les tons "pastels" répondent bien à ce besoin.

Dans l'agencement, voici comment je vois l'interface.

Le zonage (voir lexique pour définition)

Zone 1

Il s'agit de la zone d'entête. Elle représente l'identité du site, donc naturellement on y retrouvera notre logo, notre devise et quelques éléments de navigation du "joueur" et non de son personnage (Aide, Signaler un abus, modifier mon compte,...)

Zone 2

Il s'agit du pied de site. Il fait parti du plateau de jeu et contient ce que nous apellerons la mémoire du personnage (argent en poche, activité en cours, ...)

Les zones 3 et 4 sont particulières, elles ont la possibilité de se rabbatre sur chaque bord afin d'agrandir la zone de jeu



Zone 3
Il s'agit du menu principal du jeu, il contient toutes les actions/élements qui seront communs quelque soit la zone de jeu. On y retrouvera par exemple La fiche personnage, les options de déplacement, ...

Zone 4
Si vous avez bien lu mon petit topo sur l'ergonomie, vous avez compris qu'il faut séparer certaines actions pour clarifier.

La zone 4 est le menu d'action "environnemental". Il s'applique à la partie du jeu ou nous sommes et propose les actions possibles dans cette zone. Ex : Crer une institution, faire évoluer l'institution...

Les zones 5 et 6 sont le coeur du jeu. Ces zones peuvent être amenées à ne former qu'une (plateau de baitaille par exemple)

Zone 5

Elle contiendra de l'information en fonction du contexte. A définir.

Zone 6

C'est notre fameux forum IG....

Entrons un peu plus en détail dans la zone 6



La zone est découpée en 3 partie

La zone de titre contient le nom de l'institution ou se déroule le RP

La zone de lecture contient les post réalisés. Elle sera composée tel quel :



Découpée elle même en 2 zones, elle comprend une zone ID qui représente l'identité du posteur. Cela comprendra un avatar ainsi que son nom en clair et son rang.

La zone de saisie permet la saisie des messages.

je voyais un peu les choses de la même façon (dsl je voulais poster ce que j'imaginais mais j'ai eu un gros plantage sur mon serveur, j'ai du tout réinstaller) : des parties sur les cotés rabatables. En plus cela donne un aspect assez interactif.

La difficultés que je voyais néanmoins c'est la place. Je pense qu'on peut se baser sur une résolution de 1024 minimum mais avec des parties qui suivent la bordures à droite et en bas, si la fenêtre est trop petite, on ne verra plus rien du tout.
=> enfin la question c'est plutôt : est-ce qu'on donne une taille fixe au site ou une taille étirable ? Est-ce que les rabats ne vont pas gêner ?


Pour le forum, je pense que c'est beaucoup trop petit comme ça. Je suis plus d'avis de regrouper la partie 5 et 6 pour en faire soit le forum, soit la gestion IG et utiliser un des rabats pour afficher les informations sur le forum (ou sur le bâtiment, selon sur quelle page on est) et de "switcher".

Pour la partie saisie, je pense qu'il faut que ce soit sur une autre page.


ps: par "autre page", je veux dire aérer l'interface pour mettre moins d'infos en une seule fois. On est d'accord qu'on reste dans le même "univers".



Autre chose qui est liée à la conception de l'interface : une interface comme celle-ci sera très gourmande en ressources (le forum est la majorité des consultations et en ajoutant l'interface autour, on gonfle un peu plus le volume d'informations "dynamiques"). Je crois qu'on pourrait s'aider de fonctions dites "AJAX" pour rendre les choses plus visible (alerte de nouveau message par exemple) tout en ne rafraichissent que les parties de l'interface qui en ont besoin.
=> Puis ajax, c'est à la mode. Pour la com' on fera plus facilement parler du jeu.

(par contre je suis pas du tout pour l'utilisation de frame (c'est trop gourmant en ressources puisqu'il faut vérifier les droits pour chaque page appelée).


édit: sinon très bien le texte que tu as mis plus, très instructif. Puis belles présentation aussi

D'accord pour les frames et j'avais également l'idée d'utiliser en masse ajax et CSS pour fluidifier.

Par contre je suis pas pour du multi fenêtres. Ca doit ressembler à un forum et être simple. Donc les fonctions forum doivent être concentrées au même endroit.

Le fait d'avoir plusieurs fenêtres permets de faire plus de boutons pour les fonctionnalités du forum. On part sur un projet de forum totalement conçu pour le RP donc je pense qu'on aura besoin d'un peu d'espace pour présenter les fonctionnalités (inhabituelles) du forum.

Il suffit de voir ici la boite de "réponse rapide", elle est très basique.

Oui mais elle ne répond pas à des règles d'ergonomie.