Utilisation des blocs Kadence pour les alertes

L'un des membres de la communauté Kadence Web Creator sur Facebook, Jake Pfohl, a récemment publié quelques exemples d'utilisation des blocs Kadence pour les alertes. Cette collection de blocs créatifs utilisant Kadence était une si bonne mise en œuvre des fonctionnalités de Kadence que nous avons contacté Jake, qui gère StartBlogging101.com et StartBloggingBlocks, pour voir si nous pouvions partager son message avec la communauté Kadence au sens large dans le cadre d'un tutoriel sur les alertes. Divulgation complète, Jake est un affilié de Kadence.

Jake a gentiment dit oui, alors voici quelques exemples de ses alertes qui devraient vous faire réfléchir à la façon dont vous communiquez des informations importantes aux visiteurs de votre site Web.

Pourquoi et quand un site Web doit utiliser des alertes

L'utilisation d'alertes dans votre site Web WordPress est inévitable, que vous communiquiez le succès de l'achèvement d'une activité ou que vous souhaitiez attirer l'attention sur un élément de contenu spécifique. Les alertes jouent un rôle important dans la conception de l'expérience utilisateur, qu'il s'agisse de fournir des commentaires sur l'action ou d'avertir les utilisateurs des conséquences de leurs actions. Prendre des décisions de conception conscientes concernant la présentation des alertes et utiliser des couleurs et des mises en page pour attirer l'attention sur les alertes est essentiel pour transformer une simple phrase en quelque chose qui attire l'attention d'un utilisateur sur un fait important.

Lorsque vous affichez une alerte à un utilisateur sur votre site, vous voulez qu'elle ait un certain poids. Il doit être reconnaissable en tant qu'alerte et immédiatement perceptible avec un message clair de ce qui se passe, de ce qui doit être fait ou de ce que l'utilisateur doit savoir.

Vous venez de lire ça ?

Malheureusement, même si le Web a commencé comme un moyen de partager du contenu écrit, nous avons appris au fil du temps que les utilisateurs lisent rarement et ne se tournent vers la documentation que lorsqu'ils sont en difficulté et ne peuvent pas comprendre intuitivement la tâche à accomplir.

Ils sont plus susceptibles d'abandonner que d'essayer de résoudre leur problème. En tant que telles, les alertes doivent être prises en compte et bien conçues afin que les utilisateurs obtiennent les données dont ils ont besoin pour réussir sur votre site Web avec autant de clarté et de gentillesse que possible.

Types d'alertes de site Web

Il existe différents types d'alertes qu'un utilisateur peut avoir besoin de voir sur un site Web. Ceux-ci incluent, mais bien sûr ne sont pas limités à :

Messages d'erreur

Les bons messages d'erreur sont polis, précis et constructifs. Ils doivent être clairement visibles, réduire le travail nécessaire pour résoudre le problème et éduquer les utilisateurs en cours de route. Les messages d'erreur doivent être brefs et précis tout en expliquant un peu aux utilisateurs comment fonctionne le système et en leur donnant les informations dont ils ont besoin pour mieux l'utiliser. Un message d'erreur signifie que quelque chose ne va pas, et il devrait y avoir un avertissement associé.

Messages de réussite

Il n'y a rien de plus déroutant pour un utilisateur que d'effectuer une action et de se demander ensuite si son action a abouti ou non. Par exemple, si un utilisateur remplit votre formulaire de contact, que se passe-t-il ensuite ? Le message est-il passé ? Quand allez-vous répondre ? Qui répondra ? Les utilisateurs veulent savoir que leurs actions ont eu la conséquence prévue, alors assurez-vous de leur faire savoir ce qui se passera ensuite. Même si quelque chose ne va pas et qu'il y a un bogue, il vaut mieux leur faire savoir que quelque chose n'allait pas que de leur faire savoir que cela s'est produit alors que ce n'était vraiment pas le cas.

Notifications de stock faible

Dans les implémentations de commerce électronique, une notification de faible stock peut indiquer à un utilisateur qu'il doit agir rapidement. Les notifications de stock peuvent encourager les utilisateurs à agir en fonction de la pénurie de l'article qu'ils achètent. Les notifications peuvent être le moyen idéal pour transmettre ces informations à vos acheteurs. Une alerte d'information pourrait être un moyen facile de le faire.

Notifications promotionnelles

Si votre boutique de commerce électronique organise une promotion, une notification concernant cette promotion peut faire la différence entre une fenêtre fermée après lèche-vitrine et une vente conclue.

Avis de panne

Si, pour une raison quelconque, vous avez une panne de système, même si elle n'est pas liée à votre site Web, une notification peut aider à réduire la surcharge du service client et aider les clients à se sentir soulagés en cas de problème. Par exemple, la notification d'un FAI indiquant qu'il y a une panne de service dans une zone spécifique peut réduire la charge d'assistance téléphonique. Si votre boutique rencontre des problèmes techniques avec votre système de messagerie d'assistance, informer les clients avant qu'ils ne tentent une demande peut être utile pour gérer les attentes.

Importance distinctive

Toutes les alertes ne sont pas créées égales. Une notification de stock faible ne devrait pas avoir la même gravité qu'un message d'erreur. Il existe plusieurs façons d'établir la gravité. Ceux-ci incluent la langue, les tailles de police, le style de police, la couleur du texte, les formes de bordure d'alerte, les styles, les tailles et même les images.

N'utilisez jamais la couleur comme seule indication d'importance. Incluez toujours des signaux redondants que les utilisateurs daltoniens peuvent voir. De plus, si vous utilisez des images dans les alertes, assurez-vous d'ajouter correctement le texte alternatif d'accessibilité et les étiquettes aria au besoin afin que les lecteurs d'écran puissent communiquer adéquatement les alertes importantes aux utilisateurs.

Standardisation des expériences d'alerte

S'assurer que la conception de vos alertes est standardisée garantit que les utilisateurs reconnaissent qu'ils sont alertés. Souvent, lorsqu'une alerte doit être affichée, un utilisateur a de nombreuses autres demandes d'attention. S'assurer que votre alerte se démarque, est stylisée d'une manière qui ressemble à une alerte garantit que votre alerte reçoive l'attention qu'elle requiert.

Le faire avec Kadence Blocks est facile. C'est là que le travail de Jake entre en jeu.

Comment créer diverses alertes de style avec Kadence Blocks

Jake a créé 4 types d'alertes différents, dont beaucoup peuvent être téléchargés gratuitement à partir de son service cloud (qui utilise Kadence Cloud). Vous pouvez voir comment les obtenir gratuitement sur son site. Mais nous voulions également vous montrer à quel point il est facile de développer vos propres alertes, personnalisées pour votre propre site Web, votre public et vos besoins de communication.

Jetons un coup d'œil aux alertes de Jake. Après avoir connecté la bibliothèque de conception Kadence Blocks sur notre site au serveur de Jake, nous voyons un certain nombre d'alertes stylisées que nous pouvons facilement intégrer à notre site. Certaines d'entre elles sont des options professionnelles, et Jake propose des éléments de conception au-delà des alertes qui sont également intéressants. (Nous laisserons Jake vous en parler.)

Nous pouvons télécharger les alertes gratuites de Jake via son implémentation Kadence Cloud et voir comment elles ont été conçues. Il les a organisés en 6 types principaux :

• Alerte info
• Alerte de réussite
• Alerte d'avertissement
• Alerte danger
• Alerte principale
• Alerte secondaire

Chacun utilise le style et la couleur pour communiquer des messages aux utilisateurs de manière cohérente. Si vous utilisez cette collection, il est évident que vous êtes alerté de quelque chose sur le site.

Comment il l'a construit

À l'aide de Kadence Blocks, Jake et l'équipe Start Blogging ont créé chaque alerte en utilisant différents styles disponibles dans Kadence. Ceux-ci sont tous définis dans un bloc de section Kadence. Les paramètres de base de son bloc de section d'alerte utilisent tous les éléments suivants :

• Le rembourrage du bloc de section d'alerte a été défini sur 1,5 REM pour le haut et le bas et sur 3 REM pour la gauche et la droite.
• La largeur de la bordure a été définie sur 0, sauf sur la gauche où elle est définie sur 4. La couleur de la bordure gauche est alors définie sur une couleur plus forte mais dans la même teinte que la couleur d'arrière-plan.
• Le texte de l'alerte est défini à l'aide d'un texte de paragraphe facilement personnalisable.

Construire ces blocs d'alerte est assez simple à faire, c'est l'une des raisons pour lesquelles nous voulions montrer ce que Jake avait fait. Vous pouvez facilement reproduire le travail de Jake, mais certains de ses blocs les plus complexes pourraient très bien valoir la peine d'être pro avec ses blocs en fonction de vos besoins.

Partage via le serveur cloud

Il convient de mentionner que Jake propose à la fois des versions gratuites et vend des versions professionnelles de ces conceptions construites sur Kadence Blocks à l'aide de Kadence Cloud, et il n'est pas le seul. Il existe une économie croissante de concepteurs, d'agences et de développeurs qui créent un contenu incroyable à l'aide de Kadence Blocks et créent ainsi des sources de revenus supplémentaires. Nous présenterons d'autres créateurs de Kadence dans les prochains articles de blog.

Vous pouvez utiliser Kadence Cloud non seulement pour créer une entreprise vendant des conceptions à d'autres utilisateurs de WordPress, mais vous pouvez également créer une instance Kadence Cloud sur laquelle vous partagez des éléments de conception entre vos différents sites Web. Si vous travaillez avec des clients qui créent leurs propres pages, vous pouvez proposer des éléments de conception sur votre propre instance cloud pour les aider à utiliser votre bibliothèque d'éléments de conception. Cela ne se limite bien sûr pas aux alertes. Tout ce qui peut être construit avec les blocs Kadence peut être ajouté à votre propre bibliothèque de conception.

Nous avons une explication vidéo complète qui explique comment procéder sur la page Kadence Cloud. Kadence Cloud est inclus dans Kadence Full Bundle, vous pouvez donc commencer à concevoir plus rapidement et à créer facilement des flux de revenus supplémentaires avec Kadence. Le Kadence Full Bundle comprend également un certain nombre d'autres outils utiles, notamment Kadence Conversions, Kadence Shop Kit et de nombreux autres outils utiles.