Bonjour ! J’espère que tu vas bien. Nouvelle journée en Belgique avec 25 degrés au compteur, et mon chat qui veut jouer avec moi !

Nous avons repris un abonnement avec ma chérie à la salle de sport et, quoi de mieux que d’aller nager un peu ? On essaie de faire ça une fois par semaine. On y est déjà allés deux semaines de suite ! Avec l’abonnement à la salle près de chez nous, on ira beaucoup plus souvent. Je suis rentré avec les bras complètement cassés mais content, et j’ai très bien dormi.

# Une journée bien remplie

Réveil tranquille ce matin avec un bon petit déjeuner, puis j’ai attaqué la journée avec la partie théorique : le nouveau cours sur les Human Interface Guidelines d’Apple.

Ce matin, juste après avoir fini le cours, je me suis concentré sur l’interface V2 de ContactHive en essayant de modifier l’application sur base de ce que j’avais appris en théorie. Et cet après-midi, j’ai fait un nouvel exercice sur Figma en reproduisant l’interface Instagram (je mettrai la photo juste en dessous).

# Apprentissages du jour

## Vue d’ensemble des Human Interface Guidelines

C’est un cours de 5 heures divisé en 5 jours, et j’ai l’impression que c’est assez consistant. Ces guidelines seront toujours pertinentes à consulter dans le futur, surtout avec le nouveau LiquidGlass qui a été annoncé. Je m’attends à une révision des guidelines, mais le gros des principes ne devrait pas trop change j’assume.

## Les fondamentaux du design Apple

### Clarté et visibilité

Pour apporter de la clarté et de la visibilité dans les interfaces Apple, il faut faire un usage intelligent :

• Des couleurs
• Des typographies
• Des espaces blancs

### Les quatre piliers du design

Lors de la conception d’interfaces chez Apple, il faut faire attention à :

1. Purpose (Objectif) : comprendre les besoins et intentions de l’utilisateur

2. Depth (Profondeur) : aide à créer une hiérarchie visuelle

   • Maximum 3 niveaux de profondeur recommandés
   • Bien gérer la relation entre les éléments

3. Esthétique : doit matcher avec les fonctionnalités de l’application

   • Application de jeu : couleurs riches et vibrantes
   • Application professionnelle : design sobre
   • Application utilitaire (comme calculatrice) : design simple et direct

Tip Si l’utilisateur ne comprend pas l’application juste en regardant la home page, le design doit être revu

4. Gestures (Gestes) :
   • Implémenter des gestes simples pour les actions fréquentes
   • Des gestes plus élaborés pour les actions significatives
   • Utiliser des métaphores connues et compréhensibles

### User Control

Donner à l’utilisateur un maximum de possibilités pour supprimer ou annuler les actions qu’il a faites.

## Accessibilité et standards d’inclusion

### VoiceOver Navigation

Guidelines principales :

• Créer des labels concis
• Fournir assez de contexte pour être compris
• Définir le comportement de l’élément
• Communiquer l’état courant ou la donnée
• Fournir une navigation compréhensible
• Grouper les éléments liés
• Annoncer les erreurs dans le texte

### Dynamic Type

C’est l’ajustement dynamique du texte à l’écran basé sur les préférences de l’utilisateur. C’est crucial pour les personnes ayant des problèmes de vision.

Guidelines :

• Appliquer les metrics d’échelle pour les fonts personnalisées
• Utiliser le système text style
• Utiliser la hauteur de ligne appropriée
• Activer la mise à l’échelle du texte
• Considérer les stack views pour contenir correctement le contenu
• Tester avec les différentes tailles (la plus petite et la plus large)
• Respecter la hiérarchie du contenu

### Contraste

Requirements minimums d’Apple :

• 4.5:1 pour la plupart des textes
• 3:1 pour le texte large

Par exemple, un texte gris clair (#999999) sur fond blanc (#FFFFFF) a un ratio de contraste de 2.8:1, ce qui est insuffisant. Un texte gris foncé (#666666) sur fond blanc atteint 5.7:1, ce qui est conforme.

Si on utilise les couleurs système fournies, elles s’adapteront automatiquement au contraste et aux thèmes sombres/clairs.

### Reduce Motion Feature

Pour les personnes sensibles aux mouvements :

• Tenir compte de l’option système “Réduire les mouvements”
  • Offrir des alternatives avec mouvements réduits ou statiques
  • Proposer des animations plus simples

### Feedback Audio et Vibrations

Best practices :

• Utiliser des patterns standards
• Matcher le type de feedback avec le sens de l’information
• Combiner judicieusement vibrations et audio
  • Messages positifs : vibration légère et sons aigus
  • Notifications critiques : vibrations et sons plus marqués
• Éviter la surutilisation (peut agacer et faire perdre l’adhérence)
• Respecter les settings système (ne pas forcer si en mute)
• Tester avec les utilisateurs pour trouver le juste milieu

TIP: Tester sans son pour vérifier la cohérence du message

### Touch Assistance

Donner des alternatives aux personnes ayant des difficultés avec les gestes complexes. Par exemple, si on utilise le pinch pour agrandir une carte/photo, offrir une alternative : un tap pour agrandir, un autre tap pour réduire.

### Switch Control

Permet la navigation avec des dispositifs alternatifs. Important de grouper les éléments pour que l’utilisateur s’y retrouve.

### Accessibilité des contenus médias

• Ajouter des alternatives texte (comme sur le web)
  • Possible aussi sur les icônes (je ne le savais pas !)
• Ne pas forcer l’autoplay et ajouter des contrôles de playback
• Envisager la navigation au clavier

Pour la navigation clavier, attention à l’ordre de tabulation ! J’ai déjà vu des applications où la tabulation fait passer du premier au dernier champ, puis revient en haut. C’est très important pour l’accessibilité.

### Voice Control Interactions

Guidelines :

• Éviter les noms en double dans le même écran
• Activer toutes les actions avec une alternative voix
• Fournir un feedback lors de l’exécution d’une opération

### Accessibilité cognitive

Tenir compte des personnes ayant des difficultés de concentration. C’est quelque chose auquel je n’avais pas pensé !

## Layout et espacement

Apple applique une philosophie en trois points :

• Géométrie : C’est comment on organise et structure les éléments visuellement. Apple veut que tout soit bien aligné, que ça suive une grille logique. En gros, les éléments doivent être placés de manière harmonieuse, pas juste mis n’importe comment à l’écran.
• Hiérarchie : Ça définit ce qui est important et ce qui l’est moins sur l’écran. Le contenu principal va prendre beaucoup plus de place et être placé de manière plus visible, tandis que les trucs secondaires seront plus petits et mis sur les côtés. Comme ça, l’utilisateur sait directement où regarder.
• Mesures : Au lieu d’utiliser des pixels, Apple utilise des points. C’est super pratique parce que ça permet de s’adapter automatiquement aux différentes tailles d’écran. Ils recommandent de commencer avec des espacements de 8 points, et pour les boutons, il faut minimum 44x44 points pour que ce soit facile à toucher avec le doigt.

### Points clés à retenir

• Les espaces blancs sont nos amis : ils améliorent vraiment la visibilité
• L’espacement des éléments liés est crucial : ni trop loin (on perd la connexion visuelle), ni trop près (ça devient difficile à scanner)
• Toujours penser aux différentes tailles de mains et de doigts quand on design
• Prévoir suffisamment d’espace pour le dynamic typing : quand l’utilisateur augmente la taille du texte, tout doit rester lisible et accessible

## Architecture de navigation

### Les 3 types principaux

1. Tab-based navigation : pour des fonctionnalités distinctes
2. Navigation hiérarchique : comme l’app Mail, tout à la suite
3. Content-driven : combine différents patterns (exemple : app Notes avec navbar et sidebar)

### Tab Bar

• Permet de naviguer entre différents types de navigation
• Préserve l’état lors de la navigation entre tabs

### Navigation Bar

• Aide l’utilisateur à savoir où il se trouve
• Fournit des informations essentielles et des actions liées au contenu
• Garder maximum 15 caractères pour les titres
  • Le titre n’est pas obligatoire mais doit être clair et précis
• Ajouter le contexte au bouton back (ex: “Back to Home” au lieu de juste “Back”)

## Modals

Fonction principale : changer le focus de l’utilisateur pour compléter une tâche spécifique ou recevoir des informations importantes.

Types de modals :

• Alertes : informations importantes
• Sheets et Popovers : tâches différentes ou ajustements
• Action Sheet : action immédiate
• Full Screen Modal : expérience immersive ou tâches complexes

Best practices :

• Une seule tâche par modal
• Titre clair décrivant l’action
• Permettre à l’utilisateur de sortir facilement

## State Management

Préserver l’état lors de la navigation :

• Sélection active
• Position de scroll
• Filtres de recherche
• Informations des formulaires
• Texte dans la barre de recherche
• Sections expandées

## Wayfinding Elements

Éléments aidant l’utilisateur à se localiser :

• Breadcrumbs : montrent le chemin complet
• State highlight : mise en valeur de la position actuelle
• Back indicator : avec nom de la page précédente
• Titres de sections
• Indicateurs de progression

## Deep Linking et Responsive Navigation

Deep Linking améliore l’accessibilité et le workflow :

• Ouvrir une vue ou fonctionnalité
• Naviguer vers du contenu
• Retourner à l’état précédent
• Naviguer depuis une notification
• Support cross-app

Responsive Navigation : adapter l’interface selon la taille d’écran

• Landscape : plus d’options de navigation
• Portrait : prioriser le contenu
• iPad : sidebar persistant
• iPhone : menus collapsés

# Réflexions personnelles

J’ai aussi fait un peu de sport avant midi. J’ai repris malheureusement tous mes kilos depuis le début de l’année, je n’en suis pas très content mais bon, ça va et ça vient. J’avais besoin de manger à ce moment-là donc je ne regrette pas. Sauf que maintenant il faut faire le summer body à une semaine avant l’été !

Voilà, c’est tout pour aujourd’hui !