Histoire
Il y a quelques mois, animés par le désir de créer une expérience utilisateur nouvelle et optimisée, nous avons décidé de refondre notre interface. Lorsqu'un utilisateur visite Zumper à la recherche d'une maison ou d'un appartement à louer, il commence par explorer les quartiers et les villes. Une fois le lieu idéal trouvé, il se concentre sur la recherche de l'immeuble ou du logement parfait. Progressivement, il crée ses annonces favorites, suit de près les évolutions de certains secteurs, et finit par visiter les biens qui lui plaisent vraiment et déposer une candidature. C'est dans cet esprit que nous avons voulu créer un outil de recherche cohérent qui contextualise votre recherche au moment opportun. Ainsi est né notre nouvel outil de recherche, baptisé Dora.
D'un point de vue technologique, la première version de notre application grand public utilisait des modèles Django avec jQuery et Closure pour le rendu dynamique côté client. Lors de la création de la première version de notre Produit professionnel, AngularJS est devenu notre framework de prédilection pour fournir une solution davantage axée sur le modèle MVC à une application comportant peu de vues, mais des fonctionnalités avancées. Au fil du temps, nous avons utilisé davantage de services et de directives dans le code front-end et avons opté pour Angular lors du développement de nouvelles parties du site. Nous avons décidé d'adopter pleinement AngularJS car il offre une excellente base pour le modèle MVC côté client. Nous avons également réécrit l'intégralité de notre code existant. Après avoir examiné des applications web développées par Airbnb, Rayon, et Virgin America, Nous avons donc décidé de construire certaines de nos propres solutions personnalisées en nous appuyant sur les travaux de géants.
Recherche contextuelle
Lors du lancement initial de notre produit grand public, notre site proposait deux sections principales : la carte et le flux d'annonces (pages des villes et des quartiers). Les utilisateurs pouvaient ainsi effectuer une recherche visuelle globale ou consulter les annonces d'un quartier ou d'une ville spécifique. Au départ, cette approche convenait parfaitement aux utilisateurs ayant différents styles de recherche. Cependant, nous avons constaté par la suite que cette dichotomie rendait le produit cloisonné et incohérent. Chaque vue ne partageait pas l'historique de recherche de l'utilisateur et il n'existait aucun moyen simple de l'enregistrer.
Par conséquent, nous avons décidé d'unifier les informations et de les partager entre les deux vues. Les données géographiques et les paramètres de filtrage sont désormais stockés dans un service commun, ce qui vous permet de passer facilement d'une vue à l'autre sans perdre le contexte de votre recherche. De plus, si vous déplacez la carte lors d'une recherche dans la vue liste (ci-dessus), nous déterminerons la ville ou le quartier en fonction de votre vue actuelle. Vous pourrez ainsi facilement identifier ce qui rend le quartier que vous consultez si particulier (comme les burritos exceptionnels de $6 dans le quartier Mission, que j'adore tant). Vous trouverez également nos graphiques de loyer qui affichent le loyer médian de la ville ou du quartier et son évolution au cours des derniers mois. Enfin, si vous interrompez votre recherche, nous vous rappellerons où vous en étiez à votre retour.
URL descriptives
Nous avons constaté que nos utilisateurs aiment partager les annonces et les recherches. Lorsque vous cherchez un appartement ou une maison, il arrive souvent qu'un deuxième avis soit utile. Vous déménagez peut-être dans une ville que vous ne connaissez pas. Vous cherchez peut-être un appartement en colocation avec des amis. Quel que soit le cas, il est plus facile de faire des recherches à plusieurs quand on est tous sur la même longueur d'onde. C'est pourquoi nous avons décidé de modifier la présentation de nos URL. Il est très simple non seulement de partager une URL, mais aussi de comprendre et de modifier les termes directement dans la barre d'adresse. Par exemple :
Appartements de deux chambres à San Francisco à moins de 3 000 $ ($3)
/appartements-à-louer/san-francisco-ca/2-chambres/moins-de-3000
Studios à Chicago acceptant les animaux de compagnie
Appartements à louer à Chicago (Illinois), studios acceptant les animaux domestiques.
Appartements à Chelsea, New York, avec au moins deux chambres et sans frais d'agence
/appartements-à-louer/new-york-ny/chelsea/sans-frais/2+chambres
Vous voulez les voir tous sur une carte ? Ajoutez simplement /map après zumper.com et vous verrez les recherches ci-dessus sur une carte en taille réelle.
/map/appartements-à-louer/new-york-ny/chelsea/sans-frais/2+lits
Nous avons décidé d'utiliser Routeur AngularUI Pour gérer tous les états principaux (et sous-états) de notre application cliente, nous avons utilisé notre service de géolocalisation pour gérer les informations géographiques et notre service de filtrage pour déterminer l'état des filtres. Chacun de ces services écoutait les actions effectuées dans l'interface et mettait à jour son état. Mais qu'en était-il des URL ? Pour chaque modification d'URL, nous avons développé notre propre traducteur capable de lire les changements d'état et de les répercuter dans l'URL (et inversement).
En résumé, tout est mis ensemble
Lorsque je travaillais au sein de la division Publicité Display Mobile chez Google, nous développions des bibliothèques spécialisées, à la fois obfusquées et compressées, afin de les rendre suffisamment légères pour une transmission rapide sur le réseau, tout en garantissant une expérience multimédia riche sur une large gamme d'appareils. Chez Zumper, nos utilisateurs consultaient régulièrement notre site pendant leurs recherches d'appartement. Je me suis alors demandé s'il était possible de segmenter l'application page par page, en la construisant entièrement en fonction du parcours de chaque utilisateur lors de sa recherche sur Zumper.
En coulisses, notre principale préoccupation est devenue l'optimisation du chargement des données nécessaires à l'affichage de nos vues front-end. Les applications AngularJS monopages classiques souffrent de la nécessité de charger tous les modules à l'exécution, d'injecter et de compiler l'application (initialisation), puis de charger potentiellement les modèles pour les contrôleurs ou les directives. Au premier chargement, notre bibliothèque principale est chargée par défaut pour configurer le framework et le routeur de l'application, qui intercepte les requêtes. Lorsqu'une page spécifique est demandée, le module AngularJS correspondant est chargé dynamiquement sous sa forme compressée/obfusquée. Angular est informé du module nouvellement chargé, le compile et l'injecte dans l'application, puis affiche la page. Si l'utilisateur navigue vers une autre page, nous vérifions si le module/les dépendances de cette section sont déjà chargés. Si ce n'est pas le cas, ils sont chargés dynamiquement avant le chargement du modèle. De cette manière, à mesure que l'utilisateur navigue sur notre site, tous les éléments de notre application côté client sont progressivement assemblés. Nous avons décidé d'utiliser ocLazyLoad comme solution simple pour le chargement différé de nos modules AngularJS compressés.
En revanche, lors du chargement d'une page directement depuis le serveur, sans passer par notre application côté client (chargement à froid), nous intégrons nos modèles de vue principaux et nos modèles de directives de base directement dans le code. Nous intégrons également les objets de données pertinents afin de réduire le nombre de requêtes asynchrones ultérieures. Ainsi, les utilisateurs arrivant sur notre site depuis d'autres sources bénéficient d'une page d'accueil qui se charge rapidement, qu'il s'agisse d'une annonce spécifique ou d'une liste de logements à San Francisco. Nos modèles et scripts sont également mis en cache, ce qui garantit une navigation plus rapide lors des sessions suivantes.
Par conséquent, notre vision d'une expérience de recherche continue mais dynamique s'est traduite par une application à chargement et mise en cache dynamiques, construite pendant votre recherche. Vous devriez Voyez par vous-même et Faites-nous savoir ce que vous pensez.
Bonne recherche !
Contenu associé
