Une journée productive malgré un réveil difficile après une soirée qui s’est prolongée !

# Amélioration du workflow de transcription

Avant de plonger dans les apprentissages du jour, j’ai passé un moment ce matin à explorer comment améliorer ma prise de notes et la rédaction de ces articles. Je me suis réveillé avec “la tête dans le *** " après être rentré tard et avoir pris un petit digestif et une bière pendant le repas, mais bon, ça fait partie de la vie !

La première chose que j’ai faite a été de regarder comment optimiser mon processus de transcription. Je suis tombé hier sur Whisper CPP que j’ai installé avec Homebrew hier, mais je ne l’avais pas utilisé.

Ce matin, j’ai donc téléchargé le modèle bin large v3 et j’ai fait plusieurs tests pour voir comment enregistrer simultanément l’écran et l’audio. Cette approche pourrait être très intéressante dans le futur pour directement enregistrer, retranscrire et créer des comptes-rendus de réunions avec Claude par exemple.

## Mon nouveau processus de transcription

Voici le workflow que j’ai mis en place et testé :

J’utilise CleanShot X, une application que j’utilise énormément pour faire des screenshots, mais qui permet aussi de faire de l’enregistrement d’écran. Grâce à cette fonctionnalité, je peux enregistrer à la fois mon micro et la sortie audio (ce que les autres personnes disent).

Une fois l’enregistrement terminé, je convertis le fichier en MP4, puis avec FFmpeg, je convertis la vidéo en audio en incluant tous les canaux audio. Ensuite, je passe ce fichier à Whisper pour obtenir une transcription d’une qualité équivalente à MacWhisper payant.

La seule différence notable, c’est que quand tu as plusieurs langages dans un même enregistrement (français et anglais par exemple), Whisper pourrait ne sortir que la version française et pas la version anglaise, ou inversement. C’est lui qui choisit, mais tu peux lui spécifier la langue que tu veux. Il est même possible de traiter le fichier deux fois : une fois pour la version française, une fois pour la version anglaise si tu sais qu’on a parlé dans les deux langues.

Ensuite, avec ces transcriptions, je peux les passer à Claude pour qu’il me sorte un résumé ou qu’il joigne les deux fichiers pour créer un fichier unifié avec les deux langues. C’est quelque chose de super intéressant que j’ai hâte d’exploiter davantage.

D’ailleurs cet article est transcrit avec Whisper.

# Pause sport et pratique Figma intensive

Après ma partie théorique d’apprentissage, j’ai décidé de faire une pause à 11h pour aller à la salle de sport. J’ai fait une trentaine de minutes de rameur, et maintenant que je suis en train de rédiger ce blog, j’ai encore mal aux bras et aux jambes ! Mais je pense que ça m’a fait du bien car j’ai vraiment besoin de bouger plus et de manière régulière.

Après avoir mangé des pâtes ce midi, j’ai fait une session vraiment super concentrée pour reproduire une interface Spotify sur Figma. Mais ce que j’ai fait de plus et de différent aujourd’hui, c’est que j’ai essayé d’intégrer des concepts beaucoup plus complexes dans ma manière de créer des interfaces sur Figma.

## Méthode de travail structurée sur Figma

La première chose que j’ai mise en place, c’est la création de styles en amont. J’ai répertorié et identifié la plupart des styles qui étaient disponibles dans l’interface que j’allais reproduire, et je les ai créés en styles globaux avant même de commencer le design.

Ensuite, j’ai créé au fur et à mesure des composants que je pouvais réutiliser. Finalement, grâce à la copie de référence qui m’a servi pour créer les styles et les composants, j’ai pu reconstruire l’interface de manière beaucoup plus fluide.

Le résultat ? J’ai passé seulement deux heures et demie à faire cette interface, et je me suis trouvé beaucoup plus à l’aise avec Figma que les jours passés. Cette approche structurée change vraiment la donne !

Juste avant de commencer la rédaction de cet article, je suis tombé sur une vidéo d’humour sur le logiciel Emacs, et je me suis regardé une présentation rapide sur ce qu’était Emacs et org mode. J’avais déjà vu ça dans le passé, mais c’était juste pour changer un peu les idées avant de passer à la rédaction.

Voilà donc pour le contexte de cette journée assez productive, qui était mon deuxième jour concernant les guidelines d’Apple.

---

# Apprentissages du jour

## Modèles mentaux et cohérence utilisateur

On a parlé des modèles mentaux que l’utilisateur construit lorsque qu’il utilise des applications. Il est super important de faire en sorte que, lorsqu’on construit des interfaces, on fasse référence à ces modèles mentaux que les utilisateurs ont construits au fil du temps. Cela permet d’avoir une consistance et peut améliorer l’expérience sur le produit.

Apple est particulièrement fort pour créer ces modèles de cartes mentales. Je pense qu’il sera important dans le futur de faire attention, lorsque tu veux créer des interfaces, à être sûr que tu fais référence à ces modèles mentaux qu’Apple a déjà construits.

Par exemple, ce que tu pourrais très bien faire, c’est lorsqu’il y a de nouveaux produits qui sortent, t’intéresser à comment Apple introduit ses fonctionnalités. Cela te donnera une bonne base pour comprendre comment maintenir cette cohérence avec les attentes des utilisateurs.

## Mécanismes de feedback

Nous avons également parlé des mécanismes de feedback. Il est important d’utiliser les systèmes de feedback parce qu’ils sont consistants dans toute l’utilisation et l’expérience utilisateur. Lorsqu’on utilise des systèmes qui fonctionnent et qui sont déjà compris par l’utilisateur, on augmente la crédibilité et la confiance dans l’outil.

## Pattern de retour en arrière (Undo)

On a abordé le pattern d’undo. Il est important de fournir des options pour que l’utilisateur puisse revenir en arrière. Par exemple, s’il a supprimé quelque chose, qu’il puisse le récupérer. C’est une sorte de corbeille en fait, une poubelle qu’on peut utiliser et dans laquelle on peut aller rechercher ce qu’on a jeté par erreur.

## Design cause-effet

Nous avons parlé des causes et effets en design. À partir du moment où on fait quelque chose dans l’application, il faut réfléchir à ce qu’on a la possibilité de changer en même temps et faire en sorte de le changer de manière appropriée.

Un exemple pratique : lorsque l’utilisateur est sur WhatsApp et que la personne de l’autre côté qui est en train de chatter avec l’utilisateur est en train de taper, l’interface signale à l’utilisateur que son correspondant est en train de taper. C’est écrit “typing” par exemple. C’est un feedback direct qui informe sur l’état de l’interaction.

## États par défaut

Chose importante : les états par défaut. C’était quelque chose que j’avais vu dans le design, au niveau des préférences. Il est important de parcourir un peu les réglages par défaut et de faire en sorte de les optimiser, parce que les utilisateurs utilisent généralement les paramètres par défaut.

## Progressive disclosure

On a parlé de progressive disclosure, qui est en effet quelque chose d’important pour révéler les informations au fur et à mesure, sans surcharger l’utilisateur dès le départ.

## Automatisation

Nous avons aussi parlé d’automatisation, donc tout ce qui facilite l’expérience en rajoutant des automatisations pour l’utilisateur. Par exemple, lorsque l’utilisateur est en train de taper, directement faire en sorte de proposer le texte suivant. Ça pourrait être aussi d’avoir des formulaires pré-remplis, etc.

## Indicateurs d’état

Les indicateurs d’état sont importants, mais il faut faire attention à les utiliser avec parcimonie et à ce qu’ils ne soient pas distrayants pour l’utilisateur. Ces indicateurs d’état doivent être sûrs d’être visibles pour l’utilisateur, mais ils ne doivent pas être exagérés.

Par exemple, l’exemple qui était donné dans le cours concernait une carte : au lieu d’avoir une grosse zone bleue autour du point de localisation où on se trouve, ce qui est beaucoup plus performant, c’est d’avoir juste un petit icône très léger et très subtil qui nous montre effectivement où on est, mais qui ne distrait pas l’utilisateur.

Au niveau des indicateurs d’état, il faut bien entendu penser à la hiérarchie : ce qui est critique va être beaucoup plus important et beaucoup plus imposant au niveau du design.

## Hiérarchie des contrôles

La hiérarchie au niveau des contrôles est également importante. Comme pour les états et les indicateurs d’état, plus l’action est importante, plus elle va avoir de place sur l’écran.

# Visual Design et langage visuel

## Système typographique San Francisco

On a parlé des systèmes de types et de la police San Francisco. Voici les points importants à retenir sur cette police de caractère :

### Tailles de base

Une des choses importantes à retenir, c’est que la police régulière sur iOS et iPad fait 14 points, mais par contre sur macOS elle fait 13 points. Il y a donc des petites subtilités, et c’est important de regarder les guidelines selon la plateforme.

Une chose aussi intéressante, c’est que la police petite fait 11 points sur iOS et iPad, et par exemple 10 points sur macOS.

### Variations de San Francisco

On a parlé des variations:

• San Francisco Mono est plus utilisée pour afficher du code
• San Francisco Compact est beaucoup plus pertinente pour les écrans qui sont beaucoup plus petits
• San Francisco Pro est un équilibre entre la neutralité et la personnalité, vraiment une balance entre les deux

### Hiérarchies typographiques

Il est important d’utiliser les hiérarchies des systèmes pour être sûr d’être cohérent dans le système lorsqu’on fait du design. Il y a du Large, du Headline, du Body text et des Captions, chacun avec une taille différente.

Si on se base sur les modèles prédéfinis, potentiellement on n’a pas à faire attention à ces détails. Mais si par exemple on crée une police personnalisée, il est important d’essayer de reproduire des équivalents.

Voici l’usage recommandé pour chaque niveau :

• Large : généralement pour la navigation et les écrans principaux
• Headlines : pour les zones de contenu
• Body text : pour l’information principale
• Captions : pour les petites parties où il y a du texte de support

### Fonctionnalités avancées

Il y a l’optical sizing. Ce qui est important à retenir, c’est qu’Apple, en tout cas la police San Francisco, s’adapte automatiquement au changement de la taille du design.

San Francisco gère aussi l’espacement automatique, donc on n’a pas à s’en faire pour cet aspect.

### Navigation et typographie

Le type de navigation est aussi important à connaître au niveau de la police de caractère. Lorsqu’on fait de la navigation, il est important d’adopter la taille à ce qu’on veut faire :

• Les titres larges vont créer par exemple une hiérarchie
• Pour le back button, c’est plutôt du body qu’on va utiliser
• Pour les tab bars, on utilisera du caption
• Les menu items, on utilisera du body size
• Les side bars, on utilisera du regular

### Texte responsive

Lorsqu’on parle de texte responsive, San Francisco s’adapte également automatiquement.

### Accessibilité

Lorsqu’on fait de la conception, il faut bien entendu qu’on prenne en compte l’accessibilité. Quelques conseils pour bien tenir compte de ça :

• Éviter les écritures bold et utiliser plutôt du regular
• Tout ce qui est ultralight, thin et light à éviter également

### Polices personnalisées

Tout ça, lorsqu’on gère San Francisco, ça passe bien. Par contre, si on veut implémenter des polices personnalisées, il faut bien faire attention à implémenter le dynamic type, la mise en gras du texte, être sûr d’avoir un contraste suffisant, et faire la différence entre la distinction des caractères et l’ajustement de la taille.

---

# Système de couleurs et mode sombre

Ensuite, on a parlé du système de couleurs et du mode sombre.

## Fondations du système de couleurs

Le système des couleurs et le mode sombre sont les fondations de l’écosystème d’Apple. Il y a des groupes de couleurs clés importants à connaître pour les systèmes de couleurs.

### Groupes de couleurs principaux

Il y a :

• Background colors (couleurs d’arrière-plan)
• Label colors (couleurs de labels)
• Fill colors (couleurs de remplissage)
• Separate colors (couleurs de séparation)
• Linked colors (couleurs de liens)
• Placeholder colors (couleurs de placeholder)
• Grouped background colors (couleurs d’arrière-plan groupées)

Ce qu’il faut retenir :

• Pour les background colors, on a généralement trois niveaux de hiérarchie
• Pour les labels, on en a 4
• Le fill color, c’est plutôt la teinte pour l’interface utilisateur et le background pour le contenu

### Conseil pratique pour le nommage des labels couleurs

Si on veut s’y retrouver, et c’est quelque chose d’intéressant que j’ai déjà mis en place cet après-midi, c’est que si l’on fait des labels et qu’on les crée dans le système de design, c’est important de les nommer d’une manière pertinente.

Par exemple, si on fait la couleur label primaire, on va nommer le style label-primary. Ou si on veut faire un background primaire ou un background secondaire, on va faire background-secondary ou background-primary.

## Couleurs sémantiques

Il faut savoir aussi qu’il y a des couleurs sémantiques, et elles expriment plutôt un rôle et un comportement.

Les rôles au niveau des couleurs sémantiques, on peut les diviser en plusieurs choses :

• Les couleurs des labels qui sont plutôt la hiérarchie du contenu
• La couleur du background qui indique le niveau d’élévation si on veut les mettre en évidence
• Le contenu, donc le groupage
• Au niveau des links, ça montrera l’interactivité
• Au niveau des séparateurs, ça indiquera les limites
• Au niveau des placeholders, ça pourrait indiquer un état temporaire
• Au niveau des contrôles, ça indiquera que ce sont des contrôles interactifs
• Au niveau des états, ça montrera si l’élément est actif ou inactif

## Hiérarchie des couleurs

Ce qu’il faut aussi retenir, c’est la hiérarchie au niveau des couleurs. On aura toujours du primary, secondary et tertiary. Ça peut nous aider pour montrer les relations, et c’est important de penser en niveaux lorsqu’on parle de hiérarchie de couleurs.

Il y a 3 niveaux essentiellement au niveau de la hiérarchie des couleurs : primaire, secondaire et tertiaire.

### Niveau primaire

Au niveau primaire, ça sera plutôt :

• Des backgrounds pour la zone d’affichage principale
• On utilisera la couleur primaire pour le contenu essentiel et les labels les plus importants
• Les interactions clés
• Les informations les plus proéminentes dans le design

### Niveau secondaire

Lorsqu’on utilise le secondaire, le deuxième niveau, ce sera plutôt pour:

• Faire du groupage dans la vue principale de plusieurs contenus.
• Pour des informations et des sous-titres qui sont en support au texte principal.
• Des couleurs moins proéminentes, par exemple des boutons secondaires et des sections d’interface contenue.

### Niveau tertiaire

Le niveau tertiaire, ce sera:

• Des éléments avec des groupes secondaires
• Des conseils et des informations complémentaires
• Des frontières visuelles subtiles (donc des limites subtiles au niveau du visuel)
• Des variations de profondeur pour le fond d’écran.

## Mode sombre

Lorsqu’on met en place le mode sombre, il faut le faire de manière à ce que la vue soit confortable au niveau de l’expérience, que l’on maintienne une hiérarchie et surtout, que l’on garde les fonctionnalités pertinentes.

Si on n’arrive pas à atteindre un de ces trois objectifs, c’est que le mode sombre n’est pas construit correctement.

### Conseil important

TIP : On prend en compte au début le thème sombre

### Avantage du système de couleurs

Le color system prend en compte le contraste automatiquement. Donc tant qu’on n’override pas et tant qu’on ne crée pas des couleurs personnalisées, et qu’on se tient au système de couleurs d’Apple, il n’y a pas de problématique au niveau du contraste.

## Considérations environnementales

Lorsqu’on parle des couleurs et lorsqu’on fait des tests, il faut bien entendu faire attention à prendre en compte l’environnement. Les couleurs sur les écrans ne s’affichent pas de la même façon si par exemple :

• On est en plein soleil
• L’utilisateur utilise moins de luminosité le soir par exemple
• Il utilise des filtres de couleur plutôt chauds ou froids pour réduire la lumière bleue par exemple
• Un device n’est pas un autre périphérique

Potentiellement, la couleur pourrait ne pas ressortir de la même couleur sur différents appareils. Donc c’est important de faire les tests en amont afin de vérifier la cohérence

## Couleurs personnalisées

Il est bien entendu possible d’utiliser et de créer ses propres couleurs personnalisées. Pourquoi ? Par exemple :

• On a une identité de marque qu’on veut reproduire
• On a besoin de visualiser des données et donc on va utiliser plutôt une couleur personnalisée
• Si on fait par exemple des jeux, des interfaces de jeux, potentiellement on va utiliser des couleurs différentes
• On veut avoir des couleurs uniques, différentes, spécifiques
• Si on utilise des applications créatives ou des outils, potentiellement on veut utiliser des couleurs personnalisées

### Précautions avec les couleurs personnalisées

À partir de ce moment-là, il est bien entendu évident qu’on peut le faire, mais il faut prendre un certain nombre de choses en compte, comme par exemple :

• Bien prendre en compte qu’il y a du thème sombre et du thème clair
• Il faut maintenir des contrastes qui sont cohérents
• Il faut surtout tenir compte de l’accessibilité

### Accessibilité et couleurs

Quand on parle d’accessibilité au niveau des couleurs personnalisées, c’est quelque chose qui est pertinent : s’il y a des personnes qui sont daltoniennes, elles pourraient potentiellement confondre certains types de couleurs. Si on le fait bien, ou si c’est quelque chose d’important à tenir en compte, on prendra en compte ces petits détails.

Par exemple, le rouge et le vert peuvent être confondus pour une certaine population d’utilisateurs. Potentiellement, on pourrait utiliser du bleu à la place du vert pour éviter cette confusion.

---

Voilà pour la partie d’aujourd’hui ! C’était quand même une journée chargée. J’étais pas très en forme ce matin, mais ça s’est bien passé finalement.

Il est 17h16, et je pense qu’il est venu le temps de se poser pour le weekend et de profiter des deux jours de chaleur qui nous attendent ici en Belgique.

Je te souhaite également une bonne soirée et un très bon week-end, et on se retrouve lundi !