Existe-t-il une "belle" façon d'afficher les icônes de navigation afin qu'elles n'encombrent pas l'interface utilisateur?
J'ai une petite application de bureau qui scanne les dossiers de musique et choisit au hasard un album à lire. La première version est WinForms et possède des boutons "précédent" et "suivant" de chaque côté de la pochette d'album qui sont activés lorsqu'il y a plus d'albums du même artiste.
Je ne suis pas satisfait de cette interface utilisateur car les boutons prennent trop de place.
Je réécris l'application en utilisant WPF et je cherche une meilleure façon d'indiquer qu'il y a d'autres albums du même artiste. J'ai essayé d'afficher les boutons au-dessus de la pochette et de ne les afficher que lorsque la souris survole leur position, mais je ne suis pas satisfait du résultat principalement parce qu'il n'y a aucune indication que les options sont là.
J'ai trouvé une astuce intéressante sur Brian Stevens Photography site où le curseur se transforme en "+" et "-" sur chaque moitié de l'image pour indiquer la navigation, mais j'utilise également un clic sur l'image pour jouer cet album donc je devrais adapter cette approche si je voulais l'utiliser moi-même.
Y a-t-il une meilleure façon ou un carrousel ou un contrôle de flux est-il la solution?
Pour un peu plus d'informations, lisez ceci article de blog à moi.
Fondamentalement, 2 idées ici, la première montre de petits cercles, celle mise en évidence au centre est la page/l'album en cours, lorsque vous cliquez sur les flèches, elle met en surbrillance la suivante/précédente. Cela donne aux utilisateurs une idée du nombre d'albums disponibles pour l'artiste donné.
(réutilisation de l'excellent Matt Lutze ASCII)
[Settings] [Random album] [Info]
{ }
{ }
{ Cover }
{ }
{ }
<< o o o * o o o >>
Ce prochain pourrait être montré quand il y a plus que disons 6 albums pour un artiste, qui montre juste l'album 1 du total des albums.
[Settings] [Random album] [Info]
{ }
{ }
{ Cover }
{ }
{ }
<< 1 of 10 >>
De cette façon, les éléments sont toujours présents et montrent une file d'attente visuelle (ou littérale) qu'il n'y a plus qu'à voir/écouter.
Random Idea: Bien sûr, j'aime vraiment l'idée de cliquer sur la pochette et de pouvoir regarder à l'intérieur, qui dans ce cas afficherait simplement une liste des chansons disponibles dans cet album. Ce serait eux la possibilité de jouer une chanson spécifique.
[Settings] [Random album] [Info]
{ 1. Song Names here ^ }
{ 2. Song Names here }
{ 3. Song Names here }
{ 4. Song Names here }
{ 5. Song Names here v }
<< 1 of 10 >>
Les boutons de navigation sont mauvais à cause de dissonance visuelle
- Ils sont ronds et l'image est carrée.
- Ils sont fortement lumineux en 3D et l'image est plate
et
- L'espace qu'ils gaspillent au-dessus et en dessous est gris plat inutilisé, n'utilisant pas de décoration similaire aux boutons, il ne s'harmonise donc pas non plus avec les boutons.
Plat rectangulaire étroit boutons sur toute la hauteur de la pochette d'album, l'utilisation de ">" (ou "<") empilés au milieu résoudrait ces trois problèmes, mais la pochette serait toujours séparant vos commandes de navigation. Cela fonctionnera mieux en ayant les commandes de navigation dans un seul bloc visuel.
Voici une ancienne solution (à gauche) et une plus moderne (à droite).
Le style des boutons (biseau/arrondi/ombre portée/ce que vous avez) doit correspondre au style pour le cadre de la pochette.
Celui de gauche a l'avantage que vous pouvez facilement augmenter la taille des boutons gauche/droite en fonction de la quantité de biens immobiliers que vous souhaitez leur donner et de la facilité avec laquelle vous souhaitez qu'ils soient touchés.
Le droit a un mini-carrousel fish-eye en dessous. Vous auriez besoin d'ancienne photo des images miniatures lorsqu'elles ne sont pas activées afin de ne pas distraire de la couverture, et vous avez peu de choix sur les tailles.
La gauche est simple et efficace, la droite a plus de félicitations pour les yeux. Je préfère la gauche. Vous pouvez probablement deviner de quelle époque vient mon goût pour la musique.
Comme autre suggestion, CoverFlow d'Apple utilise une barre de défilement horizontale sous l'illustration de couverture pour permettre à l'utilisateur de parcourir les couvertures.
Avantages:
- Peut rapidement parcourir l'art. Peut ne pas être une exigence pour votre application.
- Échelles correctes avec un grand nombre d'art.
- Permet une bonne recherche aléatoire en frottant d'avant en arrière.
Désavantages:
- Pas évident combien il y a d'articles.
Tout simplement parce qu'un élément d'interface utilisateur n'est pas immédiatement évident, cela ne signifie pas que c'est un mauvais choix. J'irais certainement avec quelque chose où cliquer sur le côté droit de la couverture avance d'un pas, et cliquer sur le côté gauche revient en arrière. (En supposant que cela ne sera utilisé qu'avec les langues de gauche à droite?)
Au lieu des signes + et - du site Web de photos, je suggère simplement <et>. Et je ne les ferais pas transformer ou suivre le curseur, je les placerais juste au milieu à droite et au milieu à gauche.
Vous pouvez essayer de cliquer au milieu pour lire/mettre en pause l'album.
Ce type d'interface utilisateur presque invisible est tout aussi facile à utiliser une fois que vous l'avez trouvé, et il est beaucoup plus agréable que d'avoir des boutons séparés qui ressemblent (comme d'habitude) à des boutons. L'extrême esthétique de cela serait d'incorporer tous les éléments de l'interface utilisateur dans des éléments invisibles dans l'aperçu de la couverture. Pour que vous ne voyiez que la pochette (et peut-être le titre de la chanson) lorsque la souris ne la survole pas. Peut-être que cela fonctionnerait pour votre application, et peut-être pas.
Question intéressante et quelques bons points avec les deux réponses existantes.
Concernant les contrôles omniprésents par rapport aux contrôles cachés: je recommanderais de privilégier des contrôles qui sont toujours visibles, mais qui ne distraient pas visuellement. Vert, bleu, à motifs; tous ont le potentiel d'être au moins un peu distrayants. Je suis généralement d'accord avec Nir ici sur l'utilisation de flèches simples ou de symboles "supérieurs à"
<< {Image} >>
vs icônes/boutons.
Je voudrais également étendre la suggestion vers vos icônes principales, et peut-être suggérer de laisser le concept combler visuellement la frontière entre l'application de bureau et l'application Web:
[Settings] [Random album] [Info]
Title
{ }
{ }
<< { Cover } >>
{ }
{ }
J'aurais généralement tendance à faire de la pochette l'objet dominant de l'interface. Une fine ligne de boutons de lien texte en haut, le titre, puis une grande image de la couverture, avec des barres arrière étroites de chaque côté. Ou quelque chose comme ça.
Quelle que soit la façon dont vous le faites, je suggère au moins de ne pas utiliser de nouveaux indicateurs dynamiques comme une icône de pointeur de souris changeante. Beaucoup de gens auront peur ou seront nerveux lorsque leur pointeur changera; d'après mon expérience, l'utilisateur s'attend à ce que son pointeur fasse des choses prévisibles après des actions prévisibles et ne les surprenne pas.
Projet soigné et merci pour la discussion. Je suis curieux d'entendre ce que les autres pensent.
En tant que personne qui répond aux e-mails de support, je peux vous dire que si un élément d'interface utilisateur n'est pas immédiatement évident, un bon pourcentage de votre base d'utilisateurs ne le trouvera jamais.
Ils ne liront également jamais les documents ni aucun message contextuel.
Une fonctionnalité doit être évidente (et souvent même avoir un bouton n'est pas assez évident) ou simplement fonctionner sans déranger l'utilisateur (le correcteur orthographique de soulignement rouge est un bon exemple, vous n'avez pas besoin de le trouver - il est juste là ).
Vous pouvez remodeler les boutons pour qu'ils ne soient pas si gros et qu'ils se fondent davantage dans l'arrière-plan, par exemple si vous remplacez les boutons par deux petites flèches qui n'ont pas ce cadre de bouton lourd, ils ne ressortiraient pas que beaucoup tout en signalant à l'utilisateur qu'il y a quelque chose de plus disponible.
Consultez le Web pour obtenir des conseils. C'est là que vivent la plupart des utilisateurs et guide leurs attentes en matière d'interface utilisateur. Consultez les sites populaires de votre groupe démographique cible et voyez comment ils gèrent la navigation. Naviguer dans la musique est similaire à naviguer dans les photos, alors consultez les sites des journaux et des magazines pour obtenir des conseils.
La navigation de ce type s'effectue le plus souvent par de petits boutons au-dessus du graphique ou par des boutons transparents qui apparaissent au survol de la souris. Si votre interface utilisateur est conçue pour que l'utilisateur clique sur une pochette d'album pour l'écouter, il découvrira les boutons transparents assez rapidement.