it-swarm-eu.dev

Gibt es eine "nette" Möglichkeit, Navigationssymbole anzuzeigen, damit die Benutzeroberfläche nicht überladen wird?

Ich habe eine kleine Desktop-Anwendung, die Musikordner scannt und zufällig ein Album zum Abspielen auswählt. Die erste Version ist WinForms und verfügt über die Schaltflächen "Zurück" und "Weiter" auf beiden Seiten des Albumcovers, die aktiviert werden, wenn mehr Alben desselben Interpreten vorhanden sind.

enter image description here

Ich bin mit dieser Benutzeroberfläche nicht zufrieden, da die Schaltflächen zu viel Platz beanspruchen.

Ich schreibe die Anwendung mit WPF neu und suche nach einer besseren Möglichkeit, um anzuzeigen, dass es andere Alben desselben Künstlers gibt. Ich habe experimentiert, die Schaltflächen oben auf dem Cover anzuzeigen und sie nur anzuzeigen, wenn die Maus über ihre Position rollt, aber ich bin mit dem Ergebnis nicht zufrieden, vor allem, weil es keinen Hinweis darauf gibt, dass die Optionen vorhanden sind.

Ich habe auf der Website Brian Stevens Photography einen tollen Trick gefunden, bei dem sich der Cursor über jeder Bildhälfte auf "+" und "-" ändert, um die Navigation anzuzeigen, aber ich benutze auch einen Klick auf das Bild, um es abzuspielen dieses Album, also müsste ich diesen Ansatz anpassen, wenn ich es selbst verwenden wollte.

Gibt es einen besseren Weg oder ist ein Karussell oder eine Coverflow-Steuerung der richtige Weg?

Für ein bisschen mehr Hintergrundinformationen lesen Sie diese Blog-Post von mir.

10
ChrisF

Grundsätzlich 2 Ideen hier, die erste zeigt kleine Kreise, die in der Mitte hervorgehobene ist die aktuelle Seite/das aktuelle Album, das angezeigt wird. Wenn Sie auf die Pfeile klicken, wird die nächste/vorherige hervorgehoben. Dies gibt den Benutzern eine Vorstellung davon, wie viele Alben für den jeweiligen Künstler verfügbar sind.

(Neugestaltung von Matt Lutze ausgezeichnet ASCII Zeichnung)

[Settings]  [Random album]  [Info]

 {                              }
 {                              }
 {            Cover             } 
 {                              }
 {                              }

 <<       o o o * o o o        >>

Das nächste könnte gezeigt werden, wenn es mehr als 6 Alben für einen Künstler gibt, die nur Album 1 der gesamten Alben zeigen.

[Settings]  [Random album]  [Info]

 {                              }
 {                              }
 {            Cover             } 
 {                              }
 {                              }

 <<          1 of 10           >>

Auf diese Weise sind die Elemente immer noch vorhanden und zeigen eine visuelle (oder wörtliche) Warteschlange, in der mehr angezeigt/angehört werden kann.

Random Idea: Natürlich gefällt mir die Idee, auf das Cover zu klicken und hineinschauen zu können, sehr gut. In diesem Fall würde einfach eine Liste der in diesem Album verfügbaren Songs angezeigt. Dies wäre ihnen die Möglichkeit, ein bestimmtes Lied zu spielen.

[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          >>
9
Drofnas

Die Navigationsschaltflächen sehen aufgrund von visueller Dissonanz schlecht aus

  • Sie sind rund und das Bild ist quadratisch.
  • Sie sind stark leuchtend 3D und das Bild ist flach

und

  • Der Platz, den sie oben und unten verschwenden, ist flach, unbenutzt und verwendet keine ähnliche Dekoration wie die Tasten, sodass er auch nicht mit den Tasten harmoniert.

Schmale rechteckige flache Schaltflächen die volle Höhe des Albumcover, wenn gestapelte ">" (oder "<") in der Mitte verwendet werden, würden diese drei Probleme gelöst, aber das Cover wäre immer noch Trennen Sie Ihre Navigationssteuerelemente. Es wird besser funktionieren, wenn die Navigationssteuerung in einem visuellen Block enthalten ist.


Hier ist eine altmodische Lösung (links) und eine modernere (rechts).

Das Styling der Schaltflächen (Abschrägung/Rundung/Schlagschatten/Was-hast-du) sollte mit dem Styling übereinstimmen für den Cover-Art-Rahmen.

enter image description here

Die linke hat den Vorteil, dass Sie die Größe der linken/rechten Tasten leicht erhöhen können, je nachdem, wie viel Immobilien Sie ihnen geben möchten und wie leicht Sie möchten, dass sie getroffen werden.

Das rechte hat ein Fischaugen-Minikarussell darunter. Wenn Sie nicht aktiviert sind, müssen Sie die Miniaturbilder mit einem alten Foto versehen, um nicht vom Cover abzulenken, und Sie haben keine andere Wahl als die Größe.

Die linke ist einfach und effektiv, die rechte hat mehr Augenweide Lob. Ich bevorzuge die linke. Sie können wahrscheinlich erraten, aus welcher Zeit mein Musikgeschmack stammt.

5
James Crook

Als weiteren Vorschlag verwendet Apples CoverFlow eine horizontale Bildlaufleiste unter dem Cover, damit der Benutzer durch die Cover scrubben kann.

Vorteile:

  • Kann schnell durch Kunst schrubben. Möglicherweise keine Voraussetzung für Ihre App.
  • Skalen okisch mit einer großen Anzahl von Kunst.
  • Ermöglicht eine gute zufällige Suche durch Hin- und Herschrubben.

Nachteile:

  • Nicht offensichtlich, wie viele Gegenstände es gibt.
3
ICR

Nur weil ein UI-Element nicht sofort offensichtlich ist, bedeutet dies nicht, dass es eine schlechte Wahl ist. Ich würde definitiv mit etwas anfangen, bei dem das Klicken auf die rechte Seite des Covers einen Schritt weitergeht und das Klicken auf die linke Seite zurückgeht. (Angenommen, dies wird nur mit Sprachen von links nach rechts verwendet?)

Anstelle der + und - Zeichen der Foto-Website würde ich nur <und> vorschlagen. Und ich würde sie nicht transformieren oder dem Cursor folgen lassen, ich würde sie einfach in der Mitte rechts und in der Mitte links platzieren.

Sie können mit einem Klick in die Mitte experimentieren, um das Album abzuspielen/anzuhalten.

Diese Art von nahezu unsichtbarer Benutzeroberfläche ist genauso einfach zu verwenden, sobald Sie sie gefunden haben, und sie sieht viel schöner aus, als wenn separate Schaltflächen (wie üblich) wie Schaltflächen herumhängen. Das ästhetische Extrem wäre, alle UI-Elemente in unsichtbare Elemente in der Cover-Vorschau einzubeziehen. Damit Sie nur das Cover (und möglicherweise den Songtitel) sehen, wenn die Maus nicht darüber schwebt. Vielleicht würde dies für Ihre App funktionieren und vielleicht auch nicht.

3
Scott Newson

Interessante Frage und einige gute Punkte mit beiden vorhandenen Antworten.

In Bezug auf allgegenwärtige und versteckte Steuerelemente: Ich würde empfehlen, sich zu Steuerelementen zu neigen, die immer sichtbar sind, aber nicht visuell ablenken. Grün, blau, gemustert; Alle haben das Potenzial, zumindest ein wenig abzulenken. Ich stimme Nir im Allgemeinen darin zu, einfache Pfeile oder "größer als" -Symbole zu verwenden

<< {Image} >>

symbole/Schaltflächen.

Ich würde den Vorschlag auch auf Ihre Top-Symbole ausweiten und vielleicht vorschlagen, das Konzept die Grenze zwischen Desktop-App und Web-App visuell überbrücken zu lassen:

[Settings]  [Random album]  [Info]
              Title
   {                          }
   {                          }
<< {          Cover           } >>
   {                          }
   {                          }

Ich würde im Allgemeinen dazu neigen, das Cover zum dominierenden Objekt in der Benutzeroberfläche zu machen. Dünne Reihe von Text-Link-Schaltflächen oben, der Titel, dann ein großes Bild des Covers mit schmalen Balken vorwärts und rückwärts auf beiden Seiten. Oder etwas ähnliches.

Wie auch immer Sie es schwingen, ich schlage zumindest vor, keine neuartigen dynamischen Indikatoren wie ein sich änderndes Mauszeigersymbol zu verwenden. Viele Menschen werden ängstlich oder nervös, wenn sich ihr Zeiger ändert. Nach meiner Erfahrung erwartet der Benutzer, dass sein Zeiger nach vorhersehbaren Aktionen vorhersehbare Dinge tut und sie nicht überrascht.

Ordentliches Projekt und danke für die Diskussion. Ich bin gespannt, was andere denken.

2
Matt

Als jemand, der Support-E-Mails beantwortet, kann ich Ihnen sagen, dass ein guter Prozentsatz Ihrer Benutzerbasis es niemals finden wird, wenn ein Element der Benutzeroberfläche nicht sofort offensichtlich ist.

Sie werden auch niemals die Dokumente oder Popup-Nachrichten lesen.

Eine Funktion sollte entweder offensichtlich sein (und oft ist sogar eine Schaltfläche nicht offensichtlich genug) oder einfach funktionieren, ohne den Benutzer zu stören (die Rechtschreibprüfung mit rotem Kringel ist ein gutes Beispiel, Sie müssen sie nicht finden - sie ist einfach da ).

Sie können die Schaltflächen so umgestalten, dass sie nicht so groß sind und sich mehr in den Hintergrund einfügen. Wenn Sie beispielsweise die Schaltflächen durch zwei kleine Pfeile ersetzen, die nicht über diesen schweren Schaltflächenrahmen verfügen, werden sie nicht hervorgehoben Vieles, während dem Benutzer noch signalisiert wird, ist etwas mehr verfügbar.

2
Nir

Weitere Informationen finden Sie im Web. Hier leben die meisten Benutzer und es leitet ihre UI-Erwartungen. Sehen Sie sich beliebte Websites für Ihre Zielgruppe an und sehen Sie, wie diese die Navigation verwalten. Das Navigieren in Musik ähnelt dem Navigieren in Fotos. Weitere Informationen finden Sie auf den Websites von Zeitungen und Zeitschriften.

Die Navigation dieser Art erfolgt meist über kleine Schaltflächen über der Grafik oder über transparente Schaltflächen, die beim Mouseover angezeigt werden. Wenn Ihre Benutzeroberfläche so gestaltet ist, dass der Benutzer auf ein Albumcover klickt, um es anzuhören, erkennt er die transparenten Schaltflächen schnell genug.

1
David Veeneman