Guide des Composants MDX - Showcase

Cet article démontre tous les composants MDX avancés disponibles pour créer du contenu riche et interactif dans l'Academy.

Callouts

Les callouts permettent de mettre en évidence des informations importantes avec 4 types différents.

Information

Ceci est un callout d'information avec un titre. Utilisez-le pour partager des détails importants.

Astuce Pro

Les callouts de type "tip" sont parfaits pour partager des conseils pratiques et des bonnes pratiques.

Attention

Les avertissements attirent l'attention sur des points critiques ou des erreurs courantes à éviter.

Danger

Les callouts de danger signalent des risques importants ou des actions potentiellement destructrices.

Code Blocks

Les blocs de code incluent maintenant un bouton de copie et supportent l'affichage du nom de fichier.

hljs typescript

// Exemple de code TypeScript
interface User {
  id: string
  email: string
  name: string
}

async function fetchUser(id: string): Promise<User> {
  const response = await fetch(`/api/users/${id}`)
  return response.json()
}

Le code inline fonctionne aussi : const greeting = "Hello World".

Steps / Timeline

Utilisez le composant Steps pour décrire des processus étape par étape.

Définir les objectifs

Commencez par identifier clairement ce que vous voulez apprendre de vos utilisateurs. Quelles hypothèses voulez-vous valider ?

Préparer les questions

Créez une liste de questions ouvertes basées sur les principes du Mom Test. Évitez les questions hypothétiques.

Recruter les participants

Identifiez et contactez des utilisateurs représentatifs de votre cible. Visez 5-8 interviews pour commencer.

Mener les interviews

Posez vos questions, écoutez activement et prenez des notes détaillées. Creusez les réponses intéressantes.

Analyser les résultats

Synthétisez vos notes, identifiez les patterns et extrayez les insights actionnables.

Accordion / FAQ

Les accordions sont parfaits pour les questions fréquentes ou pour organiser du contenu dense.

Le Mom Test est une méthodologie d'interview utilisateur créée par Rob Fitzpatrick. Elle repose sur des questions sur le passé plutôt que l'avenir, évitant ainsi les biais de validation.

Commencez avec 5-8 interviews. Vous commencerez à voir des patterns émerger. Continuez jusqu'à atteindre la saturation (quand de nouvelles interviews n'apportent plus d'insights nouveaux).

Utilisez votre réseau existant, les réseaux sociaux, les forums spécialisés, ou des plateformes de recrutement. L'important est de cibler des personnes qui correspondent à votre utilisateur idéal.

Quotes avec Attribution

Les citations enrichissent vos articles avec des témoignages ou des références d'autorité.

The measure of usefulness of an early customer conversation is whether it gives us concrete facts about our customers' lives and world views.
Rob Fitzpatrick
The Mom Test

Get out of the building and talk to customers. There are no facts inside your building, only opinions.
Steve Blank
The Startup Owner's Manual

Images avec Zoom

Les images peuvent être agrandies au clic pour une meilleure visualisation.

Équipe en réunion — Les interviews utilisateurs en équipe permettent de croiser les observations et de capturer plus de détails.

Tables

Les tableaux sont automatiquement stylisés pour une meilleure lisibilité.

| Méthode | Avantages | Inconvénients | Quand l'utiliser | |---------|-----------|---------------|------------------| | Sync | Interaction directe, creuser profond | Chronophage | Découverte initiale | | Async | Scale, moins de biais | Moins de profondeur | Validation quantitative | | Hybride | Meilleur des deux | Complexe à gérer | Recherche continue |

Listes

Les listes à puces et numérotées sont stylisées automatiquement :

Bonnes pratiques d'interview :

Posez des questions sur le passé, pas l'avenir
Écoutez plus que vous ne parlez (ratio 80/20)
Creusez les réponses avec "Pourquoi ?" et "Comment ?"
Prenez des notes détaillées pendant ou juste après
Cherchez des faits concrets, pas des opinions

Erreurs courantes à éviter :

Parler de votre solution trop tôt
Poser des questions hypothétiques ("Utiliseriez-vous... ?")
Chercher la validation au lieu de la vérité
Ignorer les signaux négatifs
Ne pas creuser les réponses vagues

Typography Optimisée

Le texte est optimisé pour une lecture confortable avec :

Line-height de 1.7 pour le corps du texte
Max-width de 65 caractères pour éviter la fatigue oculaire
Spacing approprié entre les éléments
Letter-spacing ajusté sur les titres

Le texte en gras et en italique est également supporté, ainsi que les liens vers d'autres ressources.

Conclusion

Ces composants permettent de créer des articles Academy riches et engageants. N'hésitez pas à les combiner pour créer du contenu éducatif de qualité !