Seitenelemente

Header

Hauptnavigation

Die Hauptnavigation dient dem Benutzer primär dazu, zwischen den verschiedenen LOGICHECK-SaaS-Diensten zu wechseln. In der linken Ecke wird das Kundenlogo abgebildet. Dieses wird in einer Negativ-Fassung (also weiß) verwendet, damit es sich optisch gut integriert; es ist nicht verlinkt. Im rechten Bereich finden sich Buttons, mit denen Nutzer die Neuigkeiten oder die Submenüs Hilfe oder User einblenden können.

Die Inhaltsbreite der Navigation beträgt feste 1260px (basierend auf Allianz-Ergonomie-Vorgaben).

Die Hauptnavigation wird nicht am oberen Browserrand gefixed, erscheint aber wieder beim Hochscrollen (vgl. onsbuiten.nl).

Flyout „Neuigkeiten“

Hier werden die letzten drei Neuigkeiten angezeigt. So kann der Nutzer auch wichtige Meldungen sehen, die bereits älteren Datums sind. Zur Besserung zeitlichen Einordnung wird das Erscheinungsdatum der Meldung mit ausgespielt.

Button „Neuigkeiten“

Dieser Button gibt es in zwei Ausführungen: Einmal neutral und einmal mit Indikation „neue Nachricht“. Der Nutzer sollte damit auf einen Blick sehen, wenn es eine Benachrichtigung gibt. Hat der Benutzer die Nachricht gelesen, wird der Status wieder auf neutral gesetzt.

Metanavigation

Die Metanavigation erhält nun weitere Unterseiten. Unter anderem wird dort das Reporting ungerbracht. Die Optik orientiert sich am Funktionsmenü.

Schadennummernleiste

Befindet sich der Benutzer in der Fallbearbeitung, erscheint unterhalb der Hauptnavigation die Schadennummernleiste: Diese zeigt neben der gerade bearbeiteten Schadennummer auch die derzeit aktive Funktion an. Ein kleines „Badge“ zeigt den auf drei Buchstaben abgekürzte Funktionsbereich an, zu dem sich die gerade aktive Funktion zuordnen lässt (also etwa „Privat genutzte Fahrzeuge“). Mit einem Klick auf das „Hamburger-Icon“ erscheint das „Funktion wechseln“-Menü. Wird ein historischer Fall bearbeitet, erscheint vor der Schadennummer ein entsprechendes Status-Icon. Auch beginnt an dieser Stelle die so genannte Leitlinie; mehr Infos weiter unten. Weiterhin beherbergt diese Sektion auch den Fortschrittsbalken, der gleich näher beschrieben wird. Die Schadennummernleiste ist am oberen Seitenrand fixiert. Der eigentliche Seiteninhalt läuft beim Scrollen darunter durch, unter dem Bereich liegt eine (gedachte) abdeckende, weiße Fläche.

Menü „Funktion wechseln“

Mit diesem Menü wird dem Benutzer die Möglichkeit gegeben, innerhalb eines Falles die Funktion zu wechseln. Die aktuell ausgewählte Funktion wird mit dem grünen Pfeil gekennzeichnet. Mit dem Link „zur Einstiegsseite“ wird dem User die Möglichkeit gegeben, wieder auf die Startseite zu wechseln.

Werte, die bis zum Zeitpunkt des Wechsels eingegeben wurden, werden automatisch gespeichert. Das System bestätigt dies mit einer entsprechenden Snackbar-Meldung.

Fortschrittsbalken

Dieses Element gibt dem Nutzer eine optische Orientierung zum Fortschritt seiner Fallbearbeitung. In der Funktion „privat genutzte Fahrzeuge“ wird der Balken in zwei Teilen dargestellt, die für die beiden Einheiten „Angaben aus Rechnung“ und „Angaben aus Schadenakte“ stehen. Fährt man über den Fortschrittsbalken, ändert sich sein Aussehen, indem die zwei Balken in die einzelnen Schritte unterteil werden. Ein Tooltip erscheint an dem Bereich, auf dem sich der Cursor gerade befindet. Mit einem Klick kann der Nutzer in den Bereich springen.

Die Mouse-Over-Funktion wird erst aktiv, sobald der Nutzer alle Pflichtfelder ausgefüllt hat.

Inhaltsbereich

Leitlinie

Die so genannte Leitlinie dient als Führung durch die Fallbearbeitung und bietet einen optischen Anker für die einzelnen Schritte bei der Bearbeitung. Sie beginnt bei der Schadennummer und endet bei der Überschrift des letzten Bearbeitungsschrittes bzw. dem „Bearbeitung starten“-Button (Startseite).

Tab-Menüs

Die genauen Stylings werden im Bereich „Basiselemente > Tab-Menüs“ erläutert.

Horizontal

Um inhaltlich zusammengehörige „Entweder-Oder“-Abfragen platzsparend zusammenzufassen, nutzen wir horizontale Tabs. Damit sollen auch Kaskaden von Checkboxen und Radio-Buttons vermieden werden. Die Navi-Punkte dienen auch als ein Art Headline für den jeweiligen Unterbereich. Sie werden etwa bei der Eingabe der Strecke oder bei der Fahrzeugklassifizierung benutzt.

Vertikal

Diese Navigationselement kommt im Inhaltsbereich im Bereich „Kunden-Cockpit“ zum Einsatz. Die Ankerlinks sorgen für eine Clusterung der Einstellmöglichkeiten und den direkt Zugriff auf den jeweiligen Bereich. Dabei wird das Menü beim Scrollen oben gefixed, um gerade auf langen Seiten die Übersicht zu behaltne und in andere Bereiche springen zu können.

Popups

Popups werden so sparsam wie nötig eingesetzt, da sie den User-Flow bewusst stören und deshalb von ihrerer Wichtigkeit her gerechtfertigt sein sollen. Sie werden für folgende Gelegenheiten genutzt:

• Warnmeldungen (etwa „Bereits angelegter Vorgang“)
• vom System vorgeschlagene Funktionswechsel (etwa bei „Schadenminderungspflicht
• Darstellung von Inhalten, die gerade nicht in den Kontext passen (etwa Vorgangsergebnissen bei bereits bearbeiteten Fällen
• Fehlermeldungen

Aufbau

Zum Aufbau eines Popups werden die allgemein gültigen Abstände benutzt. Auch sollte eines der gängigen Raster angewendet werden. Weitere Vermassungen sind hier vermerkt.

Bei Hinweis-Popups oder Fehlermeldungen wird die Headline entsprechend angepasst und ein Icon vorangestellt:

Sonderfall „Draggable Window“

Bei der telefonischen Beratung gibt es die Möglichkeit, eine Bemerkung zu erfassen. Das wird über ein Popup gelöst, das der Nutzer frei auf dem Screen positionieren kann. Damit es kompakt bleibt und nicht zu viel Inhalt verdeckt, werden die Abstände innerhalb des Popups etwas komprimiert. Auch die Legende der Tastatur-Kurzbefehle wird über ein solches Element abgebildet.

Inline Messages

Inline Messages bieten eine Möglichkeit, den Benutzer darüber zu informieren, dass etwas Wichtiges passiert ist oder eine bestimmte Aktion ausgeführt werden muss. Es wird unterschieden zwischen normalen Meldungen und Nachrichten/Hinweise in einer Box. Je nach Art oder Wichtigkeit der Meldung ist ein entsprechendes Icon der Zeile bzw. der Überschrift vorangestellt.

Hinweis-Boxen

Fallen Hinweise bzw. Hilfestellungen für den Benutzer länger aus, werden sie in einer Box im Inhaltsbereich positioniert. Das weiße Icon auf petrolfarbenem Hintergrund deutet darauf hin, dass sich um einen Hinweis zur Bearbeitung handelt, die Headline umschreibt, um was es im Hinweis geht.

Hinweise zu regionalen Gerichtsurteilen

Oft betreffen regionale Gerichtsurteile ganz konkrete Bereiche, etwa die Eigenbetriebskosten. Liegt eine Information dazu vor, wird dem Nutzer an der passenden Stelle ein wichtiger Hinweis eingespielt. So kann er dies bei der Bearbeitung direkt berücksichtigen und wird nicht durch ein zusätzliches Fenster in seinem Workflow gestört.

„Gesperrte“ Inhalte

Sollen Bereiche vor der (erneuten) Bearbeitung durch den User gesperrt werden, etwa die Klassifizierung des Mietfahrzeuges bei Aufruf eines historischen Falls, wird der betroffene Bereich optisch gekennzeichnet:

• Die Leitlinie wird im Bereich orange eingefärbt und wird 2px breit.
• Zentriert auf der Leitlinie erscheint ein Schloss-Icon, dass die Sperrung visualisiert.
• Der Inhalt wird mit einer Opacity von 0.4 leicht ausgegraut.
• Wichtig ist der mit dem orangefarbenen !-Icon versehenen Hinweis: Er soll dem Nutzer erklären, wie er die Inhalte ändern kann. Bei Bedarf kann dem Nutzer auch erklärt werden, weshalb die Bearbeitung gesperrt wurde (im dargestellten Beispiel ist es nicht erforderlich).

Tooltipps

Tooltips werden neben dem Mauszeiger angezeigt, wenn dieser über ein Element mit Tooltip fährt. Tooltips werden nur für Elemente ohne Beschriftung oder zur Anzeige zusätzlicher Informationen angezeigt. Wir unterschieden zwischen Standard-Tooltipps, Funktions-Tooltipps, Info-Tooltipps und Textbaustein-Tooltipps.

Standard-Tooltipps

Dienen dazu, Buttons für einfache Standard-Funktionen (etwa „Bearbeiten“ oder „Ansehen“) unterstützend zu beschreiben. Dazu sollte ein Wort genügen. Technisch wird hier auf den ungestylten Browser-Standard zurückgegriffen. Bei umfangreicheren Beschreibungen werden Funktions-Tooltipps benutzt.

Funktions-Tooltipps

Sind Funktionen produktspezifischer Natur und müssen umfangreicher beschrieben werden, werden gestaltete Tooltipps genutzt.

Info-Tooltipps

Dienen dazu, dem User Hilfestellungen zu geben. Sie kommen dann zum Einsatz, wenn die Hinweise nicht von hoher Priorität sind und mengenmäßig mehr Platz benötigen als ein- oder mehrzeilige Inline Messages.

Textbaustein-Tooltipps

Kommen etwa bei der Sektion „Nebenkosten“ zum Einsatz und zeigen den Textbaustein, der bei einer Nebenkostenposition in den Prüfbericht eingesetzt wird.

Scrollbars

Seitenleiste rechts

Ergebnis-Box

Die Ergebnis-Box enthält das Endergebnis einer Fall-Prüfung und variiert je nach Funktion (etwa mit einer Abrechnungsempfehlung bei einer Rechnungsprüfung). Unter „Vorgang abschließen“ hat der Nutzer die Möglichkeit, den Prüfbericht anzusehen und/oder an die Schadenakte zu senden sowie direkt einen neuen Vorgang zu starten.

Der Nutzer bekommt erst konkrete Ergebnisse angezeigt, sobald er alle zur Berechnung notwendigen Daten eingeben hat. Dieses wird solange in der Box angezeigt; die Buttons zum Prübericht sind solange noch deaktiviert.

Liste der eingegebenen Vorgangsdaten

Die vom Benutzer getätigten Eingaben werden in einem separaten Fenster (draggable window) abgebildet. Der Nutzer kann dies in der Größe und Position selbst verändern. Mit einem Klick auf das entsprechende Icon kann er die Werte in die Zwischenablage kopieren.

Das Fenster wird durch einen Klick auf „Eingegebene Vorgangsdaten“, positioniert auf einer Fläche in der rechte Sidebar, aktiviert. Hat der Nutzer noch nicht genügend Eingaben getätigt, wird der Link als „disabled“ dargestellt. Mit jeder validierten Eingabe wird in jeder Sektion das Ergebnis in die Ergebnisliste übernommen.

Die Überschriften der Sektionen sind gleichzeitig auch Links/Sprungmarken, um zu den entsprechenden Sektionen zu springen.

Boxen für übergeordnete Funktionen

Werden im Moment nur in der verbindlichen Beratung eingesetzt. Sie enthalten einen Link zur Funktion „Bemerkungen erfassen“.

Footer

Der Footer bildet den Abschluss der Seite. Neben der optischen Abgrenzung bietet er dem Benutzer praktische Funktionen und Infos. Neben der Hotline (Nummer und Mail-Adresse verlinkt) hat er die Möglichkeit, die technischen Daten einzusehen und per Klick direkt in die Zwischenablage zu kopieren, um die Info direkt per Mail weiterleiten zu können. Außerdem gibt es noch Buttons, die zum Handbuch (PDF) und zu LOGILEARN verlinken.

Logos

Kundenlogos werden in einer Negativ-Variante (also einfarbig weiß) dargestellt.

Die Darstellung der Produktlogos wird im Kapitel „Seitenelemente > Hauptnavigation“ behandelt.

Das LOGICHECK-Logo wird im Footer vollfarbig als Absender verwendet. Auf dem Login-Screen wird das Logo negativ abgebildet.