Conception Web en 2020 et au-delà: un guide complet

Se familiariser avec la conception Web peut être une tâche intimidante, en particulier lorsque vous êtes novice. Mais peu importe le peu d'expérience pratique que vous avez, vous pouvez toujours apprendre.

Que vous cherchiez à concevoir votre propre site Web ou que vous ayez embauché un professionnel, mais que vous vouliez vous assurer de prendre les bonnes décisions pour votre entreprise, ce n'est pas une mauvaise idée de se familiariser avec les principes de base d'une bonne conception Web . Et ce guide est le point de départ idéal!

Couvrant les éléments essentiels d'une bonne conception Web en 2020, nous vous apprendrons comment prêter attention aux bons aspects de votre présence en ligne. En outre, vous apprendrez à aller plus loin que la simple esthétique et à créer un site Web qui donne la priorité à l'expérience utilisateur, aux fonctionnalités et au référencement. De cette façon, vous serez satisfait du produit final que vous obtenez.

Qu'est-ce qui fait un bon site Web?

Il existe de nombreuses opinions sur ce qui rend un site Web meilleur qu'un autre. Cependant, lors de la collecte de ce type d'informations, il est préférable de les obtenir de la bouche du cheval.

Lors de la conception d'un site Web, vous ne voulez pas simplement qu'il existe. Vous voulez également qu'il soit bien classé sur les pages de résultats des moteurs de recherche (SERP), afin d'obtenir le plus grand trafic organique possible. Et le principal facteur qui contribuera à votre réussite à cet égard sera l'expérience utilisateur (UX).

Selon Google les fondements fondamentaux d'une bonne expérience utilisateur incluent :

• Vitesse
• Fiabilité
• Intégration
• Engagement

Quand il s'agit de la vitesse comme l'un des principaux facteurs déterminants de l'UX, il ne faut pas être surpris. Nous vivons au 21e siècle, avec un accès facile aux connexions Internet rapides et aux appareils mobiles. Naturellement, nous nous attendons à ce qu'un site Web bien conçu se charge rapidement et réponde sans aucun retard.

Pour en revenir à la question du classement SERP, il s'avère que la vitesse est l'une des principales conditions préalables à une position de premier ordre. . Google et Facebook donnent la priorité aux sites et aux pages avec des vitesses de chargement élevées. Et pas seulement ça. Des recherches menées par des géants du commerce électronique comme Amazon ont également montré que les utilisateurs s'attendent à une satisfaction instantanée lorsqu'ils effectuent une requête en ligne . Lorsque les choses ne se passent pas comme prévu – les taux de rebond, eh bien, rebondissent.

En termes de fiabilité et d'intégration, ces deux critères se rapportent principalement à l'idée qu'un site Web doit se charger aussi bien depuis n'importe quel appareil et n'importe quel emplacement. Et cela inclut ceux qui ont de mauvaises connexions Internet. Les utilisateurs ne devraient pas avoir à craindre de ne pas avoir accès à un site Web, quelle qu'en soit la raison. Une conception fiable et bien intégrée fournira les mêmes résultats à tout moment.

Enfin, pour qu'un site Web soit attrayant, il doit être esthétiquement attrayant et il doit offrir toutes les fonctionnalités recherchées par les utilisateurs. Lors de la conception pour le Web, il est essentiel de garder cela à l'esprit. Les designers ne visent pas seulement à créer quelque chose avec un attrait artistique (bien que les sites Web puissent certainement être des œuvres d’art). Ils devraient également faire de la place pour une expérience de navigation fluide, entièrement intuitive et bien combinée avec les éléments de conception.

Le cas pour commencer avec UX

Comme vous pouvez le voir dans les conseils ci-dessus, la convivialité est l'un des principaux éléments à garder à l'esprit lors de la conception d'un site Web. Mais le fait est qu'il ne s'agit pas simplement de conseils aléatoires.

Des recherches ont montré à maintes reprises que la façon dont les utilisateurs interagissent avec un site dépend grandement des fonctionnalités UX. Une expérience inférieure à la moyenne n'influencera pas seulement négativement les conversions, car elle pourrait même vous faire perdre des clients. Selon une étude réalisée en 2010, une mauvaise expérience amènera 88% des consommateurs à cesser d'interagir avec un site Web.

De plus, nous savons maintenant que les gens ont des attentes claires quant à la qualité de la conception Web. devrait fournir.

En raison des tendances courantes de conception Web, nous pouvons prédire à quel point certaines actions de sites Web sont familières ou à quel point les nouvelles interactions nécessitent une courbe d'apprentissage. En gardant cela à l'esprit, les concepteurs Web peuvent garder une longueur d'avance et offrir une expérience utilisateur exceptionnelle tout en choisissant des éléments esthétiques uniques qui soutiendront les efforts de marque de l'entreprise.

En général, il y en a quelques-uns. attentes des utilisateurs à garder à l'esprit concernant l'expérience utilisateur du site Web:

• Les visiteurs s'attendent à ce qu'un site Web se charge en en moins de deux secondes .
• Il leur faut environ 2,6 secondes pour atterrir au maximum élément attrayant sur une page d'accueil.
• Une fois que leurs yeux se posent sur cette section, il faut moins d'une seconde pour former une première impression (principalement basée sur le design).
• Les personnes parlant des langues indo -Les familles européennes ont tendance à afficher les sites Web soit dans le modèle Z ou F-pattern .
• Ils ne feront probablement que parcourir le texte .
• Utilisateurs juger la crédibilité d'une entreprise en fonction de sa conception .
• Ils iront à un concours ou du site Web s'ils n'aiment pas ce qu'ils voient.

Voilà: toutes les preuves dont vous avez besoin pour envisager de démarrer votre prochain projet de conception Web avec une approche UX-first. Bien entendu, cela ne signifie pas se concentrer uniquement sur les détails techniques. Visez plutôt à créer une belle expérience visuelle qui est sauvegardée avec un flux de convivialité transparent.

Vous ne savez toujours pas comment procéder? Voici les six éléments de conception les plus importants auxquels il faut prêter attention.

1. Mise en page

La première partie de la conception Web dont vous aurez besoin pour décider sera la mise en page. Et la meilleure façon d'en décider est de suivre la façon dont les gens regardent les sites Web.

Sur votre page d'accueil, essayez de prendre en compte le modèle Z comme vous pouvez le voir dans cet exemple d'Eachnight . Placez les informations importantes dans les hotspots de visibilité et essayez de diriger l'attention des utilisateurs vers votre contenu le plus important.

Si vous suivez la pratique standard, ce qui est toujours une bonne idée pour démarrer avec le Web design, placez le logo de votre entreprise (cliquable) dans le coin supérieur gauche. C'est le premier endroit où les gens regarderont, et de cette façon, vous positionnerez immédiatement votre marque.

Les menus de navigation, les barres de recherche, les CTA et les formulaires de connexion doivent également figurer dans l'en-tête, mais vous pouvez choisir la variante qui vous convient mieux avec votre conception globale. Étant donné que tous les sites Web ne comportent pas nécessairement tous ces éléments, vous devrez tenir compte du parcours de vos clients et décider des fonctionnalités à offrir. N'oubliez pas: plus n'est pas mieux, alors essayez de garder les choses aussi minimalistes que possible.

La section des héros sera la partie la plus importante de votre page d'accueil, et c'est là que vous devriez placer la mission de votre entreprise et CTA . Idéalement, vous devriez vous en tenir à un seul appel à l'action pour éviter de dérouter ou de submerger vos clients.

Enfin, le pied de page de votre page d'accueil devrait contenir des liens pour un accès rapide aux pages les plus informatives de votre site Web, telles que la FAQ, les conditions d'utilisation, etc. N'oubliez pas d'ajouter également des informations de contact et des liens de suivi social.

En ce qui concerne les pages produits, le modèle F fonctionnera mieux, comme vous pouvez le voir dans cet exemple standard de Nordstrom Rack .

Les informations d'en-tête sont probablement les mêmes que sur votre page d'accueil, mais lorsque vous présentez vos produits, vous voulez attirer l'attention des visiteurs avec une image de haute qualité dans le coin supérieur gauche. À droite de cette section, ajoutez la description du produit rédigée dans un langage simple et clair, idéalement séparée en petites puces.

Conseil de pro: Avant de décider de la mise en page de votre site Web, assurez-vous d'avoir tout le contenu que vous y incluerez (même s'il ne s'agit que d'un premier brouillon). De cette façon, vous pourrez faire les bons choix dès le départ et éviter de perdre du temps sur toute la ligne.

2. Navigation et structure

Une fois que vous avez une idée précise du type de mise en page que vous allez utiliser, il est temps de réfléchir à la structure et à la navigation.

En termes simples, la structure Web est la façon dont le contenu de votre site Web est organisé. Parce que votre site est appelé à croître comme votre entreprise, vous avez besoin d'une structure bien organisée qui évitera la confusion parmi les utilisateurs, et qui encouragera une indexation appropriée par les moteurs de recherche .

De plus, avec des sites Web plus grands, une structure claire peut aider les utilisateurs à se repérer plus facilement sur un site. La marque Jack Wolfskin le fait particulièrement bien, car la structure du site est visible juste en dessous du menu de navigation. A tout moment de leur parcours d'achat, les utilisateurs peuvent reculer d'un ou plusieurs pas, sans avoir à entrer dans la boutique et à recommencer leur navigation à partir de zéro.

Quant aux menus de navigation, il vous pouvez faire plusieurs choix. Sans aucun doute, le plus populaire est le menu classique, présenté sur 88% de tous les sites Web . Mais ce n'est pas parce que quelque chose est populaire que c'est le bon choix pour vous. Les sites Web conçus pour le mobile d’abord utiliseront plus probablement un menu de hamburgers, car il est plus facile à afficher sur de petits écrans et occupe moins de place lorsque cela n’est pas nécessaire.

3. Schéma de couleurs

De nombreuses ressources de conception Web vous indiqueront de choisir un schéma de couleurs basé sur la psychologie des couleurs . Vous pouvez emprunter cette voie, mais ce n'est peut-être pas toujours la meilleure idée.

Au lieu de limiter visuellement votre dessin à des couleurs particulières en fonction de leur signification, cherchez des moyens de créer un effet esthétiquement étonnant qui soit agréable pour les yeux, mais fait toujours une déclaration suffisamment audacieuse pour que vos visiteurs Web se souviennent de vous.

Bien sûr, n'oubliez pas de prendre des décisions de couleur en fonction de votre public cible et n'oubliez pas de garder un œil sur ce que font vos concurrents. Si vous essayez de lancer la prochaine grande franchise de restauration rapide, vous ne devriez probablement pas choisir le rouge et le jaune et un logo qui représente la lettre M.

Pour voir comment les marques du même secteur peuvent démarquez-vous, jetez un œil aux sites Web d'Opi et d'Essie. Bien que similaires en termes de fonctionnalités de base, les deux marques adoptent des positions distinctes sur la couleur, avec Opi optant pour un look plus neutre et Essie jouant avec de nombreuses combinaisons de couleurs différentes .

Source: essie.com

4. Typographie

La typographie est, malheureusement, un aspect souvent négligé de la conception Web. Cependant, si vous tenez compte du fait qu'il s'agit de la représentation visuelle du langage verbal, vous comprenez rapidement pourquoi la police que vous utilisez peut faire ou défaire une marque. entité, la typographie peut également être utilisée pour évoquer des sentiments ou attirer l'attention sur certaines zones de votre page d'accueil. Par exemple, si vous avez une offre vraiment que les visiteurs du Web voient, vous la présenterez sur une zone avec beaucoup d'espace blanc et un contraste élevé, comme dans cet exemple de Adidas . Si vous regardez à quel point la typographie se démarque sur la page, il n'est pas surprenant que les sorties Yeezy de la marque aient tendance à se vendre en un temps record.

Of Bien sûr, si vous cherchez des moyens de vous démarquer, vous pouvez également donner un coup de pouce aux choses.

Transparent Labs a choisi de faire quelque chose d'un peu plus coloré avec leur dernière version de produit. Voyant qu’ils commercialisaient une toute nouvelle protéine de lactosérum aromatisée aux céréales, ils ont fait un choix de conception pertinent à la fois en termes de stratégie de marque et de marketing émotionnel . Avec les choix de couleurs, il rappelle les souvenirs d'enfance du choix de petit-déjeuner de beaucoup de gens – le moyen idéal de présenter une poudre de protéine à ceux qui recherchent plus que des avantages pour la santé.

Source: transparentlabs.com [19659063] 5. Médias, contenu et copie

Nous avons déjà mentionné comment les gens ont tendance à passer au survol plutôt qu'à lire attentivement le contenu du site Web. Dans cet esprit, vous pouvez faire les choix de conception qui vous permettront de faire passer votre message de la meilleure façon possible.

Dans l'ensemble, lorsque vous rédigez un texte, essayez de le garder bref et simple. Si vous n'êtes pas sûr que le libellé soit tout à fait correct, vérifiez son score de lisibilité . Essayez de garder vos paragraphes sur le côté le plus court et utilisez des puces lorsque c'est possible.

Mais un langage bref et compréhensible ne suffira pas en 2020. Vous devez également ajouter différents types de médias à votre site Web.

Images et les graphiques sont tous deux des choix standard et ils fonctionnent parfaitement pour la plupart des utilisations. Comme il ne faut qu'une fraction de seconde à une personne pour traiter complètement une image, ce type d'informations visuelles peut vous aider à contourner les courtes périodes d'attention d'aujourd'hui et à vous assurer de communiquer votre message.

Bien sûr, vous pouvez également prendre les choses un peu plus loin. Ajoutez une vidéo à votre site Web – et pas seulement sur la page d'accueil, mais également sur les pages de produits et de procédures. C’est le média qui génère le plus haut niveau d’engagement, et il ne fera que croître dans les années à venir. En fait, 99% des spécialistes du marketing prévoient de continuer à l'utiliser en 2020 et au-delà.

Donc, si vous en avez les moyens, ajoutez une vidéo à votre page d'accueil, aux pages produits et même à la section des ressources de votre site Web, comme cet exemple par Ugg .

6. Sûreté et sécurité

Enfin, n'oubliez pas qu'une conception Web de qualité ne se limite pas à générer des conversions. Il établit également la confiance . Assurez-vous donc de laisser de la place aux éléments qui vous aideront à faire de votre entreprise une entité fiable.

La meilleure façon de le faire est d'utiliser des éléments de preuve sociale sur votre page d'accueil.

Faites-le sous la forme d'utilisateur -généré des critiques, ou allez plus loin et montrez vos partenaires ou les mentions de publications en ligne, c'est exactement ce qu'a fait la société SaaS Teem . Avec une liste de clients qui comprend Airbnb, Uber, Starbucks et HP, il n'est pas surprenant que ses produits comptent parmi les plus populaires dans la catégorie des lieux de travail et de la gestion des données.