it-swarm.com.de

So lösen Sie ein mehrstufiges Seitenleistenmenü auf, in dem übergeordnete Abschnitte untergeordnete UND verknüpfte Links anzeigen müssen

Hinweis: Wenn Sie dies lesen, denken Sie daran, dass wir möglicherweise eher ein Problem mit der Informationsarchitektur als ein Problem mit der Benutzerfreundlichkeit von Menüs haben.


Angenommen, wir haben dieses Menü:

Item 1              ............  Should link to Page 1 AND somehow show its children
    Item 1.1        ............  Should link to Page 1.1
    Item 1.2        ............  Should link to Page 1.2
    Item 1.3        ............  Should link to Page 1.3 AND somehow show its children
        Item 1.3.1  ............  Should link to Page 1.3.1
        Item 1.3.2  ............  Should link to Page 1.3.2
Item 2              ............  There is no Page 2. This should not link anywhere. Only show its children.
    Item 2.1  
    Item 2.2
    Item 2.3

Etc. with more items....


Die Herausforderung:

  1. Wir möchten, dass Kinder- und Enkelkinder standardmäßig ausgeblendet werden, damit wir sie bei Bedarf anzeigen können.
  2. Wir möchten keine Flyout/Hover-Interaktion verwenden, mit der unsere Benutzer Probleme haben. Wir wollen nur das Klicken verwenden.
  3. Einige übergeordnete Elemente sind Seiten selbst und müssen daher irgendwie verknüpft werden. Andere übergeordnete Elemente dienen ausschließlich dazu, eine Art Gruppentitel bereitzustellen, der die untergeordneten Elemente umfasst und die Site-Struktur anzeigt. Diese übergeordneten Elemente sind jedoch keine Seiten.
  4. Benutzerbasis: Personen über 40 und mit wenig Interneterfahrung und manchmal eingeschränkter Sicht/Geschicklichkeit. Sie haben Probleme mit Dingen, die Sie sich nicht vorstellen können.


Ich habe darüber nachgedacht, etwas zu tun wie:

Link 1  [+]
    Link 1.1
    Link 1.2
    Link 1.3 [+]
        Link 1.3.1
        Link 1.3.2
Non-link 2  [+]
    Link 2.1
    Link 2.2

Wo das Symbol [+] ein Symbol ist, das anzeigt, dass Sie eine Unterebene öffnen/schließen können. Sie würden darauf klicken, um untergeordnete Elemente anzuzeigen, aber auf den Text klicken, um tatsächlich zu einer Seite zu gelangen. Ich mache mir Sorgen, dass das Symbol [+] zu klein ist, um von unseren Benutzern leicht angeklickt zu werden.


Alle alternativen Vorschläge wären sehr dankbar, da ich dieses Problem jetzt bei 3 Projekten hatte und nie wirklich eine Lösung gefunden habe, mit der ich zufrieden war.

================================================== ==========

AKTUALISIEREN:

Nun, es sieht so aus, als würden wir entweder die Folgenabschätzung ändern oder eine Baumansicht erstellen, wie oben beschrieben und in einer der folgenden Antworten veranschaulicht. Wenn jemand diesen Beitrag sieht und eine bessere Idee hat, lass es mich wissen.

2
Andres Diez

Es tut mir leid, dass ich es Ihnen mitteilen muss, aber es wird keine Lösung dafür geben, wenn Sie nicht bereit sind, die Folgenabschätzung überhaupt zu ändern.

Eine (billige und nicht sehr elegante) Lösung besteht darin, den Inhalt des übergeordneten Elements immer um eine Ebene nach unten zu verschieben und ihn als "Übersicht" oder "Einführung" zu bezeichnen. Wenn Sie auf ein übergeordnetes Element klicken, wird die Unterebene geöffnet und das erste Element der Unterebene ist aktiv. Nicht schön, aber besser als Plus-Symbole oder ähnliches.

Hoffe das hilft, Phil

1
Phil

Ist eine klassische Baumansicht nicht das, was Sie hier brauchen?

Beispiel: http://cssglobe.com/lab/sitemap_styler/01/# und http://boagworld.com/demos/sitemap/#

Dies kommt Ihrer vorgeschlagenen Antwort sehr nahe, nur die Position der Schaltfläche [+] befindet sich links vom Link.

1
Bart Gijssens

Ich würde das Interaktionsmodell ändern und die Titel ihre Kinder erweitern/reduzieren lassen, während ich ein Symbol verwende, um dem Link zu folgen.

Es scheint, dass der größte Teil der Interaktion mit diesem Menü darin besteht, im Menü selbst zu navigieren, und diese Erkundung ist eine weitaus häufigere Aktion als das Folgen eines Links. Daher ist es sinnvoll, diese Aktion dem großen, leicht erreichbaren Element (dem Etikett) zuzuweisen. Sie können zwischen Eltern und kinderlosen Elementen derselben Stufe unterscheiden, indem Sie die Farbe codieren oder die Eltern fett oder einen anderen Formatierungstrick machen.

Jetzt kann das Element, das zur verknüpften Seite führt, rechts von der Beschriftung platziert werden. Um es visuell zu lösen, können diese alle in einer Spalte nach rechts ausgerichtet werden, ähnlich einem Inhaltsverzeichnis. Sie können dieser Spalte auch eine Bezeichnung geben, die ihnen hilft, die Bedeutung des Symbols zu verstehen. Die visuelle Ähnlichkeit mit einem Inhaltsverzeichnis verwendet auch eine Metapher, mit der sie wahrscheinlich vertraut sind, wobei die eigentliche Navigation auf der rechten Seite des Elements erfolgt (Seitenzahlen).

1

Abhängig von den Besonderheiten Ihres Designs können Sie möglicherweise das Baumansichtsmodell mit Layout verbessern:

Link 1             [+]
  Link 1.1
  Link 1.2
  Link 1.3         [-]
    Link 1.3.1
    Link 1.3.2
Non-link 2         [-]
  Link 2.1
  Link 2.2

Dies erhält das Klickziel des [+] vom Textlink entfernt (so dass er größer und leichter zu treffen ist, ohne versehentlich eine andere Aktion auszulösen) und sie ausrichtet, sodass ein Benutzer nicht suchen muss, um die Show-Funktion einer bestimmten Zeile zu finden.

Außerdem: Ich denke, Ihr Fall ohne Link wird zu Verwirrung bei den Benutzern führen, insbesondere bei älteren Benutzern. Ähnliche Elemente in Ihrer Folgenabschätzung sollten eine parallele Form haben. Wenn Sie auf ein Element der obersten Ebene klicken können, um zu dieser Seite zu navigieren, und wenn Sie nicht auf ein anderes Element klicken können, wird dies als fehlerhaft empfunden.

0
Drew Beck