L'ergonomie
qu'est ce que c'est ?
A FAIRE
source
Architecture
Un site bien rangé
L'arborescence du site doit être étudiée et travaillée, les éléments similaires (produits, rubriques) doivent être rassemblés afin à la fois d'être logiques avec la pensée commune et de créer un raccord entre ces éléments. Concernant les textes courants ou informations importantes, celles-ci doivent aussi être bien hiérarchisées. Si votre site est un site marchand et qu'il y a une période de fêtes en cours, un onglet ou les produits liés à l'événement devront être mis en avant et non pas relayés au second niveau. La mise en avant des contenus les plus importants prédomine sur le reste. S'il vous est impossible d'ajouter un item dans le menu afin de mettre en avant une famille d'éléments ou si la structure du site ne permet par non plus de mettre en avant des produits et textes, servez-vous d'un lien transversal. Ce lien permettra de créer un accès direct aux produits ou à certains renseignements. Il est commun lorsque l'on conçoit un site d'avoir en tant qu'item premier Accueil (si le terme est souhaité dans l'arborescence) et en dernier Contact.
source
Organisation visuelle
Une page bien construite
L'information doit être claire et précise. Hiérarchisée la à l'aide des outils qui vous sont donnés comme la mise en avant par la graisse, la couleur, la typo d'un titre et d'un sous titre. Organiser les contenus de sorte a ce que le plus important soit mit au premier plan. Il s'agit du même travail que pour le Point 1 : Architecture, mais appliqué ici non plus à la navigation, mais au contenu du site en évitant le trop plein d’informations. Les textes, importants pour votre utilisateur et pour le référencement doivent être écris avec logique et être synthétisés. Votre utilisateur ne lira pas chacun des mots de votre texte, il les survolera. Il y a bien sûr des cas de figure particuliers : un article sur un Blog ou une page produit seront des pages consultées pour leurs informations. Une page présentation d'entreprise sera une page lue rapidement. Visuellement, votre site doit être hétérogène. Plus vous avez de couleurs, typos et images ou boutons, plus il y a d'informations à prendre en compte. Assurez-vous de vous servir et de n'utiliser que ceux qui vous sont réellement importants. Pour un site e-commerce avec beaucoup d'informations, l'utilisation d'un système de Tab peut par exemple permettre de montrer l'information principale dans un premier temps, puis de donner la possibilité à l'utilisatuer de visualiser les autres éléments ayant une importance moindre.
Cohérence
Navigation, le site capitalise sur l'apprentissage interne
Vous avez pensé et structuré votre site d'une certaine façon. Votre utilisateur va devoir s'adapter a votre structure, navigation afin de pouvoir utiliser votre site. Votre site doit avoir une cohérence graphique, visuelle et fonctionnelle sur l'ensemble de ses pages. Par exemple les intitulés de vos rubriques ne doivent pas changer d'une page à l'autre. En faisant cela, vous risquez de perdre l'internaute et de l'obliger à prendre en considération plusieurs autres informations dont il n'avait pas besoin Ici sur la page Traiteur on peut voir que le menu change, ce qui risque de perdre le visiteur ayant pris l'habitude de cliquer sur les liens. La navigation et présentation doit elle aussi rester cohérente. Si vos liens renvoyant à un glossaire sont de couleur rouge et soulignés sur certaines pages, ils devront l'être aussi sur l'ensemble du site. Et d'une manière général la navigation doit être perceptible de sorte que votre utilisateur puisse naviguer dans le site web et y trouver les informations souhaitées.
Le site n'existe plus
le site n'existe plus
Conventions
Capitalise l'apprentissage externe
La localisation des éléments :
Avant d'arriver sur votre site, votre internaute a déjà consulté des dizaines d'autres web, dans différentes thématiques. Il n'est donc pas novice en utilisation de sites internet.
Vous devez vous servir du « savoir commun » afin de ne pas embrouiller ou perturber le visiteur.
Sur un site de vente en ligne, votre panier sera quasi toujours en haut à droite de votre écran, tout comme l'accès à votre compte utilisateur.
Il y a bien sur des sites sur lesquels la navigation est différente, c'est un parti pris, mais le risque doit être mesuré afin de ne pas faire fuir le visiteur, et dans le cas d'un E commerce, empêcher votre client de faire de la vente.
Autre convention, les barres de recherche.
Elles sont en général en haut, dans le header du site.
Si vous déplacez ce module de recherche, vous risquez de perdre l'internaute, et de l obliger a chercher là ou il ne s y attend pas.
Le vocabulaire
Une page d'accueil est une page d'accueil. Dans votre site se nommera Accueil, Home ou le nom du site.
Évitez de vouloir donner un nom autre que ceux utilisés dans la majorité des cas.
Pour une page Panier, votre intitulé sera Panier, Mon panier, il en est de même pour la page Compte : Compte, Mon Compte
Les fantaisies peuvent être permises lorsque la personne est loggée sur votre site. Au lieu d'avoir Bonjour Edwige, vous pourriez avoir devant le Prénom : Salutation, Coucou, Salut
Les intitulés doivent être logique avec l'utilisation qu'on fait les visiteurs vis a vis des autres sites web.
Un rapport avec votre thème et un travail sur le champ lexical où les synonymes sont utilisés est le bienvenu
Informations
L'internaute y trouve ce qu'il est venu chercher
Présentez vous et votre activité le plus vite possible. Ne laissez pas l'internaute se demander où il est tombé. Un bon moyen pour faire cela est une baseline soit vers votre logotype, soit ailleurs sur votre site, mais toujours rapidement visible.
source
Compréhension
Homogénéité des mots et symboles
Cette règle reprend la règle 4 (Conventions — Capitalise l'apprentissage externe), mais d'une manière moins pointilleuse. Sur un site ou vous possédez un compte, dans votre administration, n'appeler pas Accueil la page Tableau de Bord. De plus si vous utilisez des icônes et pictos à la place d'un mot, assurez-vous que ceux-ci soient compréhensifs. La présence du texte avec le nom du de la rubrique sera toujours un plus, même si cela donnera plus d'informations à analyser à l'internaute.
source
Assistance
Le site aide et dirige l'internaute
La présence d'un fil d'Ariane va aussi aider votre utilisateur à se repérer dans votre site, lui indiquant les différentes étapes par lesquels il est passé pour accéder à votre contenu. Aidez-le en jouant avec les couleurs des liens cliquables et des couleurs des liens au survol. Un lien texte ne sera visible que s'il est mis en avant, soit dans un encart soit avec un style particulier. Autre type d'information, les actions. Sur un site d'annonces, vous postez votre objet, vous cliquez sur publier et rien ne se passe… Vous quittez la page et votre annonce n'est pas comptabilisée. Si vous aviez vu une petite roue tournante ou de chargement, là, vous auriez deviné que l action était en cours. Les formulaires de contact doivent aussi avertir la personne lorsque le message a été envoyé, afin de lui permettre de savoir que ce qu'elle a fait a été pris en compte. Un slideshow, c'est une simple galerie d'images. Cette galerie peut être automatique, uniquement fonctionnelle suite à une action ou les deux. Pour déterminer cette action il existe une multitude de façons de faire : Présence de flèches, de boutons, de numéros ou de formes graphiques. Ces différents éléments permettent au visiteur de comprendre qu'en effectuant une action, il changera de photographie. Attention néanmoins à ne pas mettre trop d'éléments « actions » les uns a coté des autres, au risque de perdre l'utilisateur. Aidez aussi l'utilisateur a comprendre ce qui est cliquable ou juste placé de façon décorative. Dans le cas d'un tunnel de commande pour un e-commerce (étape par lesquelles passe l'individu pour effectuer sa commande), il est souvent indiqué à l'aide de chiffres les différents points validés et à valider. Mettre des éléments avec des couleurs différentes et avec un fort contraste aidera la personne a se repérer. Se servir de bouton d'action (Call to Action) comme revenir à l'étape précédente ou corriger lui donnera aussi des indications sur ce qu'il lui est possible de faire. Les boutons doivent aussi être placés de manière logique. Évitez de mettre les boutons trop prêts les uns des autres si ces derniers ont la même couleur. Et s'ils sont en couleur, privilégier des choses logiques : Un bouton rouge pour annuler, un bouton vert pour valider.
Gestion des erreurs
Prévoir que l'internaute se trompe
Sur des sites à fort contenu, des pages d'Aide ou encore FAQ sont disponibles pour assister la personne dans ses recherches. Il arrive parfois qu'un lien soit mort, ou qu'une page n'existe plus. C'est alors qu'intervient la page 404 (page d'erreur). Sur un petit site, il est rare d'avoir des erreurs, mais sur un site avec des milliers de pages ce n'est pas simple. Une page 404 désignée et la présence d'un texte et des boutons de retour au site, ou de recherche aideront votre utilisateur a retrouver la bonne direction. Pour des formulaires de contact, permettez à l'internaute de savoir ce qu'il doit ou non remplir (partie obligatoire) et notifiez-lui ses erreurs s'il en commet. Les astérisques rouges sont connus par tous comme des champs obligatoires. Si le mail de la personne est invalide, n'hésitez pas le lui dire à l'aide d'une fenêtre d'information.
source
Rapidité
Évitez et limiter la de perte de temps
Votre utilisateur est venu sur votre site spécialisé dans les épices pour préparation de plat et vous vendez aussi sur votre site des spatules… Ne les mettez pas en avant, car elles sont « secondaire ». Donnez lui l information la plus pertinente correspondant à sa venue sur votre site. D'autres critères de rapidité comme la vitesse de chargement et d'affichage du site sont aussi des facteurs qui vous permettront de garder votre visiteur sur votre site. Plus le chargement est long, plus vous avez de chance que votre utilisateur quitte votre site. […] près de 60 % des internautes s'attendent à ce qu'un site web se charge sur leur téléphone mobile en trois secondes maximum, et 74 % quittent une page après 5 secondes d'attente […] Source : Zdnet.com Afin d'assister et de faciliter l'internaute sur votre site, vous pouvez aussi l'aider en paramétrant certains champs avec des critères spéciaux. Par exemple, lorsqu'un utilisateur va sur votre site depuis son smartphone et que vous lui demandez d'indiquer son numéro de téléphone, l'utilisation d'une balise spéciale lui permettra d'afficher uniquement les chiffres, ce qui sera plus simple et rapide pour lui.
Source
Liberté
L'internaute commande
Comme énoncer dans le Point 9 Rapidité — Pas de perte de temps, si dans un tunnel de commande votre internaute souhaite revenir en arrière pour modifier ou corriger des données, vous devez lui permettre d'effectuer l'action. Autre exemple, pour un site d'annonce, le déposeur devra pouvoir modifier ou supprimer son annonce, ses renseignements. Il ne doit pas uniquement la déposer, il doit en etre maitre. Les pop up sur les sites sont intrusives. Personne ne s'attend à les voir s'afficher. Quelquefois il faut cliquer sur la croix pour la fermer, d'autres fois n'importe ou. Sauf qu'en cliquant deux fois n'importe où, deux actions se produisent : La première voulue : La pop up se ferme. La seconde non voulu : Vous avez cliqué sur un lien. Dans ce cas de figure, vous avez l obligé votre visiteur a effectuer une action qu'il ne souhaitait à la base pas faire. Autre liberté, celle de pouvoir naviguer sur internet sans se faire tracker… La CNIL oblige depuis quelques mois à placer sur les sites intégrant des cookies dans les navigateurs des internautes un encart les informant de cela. Ainsi, l'internaute peut choisir ou non d'autoriser les cookies.
source
Accessibilité
Accès pour tous
Un site doit être accessible, aussi bien visuellement que techniquement… Vous avez conçu graphiquement et codé votre site, vous en êtes satisfait. C'est bien, mais l'avez-vous testé ? Jadis, il fallait tester son site à la fois sur un MAC et sur un PC. Pourquoi? Car le rendu visuel pouvait etre différent entre les deux OS. Cette vérification évitait bien des surprises. Depuis quelques années, il n'y a plus grands problèmes, car toutes les propriétés et valeurs fonctionnement de la même façon. Et dans le pire des cas l'utilisation de hacks reste possible. Pensez aussi aux différentes tailles d'écran, que ce soit pour un portable ou pour un ordinateur fixe. Les écrans des ordinateurs fixes sont de taille variable, tout comme pour les smartphones. Et il ne faut pas se référer uniquement à son matériel mais penser tout matériel étant donné que les tailles d'écran ne sont pas normalisées. Ce n'est pas parce que vous possédez un ordi 21.5, une tablette 7 pouces et un smartphone dernière génération que tout le monde a la même chose. De plus assurez-vous bien qu'il n'y ait ni page d'erreur ni liens cassés sur votre site. Si vous arrivez à créer des textes sans fautes d'orthographe, vous êtes un chef. Pour de petits sites il ne s'agit pas de la demande initiale mais si l'on veut faire les choses bien il faut aussi penser a ce que le site soit accessible pour les personnes vivants avec un handicaps, qu'il soit visuel ou sonore. Par visuel on peut retrouver les malvoyants et les daltoniens. Meme si le jeu colorimétrique ne remettra pas en cause l'information, il faut vérifier que les jeux de tons n'interfèrent pas avec la compréhension de l'information.
source
Satisfaction
Satisfaction et plus-value
Votre visiteur a réussi à trouver le renseignement qu'il cherchait, votre mission est accomplie. Elle le sera encore plus si vous lui laissez une bonne image. Que ce soit grâce à de l'humour, une touche personnelle ou avec quelque chose le surprenant. Les notions d'expérience utilisateur et interface utilisateur permettra à votre visiteur d'être satisfait, car vous lui aurez proposé quelque chose de neuf, de frais comparé à un site lambda. Si un utilisateur vous pose une question, n'hésitez pas à lui répondre rapidement et simplement. Le côté humain est extrêmement important. Grâce à cela l'utilisateur ne se sent pas noyé dans la masse, mais considéré comme une personne à part entière.
Re Pour aller plus loin
re de la lecture et de la vidéo
Même chose que pour le chapitre précédent… Re Parce que l'écran c'est cool, que tout y est accessible et que les sources sont variées… N'oublions pas le papier, les livres qui sont un outil pratiques car toujours a portée de main, on peut les corner, les stabiloter, y placer moultes marques pages… Re Les livres d'Amélie Boucher disponibles chez entre autre la fabuleuse maison d'édition Eyrolles Re La collection de livres A book Apart disponibles chez Eyrolles ou sur le site d'A Book Apart Re L'un des livres sur le HTML et CSS rédigé par Francis Draillard, toujours aux éditions Eyrolles
source