Conception d’une expérience utilisateur attrayante – Notions de base

Article d’origine publié le vendredi 14 décembre 2012

Bonjour à tous ! Je m’appelle Kate Dramstad et je suis responsable de programme au sein de l’équipe de recherche SharePoint. L’expérience de recherche dans SharePoint 2013 est plus extensible que jamais. Nous avons donné aux concepteurs et développeurs les moyens de laisser libre cours à leur imagination. Toutefois, il convient de faire attention lors de la personnalisation de l’expérience de recherche. Il y a une frontière étroite entre une page équilibrée et une page désordonnée. J’aimerais partager avec vous certaines de nos réflexions concernant la conception d’une expérience de recherche à la fois attrayante et utilisable.

Alignement de la page entière

L’un des facteurs les plus importants pour notre expérience de recherche est l’alignement de tous les éléments de la page. Dans notre conception par défaut, vous remarquerez que le composant WebPart de perfectionnement (qui montre les options de tri sur le côté gauche de la page) et l’icône du centre de recherche SharePoint (l’image de loupe dans l’angle supérieur gauche) sont alignés sur la gauche. La zone de recherche, la navigation et les résultats sont également alignés sur la gauche. Le haut de la zone de recherche est aligné avec le haut de l’icône, et le bas de la navigation est aligné avec le bas de l’icône. 

Figure 1. Tous les éléments de la page de résultats de recherche sont alignés sur une grille, affichée ici en vert

Cela peut sembler être un détail mineur, mais le fait d’ancrer les éléments de la page sur une grille facilite pour les utilisateurs l’analyse de la page. Les composants sont séparés par des lignes verticales et horizontales d’espace blanc. Cela aide l’œil à distinguer les différents composants de la page, ce qui est extrêmement important. Une page mal alignée, au mieux, donne une impression « étrange » aux utilisateurs et, au pire, les empêche de pouvoir analyser efficacement les résultats. Un mauvais alignement des composants peut produire un effet d’« escalier ». Lorsque les yeux tentent d’analyser une présentation en « escalier », ils doivent constamment aller et venir. L’œil est beaucoup plus performant quand il doit analyser du texte sur des lignes droites. 

Figure 2. Dans cette image, l’icône de recherche est décalée vers la gauche et n’est plus alignée sur la grille.

Lors de l’ajout d’un nouveau composant à la page, ou lors de la réorganisation des composants existants, il est très important de conserver cette grille à l’esprit si vous souhaitez que l’expérience soit la plus « lisse » possible. 

Figure 3. Ici, nous avons modifié les résultats intralignes de façon à inclure une fonctionnalité de notation par étoiles et certaines métadonnées supplémentaires. Notez que les composants supplémentaires sont encore alignés sur la grille.

Apparence de la page entière

L’alignement n’est pas l’unique facteur qui importe. Vous devez également faire attention au nombre de couleurs, de polices et de contrôles enrichis dans la page. Le focus de la page de résultats de recherche doit presque toujours être les résultats proprement dit. Par conséquent, lors de l’application d’un style aux composants de la page de résultats, vous devez vous assurer de ne pas attirer l’œil de l’utilisateur sur autre chose que les résultats. Voici quelques conseils et astuces.

Utilisez dans la mesure du possible des mappages de couleurs faciles à comprendre

Par exemple, il est généralement admis que dans les résultats de recherche le texte bleu est le titre de résultat sur lequel on peut cliquer et le texte vert est l’URL d’un résultat donné. Si vous déviez de ces conventions, vous forcez l’utilisateur à réfléchir davantage à ce qu’il regarde. 

Figure 4. Changer la couleur du titre et de l’URL a tendance à perturber l’utilisateur. Essayez d’utiliser les couleurs d’une manière qui correspond aux conventions établies.

Utilisez le moins de couleurs possibles

Les couleurs contribuent généralement à mettre en valeurs certains éléments, tels qu’une option de filtre sélectionnée, un titre de résultat ou une URL. Si vous en utilisez trop, l’utilisateur aura l’impression que chaque élément tente d’attirer son attention. Au bout du compte, vous n’obtiendrez qu’un kaléidoscope de couleurs où aucun élément ne sera visuellement en avant. 

Figure 5. Une trop grande quantité de couleurs a un effet gênant et empêche d’identifier les éléments les plus importants. Limitez le nombre de couleurs utilisées dans l’interface utilisateur.

Utilisez le moins de styles et de tailles de polices possibles

Les polices, la taille des polices et le style de police (gras/italique) s’utilisent pour les mêmes raisons que les couleurs : pour aider à mettre en avant certains éléments importants. Comme avec les couleurs, si vous utilisez trop de styles et de polices, tout semblera désordonné. Notre équipe de produit emploie dans ces cas-là le terme de « note aléatoire » : la page semble être constituée de coupures de journaux collées les unes à côté des autres !

Faites en sorte que les contrôles enrichis soient visuellement le plus simple possible

Jetez un œil à l’affinement d’histogramme Filtre chronologique, sous le titre Modified à la Figure 6. Placer cet affinement dans notre page par défaut était au départ assez risqué, car il s’agit d’un contrôle à l’apparence complexe susceptible d’être trop visible comparé aux filtres basés sur le texte. Toutefois, nous avons conservé des couleurs cohérentes avec le reste de la page et appliqué des formes et des traits nets et simples. Il est essentiel de faire de même lors de l’ajout d’un contrôle personnalisé.

Nous avons également pensé ajouter un filtre de graphique en secteurs, mais vous constatez sur la Figure 6 combien cet affinement est perturbant. 

Figure 6. Le filtre de graphique en secteurs personnalisé comporte trop de couleurs et n’est pas cohérent avec le style visuel des autres contrôles. Il perturbe trop la lisibilité de la page.

Observez maintenant la Figure 7 pour voir ce qui se produit lorsque nous simplifions le modèle de couleurs et les formes. 

Figure 7. Nous avons ici employé des couleurs déjà utilisées dans l’interface utilisateur et conservé le style visuel des autres contrôles. Cet affinement de graphique en secteurs est suffisamment intéressant pour que les utilisateurs y jettent un œil, sans toutefois les détourner de leur tâche principale.

Division conceptuelle de la page

Lors de la conception d’une expérience de recherche, vous devez prendre en compte à la fois les détails esthétiques et conceptuels. Sur la base des conventions de recherche les plus courantes et de nos propres recherches, nous avons organisé les composants de la page en différentes zones basées sur la fonctionnalité et le modèle d’interaction utilisateur. Lors de l’ajout ou de la réorganisation de composants, il est préférable de conserver notre division conceptuelle afin que les utilisateurs ne se perdent pas quand ils cherchent comment effectuer une action.

Par exemple, toutes nos actions de filtre se trouvent du côté gauche de la page de résultats de recherche. Lorsque les utilisateurs souhaitent filtrer leur jeu de résultats, ils savent où ils doivent regarder. Si vous voulez ajouter un nouveau filtre à la page, il vaut mieux le placer à côté des autres filtres ; cela évitera aux utilisateurs de partir à sa recherche.

La Figure 8 montre un aperçu des divisions conceptuelles de la page de résultats de recherche par défaut. 

Figure 8. La page de résultats de recherche est divisée en cinq zones fonctionnelles. Lors de la personnalisation de la page, essayez d’ajouter les nouveaux éléments à la zone fonctionnelle correspondante.

J’espère que ces quelques consignes générales vous aideront à concevoir des expériences de recherche attrayantes. N’hésitez pas à me communiquer vos commentaires et questions !

Ce billet de blog a été traduit de l’anglais. La version originale est disponible à la page Designing a beautiful search experience – The basics