coastdigitalgroup/coastai-skills

Système d'interface utilisateur pour les tableaux de prix

Objectif

Le système d'interface utilisateur pour les tableaux de prix fournit une méthodologie pour concevoir l'organisation visuelle et structurelle des paliers de prix. Il garantit que les utilisateurs peuvent facilement comparer les forfaits, comprendre les différences de valeur et sélectionner l'option appropriée sans surcharge cognitive. Ce système se concentre sur l'arrangement spatial des paliers, la hiérarchie des fonctionnalités et les affordances interactives (comme les toggles de facturation) qui soutiennent la décision d'achat.

Cas d'utilisation

• Conception de grilles d'abonnement pour les applications SaaS.
• Structuration d'offres de services par paliers (par exemple, forfaits Agence).
• Création de matrices de comparaison pour des bundles de produits physiques.
• Standardisation des mises en page de prix dans une entreprise multi-produits.
• Implémentation de « cartes » de prix responsives qui conservent leur contexte sur mobile.

Quand ne PAS l'utiliser

• E-commerce mono-produit : Utilisez optimisation-page-produit pour des articles uniques sans paliers concurrents.
• Devis personnalisés exclusivement destinés aux entreprises : Si chaque prix est « Nous contacter », concentrez-vous sur la conception du formulaire de capture de leads.
• Comparaison purement de données : Pour comparer les spécifications techniques de 10+ éléments, utilisez système-ui-tableau-données.
• Tarification dynamique/aux enchères : lorsque le prix est déterminé par des enchères ou des fluctuations du marché en temps réel.

Entrées

1. Paliers de forfait : Les noms, les prix et le public cible de chaque palier.
2. Inventaire des fonctionnalités : Une liste complète des fonctionnalités, classées par priorité.
3. Cycles de facturation : Options pour la facturation mensuelle ou annuelle et remises associées.
4. Cible primaire : Quel forfait est l'option « Goldilocks » ou « Meilleur rapport qualité-prix » ?
5. Jetons de style de marque : Espacement, typographie et échelles de couleurs du système parent.

Sorties

1. Anatomie de la grille tarifaire : Définition de la carte de palier (en-tête, prix, fonctionnalités, CTA).
2. Spécification du toggle de facturation : Conception pour basculer entre différentes modalités de paiement.
3. Logique de comparaison des fonctionnalités : Règles pour l'affichage, le masquage ou le résumé des fonctionnalités entre les paliers.
4. Stratégie de mise en évidence des paliers : Méthodes visuelles pour mettre en valeur le forfait recommandé.
5. Plan d'empilement responsive : Comment la grille s'adapte aux écrans mobiles.

Flux de travail

1. Structurer l'anatomie du palier

Appliquez le système-hiérarchie-visuelle à la carte de prix individuelle :

• En-tête : Nom du forfait et une brève proposition de valeur (par exemple, « Pour les équipes en croissance »).
• Bloc de prix : La devise, le montant et l'intervalle (par exemple, « /mois »). Assurez-vous que le montant est l'élément le plus visible.
• Liste des fonctionnalités : Les 5 à 7 fonctionnalités les plus importantes.
• CTA : Un bouton à contraste élevé pour sélectionner le forfait.

2. Concevoir le palier « phare » (mise en évidence)

Identifiez le forfait principal et rendez-le visuellement dominant :

• Élévation : Utilisez une ombre portée subtile ou une bordure pour le faire « ressortir ».
• Couleur : Utilisez une couleur de marque pour l'en-tête ou le bouton CTA.
• Badge : Ajoutez un ruban/badge « Le plus populaire » ou « Meilleur rapport qualité-prix ».
• Échelle : Augmentez légèrement la hauteur de la carte par rapport aux cartes voisines.

3. Établir la logique de facturation

Concevez le mécanisme pour basculer entre les cycles de facturation (par exemple, Mensuel vs Annuel) :

• Le toggle : Utilisez un interrupteur clair ou une interface à onglets.
• Signalisation de la remise : Indiquez clairement l'économie réalisée (par exemple, « Économisez 20 % ») près de l'option Annuelle.
• Tarification contextuelle : Assurez-vous que les prix dans les cartes se mettent à jour instantanément lorsque le toggle est actionné.

4. Gérer la comparaison des fonctionnalités

Organisez les fonctionnalités pour éviter le « Mur de texte » :

• Fonctionnalités principales : Listez les moteurs de valeur uniques en haut.
• Regroupement des fonctionnalités : Regroupez les fonctionnalités similaires (par exemple, « Support », « Sécurité ») si la liste est longue.
• Cases à cocher vs Texte : Utilisez des icônes pour les fonctionnalités binaires (Oui/Non) et du texte pour les limites (par exemple, « Jusqu'à 10 utilisateurs »).
• Lien « Voir tout » : Pour les paliers complexes, gardez la carte courte et fournissez un lien vers un tableau comparatif complet ci-dessous.

5. Définir l'empilement responsive

Planifiez la façon dont la grille se contracte pour les écrans plus petits :

• Défilement horizontal vs empilement vertical : Sur mobile, empilez les paliers verticalement pour garantir la lisibilité.
• En-tête collant : Pour les empilements verticaux, envisagez une barre collante qui maintient le nom du forfait et le prix visibles pendant que l'utilisateur fait défiler les fonctionnalités.
• Mode de comparaison des forfaits : Sur mobile, permettez aux utilisateurs de « glisser » entre les paliers pour les comparer horizontalement si un empilement vertical est trop long.
• Requêtes de conteneur : Privilégiez les requêtes de conteneur plutôt que les points d'arrêt de la fenêtre pour la carte de palier elle-même, car les grilles de prix sont souvent intégrées dans des contextes de largeur variable (par exemple, une section de page d'accueil vs une page de tarification complète).

Règles de décision

• Le pouvoir de trois : Trois paliers (par exemple, De base, Pro, Entreprise) est le nombre optimal pour réduire la paralysie du choix.
• Proéminence du prix : Le prix doit être le deuxième élément le plus visible après le badge « Meilleur rapport qualité-prix ».
• CTA cohérents : Tous les paliers doivent avoir un CTA à la même position verticale (généralement aligné en bas de la carte).
• Règle « Pas de conditions cachées » : Affichez toujours la fréquence de facturation près du prix (par exemple, « 29 $/mois facturé annuellement »).
• Clarté binaire : Utilisez des coches claires et à contraste élevé pour les fonctionnalités incluses ; utilisez un « X » atténué ou omettez simplement les fonctionnalités exclues pour éviter un bruit visuel négatif.

Contraintes

• Accessibilité : Les toggles doivent être accessibles au clavier et exposer leur état via aria-checked ou aria-pressed. Le texte du prix doit respecter le contraste WCAG AA (4.5:1), et toutes les cibles interactives (toggle, boutons CTA) doivent respecter la taille minimale de cible WCAG 2.2 24x24px (2.5.8).
• Responsivité : Les cartes de prix ne doivent jamais avoir une largeur fixe ; elles doivent être fluides dans le système-grille-responsive.
• Prise en charge des devises : Conception pour des longueurs de symboles de devise variables (par exemple, « 10 $ » vs « 1 000 kr ») et utilisez des propriétés CSS logiques (margin-inline, padding-inline) afin que les mises en page s'adaptent correctement pour les locales RTL.

Schémas d'échec courants

• Surcharge de fonctionnalités : Lister 20+ fonctionnalités dans une seule carte, la rendant impossible à parcourir.
• Toggles invisibles : Rendre l'interrupteur de cycle de facturation si petit que les utilisateurs ne réalisent pas qu'ils peuvent obtenir une remise.
• Le « CTA flottant » : Boutons qui ne sont pas alignés entre les cartes, donnant un aspect désorganisé à la grille.
• Tarification ambiguë : Ne pas préciser si un prix est par utilisateur ou un montant forfaitaire avant le paiement.
• Manque de différenciation des paliers : Des forfaits qui se ressemblent tellement que l'utilisateur ne sait pas lequel choisir.

Critères de validation

• Une hiérarchie visuelle claire existe entre les paliers (le palier recommandé est mis en évidence).
• Les prix sont l'élément le plus visible après les noms des paliers.
• Le toggle de facturation est clairement visible et met à jour les prix instantanément.
• Les fonctionnalités sont limitées aux 5 à 7 premières par carte.
• Les CTA sont alignés horizontalement sur toutes les cartes de la grille.
• La vue mobile empile les cartes verticalement ou fournit un modèle de glissement accessible.
• Tous les éléments interactifs (toggles, boutons) sont accessibles au clavier.
• Les rapports de contraste pour les prix et les badges respectent WCAG AA.