Ivory : Précision Ludique Issue de 15 Ans de Savoir-Faire Tapbots

« Nous voulions créer le client Mastodon que nous voudrions utiliser nous-mêmes. » — Mark Jardine, Tapbots

Ivory est né des cendres de Tweetbot lorsque Twitter a supprimé l’accès API des tiers en 2023. Mais plutôt qu’un portage hâtif, Tapbots — l’équipe de deux personnes composée du designer Mark Jardine et du développeur Paul Haddad — a reconstruit ses 15 années de perfectionnement de l’UX de timeline pour un nouveau protocole social. Le résultat est le client Mastodon le plus fluide et le plus réactif disponible : aucun saccade lors du défilement ProMotion, des animations fluides à 120fps, et une personnalité qui fait de la consultation de votre timeline un plaisir comparable à l’ouverture d’un jouet favori.

Points Clés

La personnalité appartient à l’art et au son, pas à la typographie - Ivory utilise exclusivement les polices système, canalisant toute l’identité de marque à travers des illustrations de mascotte 3D, du retour haptique et des signaux audio distinctifs
15 ans d’itération s’accumulent - Tapbots a affiné l’interface de timeline depuis le Tweetbot original, et ce savoir-faire accumulé produit une application où chaque défilement, toucher et glissement semble inévitable
Les thèmes personnalisables respectent les préférences de l’utilisateur - Plutôt que d’imposer une palette unique, Ivory propose plusieurs thèmes (clair, sombre, noir OLED) avec des couleurs d’accentuation sélectionnables par l’utilisateur, rendant le système de design paramétrique plutôt que fixe
Le design sonore est une couche d’interface - Le tirer-pour-rafraîchir, la publication et la mise en favori ont chacun des signatures audio distinctives qui fournissent un retour sans nécessiter d’attention visuelle
L’animation native ProMotion sépare le bon de l’excellent - Conçu pour le 120fps dès le départ, chaque transition et défilement est optimisé pour les écrans ProMotion plutôt qu’adapté après coup

Pourquoi Ivory Compte

Ivory démontre ce qui se passe quand un duo designer-ingénieur passe plus d’une décennie à perfectionner un seul paradigme d’interaction. Alors que la plupart des clients Mastodon sont compétents mais ordinaires, Ivory porte la sagesse accumulée de chaque itération de Tweetbot — chaque optimisation de défilement, chaque perfectionnement du rendu de timeline, chaque geste ajouté, testé, puis conservé ou abandonné.

Réalisations clés : - A prouvé qu’une équipe de deux personnes peut créer le client de référence pour un protocole social entier - A transféré 15 ans de perfectionnement UX de timeline de Twitter vers Mastodon sans perdre en qualité artisanale - A établi que la personnalité d’une application (mascottes, sons, haptiques) peut coexister avec les conventions d’interface natives de la plateforme - A atteint un défilement natif ProMotion à 120fps que la plupart des applications avec des équipes plus importantes ne peuvent égaler

Principes de Design Fondamentaux

1. La Personnalité Par l’Art, Pas Par le Chrome

L’identité visuelle d’Ivory associe un art de mascotte 3D fantaisiste — un éléphant cartoon dans l’espace, avec fusées et planètes — à une interface d’application méticuleusement élaborée. Le site marketing est sombre avec une imagerie cosmique, tandis que l’application elle-même est épurée et systématique.

Cette division est délibérée. La mascotte et l’imagerie spatiale créent une connexion émotionnelle et une reconnaissance de marque sur le site marketing, la fiche App Store et les réseaux sociaux. À l’intérieur de l’application, l’interface est purement fonctionnelle — polices système, contrôles standard, densité appropriée à la plateforme. Toute la personnalité provient de l’iconographie, de l’animation et du son plutôt que de la nouveauté typographique ou chromatique.

La page marketing reflète cette philosophie : aucune propriété personnalisée CSS, aucun token de système de design, aucun framework. Juste des images soigneusement placées et des polices système épurées. Le système de design vit dans l’application, pas sur le site web.

2. La Timeline comme Interface Principale

La timeline à défilement infini est le modèle UX central. Tout le reste — composition, profil, paramètres — est secondaire par rapport au flux de lecture. Cette hiérarchie a été affinée à travers chaque version de Tweetbot puis d’Ivory, produisant une timeline qui semble sans friction d’une manière difficile à articuler mais immédiatement perceptible à l’usage.

┌──────────────────────────────────────────────────┐
│  ↓ Tirer pour rafraîchir (avec signal audio)     │
├──────────────────────────────────────────────────┤
│  🐘 Nom d'utilisateur                    il y a 2m│
│  Le contenu du post s'écoule naturellement avec   │
│  un espacement et une densité de lecture adaptés...│
│  ♡ 12    ↺ 4    ⤴ Partager                       │
├──────────────────────────────────────────────────┤
│  🐘 Autre Utilisateur                  il y a 15m│
│  La timeline est le produit. Tout le reste       │
│  existe pour soutenir l'expérience de lecture.   │
│  ♡ 8     ↺ 2    ⤴ Partager                       │
├──────────────────────────────────────────────────┤
│  Le défilement continue à 120fps...              │
└──────────────────────────────────────────────────┘

La performance de la timeline n’est pas simplement une prouesse technique — c’est une décision de design. Une timeline qui saccade ou perd des images interrompt le flux de lecture et brise l’illusion d’un flux continu. Tapbots traite le défilement à 120fps comme une exigence de design, pas comme un objectif d’optimisation.

3. Le Design Sonore comme Interface

Les applications Tapbots ont des sons distinctifs pour le tirer-pour-rafraîchir, la publication, la mise en favori et le boost. Ces signaux audio servent un objectif fonctionnel au-delà du plaisir : ils confirment qu’une action a réussi sans obliger l’utilisateur à regarder l’écran. Le son du tirer-pour-rafraîchir diffère de celui d’un rafraîchissement échoué. La publication a un ton de confirmation satisfaisant. La mise en favori produit un clic subtil.

Cette couche audio fonctionne de concert avec le retour haptique sur les appareils qui le supportent. La combinaison du son et de l’haptique crée une interaction à la sensation physique qui renforce le principe de design de longue date de Tapbots : les applications doivent donner l’impression d’objets tangibles.

4. Système de Thèmes Paramétrique

Ivory n’impose pas une identité visuelle unique. Les utilisateurs choisissent parmi plusieurs thèmes d’application — clair, sombre et noir OLED — avec des couleurs d’accentuation personnalisables. Cela signifie qu’aucune « palette Ivory » unique n’existe par conception. L’architecture sous-jacente est paramétrique : les couleurs sont définies par rôle (arrière-plan, surface, accentuation, texte) et résolues à l’exécution selon les préférences de l’utilisateur.

Cette approche respecte le fait qu’une application de timeline sociale vit sur l’écran d’accueil de l’utilisateur et est ouverte des dizaines de fois par jour. Les couleurs doivent correspondre à l’esthétique de l’utilisateur, pas au portfolio du designer.

5. Natif Uniquement, Sans Compromis

Ivory est construit exclusivement pour iOS et macOS en utilisant les capacités natives de la plateforme. Pas de Electron, pas de React Native, pas d’abstractions multiplateformes. Cet engagement se manifeste dans chaque interaction : l’application réagit aux paramètres de type dynamique du système, respecte les fonctionnalités d’accessibilité de la plateforme, s’intègre avec ShareSheet et Shortcuts, et utilise des modèles de navigation natifs qui semblent justes sur chaque taille d’appareil.

Le choix typographique souligne cet engagement. La pile de polices est purement système : -apple-system, helvetica-neue, helvetica, arial, sans-serif. Zéro police personnalisée. Sur les appareils Apple, cela se résout en San Francisco — la même police utilisée par chaque élément système natif, garantissant qu’Ivory semble être une extension transparente de la plateforme plutôt qu’une surcouche tierce.

Modèles Transférables

L’approche d’Ivory en matière de personnalité est le modèle le plus transférable : investir dans un art, un son et des animations distinctifs plutôt que dans une typographie personnalisée ou des schémas de couleurs inhabituels. Cette stratégie crée une identité de marque forte tout en maintenant une utilisabilité native à la plateforme.

Le système de thèmes démontre comment construire une base de design personnalisable :

struct AppTheme {
    let backgroundColor: Color
    let surfaceColor: Color
    let accentColor: Color
    let textPrimary: Color
    let textSecondary: Color
}

static let defaultTheme = AppTheme(
    backgroundColor: .black,
    surfaceColor: Color(white: 0.1),
    accentColor: Color(hex: "6C63FF"),  // Purple-blue default
    textPrimary: .white,
    textSecondary: Color(white: 0.8)
)

L’insight clé est que la structure du thème définit des rôles, pas des couleurs spécifiques. Arrière-plan, surface, accentuation, texte — ces rôles restent constants tandis que leurs valeurs changent selon les préférences de l’utilisateur. Cette approche paramétrique permet à Ivory de supporter les modes clair, sombre et noir OLED sans maintenir trois systèmes de design séparés.

Pour les implémentations web, le même modèle fonctionne avec les propriétés personnalisées CSS et un surcoût minimal :

:root {
  /* System-native approach — let the platform carry the weight */
  --font-sans: -apple-system, helvetica-neue, helvetica, arial, sans-serif;
  --body-size: 18px;
  --body-line-height: 1.5;
}

L’échelle typographique est délibérément modeste. Le plus grand titre (H3) ne fait que 28px au poids 600. H1 et le corps partagent la même taille de 18px — une inversion de la hiérarchie typique qui fonctionne parce que l’imagerie, pas le texte, porte le récit marketing. Sur une page où l’art d’éléphant 3D est le héros, les titres n’ont pas besoin de rivaliser pour l’attention.

Niveau	Taille	Graisse	Hauteur de ligne	Rôle
H3	28px	600	1.1	Titres de fonctionnalités
H2	20px	400	1.7	Descriptions de sections
H1 / Corps	18px	400	1.5	Texte standard

Leçons de Design

Ivory enseigne que la personnalité de marque et le design natif de la plateforme ne sont pas en conflit. En canalisant toute la personnalité dans l’art, le son et l’haptique — et en laissant la typographie, les contrôles et la navigation à la plateforme — Tapbots atteint à la fois une forte reconnaissance de marque et une utilisabilité sans faille.

La leçon des 15 ans d’itération est plus difficile à reproduire mais importante à comprendre : la qualité d’Ivory provient d’un perfectionnement accumulé, pas d’un seul sprint de design brillant. Chaque petite décision concernant la physique du défilement, les zones de toucher et le timing des animations a été testée auprès de millions d’utilisateurs sur plus d’une décennie. Cet avantage artisanal composé est le véritable fossé concurrentiel de Tapbots.

Évitez la tentation de se différencier par la nouveauté visuelle dans les applications basées sur des timelines. Une typographie tendance, des schémas de couleurs inhabituels et des modèles de navigation non standard créent tous de la friction dans une interface que les utilisateurs visitent des dizaines de fois par jour. Ivory prouve que des contrôles natifs avec des éléments de personnalité distinctifs (mascottes, sons, haptiques) créent un produit plus mémorable et plus utilisable que la différenciation visuelle seule.

Évitez la surcharge de fonctionnalités sur les pages marketing. Le site d’Ivory est presque entièrement visuel — art 3D et texte minimal. Les fonctionnalités se découvrent dans l’application, elles ne se vendent pas sur une page d’accueil. Cette approche fait confiance au fait que la qualité de l’expérience se vendra d’elle-même une fois que les utilisateurs auront téléchargé l’application.

Questions fréquemment posées

Qu’est-ce qui rend le design d’Ivory distinctif ?

Ivory atteint sa singularité par la personnalité plutôt que par un écart visuel par rapport aux conventions de la plateforme. La mascotte éléphant 3D fantaisiste, le design sonore distinctif et le retour haptique satisfaisant créent une forte reconnaissance de marque, tandis que l’interface elle-même utilise des polices système, des contrôles standard et une navigation native à la plateforme. Le résultat est une application qui semble uniquement Tapbots tout en étant parfaitement à sa place sur iOS et macOS.

Comment Ivory parvient-il à un défilement aussi fluide ?

Ivory a été conçu dès le départ pour les écrans ProMotion à 120 fps, et non adapté après coup. L’obsession de la performance du développeur Paul Haddad signifie que chaque optimisation du rendu de la timeline, chaque calcul de physique de défilement et chaque courbe d’animation ont été ajustés spécifiquement pour les écrans à taux de rafraîchissement élevé. L’approche exclusivement native (sans frameworks multiplateformes) élimine les couches d’abstraction qui introduisent généralement des pertes d’images.

Que peuvent apprendre les designers d’Ivory ?

La leçon principale est que la personnalité de marque peut résider dans l’art, le son et l’haptique plutôt que dans la typographie et la couleur. En utilisant des polices système et des contrôles standard, Ivory maintient une utilisabilité native tandis que la mascotte éléphant, les sons personnalisés et les retours haptiques satisfaisants créent une identité mémorable. Cette approche est plus durable que la nouveauté visuelle car elle fonctionne avec les mises à jour de la plateforme plutôt que contre elles.

Comment fonctionne le système de thèmes d’Ivory ?

Plutôt que d’imposer une palette de couleurs fixe, Ivory définit les couleurs par rôle (arrière-plan, surface, accent, texte) et permet aux utilisateurs de choisir parmi plusieurs thèmes — clair, sombre et noir OLED — avec des couleurs d’accent personnalisables. Cette approche paramétrique signifie que le système de design s’adapte aux préférences de l’utilisateur tout en maintenant une cohérence visuelle et des rapports de contraste appropriés dans toutes les combinaisons.

Pourquoi Tapbots a-t-il choisi une structure d’équipe à deux personnes ?

Mark Jardine (design) et Paul Haddad (développement) travaillent en binôme depuis le Tweetbot original. Cette collaboration étroite élimine la surcharge de communication des équipes plus importantes et permet aux décisions de design d’être implémentées immédiatement. L’obsession du craft de Jardine rencontre l’obsession de la performance de Haddad, produisant une application où la qualité esthétique et la performance technique sont toutes deux traitées comme non négociables.

Références

Ivory for Mastodon — Page officielle du produit Tapbots
MacStories Review — L’analyse approfondie d’Ivory par Federico Viticci
TechCrunch Launch Coverage — Couverture du lancement d’Ivory après la fermeture de API par Twitter
Texas Monthly Profile — Portrait de l’équipe Tapbots et de leur transition de Tweetbot à Ivory