it-swarm.com.de

Machen Sie das Kalendersymbol offensichtlich anklickbar

Auf einer Webseite gibt es einen Kalender, der nur den aktuellen Tag des Monats anzeigt. Wenn Sie auf diesen Kalender klicken, wird der Kalender eines aktuellen Monats angezeigt. Wie kann ich deutlich machen, dass der Kalender anklickbar ist?

So sieht der Tageskalender aus:

enter image description here

16
dmr

Einige der Standard-Cues:

  • Schwebezustand: Das Kalendersymbol wird transformiert, wenn der Benutzer den Mauszeiger darüber hält. Möglicherweise zeigt der Kalender ein Raster an, das einen Monat beim Schweben darstellt.
  • Kontexttext: Schreiben Monat oder ähnliches als Link neben dem Kalender anzeigen.
  • Mimic-Schaltfläche: Fügen Sie dem Symbol Rahmen hinzu, damit es als Schaltfläche angezeigt wird.
20
AndroidHustle

Sie zeigen nicht den gesamten Kontext an, sodass wir nicht sehen können, wie das angezeigte Symbol in den Kontext der Seite passt.

Es ist jedoch hilfreich, wenn Sie das 'Ding' zu einem in sich geschlossenen umsetzbaren Element machen - meistens in Form einer Schaltfläche (welcher Stil auch immer zu Ihrem Thema passt) und auch einen Aufruf zum Handeln hinzufügen (z. B. ) Kalender anzeigen ) oder eine Beschriftung ( Kalender ).

enter image description here

Weitere Informationen zum Thema Erschwinglichkeit finden Sie unter Michaels Diskussion zum Begriff hier auf ux.se, wo, wie er richtig angibt, was wir als anklickbares Element wie a wahrnehmen button basiert auf unseren bisherigen Erfahrungen mit Buttons. Positionshinweise wie zentriertes Symbol, zentrierter Text, abgerundete Ecken, Verläufe usw. tragen dazu bei, in einer Situation Erschwinglichkeit zu bieten, da wir daran gewöhnt sind , sie zu erwarten - wir Bauen Sie eine Erwartung auf, wie ein Knopf in unseren Köpfen aussieht, und erstellen und suchen Sie nach Mustern, die die Erkennung als solche auslösen.

JonW schlug vor, einen Farbtupfer hinzuzufügen, was eine gute Idee ist:

enter image description here

11
Roger Attrill

Eine weitere zu berücksichtigende Option ist das Anpassen einiger visueller Elemente, um die "Ich bin anklickbar" -Natur der Grafik zu verstärken. Ich würde vorschlagen, dass das Etikett "Heute" dieselbe Farbe wie die primäre Linkfarbe hat, die Sie auf der Site verwenden (oder diese Farbe möglicherweise im Hintergrundverlauf verwenden). Der aktuelle Weiß-Grau-Farbverlauf weist so wie er ist Kontrast- und Lesbarkeitsprobleme auf, sodass Sie dort möglicherweise zwei Vögel töten können.

Eine häufig verwendete und effektive Ergänzung, die wir zuvor verwendet haben, ist das Hinzufügen eines Dreiecks unten rechts auf der Kalendertagsseite, das angibt, dass der Kalender geändert werden kann (entweder als "flippbar" oder als Möglichkeit, ein Popup-Menü zu erhalten) ).

6
Michael

Damit der Benutzer etwas als Auslöser für eine Aktion wahrnimmt (und daher anklickbar ist), muss es mit einem Verb gekennzeichnet werden.
Anstelle von Kalender können Sie Kalender anzeigen versuchen oder das Bild weiterleiten und es wie Öffnen beschriften.

Außerdem, und dies ist meine Meinung, ist das Symbol (wie für diese Frage angezeigt) zu realistisch. Das lenkt ab. Die Benutzer können die diesem bestimmten Element zugewiesene kognitive Belastung erschöpfen, bevor sie erkennen, dass es sich um eine Schaltfläche handelt.
IMO wäre es für den gehetzten Benutzer einfacher, wenn es nicht die metallischen Ringe und die schwarze Basis hätte. Nur die Kalenderseite, vielleicht mit dem heutigen Datum.

Ab dem Hover-Effekt ist es auch sehr hilfreich sicherzustellen, dass der Zeiger vom Standardpfeil zur üblichen Hand wechselt.
Wenn Sie es nur mit offen beschriftet haben, sollte das Wort auch auf Schweben reagieren.
Fügen Sie dem Benutzer, der Angst hat, einen Tooltip hinzu, der angibt, was passieren würde, wenn er einfach auf die Schaltfläche klickt.

4
Juan Lanus

Der Schwebezustand funktioniert nur, wenn Sie diese App/Website nur für den Desktop verwenden. Am besten ändern Sie die Farbe des Kalenders oder unterstreichen die Nummer. Wenn Sie den Text unterstreichen, denken Benutzer, dass sie mit ihm interagieren können.

2
Igor-G

Die Erschwinglichkeit der Klickbarkeit wird Desktop-Benutzern normalerweise durch eine Statusänderung angezeigt, wenn der Mauszeiger über etwas bewegt wird.

Wenn Sie einen guten Künstler haben, können Sie das Kalenderbild animieren, wenn Sie den Mauszeiger darüber halten (lassen Sie die Seiten umblättern).

Wenn sich das Bild selbst beim Hover nicht ändert, sollten Sie den Cursor anstelle des Standardpfeils auf einen Zeiger ändern.

In CSS:
.calendar-button {
    cursor: pointer;
}

Für mobile Benutzer kann eine zusätzliche Betonung erforderlich sein, da kein Cursor geändert werden muss. Stattdessen haben Schaltflächen häufig einen einheitlichen Stil, z. B. eine gemeinsame Form oder Hintergrundfarbe, um den Benutzern anzuzeigen, welche Elemente auf einer Webseite abgetippt werden können.

Wenn Ihre Website komplex genug ist (Webapp wirklich), sollten Sie ein kurzes modales * Tutorial für neue Benutzer in Betracht ziehen, um verschiedene Funktionen hervorzuheben, die sie möglicherweise übersehen haben. Dies kann auch verwendet werden, wenn neue Funktionen hinzugefügt werden, um Benutzer auf die Änderung aufmerksam zu machen.

* Ich meine keinen Leuchtkasten, er muss den Rest der Seite nicht ausblenden, es könnte sich um einen einfachen Pfeil mit Text als schnellem Hinweis handeln

1
zzzzBov