Les bons conseils de Camille

L’ergonomie : Appliquée au monde du web, l’ergonomie d’un site Internet est définie par sa capacité à répondre efficacement aux attentes des internautes avec une navigation confortable. Elle regroupe les principes de navigation, et de hiérarchisation de l'information afin d'offrir aux utilisateurs un maximum de confort, de sécurité et d'efficacité.

Un site web doit :
GUIDER - avec un choix d'icônes pertinent (aller droit au but)
RASSURER - en restant le plus simpe et standard
ACCOMPAGNER - en mettant en place une mise en page basée sur un système de colonnes.

Des règles simples à respecter

1 - Lisibilité du texte

Contraste
Le texte le plus lisible et le moins fatigant reste le texte noir sur fond blanc,néanmoins il est possibile d'utiliser un gris coloré (pas composé seulement de noir) pour le texte, à condition de toujours garder un contraste élevé avec le fond.

Taille
Utilisez également une taille de police de texte confortable, 16px pour le texte courant. Travaillez également sur vos espaces blancs (aérer des éléments afin de les mettre en avant et les valoriser) pour mettre en valeur le contenu.

Comment choisir une bonne typographie ?

Ne soulignez pas le texte
Sur le web, un mot ou une expression soulignée est un lien, n’utilisez jamais le soulignement pour une autre raison. Si vous souhaitez faire ressortir du texte, vous pouvez utiliser une couleur différente, une taille de police supérieure ou encore le gras et l’italique.

2 - Structuration du texte

Utilisez des titres et des sous titres de page
Dans votre charte digitale, prévoyez plusieurs niveaux de titres et de sous-titres.

Vos visiteurs doivent pouvoir choisir très facilement ce qu’ils veulent lire ou ne pas lire. Cette structure permet également de donner des repères à vos visiteurs.

On peut utiliser 1 à 2 typographies sur un site internet.

Privilégiez des paragraphes courts, découpez le texte en plusieurs points.
1 idée par paragraphe.

3 - La largeur des colonnes

Evitez les colonnes trop étroites ou trop larges : Notre œil se fatigue s’il doit parcourir des kilomètres pour suivre le texte dans des colonnes étroites. Privilégiez une largeur de colonne comprise entre 10 et 15 cm et n’oubliez jamais de laisser un espace vide suffisant entre les colonnes. Les colonnes d’une largeur de 10 cm sont idéales.

4 - Boutons

Un bouton ou un appel à l’action est clairement marqué avec un « mot d’action » (Cliquez, visitez…). Il permettra à votre utilisateur de naviguer plus facilement sur votre site et d’aller où il le devrait.

Lorsque vous créez les boutons, vous devez penser à la couleur, ainsi qu’à la psychologie de la couleur. Différentes couleurs véhiculeront différents messages. Pensez au message que vous voulez transmettre et choisissez les couleurs en conséquence. Ensuite, pensez aux mots eux-mêmes. Ils devraient inclure un mot d’action, ou un verbe, qui amènera l’utilisateur à AGIR.

Plus un bouton est arrondi plus il est visible.

Utilisez un vocabulaire grand public.

5 - Contraste et couleur

Les couleurs véhiculent une hiérarchie visuelle, et vous pouvez les utiliser pour garder l’attention de vos utilisateurs. Lorsque vous travaillez sur l’interface de votre site, les couleurs que vous utilisez doivent conserver une certaine uniformité afin de transmettre des indications visuelles. De plus, vous devez garder votre palette de couleurs aussi minimale que possible.

Il faut vous créer une palette de couleur avec :

• 1 Couleur principale (charte graphique)

Est-elle assez contrasté ? Pour pouvoir écrire en noir ou en blanc dessus...
https://randoma11y.com/
Celle-ci sera utilisée pour les éléments cliquables et les actions principales.

• 1 à 2 couleurs secondaires

Pour les éléments de second niveau

6 - Responsive

Responsive : réorganiser l'inforamation en fonction des paramètres de l'appareil (ordi, tablette, téléphone)

51% d'internautes navigue sur mobile - 31% sur ordinateur - 6% sur tablette

La navigation sur votre site Web doit être facile sur n’importe quel écran, y compris celui d’un smartphone. En effet, si un utilisateur ne peut y accéder depuis son smartphone et profiter de l’expérience client, il ne reviendra pas depuis un ordinateur.

7 - Formulaires simples

Les formulaires sont l’une des principales méthodes utilisées par vos utilisateurs pour interagir avec votre site Web. Le principal problème est que ces formulaires demandent parfois beaucoup d’informations et ne sont pas du tout intuitifs.

Par conséquent, vous devez intégrer des formulaires aussi facile que possible.

La première question à vous poser est « Ai-je vraiment besoin de ce formulaire ? »

8 - Facilité de navigation

La navigation intuitive est la clé si vous voulez vous assurer que les gens peuvent trouver ce qu’ils cherchent. Passer d’un point A à un point B devrait être aussi simple que possible.

Menu primcipal

• Indiquer à votre visiteur où il se situe
• Le rendre simple et clair
• Contextualiser ( via des pictos par exemple)

Sous-menu

• Eviter les menu déroulants
• Mettre le moteur de recherche en valeur
• Contextualiser

9 - Accessibilité

10% de la population souffre de handicap. L'accessibilité permet au plus grand nombre de gens de percevoir, comprendre, naviguer interagir aveC le web.

• Des chemins de navigation simple

En hiérarchisant et structurant l'information, grâce au section des titres, sous-titre, textes.

• Des couleurs contrastés

HEXNAW
RANDOMA

• Une gestion typographique

Taille, graisse, interlignage

---