Wie lässt man ein UI-Element anklickbar aussehen?

Ich habe eine Schaltfläche mit mehreren Optionen erstellt, und wenn ein Benutzer zwischen diesen Optionen umschaltet, ändert sich das Video auf diesem Bildschirm - siehe Bild und animiertes GIF unten.

Geben Sie hier die Bildbeschreibung ein

Taste

In einigen Fällen gibt es mehr als eine Schaltfläche, wenn mehrere Schaltflächen vorhanden sind, schaltet die Kombination der verschiedenen Optionen das Video auf eines um, das mit diesen Optionen korreliert. Wir haben diese Schaltflächen so gestaltet, dass sie einen leichten Farbverlauf haben, damit sie für Benutzer besser anklickbar aussehen. Ich habe auch einen Chevron und die Punkte auf der rechten Seite hinzugefügt, die ihre Farbe ändern, wenn eine bestimmte Option "aktiv" ist, um dieses Element deutlicher erscheinen zu lassen.

Ich denke, dieses UI-Element funktioniert gut auf einer Reihe verschiedener Geräte, Mobilgeräte, Desktops usw. Dieses UI-Element wird jedoch von einigen Benutzern nicht als anklickbar erkannt.

Haben Sie Vorschläge, wie dieses UI-Element für diese Benutzer offensichtlicher aussehen kann?

Eine Sache, die ich sagen würde, ist, dass der Chevron im zweiten Beispiel zu dünn ist und die Platzierung auf der gegenüberliegenden Seite der Punkte im ersten Beispiel viel besser ist.
Der Unterschied in den Beispielen war mein Fehler. Das erste Beispiel ist das richtige.
Ich denke, es hängt stark vom Kontext ab. Nicht nur wie die umgebende Benutzeroberfläche aussieht, obwohl das auch wichtig ist, aber wenn es wie eine Anwendung ist, können wir vielleicht davon ausgehen, dass es sich um eine Schaltfläche handelt, ohne dass Sie sie "anklicken" müssen. Symbolleisten in Indesign, Illustrator und Photoshop sind alle nur voller Symbole nebeneinander und dann gibt es einen kleinen Pfeil in der Ecke, der Ihnen sagt, dass es mehr gibt, woher das kam. Zum einen sind Ihre Beispiele etwas ... seltsam verteilt. Anstatt eine Schaltfläche wie "Paket" zu sein, sieht es fast wie ein Inhaltsbereich aus.
Ich würde versuchen, den Farbverlauf, insbesondere unten, etwas ausgeprägter zu machen
Haben Sie etwas anderes versucht? Den Text loswerden? Den Pfeil loswerden? Ändern Sie die Punkte auf etwas anderes oder ändern Sie ihre Platzierung? Hier ist eine etwas kompaktere Version , die ich als Beispiel erstellt habe. Ich weiß, dass mein Beispiel keinen Pfeil hat, aber braucht es ihn? Mit den Informationen, die ich habe, weiß ich es wirklich nicht. Aber zumindest könnte ich argumentieren, dass die Kreise in diesem Fall anzeigen würden, dass mehr dahinter steckt. Andererseits, wenn Sie den Pfeil haben, brauchen Sie die Punkte. Das hängt davon ab, wie Sie sie radeln, denke ich.

Antworten (3)

Der Chevron befindet sich gerade an einem wirklich seltsamen Ort. Ich würde es in einem Zustand unter dem Symbol und im anderen über dem Symbol platzieren, oder darüber und darunter, wenn es mehr als zwei Zustände gibt.

Erster Zustand : Chevron ist unten, um weitere Optionen nach unten anzuzeigen

Zustand1

Zweiter Zustand : Chevron oben und unten, um weitere Optionen nach oben und unten anzuzeigen

Zustand2

Dritter Zustand : Chevron ist oben, um weitere Optionen nach oben anzuzeigen

Zustand3

Mein Vorschlag ist - Farbe. Grau wird tendenziell als statischer Teil der Benutzeroberfläche wahrgenommen. Versuchen Sie, die Farben zu ändern. Außerdem bin ich mir nicht sicher, ob die Punkte auf der rechten Seite etwas bewirken. Sie würden mich nur verwirren, was sie bedeuten.

Das ist ein wirklich guter Punkt. Danke für Ihre Rückmeldung. In dieser App gibt es einen Sub-Header mit einer kräftigen Farbe über den Schaltflächen und die Farbe dieses Sub-Headers ändert sich auf verschiedenen Bildschirmen, je nachdem, wo Sie sich in der App befinden. Ich habe versucht, diese Knöpfe nicht mit Farbe zu versehen, damit nicht die beiden kräftigen Farben nebeneinander stehen. Können Sie sich eine andere Möglichkeit vorstellen, diese Schaltflächen deutlicher zu machen?
Ich bin mir nicht sicher, ob es geräte-/plattformspezifisch ist, aber ich weiß sofort, was die Punkte bedeuten (durch die Verwendung und Entwicklung unter iOS).
Wenn die Punkte nicht anklickbar sind, würde ich versuchen, es zu überdenken
Die Punkte sind jetzt viel klarer, wenn ich sie in Aktion sehe. Farblich vielleicht ein dunkleres Grau? oder machen Sie den Farbverlauf knöpfiger und weniger symbolisch, wenn das Sinn macht

Warum nicht die Aufwärts- und Abwärtspfeile verwenden?

Wie lässt man ein UI-Element anklickbar aussehen?
AntwortenHierDatenschutz-Bestimmungen1y, 0v