On continue la formation Mobile Design sur Uxcel. C’est très théorique (et un peu dense), alors pour m’approprier les concepts, j’ai décidé de passer à un peu de pratique. J’ai commencé à esquisser des mockups pour la future version de ContactHive.

# Apprentissages du jour

Aujourd’hui, beaucoup de rappels importants sur l’ergonomie et l’expérience utilisateur en mobile. Je les ai synthétisés ici, à la fois pour référence future et pour ne pas les oublier lors des prochaines étapes de design.

## Navigation & Interface

• Drawer : à positionner stratégiquement, toujours lié à l’action principale.
• Toolbar iOS : boutons en bas, non customisables, à réserver pour des actions récurrentes.
• Tabs :
  • Ajouter du contraste et des icônes.
  • Permettre le tap et le swipe.
  • Des labels clairs
• Tab Bar : à privilégier pour des actions positives, jamais pour des actions destructives.
• FAB (Floating Action Button) : utilisation Android, un seul par écran lié à l’action principale. Cible des actions positives, pas les destructrices
• Eviter de cumuler les actions principales sur un écran, règle simple :
  • Une action principale par écran.

## Formulaires & Champs

• Input Fields :
  • Labels clairs (maximum 4 mots).
  • États visuels explicites (focus, erreurs).
  • Erreurs explicites avec des icônes.
• Forms :
  • Réduire les champs : “Nom complet” au lieu de prénom/nom.
  • Pré-remplir si possible.
  • Questions sensibles et privées en dernier.
  • Accessibilité → découper les formulaires longs en plusieurs parties

## Sélecteurs & Choix

• Checkboxes :
  • Pour confirmations finales, sélections multiples.
  • Afin de pouvoir activer des options supplémentaires
• Radio Buttons :
  • Pour 2+ options exclusives.
  • Moins de 5, alignés verticalement.
• Toggles :
  • Pour actions instantanées.
  • Labels contrastés et explicites.
• Dropdowns :
  • À éviter autant que possible.
  • Interaction coûteuse, privilégie:
    • Auto suggestions
    • Recherche textuelle
    • Choix pertinents automatiques
    • pré-remplir le plus possible
• Pickers :
  • Navigation claire + instructions visibles.
• Sliders :
  • À éviter si précision nécessaire.
  • Surface tactile généreuse nécessaire

## Recherche & Claviers

• Search Field :
  • Position claire (haut ou bas, bien qu’en bas cela pourrait être moins lisible).
  • Icône loupe bien visible.
  • Montrer l’avancement afin de réduire le décrochage
  • Recherches récentes
  • Recherches auto suggérées
• Keyboard :
  • iOS a 13 claviers différents.

## Ergonomie Mobile

• Mobile Gestures :
  • Cibles larges.
• Hand Positions :
  • Centre de l’écran favorisé (Une étude montre que l’on préfère appuyer sur le centre de l’écran )
  • Haut/bas pour les actions secondaires.
• Touch Optimized :
  • Tester avec le pouce
  • Gestes simples : tap, scroll, zoom.

## Typographie & Lisibilité

• Line width : 30 à 40 caractères maximum par ligne.
• Contrast Ratio :
  • Texte : 4,5 : 1
  • Grand texte : 3 : 1
  • Icônes : 3 : 1 minimum.
• Typographie :
  • Différencier données sélectionnées/non sélectionnées.

## Accessibilité & Feedback

• Alt Text : toujours pour les images.
• WCAG à respecter.
• Éléments empilés verticalement pour les petits écrans.
• Haptic Feedback : à intégrer pour renforcer l’interaction.

## Cohérence & Autres bonnes pratiques

• Design Consistency : garder une logique entre la version desktop et mobile.
• Posture : éviter les postures inconfortables. Dans le doute faire le test soi-même.
• Audio :
  • Jamais activé par défaut.
  • Préférer des retours visuels.
• Onboarding & Engagement :
  • Historique, “Remember me”, test sans login…
  • Messages contextuels, pas de spam de notifications.

PS: Ce texte a été produit grâce à un scan de mes notes écrites et ensuite remis en forme par un LLM. Résultat: il a fallu un peu retravailler et le passer à plusieurs LLM avant d’avoir une version potable. Je pense que j’ai gagné un peu de temps mais le désavantage est que j’ai l’impression d’avoir moins retenu les informations.

Voici les scans des notes pour référence

À demain