"Visited"-styling für Links im Text und Navigation

Martinus33 · 15. Oktober 2014

Hallo,
ich möchte bereits besuchte Seiten bzw. die Links zu diesen Seiten mit violett in meiner Wordpress-Site hervorheben. Das ist Standard und macht es für den Besucher etwas einfacher.

Spricht grundsätzlich etwas dagegen, das nicht nur für Textlinks, sondern auch für Navigationslinks so festzulegen? Ich sehe das nur selten in Navis.
Wenn der Besucher also auf der Seite A ist und bereits auf Seite B war, dann würde der Link zu Seite B sowohl im Text als auch in der Nav. violett sein.

Würde das ohne großen Aufwand überhaupt so funktionieren oder wäre dann immer nur dort der Link violett, wo er vorher geklickt wurde, sprich entweder in der Nav oder im Text?

Muss man das "visited" überhaupt als Webmaster implementieren, machen das nicht alle Browser automatisch?

Kausalat · 15. Oktober 2014

Einmal besuchte Seiten würden, sofern du es im CSS nicht anders festlegst, sowohl in der Navigation als auch im Text anders gefärbt, egal über welchen Bereich der Website die Seite letztlich aufgerufen wurde.

Standardmäßig werden komplett unformatierte Links (blau und unterstrichen) nach dem Besuch violett eingefärbt. In den meisten Fertig-CSS-Dateien wird dies aus Gestaltungsgründen jedoch überschrieben. Dies müsstest du in der/den CSS-Datei(en) deines Wordpress-Themes ändern.

Prinzipiell spricht nichts gegen eine Kenntlichmachung besuchter Links. Allgemein geht des Trend seit gut 10 Jahren jedoch zu immer gleich formatierten Links.

Als Alternative zur Farbauszeichnung könnten per CSS eingebundene Grafiken dienen, etwa ein Haken hinter besuchten Links. Der Phantasie sind keine Grenzen gesetzt, solange die Auszeichnung für den Besucher verständlich erscheint.

Martinus33 · 15. Oktober 2014

Kausalat schrieb:
Standardmäßig werden komplett unformatierte Links (blau und unterstrichen) nach dem Besuch violett eingefärbt. In den meisten Fertig-CSS-Dateien wird dies aus Gestaltungsgründen jedoch überschrieben. Dies müsstest du in der/den CSS-Datei(en) deines Wordpress-Themes ändern.

"Standardmäßig" heißt "durch die Browser"? Das heißt, wenn mir das übliche violett ausreicht, brauche ich gar nichts weiter machen, sofern mein Theme nicht explizit und selbständig das überschreibt. Oder was meinst du mit "Fertig-CSS-Datei"?

Kausalat · 15. Oktober 2014

Ja, mit "standardmäßig" ist die Standarddarstellung von Browsern gemeint (die versierte Nutzer natürlich nach ihrem Belieben abändern können). Mit der Fertig-CSS-Datei meine ich jene deines Themes.

Wenn die Linkformatierung bereits deinen Wünschen entspricht, musst du nichts weiter ändern.

Daaron · 15. Oktober 2014

Sobald irgendwo ein a{color:???:} auftaucht, wird das :visited-Standardverhalten überschrieben. Wenn du bunte Links willst, dann musst du eben gezielt die :visited wieder einfärben.

Es ist meiner Meinung nach nur ziemlicher Quatsch. In Fließtexten macht es noch Sinn, aber in der primären Navigation? Das sieht doch komisch aus...

Martinus33 · 15. Oktober 2014

Das Theme hat eine custom-CSS-Datei, wo ich aber nichts explizit festgelegt habe zum visited.

Im Browser (FF) habe ich ebenfalls nix gemacht. Besuchte Links bleiben aber dennoch blau.

Irgendwo ein a{color:???:}

Kein spezifisches visited? Dann dürfte der Browser so gut wie nie zum Zug kommen, vermute ich.

Ob das komisch in der Navi aussieht, wird wohl von den verwendeten Farben abhängen. Hast du ein Beispiel?
Immerhin wäre es dann einheitlich mit den Textlinks. Blau in der Navi und lila im Text, also verschieden, fände ich nicht so gut.

Die Info für den Besucher "da war ich schon" macht doch in der Navi nicht weniger Sinn als im Text, oder? Rein sachlich gesehen wäre also das visited in der Navi m.E. genauso "gut" wie sonstwo.

Smartass · 15. Oktober 2014

Um die korrekte Darstellung der a-Element Pseudoklassen zu erreichen, muss die Reihenfolge

HTML:

a:link
a:visited
a:focus
a:hover
a:active

eingehalten werden.

Smartass

Daaron · 16. Oktober 2014

Martinus33 schrieb:
Die Info für den Besucher "da war ich schon" macht doch in der Navi nicht weniger Sinn als im Text, oder? Rein sachlich gesehen wäre also das visited in der Navi m.E. genauso "gut" wie sonstwo.

Es ist auch sonstwo nur von zweifelhaftem Nutzen... aber in längeren Texten oder Listen, sagen wir z.B. ne Fertigkeitstabelle für n Rollenspiel, macht so eine Markierung tatsächlich noch etwas Sinn. In der Navi... Nein, irgendwie nicht. Eine Navigation sollte so kompakt und übersichtlich sein, dass der User sich tatsächlich MERKEN kann, wo er schon war bzw. was ihn interessiert.

Martinus33 · 16. Oktober 2014

Es gibt so viele User... mit unterschiedlichen Motivationen und Verhaltensweisen...manche kommen vielleicht erst nach ein paar Stunden zurück und waren auf anderen, ähnlichen Sites...Nicht jeder hat ein gutes Gedächtnis usw.
Solange es kein Nachteil für die "Brains" ist, ist es doch im Sinne der usability, wenn es die anderen leichter haben.

Was mir eher Bedenken macht, ist was anderes: Die Browser-defaults werden ja wahrscheinlich kaum zum Einsatz kommen, weil "irgendeine Link-Färbung" dürfte der Regelfall sein. Gleichzeitig wäre es ungünstig, wenn das visited-styling unterschiedlich innerhalb einer page wäre. Das betrifft aber nicht nur die Nav., Links kommen ja z.B. auch im Footer oder einer Sidebar rechts vor. Kann man alle Links per CSS zuverlässig erfassen, ohne ständig alle Elemente im Auge haben zu müssen und einzeln zu stylen bzw. zu benennen? Wenn ich in 6 Monaten eine kleine Footer-Nav. ergänze, denke ich garantiert nicht daran, diese im CSS-Code zu ergänzen.

Scheint mir irgendwie nach "ganz oder gar nicht auszusehen". Also entweder konsequent immer und überall per CSS das fast immer überschriebene violett wieder festlegen. Oder ganz darauf verzichten. Da es aber zumindest für einen Teil der User hilfreich ist und den anderen nicht schadet,....

Daaron · 16. Oktober 2014

Der Nachteil ist, dass es mit hoher Wahrscheinlichkeit irgendwie komisch und unprofessionell aussieht. Navigation sollte einen einheitlichen, schlanken Look haben. :hover und :active sind die einzigen Zustände, die wirklich sinnvoll sind. Packst du jetzt noch :visited dazu, dann sieht die Navi aus wie ein bunter Hund.
Außerdem: :visited triggert nur auf das <a>, du kannst es nicht (brauchbar) serverseitig für einen Navigationspunkt setzen. Das heißt, du kannst dem Elternelement keine Klasse mitgeben. Kein <li class="visited">. Das schränkt dich extrem ein.

Und nein, du kannst nicht alles erfassen, außer du arbeitest extrem unprofessionell mit a:visited{color:#666 !important;}
In allen anderen Fällen gilt die Gewichtung.

Martinus33 · 16. Oktober 2014

active betrifft nur die Klicksekunde vor dem Laden. Warum ist das wichtig? Vorher merkt der User am hover, dass er richtig ist und nach dem Klicken daran, dass die Seite lädt. DAS hätte ich jetzt weggelassen.
Wie sehen andere das?

Und nein, du kannst nicht alles erfassen, außer du arbeitest extrem unprofessionell mit a:visited{color:#666 !important;}
In allen anderen Fällen gilt die Gewichtung.

Was meinst du mit "extrem unprofessionell"?

Kausalat · 16. Oktober 2014

Nutzer mit Touchscreens merken meistens nichts von der Hoverformatierung, weil es bei Touchschreens (noch) keine serienreife Fingererkennung aus größerer Distanz gibt. Daher ist die Formatierung des "active"-Zustandes sinnvoll, um dem Nutzer eine optische Rückmeldung zu bieten.

Mit "unprofessionell" meint Daaron das Anhängsel "!important", das oft dann benutzt wird, wenn ein Formatierungschaos vorherrscht, etwa wenn du ein fertiges Theme nach deinen Wünschen anpasst, jedoch aus welchen Gründen auch immer die Eigenschaften nicht an der richtigen Stelle änderst, sondern schlichtweg an gesonderter Stelle mit dem "!important" überschreibst. In der Entwicklungsphase kann man das Anhängsel durchaus verwenden; im fertigen Design gibt es spätestens beim nächsten Versuch einer Designänderung Probleme.

Martinus33 · 16. Oktober 2014

Ah, verstehe.

Ist aber dennoch nur eine Sekunde, nachdem er bereits geklickt hat und damit quasi die "mögliche Unsicherheitsphase" bereits überwunden hat. Ein echter Ersatz für hover ist das m.E. nicht und was das "nachher" angeht, merkt er, dass die Seite lädt.

Ich bin allerdings kein mobile-User.... finden die das in der Regel dennoch sehr hilfreich?

Daaron · 16. Oktober 2014

Kann man machen, muss man aber nicht. Aber ich dacht eher an so etwas wie <li class="active"><a>Deine aktuelle Seite</a></li>... Dafür gibts mit :visited definitiv keinen brauchbaren Ersatz...

Martinus33 · 16. Oktober 2014

Verstehe ich dich richtig, du willst mit einem Aufzählungspunkt die aktuelle Seite in der Nav. kenntlich machen, so dass der User, wenn er auf die Nav schaut, sieht "das ist die Seite, auf der ich gerade bin"?

In meinem Theme nennt sich das "selected".

Daaron · 17. Oktober 2014

Jap, die aktive Seite lässt sich sehr leicht auf sehr komplexe Arten in der Navi hervorheben. Für :visited ist genau das aber nicht möglich. Du kannst da höchstens mit JavaScript rückwärts durch den DOM wandern.... ziemlich daneben.

Martinus33 · 17. Oktober 2014

Mein Theme erlaubt eine solche Hervorhebung, für die "current page", ganz unabhängig von visited. Die Standard-Optionen umfassen zwar keinen Listenpunkt, aber mehrere Sachen, von denen sicherlich einige die Nav. nicht "bunt" machen.
Nennt sich da aber "selected". Finde ich auch nützlich.

Ich denke, ich lasse jetzt mal beides vorerst weg, sowohl a:visited als auch a:active. Hover und selected/current page hingegen lege ich sofort an.
Am Schluss des Redesigns sehe ich dann, inwieweit das optisch gut gestylt werden kann, passend zum Rest. Wenn es da gute Wege gibt, werde ich das a:visited per CSS ziemlich sicher und evtl. auch das a:active (für mobile) ergänzen.

MaverickM · 19. Oktober 2014

Daaron schrieb:
Sobald irgendwo ein a{color:???:} auftaucht, wird das :visited-Standardverhalten überschrieben. Wenn du bunte Links willst, dann musst du eben gezielt die :visited wieder einfärben.

Zudem kann die Farbe für bereits besuchte Links ja je nach System-/Browser-Einstellung auch anders sein. Daher empfiehlt es sich generell, so viel wie möglich davon zu definieren.

Was den optischen Aspekt angeht, kann ich dem auch nur zustimmen. Bei der Navigation ergibt das in meinen Augen keinen Sinn. In Foren oder bei einer Linksammlung dagegen schon eher.

Martinus33 · 19. Oktober 2014

Bei den lila Links in der Nav geht es mir vor allem um die Einheitlichkeit (sofern es optisch passt): Wenn unten im Text der Link zur Seite B lila ist und gleichzeitig oben in der Nav blau, dann finde ich das nicht gut.

Allerdings weiß ich nicht, ob die User diese Uneinheitlichkeit als Ausnahme vom Grundsatz der Konsistenz und Einheitlichkeit so gewohnt sind und (unbewusst) akzeptieren bzw. normal finden. Ich bin seit ca. 10 Jahren fast täglich im Web, aber ich muss gestehen, hätte mich vor zwei Wochen jemand danach gefragt "Sind Nav.-Links NIE violett bzw. genauso violett wie unten?", dann hätte ich es nicht gewusst. Weder in die eine noch in die andere Richtung ist mir das jemals aufgefallen.

"Visited"-styling für Links im Text und Navigation

Lt. Commander

Kausalat

Gast

Lt. Commander

Kausalat

Gast

Fleet Admiral

Lt. Commander

Smartass

Gast

Fleet Admiral

Lt. Commander

Fleet Admiral

Lt. Commander

Kausalat

Gast

Lt. Commander

Fleet Admiral

Lt. Commander

Fleet Admiral

Lt. Commander

20k Fleet Admiral

Lt. Commander

Ähnliche Themen