Turtle: Anordnung einer Navigation bis zu drei Ebenen

Hallo Leute,

ich stehe vor dem Problem ein Navigationskonzept für eine Navigation bis zu drei Ebenen zu erstellen.

Für mich ist dieser Bereich absolutes Neuland.

Meine Ideen bisher sind folgende:
Die Navigation sollte so angeordnet werden:
Grundsätzlich erscheinen Navigation- und Unternavigation im Kopf der Seite, unterhalb der "Logo-Zeile".
Unternavigation erscheint nur für die entsprechende gewählte HauptNavigation unter der Hauptnavigation.

Das hat folgende Vorteile:
 - der Navigationsbereich ist sofort sichtbar,
 - die Navigation schränkt die Breite des Inhaltes nicht ein.
   So steht mehr Platz für die Inhalte zur Verfügung, die Seite muss nicht zu sehr gescrollt werden.
   Bei einer Bildschirmauflösung von 800 x 600, die sehbehinderte Menschen nutzen, sollte soviel Inhalt wie möglich
   zu sehen sein.

Für Tipps aller Art bezüglich einer Anordnung bin Euch dankbar.

Viele Grüsse aus Münster,
Turtle

  1. Hallo Turtle!

    [...] eine Navigation bis zu drei Ebenen zu erstellen.

    Meine Ideen bisher sind folgende:
    Grundsätzlich erscheinen Navigation- und Unternavigation im Kopf der Seite, unterhalb der "Logo-Zeile".
    Unternavigation erscheint nur für die entsprechende gewählte HauptNavigation unter der Hauptnavigation.

    Diese Idee finde ich gut, jedoch sind 3 Ebenen Untereinander vielleicht doch ein wenig unübersichtlich.
    Ich kombiniere meist 2 Ebenen an einer Stelle (bisher nur oben quer oder links runter), und die 3. Ebene dann an einer anderen Stelle. (hierbei kann man ja beliebig variieren, es muß ja nicht immer 1. und 2. Ebene zusammen sein.)
    Ob das wirklich übersichtlicher ist weiß ich aber auch nicht ... vielleicht hat ja noch jemand eine bessere Idee hier ;)

    MfG aus Karlsruhe,
    Götz

    --
    Losung für Donnerstag, 8. Juli 2004
    Alle Völker auf Erden sollen erkennen, dass der Herr Gott ist und sonst keiner mehr! (1. Könige 8,60)
    Der Herr aller Herren hat allein Unsterblichkeit, der da wohnt in einem Licht, zu dem niemand kommen kann, den kein Mensch gesehen hat noch sehen kann. Dem sei Ehre und ewige Macht! (1. Timotheus 6,16)
    (http://www.losungen.de/heute.php3)
  2. Bei einer Bildschirmauflösung von 800 x 600, die sehbehinderte Menschen nutzen,

    Turtle,
    Warum sollten sie das tun? Man könnte z.B. die Schriftgröße auf XXL stellen. Die ist dann bei hoher Bildschirmauflösung sicher größer als Normalschrift* bei niedriger Auflösung.

    Wo wir bei Barrierefreiheit sind: Stark Sehbehinderte/Blinde dürften es vorziehen, wenn die Navigation am Ende der Seite steht und sie diese nach dem Inhalt vorgelesen bekommen.

    Gunnar

    --
    Good results come from experience; and experience comes from bad results.
    1. Wo wir bei Barrierefreiheit sind: Stark Sehbehinderte/Blinde dürften es vorziehen, wenn die Navigation am Ende der Seite steht und sie diese nach dem Inhalt vorgelesen bekommen.

      Ich denke, ein User sollte zu Beginn wissen, welche Navigationsmöglichkeiten er hat. Es kann doch sein dass er etwas bestimmtes sucht. Wenn mich der vorgelesene Inhalt nicht interessiert, dann möchte ich nicht warten, bis der Inhalt zu Ende gelesen ist, um dann die Navigationsmöglichkeiten zerfahren, bzw. vorgelesen zu bekommen, oder?

      Gruss,
      Turtle

      1. Wenn mich der vorgelesene Inhalt nicht interessiert,

        dann gehe ich nicht auf die Seite.

        dann möchte ich nicht warten, bis der Inhalt zu Ende gelesen ist, um dann die Navigationsmöglichkeiten zerfahren

        Da hilft eine Aufteilung der Website in Inhaltsseiten und Navigationsseiten.

        Gunnar

        --
        Good results come from experience; and experience comes from bad results.
        1. Hi,

          Wenn mich der vorgelesene Inhalt nicht interessiert,

          dann gehe ich nicht auf die Seite.

          Verwendest Du niemals Suchmaschinen? Ich denke, Du kannst nicht von Dir ausgehen. [1]

          dann möchte ich nicht warten, bis der Inhalt zu Ende gelesen ist, um dann die Navigationsmöglichkeiten zerfahren

          Da hilft eine Aufteilung der Website in Inhaltsseiten und Navigationsseiten.

          ...was wiederum alle nicht stark Sehbehinderten, die alles auf einen Blick habe möchten, irritiert.

          Dann Dein vorheriger Beitrag:

          Stark Sehbehinderte/Blinde dürften es vorziehen, wenn die Navigation am Ende der Seite steht und sie diese nach dem Inhalt vorgelesen bekommen.

          Das war auch längere Zeit mein Ansatz - ich denke nun aber, daß das Navigationsmenü sich sehr gut am Anfang einer Seite macht, wenn ihm ein Verweis "Navigation überspringen" vorangestellt ist. (Im gegensätzlichen Fall wäre natürlich "Zur Navigation springen" vor dem Seiteninhalt angebracht.)

          Viele Grüße,
          Bubax

          [1] in ca. 90% aller Suchanfragen ist entweder der erste Treffer, oder der erste Treffer, den ich besuche, genau die relevante Seite, nach der ich gesucht hatte. Dann bleiben aber noch ca. 10%, bei denen ich erst durch Besuch einer Seite herausfinde, daß sie ungeeignet ist. Also gehe ich durchaus auch auf Seiten, die mich überhaupt gar nicht interessieren

          1. Hallo,

            Das war auch längere Zeit mein Ansatz - ich denke nun aber, daß das Navigationsmenü sich sehr gut am Anfang einer Seite macht, wenn ihm ein Verweis "Navigation überspringen" vorangestellt ist.

            Wozu das? Man kann doch da nach unten scrollen. Ich verstehe nicht den Sinn dieses Verweise.

            Viele Grüsse aus Münster,
            Turtle

            1. Hi,

              Wozu das? Man kann doch da nach unten scrollen. Ich verstehe nicht den Sinn dieses Verweise.

              hast u schonmal versucht, einem Screenreader (der die Seite vorliest) Scrollen beizubringen? ;-)

              freundliche Grüße
              Ingo

              1. Hallo,

                Wozu das? Man kann doch da nach unten scrollen. Ich verstehe nicht den Sinn dieses Verweise.
                hast u schonmal versucht, einem Screenreader (der die Seite vorliest) Scrollen beizubringen? ;-)

                Ok, aber was leistet dann der Verweis?
                Ich verstehe darunter einen Anker. Aber wie beeinflusst das den SreenReader?
                Wie gesagt, für mich ist "barrierefrei" absolutes Neuland.

                Gruss,
                Turtle

                1. Hi,

                  Ok, aber was leistet dann der Verweis?
                  Ich verstehe darunter einen Anker. Aber wie beeinflusst das den SreenReader?

                  na ganz einfach: dem Hörer wird dieser Link angeboten und wenn er sich direkt den Inhalt vorlesen will, wählt er ihn an und er bekommt den Inhalt (ab diesem Anker) vorgelesen.

                  freundliche Grüße
                  Ingo

                2. Hi,

                  Wie gesagt, für mich ist "barrierefrei" absolutes Neuland.

                  Selbstverständlich (d.h. in aller Regel) wird dieser Verweis vor *Dir* (da er für Dich überflüssig wäre) versteckt:

                  position:absolute; left:-5000px;

                  Damit ist er für Dich unsichtbar, für Unsichtbare aber weiterhin aussprechbar.

                  Viele Grüße,
                  Bubax

                  1. Hi,

                    position:absolute; left:-5000px;

                    naja, ich finde display:none für media screen, projection schon sauberer.

                    freundliche Grüße
                    Ingo

                    1. Hallo,

                      position:absolute; left:-5000px;
                      naja, ich finde display:none für media screen, projection schon sauberer.

                      wobei display:none u.U. nicht vorgelesen wird

                      Grüße
                      Marcus

                      1. Hi

                        position:absolute; left:-5000px;
                        naja, ich finde display:none für media screen, projection schon sauberer.

                        wobei display:none u.U. nicht vorgelesen wird

                        "media screen, projection" war irgendwo im Text zu finden.

                        Gruss
                        chlori

                        1. Hi,

                          position:absolute; left:-5000px;

                          naja, ich finde display:none für media screen, projection schon sauberer.

                          Ich ja auch ;)

                          wobei display:none u.U. nicht vorgelesen wird

                          Eben...

                          "media screen, projection" war irgendwo im Text zu finden.

                          Ich hatte mal gehört, daß einige Screenreader mehr oder weniger als bug mit display:none gekennzeichnete  Elemente nicht vorlesen würden. Daß dies bei den Ausgabemedien screen und projection nicht sinvoll wäre, ist klar - aber bugs lassen sich von an sich klaren Dingen nicht sonderlich beeindrucken. Weiß irgend jemand genaueres, evtl. auch, welche Screenreader betroffen sind? Hätte ich ein beruhigtes Gewissen, würde ich auch viel lieber endlich display:none verwenden...

                          Viele Grüße,
                          Bubax

                          1. Hi Bubax,

                            Ich hatte mal gehört, daß einige Screenreader mehr oder weniger als bug mit display:none gekennzeichnete Elemente nicht vorlesen würden.

                            ja, leider.

                            http://css-discuss.incutio.com/?page=ScreenreaderVisibility
                             http://www.webaccessibility.info/lab/displaytest.html

                            Grüße,
                             Roland

                            1. Hi,

                              ja, leider.

                              http://css-discuss.incutio.com/?page=ScreenreaderVisibility
                               http://www.webaccessibility.info/lab/displaytest.html

                              ich lese hier zwar, daß Screenreader nicht unbedingt media aural unterstützen, aber finde keinen Hinweis auf die konkreten media-Angaben bei der Einbindung. Interpretieren Screenreader denn überhaupt media screen, projection?

                              freundliche Grüße
                              Ingo

                              1. Hi,

                                http://css-discuss.incutio.com/?page=ScreenreaderVisibility
                                http://www.webaccessibility.info/lab/displaytest.html
                                ich lese hier zwar, daß Screenreader nicht unbedingt media aural unterstützen, aber finde keinen Hinweis auf die konkreten media-Angaben bei der Einbindung. Interpretieren Screenreader denn überhaupt media screen, projection?

                                Sie scheinen alles über einen Kamm zu scheren - es wird nicht einmal media="aural" gezielt unterstützt, um Angaben in anderen style sheets entgegenwirken zu können:

                                "First and foremost, the difficulty is with the screen reader products, none of which honor aural style sheets, and few of which pay any attention at all to CSS standards. Many of the screen readers appear to use Internet Explorer's DOM api to let IE tell them what it sees. Talk about listening to the blind men describe an elephant! Now we know. [...] The downfall, of course, is that the screen reader publishers don't yet pay attention to media="aural". We need to help them become aware. If you have contacts at those places, point them here or to the tests."

                                (http://css-discuss.incutio.com/?page=ScreenreaderVisibility)

                                Viele Grüße,
                                Bubax

                            2. Hi Orlando,

                              Ich hatte mal gehört, daß einige Screenreader mehr oder weniger als bug mit display:none gekennzeichnete Elemente nicht vorlesen würden.

                              ja, leider.

                              Danke für die Verweise. Das Leben ist schrecklich...

                              Viele Grüße,
                              Bubax

                  2. Hi Bubax,

                    Wie gesagt, für mich ist "barrierefrei" absolutes Neuland.

                    position:absolute; left:-5000px;

                    Damit ist er für Dich unsichtbar, für Unsichtbare aber weiterhin aussprechbar.

                    ein wunderschöner Satz! Er sollte in alle Usability-Checklisten Einzug finden.

                    Grüße,
                     Roland

                    1. Hi Orlando,

                      Damit ist er für Dich unsichtbar, für Unsichtbare aber weiterhin aussprechbar.

                      ein wunderschöner Satz! Er sollte in alle Usability-Checklisten Einzug finden.

                      Danke! Das Lob motivierte mich so sehr, daß ich gleich noch ein wenig üben mußte:

                      "Damit ist er für Sehende unsichtbar, für Unsichtbare aber aussprechbar, so daß Nichtsehende nicht unwissend bleiben."

                      Nur so als Working Draft...

                      Viele Grüße,
                      Bubax

      2. Hi

        Wenn mich der vorgelesene Inhalt nicht interessiert,

        Dann überspringe ich ihn lieber als grundsätzlich auf
        jeder Seite die Nav überspringen zu müssen um nach
        dem Lesen wieder zu suchen.

        Gruss
        chlori

        1. Dann überspringe ich ihn lieber als grundsätzlich auf
          jeder Seite die Nav überspringen zu müssen um nach
          dem Lesen wieder zu suchen.

          Ich teste mit Webspeech. Da ist das so, dass zuerst der grösste Block der Seite vorgelesen wird, also der Inhalt.
          Das heisst, das die Navigation nicht übersprungen werden muss, um an den Inhalt zu kommen.

          Gruss,
          Turtle

    2. Hi

      Man könnte z.B. die Schriftgröße auf XXL stellen.

      Besser wäre 100% Schriftgrösse oder gar nichts angeben.

      Sehbehinderte haben ihre Schriftgrösse schon vorher
      gross eingestellt, ausser sie werden erst beim Besuch
      dieser Seite sehbehindert (gefährlicher Farbkontrast etc.)

      Oft ignorieren sie sowieso was du angibst, deshalb ist
      es in erster Linie wichtig ihnen das Leben nicht
      schwerer zu machen indem zB Pixel für Schriftgrössen
      angegeben werden.

      Aber ich denke zum Thema Schriftgrösse weiss das Archiv
      genug gut Bescheid...

      Gruss
      chlori

      1. Man könnte z.B. die Schriftgröße auf XXL stellen.

        Besser wäre 100% Schriftgrösse oder gar nichts angeben.

        Ich meinte mit "man" auch den Nutzer, nicht den Seitenautor. Ging aber aus meinem Posting nicht hervor. Hast Recht.

        Gunnar

        --
        Good results come from experience; and experience comes from bad results.
  3. Turtle,
    Ich denke, generelle Antworten kann es nicht geben.

    Ob ein Menü horizontal gestaltet werden kann, hängt von der Anzahl der Unterpunkte und der Länge der Texte ab.

    Gunnar

    --
    Good results come from experience; and experience comes from bad results.
  4. Hi,

    Grundsätzlich erscheinen Navigation- und Unternavigation im Kopf der Seite, unterhalb der "Logo-Zeile".

    was jedoch nur bei sehr wenigen Menüpunkten Sinn macht, wobei eine flexile Umsetzung auch ein Erweitern auf zwei Zeilen bei Vergrößerung des Schriftgrades noch tolerierbacr machen würde.

    Unternavigation erscheint nur für die entsprechende gewählte HauptNavigation unter der Hauptnavigation.

    Gut. Was fehlt ist die dritte Ebene.

    - die Navigation schränkt die Breite des Inhaltes nicht ein.

    Auch gut. Dennoch könntest Du hier eine vertikale dritte Navigationsebene an einer Seite integrieren, wenn Du dafür sorgst, daß der Inhaltsbereich diese umfließt. So wird unterhalb dieser Navigation wieder der gesamte Bildschirm ausgenutzt.

    Anstatt, wie weiter unten vorgeschlagen, die Navigation unter dem Inhaltsbereich zu platzieren, könntest Du einen (unsichtbaren) Link zum Inhalt vor die Navigation setzen.

    freundliche Grüße
    Ingo

    1. Anstatt, wie weiter unten vorgeschlagen, die Navigation unter dem Inhaltsbereich zu platzieren,

      Nö, Ingo, davon war nicht die Rede.

      Die Navigation könnte im Quelltext nach dem Inhalt stehen, auf dem Bildschirm aber vorher.

      Gunnar

      --
      Good results come from experience; and experience comes from bad results.
      1. Die Navigation könnte im Quelltext nach dem Inhalt stehen, auf dem Bildschirm aber vorher.

        Wie geht denn das?

        Gruss,
        Turtle

        1. Die Navigation könnte im Quelltext nach dem Inhalt stehen, auf dem Bildschirm aber vorher.

          Wie geht denn das?

          Turtle,
          Z.B. mit absoluter Positionierung. http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position

          Nicht, dass das der Weisheit letzter Schluss wäre...
          Gunnar

          --
          Good results come from experience; and experience comes from bad results.
      2. Hi,

        Die Navigation könnte im Quelltext nach dem Inhalt stehen, auf dem Bildschirm aber vorher.

        nur daß hierzu absolute Positionierung erforderlich ist und diese nur sehr schwer mit einem flexiblen Layout zu vereinbaren ist.

        freundliche Grüße
        Ingo

    2. Hallo,

      »»Dennoch könntest Du hier eine vertikale dritte Navigationsebene an einer Seite integrieren, wenn Du dafür sorgst, daß der Inhaltsbereich diese umfließt. So wird unterhalb dieser Navigation wieder der gesamte Bildschirm ausgenutzt.

      wie erreiche ich, dass der Inhalt die dritte Navigation umfliesst?

      Gruss,
      Turtle

      1. wie erreiche ich, dass der Inhalt die dritte Navigation umfliesst?

        http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float

        Gunnar

        --
        Good results come from experience; and experience comes from bad results.
      2. Hi,

        wie erreiche ich, dass der Inhalt die dritte Navigation umfliesst?

        tja... wenn Du Dir mal überlegst, welche CSS-Eigenschaft "umfließen" charakterisieren könnte. ;-)
        Sieh' Dir mal http://www.1ngo.de/web/css-layout.html?blau-imtext (mit aktiviertem Javascript) an.

        freundliche Grüße
        Ingo

  5. Hi Turtle,

    ich stehe vor dem Problem ein Navigationskonzept für eine Navigation bis zu drei Ebenen zu erstellen.

    das dürfte in jedem Fall recht unübersichtlich werden. Muss in jeder Ebene alles erreichbar sein? Dann böte sich _ein_ Link auf eine Sitemap an. Um in die nächsthöheren Ebenen zu gelangen, kannst du einen Breadcrumb-Trail einbauen. Je umfangreicher eine Site ist, desto schlanker sollte IMHO die Navigation sein. Je mehr Verweise du anbietest, desto weniger werden diese wahrgenommen.

    Ein Beispiel: http://de.selfhtml.org/css/eigenschaften/rahmen.htm. Vermisst du auf dieser Seite irgendetwas? Muss ich von dort aus mit einem Link zu http://de.selfhtml.org/cgiperl/index.htm gelangen können? SELFHTML hat drei Ebenen und eine absolut simple Navigationsstruktur. Das ist der Grund, warum man sich sofort zurechtfindet.

    Grundsätzlich erscheinen Navigation- und Unternavigation im Kopf der Seite, unterhalb der "Logo-Zeile".
    Unternavigation erscheint nur für die entsprechende gewählte HauptNavigation unter der Hauptnavigation.

    Also quasi ein Menü mit Reitern. Achte darauf, dass die Ebene, in der man sich befindet klar erkennbar ist. Mir persönlich sagt diese Form des Menüs nicht zu, da sich Verweise vertikal schneller "scannen" lassen als horizontal. Vielleicht liegt es auch daran, dass in einer vertikalen Struktur nicht verwandte Seiten weiter auseinander liegen als bei einer horizontalen.

    Ein Beispiel:

    | Startseite | Produkte* | über uns | Presse | Kontakt |
    | Typ A | Typ B | Installation | Updates* | Kundenservice |

    Diese Version scheint nicht strukturiert zu sein, die zweite schon eher:

    Startseite
     über uns
     Produkte*
       Typ A
       Typ B
       Installation
       Updates*
       Kundenservice

    Vergleiche beide Versionen mit einer dritten Ebene. Hm? ;-)

    Das hat folgende Vorteile:
     - der Navigationsbereich ist sofort sichtbar,

    Wenn er vom Layout her gleich erkennbar ist, ja. Das hat aber nichts mit der Anordnung zu tun, eine Navigation ist schnell zu identifizieren. Ist sie aber auch schnell zu durchschauen? Eine Navigation muss zwei Fragen möglichst einfach beantworten:

    1.) Wo bin ich?
     2.) Was gibt es hier noch zu sehen?

    Beide Punkte scheinen mir bei einem horizontalen Menü nicht gut umsetzbar zu sein. Auch Amazon, angeblich deppensicher, verwendet nur zwei horizontale Ebenen und verlässt sich beim Rest auf einen Breadcrumb-Trail.

    Bei einer Bildschirmauflösung von 800 x 600, die sehbehinderte Menschen nutzen, [...]

    Woher beziehst du diese Information? Ich halte das für ein Gerücht. Mag sein, dass viele Leute die Schriftgröße verändern (auch ich mache das bisweilen), das funktioniert bei einer höheren Auflösung aber besser.

    Wichtig ist nur, dass die Seiten skalierbar sind.

    Grüße,
     Roland