Sidebar

Überblick Visual Style Guide

Auf dieser Seite... (ausblenden)

  1.   1.  Sidebar
    1.   1.1  Kurzbeschreibung
    2.   1.2  Aufbau & Elemente
    3.   1.3  Was nicht in die Sidebar gehört
    4.   1.4  Sonst noch zu beachten

1.  Sidebar

1.1  Kurzbeschreibung

Die Sidebar befindet sich an fester Position am linken Rand einer Stud.IP-Seite. Die Sidebar ist grundsätzlich in jeder Seite gesetzt und enthält mindestens das Schmuckbild und ist in der Regel aus einem oder mehreren Widgets aufgebaut.. In der Sidebar befinden sich innerhalb von diesen Widgets die Elemente der 3. Navigationsebene, Aktionen, Ansichtsoptionen, seiteninterne Suchmöglichkeiten und Exportfunktionen. Sofern diese Standardwidgets nicht passend sind, kann eine Seite weitere Widgets definieren. Die Sidebar besitzt zudem ein Schmuckbild im Kopfbereich, das Baisisicon des jeweiligen Bereiches zeigt und einen Avatar aufnehmen kann.

1.2  Aufbau & Elemente

Schmuckbild

Ds Schmuckbild dient der Orientierung und der Wiererkennbarkeit bestimmter Funktionen, da es in seiner Gestaltung auf dem Icon der jeweils angezeigten Funktion basiert. Es ist 520px breit und 120px hoch. Zu allen Basisfunktionen (bzw. aufbauend auf deren Icons) werden entsprechende Schmuckbild ausgeliefert. Grundsätzlich können Standorte diese Bilder tauschen, sollten aber darauf achten, dass Bildinhalt und Helligkeit zum umgebenden Design passen. Im Zweifel steht die Stud.IP-GUI-Gruppe bereit, weitere Bilder zu erstellen oder Tipps zu geben, wie man eigenen Bilder integrieren kann.

Typen von Widgets

  1. Navigation: Enthält automatisch die 3. Navigationsbene entsprechend der Stud.IP-Navigationsstruktur (ehemals 3. Navigationsebene unterhalb der Reiterleiste). Navigationspunkte springen auf andere Seiten aber bleiben idealerweise innerhalb eines Navigationskontextes (=Reitersystem). Die aktuell gewählte Seite wird mit einem blauen Pfeil markiert. Navigationspunkte zeigen keine Icons.
  2. Aktionen: Enthält Aktionen, die den Inhalt der aktuellen Seite beeinflussen. Aktionen öffnen grundsätzlich einen Dialog und verlassen somit nicht den aktuellen View, den der Nutzer sieht.
  3. Ansichten: Diese enthalten Ansichtsoptionen bzw. Filter, die den angezeigten Content auf der jeweiligen Seite einschränken. Die jeweils gewählte Ansicht bzw. der Filter ist mit einem gelben Pfeil markiert.
  4. Suche: Ein Such-Widget ist seitenspezifisch, ermöglicht also das Suchen innerhalb des Contents der Seite. Idealerweise gilt, dass eine Suche hier nur innerhalb des Contents filtert, den ich auf dieser Seite insgesamt sehen kann bzw. erreichen kann. Wenn der Content einer Seite selbst ein Suchergebnis liefert (z.B. bei allen Suchfunktionen in Stud.IP) muss diese Suche außerhalb der Sidebar, z.B. in einer Content-Box im Content-Bereich der Seite realisiert werden. Ein Suchwidget könnte dann theoretisch den gefunden Content dynamisch Einschränken, idealerweise ohne Reload der Seite
  5. Export: Hier werden alle Funktionen aufgenommen, die konkret eine Datei (z.B. PDF, XLS-Export, CSV-Datei) zum Download anbieten.

Grundsätzlich beginnen Seiten mit der Navigation und den Aktionen, dann folgende weitere Widgets (in der Regel Suche, Ansichten oder Export). Die weitere Widgets können je nach Nutzungshäufigkeit der jeweiligen Seite platziert werden, die ersten beiden Positionen sind in der Reihenfolge fest vorgegeben.

Weitere Typen von Widgets

Gelegentlich tauchen folgende Typen auf:

  • Einstellungen: Für Einstellungen, die sich direkt auf die Seite auswirken und schnell in der Sidebar vorgenommen werden sollen
  • Merkliste: Für das Zwischenspeichern von beliebigen Objekten

1.3  Was nicht in die Sidebar gehört

Hilfetexte: Bisher oft in der Infobox verwendet, gehören erklärende oder einleitende Texte über die Funktion einer Seite nicht mehr in die Sidebar. Der beste Platz dafür ist in dem Hilfe-Bereich am rechten Seitenrand, aus dem auch Touren gestartet werden können und der Link zum Hilfe-Wiki zu finden ist.

Formulare: Mit Ausnahme eines Eingabefeldes für das Such-Widget gehören Formulare nicht in die Sidebar.

1.4  Sonst noch zu beachten

  • Für die Sidebar gibt es eine feststehende API, die für die Erstellung verwendet werden muss.
  • Außer im Navigationswidget müssen in der Sidebar eindeutige und passende Icons in der Farbe blau verwendet werden und klickbar sein. Insbesondere Aktionen profitieren von der leichten Auffindbarkeit durch Icon + Text.

Letzte Änderung am June 21, 2017, at 03:36 PM von ckater.