Tipps zur Vereinfachung Ihrer Site-Navigation

Was bei Projekten passiert, wenn der falsche Weg eingeschlagen ist, ist, dass wir uns normalerweise zurückziehen, selbst wenn wir uns nicht in der richtigen Richtung fühlen, in die wir gehen wollen auf dem falschen Weg investiert.

Dieses Zögern muss überwunden werden. Wenn eine schlechte Navigationsstruktur Usability-Probleme mit sich bringt (wie in der Beispiel-Site für diesen Artikel), müssen wir diese falsche Struktur korrigieren, anstatt die Site weiterzuentwickeln.

Wenn wir dies nicht tun, wird es schwieriger, den Schaden später zu reparieren. Bei der Gestaltung oder Neugestaltung der Navigation müssen wir uns zuerst an die Bedürfnisse des Benutzers erinnern.

Komplexe Navigationsstrukturen sind selten notwendig. Wir glauben einfach, dass sie es sind, wenn wir sie zuerst erstellen. Sie müssen sich immer fragen, ob es nicht einen einfacheren Weg gibt, um dasselbe Ziel zu erreichen.

Wenn es einen einfacheren Weg gibt, müssen Sie ihn verwenden, denn alles andere, egal wie eindrucksvoll es aussieht, kostet Sie mehr, als Sie auf lange Sicht davon profitieren. In diesem Artikel verwenden wir ein Live-Website-Beispiel, um eine komplexe Navigationsstruktur zu vereinfachen, um die Benutzerfreundlichkeit zu verbessern.

Schritt 1: Überprüfen Sie das vorhandene Design

Das Problem, mit dem wir beginnen, ist, dass das vorhandene Navigationsdesign übermäßig komplex ist. Im Fall der Beispiel-Site, die wir für dieses Projekt neu entwickeln, diese Komplexität schien notwendig, aber nur weil ein besserer Weg nicht sofort offensichtlich war.

Zunächst hilft es zu verstehen, warum die ursprüngliche Navigation überhaupt komplex war. Die Themenseite ist eine Tutorial-Site, und der Inhalt der Tutorials bezieht sich auf ein ziemlich kompliziertes System.

Da die Site einen Live-Emulator des Fachsystems verwendet, über den der Student lernen kann, bedeutet dies, dass wir nicht von Seite zu Seite navigieren können (oder sollten). Wir müssen den Inhalt anzeigen, indem wir ihn inline einfügen, um das System nicht ständig neu zu laden und den Systemstatus speichern zu müssen.

Navigationslinks werden daher nicht immer auf physische Seiten umgeleitet, und die meisten werden auf virtuelle Seiten umgeleitet. Navigation kann in diesem Fall als in Lektionen, Kapitel und Themen unterteilt betrachtet werden.

Die obere Navigationsleiste ist bereits einfach genug, obwohl sie mit einem aktualisierten Look auskommen könnte. Wenn der Benutzer zum ersten Mal auf der Website ankommt, wird das Menü in der linken Spalte angezeigt.

Der Benutzer muss eine Lektion aus diesem Menü auswählen, bevor er die einzelnen Lektionskapitel und -themen sehen kann, wie in Abb. 2 gezeigt.

Diese Struktur ist zu komplex, da die Navigation nicht auf diese Weise aufgeteilt werden muss (der Benutzer kann keine Navigationselemente der obersten Ebene ohne einen zusätzlichen Navigationsschritt auswählen), und die numerische Paginierung ist für die Themenauswahl nicht ideal.

Es ist jedoch leicht zu verstehen, warum die Navigation ursprünglich so entworfen wurde. Das emulierte Gerät wurde zuerst erstellt und hatte eine bestimmte Größe, die durch den SVG-Code bestimmt wurde.

Wenn Sie die Größe des Codes vor der universellen Browser-Unterstützung für die CSS3-Zoomfunktion ändern, hätte dies den gesamten JavaScript-Code (über 10,000-Zeilen) geändert, was eine Verschwendung gewesen wäre.

Das ursprüngliche Navigationsdesign ist also ein Versuch, horizontalen Platz zu sparen, damit sowohl die Lektion als auch das emulierte Gerät gleichzeitig auf den Bildschirm passen können.

Nun, da wir den Fehler in der vorhandenen Navigationsstruktur kennen, wird die Planung eines neuen Navigationsdesigns im nächsten Schritt vereinfacht.

Schritt 2: Planen Sie ein neues Design

Da CSS3 Zoom jetzt in den gängigsten Desktop-Browsern konsistenter (aber immer noch nicht ausgezeichnet) unterstützt wird, kann das emulierte Gerät auf eine kleinere Größe gezoomt werden, ohne dass umfangreiche Neucodierungen erforderlich sind.

Wenn dies richtig gemacht wird, steht links mehr Platz zur Verfügung, sodass wir eine zusätzliche Spalte in der Mitte haben können.

Die wirklich offensichtliche Änderung besteht darin, dass der Unterrichtskörper vollständig aus dem Navigationsbereich entfernt wurde. Dies ist genau so, wie er sein sollte.

Diese Änderung ermöglicht mehr Flexibilität im Navigationssystem und bietet mehr Platz für die Anzeige des Unterrichtskörpers.

Schritt 3: Implementieren Sie den Plan

Denken Sie daran, dass jede Lektion mehrere Kapitel und jedes Kapitel mehrere Themen haben kann. Wie gehen wir damit um? Der einfachste Weg besteht darin, einen zusammenklappbaren Stapel von Menüelementen zu erstellen. Durch Erweitern einer Lektion werden die Kapitel und durch das Erweitern eines Kapitels die Themen angezeigt.

In fig 4 können Sie die nicht erweiterte Liste der Lektionen im linken Menü sehen.

Beachten Sie auch die notwendige Hinzufügung einer Navigationsschaltfläche im Stundenblock. Dadurch muss der Benutzer nicht immer das Navigationsmenü verwenden, um zum nächsten oder vorherigen Thema des Kapitels zu springen.

Dies wird dem Benutzer angezeigt, wenn er im linken Menü eine Lektion auswählt:

Diese etwas kryptisch aussehenden Links mögen Ihnen nicht viel bedeuten, aber für jemanden, der zum Flieger ausgebildet wird, sind sie selbsterklärend. Wenn Sie die Liste auf die dritte Ebene erweitern, werden die einzelnen Themenseiten angezeigt (siehe Abbildung 6).

Wenn die Liste der Links wächst, wird der Seite eine vertikale Bildlaufleiste hinzugefügt. Wir können die Bildlaufleiste mit dem Menü selbst verbinden, indem Sie eine feste Höhe für das Menü festlegen.

Technisches Zeug

Zu den im obigen Beispiel verwendeten externen Skripts, CSS-Frameworks und Schriftarten gehören:

  • Bootstrap v3.3.7
  • Schrift Awesome v4.7.0
  • Google Fonts: Pompiere, Konzert eins, Varela-Runde

Dies sind keineswegs die nur So etwas kann funktionieren, aber sie wurden in diesem Projekt verwendet, um schnell eine web-sichere Lösung zu erreichen, ohne zu viel Code oder zusätzliche Markierungen zu benötigen.

Der Konstruktor für den Menüprototyp ist bemerkenswert einfach, wenn Sie Bootstrap als CSS-Framework verwenden.

Auf der ersten Einzugsebene erstellen Sie ein div für den Navigationsbereich (hier mit der ID von "leftSide") und eine Klasse div darin, um festzulegen, welche Eigenschaften das enthaltende Leerzeichen haben soll. In diesem Fall verwenden wir nur die Standardklasse "well", die in Bootstrap bereits vordefiniert ist (fig 7).

In dieser Gruppe fügen wir auf der dritten Einzugsebene ein Paar Absätze zum Ausblenden und Anzeigen des Menüs hinzu (fig 8). Die Anzeigeeigenschaften eines jeden sind wichtig, da die Links als Kippschalter fungieren können.

Wie Sie sehen, werden durch Klicken auf die Links JavaScript-Funktionen zum Ausblenden oder Anzeigen der Spalte ausgelöst. In diesem Fall bedeutet "Ausblenden" nur das Entfernen des Inhalts und das Verkleinern der Spalte, wie in Abb. 9 gezeigt.

Die Funktion zum Ausblenden bewirkt, dass die linke Spalte auf 40px Breite verkleinert wird (gerade genug, um das Symbol anzuzeigen, das zum Erweitern der Normalität benötigt wird) und die Breite der mittleren Spalte um 50% des Ansichtsfensters erweitert wird. Bei der Anzeige wird alles wieder so dargestellt, wie es ursprünglich war.

Jetzt müssen wir einen Container für die Menüelemente erstellen.

Fügen Sie dann das Navigationselement hinzu, in diesem Fall die Anzeige „Anweisungen“.

Das Minimieren des Elements wird von Bootstraps eigenem CSS und JavaScript ausgeführt. Daher müssen Sie nur Funktionen hinzufügen, um den Inhalt der mittleren Spalte zu ändern, wenn Sie auf ein Element klicken (l1s1 und l1s2).

Diese werden von einem externen Skript behandelt, jedoch der Vollständigkeit halber in fig 12 gezeigt.

Zurück zum Menü in unserer HTML-Datei. Ein Zeilenumbruch wird als einfaches Trennzeichen hinzugefügt. Die verbleibenden Elemente werden als Reihe geschachtelter Listen hinzugefügt. Der anfängliche Konstruktor wird in Abbildung 13 gezeigt.

Das Hinzufügen der restlichen Menüpunkte ist ab diesem Zeitpunkt sehr einfach. Der Kürze halber wird nur das Hinzufügen der ersten Artikelgruppe angezeigt, die übrigen Artikelgruppen werden jedoch auf dieselbe Weise hinzugefügt.

Alle Elemente müssen wie gezeigt zwischen dem Listen-Tag-Paar hinzugefügt werden.

Das nächste Menüelement wird hinzugefügt, indem eine neue Zeile in Zeile 75 eingefügt wird und dann genau das gleiche Verfahren für das Element T1-L2 usw. befolgt wird.

Nachdem alle Elemente (Kapitel) von T1-L1 bis T1-L6 hinzugefügt wurden, fügen wir einen neuen Zeilenumbruch hinzu und beginnen dann mit einer neuen Liste (als Kategorie T2), bis das Menü vollständig ist.

Der letzte Schritt unserer Navigationsmenüüberarbeitung besteht darin, ein Skript hinzuzufügen, um sicherzustellen, dass unsere Menüelemente zunächst nicht angezeigt werden.

Wenn Ihre Website nicht die gewünschten Ergebnisse erzielt, kann dies ein Grund dafür sein, dass Ihr Navigationssystem komplexer ist, als es sollte.

Die Verringerung der Menükomplexität ist ein wichtiger Schritt zur Verbesserung der Benutzerfreundlichkeit der Website. Indem Sie Benutzern den Einstieg in komplexe Systeme erleichtern, werden Sie von mehr wiederkehrenden Besuchern und möglicherweise mehr Empfehlungen belohnt.

Bogdan Rancea

Bogdan ist Gründungsmitglied von Inspired Mag und hat in diesem Zeitraum fast 6-Jahre Erfahrung gesammelt. In seiner Freizeit studiert er gern klassische Musik und erforscht die bildende Kunst. Er ist auch ziemlich besessen von Fixies. Er besitzt bereits 5.