web-dev-qa-db-de.com

Wie gebe ich an, dass eine Teilmenge von Symbolen nicht anklickbar ist?

Ich habe eine Reihe von Symbolen mit Beschriftungen. Die ersten drei sind anklickbar und tatsächlich Navigationselemente für den Inhaltsbereich. Das letzte Symbol kann nicht angeklickt werden. Wie kann ich den Mangel an Klick-Erschwinglichkeit deutlich machen? Ich habe überlegt, Hover-Effekte zu verwenden, aber die Website wird hauptsächlich auf Mobilgeräten verwendet. Daher müssen die Vorteile von Anfang an klar sein.

Ich habe versucht, Leerzeichen und ein umrissenes Symbol anstelle eines durchgezogenen Symbols zu verwenden, um das letzte Symbol zu unterscheiden, bin mir jedoch nicht sicher, ob es klar genug ist.

screenshot

7
rach oune

Bitte ignorieren Sie den folgenden Rant

Herzliche Glückwünsche. Sie wurden im Internet missbraucht . Sie sind das Opfer all dieser anderen Websites/Apps, die keine konsistente einfache absolute Unterscheidung zwischen anklickbaren und nicht anklickbaren Elementen anwenden. Schließlich ist dies wahrscheinlich nur das Wichtigste, was Sie für die Kommunikation mit Ihrem Grafikdesign benötigen. So erhalten Benutzer TAMIDS-Benutzeroberflächen (tippen Sie auf eine beliebige Stelle; möglicherweise wird etwas getan).

Lösen Sie Ihr Problem

Okay, genug Schimpfen. Lösen wir Ihr Problem.

Grau wird nicht funktionieren

Das Vergrauen der Nicht-Link-Symbole funktioniert wahrscheinlich nicht. Grau bedeutet für viele Benutzer ein deaktiviertes Steuerelement - eines, das vorübergehend nicht verfügbar ist, normalerweise bis der Benutzer eine Aktion ausführt. Diese Benutzer sind möglicherweise frustriert, dass sie nicht herausfinden können, welche Aktion sie zum Aktivieren der Symbole ausführen müssen. Andere Benutzer denken möglicherweise, dass ein graues Steuerelement nicht nur deaktiviert, sondern auch ungültig ist - dass die auf dem Etikett angezeigten Daten nicht vertrauenswürdig sind. Mehr Benutzer werden die grauen Symbole nicht vollständig sehen, gerade weil Sie sie so unauffällig gemacht haben und weil ihre Erfahrung mit anderen Apps ihre Augen darauf trainiert hat, alles Graue zu überspringen. Die übrigen Benutzer sind der Meinung, dass Grau eine aktive Steuerung bedeutet, da vor relativ kurzer Zeit Dunkelgrau eine modische Farbe war, insbesondere auf Mobilgeräten.

Relative Salience funktioniert nicht

Der Versuch, die Verknüpfungssymbole in einer beliebigen grafischen Dimension einfach auffälliger zu machen als die nicht verknüpften Symbole, funktioniert wahrscheinlich auch nicht. Einfache grafische Auffälligkeit bedeutet normalerweise eine andere inhaltliche Bedeutung, und wer sagt, dass ein Link wichtiger ist? Der Benutzer kann nicht vorhersehen, welche bestimmte grafische Dimension das Verknüpfen von dem Nichtverknüpfen unterscheidet, sodass er nicht weiß, was Sie sagen möchten. Sie können falsch verstehen, dass der Inhalt der Textbeschriftungen der Nicht-Link-Symbole weniger wichtig ist als der Inhalt der Beschriftungen der Link-Symbole. Ja, wenn Sie die Nicht-Links unauffällig genug machen, hören Benutzer auf, darauf zu klicken, aber nur, weil sie sie nicht einmal bemerken und Sie das nicht wollen.

Gruppierung funktioniert nicht

Gruppierung bedeutet normalerweise, dass der Inhalt eine ähnliche semantische Bedeutung hat, kein Verhalten. Wir binden ständig Links in nicht verlinkenden Text ein (wie in diesem Beitrag).

Lösung 1: Zurück zu den Grundlagen

Benutzer beziehen zwei Dinge am konsequentesten auf Links: Farbe, insbesondere Blautöne und Unterstreichung . Machen Sie alle Ihre Symbole monochrom und machen Sie die Verknüpfungssymbole farbig. Verwenden Sie für alle Verknüpfungssymbole und alle anderen Verknüpfungen in Ihrer App dieselbe Farbe. Ihr Lila im ersten Symbol könnte funktioniert - es ist fast blau, und einige Benutzer erinnern sich möglicherweise daran, dass Lila auch einen Link bedeutete (einen besuchten). Ansonsten gehen Sie mit einem Blauton. Machen Sie Ihre nicht verknüpften Symbole schwarz. Nicht grau, sondern schwarz wie inaktiver Text.

Unterstreichen Sie Ihre Verknüpfungssymbole mit derselben Farbe wie die Symbole. Es mag ungewöhnlich sein, aber es wird wahrscheinlich funktionieren. Wenn Sie sich nicht daran halten können, ein Symbol zu unterstreichen, setzen Sie einen farbigen quadratischen Umriss mit der von Ihnen gewählten Verknüpfungsfarbe um die Verknüpfungssymbole. Früher gab es eine Konvention, um alle verknüpften Bilder mit Blau zu skizzieren, und vielleicht werden sich einige Benutzer daran erinnern, während andere das Unterstreichen verallgemeinern. Vielleicht möchten Sie den Rat von Charles Wesley überdenken, um das Symbol und seine Textbezeichnung mit einem knopfartigen Rand zu versehen (obwohl ich im Allgemeinen gegen das Verwechseln von Befehlsschaltflächen mit Links ).

Stellen Sie auch die Symbolbeschriftungslinks her. Färben Sie sie und unterstreichen Sie sie. Zumindest sie kann als Links und Nicht-Links unterschieden werden.

Lösung 2: Auf Symbole verzichten

In Ihrem speziellen Fall sollten Sie möglicherweise Ihre Symbole löschen und die Textbeschriftungen nur als Links verwenden. Verwenden Sie dabei die üblichen Mittel, um das Verknüpfen von nicht verlinkendem Text zu unterscheiden. Einige Ihrer Symbole sagen nichts, was die Etiketten noch nicht sagen - sie sind eine Verschwendung von wertvollem Speicherplatz in einer mobilen App. Mit dem Platz, den Sie beim Entfernen der Symbole sparen, können Sie Beschriftungen Text hinzufügen, um klarer zu machen, was sie bedeuten (ich weiß es nicht wirklich - ich kann es nicht an den mysteriösen Symbolen erkennen). Die Lösung zur Unterscheidung zwischen verknüpften und nicht verknüpften Symbolen besteht möglicherweise darin, keine Symbole zu verwenden.

8

Wir haben uns hier und da mit dem gleichen Problem befasst, und als wir uns Ihr Problem angesehen haben, sah selbst der Umriss immer noch anklickbar aus, schien aber nur ein anderer Stil zu sein. Alle Beschriftungen für jede Option scheinen ebenfalls dieselbe Farbe zu haben. Eines der Dinge, an die ich dachte, war, um mehr Differenzierung oder Kontrast zu den anderen zu schaffen, das letzte noch weiter zu verkleinern - ein behindertes Gefühl - und vielleicht die lila Farbe, die Sie auf dem Posts-Symbol verwendet haben, auf die anderen beiden zu übertragen aktive Links (30 Follower & 5 Follower). Habe einen schnellen und schmutzigen Spott von dir gemacht, um den Punkt zu vermitteln:

enter image description here

Hoffe das hilft ein bisschen.

2
Charles

Sie sollten die Abweichungen im Design Ihrer Symbole begrenzen, um das beabsichtigte Verhalten widerzuspiegeln. Zum Beispiel haben Sie bereits Farben gegenüber Grau auf den Symbolen verwendet, um etwas anzuzeigen, und dann den Größenunterschied verwendet, um ein anderes anzuzeigen, und dann das Leerzeichen und das umrissene Symbol verwendet, um ein Verhalten zu unterscheiden. Ich würde sagen, dass Benutzer den Unterschied nicht sofort verstehen werden, wie auch immer Sie ihn präsentieren, da es bereits viele Variationen gibt. Das einzige, was meiner Meinung nach nicht angeklickt werden kann, sind die Buchstaben und Zahlen, die als Beschriftungen/Beschreibungen für die Symbole dienen. Ich schlage vor, die Abweichungen bei den Designs der Symbole zu verringern, auch wenn dies nicht offensichtlich ist, werden die Benutzer sie schneller erkennen.

1
Michael Lai