Design d'application de podcast : refonte de l'écran d'accueil, avant et après
Un écran d'accueil d'application de podcast signé d'un junior, avec un filet de progression, trois icônes sur chaque ligne du classement et six couleurs de genres, puis le même écran corrigé. Chaque changement côte à côte, la raison de chacun et le fichier Figma gratuit.
Ce que fait le plus souvent une personne dans une application de podcast, c'est reprendre là où elle s'était arrêtée. Le premier jet ci-dessous contient tout ce dont un auditeur a besoin, et il cache justement cette chose : l'épisode qu'il écoutait à moitié est dans une petite carte avec un filet de progression, coincée entre trois pochettes. La correction garde les émissions, le classement et les genres, et fait de l'épisode en pause l'élément le plus gros de l'écran.
L'écran entier, avant et après
Brouillon junior
Corrigé
À gauche, l'épisode de la personne est l'une de trois pochettes identiques avec 2 px de progression dessous, et chaque ligne du classement finit par trois icônes. À droite, l'épisode en pause a sa propre carte avec une barre de progression de 6 px et trois grands contrôles, et les lignes de la liste finissent par un seul bouton.
| Brouillon junior | Corrigé | |
|---|---|---|
| Épisode en pause | L'une des 3 pochettes, ligne de progression de 2 px | Une carte, barre de progression de 6 px, 3 contrôles |
| Icônes par ligne de liste | 3 | 1 |
| Couleurs de genres | 6 | 1 |
| Contrôles du mini lecteur | Précédent, pause, suivant | Retour 30, pause, avance 30 |
| 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 : une grande carte pour l'épisode laissé en plan
Avant
Après
Trois pochettes avec un filet de progression, contre une carte avec le temps restant et les contrôles.
Le « Reprendre l'écoute » du brouillon est une étagère. Trois pochettes de même taille côte à côte, chacune avec une ligne de progression de 2 px, un titre coupé à « Ep. 142: Why Great Apps Feel Calm (And... » et « 23 min left » en petit gris. Pour reprendre celui qui compte, l'auditeur ouvre un épisode, attend un lecteur et appuie sur lecture.
La correction donne une carte à l'épisode en pause. La pochette, un libellé violet, « Reprendre l'écoute · 23 min restantes », le titre complet, « Why great apps feel calm », et l'émission, « Studio Hour · Épisode 142 », sont en haut. En dessous, une barre de progression de 6 px côtoie trois contrôles : retour 30, lecture et avance 30. Les deux autres pochettes ont quitté cette section.
Les boutons retour et avance 30 sont une flèche circulaire avec 30 à l'intérieur, dans des zones de 44 px, le modèle qu'utilise Audible. Un auditeur interrompu peut reculer d'une demi-minute sans quitter l'écran d'accueil.
La règle à retenir : ce que la personne était en train de faire est l'action suivante la plus probable, alors donnez-lui une carte et ses contrôles.
Correction 2 : des titres sur deux lignes et un seul bouton de lecture
Avant
Après
Titres coupés, numéros de rang et trois icônes, contre des titres entiers et un seul bouton de lecture.
Les lignes du classement du brouillon finissent chacune par une flèche de téléchargement, un menu à trois points et un triangle de lecture, donc le titre doit tenir dans ce qui reste, et ça ne passe pas : « The Week in Tech, in 20 Minutes: Al... », « How to Learn Anything in 30 Days... », « Live from Brooklyn Part 2 (Uncut Ex... ». Le rang est un gros chiffre violet, et sous chaque titre une ligne contient l'émission, la catégorie et la durée.
La correction laisse le titre passer sur deux lignes : « The week in tech, in 20 minutes ». Dessous, une seule ligne, le jour et la durée, « Aujourd'hui · 21 min ». À droite, un seul bouton de lecture rond, la seule action dont une ligne a besoin, avec une zone assez grande pour être touchée. Le téléchargement et le menu ne sont plus sur la ligne, et cette refonte ne dessine pas où ils vont.
Cette refonte a changé le rôle de la liste autant que son apparence. Cinq lignes classées « Top Charts » sont devenues trois lignes « À suivre », donc une vraie application a encore besoin d'une place pour le classement.
La règle à retenir : laissez le titre passer à la ligne, car un titre coupé ne se lit pas, et donnez une seule action à chaque ligne.
Correction 3 : les genres dans un seul style
Avant
Après
Six couleurs pleines sur deux rangées, contre une rangée de pilules dont une remplie.
Les tags de genre du brouillon sont rose, bleu, rouge, vert, orange et turquoise, chacun avec du texte blanc plein. Ils occupent deux rangées.
La correction est une rangée de pilules dans un seul style. « Tout » est rempli du violet de la marque, #8B5CF6, et les autres sont blanches. « Plus » est à la fin pour les genres qui ne tiennent pas. Une pilule remplie est la seule qui veut dire quelque chose : « c'est ce que vous regardez ».
La règle à retenir : la couleur doit dire lequel est choisi. Elle ne doit pas dire lequel est lequel.
Correction 4 : un mini lecteur avec les contrôles qu'on utilise vraiment
Avant
Après
Précédent, pause et suivant, contre retour 30, pause et avance 30.
Un mini lecteur a le moins de place de l'écran, donc chaque contrôle doit mériter la sienne. Les trois du brouillon sont précédent, pause et suivant. Précédent et suivant sautent vers un autre épisode.
La correction utilise retour 30, pause et avance 30. La pochette et le titre, « Why great apps feel... », restent à gauche, avec l'émission dessous. La ligne de progression court le long du bord supérieur du lecteur, elle montre donc où en est l'épisode sans prendre une ligne.
La règle à retenir : un mini lecteur doit avoir les trois boutons que les gens utilisent vraiment pendant qu'ils écoutent.
Les petites corrections
- Un seul bord gauche. Les marges du brouillon étaient de 14 px à gauche et 12 px à droite. La correction utilise 20 px des deux côtés et 16 px entre les cartes.
- Un seul violet de marque. La correction utilise #8B5CF6 pour les remplissages et les boutons de lecture, et un #7C3AED plus foncé pour le petit texte violet, qui demande plus de contraste pour être lu.
- Une vraie échelle typographique. Le texte est passé de 8 à 20 px aux tailles iOS de 11 à 28 pt.
- Un titre plus grand, un en-tête plus petit. L'en-tête du brouillon contenait une icône de recherche, une cloche et un avatar. La correction garde l'avatar et un grand titre « Podcasts ».
- Quatre onglets, pas cinq. Accueil, Parcourir, Bibliothèque, Recherche et Profil sont devenus Écouter, Parcourir, Bibliothèque et Recherche. Le profil, c'est l'avatar dans l'en-tête.
Auditez votre propre application de podcast
| Question | Pourquoi c'est important |
|---|---|
| L'épisode en pause est-il plus gros que les autres pochettes ? | C'est le prochain appui le plus probable |
| Un auditeur peut-il reculer de 30 secondes depuis l'écran d'accueil ? | Les auditeurs interrompus en ont besoin d'abord |
| Les titres passent-ils à la ligne, ou sont-ils coupés ? | Un titre coupé ne se lit pas |
| Combien d'icônes terminent chaque ligne ? | Une action se trouve, trois se scannent |
| La couleur des genres veut-elle dire une seule chose ? | La couleur doit marquer celui qui est choisi |
| Le mini lecteur a-t-il les boutons qu'on utilise ? | Retour et avance 30 sont ceux que les amateurs de livres audio et de podcasts utilisent le plus |
Récupérez le fichier Figma
Le fichier gratuit contient les deux écrans en composants, chaque correction en paire avant et après, les variables de couleur et les styles de texte iOS.
Fichier Figma gratuit
Écran d'accueil de podcast, avant et après
Les deux écrans et chaque élément corrigé en composants Figma. Gratuit, en lecture seule, dupliquez-le dans vos brouillons.
FAQ
Que doit montrer en premier l'écran d'accueil d'une application de podcast ?
L'épisode que l'auditeur écoutait à moitié, sur une grande carte avec le temps restant, lecture, et retour et avance de 30 secondes. Les classements, les genres et les nouvelles émissions viennent après.
Quels boutons un mini lecteur de podcast doit-il avoir ?
Retour 30, pause et avance 30. Épisode précédent et suivant sautent vers un autre épisode, laissez-les donc au lecteur complet.
Comment concevoir une section de reprise d'écoute ?
Une carte pour le dernier épisode mis en pause, avec la pochette, le titre complet, l'émission, le temps restant et une barre de progression, plus les contrôles pour reprendre. Ne lui donnez pas la même taille que les autres pochettes.
Comment une application de podcast doit-elle lister les épisodes ?
Laissez le titre passer sur deux lignes, mettez le jour et la durée sur une ligne grise et terminez la ligne par un seul bouton de lecture. Déplacez le téléchargement et le menu vers la page de l'épisode.
Comment concevoir des filtres de genre pour une application de podcast ?
Une rangée de pilules dans un seul style, avec celle sélectionnée remplie de la couleur de la marque et Plus à la fin. Six couleurs sur six tags font que la couleur ne veut plus rien dire.
Quelle taille de police une application de podcast doit-elle utiliser ?
L'échelle de texte de la plateforme. L'écran corrigé utilise les tailles iOS de 11 à 28 pt, avec un grand titre.
Sources
- Les deux écrans sont les nôtres, conçus et mesurés dans Figma. Les noms d'émissions, d'épisodes et de personnes sont inventés ; les pochettes sont des photos avec le nom de l'émission posé dessus.
- Photos via Pexels par Jace Oner, Somogro Bangladesh, Sound On, Brett Sayles, Ali Dashti, frank minjarez et pessoas uem.
- Apple Human Interface Guidelines: Typography, pour les tailles de texte iOS utilisées dans l'écran corrigé.
- Apple Human Interface Guidelines: Accessibility, pour la taille de zone tactile de 44 pt.
- D'abord publié sous forme de 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
