Discipline : Expérience utilisateur (UX) et design de service

Conception éthique de parcours humains fluides sur interfaces web, vocales ou immersives, centrée sur la cognition, l’accessibilité et la sobriété.
Mots-clés sémantiques : design conversationnel, ergonomie cognitive, parcours utilisateur, UX éthique, interfaces multimodales, sobriété attentionnelle

  • Effet stack sticky

    L’effet stack sticky (ou sticky stack) est une technique de mise en page web où plusieurs éléments (souvent des « cards ») sont empilés verticalement, et lorsqu’un utilisateur fait défiler la page (scroll), chaque élément devient positionné de façon fixe (sticky) au fur et à mesure qu’il atteint le haut de la fenêtre, jusqu’à ce qu’il soit remplacé par le suivant. Cela crée un effet visuel fluide où les cartes semblent s’empiler ou se superposer temporairement en haut de l’écran pendant le défilement.

    Ce comportement combine :

    • position: sticky en CSS,
    • Un conteneur avec une hauteur suffisante pour permettre le scroll,
    • Une gestion subtile des z-index et des offsets (top) pour contrôler l’ordre d’empilement.

    See the Pen effet stack sticky by Arrami stéphane (@citywizz ) on CodePen .

  • Civic tech de l’information et des communs

    Il s’agit d’une branche de la civic tech centrée sur :

    • L’accès équitable, libre et durable à l’information publique, culturelle ou scientifique
    • La construction, la préservation et la diffusion de communs informationnels (bases de données publiques, archives ouvertes, contenus éducatifs libres, etc.)
    • L’interopérabilité, la réutilisabilité et la découvrabilité des ressources numériques
    • L’autonomie des structures intermédiaires (bibliothèques, médiathèques, centres culturels, associations) dans leur capacité à gérer, structurer et partager leurs propres contenus sans dépendre de géants technologiques

    Cette approche privilégie :

    • Des infrastructures légères, sobres et auto-hébergeables
    • Des CMS documentaires ou bases de connaissances orientés métadonnées, accessibilité et pérennité
    • Des moteurs de recherche internes intelligents, respectueux de la vie privée
    • Une architecture de l’information claire, inclusive et orientée usages publics

    Sous-domaines illustratifs

    1. Infrastructures documentaires citoyennes
      → Outils comme Omeka S, Kiwix, Publik, Archifiltre, ou des CMS sobres (Hugo, PubliForge, Dotclear, SPIP) pour structurer et diffuser des collections patrimoniales, éducatives ou associatives.
    2. Médiation numérique et accès public à l’information
      → Interfaces web accessibles dans les bibliothèques/médiathèques, bornes locales hors ligne, portails documentaires collaboratifs.
    3. Communs numériques locaux ou sectoriels
      → Bases de données partagées entre acteurs culturels, plateformes de mutualisation de ressources (ex. catalogues de médiathèques interconnectés via des API ou protocoles ouverts).
    4. Technologies de la résilience informationnelle
      → Auto-hébergement, formats ouverts, sauvegardes distribuées (IPFS, Dat), indexation sémantique (schema.org, Wikidata), compatibilité avec Google Dataset Search ou HAL.
    5. Design inclusif et sobre pour les services publics numériques
      → UX centrée sur les publics fragiles ou éloignés du numérique, interfaces WCAG/RGAA, absence de tracking, performances optimisées même en bas débit.

  • Engagement cognitif en numérique

    L’engagement cognitif en numérique désigne le degré d’investissement mental actif d’un utilisateur lorsqu’il interagit avec un contenu ou un dispositif numérique : il implique l’attention, la réflexion, la mémorisation, la prise de décision ou la résolution de problèmes, plutôt qu’une simple réaction passive ou émotionnelle.

    Contrairement à l’engagement comportemental (clics, temps passé) ou émotionnel (réactions affectives), l’engagement cognitif se manifeste lorsque l’utilisateur traite activement l’information, établit des liens avec ses connaissances antérieures, ou s’implique dans une tâche exigeante (comprendre une donnée complexe, répondre à une question, co-construire un raisonnement).

    Dans la conception numérique (UX, éditorial, pédagogique ou stratégique), favoriser l’engagement cognitif revient à :

    • Clarifier l’intention du contenu (via une Single Big Idea, une hiérarchie visuelle forte),
    • Réduire la charge cognitive inutile (éliminer le bruit visuel, simplifier les parcours),
    • Stimuler la participation active (questions, micro-décisions, feedback en temps réel).

    C’est un levier clé pour transformer une simple exposition à l’information en apprentissage, mémorisation ou changement de perception.

  • Highered Design

    Le site highered.design est un design system dédié au secteur de l’enseignement supérieur (« higher education » en anglais).

    Il a été créé pour répondre aux besoins spécifiques des universités, collèges et institutions académiques en matière de communication numérique cohérente, accessible et efficace.

    Objectif :

    Aider les établissements d’enseignement supérieur — souvent dotés de ressources limitées en design — à créer des sites web professionnels, inclusifs et faciles à maintenir, sans repartir de zéro.

    Caractéristiques principales :

    • Ciblage sectoriel : spécifiquement adapté aux structures académiques (admissions, recherche, vie étudiante, événements, etc.).
    • Open source : gratuit et modifiable, encourageant la collaboration entre institutions.
    • Fondé sur des standards : respecte les normes d’accessibilité (WCAG), la responsivité et les bonnes pratiques SEO.
    • Intégration technique : souvent fourni avec du code (HTML/CSS/JS) et des fichiers Figma ou Sketch pour faciliter l’adoption par les équipes design et développement.
    • Modularité : permet aux universités de personnaliser les couleurs, typographies et composants tout en conservant une structure UX solide.

  • Workflow complexe

    Un workflow complexe est un ensemble de processus structurés impliquant plusieurs étapes et potentiellement des automatisations.

    Un worlflow ou processus complexe contient un ou plusieurs enchaînement d’étapes successives nécessaires pour que l’utilisateur accomplisse une tâche complexe par exemple la création d’un compte, le passage d’une commande, la configuration d’un produit, etc..

    Ce type de processus peut inclure divers types d’interactions, telles que des formulaires, des validations, des choix dynamiques adaptés aux actions de l’utilisateur, et d’autres éléments fonctionnels.

    Pour améliorer l’expérience utilisateur, il est souvent recommandé d’inclure un indicateur de progression afin de montrer clairement à l’utilisateur où il se trouve dans le processus, ainsi que les étapes restantes.

    Syn. : Processus complexe, processus multifacétisé, parcours utilisateur avancé, séquence d’étapes progressives, flux opérationnel élaboré, procédure structurée, cycle d’action complète, trajet décisionnel, cheminement interactif

  • Passerelle de paiement – payment gateway

    Une passerelle de paiement (ou payment gateway en anglais) est un service technique sécurisé qui permet à une boutique en ligne, une application ou un site web de traiter les paiements électroniques effectués par les clients via carte bancaire, virement, porte-monnaie numérique ou autre moyen de paiement.

    Elle agit comme intermédiaire entre le commerçant, le client et les institutions financières (banques, réseaux de cartes comme Visa/Mastercard).

    Son rôle principal :

    1. Crypter les données sensibles (numéro de carte, date d’expiration, etc.) lors de la transaction,
    2. Transmettre ces données à la banque du client (banque émettrice) pour vérification,
    3. Obtenir une réponse (acceptation ou refus),
    4. Notifier le commerçant et finaliser le transfert des fonds vers son compte bancaire (souvent via un compte marchand).

    La passerelle garantit que le site du commerçant ne stocke jamais les données bancaires, ce qui réduit drastiquement les risques de piratage et simplifie la conformité aux normes de sécurité (notamment PCI DSS).

    Services appropriés – Comparaison par profil

    Voici une sélection des passerelles de paiement les plus pertinentes, classées selon le type de projet et les besoins spécifiques :

    PasserelleType / ModèleProfil idéalPoints forts
    StripeFreemium → PayantStartups, SaaS, e-commerce tech, développeursAPI ultra-flexible, support des abonnements, multi-devises, conformité RGPD/PCI DSS native, outils anti-fraude avancés.
    PayPalFreemiumPetites boutiques, micro-entreprises, particuliersReconnaissance mondiale, confiance client élevée, intégration rapide, paiement sans compte (guest checkout).
    PayZen (Lyra)Payant (B2B)PME/PMI françaises, secteur traditionnelSolution européenne, support francophone, conforme HDS (santé), hébergement en UE, idéal pour secteurs réglementés.
    MolliePayant (par transaction)E-commerces européens, UX centrée clientInterface claire, nombreux moyens locaux (iDEAL, Bancontact, Sofort), pas de frais mensuels, excellent support.
    SquareFreemiumCommerçants physiques + en ligne (omnicanal)Idéal si vous avez aussi une caisse physique ; lecteur de carte + boutique en ligne synchronisés.
    AdyenEntreprise (volume élevé)Grandes entreprises, marketplaces, scale-upsTraitement global (online + offline + mobile), gestion unifiée des paiements internationaux, taux négociés.
    Hello bank! Paiements (BNP) / PaylibB2B bancaireTPE/PME déjà clientes d’une banque françaiseIntégration directe avec votre banque, pas de tiers, mais moins flexible techniquement.
    LemonwayRéglementé (PSF)Plateformes de crowdfunding, marketplaces, fintechSpécialiste des comptes de paiement électronique et du split de paiement (ex. : prélever une commission sur une vente).

    Critères clés pour choisir

    BesoinPasserelle recommandée
    Simplicité & rapiditéPayPal, Mollie
    Contrôle technique & automatisationStripe, Adyen
    Conformité RGPD / souveraineté européennePayZen (Lyra), Lemonway
    Abonnements / paiements récurrentsStripe, PayPal
    Vente internationale (multi-devises)Stripe, Adyen, Mollie
    Intégration avec WooCommerce / ShopifyToutes, mais Stripe + PayPal sont natifs
    Pas de frais fixes (seulement %)Mollie, PayPal
    Support francophone réactifPayZen, Lemonway

    Attention aux pièges

    • Frais cachés : certains prestataires facturent des frais d’inactivité, de remboursement ou de change.
    • Délai de décaissement : 2 à 7 jours en moyenne, critique si trésorerie tendue.
    • Non-conformité PCI DSS : évitez les solutions « maison » ou non certifiées.
    • Verrouillage technologique : certaines plateformes rendent difficile l’export des données clients.

  • Tokens Studio

    Tokens Studio est un outil central dans les workflows modernes de design système. Il permet aux équipes produit, design et développement de :

    • Définir des design tokens de façon collaborative : couleurs, typographies, espacements, durées d’animation, ombres, etc., sous forme de variables sémantiques (ex. --color-primary-action).
    • Organiser ces tokens en modes (thèmes clair/sombre, plateformes web/mobile) et en hiérarchies imbriquées.
    • Exporter les tokens vers Figma (sous forme de Variables Figma) et vers le code (JSON, CSS, SCSS, Tailwind, iOS, Android, etc.) via des formats agnostiques.
    • Synchroniser en temps réel les décisions design avec le code source, souvent via GitHub ou un design system platform.
    • Éviter la duplication et garantir la cohérence visuelle à grande échelle.

    Contrairement à la gestion native des Variables Figma (introduites en 2023), Tokens Studio propose :

    • Une interface dédiée et plus puissante pour la gestion de tokens complexes.
    • Un format de stockage basé sur JSON/YAML, facile à versionner.
    • Une intégration robuste avec des outils comme Style Dictionary, Storybook, Zeroheight, ou des pipelines CI/CD.
    • La possibilité de transformer les tokens (ex. convertir des couleurs HSL en hexadécimal selon la plateforme cible).

    Site officiel : https://tokens.studio
    Plugin Figma : Tokens Studio for Figma

  • Écriture numérique

    L’écriture numérique est un système de pensée, de transmission et d’action qui structure les interfaces, les contenus, les algorithmes, les bases de données et les interactions humaines en ligne.

    Elle inclut le code, les métadonnées, les microformats, les entités sémantiques, les commentaires, les légendes, les descriptions produits, les newsletters, les scripts vocaux, les prompts d’IA tout ce qui nomme, relie, organise et rend lisible l’expérience numérique.

    Contrairement à une croyance courante, elle ne se résume pas à du « texte joli » : elle est l’ossature invisible de toute visibilité, crédibilité et conversion en ligne.

    Dans un monde saturé d’images, c’est elle qui permet à une création une robe, un atelier, une vision de raconter son positionnement, son histoire, sa valeur, et de se faire trouver par celles qui la cherchent.

    L’écriture SEO ou rédaction web optimisée est une pratique stratégique de l’écriture numérique, orientée vers la découverabilité et la performance.

  • Filtres de recherche YouTube

    Les filtres de recherche YouTube sont des outils intégrés à la barre de recherche de la plateforme qui permettent aux utilisateurs d’affiner les résultats en fonction de critères spécifiques tels que le type de contenu, la date de publication, la durée, la pertinence ou la popularité.

    Leur objectif est d’améliorer la précision et la pertinence des résultats, en facilitant la découverte de vidéos correspondant aux besoins ou préférences de l’utilisateur.

    En 2026, YouTube a mis à jour ces filtres pour simplifier leur usage et mieux refléter la manière dont les contenus sont évalués par ses algorithmes :

    • Filtre « Shorts » : ajouté dans la catégorie Type, il permet d’isoler les vidéos au format court (moins de 60 secondes), distinctes des vidéos classiques.
    • Renommage de « Trier par » en « Priorité » : cette modification vise à clarifier que l’utilisateur choisit ce qu’il souhaite mettre en avant (ex. : pertinence, popularité, date), et non simplement un ordre mécanique.
    • Remplacement de « Nombre de vues » par « Popularité » : ce nouveau critère intègre plusieurs signaux (temps de visionnage, engagement, rétention, etc.) pour identifier les vidéos qui suscitent un réel intérêt, au-delà du simple compteur de vues.
    • Suppression de certains filtres : les options « Dernière heure » (dans la date de mise en ligne) et « Trier par note » ont été retirées pour des raisons techniques et d’expérience utilisateur, sans altérer les fonctionnalités essentielles.

    Ces ajustements visent à rendre la navigation plus intuitive, tout en alignant les outils de recherche sur les logiques actuelles de recommandation algorithmique — notamment celles influencées par l’intelligence artificielle et la compréhension sémantique du contenu.

  • Product Designer

    Concepteur·trice d’objets numériques utiles, pas styliste d’écrans

    Idées reçues fréquentes

    Il·elle choisit les couleurs, les polices et les icônes pour rendre une appli « jolie ».

    Cette vision réductrice confond esthétique visuelle et conception d’un objet fonctionnel. Elle oublie que le design produit numérique commence bien avant l’interface : par la compréhension d’un problème humain, et se termine bien après : par l’évaluation de son usage réel.

    Ses missions

    Le·la Product Designer conçoit des produits numériques (applications web, mobiles, logiciels, services interactifs) en articulant besoins utilisateurs, contraintes techniques et objectifs métier.
    Il·elle mène des recherches utilisateurs, définit des parcours, prototypage des interactions, conçoit les interfaces (UI) et valide leurs hypothèses par des tests.
    Il·elle travaille en continu avec les équipes produit, développement, marketing et support, tout au long du cycle de vie du produit — de l’idée au déploiement, puis à l’itération.

    Le sens du métier

    Créer des outils numériques qui respectent le temps, l’attention et l’intelligence de leurs usagers — en évitant la surcharge, la manipulation et l’illusion de simplicité.

    Champ d’action

    • Mener des entretiens et observations utilisateurs
    • Cartographier les parcours et points de friction
    • Concevoir des wireframes, prototypes interactifs et maquettes haute fidélité
    • Définir et faire évoluer un design system (composants, règles, tokens)
    • Collaborer avec les devs sur la faisabilité et l’implémentation
    • Tester les interfaces avec de vrais usagers (tests utilisateurs, A/B testing)
    • Mesurer l’impact du design via des indicateurs (taux de réussite, erreurs, satisfaction)

    Outils et terrains

    Conception : Figma, Sketch, Adobe XD, Penpot

    Prototypage : ProtoPie, Framer, Principle

    Recherche : Maze, UserTesting, Notion (pour les insights)

    Collaboration : Jira, Linear, Miro, Confluence

    Principes : design thinking, lean UX, atomic design, heuristiques Nielsen

    Confusions fréquentes

    Pas un graphiste : il·elle ne crée pas d’affiches ou de logos, mais des systèmes interactifs.

    Pas un développeur front-end : il·elle ne code pas (ou très peu), mais conçoit ce qui doit être codé.

    Pas un UX Writer : il·elle travaille le micro-copy, mais ne se spécialise pas dans la rédaction éditoriale.

    Rémunération indicative (France, brut annuel)

    – Junior (0–3 ans) : 30 000 € – 45 000 €
    – Confirmé·e (3–6 ans) : 45 000 € – 60 000 €
    – Senior / Lead (6+ ans, avec pilotage de design system ou équipe) : 60 000 € – 75 000 €+

    Où le rencontrer ?

    Startups, scale-ups, grands groupes (tech, finance, e-commerce), agences de design, services publics numériques, studios de création, éditeurs de logiciels.

    Autres appellations

    Digital Product Designer, Designer produit numérique, UX/UI Designer (dans les structures où les rôles ne sont pas dissociés), Interface Designer (terme à risque : trop focalisé sur le visuel)