Vous n’avez besoin que de 0,05 seconde pour vous faire une opinion sur un site web 🤯 Et 88% des utilisateurs ne reviennent jamais sur un site après une mauvaise expérience.
Lors de la création de votre site Webflow , vous devez donc faire bonne impression et cela passe la qualité de votre expérience utilisateur (UX pour les intimes)
Dans article, je vous partage les meilleurs conseils pour réussir l’UX design de votre site vitrine.
L'UX design (User Experience Design) est une discipline de conception qui se concentre sur la création d'expériences utilisateur significatives et agréables. L'objectif ultime de l'UX design est d'optimiser la satisfaction de l'utilisateur en répondant à ses besoins, en respectant ses attentes et en facilitant l'utilisation du produit ou du service.
Pour atteindre cet objectif, l'UX designer utilise différentes méthodes de recherche, d'analyse et de conception pour comprendre les utilisateurs et leurs comportements, identifier les obstacles, les points de friction, et concevoir des solutions adaptées aux besoins de l'utilisateur.
Bien souvent, on parle d'UI/UX design pour désigner l'expérience utilisateur et le design de l'interface (UI). Comment faire la différence ?
L'UX design englobe tous les aspects de l'interaction entre l'utilisateur et le produit ou le service comme la navigation, l'interface utilisateur, la conception visuelle, la qualité du contenu, la performance et la convivialité. L'UX designer travaille en étroite collaboration avec les développeurs, les spécialistes du marketing, les graphistes et les chefs de produit pour créer une expérience utilisateur cohérente et fluide.
Un site vitrine est un type de site web qui a pour but de présenter les produits, les services et les activités d'une entreprise ou d'une organisation. Contrairement à un site de commerce électronique, un site vitrine ne permet pas la vente en ligne des produits ou des services.
Le site vitrine a pour objectif principal de renseigner les visiteurs sur l'entreprise, sa mission, son histoire, son équipe, ses valeurs et ses réalisations. Il peut également comporter des témoignages clients, des galeries photos, des vidéos ainsi que des informations de contact.
Le site vitrine est souvent utilisé par les petites et moyennes entreprises pour se faire connaître sur Internet et attirer de nouveaux clients. Il peut être conçu de manière simple ou sophistiquée en fonction des besoins de l'entreprise.
C'est ce type de site qui nous intéresse dans cet article ! 😉 Considérons que votre site est un site vitrine réalisé avec Webflow.
Pour optimiser l'UX de votre site Webflow, il y a plusieurs éléments à prendre en compte. Tout d'abord, il est important de créer un site responsive, c'est-à-dire qui s'adapte à tous les types d'écrans ordinateurs, tablettes, smartphones. Cela permettra à vos visiteurs de naviguer facilement sur votre site, quel que soit l'appareil qu'ils utilisent.
Ci-dessous, vous trouverez notre process chez Elias qui nous permet de créer une superbe expérience utilisateur pour nos clients 😉
Je ne vais pas m'étendre sur le sujet mais avant tout projet, nous nous mettons d'accord avec l'entreprise sur ses objectifs et raison pour laquelle elle crée ce site.
Grâce à ces premiers échanges, nous pouvons créer une première version de wireframe du site web. Un wireframe est représentation visuelle simplifiée de l'interface utilisateur d'un site web, utilisée pour planifier et conceptualiser la structure et la navigation avant la conception graphique. On y retrouve les textes et les images. Avec le wireframe et l'arborescence du site, nous proposons une structure du site internet, son squelette. Le nombre de pages, l'organisation de ces pages est une première base stratégique indispensable pour tout projet de création de site web.
Nous créons une maquette en deux temps chez Elias. La première étape consiste à demander à nos clients ce qu'ils veulent dire dans leur site web. La seconde, à savoir quel aspect donner à leur site. Ces deux interrogations sont essentielles pour proposer la meilleure recommandation.
Tic tac 🕰
Dès lors que le wireframe est validé, nous passons à l'étape du design. On récupère tous les éléments de la charte graphique pour habiller le site web (et lui faire une beauté 💄). Selon ce qui a été décidé en amont, la maquette sera réalisé sur desktop et sur mobile. C'est le moment d'être créatif (time to shiiine ✨) ! Cette étape correspond à l'UI (User interface).
On peut parler Webflow à présent ! La magie est prête à opérer.
Information intéressante : notre client peut suivre régulièrement les avancées du site grâce au lien « .webflow.io » .
À cette étape, le développeur Webflow intègre la maquette en reproduisant au pixel prêt le design réalisé lors des étapes précédentes. Il ajoute et paramètre le responsive du site, ajoute les réglages SEO pour vérifier la performance du site.
.gif)
Le développement d'un site Webflow demande du soin ❤️ A cette étape, nous mettons toutes les chances de votre côté pour que vous ayez un site ultra performant. Nous faisons généralement appel à des experts Growth et connectons bien souvent le site à des outils tiers.
Du test, toujours du test. Le projet ne s'arrête pas lorsque le développeur a terminé 🤭
Pendant cette ultime étape, nous faisons tester le site. Ce peut-être auprès d'adultes, d'enfants, de personnes âgées, sur ordinateur, tablette, mobile ....
Héhé, le résultat final répond-il aux attentes initiales de notre client ? Évidemment pardi (on s'en assure en reprenant le brief initiail tout de même) 😍 !
Pêle-mêle des indispensables en UX 👇 :
Il est recommandé d'utiliser un CMS système de gestion de contenu tel que Welflow ! Il facilitera la gestion de votre contenu et vous permettra de réaliser un design intuitif pour votre site et facile à naviguer.
Vous pouvez utiliser des templates professionnels réalisé par la communauté de designers Webflow pour faciliter la conception de votre site. N'oubliez pas de les personnalisez pour qu'ils reflètent votre image de marque 😉
Utilisez des styles CSS cohérents pour donner une apparence uniforme à toutes les pages de votre site.
Créez des boutons finger-friendly pour site mobile. 10 mm x 10 mm est la taille idéale d'après une étude du MIT Touch Lab.
Privilégiez le scroll au clic concernant l'organisation de vos pages. Mieux vaut une page avec 10 sections que 10 pages avec une section.
Respectez la règle des 3 clics. L'utilisateur doit pour pouvoir arriver rapidement à l'élément souhaité en moins de 3 clics.
Placez vos boutons dans des zones de confort. D'après la loi de Fitts, le temps qu’il vous faut pour accéder à un bouton dépend de sa taille et de sa distance par rapport à votre position initiale.
Ajoutez des call-to-action pertinents régulièrement. Votre utilisateur parcourt plus facilement le site, consulte plus de pages et peut être convertit plus vite.
Ajoutez des éléments de réassurance. Jouez avec les logos des partenaires, les témoignages clients, les bannières d'icons présentant les avantages du produit ...
Appliquez la psychologie des couleurs. Prenez en compte la signification des couleurs. Psst, j'ai un article pour vous.
Soignez votre copywriting. Choisissez des formulations claires, concises et simples (coucou l'UX writing).
Faites correspondre le design de vos boutons avec vos priorités. Donnez une taille plus élevée aux boutons prioritaires.
Enfin, n'oubliez pas de mesurer l'efficacité de votre site en utilisant des outils tels que Google Analytics. Cela vous permettra notamment de suivre le nombre de clics sur vos pages et l'efficacité de vos stratégies marketing.
In summary, to optimize the UX of your Webflow site, you must create a site responsive, can use a CMS Such as Webflow, work on the design of your site using Templates and consistent styles, and measure the effectiveness of your site using analysis tools such as Google Analytics. With these indispensable tools, you can building a website ergonomic, intuitive and efficient for your new customers.
What a great UX! That's the compliment your Webflow site should get from now on 😉
If you want to go further, I am sharing 8 Webflow elements to boost the UX of your site 🚀
