• 3.1

    • Lernschritt 3.1: Navigationsstrukturen

    •   Ich kann...

      In diesem Lernthema lerne ich Folgendes:

      Ich kann

      • die unterschiedlichen Navigationsstrukturen bestimmen und vergleichen.
      • eine Navigationsstruktur entwerfen.
      • Information lesen verdichten und mit einer Aufgabe verknüpft zusammen bringen.
      • zielorientiert denken.
    • Arbeitsauftrag 1: Navigationsstruktur entwerfen

        Einzelarbeit

      Entwickeln Sie eine Navigationsstruktur für die Smood-Webanwendung.

      Entscheiden Sie welche der Navigationsstrukturen zu dem Vorhaben passt. Entwerfen Sie eine Visualisierung als Diagramm. Setzen Sie Ihren Entwurf als Scribbel frei Hand auf einem Din A4-Format um. Verwenden Sie die Seiten:

      • Home
      • Angebote
      • Preis
      • Login und Registrieren
      • Studierende
      • Familien
      • Probemonat
      • Webplayer


        90 Minuten

      Tipp: Unten finden Sie Erklärungen und Beispiele für die schematische Darstellung von Navigationsstrukturen.

      Reichen Sie Ihre Navigationsstruktur als Teil Ihres Pflichtenhefts hier ein. 

    • Arbeitsauftrag 1: Navigationsstruktur entwerfen

        Einzelarbeit

      Entwickeln Sie eine Navigationsstruktur für die Smood-Webanwendung.

      Entscheiden Sie welche der Navigationsstrukturen zu dem Vorhaben passt. Entwerfen Sie eine Visualisierung als Diagramm. Setzen Sie Ihren Entwurf als Scribbel frei Hand auf einem Din A4-Format um. Übertragen Sie Ihren Entwurf in eine digitale Darstellung in einer geeigneten Layout-Software um. 

      Verwenden Sie die Seiten: 

      • Home
      • Angebote
      • Preis
      • Login und Registrieren
      • Studierende
      • Familien
      • Probemonat
      • Webplayer

       90 Minuten

      Tipp: Unten finden Sie Erklärungen und Beispiele für die schematische Darstellung von Navigationsstrukturen. 

      Reichen Sie Ihre Navigationsstruktur als Teil Ihres Pflichtenhefts hier ein.

    • Aufgabe 1: Navigationsstruktur entwerfen

        Einzelarbeit

      Entwickeln Sie eine Navigationsstruktur für die Smood-Webanwendung. Entscheiden Sie welche der Navigationsstrukturen zu dem Vorhaben passt. Entwerfen Sie eine Visualisierung als Diagramm. 

      Setzen Sie Ihren Entwurf als Scribbel frei Hand auf einem Din A4-Format um. Übertragen Sie Ihren Entwurf in eine digitale Darstellung in einer geeigneten Layout-Software um. Verwenden Sie mindestens 8 Seiten, die Sie interessant und wichtig finden.

       90 Minuten

      Tipp: Unten finden Sie Erklärungen und Beispiele für die schematische Darstellung von Navigationsstrukturen. 

      Reichen Sie Ihre Navigationsstruktur als Teil Ihres Pflichtenhefts hier ein. 

    • Es gibt drei übergeordneten Systeme für Navigationsstrukturen: die Baumstruktur, die linearen Struktur sowie die Netzstruktur:

    • Beispiel für eine schematische Darstellung einer Baumstruktur:

       

      Die Baumstruktur ist eine hierarchische Navigationsform, die wie ein Baum aufgebaut ist, mit einem zentralen Knoten (Wurzel) und sich verzweigenden Zweigen (Unterknoten). Jeder Zweig repräsentiert eine Kategorie oder Unterkategorie, und die Benutzer können sich schrittweise durch die Hierarchie bewegen. 

      Dies fördert eine klare Ordnung und Kategorisierung von Informationen und bietet gleichzeitig individuelle Freiheit in den Entscheidungsmöglichkeiten.

    • Beispiel für eine schematische Darstellung einer linearen Struktur: 

       

      Eine lineare Navigationsstruktur ist eine einfache, schrittweise Abfolge von Informationen, bei die Benutzerin, der Benutzer von einer Seite oder Abschnitt zur nächsten fortschreiten.

      Es gibt keine verzweigenden Pfade, und die Navigation erfolgt in einer geraden Linie. Dies eignet sich gut für Inhalte, die in einer bestimmten Reihenfolge präsentiert werden müssen, z. B. bei einem Tutorial oder einer Story. Beispiel: Ein mehrstufiger Formularprozess, bei dem der Benutzer durch aufeinanderfolgende Schritte geführt wird.

      Bei dieser Struktur werden die Benutzerinnen und Benutzer an der Struktur entlang geführt, haben so die höchstmögliche Übersicht und Ordnung. Die lineare Struktur bietet jedoch keine individuelle Entscheidungsmöglichkeit oder -wahl. Manche Webseiten werden auf einem einzigen Screen angelegt, alle Informationen sind auf der einen Seite untereinander angelegt, das wird „One-Page-Design“ oder „Single-Page-Design“ genannt. Auch hier folgt die Navigation dem linearen Prinzip, in dem man auf mobilen Geräten mit dem Finger oder in Browser mit den Maus durch die Inhalte linear nach unten scrollt.

       

    • Beispiel für eine schematische Darstellung einer Netzstruktur:

       

      Die Netzstruktur ist eine nicht-lineare Navigationsform, bei der Inhalte über verschiedene Verbindungen miteinander verknüpft sind. Benutzerinnen und Benutzer können zwischen verschiedenen Seiten oder Abschnitten springen, ohne einer festen Reihenfolge zu folgen. Dies bietet Flexibilität und ermöglicht es Benutzerinnen und Benutzern, direkt zu den für sie relevanten Informationen zu gelangen, zum Beispiel die Webseite Wikipedia. Die Benutzerinnen und Benutzern haben die höchstmögliche individuelle Freiheit zwischen verschiedenen Themen oder Seiten zu wechseln.

    • Kombinierte Strukturen

      Diese Strukturen können je nach den Anforderungen einer Website, Anwendung oder Plattform kombiniert oder angepasst werden, um eine optimale Benutzererfahrung zu gewährleisten. Diese Struktur bietet den Benutzerinnen und Benutzer wenig Ordnung, Orientierung und Übersichtlichkeit. 

    • ___________________________________________________

    • Reflexion

Herausgeber: Land Baden-Württemberg, vertreten durch das Zentrum für Schulqualität und Lehrerbildung (ZSL), Heilbronner Straße 314, 70469 Stuttgart, Telefon 0711/21859-0, poststelle@zsl.kv.bwl.de
Verantwortlich im Sinne des Presserechts: ZSL, Irmgard Mühlhuber, Ref. 24 "Digitalisierung, Medienbildung", Heilbronner Straße 314, 70469 Stuttgart, Telefon 0711/21859-240, digitalebildung@zsl.kv.bwl.de
Kontakt zum/r behördlichen Datenschutzbeauftragte/n: datenschutz@zsl.kv.bwl.de