Wie macht man deutlich, dass eine Option nicht verfügbar ist und gelöscht werden kann?

Hier ist die Frage, die ich auf StackOverflow gestellt habe und die irgendwie nicht die erhoffte Antwort erhalten hat. Ich versuche es jetzt hier, da ich nach einer optisch ansprechenden Lösung suche. Idealerweise wäre die Verwendung einer Bibliothek großartig.

Auf meiner Website 33hotels.com verwende ich Schaltflächen, wie sie z. B. von Twitter Bootstrap bereitgestellt werden, um die Annehmlichkeiten von Hotels anzuzeigen.

Was ich brauche, ist deutlich anzuzeigen, dass eine Annehmlichkeit fehlt. Dafür zeige ich die Schaltfläche bereits in Rot mit Text an, der von einer horizontalen Linie gekreuzt wird. Aus dem Feedback von Benutzertests geht jedoch hervor, dass dies nicht ausreicht, um die Nachricht zu übermitteln, dass die Annehmlichkeit nicht vorhanden ist. Also brauche ich etwas klareres.

Ich denke darüber nach, ein großes Kreuz (Buchstabe 'X' oder ein Symbol) auf die Schaltfläche zu setzen, das so groß wie die Schaltfläche sein und die Schaltfläche gut bedecken sollte, ohne hervorzustehen. Das Kreuz sollte dünn sein, um den Text nicht zu verdecken, aber dennoch deutlich sichtbar sein.

Meine Fragen sind:

Wie setzt man ein 'X' auf eine Schaltfläche? Gibt es eine elegante und wiederverwendbare Möglichkeit, dies zu tun? Definieren Sie vielleicht eine Webkomponente (oder Angular-Direktive) "gekreuzt", die an ein HTML-Element angehängt werden kann?

Hier ist die hässliche Version dessen, was ich zu erreichen versuche . Abgesehen davon, dass es hässlich ist, macht es den durchgestrichenen Text jedoch nicht lesbar. Vielleicht sollte ich also eine dünnere Version von 'X' verwenden?

BEARBEITEN. Inspiriert durch den Vorschlag von Mr. E. Upvoter, Farbe in Grau geändert und „X“ hinzugefügt, das beim Schweben deutlicher erscheint. Die Schaltfläche verschwindet, wenn sie auf sich selbst klickt (und nicht nur auf „X“), um die Benutzerfreundlichkeit für Personen zu verbessern, die Schwierigkeiten haben, auf kleine Symbole zu klicken. Vielen Dank für alle Anregungen!

Ich hätte Ihnen empfohlen, diese Frage in ux.stackexchange.com , einer Website über Benutzerfreundlichkeit , zu stellen, da Sie danach fragen. Dort gibt es bereits ähnliche Fragen , wie Sie in einer Schnellsuche sehen können .
@FranciscoPresencia Vielen Dank für hilfreiche Links, aber der grundlegende Unterschied - eine deaktivierte Schaltfläche soll nicht angeklickt werden. In meinem Fall brauche ich es.
@MrE.Upvoter Vielen Dank, ich mag den neuen Titel. :)

Antworten (5)

Ich schlage eine Reihe von Indikatoren vor, die zusammenarbeiten:

  1. 'Ausgegraut' - Geben Sie den nicht verfügbaren Schaltflächen etwas Transparenz (oder den Anschein von Transparenz mit helleren Farben). Dadurch wird sichergestellt, dass es sich merklich von den anderen Schaltflächen unterscheidet und zumindest neugierig macht, warum es anders ist.

  2. 'Durchschlagen!!!!' - "Wie ernsthaft Jungs aussehen, ich habe es durchgestrichen." Das bedeutet normalerweise etwas Negatives.

  3. Beim Antippen oder Bewegen des Mauszeigers (Sie können dafür einfach verwenden :hover, es funktioniert für das Antippen konsistent, soweit ich weiß - Sie können es einfach nicht ohne Problemumgehung für einen Link verwenden) bieten die Option zum Löschen und eine angemessene Erklärung.

Schnelles Modell:

Kein Schweben:

Geben Sie hier die Bildbeschreibung ein

Bewegen/tippen Sie auf die ganze Schaltfläche:

Geben Sie hier die Bildbeschreibung ein

Fragezeichen bewegen/tippen:

Geben Sie hier die Bildbeschreibung ein

Sehen Sie sich ein JSFiddle-Mockup von (div)-Schaltflächen mit Hover-Hilfe und Löschschaltflächen an .

Danke, gute Ideen zum Nachdenken, aber ich habe ein paar Bedenken hinsichtlich der Benutzerfreundlichkeit bei kleinen "X" - es könnte schwieriger zu klicken sein als bei einer größeren Schaltfläche (deshalb besteht meine gesamte Benutzeroberfläche aus Schaltflächen). Aber optisch ist es in der Tat klarer!
Danke, genau so habe ich es jetzt gemacht, wirklich hilfreich! :)

Eine elegantere Lösung wäre, die Schaltfläche auszugrauen, ihren Status auf deaktiviert zu setzen und einen deaktivierten Cursor zu verwenden, um den Status deutlich anzuzeigen. Ich habe einen schnellen Codepen zusammengestellt, um dies zu demonstrieren.

Dies wird nicht klar genug sein. Ein Benutzer hat es bereits damit verwechselt, dass eine Annehmlichkeit vorhanden (statt abwesend) ist, selbst wenn der Name durchgestrichen ist. Also brauche ich etwas eindeutig Klares. Ein großes Kreuz zu setzen ist die beste Idee, die mir im Moment eingefallen ist. Vielen Dank!
Erwägen Sie, die Farbe der Schaltfläche vollständig zu ändern, vorzugsweise in einen roten Farbton, zusammen mit der deaktivierten Funktionalität?
Gibt es einen Grund, das Kreuz zu vermeiden?
Ich würde gegen Rot vorschlagen, da dies die Schaltfläche zum Abbrechen / Löschen ist, aber ich würde die Aktionsschaltfläche in etwas ändern, das wie eine Aktionsschaltfläche aussieht (grün / blau / andere klare Farbe), und die deaktivierten grau.
@FranciscoPresencia Wenn Sie tatsächlich auf die rote Schaltfläche klicken, wird sie gelöscht und die Einstellung abgebrochen. Ist Rot immer noch nicht angemessen?
@FranciscoPresencia Die einzige Aktionsschaltfläche ist „View on Hotels.com“ – sie ist grün. Ich bin mir nicht sicher, ob ich den Kommentar verstehe.

Die Tatsache, dass etwas überhaupt nicht da ist, ist ein guter Hinweis darauf, dass es nicht vorhanden ist!

Wenn Sie dennoch die Dinge anzeigen möchten, die in jedem Ergebniselement „ausgewählt, aber fehlten“, schlage ich vor, dies nicht als dieselben Elemente im selben Abschnitt zu tun, mit dem einzigen Unterschied, dass es sich um das Styling handelt.

Machen Sie dem Benutzer lieber klar, dass dieser Abschnitt zeigt, was ein Hotel hat, und dieser Abschnitt zeigt die Dinge, nach denen Sie gesucht haben, die nicht enthalten waren. Die „ausgewählten, aber fehlenden“ Elemente können möglicherweise eine einfache, durch Kommas getrennte Liste mit durchgestrichenem Text sein, der so dargestellt wird, dass er im Ergebnis enthalten ist, aber nicht so aussieht, als ob es sich um eine Beschreibung des Orts handelt.

Somit ist ein Ergebnis ein visuelles Element und ein Hotel ist ein visuelles Element innerhalb des Ergebnisses, und Daten, die jedes beschreiben, werden als solche getrennt.

Beispiel:

Geben Sie hier die Bildbeschreibung ein

Danke, gute Punkte. Ich verstehe den Grund nicht ganz, Schaltflächen überhaupt nicht anzuzeigen. Diese sollen den Benutzer darauf aufmerksam machen, dass einige angeforderte Annehmlichkeiten fehlen. Warum diese wichtigen Informationen verbergen?
@DmitriZaitsev Die Tatsache, dass wenn etwas nicht da ist, es bedeutet, dass es nicht da ist. Wenn Sie auch anzeigen möchten, welche „ausgewählt, aber fehlen“, tun Sie dies vielleicht an einem anderen Ort, anstatt an derselben Stelle und als dieselbe Steuerung wie die vorhandenen Dinge zu rendern. Wie eine einfache Liste mit durchgestrichenem Text oben im Ergebniselement und nicht als Schaltfläche in der Liste der Dinge, die das Hotel tatsächlich hat. Jetzt haben Sie also kein Problem mehr, ein Element neu gestalten zu müssen, um Verwirrung zu vermeiden, da die Verwirrung vollständig weggelassen wird.
Danke für deine Erklärung, ich muss darüber nachdenken. Übrigens, du erwähnst, dass du selten Farben verwendest – meinst du andere Stiländerungen als Zeichen der Interaktion?
@DmitriZaitsev Ich habe auch ein sehr einfaches konzeptionelles Modell hinzugefügt. Im Allgemeinen versuche ich, die Verwendung von Farbe zu reduzieren, um einen konzeptionellen Unterschied in ähnlichen Elementen anzuzeigen, da einige Menschen farbenblind sind und andere auf den ersten Blick darauf schließen können, dass eine Farbe eher das eine als das andere bedeutet.
Dies ist eine großartige Antwort. Es gibt Elementen eine Hierarchie nach Größe, Form, Position und Farbe. Ich mag es auch, Informationen zu entfernen. Es ignoriert die vorgeschlagene Lösung des OP: "Wie setzt man ein 'X' auf eine Schaltfläche?" Wenn Informationen richtig strukturiert sind, brauchen Sie keinen Button mit mehreren Funktionen.
@allcaps Oft ist die beste Lösung für ein Problem, einfach nicht mehr daran teilzunehmen :)

Ich denke, die Logik ist fehlerhaft. Ich wähle einige Annehmlichkeiten aus und erwarte daher, NUR Hotels zu sehen, die diese Annehmlichkeiten kombinieren. Sie sollten den Benutzer darüber informieren, dass es KEINE Hotels gibt, die über alle Annehmlichkeiten verfügen, und ihm möglicherweise die Ergebnisse mit fehlenden Annehmlichkeiten anzeigen lassen, indem Sie auf eine andere Schaltfläche klicken. Der rote Kreuzknopf funktioniert meiner Meinung nach gut. Wenn es Benutzer gibt, die es nicht verstehen, ist es ihr Problem.

Danke, hier gibt es eine Logik. E-Commerce-Websites geben oft "verwandte Ergebnisse" ohne zusätzliche Klicks zurück, aber eine klare Aussage zu haben, dass es KEINE Übereinstimmungen gibt, ist ein guter Punkt! Ich würde immer noch gerne wissen, wie man diese Kreuze platziert :)
Ich denke in den meisten Fällen: "Wenn es Benutzer gibt, die es nicht verstehen", ist es der Fehler / das Problem des Designers, nicht der Benutzer.
Ich dachte dasselbe wie Sie, Komental, vielleicht gefällt Ihnen das Modell in meiner Antwort, weil es dies anspricht und gleichzeitig klarstellt, was meiner Meinung nach der Hauptpunkt ist: Etwas, das überhaupt nicht vorhanden ist, ist ein guter Hinweis darauf, dass es nicht vorhanden ist.

Ein gut aussehendes Kreuz kann erreicht werden, indem Sie Ihr reguläres 'x' durch eine Multiplikation x ersetzen, die so aussieht:

×

Weitere Informationen: Unicode-Zeichen „MEHRFACHZEICHEN“

Es funktioniert mit den gängigen Webfonts: Arial, Verdana, Georgia etc.

Ja, ich habe darüber nachgedacht, aber das Hauptproblem besteht darin, wie man es in der richtigen Größe herstellt und auf dem Knopf platziert.
Ich habe die so-Frage beantwortet, aber die Schriftart von @ user2358127 für das "x" ist ideal. Idealerweise übergeben Sie eine Klasse an die <code>button</code>s, die keine Annehmlichkeiten haben und dynamische Inhalte über Pseudo-Elemente auslösen; wie hier zu sehen: jsbin.com/hijaw/1/edit
@albert Diese Lösung macht kein X aus der Größe der Schaltfläche und verfügt über fest codierte Einstellungen, die nicht funktionieren, wenn sich die Größe der Schaltfläche ändert, sodass ich sie leider nicht verwenden kann.
Wie macht man deutlich, dass eine Option nicht verfügbar ist und gelöscht werden kann?
AntwortenHierDatenschutz-Bestimmungen1y, 0v