Webmaster freelance » Charte graphique de site web » L’ergonomie d’un site internet

L’ergonomie d’un site internet

    ergonomie

    La définition de l’ergonomie est de tout faire pour faciliter l’expérience utilisateur du visiteur (UX Design). Le visiteur doit trouver ce qu’il cherche rapidement dans une interface graphique adaptée et attrayante. Pour cela, il faut déterminer les attentes et besoins de vos prospects dans un document qui rappelle les objectifs d’un site internet et traduire ces intentions en Design.

    La lecture d’un site web ne répond pas aux même exigence que sur un support papier.

    Les internautes ne prennent pas le temps de lire l’ensemble de la page web. En fait, ils survolent brièvement les contenus.

    Il est donc nécessaire de proposer un site web  ergonomique où l’information est visible et lisible.

     

    modèle charte graphique

    A quoi sert l’ergonomie

    L’ergonomie d’un site internet sert à capter l’internaute, à prolonger son utilisation, à fidéliser, à rassurer les clients actuels, mais aussi à vendre directement ou indirectement.

    Les objectifs de l’ergonomie

    • Satisfaction donc fidélisation des « clients »
    • Amélioration de l’image de marque
    • Augmentation des ventes et taux de conversion
    • Amélioration des performances du site
    • Augmentation du trafic et de sa qualité

    Simplicité, facilité de navigation et accessibilité constitue la priorité pour votre projet web.

    Le site web doit être efficace

    L’internaute devrait effectuer ses actions rapidement et de manière intuitive. Il faudra donc plus particulièrement soigner  la page d’accueil.

    L’internaute doit pouvoir effectuer ses actions rapidement et de manière intuitive avec le moins d’erreurs possible.

    L’internaute doit réussir à naviguer de manière simple. La navigation, la mise en avant (grâce à des call to action) et la hiérarchisation du contenu sont par conséquent les trois points les plus important à prendre en compte pour réaliser un site web avec une bonne ergonomie.

    Y compris pour vos pages stratégiques, il faut pouvoir guider le visiteur explicitement et implicitement par le lien hypertexte ou par des visuels vers des pages dédiés où l’ensemble de votre offre est détaillée de façon plus complète.

    On distinguera donc la page d’accueil et vos pages stratégiques de l’ensemble de vos pages intérieures.

    Les principaux facteurs de l’ergonomie

    • Information : le site apporte un contenu susceptible d’intéresser l’internaute.
    • Compréhension : titrage, mots, pictos et symboles sont clairs et explicites.
    • Rapidité : la vitesse du site est un atout pour le confort de la navigation.
    • Liberté :  selon son intérêt, l’internaute choisit quel chemin il souhaite prendre.
    • Accessibilité : la présence de liens partout et pour tous pour permettre d’aller plus loin.
    • Gestion des erreurs : le site soigne ses messages d’avertissement si l’internaute se trompe.
    • Architecture : l’arborescence est claire et bien rangée.
    • Organisation visuelle : la page est partagée en zones claires et identifiables.
    • Cohérence : le site reprend des zones au fil des différentes mises en page.
    • Conventions : le site reprend les standards du Web et dispose de zones récurrentes.
    • Assistance : le site aide et dirige l’internaute.

    Rapidité et responsivité

    La base de l’ergonomie consiste à offrir une expérience utilisateur maximale.

    Il est donc nécessaire de vérifier si votre site est rapide à télécharger ( google insight pour mesurer la vitesse de votre site )

    L’ergonomie dépend aussi de la capacité d’adaptation de votre site internet aux formats mobiles et tablettes. La responsivité  est d’ une importance vitale.

    Parce que l’expérience de l’utilisateur en dépend, il faut vérifier si votre site est responsive pour faciliter la navigation sur les smartphones et les mobile devices.

    Les conventions du web dans votre secteur d’activité :

    L’internaute a ses habitudes depuis le temps qu’il navigue sur des sites internet.  Il n’est dons pas nécessaire de réinventer la roue en proposant une ergonomie trop décalée.

    Les conventions concernent

    • L’emplacement des éléments (zoning)
    • L’interaction ( lien hypertexte,  navigation)
    • La présentation (la lisibilité)

    Les zones stratégiques dans votre site internet

    Le zoning

    L’ergonomie consiste aussi à organiser vos pages internet en blocs ou zones . Chaque zone devra être défini dans un schéma au cours du cahier des charges.

    Certaines zones devront rester toujours au même endroits pour faciliter la navigation en respectant les codes d’internet, d’autres plus secondaires pourront montrer différents contenus en fonction des contenus proposées afin d’orienter l’internaute vers d’autres pages de votre arborescence.

    On pourra aussi ajouter une double navigation ou des encarts connexes qui renvoient vers d’autres contenus. Par exemple, des liens entre les catégories soeurs pourront être ajoutés dans la side-bar afin de multiplier les points d’entrée et améliorer l’ergonomie et/ou encore dans le texte grâce à un maillage intelligent.

    On peut parler de zone comprenant des menus secondaires de navigations, des zones affichant les derniers articles, des zones affichant les catégories, les zones de publicité pour promouvoir un service/ un produit, des zones suggérant d’autres sujets qui peuvent intéresser l’internaute, des thèmes connexes par exemple.

    Le rôle central du lien hypertexte

    Tous les sites internet reposent sur le lien hypertexte, c’est pourquoi il occupe une place centrale qui doit faciliter la navigation en accélérant l’accès à l’information.

    L’ergonomie est liée à l’interactivité, qui repose sur le lien hypertexte, et est destinée à améliorer l’expérience utilisateur en permettant à l’internaute de décider de la suite de sa visite.

    L’information devrait donc être hiérarchisée du plus simple au plus complexe. En découpent l’information, vous permettez à l’utilisateur de choisir d’en savoir plus et de ne parcourir que ce qui l’intéresse.

    C’est la capacité à répondre efficacement aux attentes des utilisateurs tout en fournissant un confort de navigation. Le site propose, l’internaute décide de façon à mettre au premier plan l’expérience utilisateur.

    L’interactivité :

    L’interactivité permet d’offrir des scénarios diversifiés qui préservent la liberté de l’internaute.

    Pour permettre à l’internaute de choisir ce qui l’intéresse, vous devez mettre l’expérience utilisateur au centre de votre démarche de concepteur en balisant la visite:

    • en annonçant votre message par des accroches marketing
    • en adoptant un code visuel avec des call to action
    • en ajoutant des messages plus neutres du genre “lire la suite” , “en savoir plus”

    Cela permet de structurer l’information et de rajouter de l’interaction avec l’internaute.

    Hiérarchiser l’information

    C’est un découpage intelligent de l’information destiné au confort de l’utilisateur. Il est primordial de rendre votre site accessible à tous et facile à utiliser.

    Mettez-vous toujours à la place de vos utilisateurs lorsque vous réfléchissez à la conception de votre site web et à arborescence.

    En ce sens, les utilisateurs doivent facilement trouver l’information qu’ils cherchent et utiliser vos liens sans rencontrer de difficultés.

    Du plus simple au plus complexe

    Le principe du lien hypertexte permet de hiérarchiser votre contenu du plus simple au plus complexe.

    On propose à l’internaute de parcourir les liens hypertextes où l’utilisateur trouvera le contenu adéquat grâce à un découpage pertinent de l’information.

    En résumant vos paragraphes sur la page d’accueil ou sur vos page stratégiques, vous pouvez inclure des liens entre les pages pour permettre d’aller plus loin dans la recherche d’information.

    Des accroches marketing

    On préférera un titre et un petit paragraphe suivi d’un lien  vers une page qui développe votre accroche afin de rallonger le temps de visite sur votre site internet.

    Faites des accroches marketing  avec un court texte de présentation qui renvoie vers vos produits, vos articles de blog, ou un autre contenu. Puis choisissez un intitulé de lien efficace pour inciter les internautes à le suivre et visiter une page qui développe ensuite tout ce que vous avez envie de dire dans un long paragraphe.

    Il faut parfois fournir une accroche avec un lien plutôt qu’un long texte afin de laisser à vos internautes la liberté de naviguer vers ce qui l’intéresse en premier lieu.

    Cela augmente le temps de visite de l’internaute tout en le rendant plus libre. Cela participe au confort d’un site web.

    L’internaute peut ainsi choisir son chemin, ce qui l’intéresse. C’est aussi pourquoi il vaut mieux permettre plusieurs points d’entrée dans votre site à votre contenu.

    Une arborescence bien rangée

    Pour que l’utilisateur se sente à l’aise sur votre site internet, il faut qu’il puisse trouver facilement ce qu’il cherche. Les informations doivent donc être bien classées pour qu’il s’y retrouve.

    Votre arborescence doit être lisible et reprise dans le breadcrumb, le fil d’Arianne. Ainsi vos pages devront être rangées en catégories, sous catégories et sous-sous catégories clairement identifiables.

    Par exemple “voiture”>”hybride”>”rechargeable”

    “Hybride” aura d’autres page soeur comme la page “voiture électrique” comme par exemple “voiture”>”électrique”

    “Rechargeable” aura aussi une page soeur “autonome” comme par exemple “voiture”>”hybride”>”autonome”

    La manière dont vous donner accès à ces catégories, sous-catégorie et sous-sous catégories détermine la facilité de la navigation. L’accès à l’information devra être réalisé en 3 clics maximum.

    L’architecture de l’information de votre site  joue donc un rôle prépondérant dans l’ergonomie d’un site web.

    La lisibilité

    Des textes bien structurés

    L’utilisateur survole bien souvent les contenus sans lire la totalité de vos textes.

    C’est pourquoi les titres doivent être clairs et lisibles grâce à une police adaptée. Une police spécifique pourra être choisi pour les mettre en valeur et attirer l’oeil. Cela permet à votre page d’être davantage structurée.

    Le regard des internautes se dirige naturellement sur les éléments les plus importants de votre site. L’ergonomie d’un site web dépend d’une hiérarchie visuelle.

    Pour ce faire, il faut veiller à ce que les éléments de votre site soient bien structurés en ajustant la position, la couleur et la taille des différents éléments.

    L’ajustement des titres et des paragraphes et des éléments graphiques en maîtrisant le bon équilibre des espaces et des textes. Grâce aux feuilles de style, l’ensemble du site respectera la structure de la mise en page de manière cohérente.

     

     

    exemple de wireframe

    exemple de wire framing

    Les call to action

    Un site web ergonomique doit être efficace. Si votre but est d’informer alors son utilité dépendra de la lisibilité, c’est-à-dire sa capacité à facilité la compréhension.

    Si votre but est de vendre, il faudra placer des call to action ou des pictogrammes pour inciter vos visiteurs à acheter facilement ou prolonger le temps de visite sur votre site internet.

    Un visuel, une image, un pictogramme peut annoncer la suite de la visite pour structurer votre message.

    Utilisez un Call to action pour attirer le regard vers le message qui mérite le focus de l’internaute. Cela oriente le visiteurs vers votre message principal.

    Une image peut servir à améliorer l’expérience utilisateur en simplifiant l’information.

    Le plus souvent on préférera un découpage de l’information dans votre site web grâce à un résumé ou une accroche marketing accompagné d’un call to action pour en savoir plus qu’un long texte en page d’accueil ou sur vos pages stratégiques.

    Le call to action  mène à une page dédiée qui traite le sujet de fond en comble. Mais attention, les internautes doivent donc en être satisfait une fois leur action terminée et réalisée avec succès. Veillez donc à ce que votre contenu tienne toutes les promesses de votre lien, de votre accroches ou du visuels qui tient lieu de call to action.

    Et vos produits? Qu’aimeriez-vous mettre en avant? Savez-vous que le marketing peut vous aider à développer vos ventes en ajoutant par exemple un call to action à côté de vos produits pour en savoir plus, pour réserver ou bien acheter en un clic…

    Cela permet de prolonger le temps de visite sur votre site internet sans pour autant encombrer votre page d’acceuil ni vos pages stratégiques. Lorsque le visiteur n’est pas déçu, vous augmentez vos chances qu’il apprécie votre site web, qu’il y retourne voire qu’il en parle autour de lui.

    La satisfaction de l’internaute est un aspect crucial de l’ergonomie d’un site internet.

    Avec la concurrence, l’internaute fait son choix rapidement : il reste ou quitte le site.

    Les sites internet ergonomiques intègrent le plus souvent des call to action pour transformer ses visiteurs en clients, ou prolonger le temps de visite tout en proposant un élément graphique attrayant. Avec des accroches bien visibles ou des visuels pour rendre vos pages plus agréables, on attire l’attention du visiteur sans pour autant ennuyer l’utilisateur.

     

    modèle web-design
    Un site ergonomique fidélise les internautes.

     

    Tous les éléments pour améliorer l’ergonomie :

    Afin de faciliter l’expérience utilisateur, webmaster freelance a listé pour vous l’ensemble des points à vérifier sur un site internet.

    Pour améliorer l’UX de vos pages vérifiez les points suivants :

    • L’apparence : responsivité, uniformité des positions du logos et du menu entre les pages
    • Les images : formats, poids, balises Alt
    • Les tableaux, les onglets, les accordéons : bordure, largeur en mode responsive, etc…
    • Le positionnement et la taille des titres H1 : toujours au même endroit
    • Le positionnement du fil d’Ariane : en dessous du menu ou du H1 à vous de voir
    • Les boutons de partage sur les réseaux sociaux, les boutons j’aime : en dessous du contenu, dans un div flottant sur le côté, choisissez l’apparence des logos
    • Les traits de séparation : balise Hr
    • Les pop-ups : oubliez les pop-ups en plein écran et laissez la possibilité de les fermer sur mobile, utilisez des barres flottantes moins invasives, qui ne détérioreront pas l’expérience utilisateur sur mobile.
    • Les formulaires de contact : vérifier les messages d’erreurs et les contrôle de champs obligatoires
    • Les liens : couleur, lorsqu’il sont survolé, lorsque ils sont actifs ou déjà visité
    • L’accès aux contenus protégés : message de bienvenue ou d’interdiction, laissez la possibilité de s’inscrire
    • La présence de publicités au dessus de la ligne de flottaison (au-delà d’une seule, vous risquez une pénalité)

    Conclusion

    Par conséquent, lors de la création d’un site, l’ergonomie permettra à vos visiteurs d’avoir envie de vous lire, de naviguer facilement et de trouver rapidement l’information recherchée. La hiérarchisation et la lisibilité de l’information basée sur le lien hypertexte, qui fait la particularité du Web, sont des leviers importants pour l’expérience utilisateur.


    BESOIN DE CONSEILS ?

    Si vous voulez discuter de votre projet web, n’hésitez pas à en parler avec Webmaster freelance!


    Laisser un commentaire

    Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *