Les détails créent l'expérience utilisateur : 15 exemples en image

L’expérience utilisateur en ligne est une savante équation, une équation composée de nombreuses variables comme le design, les interactions, le temps de chargement, la navigation, le discours client, la haute disponibilité, la qualité de service, etc. Cette équation « expérience utilisateur »se doit de trouver son équilibre entre le ressenti de l’utilisateur et l’efficacité du site à atteindre son objectif premier.

J’aurais l’occasion de revenir plus en détails sur cette définition mais je voulais partager avec vous quelques exemples de petits (de tout petits) détails mis en place sur certains sites web ou applications et qui contribuent à créer une véritable expérience utilisateur. Vous ne les avez peut-être jamais remarqués, ou n’y avez jamais fait attention mais pourtant c’est souvent grâce à ces petits détails que vous avez eu l’impression que le site en question était fun, cool, intuitif ou encore efficace. Petite sélection.

  1. Le logo de CNN change
  2. Détection automatique de la carte de paiement
  3. Regroupement visuel des calques
  4. Le logo change au fur et à mesure de la lecture de la vidéo
  5. Illusion de vitesse sur une barre de chargement
  6. Un clic droit sur le logo propose le téléchargement du logo
  7. Le logo indique à l’internaute où il sera redirigé
  8. L’image prend la forme du conteneur
  9. Le contenu de la page s’adapte en fonction de la hauteur de l’écran
  10. Le rollover est de la couleur de l’icône de l’application
  11. La taille de police de l’email s’adapte à sa longueur
  12. La carte zoome en suivant le curseur de la souris
  13. Surligner du contenu dans une page
  14. Pré-charger les prochains résultats d’une recherche
  15. Afficher immédiatement l’avatar lors de la saisie du login

#1 – Le logo de CNN change

En fonction de la rubrique visitée, le globe terrestre présent dans le logo de CNN tourne pour se positionner sur la zone en cours.

Le logo de CNN change

 

#2 – Détection automatique de la carte de paiement

GitHub détecte automatiquement le type de carte que vous êtes entrain d’utiliser pour régler l’achat d’un de leur plan.

Détection automatique de la carte de paiement

Détection automatique de la carte de paiement

 

#3 – Regroupement visuel des calques

Le logiciel de retouches photos et d’édition d’image Pixelmator regroupe visuellement les calques qui appartiennent au même groupe en les empilant.

Regroupement visuel des calques

 

#4 – Le logo change au fur et à mesure de la lecture de la vidéo

Lors de la lecture d’une vidéo Dailymotion, le logo en bas à droite change en fonction de la progression de lecture de la vidéo, comme une barre de progression.

Le logo change au fur et à mesure de la lecture de la vidéo

 

#5 – Illusion de vitesse sur une barre de chargement

En fonction de l’animation mise en place dans une barre de chargement ou de progression, l’impression (ou l’illusion) de vitesse peut être bien différente !

Image de prévisualisation YouTube

 

#6 – Un clic droit sur le logo propose le téléchargement du logo

Lorsque l’on clique avec le bouton droit sur le logo du site Askimet, une popup propose de télécharger le logo du service en haute définition.

Un clic droit sur le logo propose le téléchargement du logo

 

#7 – Le logo indique à l’internaute où il sera redirigé

Sur le site d’Amazon, un simple survol du logo indique à l’internaute qu’il pourra ainsi revenir sur la page d’accueil. Petite subtilité : cette fonctionnalité est désactivée sur l’accueil du site.

Le logo indique à l’internaute où il sera redirigé s’il clique dessus

 

#8 – L’image prend la forme du conteneur

Sur Tumblr, certaines images sont mises en avant dans la colonne de droite en prenant la forme d’une info-bulle (y compris la flèche)

#8 – L’image prend la forme du conteneur

 

#9 – Le contenu de la page s’adapte en fonction de la hauteur de l’écran

La page d’accueil du site Tumblr adapte sa mise en page en fonction de la taille de l’écran ou du navigateur. Cela fonctionne même en live en redimensionnant la taille de la fenêtre du navigateur.

Le contenu de la page s’adapte en fonction de la hauteur de l’écran

 

#10 – Le rollover est de la couleur de l’icône de l’application

Dans Windows 7, les boutons de la barre des tâches prennent automatiquement la couleur de l’icône de l’application quand on les survole.

Le rollover est de la couleur de l’icône de l’application

 

#11 - La taille de police de l’email s’adapte à sa longueur

Dans le formulaire de connexion de mobile.me, le champs de saisi de l’identifiant adapate la taille de sa police pour permettre d’afficher le maximum de caractères.

La taille de police de l’email s’adapte à sa longueur

 

#12 – La carte zoome en suivant le curseur de la souris

Sur une page d’une photo géolocalisée Flickr, la carte zoome au fur et à mesure que la souris avance sur la carte.

La carte zoom en suivant le curseur de la souris

 

#13 – Surligner du contenu dans une page

Le site du New York Times a mis en place un système permettant via des paramètres passés dans les URLs de surligner une partie du texte d’un article. Des exemples concrets ici, ou encore . En appuyant deux fois sur « shift » (= touche majuscule) un raccourci apparaît devant chaque paragraphe.

Surligner du contenu dans une page

 

#14 – Pré-charger les prochains résultats d’une recherche

Lorsque l’on page à la page suivante sur une recherche Amazon, les 3 prochains résultats sont immédiatement affichés sur la page pendant que le reste du contenu se charge.

Pré-charger les prochains résultats d’une recherche

 

#15 – Afficher immédiatement l’avatar lors de la saisie du login

Quora charge immédiatement l’avatar du compte correspondant au login (une adresse email) que vous venez de saisir lors d’une connexion et cela avant même que le mot de passe est été saisi.

Afficher immédiatement l’avatar lors de la saisie du login

 

Sources : Pour compiler ces quelques exemples, j’ai trouvé plusieurs références sur Little Big Details ou dans ma veille quotidienne. Si vous en trouvez d’autres, je les publierai rapidement !

13 Commentaires (ajouter le vôtre)
  1. JB

    Des excellent point ! Merci Frédéric, De plus je découvre ton site avec intérêt…

  2. djedie

    Vraiment top, par contre, sur amazon (com ou fr), quand je survole le logo, rien n’apparaît (FF ou Chrome)…

    • djedie

      Oups, my fault!

      C’est juste sur la home que ça ne marche pas (normal en même temps…) :)

  3. [...] Les détails créent l’expérience utilisateur : 15 exemples en image [...]

  4. il y a de super exemple. C’est vrai que ce genre de détail passe inaperçu et pourtant ils ont un effet positif sur l’appréciation final qu’a l’utilisateur du site.

  5. [...] Quora charge immédiatement l’avatar du compte correspondant au login (une adresse email) que vous venez de saisir lors d’une connexion et cela avant même que le mot de passe est été saisi. Les détails créent l'expérience utilisateur : 15 exemples en image [...]

  6. Pour CNN l’image reste sur l’Europe qu’on soit aux US ou en Asie. Bouhhh ;)

  7. Merci pour tous ces exemples très inspirants !

    Je pense par exemple que toutes les versions mobiles des sites devraient utiliser l’excellente astuce #5 car avec les faibles débit parfois même en 3g le taux de rebond est souvent élevé !

  8. Très bon article Frédéric, vraiment c le top

© 2006-2014 Frédéric Cozic  
Propulsé par Wordpress sous licence Creative Commons