Qwant change son design

Qwant FR
Le blog Qwant
Published in
6 min readJul 4, 2018

Qwant dévoilait en avril 2015 la version 3 de son moteur de recherche dont l’interface utilisateur colorée, tout comme sa promesse de respect de la vie privée, étaient en rupture avec celles des grandes plateformes américaines. Souvent adulé, parfois décrié, le design qui a contribué au succès de votre moteur évolue aujourd’hui pour vous permettre de faire des recherches toujours plus rapides et efficaces sur tous les types d’écrans, mêlant sites internet, actualités et contenus issus des réseaux sociaux.

Notre design n’a pas toujours fait l’unanimité !

En trois ans, Qwant n’a cessé d’évoluer et de proposer à ses utilisateurs de nouvelles fonctionnalités qui n’avaient pas été imaginées au moment de la conception des interfaces initiales. C’est notamment le cas des “verticaux” dédiés à la musique et au jeu vidéo et des “Instant Answers” qui offrent des interactions plus riches et plus immédiates. Ces itérations rapides, bien qu’apportant toujours plus de valeur au moteur, ont parfois complexifié l’expérience utilisateur.

Comprendre et analyser l’existant

Pour concevoir la version 4 de Qwant, il nous a donc fallu analyser en profondeur les points forts et points faibles de nos interfaces. C’est ce que nous avons fait grâce à nos utilisateurs, aussi prolifiques sur les réseaux sociaux que lors de nos rencontres dans les nombreux salons où se rend Qwant, mais aussi au travers de tests utilisateurs en laboratoire.

Carte de chaleur des éléments attirant le plus le regard

Notre équipe de designers a fait appel au laboratoire LUTIN pour mener des tests d’utilisabilité auprès d’un public représentatif de la population. Les données d’occulométrie (capture du regard) et les verbatims (commentaires libres) collectés par les chercheurs en ergonomie ont ainsi conforté les designers et développeurs de Qwant dans leur idée de redesigner le moteur.

Repenser les interfaces de Qwant

Plusieurs questions ont articulé le travail de conception :

1. Comment permettre une lecture optimale des résultats de recherche tout en mettant en avant les contenus “chauds” (actualités, tweets) ?

2. Comment faciliter la recherche exploratoire sur Qwant, au travers des “verticaux” (Music, Games) ?

3. Comment moderniser l’univers graphique de Qwant tout en respectant son ADN ?

Pour fluidifier la lecture des résultats de recherche sur les machines portables, nos équipes de design ont pris la décision de renoncer à la traditionnelle vue en trois colonnes (web, actualiés, social) pour mettre désormais en place deux colonnes complémentaires sur la version desktop.

Les “Instant Answers”, initialement placées en haut de la page, viennent ainsi se placer à droite des résultats, libérant sur PC et sur Mac un espace appréciable pour les internautes dotés d’un écran au format 16/9ème. Les actualités et les contenus issus des réseaux sociaux sont placés dans cette même colonne, ce qui permet des rebonds vers d’autres types de contenus sans gêner la lecture des résultats web. Cette nouvelle mise en page permet au regard de suivre le “F” caractéristique des moteurs de recherche : forte sur les premières lignes du texte, l’attention du lecteur faiblit plus on descend dans la page, formant ainsi la lettre F…

Une meilleure intégration des “verticaux”

Un autre point d’amélioration a été apporté sur la navigation au sein des “verticaux”. L’accès à des univers de recherche spécialisés dans la musique, les jeux vidéos et bientôt le sport constitue un élément fort de cette nouvelle version.

Nous avons mis en place une double navigation commune au moteur de recherche principal et à Qwant Games et Music. Placé sous le champ de recherche, un premier menu permet de basculer entre la recherche traditionnelle et les verticaux. Une fois l’un de ces derniers activé, la barre verticale dédiée aux types de contenus (web, news, social, images, vidéos, shopping) évolue pour proposer de nouvelles options contextuelles. Ces dernières sont encore en cours de développement par nos équipes et seront disponibles très prochainement. Dans le cas de Qwant Music, le menu permettra par exemple un accès exhaustif aux contenus agrégés sur la page d’un artiste. Ce système rendra possible une meilleure intégration des verticaux au sein de Qwant tout en les dissociant des fonctionnalités habituelles d’un moteur de recherche.

Une nouvelle charte graphique

Nous avons fait évoluer l’identité visuelle de Qwant, tout en préservant la métaphore du spectre de la lumière qui a fait le succès de notre logo. Plutôt que de représenter de manière littérale une palette de couleurs, nous avons choisi de construire notre logo autour de 3 spots lumineux (rouge, vert, bleu) qui, une fois combinés, permettent de décliner une infinité de couleurs. C’est le procédé de synthèse additive.

La multiplicité et les nuances de ces couleurs symbolisent pour nous la diversité et la neutralité de nos résultats, qui permet de voir le monde tel qu’il est et dans toute sa richesse, sans rester figer sur une vision restreinte. La combinaison de ces lumières donne ainsi une identité à chacun de nos “verticaux”. Nous avons également réalisé un travail sur la typographie permettant d’accentuer la “loupe” placée dans la lettre Q de Qwant, et de faciliter la lecture de notre marque. Vous étiez parfois nombreux à lire “Q-Want” au lieu de “Qwant”, tout simplement parce que la visibilité du mot n’était pas clair.

Pour finir, un motif multicolore se décline sur tous nos supports, allant de l’écran aux brochures, en passant par nos goodies, et rassemble tous nos produits autour des mêmes formes.

Un “design system” exhaustif

Derrière tous ces changements graphiques se cache un tout nouveau “design system” (un ensemble de principes de design et de règles pour concevoir des interfaces) qui rassemble une centaine de composants réutilisables par nos développeurs pour composer tous les pages du moteur sur ordinateur, tablette et mobile. Ce kit nous a permis de gagner en cohérence, de rationaliser nos choix et d’industrialiser le développement des interfaces.

Une expérience mobile alignée

Tous les éléments de ce nouveau design sont bien sûr également disponibles sur smart phone et tablette, afin que votre expérience de recherche reste cohérente quels que soient les appareils que vous utilisez. Nous avons particulièrement retravaillés les résultats de recherche sous la forme de “cartes” afin que l’information soit mieux hiérarchisée et lisible en mobilité.

Et maintenant ? Nous avons hâte que vous découvriez notre travail et testiez cette version 4 de Qwant ! Vous pouvez dès à présent accéder à la nouvelle interface en utilisant Qwant. L’ancienne version (V3) restera disponible pendant encore plusieurs semaines dans le cas où vous en auriez besoin. Nous vous souhaitons une bonne découverte et vous invitons à remplir ce questionnaire d’évaluation pour nous faire part de votre avis et vos remarques. Ces retours précieux nous permettront de continuer à améliorer Qwant.

www.qwant.com

--

--

Qwant FR
Le blog Qwant

Qwant est le moteur de recherche qui protège votre vie privée. Nous n'avons pas besoin de collecter vos données pour fournir de bons résultats ! @QwantCom