include

Concept Interface d'une playlist sur téléphone

Related products: Application smartphones

Bonjour à tous,

J’espère que vous allez bien, je reviens encore avec un autre concept pour l’application Deezer. Aujourd’hui, l’interface des playlists sur téléphone, et dans cet exemple sur iPhone.

Alors pourquoi une page aussi spécifique ?

La page d’affichage d’une playlist contient plusieurs boutons qui sont nécessaires pour accéder aux différentes options. Or je trouve (et c’est un avis entièrement personnel) que ces boutons ont tous un visuel très différent, qui fait que la page manque de cohérence. Par exemple les boutons “Ecouter” et “Ajouter des titres” sont l’un au dessus de l’autre, se ressemblent mais sont pourtant très différents (l’un avec le texte en majuscule, l’autre en minuscule, pas la même forme de pillule etc...).

J’ai aussi un énorme problème avec les espacements entre les différents éléments (oui j’ai des problèmes très graves dans ma vie) et je trouve par exemple que les espaces entre l’illustration de la playlist, le nom, et les deux boutons cités précédemment ne sont pas “satisfaisants” (encore une fois c’est un avis entièrement personnel, je n’ai pas la science infuse).

---

Tout ça donc pour dire, j’ai refais un concept pour l’application Deezer. Cette fois j’ai eu du mal à me décider, et donc j’ai préféré vous partager 7 versions différentes. Chacune dispose d’un petit texte vous décrivant les différences à chaque fois. J’ai principalement travaillé les points évoqués plus haut, et essayé de rendre cette page plus vivante aussi en ajoutant un peu de couleur.

Vous trouverez 3 photos différentes, la première décrit un peu plus le problème et présente 3 concepts, la deuxième présente 4 concepts, et la dernière montre une comparaison entre l’application Deezer telle qu’elle est aujourd’hui, et 2 concepts de la liste.

N’hésitez pas à me dire quelle version vous préférez, ou même décrivez-moi comment vous les mixeriez si vous songez à une version qui n’est pas représentée ici 😉.

PS : encore une fois, ceci est un concept fait sur mon temps libre, il n’est pas dit que ces concepts soient parfaitement optimisés

PSS : n’hésitez pas à me dire si vous souhaitez tester une version. Si vous avez un iPhone 11 Pro Max ou un qui partage un format similaire, je peux mettre en commentaire une version isolée du concept que vous pouvez enregistrer pour que vous l’affichiez sur votre téléphone comme si vous utilisiez l’application pour de vrai

 

 

J’ai oublié de préciser, mais vous pouvez cliquer sur les images pour les agrandir


Concept 6 pour moi, c’est détaillé sans être trop chargé. L’accès au modif’ rapidement, c’est appréciable. Perso, j’utilise 2 apps majeures pour la musique, Deezer et Shazam (le switch sur Deez’ 😍), du coup mes playlists sont constamment modifiées. Mais je comprends pas trop le « coup de cœur » à côté du « partage », en collab’ d’accord (encore que) mais si c’est ta propre playlist? Auto-like?… 🤔


Hello, merci beaucoup pour les retours :D

J’avais un peu de temps libre aujourd’hui alors j’ai refais d’autres tests en prenant en compte les remarques.

C’est vrai que le bouton “Coup de cœur” n’est pas véritablement utile sur cet écran, il n’apparait que sur l’écran des playlists publiques pour les ajouter, mais dans ce cas on ne peut pas les éditer…

Du coup voici 4 nouvelles versions qui collent un peu plus

 

 


Bonjour @snach ,

Belles présentations ! Un futur job de designer chez Deezer ? 😉

J’ai regardé un peu, mais je précise malgré tout que j’utilise Deezer quasi uniquement sur mon PC et suis moins concernée. Autrement, j’ai Android, l’interface est presque identique… 

A propos du bouton “Coup de cœur”, il serait logique qu’il apparaisse sur les playlists publiques et soit remplacé au même endroit par “Editer” sur les playlists personnelles, comme sur PC d'ailleurs. Car même en collaboration, on ne peut pas éditer, seul l’auteur de la playlist le peut.

Autre chose, le bouton “Ecouter” actuel est dédié à une écoute en aléatoire, avec les flèches entrelacées. Dans ces concepts, il deviendrait donc un bouton pour une écoute dans l’ordre d’origine, toujours comme sur PC ? Ce serait beaucoup plus intuitif qu’actuellement, mais dans ce cas, il faudrait quand même rajouter quelque part un bouton aléatoire, ou alors l'inclure dans le menu de tri de la playlist, celui des petites flèches à côté de la recherche.

Sinon, si je devais utiliser l’application, la version 10 me semblerait la plus fonctionnelle, avec “Ecouter” en rouge, les autres en blanc sur fond noir. Avoir "Ecouter" centré est bien aussi, mais s'il y a quatre boutons, je trouve mieux qu'il soit à gauche des autres. Quant aux fonds d'écran colorés, je n'en suis pas très fan, mais il faut reconnaître que cela fait un peu mieux ressortir les boutons. Mais si le gris autour de l'album était moins foncé, cela résoudrait le problème… 

Mais place aux avis des utilisateurs plus “mobiles” que moi… ! 😄


Super taff, t’as mon soutien

 


Mon choix se porterait sur la Version 8, elle favorise l’accès rapide pour un gaucher (même si à l’origine, je suis droitier)


Mercii @snach pour ce nouveau projet ! 💡 C’est visuellement très agréable 😊

J’aime bcp la version 11. Je trouve ça top pour la lisibilité d’avoir une “hiérarchie” de couleur et de taille entre le bouton principal (écouter) et les boutons secondaires, qu’on utilise légèrement moins. Petite question que je me pose a propos du positionnement du bouton “écouter” lorsqu’on scroll vers le bas : sur la version actuelle, le bouton “ajout” disparait. Est-ce que tu vois les 4 boutons de la versions 11 être maintenus malgré le scroll, ou tu penses alleger les options une fois au coeur de la playlist ?

Je suis d’accord avec @Nanouk C. concernant l’adaptation du troisième bouton en 💙 ou partage en fonction de la nature de la playlist :)

Concernant le logo du bouton écouter, je suis d’accord qu’il est intéressant de préciser du type de lecture, et je crois que l’utilisation des playlists est principalement en mode aléatoire, donc pourquoi pas conserver le logo shuffle ?


Très bonne idée, j'adore tes concepts @snach .