Design d'appli de santé : l'écran d'accueil d'une appli de rendez-vous médicaux, avant et après
Une appli de rendez-vous médicaux qui s'ouvre sur une bannière de réduction, et le même écran corrigé pour que le prochain rendez-vous passe en premier. Chaque changement côte à côte, la raison de chacun, et le fichier Figma gratuit.
On ouvre une appli de santé pour une raison plus que pour toute autre : son prochain rendez-vous. Le premier jet ci-dessous s'ouvre plutôt sur une bannière de réduction, et le rendez-vous est coincé dans une fine bande près du bas. La correction met le rendez-vous en premier et supprime tout ce qui lui faisait concurrence.
Toutes les fonctions survivent. On peut toujours chercher, parcourir les spécialités, réserver un médecin et écrire à la clinique.
L'écran entier, avant et après
Brouillon junior
Corrigé
À gauche, la première grosse chose est une offre : une bannière turquoise avec la photo d'un médecin, un bouton et un lien. Ce pour quoi la personne est venue, son rendez-vous avec la Dre Sarah Lee mardi, est le plus petit bloc de l'écran et se trouve sous deux autres sections.
À droite, le même rendez-vous est le plus grand bloc, avec le médecin, la date, l'heure et un bouton pour lancer l'appel vidéo. L'offre a disparu de l'écran d'accueil, car une réduction de première visite s'adresse à ceux qui n'ont pas encore réservé, et cette personne a déjà réservé.
| Brouillon junior | Corrigé | |
|---|---|---|
| Premier bloc de l'écran | Bannière de réduction, 149 px de haut | Prochain rendez-vous, 174 px de haut |
| Marge latérale | 14 à gauche, 12 à droite | 20 sur chaque ligne |
| Tailles de texte | 8 à 18 px | 11 à 28 pt, l'échelle typographique iOS |
| Couleurs de catégories | 8 | 1, le turquoise de la marque |
| Éléments sur la carte du médecin | 9 | 3 lignes et un chevron |
| Icônes d'en-tête | 3 | 1, plus un avatar |
| Onglets | 5 | 4 |
Correction 1 : le prochain rendez-vous en premier
Avant
Après
« Réservez votre premier rendez-vous maintenant ! » avec 20 % de réduction sur une première consultation vidéo, un bouton Réserver, un lien En savoir plus et des points de carrousel, face à une carte Prochain rendez-vous avec la Dre Sarah Lee, cardiologue, un bouton d'appel vidéo, et la date et l'heure sur une même ligne.
Un écran d'accueil doit répondre à « que dois-je faire ensuite ? » avant toute autre question. Pour un patient qui revient, c'est le rendez-vous : avec qui, quand et comment le rejoindre. Dans le brouillon, cette réponse est tout en bas, dans une ligne de petit texte avec un lien « Détails ».
La correction fait du rendez-vous le héros. Le visage et le nom du médecin disent de qui il s'agit, la date et l'heure tiennent sur une ligne, et l'icône vidéo permet de rejoindre l'appel en un seul tap. Une bannière, il faut la fermer ; une carte avec un bouton, on s'en sert.
La date a aussi été raccourcie et rendue plus lisible. « Tue, Oct 28, 2026 • 10:30 AM - 11:00 AM » est devenu « Tue, 28 Oct » et « 10:30 AM », parce que l'année ne fait aucun doute et que l'heure de fin sert rarement à décider de venir ou non.
Règle à réutiliser : le haut d'un écran d'accueil appartient à ce pour quoi les gens reviennent, pas à ce que vous voulez vendre.
Correction 2 : quatre spécialités, une couleur
Avant
Après
Huit icônes rondes en huit couleurs, Cardiologie, Dentiste, Ophtalmologie, Pneumologie, Neurologie, Orthopédie, Pédiatrie et Plus, face à quatre tuiles blanches avec des icônes turquoise : Cardio, Dentaire, Yeux et Plus.
Huit couleurs sur huit icônes donnent à l'œil huit endroits où s'arrêter et aucune raison de s'arrêter sur l'un d'eux. La couleur est un signal, et ici elle ne dit rien : le cœur rouge n'est pas plus urgent que l'œil violet.
La correction garde une seule couleur, le turquoise de la marque, pour qu'une couleur veuille de nouveau dire quelque chose. Les libellés sont plus courts (« Cardio », « Dentaire », « Yeux ») pour tenir sur une ligne à une taille lisible. Et seules quatre sont affichées, avec une tuile « Plus », car une personne qui cherche une spécialité plus rare utilisera la recherche, juste au-dessus.
Correction 3 : une carte de médecin qui devient une ligne
Avant
Après
Une carte avec une photo, un nom, « Cardiologue | City Heart Clinic », cinq étoiles, 4,8 (120 avis), « Tarif : 50 $ », une pastille Disponible aujourd'hui, un bouton Réserver et un cœur, avec la carte suivante coupée, face à deux lignes avec une petite photo, un nom, « Cardiologue · 1,2 km » et une note de 4,9 (212).
La carte du brouillon porte neuf informations et deux actions. Chacune est raisonnable seule. Ensemble, elles font de la carte un formulaire que le lecteur doit scanner ligne par ligne, et le bouton Réserver sur chaque carte transforme un écran de navigation en rayon de vente.
La correction garde trois lignes : le nom, puis la spécialité et la distance, qui décide si l'on peut vraiment y aller, puis une note avec son nombre d'avis. Le tarif, la disponibilité et le bouton de réservation passent sur la page du médecin, où il y a la place de les expliquer. Un chevron dit « touchez pour ouvrir ».
Les lignes sont aussi verticales, et non en carrousel horizontal. Une carte coupée au bord est un indice correct qu'il y en a d'autres, mais une liste permet de comparer deux médecins d'un coup d'œil, ce qui est la vraie tâche.
Correction 4 : une seule icône dans l'en-tête
Avant
Après
« Bonjour, Leo ! » avec « Comment vous sentez-vous aujourd'hui ? » et des icônes de recherche, de cloche et de chat, face à un avatar vert avec initiales, « Bonjour, Leo Martins » et une cloche avec un point rouge.
L'en-tête du brouillon a trois icônes, dont deux en doublon. La cloche de l'en-tête et l'onglet Notifications ouvrent le même endroit, tout comme l'icône de chat et l'onglet Chat. Quand deux portes mènent à la même pièce, on se demande laquelle est la vraie.
L'icône de recherche remplace un champ de recherche. La correction montre le champ lui-même, une ligne sous le rendez-vous, donc rien à ouvrir. La cloche reste, car un rappel ou un message de la clinique est la seule chose qui mérite un point rouge.
Les petites corrections
- Quatre onglets, pas cinq. Notifications a quitté la barre d'onglets, car la cloche s'en charge déjà. « Chat » est devenu « Messages », le mot que l'on trouve de l'autre côté de la plupart des boîtes de réception.
- Un avatar avec initiales. Un cercle turquoise plein avec LM indique à qui est le compte, comme dans toutes les autres applis.
- Une seule marge. Le brouillon utilise 14 à gauche et 12 à droite. La correction utilise 20 des deux côtés de chaque ligne, avec des écarts de 8, 12, 14 et 20.
- Un message de bienvenue simple. « Bonjour, Leo ! Comment vous sentez-vous aujourd'hui ? » posait une question à laquelle l'écran ne pouvait pas répondre. « Bonjour, Leo Martins » non.
- Pas de carrousel d'offres. La bannière avait trois points et un second lien à côté de son bouton. La correction retire l'offre de cet écran et laisse une seule action claire dans le héros.
Auditez votre propre appli de santé
| Question | Pourquoi c'est important |
|---|---|
| Le prochain rendez-vous est-il la première chose à l'écran ? | C'est la raison pour laquelle les gens reviennent |
| Peut-on rejoindre un appel vidéo en un tap ? | La consultation, c'est le produit |
| Chaque couleur veut-elle dire quelque chose ? | Huit couleurs ne veulent rien dire |
| Une ligne de médecin montre-t-elle qui, quoi, à quelle distance et quelle qualité ? | C'est ainsi que les gens choisissent |
| Une icône d'en-tête répète-t-elle un onglet ? | Les portes en double font baisser la confiance |
| L'offre est-elle montrée seulement à ceux qui n'ont pas réservé ? | Un patient qui revient n'a pas besoin d'une réduction de première visite |
Récupérez le fichier Figma
Le fichier gratuit contient les deux écrans, chaque élément corrigé en composant avant et après, les variables de couleurs de l'UI, les styles de texte iOS et un fichier lisez-moi avec les crédits photo.
Fichier Figma gratuit
Écran d'accueil de rendez-vous médicaux, 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 appli de rendez-vous médicaux ?
Le prochain rendez-vous, avec le médecin, la date, l'heure et un moyen de rejoindre un appel vidéo. La recherche et les spécialités viennent ensuite.
Combien de spécialités une appli de santé doit-elle afficher sur l'écran d'accueil ?
Quatre environ, plus une tuile Plus. Ceux qui cherchent quelque chose de plus rare utilisent la recherche, donc une longue grille de huit icônes colorées ou plus ajoute du bruit.
Que doit montrer une carte de médecin dans une appli de santé ?
Le nom, la spécialité, la distance du médecin et une note avec le nombre d'avis. Les tarifs, la disponibilité et le bouton de réservation vont sur la page du médecin.
Une appli de santé doit-elle utiliser une bannière promotionnelle sur l'écran d'accueil ?
Pas au-dessus d'un rendez-vous à venir. Une offre de première visite convient à ceux qui n'ont pas encore réservé, et les patients qui reviennent sont là pour autre chose.
De combien d'onglets une appli de santé a-t-elle besoin ?
Quatre suffisent : Accueil, Rendez-vous, Messages et Profil. Les notifications peuvent vivre dans l'en-tête sous forme de cloche avec un point.
Sources
- Les deux écrans sont les nôtres, conçus et mesurés dans Figma.
- Photos via Unsplash par Jonathan Borba, Bruno Rodrigues et vaibhav vivian, sous la licence Unsplash.
- Publié d'abord 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
