Dans le cadre d’un projet scolaire, il nous a été demandé de réaliser un moteur de recherche fonctionnant en Intranet, de A à Z. Cela comprend donc toute l’infrastructure, le back-end ainsi que le front-end.
Dans mon équipe de 6 personnes, j’ai travaillé sur l’infrastructure et le front-end. Je ne vais ni m’attarder sur le back-end, pour cela vous pouvez en apprendre plus sur cet article de mon co-équipier sur la gestion des threads en C++, ni sur l’infrastructure qui repose sur du Windows Server 2012 (avec un serveur principal, 3 nœuds de basculement, et une base de données sur SQL Server 2012), ce n’est pas l’intérêt de cet article. Petite note sur le côté technique pour le front-end, le site a été réalisé en ASP.NET, entièrement responsive pour une adaptation smartphone/tablette/ordinateur. Les éléments graphiques sont des fichiers vectoriels au format svg, afin de proposer un parfait affichage quelque soit la densité de pixels (spécifiquement pour les écrans Retina, quadHD, 4K UltraHD, etc…)
Loop ? Qu’est-ce ? Pourquoi ?
Loop est le nom du moteur de recherche en lui-même, fruit d’un long travail de brainstorming de 6 cerveaux. Mais pourquoi avoir choisi ce nom ? Nous devions choisir un nom court… Aussi court que Google et Bing. Le nom doit marquer ! Et nous pensions que c’était parfait. Mais ce nom est bien plus qu’un simple nom.
Loop est phonétiquement similaire au mot loupe en langue française; cet objet est associé à la recherche. Loop signifie boucler en français, un moteur de recherche sert à chercher des informations, des réponses à nos questions, des choses à voir et à découvrir. Mais en même temps, le moteur de recherche engrange continuellement des informations. C’est donc une boucle infinie d’échange d’informations.
En partant sur ce nom, nous avions pu en faire un verbe: to loop, à l’image de to google pour les recherches Google. Cela nous a conduit à établir deux questions de base: What are you looping for ? pour les requêtes de recherche, et What do you want us to loop for ? pour la soumission d’un site à indexer.
Et l’UI, ça donne quoi ?
Le front-end du moteur de recherche est basé sur 3 types de pages différentes: l’une pour la page d’accueil, là où les recherches seront exécutés, une seconde pour l’affichage des résultats de recherches, une troisième pour les pages statiques du site.
Mais commençons d’abord par le choix de la police et des couleurs: la police utilisée est Open Sans. Nous étions partis pour du Helvetica, cependant l’utilisation d’une police plus ronde nous a permis d’utiliser une taille d’affichage plus grande pour plus de confort à la lecture, tout en ayant la possibilité de nuancer les titres en gras et de bien les différencier du contenu affiché en light.
Concernant les couleurs, le choix a été très difficile, les couleurs devaient être en harmonie. Nous avons retenu 8 couleurs au final pour notre palette. Ces couleurs, mi-tapantes/fluos, mi-pastels, s’accordent avec l’ère actuel qu’est le flat.
Le bleu cyan et le noir forment le logo Loop, le gris argenté pour les éléments se trouvant en pied de page, le noir pour le texte, le violet pour les liens déjà visités, et les 4 autres couleurs ont été utilisées pour le fond de la page d’accueil qui change.
Vous pouvez le voir ci-dessus, la page d’accueil est composée du logo, de la barre de recherche, du bouton recherche texte et du bouton recherche image. En pied de page, le petit clin d’œil pour l’ingénierie à la française, ainsi que les liens d’accès vers les autres pages statiques. En changeant aléatoirement le fond, nous avons pu produire une page d’accueil simple, mais pas fade.
Deuxième type de page du moteur de recherche: les page des résultats. Sur la page des résultats, les éléments en commun sont:
- L’entête avec la barre de recherche en haut de page, les boutons de recherche, et le logo, statique pour un accès rapide
- Le filtre de recherche juste au dessus des résultats (nombre de résultats pour les résultats textes, couleur dominante et taille pour les résultats images).
- Les résultats de recherche, avec le lien en bleu clair, l’adresse en vert, le texte descriptif en noir, les liens visités en violet.
- Boutons like et partage pour chaque résultat, avec les petits icônes (le bleu cyan pour le bouton partage, et le bouton like utilisant le rouge tomate). À noter que l’utilisation de ces boutons influent sur la pertinence des résultats.
- La pagination après les résultats, utilisant le bleu cyan et le gris argenté.
- Le pied de page, identique à la page d’accueil et aux pages statiques.
Toutes ces couleurs sont toutes issues de notre palette, c’est cette palette qui va créer la cohérence et l’identité visuelle associée au produit.
Troisième, et dernière page type du moteur de recherche: les pages statiques. Il y en a 4: Termes de services, Politique de confidentialité, À propos et Soumettre un site. La structure en commun comprend (en dehors du pied de page):
- L’entête avec une grande image, un grand logo Loop et un grand titre (deux photos issues d’une prise de vue personnelle, l’une provenant d’OS X Yosemite (oui c’est mal…), et l’une provenant de Wikimedia Commons). Cette image subit l’effet parallaxe du contenu qui suit, c’est plus agréable de voir le contenu venir se superposer sur l’image, cela fait référence à Material UI de Google avec la cohérence des couches (Material UI n’avait pas été présenté à l’époque du rendu du projet).
- Le corps du contenu, en débutant avec un titre secondaire, suivi du contenu.
Seules les pages À propos et Soumettre un site sortent un peu du commun, la première comprenant des photos de toute l’équipe sur une grille de 3×2, et la philosophie du projet dans une grille de 2×2, et la seconde composée d’un champ d’entré pour soumettre un lien.
Mieux vaut voir que lire, voici les images:
Et c’est pas fini…
Le projet en lui-même ne reposait pas uniquement sur le plan technique et design… L’aspect marketing avait un grand enjeux ! Après tout, il faut quelque chose pour propulser le projet. Nous avons donc décider de réaliser une vidéo introduisant la philosophie du projet. Cette vidéo a nécessité 1 journée de tournage: au sein de l’école, au supermarché local, dans le métro, dans le RER et 11km de Vélib’ !
La difficulté de créer une vidéo promotionnelle c’est comment présenter la chose. Et dans ce domaine, Apple est un exemple parfait: montrer uniquement des images, accompagnées avec quelques phrases, sans même présenter le produit en lui-même. Cette vidéo promotionnelle est donc découpée en 3 parties: la première fait allusion à la recherche texte (réponses/résultats à nos questions/recherches), la seconde fait allusion à la recherche image (le fait de voir et de découvrir), et la troisième fait allusion à la solution et aux fonctionnalités (le nombre et la variété des résultats, le bouton de partage et le bouton like).
Et pour finir, nous avons réalisé un flyer à 4 volets, reprenant en partie la page À propos du moteur de recherche, que vous pouvez consulter en cliquant sur le bouton suivant:
[button link=’https://www.kyvandoan.com/wp-content/uploads/2014/07/Flyer-Loop.pdf’ size=’medium’ color=’blue’ target=’blank’]Consulter le flyer de Loop[/button]
L’équipe (de gauche à droite): Étienne, Sophie, Antoine, Réda, Anja, moi (Ky Van)