Agil
Réflexion sur l'expérience utilisateur d'un site immobilier

Process

Il y a quelque temps, j'avais réalisé un précédent projet autour de l'optimisation de l'expérience et de l'interface d'un site immobilier, c\imo. J'ai eu envie de réitérer cet exercice avec une nouvelle étude de cas que je vous propose : AGIL 🤓

Pas de surprise quant au processus de réflexion et de conception adopté, puisque les principales phases ont été reprises à savoir : le benchmark de sites du secteur, des recherches sur le marché de l'immobilier ainsi que sur les évolutions pour améliorer l'expérience utilisateur (technologies, fonctionnalités, etc.), la réflexion sur les parcours des utilisateurs ou encore les questions à des personnes réelles avant de réaliser les interfaces.

Benchmark

Parmi les sites immobiliers qui ont été étudiés, on peut retrouver : Bumper, Bien Ici, Keredes, Cogedim, Kaufman & Broad, Marignan, Trulia, Compass ou encore Triplemint. Les principaux points qui sont ressortis de cette étude sont :

• la volonté pour la majorité de mettre en avant les biens/programmes immobiliers à travers des photos et projections 3D de qualité. Un constat sur le mobile : cet espace réservé au visuel est généralement réduit, notamment dû au fait qu'un certain nombre d'éléments est présent à l'écran
• sur mobile toujours, les points de conversion principaux ne sont pas toujours visibles du premier coup d'œil
• une optimisation des informations sur les pages de liste pour laisser la part belle aux aperçus des biens, sans pour autant mettre de côté les sections de texte indispensables au bon référencement naturel (SEO) des pages
• un moteur de recherche central sur le premier niveau de la page d'accueil pour faciliter et orienter le parcours des utilisateurs vers les résultats de recherche en réponse à leur besoin

Les utilisateurs et leurs usages

Quel que soit le secteur, les habitudes de consultation des sites ont continué d'évoluer vers le mobile. En effet, plus de la moitié du temps passé sur Internet se ferait désormais via ce terminal. Un point à ne pas négliger lors de la conception d'interfaces, le mobile first devenant une des bases de la réflexion à intégrer dès le départ. L'ordinateur n'est cependant pas en reste avec le trois quart des utilisateurs âgés de 16 à 64 ans qui se connectent à Internet via un ordinateur portable ou de bureau.

Du côté des évolutions technologiques, il est intéressant de noter qu'aujourd'hui 43 % des utilisateurs emploient les interfaces vocales. Les "Ok Google" ou encore "Dis Siri" semblent avoir été adoptés et on peut imaginer une démocratisation d'autant plus importante par la suite. La réalité virtuelle et augmentée n'est pas en reste avec un marché qui s'est enrichi en 2019 et dont la tendance devrait se poursuivre sur 2020, en particulier dans les cas d'usage commerciaux, la formation ou encore la maintenance industrielle.

Les raisons ? Une évolution des accessoires qui a permis l'optimisation du tracking, du mouvement et de l'haptique pour améliorer davantage l'expérience des utilisateurs.

Guider la navigation et faciliter la découverte des produits

Suite aux recherches en amont, j'ai choisi de m'intéresser à 3 catégories d'intention des utilisateurs : visiter le site pour se renseigner, visiter le site pour trouver un bien et prendre contact, visiter le site pour simplement naviguer. J'ai choisi de travailler sur 3 principaux écrans : la page d'accueil, la page de liste de résultats de recherche, la page de détail jusqu'à l'acte de conversion finale.

Au vu de l'évolution des habitudes de navigation, les principes de conception de base, essentiels à toute expérience utilisateur, ont été respectés. De nouvelles fonctionnalités ont cependant été intégrées pour proposer une expérience utile, nouvelle et différenciante, telles que :

• la recherche vocale pour la recherche en remplacement du moteur
• la reconnaissance faciale pour la prise de contact à la place du formulaire conventionnel
• la réalité virtuelle en fonctionnalité secondaire sur les pages de détail pour proposer aux utilisateurs une immersion et faciliter la projection

Architecture de l'information et wireframes

Après avoir observé les nombreux éléments qui devaient apparaître sur les principales pages et une phase de croquis de recherche, j'ai maquetté sous forme de wireframes les premiers niveaux des écrans :

• Page d'accueil : un premier écran avec une phrase d'accroche pour inviter l'utilisateur a effectué sa recherche via, non pas un moteur de recherche conventionnel, mais directement à la voix
• Page de liste de résultats : le titre principal de la page avec le nombre de résultats, un bouton pour accéder à la vue carte placé volontairement en haut à droite pour laisser plus de place aux aperçus des biens, les boutons de modification des critères de recherche et de tri des résultats ainsi qu'un premier aperçu visible en entier
• Page de détail d'un bien : un premier niveau de lecture qui laisse la part belle au visuel principal, sans pour autant mettre de côté l'ensemble des informations principales (titre + localisation du bien), ainsi que le point de conversion principal
• Parcours de prise de contact : enchaînement des écrans jusqu'à la conversion finale

Design de l'interface

Passée la phase de conception des wireframes est venue la phase de réalisation de l'interface utilisateur (UI) avec l'intégration des micro-interactions pour donner plus de vie aux prototypes. Une attention a été portée aux éléments principaux pour faciliter leur accessibilité : contraste ou encore taille de ceux-ci (typographie, boutons).

Esthétiquement, j'ai choisi d'adopter un ton neutre sur les interfaces dans le but de mettre en avant les visuels. Les couleurs et nuances principales s'articulent ainsi autour du gris foncé, des nuances de gris plus claires ou encore du blanc. La typographie retenue est la Matter, une police d'écriture intéressante, car elle possède plusieurs niveaux de graisse.

Interface mobile

Comme évoqué, la conception a été uniquement réalisée en partant du mobile. Même sur ce terminal, il est possible de mettre en avant les visuels pour permettre aux utilisateurs de se projeter.

Pour aller plus loin, on pourrait imaginer que ces éléments fixes laissent la place à des images légèrement animés, à l'image des cinemagraphes, pour donner encore plus de vie au sein de l'interface.