Les bases du Web design : la convivialité

Après nous être intéressés en première partie à la planification de votre site Web, découvrez comment rendre un site Web convivial pour vos utilisateurs. Il y a d’infinies possibilités pour élaborer le design de vos pages Web, mais toutes ne peuvent pas convaincre par leur convivialité d’utilisation. Les internautes sont habitués à certains standards en ce qui concerne la structure des sites Web et les administrateurs doivent y veiller en mettant en place leur projet Web.

La taille de l’écran et le type d’appareil représentent un autre facteur qui influence la présentation de la page et donc l’expérience de navigation des utilisateurs. Par ailleurs, prenez en compte le fait que le nombre de mobinautes ne cesse de croître et que l’affichage d’un site Web est différent sur un smartphone. Veillez lors de l’élaboration de votre site à ce que l’accès ainsi que la navigation soient le plus simple possible pour les visiteurs.   

Le Web : entre conventions et convivialité

La facilité d’utilisation d’une page d’accueil fait partie intégrante de l’ergonomie du site. En anglais, on désigne cela par le terme de « usability engineering », soit l’ergonomie informatique, sa fonctionnalité et sa facilité d’utilisation. Un site facile à comprendre et à manier avec rapidité est perçu comme convivial pour les utilisateurs. Pour cela, il faut prendre en compte les normes de Web design actuelles, sans pour autant oublier les limites techniques qui peuvent s’imposer à vous.

L’accessibilité d’un site Web joue également un grand rôle dans la convivialité pour les utilisateurs. On parle en anglais d’« accessibility ». Une offre accessible sur le Web est caractérisée par le facteur suivant : presque tous les utilisateurs peuvent naviguer facilement sur le site, quelles que soient leurs capacités techniques, cognitives, physiques ou autres. Les critères à prendre en compte sont énoncés sur le site de webaccessibilite.fr.

La mise en forme

La mise en forme d’une page d’accueil dépend du thème ou du secteur du site Web. Néanmoins, on retrouve globalement des tendances et des styles propres à chaque branche. Généralement, les grandes entreprises optent pour un design normalisé, avec un portail et une classification des contenus séparés en différentes colonnes, ainsi qu’une navigation en en-tête de page. Pour les petites et moyennes entreprises, il est de plus en plus fréquent que les sites Web affichent un contenu riche, que l’on fait « scroller », c’est-à-dire qu’on le fait défiler de haut en bas. 

La règle principale à observer pour la mise en page consiste à présenter votre page d’accueil de manière claire. Les utilisateurs se perdent vite sur une page saturée, veillez donc à répartir le contenu de manière équilibrée. Pour y parvenir, il va de soi que le contenu doit être concis, lisible et qu’il ne soit pas redondant. De plus, les textes les plus longs doivent être structurés par des paragraphes et des titres. Concernant les images et les vidéos, celles-ci doivent être intégrées de manière organisée et logique, en fonction de schémas prédéfinis. Plus les utilisateurs trouvent leurs marques facilement sur votre site Web, plus leur expérience sera agréable, ce qui les incitera à s’y rendre à nouveau.  

Des normes de Web design se sont établies depuis longtemps. Ces standards définissent ce qu’est le Web design moderne et à quoi celui-ci doit ressembler. À titre d’exemple, de nombreux sites Web s’inspirent de l’interface utilisateur de réseaux sociaux tels que Facebook ou encore certains blogs connus. Le fait de s’inspirer de ces sites Web est pertinent dans la mesure où de nombreux internautes sont à l’aise avec de telles interfaces et y sont habitués.

Néanmoins, si les sites Web avec de nombreuses animations étaient encore populaires il n’y a pas si longtemps, la nouvelle tendance est désormais à un design épuré et minimaliste. Cela permet aux internautes d’avoir un aperçu rapide de l’ensemble du site, mais il faut tout de même que votre Web design garde une empreinte propre et une touche personnelle.

La navigation

Les aspects qui concernent l’apparence du site Web sont également applicables à la navigation, il faut que celle-ci soit claire et facile. Un schéma de navigation bien réalisé se caractérise par une certaine rapidité et de l’intuitivité. Les internautes doivent pouvoir reconnaître la structure du menu dès le premier coup d’œil et la comprendre. Une simple barre de navigation suffit dans la plupart des cas, mais elle ne doit pas être surchargée de menus et de sous-menus. Si vous optez pour un menu déroulant, celui-ci doit rester lisible. Une structure de navigation claire et homogène facilite la navigation et garantit que vos utilisateurs gardent un bon aperçu d’ensemble.

Créez les liens de navigation en utilisant des icônes par exemple. Vous pouvez également faire changer l’apparence du curseur de la souris lorsque les utilisateurs se rendent sur le menu (effet de hover). Veillez également à ce que les sous-parties du menu comprennent de courtes descriptions et assurez-vous que les liens vers d’autres pages correspondent bien.

Aspects techniques

La technicité de la mise en place de la page Web est un aspect crucial à prendre en compte. Pour que la navigation 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échargement donnent une image peu professionnelle et laissent une mauvaise impression aux visiteurs. Si le contenu est important, cela peut mener à un temps de chargement assez conséquent et désagréable. C’est un véritable faux-pas car la patience des internautes est mise à rude épreuve.

Il est donc nécessaire de vérifier régulièrement que la navigation sur votre site se déroule sans problèmes. Les exigences envers le matériel des utilisateurs est un autre facteur technique à prendre en compte. Un site Web devrait idéalement pouvoir s’afficher sur n’importe quel appareil connecté à Internet. Par la suite, l’accessibilité de la page d’accueil est un facteur déterminant, quelle que soit la plateforme informatique utilisée. Cela signifie par exemple qu’un site Web ne doit pas dépendre de son système d’exploitation. Pour élaborer des contenus, aucun logiciel spécifique ne devrait être utilisé. Le site ne doit pas non plus exiger une trop grande puissance de calcul, au risque de pénaliser les utilisateurs qui disposent d’appareils dont le processeur est lent.

Le Web design adaptatif : une présentation adaptée à tous les supports

Avec la démocratisation des smartphones, il est de plus en plus important que les sites Web soient affichés de manière adaptée à chaque support et aux différentes tailles d’écran (ordinateurs, tablettes et smartphones). L’offre sur le Web était auparavant adaptée en grande majorité à une présentation 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 utilisateurs ne voient qu’une partie du site Web sur les écrans de smartphone.  

Un design adaptatif est préférable car il permet d’afficher le contenu de manière optimale, en fonction des diffé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 responsive Web design est bien plus flexible : la construction 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 » (responsive), 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 responsive 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 navigation principaux d’une page en avant. Cela assure une grande convivialité d’utilisation aux visiteurs, peu importe quel appareil est utilisé.

Erreurs fréquentes en Web design

Les erreurs font partie du processus d’apprentissage. Mais certaines sont à éviter à tout prix, surtout si vous désirez prendre une longueur d’avance sur la concurrence :   

  • Fenêtres pop-up : il y a peu de temps encore, il était à la mode de faire apparaî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 internautes et la majorité d’entre eux désactivent complètement les fenêtres pop-up à l’aide d’une extension de leur navigateur.
  • Absence de contact : proposez à vos visiteurs de vous contacter par différents moyens. Ces données doivent être rapides à trouver et sans avoir à effectuer de trop longues recherches.
  • Les liens manquants : les liens qui ne mènent nulle part sont irritants et augmentent fortement le taux de visiteurs qui quittent votre site web. Une fois votre site Web en ligne, veillez régulièrement au bon fonctionnement 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 navigation : l’utilisateur attend avant tout de la rapidité sur Internet. S’il ne trouve pas assez rapidement ce qu’il recherche, il quitte le site et se rend sur un site concurrent. C’est pourquoi il devrait y avoir une barre d’affichage en bas de votre page, qui redirige le visiteur vers d’autres parties importantes de votre site Web.
  • Une trop grande variété de typographies et de couleurs : les sites Web doivent avoir une présentation d’ensemble homogène et harmonieuse. Les débutants en Web design ont souvent tendance à utiliser un trop grand nombre de typographies et de couleurs parmi le vaste choix qui s’offre à eux. Une règle commune à respecter est de ne pas utiliser plus de trois typographies diffé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 convivialité d’utilisation, votre site Web sera doté d’une bonne structure de base. Cependant, votre présence sur Internet ne sera entièrement cohérente que si sa présentation est agréable et que le choix des couleurs est convaincant. 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.