Felix Riesterer: JS-Lösung für Klapp-Navi

Liebe Mitleser,

ich bitte um eine Begutachtung und eine Meinung zu meiner Lösung eines Problems, das ich schon seit längerem zu lösen suchte.

Auf unserer Schulwebsite sind die Inhalte hierarchisch in Unterverzeichnisse gegliedert, und die Navigation setzt auf dieser Struktur auf, was logischerweise zu einer Baumstruktur führt.

Um nun sinnvoll navigieren zu können, gibt es im Grunde drei Navigationselemente auf jeder Seite: Brotkrümel, Hauptnavi (die zentralen vier Bereiche) und eine Unterseiten-Navi, bei der die im aktuellen Bereich gerade erreichbaren Unterbereiche aufgelistet werden.

Es gab einmal eine CSS-basierte "globale" Klapp-Navi, bei der über eine verschachtelte Liste alle Bereiche direkt erreichbar waren. Das hatte unter Anderem den Nachteil, dass in jedem Dokument die komplette Navigationsstruktur enthalten sein musste. Nach einem Redesign ist diese Klapp-Navi dann entfernt worden (CSS-seitig), aber der Markup-Code für die Navi wurde weiterhin auf jeder Seite mit ausgeliefert, obwohl er keinem Usability-Zweck mehr diente.

Meine Lösung liefert nun nur noch dasjenige Markup aus, das auch tatsächlich direkt genutzt werden kann. Mittels meinem JavaScript kann dann eine Klapp-Navi aufsetzen, wobei die Navigations-Struktur (sprich: die inhaltliche Struktur der Website) in ebendiesem JavaScript gespeichert ist (wird serverseitig dynamisch aktualisiert). Dadurch kann das Laden des notwendigen Codes auf eine einzige Datei reduziert werden, die zudem auch im Browsercache vorgehalten werden kann. Das JavaScript kann dann dynamisch auf (fast) alle Navigationselemente reagieren und eine passende Klapp-Navi anzeigen.

Und wer kein JavaScript hat, verpasst nix.

Was meint Ihr zu der Lösung?

Liebe Grüße,

Felix Riesterer.

--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
  1. Hi Felix,

    Und wer kein JavaScript hat, verpasst nix.

    Umgekehrt würde ich statische Navi ausblenden wenn Klappnavi (also Js) verfügbar, sonst wirds irgendwie unübersichtlich.

    Gruesse, Joachim

    --
    Am Ende wird alles gut.
    1. Lieber Joachim,

      vielen Dank für Deine Antwort.

      Umgekehrt würde ich statische Navi ausblenden wenn Klappnavi (also Js) verfügbar, sonst wirds irgendwie unübersichtlich.

      Die Baumstruktur ist mittlerweile ziemlich umfangreich geworden, sodass es im Grunde fast angenehmer ist, in den Unterseiten zu hovern, da dort keine so stark verästelten Menüs aufklappen. Die "Stammnavi" erzeugt ja mitunter sehr weitreichende Verzweigungen, sodass man im Extremfall (z.B. im Fach Spanisch) über den rechten Anzeigerand hinaus hovern könnte (wenn man denn mittels der Cursortasten mitscrollt).

      Ich bin mir mit der Darstellung meiner Lösung alles andere als sicher, finde die visuelle Lösung also alles andere als befriedigend. Aber was sollte man anders machen? Bei unserem damaligen missglückten Designwettbewerb hatte ein Schüler eine Idee (jpeg 170kb), bei der auch die Gestaltung der Navi neu geregelt wurde - nur leider nicht vollständig.

      Welche (visuellen) Ideen hättest Du denn noch dazu?

      Ich hatte mir inzwischen auch überlegt, ob ich eine Checkbox anbiete, über die die Klappnavi (de)aktiviert werden kann. Und diese Einstellung könnte dann in einem Cookie (oder in window.name?) für den weiteren Besuch gespeichert werden...

      Liebe Grüße,

      Felix Riesterer.

      --
      ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
      1. Hi Felix,

        ich habe leider zu spät gesehen, dass Du noch geantwortet hast...

        Welche (visuellen) Ideen hättest Du denn noch dazu?

        Ich persönlich bin eigentlich gar nicht mehr so ein Fan von Ausklapp-Menüs, insbesondere, wenn diese mehrere Ebenen umfassen.

        Hast Du mal darüber nachgedacht, nur noch mit einer Seitennavi für die jeweiligen Unterseiten zu arbeiten, dafür aber eine Breadkrumb-Navi anzubieten, umm ggf wieder zurückzugehen? Ich persönlich halte diese - vergleichsweise einfache - Lösung letztendlich übersichtlicher. Und für den generellen Überblick gibts ja auch noch die gute, alte Sitemap.

        Ich hatte mir inzwischen auch überlegt, ob ich eine Checkbox anbiete, über die die Klappnavi (de)aktiviert werden kann.

        Ach, zu viel Demokratie in Designfragen ergibt imho "Schweinebauch" ;-)

        Gruesse, Joachim

        --
        Am Ende wird alles gut.
        1. Lieber Joachim,

          Hast Du mal darüber nachgedacht, nur noch mit einer Seitennavi für die jeweiligen Unterseiten zu arbeiten, dafür aber eine Breadkrumb-Navi anzubieten, umm ggf wieder zurückzugehen?

          ähm... alles das ist doch längst schon auf der Seite vorhanden gewesen. Die Klapp-Navi ist ja nur zusätzlich obendrauf gesetzt worden. Als Ergänzung.

          Ich persönlich halte diese - vergleichsweise einfache - Lösung letztendlich übersichtlicher. Und für den generellen Überblick gibts ja auch noch die gute, alte Sitemap.

          Die Sitemap ist überhaupt nicht übersichtlich bei uns. :-(

          Aber dafür gibt es ja eine Suchfunktion, die wirklich sehr viel findet.

          Ich hatte mir inzwischen auch überlegt, ob ich eine Checkbox anbiete, über die die Klappnavi (de)aktiviert werden kann.
          Ach, zu viel Demokratie in Designfragen ergibt imho "Schweinebauch" ;-)

          Wieso Demokratie? Diese Klappnavi kann sehr nerven! Und da ist es doch netter, wenn ich eine Abschaltmöglichkeit anbiete, anstatt dass der Besucher sein JavaScript deaktivieren muss, um diese Störung zu entfernen... findest Du nicht? Ich bin mir nur noch nicht sicher, wie ich das visuell löse (Icon/Checkbox/Linktext).

          Liebe Grüße,

          Felix Riesterer.

          --
          ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
          1. Servus Felix,

            entschuldige meinen lahmarschigen Replyrythmus...

            ähm... alles das ist doch längst schon auf der Seite vorhanden gewesen. Die Klapp-Navi ist ja nur zusätzlich obendrauf gesetzt worden. Als Ergänzung.

            ja ich weiss. Ich hatte nur mich gefragt, warum Du überhaupt eine zusätzliche Ausklapp-Navi anbieten willst, vielleicht ist weniger hier einfach mehr. Damit würde sich dann sich auch die Frage nach den Checkboxen erübrigen.

            Wahrscheinlich wolltest Du das jetzt gar nicht hören ;-)
            Ich persönlich habe ja garnichts gegen solche Spielereien, aber ich denke, man muss klar abwägen, ob es die Benutzerführung wirklich erleichtert. Wenn ich lediglich eine Ebene mit wenigen Punkten ausklappe, sehe ich kein Problem. Bei mehreren Ebenen besteht immer die Gefahr, dass dem Benutzer die Navi versehentlich zuklappt, weil er mit der Maus nicht zielsicher genug ist. Hier muss ich also extra Verzögerungsmechanismen einbauen, um die Sache gut bedienbar zu halten.
            Mehr als zwei Ebenen halte ich generell für unübersichtlich, in dem Fall würde ich gar nicht auf das Ausklappkonzept setzen.

            Die Sitemap ist überhaupt nicht übersichtlich bei uns. :-(

            Würde ich so nicht sagen. Es sind halt einfach viele Seiten. Um die Ebenen klarer zu trennen könnte man diese ja farblich kennzeichnen.

            Aber dafür gibt es ja eine Suchfunktion, die wirklich sehr viel findet.

            schadet nie ;-)

            Wieso Demokratie? Diese Klappnavi kann sehr nerven!

            Wenn Du das Gefühl hast, dass sie das _könnte_ solltest Du sie imho eben ganz weglassen. Ich würde immer _ein_ schlüssiges Konzept entwickeln, von dem ich persönlich überzeugt bin, dass es best-geeignet ist - wohl wissend, dass nie alle glücklich damit sein werden.

            Aber des ois is hoit nur meine bescheidene Sichtweise...

            Gruesse, Joachim

            --
            Am Ende wird alles gut.