Avec cet article, je commence une nouvelle catégorie qui va traiter des petits trucs du webdesign, ces détails parfois oubliés qui donnent un plus à vos projets.

La photo de profil par défaut. On n'y fait pas souvent attention mais elle fait bien partie des éléments d'une interface web. On la retrouve un peu partout. Dans mon compte après m'être inscrit sur ce site. En dessous de cet article de blog que je viens tout juste de commenter. Dans cette notification qui m'informe qu'un bot me follow sur Twitter. Bref, un peu de partout.

Relayées au rang des "tu me fais vite fait une image", ça découle bien souvent sur une suite d'images identiques qui peuvent rendent un fil de commentaires morose et difficile à déchiffrer (pour retrouver un utilisateur, etc.)...

Mais la photo de profil par défaut a quelques atouts dans sa manche. Encore faut-il s'y pencher un peu dessus. L'idée étant bien sûr de sortir du schéma de l'image par défaut unique, pour se diriger vers un monde de couleur, de diversité, de personnalisation, de fun.

Diversifions un peu tout ça

Pour éviter d'avoir une page avec une série de mêmes photos de profil par défaut, on va bien naturellement chercher a en utiliser des différentes.

Pour cela, on peut commencer par se créer une collection de plusieurs images par défaut, piochées au hasard à chaque nouvelle inscription sur le site. C'est simple et rapide à mettre en place.

Suivant le site, on peut utiliser différents types d'images : la classique silhouette d'homme ou de femme, les textures, les photos d'animaux, les comics, etc. Libre à vous d'adapter votre choix pour le ton que vous souhaitez donner à votre site.

Personnalisons la photo

On peut aller un peu plus loin que la photo prise au hasard pour la rendre un peu plus personnelle.

Le service Identicon par exemple, permet de générer une image abstraite à partir de l'adresse IP de l'utilisateur. Il ne peut donc y avoir deux images identiques dans un flux de commentaires.

On peut également, grâce à quelques outils, créer une image à partir des initiales d'un utilisateur.

Gravatar est un service web qui permet, à partir d'une adresse email, de récupérer une image de profil. En s'enregistrant sur ce site, l'utilisateur défini une image qui sera ensuite appelée par le site web lorsque l'utilisateur s'y inscrira avec cette adresse email. Pratique.

On utilise actuellement beaucoup les réseaux sociaux pour récupérer une première image de profil. Plus besoin de remplir un formulaire avec son nom, son prénom et télécharger sa photo de profil, il suffit de se connecter à Facebook ou Twitter pour récupérer automatiquement ces informations.

Mais on est déjà un peu loin de la photo de profil par défaut.

Faites-le pour vos utilisateurs

Bref, tout ça pour dire qu'il faut aller un peu plus loin que la photo de profil par défaut standard et unique. Il faut sortir l'utilisateur de cette masse de John Doe pour le rendre unique et identifiable.

Je vous ai listé différentes méthodes simples et rapides à mettre en place, mais il en existe bien d'autres. A vous de faire jouer votre imagination et les outils à votre disposition.

Regardez par exemple ce que fait Wordpress. Dans son interface d'administration, il est possible d'utiliser une image unique, Gravatar, Identicon, etc.

Mon side project : defaultpictu.re

En écrivant cet article, je me suis rendu compte qu'il n'existait pas (j'ai l'impression) de service qui propose une bibliothèque de collections de photos de profil par défaut, accessibles par un site web distant.

Avec mes petits doigts, j'ai donc monté defaultpictu.re qui regroupe des collections de photo de profil. Ces dernières peuvent être appelées par votre site, directement dans une balise <img/> ou via une API.

Encore en version alpha, j'y travaille petit à petit. N'hésitez pas à me laisser vos remarques.