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

TOP outils de rĂ©fĂ©rencement gratuits qui valent la peine d'ĂȘtre utilisĂ©s en 2023

Les outils de rĂ©fĂ©rencement gratuits qui valent vraiment la peine d'ĂȘtre utilisĂ©s

Changement de domaine en 2023 : tout ce que vous devez savoir

Chatbot Dialogflow : Tutoriel NoCode NLP pour les spĂ©cialistes du marketing | Landbot

Revenu passif : idées pour gagner de l'argent (en dormant)

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

La toolbox du growth hacker 💎 - Outils - Growthhacking.fr | CommunautĂ© française de growth hacking

Comment signer avec une maison de disques ? Voici notre guide ultime pour 2024

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