Design d'app de services à domicile : refonte d'un écran d'accueil, avant et après

Un écran d'accueil d'app de services à domicile n'a qu'un seul travail : amener quelqu'un de « un truc est cassé » à un pro réservé en un minimum de taps. Le premier brouillon ci-dessous contient tout ce dont un propriétaire a besoin, mais il le force à chercher. Il lui demande de rechercher « services, catégories, professionnels », crie 30 % de remise dans une bannière rouge, étale douze catégories avec des libellés en 8 px et enterre chaque pro sous des lignes d'infos en 8 px.

La correction garde toutes les fonctions et change l'ordre. Une question simple passe en premier, l'offre se réduit à une ligne, trois catégories portent l'écran, et chaque pro n'affiche que ce sur quoi les gens se décident.

L'écran complet, avant et après

Brouillon junior

Corrigé

À gauche, une douzaine d'éléments réclament l'attention avec le même poids. La bannière rouge est l'objet le plus bruyant, les douze tuiles sont le plus gros bloc, et les vraies personnes qui feront le travail sont en bas, dans un texte si petit qu'il faut plisser les yeux.

À droite, l'écran se lit dans l'ordre où pense un propriétaire : qu'est-ce qui ne va pas, y a-t-il une promo, quel type de travail, qui peut venir. Le texte va de 12 à 18 px contre 8 à 15 px dans le brouillon, la marge est de 20 des deux côtés, et rien n'est dans une carte.

Ce qui a changé, mesuré

Correction 1 : poser une question simple

Avant

Après

Un fin champ de recherche contouré indiquant Rechercher des services, catégories, professionnels avec un micro, au-dessus d'une ligne de recherches populaires : Réparation de fuite, Entretien clim, Grand ménage, Ventilateur de plafond. Contre un grand champ gris avec une loupe, les mots Qu'est-ce qui est à réparer et un micro.

« Rechercher des services, catégories, professionnels » est un libellé de base de données. Il demande à l'utilisateur de décider s'il cherche un service, une catégorie ou une personne avant d'avoir tapé un mot. Personne n'arrive sur une app de plomberie en pensant ainsi. On arrive en pensant « l'évier fuit ».

« Qu'est-ce qui est à réparer ? » est la question à laquelle l'app répond, donc l'utilisateur peut taper le problème avec ses propres mots. Le champ passe de 32 à 48 px, c'est donc une vraie cible tactile, et le micro reste pour le moment où on a la main mouillée. Les recherches populaires, Réparation de fuite, Entretien clim, Grand ménage et Ventilateur de plafond, s'ouvrent depuis le champ au tap, donc rien n'est perdu et l'écran se débarrasse d'une ligne de texte en 9 px.

Règle à réutiliser : écrivez le placeholder comme le problème de l'utilisateur, pas comme votre architecture de l'information.

Correction 2 : transformer la bannière en une ligne

Avant

Après

Une bannière rouge avec une icône d'étiquette, -30 % SUR LA PREMIÈRE RÉSERVATION en capitales avec trois points d'exclamation, des mentions en petit indiquant Utilisez le code FIX30 au paiement, nouveaux utilisateurs uniquement, conditions applicables, et un bouton jaune RÉSERVER MAINTENANT. Contre une fine ligne jaune indiquant 30 % de remise sur votre première réparation, FIX30, avec un chevron.

La bannière rouge a trois missions et n'en remplit aucune correctement. Le rouge se lit comme une erreur ou un avertissement, les points d'exclamation se lisent comme du spam, et les mentions en petit sont le seul endroit où vit le code. Son bouton RÉSERVER MAINTENANT entre aussi en concurrence avec les boutons RÉSERVER des pros en dessous.

La ligne corrigée dit la même chose d'un seul souffle : la remise, à qui elle s'adresse, et le code. Elle est jaune, la couleur d'action unique de l'app, et toute la ligne est le bouton, donc le chevron remplace RÉSERVER MAINTENANT. Pas de photo, pas de cri. Un nouvel utilisateur voit quand même l'offre, et un habitué n'est pas agressé à chaque ouverture de l'app.

Règle à réutiliser : une offre est une ligne, pas un panneau publicitaire. Donnez le code à l'utilisateur et rendez la ligne elle-même tappable.

Correction 3 : réduire douze catégories à trois et un Plus

Avant

Après

Un titre Toutes les catégories avec un lien Voir tout au-dessus de douze petites tuiles contourées sur trois rangées de quatre, chacune avec une icône de couleur différente et un libellé en 8 px : Plomberie, Électricité, Ménage, Peinture, Menuiserie, Réparation clim, Électroménager, Dératisation, Déménagement, Jardinage, Serrurerie, Maison connectée. Contre quatre tuiles contourées plus grandes avec des icônes en encre simple : Plomberie, Électricité, Ménage et Plus.

Douze icônes colorées dans une grille ont l'air organisées, mais l'utilisateur doit lire douze libellés pour trouver le sien. Pire, un propriétaire avec une fuite ne sait souvent pas à quelle catégorie elle appartient. Un plafond qui goutte, c'est de la Plomberie, de la Peinture ou de la Menuiserie ? Un menu large n'aide pas cette personne, il rend la devinette plus difficile.

La correction agit à deux niveaux. Le champ de recherche prend le problème en mots simples, donc l'utilisateur qui ne connaît pas la catégorie n'a jamais à en deviner une. Les trois tuiles couvrent les travaux les plus courants, et Plus ouvre les neuf autres : Peinture, Menuiserie, Réparation clim, Électroménager, Dératisation, Déménagement, Jardinage, Serrurerie et Maison connectée. Les tuiles font 76 par 72 avec des icônes de 26 px et des libellés de 12 px, et les icônes passent en encre simple, car douze couleurs d'icônes différentes étaient du bruit, pas de l'information.

Rien n'a été supprimé. Les douze catégories sont toujours à un tap. Thumbtack adopte la même approche : une recherche du travail d'abord, puis une courte liste de catégories dessous.

Règle à réutiliser : montrez le petit nombre dont la plupart des gens ont besoin et laissez le reste derrière un Plus. Laissez la recherche gérer les gens qui ne connaissent pas la catégorie.

Correction 4 : montrer chaque pro comme les gens le choisissent

Avant

Après

Trois professionnels, chacun avec une photo de 40 px, un nom, une ligne grise de compétences comme Plomberie, Réparation de fuite, Chauffe-eau, Débouchage, une ligne indiquant 4,9 (312), 1 240 missions, 1,9 km, 45 dollars de l'heure, une ligne indiquant Disponible du lundi au samedi, 8 h à 18 h, et un bouton RÉSERVER en capitales. Contre trois professionnels avec une photo de 48 px, un nom, une étoile avec 4,9, 1 240 missions et 45 dollars de l'heure, et la prochaine disponibilité en vert, comme Prochain créneau aujourd'hui, 15 h, avec un bouton Réserver.

Le brouillon liste tout ce qu'il sait de chaque pro : compétences, note, nombre d'avis, missions, distance, tarif et horaires hebdomadaires. Ça fait sept faits en 8 px, et les trois pros se ressemblent, donc l'utilisateur ne peut pas les comparer. La ligne des horaires est la même pour les trois, elle n'apporte donc aucune information.

On choisit un pro sur trois critères : qui il est, si les autres lui font confiance, et quand il peut venir. La correction montre donc un nom, une ligne « 4,9 · 1 240 missions · 45 $/h », et la prochaine disponibilité en vert, comme « Prochain créneau aujourd'hui, 15 h ». L'heure est le fait nouveau, et elle remplace les horaires hebdomadaires génériques par celui dont une réservation a besoin.

Les compétences, la distance et les horaires complets passent sur la page propre du pro. La photo passe de 40 à 48 px et le bouton Réserver de 21 à 34 px de haut, c'est donc une vraie cible tactile.

Les chiffres sont les mêmes sur les deux écrans. Minh Tran a 4,9, 1 240 missions et 45 $/h dans les deux.

Règle à réutiliser : montrez les faits sur lesquels les gens choisissent, et déplacez le reste sur la page de détail.

Les petites corrections

• Toutes les fonctions restent. La longue adresse s'ouvre depuis « 24 Hayes St » et son chevron. Le micro reste dans le champ de recherche. L'onglet Offres s'est replié dans la ligne d'offre, et le panier est devenu l'onglet Réservations.
• Une seule marge. Le brouillon a 14 px à gauche et 12 px à droite. L'écran corrigé utilise 20 des deux côtés.
• Un seul accent. Le jaune est la couleur d'action, sur l'offre et sur chaque bouton Réserver. Dans le brouillon, le rouge, le jaune et douze couleurs d'icônes se disputent la place.
• Quatre onglets, un seul style d'icône. Cinq onglets avec des icônes pleines et contour mélangées deviennent quatre dans un seul style, sur une barre plate de 78 px avec un filet.
• Un logotype plus grand, une adresse plus courte. Le logotype passe à 24 px et l'adresse perd sa ligne de rue et sa ville, car l'utilisateur sait où il habite.
• Échelle typographique. Le texte va de 12 à 18 px au lieu de 8 à 15 px.
• Voir tout reste. Le reste des pros est derrière Voir tout, et le troisième pro dépasse sous la barre d'onglets pour que la liste paraisse plus longue.

Auditez votre propre écran de services à domicile

Récupérez le fichier Figma

Le fichier gratuit contient le brouillon junior, l'écran corrigé et chaque élément sous forme de composant.

Fichier Figma gratuit

Refonte d'un écran de services à domicile, avant et après

Les deux écrans et chaque élément en composant Figma. Gratuit, en lecture seule, dupliquez-le dans vos brouillons.

Ouvrir dans Figma

FAQ

Comment concevoir l'écran d'accueil d'une app de services à domicile ?

Commencez par une question simple comme « Qu'est-ce qui est à réparer ? », puis une fine ligne d'offre, trois ou quatre tuiles de catégories avec un Plus, et une courte liste de pros. Présentez chaque pro par nom, note et prochaine disponibilité, avec un seul bouton Réserver.

Combien de catégories une app de services à domicile doit-elle afficher ?

Trois ou quatre sur l'écran d'accueil, avec un Plus pour le reste. Douze tuiles forcent tout le monde à lire chaque libellé, et les gens avec un problème ne savent souvent pas à quelle catégorie il appartient.

Une app de services doit-elle utiliser une barre de recherche ou des catégories ?

Les deux, dans cet ordre. Un champ de recherche qui parle du problème accueille les gens qui ne connaissent pas la catégorie, et quelques tuiles couvrent les travaux courants pour ceux qui la connaissent.

Que doit afficher la carte d'un professionnel dans une marketplace de services ?

Un nom, une note avec les missions réalisées et le tarif, et le prochain créneau disponible. Les compétences, la distance et les horaires complets ont leur place sur la page du pro, car ils n'aident pas à choisir entre trois options.

Comment afficher une remise dans une app de services à domicile ?

Sous forme d'une fine ligne avec l'offre et son code, où toute la ligne est tappable. Une bannière rouge avec des points d'exclamation se lit comme du spam, et son bouton concurrence les boutons Réserver.

Sources

• Les deux écrans sont les nôtres, conçus et mesurés dans Figma. L'app, Fixly, les personnes, l'adresse et les prix sont inventés. L'offre, 30 % de remise avec le code FIX30, et les 4,9, 1 240 missions et 45 $/h de Minh Tran sont les mêmes sur les deux écrans.
• Pattern étudié : Thumbtack, avec une recherche du travail d'abord et une courte liste de catégories en dessous.
• Les icônes viennent de Phosphor (MIT). Les photos viennent de Pexels : Ivan S, Kindel Media, Son Hoa Nguyen et Mahmoud Yahyaoui.
• D'abord publié en carrousel sur App Brainy.