Close
Open Search

U5: Navigationselemente

18. März 2022 10:37 – Peter Reichard

 

Anleitung für das Wiki
In diesem Wiki könnt ihr gemeinsam Lerninhalte erstellen. Jedes Wiki ist direkt und für jeden angemeldeten User editierbar. Wenn bereits bei vorherigen Prüfungen Wikis zum Thema (manchmal auch nur Teilgebiete streifend) erstellt wurden, so werden sie unten verlinkt. Ansonsten einfach hier diesen Eintrag überschreiben und mit entsprechenden Inhalten füllen.
Konkrete Aufgaben gemeinsam lösen oder besprechen könnt ihr zudem in der Lerngruppe.

https://mediencommunity.de/lerngruppe-mediengestalter-ap-sommer-2022

Bewertung: 
0
Bisher keine Bewertung

 

Kommentare

nairahtak wrote on 13. April 2022 - 13:13

Horizontale Navigation

= horizontales Listen-Menü

  • Vorteil: viel Freiheit für Gestaltung im Hauptsbereich
  • Nachteil: begrenzter Platz

 

Vertikale Navigation

= vertikales Listen-Menü

  • Vorteil: beliebig erweiterbar
  • Nachteil: Einschränkung bei der Gestaltung im Hauptbereich

 

Kombination aus vertikaler & horizontaler Navigation

  • primäre und sekundäre Navigation
  • wenn es mehr als 2 Ebenen gibt, wirkt es unübersichtlich

 

Drop-Down-Menü

= bei Berührung mit der Maus aufklappbar

  • platzsparende Möglichkeit
  • nicht zu viele Ebenen erstellen, da es sonst unübersichtlich wird
  • Nachteil: leichtes verrutschen in der Zeile und nicht in mobiler Version umsetzbar (Smartphone, Tablet)

 

Mouseover

  • hilft beim Navigieren - man erkennt besser, wo man sich gerade befindet
  • sorgt für Übersichtlichkeit

 

Toggle / Accordeon

= Aufklapp-Menü

  • aufklappbar mit Klick / Fingertipp

 

Breadcrumb-Navigation

  • Klickpfad-Navigation > je mehr, desto spezifischer
  • Reihe interner Links am oberen oder unteren Rand der Webseite
  • vorallem bei Online-Shops hilft es bei Orentierung

 

Tag-Cloud

= Schriftgröße bei Verlinkungen nach Beliebtheit

 

Sitemap

  • durch Links dargestellte klare Übersicht
  • einfache Navigationsmöglichkeit für den Überblick
  • Vorteil: schnelleres Crawlen vonSuchmaschinen

 

Karusell

= z.B.: Apple Website-Produkte, max. 5 Frames

  • Bilder, Produkte, HTML-Elemente
  • horizontal unbegrenzt (ringförmig) scrollbar
  • Voteil: mehr Inhalte auf wenig Raum
  • Nachteil: schnell übersehbar

 

Burger Menü

= mobil aufklappbares Menü versteckt hinter drei Strichen > platzsparend

 

Grid-View

  • Gitterdarstellung mit Flächen & Icons (z.B. am Smartphone / Tablet)

 

Slider-Menü

  • praktisch bei Responsive

 

OFF-Canvas-Menü

  • auch praktisch bei Responsive
  • zusätzliche "unsichtbare" Bereiche links & rechts
  • anze Fläche verschiebt sich bei Druck auf entsprechende Auswahlfläche

 

 

MOBILE NAVIGATIONSARTEN

  • Icons
  • Reiter
  • Toolbar
  • Balken
  • Karusell
  • Menü
  • Shoji
  • Suchfeld

> meistens werden mehrer Methoden miteinander kombiniert 

> Beachten: Responsive oder Platz

 

STRUKTURKONZEPTE

  • gute selbsterklärende Navigationsstruktur beachten
  • Seitensuchfunktion
  • visuelle Hervorhebungen beim Navigieren
  • einfache kurze Bezeichn ungen
  • kurze verständliche Unterteilungen
  • Erfolge beim Klicken (man sollte nicht zu viele Maus-Klicks haben um an das Ziel zu gelangen)
  • übersichtliche logische Reihenfolge
  • Übersichtlichkeit max. 5-7 Hauptspunkte
  • Navigation immer an der gleichen Stelle
  • Durchschnittlich 2 Zeilen und nicht mehr als 3 Wörter
Bild von ELNO
ELNO wrote on 18. April 2022 - 18:23

NAVIGATIONSTYPEN

  • Hauptnavigation
  • Subnavigation
  • Metanavigation
  •  Header-Navigation
  •  Footer-Navigation
  •  Home Button

______________________________________

AP 2022 Content:  https://mmm.page/elno.workshops
Workshop via Discord: https://discord.gg/yq8kDg6WWw
Mediencommunity: https://mediencommunity.de/users/elno

 

amber wrote on 28. April 2022 - 15:14

In einer alten Prüfungsaufgabe sollte man diese Begriffe erläutern. Ich hoffe ich habe alles richtig erklärt und auch verstanden. Bei einigen war ich mir etwas unsicher. Sonst gerne korrigieren!

 

Icons
= sind kleine visuelle Zeichen, die im Design digitaler Produkte sehr häufig eigesetzt werden. Seine Bedutung und Funktion muss meist erst erlernt werden. Hinter dem Icon liegt meist eine Datei, eine Anwednung oder ein Verzeichnis, das mit einem Klick auf das Icon geöffnet wird. Icons können Rubriken visuell unterstützen und unterstreichen.

Reiter
Reiter arbeiten mit Tabs und verdeutlichen auf diese Weise den Zusammenhang zwischen Inhalten und Navigationspunkt. Erinnern an Karteikarten.

Toolbar
= auch werkzeugleiste/Symbolleiste genannt
Ist eine senkrechte oder waagerechte Leiste, die Bilder oder Symbole/Icons enthält. Diese Symbole haben eine Verknüpfung zu einer bestimmten Funktion oder einem Befehl. Wenn ein Symbol angeklickt wird, wird der Befehl sofort ausgeführt.

Balken
Balken sind einfacher anzuklicken und leichter zu
sehen, als reiner Text. Balken finden sich z.B. im
Hamburger-Menü wieder.

Karusell
Ist eine horizontal angelegte Leiste mit Bildern oder
Elementen die automatisch oder durch horizontales
wischen oder klicken auf einen Pfeil links oder rechts ihr Inhalt ändern.

Menü
= Wird vorallem bei größeren Websites verwendet, die aus vielen Screen bestehen.
Zur Navigation würden entsprechend viele Buttons benötigt, die viel Platz beanspruchen und optisch nicht ansprechend sind.
Abhilfe kann in diesem Fall durch eine Menüführung geschaffen werden. Die Bedienung eines Menüs ist allen Computernutzern vertraut, da sich sämtliche Programme dieser Technik bedienen. Sie lassen sich deshalb ohne zusätzliche Erklärungen auch auf Webseiten nutzen.

Suchfeld
Nach Eingabe eines Suchbegriffs wird in einer Datenbank nach „Treffern“ gesucht, die dann Angezeit werden. Den richtigen Suchbegriff vorausgesetzt, führt dise Art der Navigation schnellstmöglich zum Ziel.
• bei fehlender oder unpräziser Eingabe führen die Ergebnisse zu einer Sackgasse
• sollte nur Ergänzung zur Navigationsleiste dienen

Mouseover (= Rollover)
bezeichnet eine spezielle Technik bei der Webseiten-
Gestaltung, die bei verschiedenen Elementen wie Text, Grafik, Button und Banner zum Einsatz kommen kann.
Sobald der Nutzer z.B. mit dem Maus-Zeiger über ein
mit dem Mouse Over Effekt versehenes Element fährt, verändert sich dieses. Auf diese Weise kann z.B. eine nicht sichtbare Grafik erscheinen, sich ein Werbemittel vergrößern oder eine Farbänderung erfolgen.
• hilft beim Navigieren und sorgt für Übersichtlichkeit
• sollte immer mit ausreichend Kontrast angelegt sein