Skeuomorphisme : Comment je cherche à recréer le feeling d’un magnétophone

Le syndrome du faux bouton

Grâce à Studio Lamarck et aux retours de mon cofondateur Émile, j'ai repensé toute l'iconographie des boutons de la page d'enregistrement. Mon objectif principal : reproduire le rendu et le feeling d'un vrai magnétophone à cassette.

Le problème, c'est que pour simuler un bouton qui s'enfonce, comme je n'étais pas rentré dans les moindres détails de l'UI, le résultat ressemblait davantage à un décalage étrange, presque à un bug. Dès que j'ai montré les premiers écrans du parcours à Émile, il a tout de suite tiqué sur ce point.

Le contexte : Un mot sur MyMémoires

Avant de plonger dans le vif du sujet, un petit rappel sur le projet MyMémoires s'impose. Le but ? Enregistrer les souvenirs de nos anciens pour les transformer en biographie. Tout se fait naturellement, au fil de la discussion. L'application capte les échanges, en extrait automatiquement les éléments clés, puis les recompose pour structurer le récit de leur vie.

Dans cet article, on zoome spécifiquement sur une brique très précise du produit : l'interface qui permet tout simplement à l'utilisateur de lancer sa session de captation.

Retour vers le futur avec Claude

J'ai donc demandé à mon compère Claude de retravailler cet effet d'enfoncement de bouton. Au début, les différents prototypes générés ne donnaient pas satisfaction ; je n'avais pas l'impression de retrouver la résistance physique d'une vraie touche.

je n'avais pas l'impression de retrouver le bouton enfoncé. J'ai demandé à Claude de s'inspirer fortement des anciens radios cassettes en plastique des années 80-90. À ce moment-là, il a ressorti de son imagination un visuel parfait qui a servi de base pour réfléchir à ses boutons.

J'ai alors changé d'approche : j'ai demandé à Claude de s'inspirer fortement des vieux radiocassettes en plastique des années 80-90. À ce moment-là, il m'a sorti de son imagination un visuel parfait qui a servi de base de réflexion. Avec ce bouton rétro sous les yeux, ça a été beaucoup plus facile d'ajuster mon prompt. J'ai pu le guider précisément sur le positionnement des ombres et la colorimétrie pour qu'on ressente que le bouton s'enfonce, et pas juste qu'il glisse vers le bas.

Une fois ce calage réussi, il a été très facile d'itérer. J'ai pu produire la nouvelle interface avec un bouton beaucoup plus naturel, doté d'un vrai retour optique. L'utilisateur a désormais la sensation tangible d'appuyer sur un mécanisme.

D'une contrainte UI à une idée Produit

Finalement, le design "radiocassette des années 80" pur et dur n'a pas été conservé en l'état. Mais cette exploration m'a fait émerger une autre idée : pourquoi ne pas proposer différents skins pour la page d'enregistrement ?

J'ai demandé à Claude d'isoler ce côté rétro, très proche du matériel physique, pour en faire une base de travail. Je garde ça dans un coin de ma tête. Pourquoi ne pas distribuer des skins ? C'est une excellente mécanique de gamification pour récompenser les utilisateurs fidèles. S'ils font beaucoup de sessions d'enregistrement, ils débloquent un nouveau style pour leur interface. C'est le genre de système que j'aime bien et que je compte tester si la charge technique pour créer un éventail de modèles n'est pas trop lourde.

Le mot de la fin : Bienvenue chez Studio Lamarck

Pour finir, un petit point sur Studio Lamarck. Le projet est né au début de l'été et commence sérieusement à prendre forme. Il s'agit d'une association à but non lucratif dont l'objectif est simple : donner de la force aux créateurs, aux solo builders et aux développeurs indépendants. On veut vous permettre d'aller au bout de vos idées, de construire, d'héberger, de sécuriser et de rendre visibles vos produits.

Aujourd'hui, le studio s'articule autour d'un noyau dur de fondateurs et de quelques proches qui nous ont rejoints, mais la volonté est d'être ouvert à tous.

Si vous êtes en train de construire un projet et que vous avez besoin de soutien, d'échanger ou de challenger votre vision, n'hésitez pas à nous contacter à contact@studiolamarck.fr. La porte est grande ouverte. Notre but est de bâtir une véritable communauté d'entraide et de soutenir tout le monde, peu importe votre niveau d'avancement ou votre bagage tech.