Les bases du Web design : la con­vi­via­lité

La facilité d’uti­li­sa­tion d’une page d’accueil fait partie in­té­grante de l’ergonomie du site. En anglais, on désigne cela par le terme de « usability en­gi­nee­ring », soit l’ergonomie in­for­ma­tique, sa fonc­tion­na­lité et sa facilité d’uti­li­sa­tion. Un site facile à com­prendre et à manier avec rapidité est perçu comme convivial pour les uti­li­sa­teurs. Pour cela, il faut prendre en compte les normes de Web design actuelles, sans pour autant oublier les limites tech­niques qui peuvent s’imposer à vous. L’ac­ces­si­bi­lité d’un site Web joue également un grand rôle dans la con­vi­via­lité pour les uti­li­sa­teurs. On parle en anglais d’« ac­ces­si­bi­lity ». Une offre ac­ces­sible sur le Web est ca­rac­té­ri­sée par le facteur suivant : presque tous les uti­li­sa­teurs peuvent naviguer fa­ci­le­ment sur le site, quelles que soient leurs capacités tech­niques, cog­ni­tives, physiques ou autres. Les critères à prendre en compte sont énoncés sur le site de we­bac­ces­si­bi­lite.fr.

Les aspects qui con­cer­nent l’apparence du site Web sont également ap­pli­cables à la na­vi­ga­tion, il faut que celle-ci soit claire et facile. Un schéma de na­vi­ga­tion bien réalisé se ca­rac­té­rise par une certaine rapidité et de l’in­tui­ti­vité. Les in­ter­nautes doivent pouvoir re­con­naître la structure du menu dès le premier coup d’œil et la com­prendre. Une simple barre de na­vi­ga­tion suffit dans la plupart des cas, mais elle ne doit pas être sur­char­gée de menus et de sous-menus. Si vous optez pour un menu déroulant, celui-ci doit rester lisible. Une structure de na­vi­ga­tion claire et homogène facilite la na­vi­ga­tion et garantit que vos uti­li­sa­teurs gardent un bon aperçu d’ensemble.

Créez les liens de na­vi­ga­tion en utilisant des icônes par exemple. Vous pouvez également faire changer l’apparence du curseur de la souris lorsque les uti­li­sa­teurs se rendent sur le menu (effet de hover). Veillez également à ce que les sous-parties du menu com­pren­nent de courtes des­crip­tions et assurez-vous que les liens vers d’autres pages cor­res­pon­dent bien.

La tech­ni­cité de la mise en place de la page Web est un aspect crucial à prendre en compte. Pour que la na­vi­ga­tion se passe sans problèmes, il faut que les contenus du site soient bien mis en place. Veillez à ce que le contenu soit bien intégré car les erreurs d’affichage et de té­lé­char­ge­ment donnent une image peu pro­fes­sion­nelle et laissent une mauvaise im­pres­sion aux visiteurs. Si le contenu est important, cela peut mener à un temps de char­ge­ment assez con­sé­quent et dé­sa­gréable. C’est un véritable faux-pas car la patience des in­ter­nautes est mise à rude épreuve.

Il est donc né­ces­saire de vérifier ré­gu­liè­re­ment que la na­vi­ga­tion sur votre site se déroule sans problèmes. Les exigences envers le matériel des uti­li­sa­teurs est un autre facteur technique à prendre en compte. Un site Web devrait idéa­le­ment pouvoir s’afficher sur n’importe quel appareil connecté à Internet. Par la suite, l’ac­ces­si­bi­lité de la page d’accueil est un facteur dé­ter­mi­nant, quelle que soit la pla­te­forme in­for­ma­tique utilisée. Cela signifie par exemple qu’un site Web ne doit pas dépendre de son système d’ex­ploi­ta­tion. Pour élaborer des contenus, aucun logiciel spé­ci­fique ne devrait être utilisé. Le site ne doit pas non plus exiger une trop grande puissance de calcul, au risque de pénaliser les uti­li­sa­teurs qui disposent d’appareils dont le pro­ces­seur est lent.

Avec la dé­mo­cra­ti­sa­tion des smart­phones, il est de plus en plus important que les sites Web soient affichés de manière adaptée à chaque support et aux dif­fé­rentes tailles d’écran (or­di­na­teurs, tablettes et smart­phones). L’offre sur le Web était au­pa­ra­vant adaptée en grande majorité à une pré­sen­ta­tion statique. La mise en forme de telles pages est rigide et ne s’adapte pas à de grands écrans. De plus l’affichage est tel que les uti­li­sa­teurs ne voient qu’une partie du site Web sur les écrans de smart­phone.  

Un design adaptatif est pré­fé­rable car il permet d’afficher le contenu de manière optimale, en fonction des dif­fé­rents formats. Néanmoins, les versions actuelles ne s’adaptent qu’aux écrans des modèles les plus courants. Comme ils ne sont pas adaptés à la totalité des formats d’écrans, il y a souvent une grande partie de l’espace qui est perdue.

Le res­pon­sive Web design est bien plus flexible : la cons­truc­tion de la page Web est adaptée au cas par cas à la taille de l’écran. Il s’agit donc de Web design « réactif » (res­pon­sive), qui utilise toute la taille de l’écran. Ce n’est pas pour rien que c’est devenu un standard en Web design : à l’inverse du Web design adaptatif ou statique, le res­pon­sive Web design utilise une mise en forme en grille, un « grid ». Cette grille s’adapte non seulement au format de tout écran, mais met également les éléments de na­vi­ga­tion prin­ci­paux d’une page en avant. Cela assure une grande con­vi­via­lité d’uti­li­sa­tion aux visiteurs, peu importe quel appareil est utilisé.

Les erreurs font partie du processus d’ap­pren­tis­sage. Mais certaines sont à éviter à tout prix, surtout si vous désirez prendre une longueur d’avance sur la con­cur­rence :   

• Fenêtres pop-up : il y a peu de temps encore, il était à la mode de faire ap­pa­raître une petite fenêtre sur votre écran chaque fois que l’on suivait un lien. Depuis, cette pratique est souvent mal vue par les in­ter­nautes et la majorité d’entre eux dé­sac­ti­vent com­plè­te­ment les fenêtres pop-up à l’aide d’une extension de leur na­vi­ga­teur.

• Absence de contact : proposez à vos visiteurs de vous contacter par dif­fé­rents moyens. Ces données doivent être rapides à trouver et sans avoir à effectuer de trop longues re­cherches.

• Les liens manquants : les liens qui ne mènent nulle part sont irritants et aug­men­tent fortement le taux de visiteurs qui quittent votre site web. Une fois votre site Web en ligne, veillez ré­gu­liè­re­ment au bon fonc­tion­ne­ment de vos liens.

• Contenu tombé en désuétude : de nombreux sites Web affichent encore du contenu qui n’est plus d’actualité. Faites attention à ce que le contenu de votre site Web reste pertinent et actuel.

• Une mauvaise na­vi­ga­tion : l’uti­li­sa­teur attend avant tout de la rapidité sur Internet. S’il ne trouve pas assez ra­pi­de­ment ce qu’il recherche, il quitte le site et se rend sur un site con­cur­rent. C’est pourquoi il devrait y avoir une barre d’affichage en bas de votre page, qui redirige le visiteur vers d’autres parties im­por­tantes de votre site Web.

• Une trop grande variété de ty­po­gra­phies et de couleurs : les sites Web doivent avoir une pré­sen­ta­tion d’ensemble homogène et har­mo­nieuse. Les débutants en Web design ont souvent tendance à utiliser un trop grand nombre de ty­po­gra­phies et de couleurs parmi le vaste choix qui s’offre à eux. Une règle commune à respecter est de ne pas utiliser plus de trois ty­po­gra­phies dif­fé­rentes et que celles-ci s’accordent bien. Il en va de même pour les couleurs.

Si vous évitez ces erreurs et que vous suivez les règles de base de la con­vi­via­lité d’uti­li­sa­tion, votre site Web sera doté d’une bonne structure de base. Cependant, votre présence sur Internet ne sera en­tiè­re­ment cohérente que si sa pré­sen­ta­tion est agréable et que le choix des couleurs est con­vain­cant. Dans la troisième et dernière partie de notre Guide Digital, découvrez-en plus sur les bases du graphisme et les effets de couleur.