Design d'app de tâches : refonte de l'écran Aujourd'hui, avant et après
Un écran d'app de tâches de débutant : progression en fraction avec deux décimales, cinq filtres colorés, une date rouge sur chaque tâche et un bouton flottant sur la dernière. Puis le même écran corrigé. Chaque changement côte à côte et le fichier Figma gratuit.
Une app de tâches doit donner l'impression d'aider. Le premier brouillon ci-dessous sait très bien ce qui est dû aujourd'hui, puis le crie avec une date rouge sur chaque ligne, des pastilles colorées pour chaque priorité et un bouton posé sur la dernière tâche. On dirait une alarme. La correction garde chaque tâche et chaque information, et ramène l'alarme au niveau d'une liste calme.
L'écran entier, avant et après
Brouillon de débutant
Corrigé
À gauche, chaque tâche porte une description, jusqu'à trois tags, une date rouge et une pile de visages. À droite, chaque tâche tient en une ligne et demie, et la liste est la première chose que l'œil rencontre.
Compte ce que l'œil doit traiter. Le brouillon a un encadré de progression teinté, cinq pastilles de filtre en cinq couleurs, et sur chaque tâche une description, des tags colorés, une date rouge et souvent un groupe d'avatars. L'écran corrigé a un anneau, un sélecteur en trois parties et une liste.
| Brouillon de débutant | Corrigé | |
|---|---|---|
| Progression | « 1/5 tâches terminées (20,00 %) » et une barre | un anneau à 20 % et « 1 sur 5 terminée » |
| Filtres | 5 pastilles en 5 couleurs | 3 mots dans un seul sélecteur |
| Tags colorés par tâche | jusqu'à 3 | 0 |
| Dates en rouge | chaque tâche | aucune |
| Priorité indiquée par | un filtre de pastilles colorées et un tag | un petit point |
| Ajouter une tâche | un bouton flottant de 56 px sur la liste | une ligne à la fin de la liste |
| Onglets | 5 | 4 |
| Marge latérale | 14 px à gauche, 12 px à droite | 20 px des deux côtés |
| Tailles de texte | 8 à 20 px | 11 à 28 pt |
Correction 1 : la progression en anneau et une phrase
Avant
Après
Une fraction, un pourcentage à deux décimales, une barre et un encouragement, contre un anneau et une phrase.
Le brouillon dit la même chose trois fois : « 1/5 », « 20,00 % » et une barre remplie au cinquième. Les deux décimales trahissent le tout : « 20,00 % » est un nombre qu'un programme a imprimé, pas un nombre dont une personne a besoin. Et la ligne en dessous est petite, grise et se termine par deux points d'exclamation.
La correction choisit une seule image, un anneau à 20 %, et une seule phrase avec les deux faits qui comptent : une tâche sur cinq terminée, quatre restantes. La phrase finit par la partie utile, « prochaine à 16 h 00 », qui dit à l'utilisateur quoi faire ensuite au lieu de l'encourager.
L'anneau est dessiné dans le rouge de la marque, le même rouge que la ligne d'ajout et l'onglet actif.
Correction 2 : filtrer par moment, pas par couleur
Avant
Après
Cinq pastilles de priorité et d'état en cinq couleurs, contre trois mots dans un seul sélecteur.
Les pastilles du brouillon mélangent deux questions. Haute, Moyenne et Basse demandent l'importance d'une tâche, Terminées demande son état et Tout (5) demande tout. Les cinq pastilles utilisent cinq couleurs avec deux rayons d'angle, donc même les formes ne s'accordent pas.
Pour les utiliser, il faut d'abord apprendre que le rouge veut dire urgent, l'orange moyen et le vert faible, et
La correction pose une seule question, celle qu'on pose à une to-do list : quand. Tout, Aujourd'hui et À venir sont trois mots dans un seul sélecteur, qui se lit comme un seul contrôle avec un seul état sélectionné, et qui correspond aux onglets en dessous : l'onglet Aujourd'hui, l'onglet À venir. La priorité n'a pas disparu. Elle est passée sur les lignes, sous forme de petit point (correction 3).
Correction 3 : une tâche tient en une ligne et demie
Avant
Après
Titre, description, tags, ligne d'échéance rouge et avatars sur chaque tâche, contre un titre, une heure et une liste.
Chaque tâche du brouillon peut porter cinq types d'information : une description, jusqu'à trois tags colorés, un « Échéance : 24/10/2026 17 h 00 » en rouge, un groupe d'avatars et une case à cocher. « Urgent !! » apparaît en tag sur une tâche déjà rouge dans la ligne d'échéance. Chaque tâche est due aujourd'hui, et chaque date est rouge, donc le rouge cesse de vouloir dire en retard et se met à vouloir dire « il y a une tâche ».
La correction donne à chaque tâche un titre et une ligne grise : l'heure et la liste à laquelle elle appartient. « 17 h 00, Travail ». La date a disparu parce que l'en-tête indique déjà quel jour on est.
Les tags se sont fondus dans le nom de la liste. La priorité est devenue un petit point à droite, rouge pour la première tâche et orange pour la deuxième, sans point quand il n'y a rien à signaler. La tâche terminée reste dans la liste, barrée et étiquetée « Terminée », avec une coche pleine dans le rouge de la marque.
Les tâches sont réunies dans une seule carte blanche avec un fin séparateur entre elles, pour que la liste se lise comme un tout.
Correction 4 : « Ajouter une tâche » à la fin de la liste
Avant
Après
Un bouton flottant qui couvre la dernière tâche, contre une ligne à la fin de la liste.
Un bouton flottant suit l'utilisateur et couvre ce qu'il y a dessous. Dans le brouillon, il est posé sur la dernière tâche, coupe les avatars à droite de la ligne, et c'est l'objet le plus lourd de l'écran : 56 px, rouge saturé, avec une ombre.
La correction fait ce que fait une liste : elle se termine par ce qu'on peut y ajouter. « Ajouter une tâche » occupe une ligne juste là où la dernière tâche finit, avec un petit plus et le même rouge que les autres actions. Pas d'ombre et rien n'est couvert. Quelqu'un qui fait défiler une liste regarde déjà sa fin, donc l'action d'ajout se trouve là où l'œil s'arrête.
Les petites corrections
- Quatre onglets, pas cinq. Aujourd'hui, À venir, Parcourir et Profil remplacent Aujourd'hui, À venir, Projets, Recherche et Profil.
- Une seule marge. Le brouillon utilisait 14 px à gauche et 12 px à droite. La correction utilise 20 px des deux côtés.
- Un vrai en-tête. « Mes tâches » avec une date complète est devenu un petit « Samedi 24 oct. » au-dessus d'un grand « Aujourd'hui », et l'avatar est devenu une cloche.
- Un seul rouge. Le rouge de la marque,
#E5484D, couvre l'anneau, l'icône d'ajout et l'onglet actif. Le texte rouge utilise un#D92D20plus profond, pour rester lisible. - Une vraie échelle typographique. Le texte est passé de 8 à 20 px aux tailles iOS de 11 à 28 pt.
Audite ta propre app de tâches
| Question | Pourquoi c'est important |
|---|---|
| Un nombre apparaît-il sous deux formes, comme 1/5 et 20 % ? | Choisis une image et une phrase |
| Les filtres posent-ils une seule question ? | Mélanger importance et état oblige à décoder |
| Le rouge sert-il à autre chose qu'à l'action et à l'urgence ? | Si tout est rouge, rien n'est en retard |
| Une tâche se lit-elle en une ligne et demie ? | Les listes se parcourent, elles ne se lisent pas |
| Le bouton d'ajout couvre-t-il du contenu ? | Un bouton flottant cache le dernier élément |
| La date figure-t-elle sur les lignes alors que l'écran est déjà un seul jour ? | Répéter le jour, c'est du bruit |
Récupère le fichier Figma
Le fichier gratuit contient les deux écrans sous forme de composants, chaque correction en paire avant et après, les variables de couleur et les styles de texte iOS.
Fichier Figma gratuit
Écran Aujourd'hui d'une app de tâches, avant et après
Les deux écrans et chaque partie corrigée en composants Figma. Gratuit, en lecture seule, duplique-le dans tes brouillons.
FAQ
Que doit afficher l'écran Aujourd'hui d'une app de tâches ?
La progression du jour, un moyen de basculer entre Tout, Aujourd'hui et À venir, la liste des tâches avec leurs heures, et une action Ajouter une tâche. Les descriptions et les dates longues peuvent attendre le détail de la tâche.
Comment une app de tâches doit-elle afficher la progression ?
Avec un anneau ou une barre plus une phrase, comme « 1 sur 5 terminée ». N'imprime pas le même nombre en fraction, en pourcentage et en barre. Si tu montres un pourcentage, arrondis-le.
Comment une app de tâches doit-elle afficher la priorité ?
Avec un petit point, ou un drapeau, sur les lignes qui en ont besoin, pas avec des tags colorés sur chaque tâche. La priorité peut aussi être un filtre ou un tri, mais elle n'a pas besoin d'être le principal.
Une app de to-do doit-elle utiliser un bouton d'ajout flottant ?
Un bouton flottant est courant, mais sur un écran de liste il peut couvrir le dernier élément. Une ligne « Ajouter une tâche » à la fin de la liste ne couvre rien et se trouve là où l'œil s'arrête.
Quels doivent être les filtres d'une app de to-do ?
Les questions que les gens posent : tout, aujourd'hui et à venir. Garde une question par contrôle, et ne mélange pas un filtre de priorité avec un filtre d'état sur la même ligne.
Sources
- Les deux écrans sont les nôtres, conçus et mesurés dans Figma. Les tâches, les personnes et le client sont inventés pour l'exercice. 1 tâche sur 5 terminée, c'est 20 %.
- Photos via Pexels par pessoas uem, Iphanyi Ezemenari et Ajan Yogi.
- Apple Human Interface Guidelines: Typography, pour les tailles de texte iOS utilisées dans l'écran corrigé.
- Apple Human Interface Guidelines: Color, sur le fait de ne pas compter sur la couleur seule pour porter le sens.
- D'abord publié en carrousel sur App Brainy.
Want this for your own app? Our team redesigns app screens like this one, from the first audit to the finished components.
Get Started
