Design d'app immobilière : refonte d'un écran d'accueil, avant et après

Un écran d'accueil immobilier a une seule mission : mener quelqu'un de « je cherche » à une annonce qu'il a envie d'ouvrir. Le premier jet ci-dessous ne casse rien. Toutes les fonctions marchent. Il demande simplement au lecteur de tout avaler d'un coup : un champ de recherche, cinq catégories rondes, quatre boutons différents, une bannière et une carte avec neuf petits détails.

La correction garde toutes les fonctions et change l'ordre, la taille et le nombre de styles.

L'écran entier, avant et après

Brouillon junior

Corrigé

À gauche, l'œil rencontre un champ de recherche, cinq cercles de catégorie, quatre contrôles dans trois styles différents, une bannière bleue pleine largeur, une étoile, une flèche, deux boutons empilés sur chaque photo et un bouton Carte flottant posé sur les détails de l'annonce. Rien n'est faux pris isolément. Ensemble, il n'y a aucun premier élément à lire.

À droite, l'écran se lit de haut en bas : qui vous êtes, quoi chercher, louer ou acheter, quel type de bien, puis une grande annonce. La bannière est toujours là, mais elle attend en bas, plus petite, là où elle ne concurrence pas la recherche.

Correction 1 : une ligne de recherche, un contrôle Louer ou Acheter

Avant

Après

Un champ de recherche cerné avec un micro, cinq icônes de catégorie rondes, puis un bouton Louer plein, un simple mot Acheter, un bouton Trier cerné et un lien Filtrer. Contre un champ de recherche gris avec un seul bouton de filtre bleu, et Louer et Acheter comme les deux moitiés d'un seul contrôle segmenté.

Le brouillon met quatre contrôles sur une ligne et donne à chacun une apparence différente : Louer est un bouton plein, Acheter est du texte nu, Trier est cerné et Filtrer est un simple lien avec une icône. Le lecteur doit deviner lesquels sont des boutons, des onglets ou des interrupteurs avant d'en utiliser un.

La correction donne une forme à chaque tâche. Recherche et filtre vivent sur la même ligne, car filtrer fait partie de chercher. Louer ou Acheter est un choix entre exactement deux options, ce pour quoi existe un contrôle segmenté : les deux options restent visibles et la sélection est clairement allumée. Trier s'écarte, car il n'a de sens qu'une fois les résultats affichés.

Règle à réutiliser : si deux contrôles font le même genre de travail, ils doivent se ressembler. S'ils font des travaux différents, non.

Correction 2 : des catégories qui montrent ce qui est choisi

Avant

Après

Cinq fins cercles cernés avec une petite étiquette dessous, où seule l'étiquette bleue indique qu'Appartement est sélectionné. Contre des chips pleines avec une icône et un mot sur une ligne, où Appartements est en bleu plein et les chips suivantes dépassent du bord.

Dans le brouillon, le seul signe de ce qui est sélectionné est une étiquette bleue en petit texte sous un cercle. Les cercles eux-mêmes sont identiques, donc l'œil doit lire les étiquettes une à une pour trouver l'active.

Une chip avec un remplissage plein répond à la question avant qu'on la pose. L'état sélectionné a une autre couleur et un autre poids, pas une petite différence de texte. Les chips sont aussi plus larges que hautes, donc l'icône et le mot tiennent sur une ligne et la rangée prend moins de hauteur. La chip coupée au bord droit montre que la rangée défile, sans besoin de flèches.

Correction 3 : une carte d'annonce qui se lit dans l'ordre

Avant

Après

Annonces à la une avec une étoile et une flèche, une photo avec un badge « 1 Year Old » et des boutons plus et cœur, un $2,400 per month en bleu, des pastilles Sale et Rent, une adresse, et des détails chambres et salles de bain coupés par un bouton Carte flottant. Contre une grande photo arrondie avec un seul cœur, puis $2,400 per month, 2-bed apartment, Alfama, Lisbon et 2 bd, 2 ba, 980 sq ft.

Quelqu'un qui regarde un logement pose quatre questions dans le même ordre : combien, c'est quoi, c'est où et c'est grand comment. La correction met la carte dans cet ordre, une réponse par ligne. Le prix est le texte le plus grand, puis le type de bien, puis des lignes plus légères pour le lieu et les détails.

Le brouillon mélange les réponses. Le prix partage une ligne avec deux pastilles qui disent Vente et Location pour un bien qui n'est qu'à louer. L'adresse est au-dessus des détails mais sous le prix, dans une autre couleur. Les détails sont en petit texte de 9 points et le dernier est caché sous le bouton Carte, donc le lecteur perd la surface, un chiffre que la plupart des gens comparent.

Aussi retirés de la photo : le badge « 1 Year Old » et le bouton plus. Deux boutons flottants sur chaque image réclament des décisions que le lecteur n'a pas encore prises. Un seul cœur suffit, et la photo est plus grande parce que c'est la photo qui vend le bien.

Règle à réutiliser : une carte est une phrase. Décidez de son ordre des mots, puis donnez à chaque mot un seul style.

Correction 4 : quatre onglets dans un seul style d'icônes

Avant

Après

Accueil, Mes biens, Messages, Favoris et Plus, avec des icônes pleines et en contour mélangées. Contre Accueil, Enregistrés, Messages et Profil, toutes en contour, avec seulement Accueil en bleu.

Le brouillon a cinq onglets, dont trois sont proches : Mes biens, Favoris et Plus sonnent tous comme des endroits où un bien enregistré ou possédé pourrait se trouver. Ses icônes mélangent aussi des formes pleines (la maison, les messages) et des contours (l'immeuble, le cœur), donc l'onglet actif se distingue mal d'un onglet simplement dessiné plus lourd.

La correction utilise quatre onglets avec un seul style d'icônes, si bien que la seule différence entre onglets est celui qui est actif. « Favoris » devient « Enregistrés », un mot plus court qui rejoint le cœur sur la carte. « Plus » devient « Profil », un nom qui dit ce qu'il y a derrière. Les consignes d'Apple décrivent la barre d'onglets comme une navigation entre sections de premier niveau, donc une destination qui est en fait un menu de restes n'y a pas sa place.

Les petites corrections

• Un en-tête avec une personne dedans. La correction ajoute un message de bienvenue, un avatar d'initiales dans un cercle bleu plein et une cloche avec un point rouge. Le brouillon n'a pas d'en-tête, donc rien ne dit à qui est cette app.
• Une seule marge. Le brouillon utilise 12 à gauche et 16 à droite, donc rien ne s'aligne sur le bord de l'écran. La correction utilise 20 des deux côtés de chaque ligne.
• Une seule échelle d'espacement. Les écarts font 4, 8, 12 ou 16. Quand chaque écart vient de la même courte liste, les lignes semblent liées sans aucun séparateur.
• Une échelle de texte venue de la plateforme. Le texte du brouillon va de 9 à 15 px sans logique. La correction utilise les tailles iOS de 11 à 22 pt, des tailles que les gens peuvent lire.
• Une bannière plus calme. « List your home for Free » a perdu le mot d'accent en italique, le contour de maison et le second bouton à l'intérieur. C'est maintenant une seule ligne avec une seule flèche.

Auditez votre propre app immobilière

Récupérez le fichier Figma

Le fichier gratuit contient les deux écrans, chaque partie de l'écran corrigé en composant, les variables de couleur, les styles de texte iOS et un read-me avec les crédits photo.

Fichier Figma gratuit

Écran d'accueil immobilier, avant et après

Les deux écrans et chaque partie corrigée en composants Figma. Gratuit, en lecture seule, dupliquez-le dans vos brouillons.

Ouvrir dans Figma

FAQ

Que doit montrer en premier l'écran d'accueil d'une app immobilière ?

Un champ de recherche avec un seul bouton de filtre, puis Louer ou Acheter et le type de bien. Placez les annonces juste en dessous, avec la bannière et les offres secondaires après.

Comment montrer Louer et Acheter dans une app immobilière ?

En contrôle segmenté à deux moitiés, pour que les deux options soient toujours visibles et que le choix actif soit clairement mis en avant. Quatre styles de boutons différents sur une ligne obligent à deviner.

Que doit contenir une carte d'annonce immobilière ?

Le prix d'abord, puis le type de bien, le lieu et les détails clés comme les chambres, les salles de bain et la surface. Un seul bouton favori sur la photo suffit.

Combien d'onglets une app immobilière doit-elle avoir ?

Quatre, c'est un bon nombre : Accueil, Enregistrés, Messages et Profil. Évitez deux onglets qui sonnent comme le même endroit, comme Favoris et Mes biens.

Comment montrer quelle catégorie est sélectionnée ?

Remplissez la chip sélectionnée avec la couleur de la marque et gardez les autres neutres. Un petit changement de couleur de texte sous un cercle passe facilement inaperçu.

Sources

• Les deux écrans sont les nôtres, conçus et mesurés dans Figma.
• Photos via Unsplash par Luke van Zyl, A. L. Brown et Annie Spratt, sous la licence Unsplash.
• Apple Human Interface Guidelines : Tab bars.
• Apple Human Interface Guidelines : Typography, les tailles de texte iOS.
• D'abord publié sous forme de carrousel sur App Brainy.