étude de cas

Design de l'interface d'un site immobilier

Suite à la réalisation de plusieurs projets dans le secteur de l'immobilier, j'ai décidé de me pencher davantage sur l'expérience utilisateur d'un site immobilier en me basant sur des problématiques que j'ai pu rencontrer lors de projets d'ergonomie en agence.
Pour compléter l'exercice, une contrainte établie à partir d'une obligation réelle a été ajoutée en vue de la réalisation des maquettes graphiques : deux teintes devaient apparaître le noir/gris foncé et le rouge.


01 —
background

Process

Pour réaliser ce projet, plusieurs étapes ont été nécessaires pour parvenir au résultat final : benchmark et analyse de l'architecture de l'information (IA) de sites immobiliers, interview d'utilisateurs, réflexion sur les parcours des utilisateurs, réalisation de wireframes (UX), réalisation de maquettes graphiques (UI).

—————

Benchmark

Plusieurs sites immobiliers ont été analysés, 29 exactement, afin de comparer leur approche auprès des utilisateurs, la mise en avant des éléments ou encore l'intégration de leur charte. Voici la liste non-exhaustive de ces sites :

  • Ouest France Immo
  • Se Loger
  • Era France
  • Stephane Plaza
  • FNAIM
  • BPD Marignan
  • Lamotte

  • Realites
  • Homeideal
  • Orpi
  • Trulia
  • Urban Compass
  • Triplemint
  • Zameen


02 —
pour qui

Les utilisateurs

Pas toujours évidentes à organiser, les interviews d'utilisateurs sont très enrichissantes et utiles. Elles permettent tout d'abord de prendre du recul, car il est difficile de rester totalement objectif lorsque l'on travaille sur un projet d'ergonomie (UX Design et UI Design). De plus, ces échanges mettent en avant ce qui doit être amélioré (langage visuel, architecture de l'information), voire de découvrir des problématiques et solutions qui n'avaient pas encore été relevées.

Lors de ces interviews, j'ai pu découvrir que les deux premiers critères de recherche, en plus du type de transaction, étaient la localisation et le type de bien. Parmi les suivants, on pouvait retrouver : le nombre de pièces, le budget, le nombre de chambres, la surface et l'orientation (principalement pour une maison ou un terrain).

—————

Lors de la consultation de la page de liste de résultats, ces utilisateurs étaient sensibles à différents éléments :

  • la correspondance du titre de la page avec leur recherche
  • le/les visuel(s) des biens et la qualité des visuels en général
  • la localisation (aperçu du bien + vue carte)
  • le prix
  • la possibilité de les mettre en favoris pour les retrouver sur un autre terminal

—————

Parmi les utilisateurs, certains souhaitaient également vendre leur bien ou le louer et ils rencontraient des difficultés pour trouver ces informations sur certains sites immobiliers. Leurs impressions sur les pages d'accueil et de liste de plusieurs sites étaient :

  • "un peu fouilli"
  • "je ne sais pas où cliquer"
  • "pas facile de voir sur mon téléphone (NDR : smartphone)"
  • "dommage qu'il n'y ait pas de carte pour situer les biens"
  • "c'est moche et pas très moderne" (NDR : un retour incontournable et contructif, n'est-ce pas ?! ;))

chiffres clés

En complément, quelques chiffres intéressants sur les tendances de l'immobilier sur internet en France :

  • l'ordinateur est le device le plus utilisé (22%), suivi du mobile (16%)
  • 18% des consultations de site et d'applications immobilières sont multi-écrans
  • en ce qui concerne les habitudes de navigation des utilisateurs, le mobile est le terminal le plus utilisé au moment du réveil (14 %) et au coucher (25 %). L'ordinateur reste devant le reste de la journée (de 24 à 27 %)


03 —
user flow

Les parcours utilisateurs

Est-ce que les utilisateurs arrivent en majorité sur la page d'accueil d'un site ? La réponse, bien que dépendante de la notoriété de la marque, reste principalement "non" pour le secteur immobilier. En effet, la majorité des utilisateurs arrivent en premier lieu sur une page de liste qui correspond à leur requête effectuée dans leur moteur de recherche préférée (Google, Bing pour ne citer qu'eux).

Cependant, la page d'accueil ne doit pas être négligée, car elle représente la vitrine de la marque. L'utilisateur doit pouvoir ainsi accéder aux principales catégories du site sur cette dernière, le tout grâce à une hiérarchisation des informations cohérente en lien avec les objectifs de conversion, sans oublier l'intégration de CTA, aussi appellés call-to-action ou appel à l'action.


04 —
contenu

L'architecture de l'information

Suite aux différentes étapes en amont, j'ai priorité les éléments qui devaient apparaître sur les principaux écrans : la page d'accueil, la page de liste de résultats et le détail d'un bien.

home

Page d'accueil

  • moteur de recherche concis
  • accès pour les utilisateurs qui souhaitent vendre/louer un bien
  • présentation de biens (anciens et neufs)
  • contenu rédactionnel en lien avec la marque
  • actualités du secteur de l'immobilier

listing

Page de liste de résultats

  • titre visible
  • accès au moteur pour affiner la recherche
  • alerte mail
  • possibilité de changer de vue, liste et map
  • possibilité de trier les résultats

annonce

Page de détail d'un bien immobilier

  • titre de l'annonce
  • visuel(s) de qualité
  • prix (avec potentiellement un simulateur)
  • informations sur le bien
  • points de conversion : appel + mail
  • points forts rapidement visibles
  • localisation, précise ou par secteur


05 —
interface utilisateur

Wireframes

Un constat sur les sites immobilier, l'occupation de l'espace n'est pas toujours optimisée avec par exemple des colonnes irrégulières entre les pages, ce qui présente un désiquilibre visuel qui oblige l'utilisateur a cherché l'information.

J'ai donc pris le parti de proposer deux interfaces pour la principale page d'atterrissage, la page de liste de résultats : une première plus conventionnelle avec une vue grille et une seconde avec un premier écran de lecture séparé à la moitié

Ces deux itérations ont été soumises à l'oeil d'utilisateurs pour observer leur parcours et identifier les problématiques des ces propositions. Suite aux échanges, la seconde proposition permettait une meilleure lisibilité des annonces, un accès au moteur plus rapidement identifiable, ainsi qu'au switch entre la vue liste et carte.

—————

Design, maquettes graphiques

Suite à la phase de tests et de validation des wireframes, je suis passé à la réalisation du design de l'interface utilisateur, tout en intégrant le gris foncé et le rouge.