Accéder au contenu principal

Guide ultime pour concevoir un beau site Web ✨

Guide ultime pour concevoir un beau site Web | Indépendant




Guide ultime pour concevoir un beau site Web

Suivez ce guide pour vous aider à concevoir un beau site Web que vos visiteurs vont adorer
13 janv. 2020 • 14 minute read
Photo de couverture

Besoin d'aide pour concevoir votre site web ? Suivez ce guide

Alors que le marché continue d'inonder de nouveaux produits brillants, la norme pour un beau design est continuellement élevée. Il est maintenant plus difficile que jamais d'impressionner les clients, donc si votre site Web manque d'attrait esthétique, personne ne se convertira à votre offre.
Ce guide aidera les créateurs Web débutants et chevronnés à intégrer les pratiques de conception les plus efficaces dans une belle conception de site Web.
Ceci est la partie 4 de notre série de création de site Web. Pour accéder à l'un des autres chapitres, reportez-vous à la liste de contenu ci-dessous. 
Maintenant, enfilez votre chemise de peinture et commençons à concevoir !

Que veulent réellement les visiteurs du site ?

Tous vos efforts de conception de sites Web doivent être guidés par le principe suivant :
Vous ne concevez PAS votre site Web pour vous faire plaisir, vous le concevez pour vos visiteurs.
Avec votre Persona du client complet vous devez avoir une compréhension des personnes spécifiques pour lesquelles vous allez concevoir votre site Web. Mais cette connaissance ne suffit pas, vous devez également comprendre l'état d'esprit des visiteurs qui consultent votre site Web.
Le parcours d'achat typique d'un client comprend 4 phases :
entonnoir client
Selon le graphique ci-dessus, les visiteurs doivent être intéressés par le contenu d'un site Web avant de se convertir, et pour s'intéresser à quelque chose, vous devez éteindre toutes les raisons d'être sceptique à son égard.
Ainsi, vos visiteurs sont susceptibles de se sentir sceptiques lorsqu'ils arrivent pour la première fois sur votre page Web.
Cette compréhension est essentielle car si vous concevez votre site Web de manière à dissiper tout scepticisme, vous défierez l'état d'esprit de la majorité des visiteurs et augmenterez considérablement vos chances de conversion.
Les visiteurs sceptiques recherchent une raison de rebondir sur votre page, vous devez donc leur donner rapidement ce qu'ils veulent !
Chaque visiteur veut répondre aux questions de base suivantes (nous vous apprendrons comment y répondre efficacement dans le chapitre suivant) :
1) Que fait cette entreprise ?
2) Pourquoi devrais-je les choisir / qu'est-ce qui les rend différents ?
3) Comment puis-je les contacter avec mes questions uniques ?
4) Comment puis-je convertir ?
Les sites Web les plus performants guident de manière transparente les visiteurs vers chaque réponse sans interruption en utilisant une stratégie de conception très puissante appelée conception UX.

Qu'est-ce que la conception UX ?

La conception de l'expérience utilisateur (ou conception UX) est le processus de manipulation du comportement de l'utilisateur sans aucun effort cognitif. En d'autres termes, les utilisateurs ne devraient pas avoir à réfléchir aux actions que vous voudriez qu'ils prennent.
Une excellente expérience utilisateur est celle qui aide les utilisateurs à localiser ce dont ils ont besoin en un minimum de temps et avec le moins d'actions possible.
Maintenant, décomposons certaines des tactiques de conception UX les plus efficaces afin que vous puissiez les intégrer à votre site Web.

Bonnes pratiques UX : placement du logo Web

Votre logo que vous avez créé dans votre projet d'identité de marque doit être affiché sur chaque page de votre site Web. Cela évite aux visiteurs de penser qu'ils sont redirigés vers un autre site Web lorsqu'ils cliquent sur un lien.
L'emplacement de votre logo est très important, il doit être situé en haut à gauche de chaque page. La raison en est que dans le monde occidental, nous lisons de gauche à droite et de haut en bas, également connue sous le nom de règle de Gutenberg.
motif de lecture en forme de l
Cette convention de lecture en forme de L devrait guider le placement de tout le contenu de votre site Web. Les informations les plus importantes doivent être alignées à gauche et les moins importantes à droite.
Voici quelques exemples de sites Web respectant cette convention de placement de logo :
site web rivien
Emplacement du logo en haut à gauche - Source : rivian.com
site web kawasaki

Emplacement du logo en haut à gauche - Source : kawasaki.com
En raison de leur mode de lecture inversé, les sites Web du monde oriental affichent leur logo dans le coin supérieur droit :
convention de lecture du monde oriental
Placement du logo en haut à droite dans le monde oriental - Source : arabiyat.com

Meilleures pratiques UX : emplacement du menu du site Web

Considérez le menu de votre site Web comme la « télécommande » de votre site Web. Ils devraient pouvoir basculer vers n'importe quelle page de votre site Web à tout moment. Ainsi, le menu de votre site Web doit être visible en haut de toutes vos pages (également appelé en-tête).
emplacement du menu du site Web
Emplacement du menu du site Web - Source : veganuary.com
Une excellente tactique de conception UX consiste à capitaliser sur cet emplacement pratique en rendant le menu "collant". Un menu collant est toujours visible en haut de la page Web lorsque l'utilisateur fait défiler la page.

Travail en vedette dans la conception de sites Web

Image de l'élément du portefeuille
Page de destination + Page produit
par Berkcivelek
Image de l'élément du portefeuille
Refonte du site Web
par creativemz2004
Image de l'élément du portefeuille
Site de commerce électronique sans peur
par whatifdesignin
Image de l'élément du portefeuille
Conception du site Renault
par negar72
Pour découvrir une démonstration en direct d'un menu d'en-tête collant, consultez veganuary.com .
Assurez-vous de garder les informations dans votre menu d'en-tête au minimum, vous ne voulez pas submerger vos visiteurs avec des informations comme dans l'exemple ci-dessous.
conception d'en-tête désordonnée
Source : uxplanet.org
Vous devez également inclure un menu dans le pied de page de chaque page Web, comme samsung.com :
menu de pied de page
Source : Samsung.com
Cela donne aux visiteurs la possibilité d'accéder à de nouvelles informations lorsqu'ils font défiler vers le bas pour maintenir leur intérêt stimulé.

Meilleures pratiques UX : Ordre du menu du site Web

Les éléments de menu sont l'une des régions du site Web les plus cliquées, il est donc important de les soumettre à la convention de lecture en forme de L dont nous avons parlé plus tôt. Les options de menu doivent être classées par niveau d'intérêt pour vos visiteurs, les plus pertinentes vers la gauche et les moins pertinentes vers la droite.
Pour vous aider à cartographier la hiérarchie des intérêts de vos visiteurs, revoyons les 4 principales questions auxquelles les visiteurs veulent une réponse sur n'importe quel site Web :
1) Que fait cette entreprise ?
2) Pourquoi devrais-je les choisir / qu'est-ce qui les rend différents ?
3) Comment puis-je les contacter avec mes questions uniques ?
4) Comment puis-je convertir ?
Le menu de votre site Web doit viser à répondre à ces questions dans cet ordre. Pour montrer comment cela est fait, jetez un oeil à cet exemple:
ordre des éléments du menu
Source : robertprussocpa.com
Voyons comment le menu de cet exemple suit cette convention d'ordre :
1) Que fait cette entreprise ?
Ce cabinet comptable répertorie toutes leurs pages de service dans la première option de menu.
2) Pourquoi devrais-je les choisir / qu'est-ce qui les rend différents ?
La deuxième option de menu dirige les visiteurs vers la page "équipe" avec un aperçu détaillé de leur offre unique. 
Viennent ensuite les "ressources fiscales", car cette entreprise l'a identifiée comme une exigence principale pour ses visiteurs.
C'est pourquoi il est important de créer profils clients détaillés pour comprendre le contenu qui intéresse le plus vos visiteurs.
Conseil de conception : 
Les demandes répétitives dans les soumissions de formulaire de contact identifient les lacunes de contenu qui intéressent beaucoup vos visiteurs. Envisagez de répondre à ces questions sous forme d'articles de blog, puis de créer un lien vers celles-ci dans le menu principal.
3) Comment puis-je les contacter avec mes questions uniques ?
L'option de menu de contact dirige les visiteurs vers un formulaire de contact.
L'option de menu "blog" est située à l'extrême droite car elle est la moins susceptible d'être cliquée par les visiteurs. C'est une bonne idée de l'inclure dans votre barre de menu afin que toutes vos pages Web bénéficient de toutes les victoires SEO individuelles.
3) Comment puis-je convertir ?
Si vous incluez un appel à l'action dans votre menu, positionnez-le vers la droite pour donner à vos visiteurs l'occasion d'apaiser leur scepticisme avec le contenu précédent. Quelques exemples de titres de conversion de menu sont "acheter maintenant", "acheter maintenant" ou "commander".

Faut-il utiliser un menu déroulant ?

Bien que les menus déroulants soient très esthétiques, ils doivent être utilisés avec prudence. Une liste inutilement longue d'options de menu déroulant frustrera vos visiteurs et leur donnera une raison de rebondir sur votre page.
Les expériences négatives, aussi petites soient-elles, ont plus d'impact sur vos visiteurs que les expériences positives.
Aurore Bedford, Senior User Experience Specialist chez Nielsen Norman Group, met en garde les designers contre ce phénomène :
"Les expériences négatives ont un impact émotionnel plus fort sur les humains que les expériences positives. Ainsi, lors de la conception de l'expérience utilisateur, nous devons mettre davantage l'accent sur l'évitement de ces dépressions."
L'autre inconvénient des menus déroulants est qu'ils encouragent les visiteurs à ignorer vos pages principales et à cliquer à la place sur les pages secondaires. Cela peut perturber le parcours de votre visiteur. 
Cela dit, si vous avez un site très volumineux avec plusieurs catégories, vos visiteurs apprécieront toutes les options regroupées par catégorie dans un menu déroulant, car cela minimisera leur temps de navigation.
catégorisation du menu déroulant
Source : gamestop.com

Meilleures pratiques UX : image du héros du site Web 

L'image de héros d'un site Web est un élément visuel important et important qui capte l'attention des visiteurs en premier lorsqu'ils accèdent à votre site Web. Il peut s'agir d'une image fixe ou d'une vidéo. C'est une tactique de conception UX très efficace, c'est pourquoi certaines des plus grandes marques les utilisent sur leurs sites Web :
Apple.com
apple.com
Tesla.com
tesla.com
microsoft.com
microsoft.com
Les éléments héros offrent instantanément à vos visiteurs une expérience captivante qu'il est important de réaliser le plus tôt possible (en 15 secondes en fait).
55% des visiteurs du site Web passent moins de 15 secondes sur un site Web, donc si vous ne parvenez pas à les impressionner dans ce délai, ils partiront et chercheront un autre site Web qui le fera.
Si vous avez besoin d'inspiration pour la conception de votre image de héros, vous pouvez publier un concours sur Freelancer.com. Cliquez ici pour apprendre comment.
L'image du héros est également un endroit idéal pour afficher des boutons d'appel à l'action, car le design épuré et minimaliste n'offre aux visiteurs qu'une seule option : cliquer dessus. C'est une excellente tactique de conception UX pour manipuler la première étape du parcours du visiteur.
appel à l'action du site Web de toyota
Appel à l'action sur une image de héros - Source : global.toyota
Les images de héros sont affichées "au-dessus du pli", c'est la zone d'une page Web sur laquelle la plupart des visiteurs se concentrent. Le terme était à l'origine utilisé pour les publications de journaux qui affichaient les actualités les plus importantes au-dessus de la zone dans laquelle elles étaient pliées.
La partie « pliée » d'une page Web comprend tout le contenu visible sur la page avant que vous ne commenciez à faire défiler vers le bas. Cela peut être approximé comme la hauteur du contenu qui tient dans un écran d'ordinateur portable standard.
au-dessus du pli
Source : paceco.com
Certaines images de héros s'étendent jusqu'au bas de l'écran. Cela minimise la distraction de tout autre élément et rend l'image du héros plus percutante.
image de héros tesla
Une image de héros pleine taille encourage également les utilisateurs à commencer à faire défiler vers le bas pour découvrir plus d'informations.
Important: 
Si vous superposez votre image de héros avec du texte, assurez-vous qu'il ne couvre pas la partie la plus significative de l'image (comme le visage de quelqu'un). Cela rend l'image du héros vraiment désordonnée, ce qui est une première impression terrible sur vos visiteurs.
Superposition de texte d'image de héros
superposition de texte d'image de héros
Source : uxplanet.org

Conception UX épurée

Des conceptions épurées font partie intégrante d'une UX efficace. Une conception Web propre est une conception qui comprime les informations en petits morceaux et les maintient toutes séparées avec suffisamment d'espace. 
Remarquez comment ce site Web espace les trois options cliquables :
conception de site Web propre
Source: melyssagriffin.com
Il s'agit d'un principe de conception très important car plus un site Web est visuellement complexe, plus il faudra de temps aux utilisateurs pour prendre une décision. La meilleure méthode pour manipuler le parcours d'un visiteur est de lui donner moins d'options de navigation.
Par exemple, les concepteurs du Site web de l'hôtel St. Regis Venise voulait que les visiteurs continuent à faire défiler la page Web pour s'imprégner de toutes les belles images. C'est pourquoi il n'y a pas de boutons de navigation pour ignorer le contenu. Les seuls visiteurs doivent continuer à faire défiler la page.
Le site internet pour La station balnéaire de Scott n'affiche qu'un seul bouton dans chaque lame de contenu, de sorte que les visiteurs ne voient qu'une seule option de navigation à la fois.
la station scott
Source: thescottresort.com
Les sites Web propres sont vraiment agréables à naviguer et ont même un effet calmant sur les visiteurs. Cependant, les sites Web désordonnés rendent les visiteurs anxieux. jetez un coup d'œil à cet exemple extrême et jugez par vous-même de votre niveau d'anxiété :
conception de site Web désordonnée
Outre leurs avantages esthétiques (et mentaux), un design épuré aide également votre site Web à se classer plus haut dans les moteurs de recherche.
Parce que les conceptions Web propres ont moins d'éléments à charger, elles se chargent beaucoup plus rapidement, ce qui a un effet SEO positif .
Si votre site Web est déjà construit, vous pouvez testez sa vitesse de chargement gratuitement ici.

Files d'attente visuelles UX

Les files d'attente visuelles UX sont des guides petits mais puissants qui encouragent les visiteurs à suivre un parcours de navigation prévu. Toutes les meilleures conceptions de sites Web les intègrent, vous en avez probablement été victime plusieurs fois sans le savoir.
Décomposons quelques exemples d'entre eux.
Sens de défilement 
Nous avons mentionné plus tôt comment les images de héros en taille réelle peuvent encourager les visiteurs à continuer à faire défiler vers le bas. 
Si vous ajoutez également une indication visuelle forte du sens de défilement, vos visiteurs seront obligés de découvrir les informations supplémentaires ci-dessous.
file d'attente de défilement ux
Source : Tesla.com
conception ux resmed
Source : resmed.com.au
Carrousels d'images
Un carrousel d'images est un moyen d'afficher des images sur plusieurs pages. Chaque image est accessible en feuilletant l'écran.
Si vous avez déjà visité une boutique en ligne, vous êtes certainement tombé sur un carrousel d'images
défilement du carrousel de commerce électronique
Carrousel d'images de commerce électronique - Source : nngroup.com
La file d'attente visuelle de l'image de la série de cercles ci-dessus indique la présence d'un carrousel qui incitera l'utilisateur à commencer à défiler vers la droite. Motivez l'utilisateur à feuilleter vers la droite pour voir plus d'images joue sur sa curiosité, ce qui l'encourage à rester sur votre page.
Mais les carrousels d'images doivent être utilisés avec parcimonie car les humains sont généralement assez oublieux. Lorsqu'un utilisateur parcourt un ensemble d'images de carrousel, chaque nouvelle diapositive remplace la mémoire de la précédente.
C'est pourquoi les carrousels d'images ne doivent être utilisés que pour afficher des images de produits et non des informations textuelles.

Experts indépendants en conception de sites Web

Avatar de l'utilisateur
Drapeau de Amran R@amranreza70
25 USD / heure
5,0(282 commentaires)PHPProgrammation en CJavaJavascriptPython
Visiter le profil
Avatar de l'utilisateur
Drapeau dewebcapitan@ukroficer
30 USD / heure
5,0(476 commentaires)PHPConception de site WebConception graphiqueDéveloppement d'applications mobilesWordPress
Visiter le profil
Avatar de l'utilisateur
Drapeau degurjeetsingh344@gurjeetsingh344
30 USD / heure
5,0(299 commentaires)PHPASPICJavascript.RAPPORTERConception de site Web
Visiter le profil
Avatar de l'utilisateur
Drapeau deBX Technologies@AdeelAslam4
35 USD / heure
5,0(88 commentaires)PHPProgrammation en CJavaJavascriptPython
Visiter le profil
Donc, que vous ayez un magasin de commerce électronique ou si vous êtes dans le secteur immobilier, utilisez uniquement des carrousels pour montrer à vos visiteurs différentes perspectives du même produit visuel.
Utiliser des accordéons pour empiler les informations
Les accordéons guident le parcours de l'utilisateur vers chaque segment d'information grâce à une forme subtile de gamification. La gamification est la méthode pour encourager l'activité des utilisateurs par des actions "amusantes". C'est amusant de voir un accordéon se dilater et se contracter, c'est donc un moyen astucieux de rendre les blocs d'informations ennuyeux plus attrayants.
exemple d'accordéon de site Web
Et parce que les utilisateurs ont la possibilité de maintenir les niveaux d'accordéon étendus, cela atténue les risques de perte de mémoire.
Vous pouvez même inclure des liens dans vos cases correspondantes vers des pages pertinentes de votre site Web pour une lecture plus approfondie.

Boutons

Si vous voulez que vos visiteurs cliquent sur vos boutons, vous devez les faire ressembler à des boutons. 
Un bouton de site Web se caractérise par une bordure rectangulaire aux bords arrondis.
Les boutons les plus importants, comme vos principaux appels à l'action, doivent être les plus grands de la page.
Assurez-vous simplement de ne pas remplir votre page Web avec trop de boutons, en tant que concepteurs UX professionnels, nous nous efforçons toujours de garder les choses propres et simples.
Par exemple, les images héros contiennent généralement 1 bouton cliquable, mais pas plus de 2.
site aston martin
Image de héros avec un seul bouton - Source : astonmartin.com
site bentley
Image de héros avec deux boutons - Source : bentleymotors.com
Dans l'exemple de moteurs bentleymotors.com ci-dessus, l'un des boutons est coloré. Il s'agit d'une tactique de sous-titre consistant à mettre en évidence le bouton sur lequel vous préférez que vos visiteurs cliquent. Vous pouvez utiliser la couleur dominante de la palette de couleurs de votre identité de marque ou une couleur sur laquelle les utilisateurs sont psychologiquement enclins à cliquer.
Les utilisateurs sont plus susceptibles de cliquer sur les boutons orange, jaune et bleu.
Ces couleurs correspondent à l'énergie, à l'optimisme et à la confiance avec respect, il n'est donc pas surprenant que les utilisateurs aiment cliquer dessus.
définitions de couleurs
Source : Canva.com
Boutons de formulaire Web
Les formulaires Web doivent être conçus pour être remplis le plus rapidement possible car ils ont plus de chances d'être abandonnés, Internet pourrait couper notre site ou le visiteur pourrait simplement perdre tout intérêt.
Les boutons de formulaire Web doivent donc être placés en ligne avec le chemin de navigation de l'utilisateur, même si cela enfreint la règle de Gutenberg.
Par exemple, au lieu que l'utilisateur navigue complètement vers la droite pour cliquer sur "OK" après avoir rempli le formulaire, il est beaucoup plus pratique que le bouton soit placé plus près du dernier champ du formulaire et en ligne avec le flux de navigation de l'utilisateur.
position du bouton de formulaire
Parfois, il est préférable de placer les boutons à l'extrême gauche d'un formulaire, surtout si toutes les options de champ sont alignées à gauche :
position du bouton de formulaire
Les boutons peuvent également être utilisés sur le contenu Web pour souligner les fonctions principales et secondaires. Dans cet exemple, le bouton coloré met en évidence la fonction préférée de l'utilisateur et le lien moins visible l'action secondaire.
lien cta

Source : Lukew.com
Cette stratégie est souvent utilisée dans les fenêtres contextuelles de sortie pour encourager les visiteurs à cliquer sur un bouton pour un engagement supplémentaire, plutôt que de refuser via le texte du lien : 
optinmonster cta
Source: optinmonster.com
Ordre des boutons - Oui/Non
Les options de bouton Oui et Non suivent les mêmes conventions que les appareils de tous les jours. Les options positives telles que « oui » et « on » sont toujours affichées à gauche de leurs opposés.
convention de bouton oui et non

Médias sociaux pour l'inspiration de conception UX

Si jamais vous avez besoin d'inspiration instantanée pour des conceptions UX efficaces, il vous suffit de mettre la main dans votre poche et de sortir votre téléphone.
Les plateformes de médias sociaux établissent les normes pour la plupart des principes de conception UX parce que leurs utilisateurs 
s'habituer tellement à eux. 
Jetons un coup d'œil à quelques exemples :

Exemples d'expérience utilisateur Instagram

Exemple Instagram 1 :
application Instagram
Source : application Instagram
Le bouton en bas encourage les utilisateurs à afficher un contenu similaire. La couleur bleue le rend digne de confiance et les bords arrondis de ce bouton le rendent moins "abrasif" et plus accueillant. 
Comment pouvez-vous utiliser cette stratégie de conception UX ?
Étant donné que les utilisateurs d'Instagram cliquent sur ce bouton plusieurs fois par jour, ils sont susceptibles de cliquer dessus sur votre site Web si vous utilisez la même couleur et la même forme.
Exemple Instagram 2 :
application Instagram
Source : application Instagram
Dans cet exemple, pas un seul mot n'est utilisé pour représenter chacune des options de menu, uniquement des icônes. Cela rend la page entière plus propre et ordonnée.
Ces icônes définissent également une nouvelle norme de représentation graphique. Les trois points dans le coin supérieur droit sont maintenant devenus un symbole bien connu pour "voir plus d'options".

Travail en vedette dans la conception de sites Web

Image de l'élément du portefeuille
Brushup Dental - Conception de sites Web
par nihalhassan93
Image de l'élément du portefeuille
Site WordPress flottant
par tarikjamil
Image de l'élément du portefeuille
Interface utilisateur du site Web
par bilgeberkay
Image de l'élément du portefeuille
Woodmart - Boutique en ligne de commerce électronique
par freelancerasraf4
Remarquez également que l'image ne couvre pas toute la hauteur de la page. Cela rend le contenu moins écrasant et, encore une fois, plus "propre".
Comment pouvez-vous utiliser cette stratégie de conception UX ?
Si votre conception Web commence à paraître trop désordonnée, envisagez de représenter des menus libellés avec des icônes et de laisser un espace blanc autour des éléments graphiques.

Exemples d'expérience utilisateur TikTok

TikTok est nouveau sur la scène, ce qui signifie qu'ils ont de nouvelles stratégies de conception UX dont nous pouvons apprendre.
Tiktok exemple 1
application tiktok
Source : application tiktok
C'est la page 'découvrir'. Toutes les vidéos sont disposées dans un carrousel et chaque vignette vidéo individuelle est un bref aperçu de la vidéo. Cela offre une excellente expérience utilisateur car les utilisateurs peuvent décider si une vidéo vaut la peine d'être visionnée avant même de cliquer dessus, ce qui évite de frustrer la navigation dans les deux sens.
Et parce que plusieurs vignettes sont visibles sur l'écran, l'utilisateur peut regarder jusqu'à 9 aperçus avant d'en sélectionner un à regarder, ce qui minimise encore plus le parcours de navigation !
Comment pouvez-vous utiliser cette stratégie de conception UX ?
Si vous proposez plusieurs services ou vendez plusieurs produits sur votre site Web, envisagez de rendre autant d'options visibles que possible.
Tiktok exemple 2
TikTok ne veut pas perturber l'expérience de visionnage vidéo, donc leurs menus sont conçus pour couvrir le moins de vidéo possible :
application tiktok
Source : application tiktok
Comment pouvez-vous utiliser cette stratégie de conception UX ?
Si vous savez que vos visiteurs seront engagés avec un élément particulier, ne perturbez pas leur engagement avec un contenu qui se chevauche.

Exemple Linkedin UX

Linkedin est donc un réseau social professionnel, donc leurs tactiques de conception UX sont moins fantaisistes et plus axées sur la fonctionnalité.
Si vous avez lu jusqu'à présent, vous devriez être en mesure d'identifier les 4 tactiques UX différentes dans l'exemple ci-dessous :
application liée
Source : Application Linkedin
1) L'icône du bouton vers l'arrière dirige le parcours de l'utilisateur.
2) Icône de « recherche » universelle utilisée à la place d'une étiquette libellée.
3) La couleur bleue du bouton met en évidence l'action de l'utilisateur prévue, et elle est bleue pour inspirer la confiance.
3) 4 points indiquent qu'il y a plus d'options de menu à suivre
Une façon impressionnante pour Linkedin de tenir les utilisateurs informés de leur progression de navigation consiste à balayer chaque nouvelle vue plutôt qu'à l'actualiser de manière statique.
Chaque fois qu'un clique sur un lien pour faire avancer sa navigation, le nouvel écran glisse de droite à gauche.
Lorsque l'utilisateur clique sur "retour", le sens de rafraîchissement de l'écran est inversé, de gauche à droite. Remarquez comment cela suit la convention de lecture du monde occidental.
Voyons maintenant comment structurer le texte de votre site Web pour aider les visiteurs à le digérer plus efficacement.

Structurer le contenu textuel du site Web

Une seule colonne de texte.

Les visiteurs s'attendent à continuer à faire défiler un site Web pour voir plus d'informations. Pour répondre à cette attente, vous devez éviter d'avoir plus d'une seule colonne de texte. 
site Web de texte à une seule colonne

Gardez tout le contenu aligné

Cela n'agace pas seulement les hyper-obsédés, tous les visiteurs ressentent de l'angoisse lorsqu'ils voient un contenu Web mal aligné. Si un visiteur trouve quelque chose de légèrement ennuyeux sur votre site Web, il partira.
contenu Web mal aligné
contenu Web aligné
Source : uxplanet.org
Assurez-vous que l'espacement vertical entre les éléments est également cohérent :
espacement vertical du site web
Source : uxplanet.org

Suivre une hiérarchie visuelle

Utilisez des titres pour séparer les sujets. Vos titres doivent être affichés dans une police plus grande (H2 ou H3) pour accentuer davantage cette séparation. Décomposer votre contenu en morceaux de la taille d'une bouchée comme celui-ci est beaucoup plus facile à lire et, par conséquent, à comprendre.
site de taille de texte
Source : uxplanet.org
 

Conclusion 

Si vous voulez impressionner vos visiteurs avec la conception de votre site Web, concentrez-vous sur leur donner ce qu'ils veulent le plus rapidement possible et avec un minimum d'effort. Suivez les directives de cet article pour créer un beau site Web qui reflète fidèlement le prestige de votre entreprise.
Dans la partie 5 de notre guide, nous vous apprendrons comment optimiser le contenu de votre site Web pour qu'il se classe sur la première page de Google.
 
Vous avez du mal à concevoir votre site Web? Nos concepteurs de sites Web professionnels se feront un plaisir de vous aider. Cliquez ici pour commencer aujourd'hui.
Dites-nous ce que vous devez faire
Entrez le nom de votre projet
Démarrez votre projet
Histoires connexes
Vignette de l'article
Planifier votre démarrage
22 minutes de lecture
Vignette de l'article
Financer votre startup
26 minutes de lecture
Vignette de l'article
Choisir la bonne structure pour votre startup
31 minutes de lecture
Vignette de l'article
Dotation en personnel de votre startup
24 minutes de lecture
Vignette de l'article
Comment commercialiser votre startup
31 minutes de lecture

Parlez avec un de nos Co-pilotes techniques pour aider avec votre p

Commentaires

Posts les plus consultés de ce blog

Comment faire du business sur Amazon ? [GUIDE COMPLET 2022]

100 outils pour lancer sa startup sans argent (mais pas sans talent)

Nomad '✨Maker - TOP✨ Ai GENERATOR

T🌴'artistiK -📗 Books and Publications Spotlight | Lulu

Diagnostiquer et récupérer une messagerie piratée | AVG

115 idées de revenus passifs pour obtenir de l'argent pour travailler pour vous en 2021 - Blog Ippei

6 tunnels de vente indispensables pour vendre sur Internet

ai-collection/README.fr.md at main · ai-collection/ai-collection · GitHub

Meilleurs outils de référencement 🛠 organisée par Saijo George

Stratégie dropshipping : Les 10 leviers marketing pour votre boutique