4eme semaine qui démarre au chaud. Pratique de Figma activée
La quatrième semaine commence ! Entre théorie et pratique intensive.
Salut ! J’espère que tu as passé un bon weekend. Ici en Belgique, la chaleur devient vraiment intense : on atteint les 25°C aujourd’hui, et on a même frôlé les 34°C la semaine passée. Avec 31°C annoncés en fin de semaine, je pense qu’on peut dire que l’été est bien lancé en avance !
Cette semaine marque le début de la 4ème semaine de formation. Je termine petit à petit les fondations au niveau des design principles, et j’ai décidé qu’il était temps de passer à la pratique intensive sur Figma.
#
Mise en pratique sur un projet réel
Le timing est parfait : avec d’anciens collègues devenus amis, nous travaillons depuis quelques mois sur une application, et nous sommes en train de revoir entièrement le design. Je me suis proposé pour cette refonte, c’est l’occasion idéale de mettre en pratique tout ce que j’apprends dans les cours théoriques.
D’autant plus que j’aurai besoin de ces compétences d’ici une semaine pour mes applications de portfolio !
Aujourd’hui, j’ai travaillé d’une traite de 13h30 à 16h (pause glace comprise !) en état de flow complet ☺️. Place maintenant au récapitulatif de cette journée riche en apprentissages.
#
Apprentissages du jour : Jour 16
##
Design Principles
###
Unity Design Principles
Le principe d’unité concerne l’organisation et la cohérence des éléments dans le design.
###
Alignement
Il est crucial d’aligner les éléments sur des axes précis : haut, bas, gauche, droite ou centre. L’alignement crée de l’ordre et facilite la lecture.
###
Proximity (Proximité)
Ce principe consiste à regrouper les éléments qui vont logiquement ensemble. Les éléments liés doivent être visuellement proches.
###
Balance (Équilibre)
On distingue deux types d’équilibre :
- Symétrique : stabilité et harmonie
- Asymétrique : plus de dynamisme et d’énergie
Il faut choisir selon l’effet recherché, mais toujours rester pertinent.
###
Contraste
Le contraste permet de mettre en évidence certains éléments en jouant sur :
- La taille
- La forme
- La typographie
- La couleur
###
Emphasis (Emphase)
À ne pas confondre avec le contraste, l’emphase se concentre sur la mise en évidence par différents moyens visuels. L’exemple donné en cours : plusieurs smileys identiques, avec un seul qui exprime une émotion différente.
###
Répétition et principe de Gestalt
La répétition crée de la cohérence visuelle et aide l’utilisateur à reconnaître les patterns dans l’interface.
###
Mouvement
Il faut prendre en compte la façon dont l’être humain navigue visuellement dans un design. On peut guider le parcours de l’utilisateur grâce à :
- Couleurs spécifiques qui attirent l’œil
- Formes qui dirigent le regard
- Alignement : dans une lecture gauche-droite, un élément placé à droite aura plus d’impact
- Typographie : une police plus grande ou avec des empattements sera vue en premier
###
Negative Space
Le negative space (espace négatif) ne signifie pas forcément du blanc : cela peut être n’importe quelle couleur. L’important est de créer suffisamment d’espace pour que le contenu affiché prenne de l’importance. Plus d’espace = design plus sophistiqué.
###
Hiérarchie
La hiérarchie s’appuie sur :
- L’espacement
- La couleur
- L’échelle
- Le placement des éléments
###
Proportion
Quand on joue avec les proportions, il faut s’assurer que l’ensemble des éléments conserve une harmonie de taille.
###
Continuation
Les lignes doivent être tracées complètement : pas de mélange ligne droite/courbe/ligne droite. De même pour les courbes : le cerveau reconnaît les lignes droites ou courbes comme liées, il faut respecter cette logique.
###
Figure-Ground
Ce principe établit une hiérarchie visuelle entre les éléments. L’exemple classique : l’image du vase qui peut aussi être perçue comme deux visages face à face. Ce principe aide à hiérarchiser l’information.
##
Atomic Design de Brad Frost
L’Atomic Design est une méthodologie qui me rappelle ce j’ai vu en formation avec Git : travailler au niveau le plus granulaire possible.
###
Les 5 niveaux de l’Atomic Design
1. Atomes
Les éléments les plus basiques : couleurs, typographie, bordures, formes, boutons, inputs. Ces éléments peuvent être présentés dans un moodboard aux stakeholders pour validation.
2. Molécules
Les UI Components composés de plusieurs atomes. Exemples : un bouton complet, des checkboxes, des champs de saisie.
3. Organismes
Composants plus complexes faits de plusieurs molécules ou atomes. Exemple : une barre de navigation avec logo, barre de recherche et menu.
4. Templates
L’équivalent du wireframing. C’est ce qu’on peut déjà partager pour avoir du feedback avant la finalisation.
5. Pages
Le dernier stade avant le passage au développeur : des templates avec du contenu réel et des couleurs finales pour que les stakeholders puissent valider.
###
Pourquoi cette méthodologie ?
Elle permet de construire des principes de design cohérents sur toute l’application, créant des éléments réutilisables pour des écrans qui s’harmonisent parfaitement entre eux.
##
Les 10 principes d’usabilité de Jakob Nielsen
Ce framework permet de tester si une application ou ses composants sont réellement utilisables.
###
1. Visibilité du statut du système
L’utilisateur doit toujours être informé de ce qui se passe. Les 4 feedbacks essentiels :
- Qu’est-ce qui s’est passé ?
- Où suis-je ?
- Qu’est-ce qui se passe maintenant ?
- Qu’est-ce qui va se passer ensuite ?
###
2. Correspondance entre le système et le monde réel
Le système doit parler le langage de l’utilisateur, avec des concepts familiers.
###
3. Contrôle et liberté de l’utilisateur
L’utilisateur peut faire des erreurs. Il faut prévoir des boutons “annuler” ou “retour” pour qu’il puisse sortir de son workflow sans problème.
###
4. Cohérence et standards
Quatre types de cohérence :
- Visuelle : couleurs et boutons identiques
- Fonctionnelle : même comportement sur tous les écrans
- Interne : cohérence au sein de l’application
- Externe : alignement avec les standards du marché (ex: suite Microsoft Office ou Google avec des applications qui suivent les mêmes standards)
###
5. Prévention des erreurs
Plutôt que de laisser l’utilisateur face à son erreur, on propose :
- Des suggestions
- Des valeurs par défaut intelligentes
- Des contraintes dans les formulaires
Deux types d’erreurs à prévenir :
- Slips : erreurs de frappe ou de formatage
- Erreurs d’usage : mauvaise utilisation de l’application
###
6. Reconnaissance plutôt que rappel
Réduire la charge cognitive en évitant de faire appel à la mémoire. Exemple : afficher les recherches récentes plutôt qu’une barre vide.
###
7. Flexibilité et efficacité d’usage
Proposer plusieurs options selon le niveau de l’utilisateur :
- Raccourcis pour les utilisateurs avancés
- Tooltips et guides pour les débutants
###
8. Design esthétique et minimaliste
Supprimer tout ce qui n’est pas nécessaire au processus en cours. Si l’utilisateur fait A, ne pas lui proposer B.
###
9. Aide à la reconnaissance et récupération d’erreurs
Exemple : critères de complexité du mot de passe affichés en temps réel, messages d’erreur clairs et compréhensibles.
###
10. Aide et documentation
La documentation doit être facilement accessible quand l’utilisateur en a besoin.
###
Autres frameworks disponibles
Nielsen n’est pas le seul ! On trouve aussi :
###
Processus d’évaluation de l’usabilité
- Définition : qu’est-ce qu’on veut tester ?
- Collecte : rassembler les informations pertinentes
- Évaluation : conduire les tests avec des experts
- Catégorisation : classer les problèmes identifiés
- Compilation : synthétiser les points identifiés
- Partage : présenter les résultats
Voilà pour cette journée intensive ! Entre théorie et pratique sur Figma, j’ai l’impression d’avoir fait un bond en avant dans ma compréhension du design. J’espère que ce récapitulatif t’aidera aussi dans ton parcours.
À demain pour de nouveaux apprentissages !