Klickwege

Maus wird von links nach rechts gelenkt, um die Anwendung inhaltlich zu steuern (entspricht dem LTR-Lesefluss)

Navigationselemente

Durch eine vertikale Anordnung der Navigationselemente in der Desktop-Version kann eine Tastatursteuerung logisch implementiert werden. (Bspw.: Alt + Num-Position)

Im Gegensatz zu Tab- bzw. Registerkarten-Navigation, müssen keine optischen Einschränkungen in Kauf genommen werden müssen, auch wenn eine große Menge an Navigationselementen notwendig sind.

Navigationselemente können mit einer Zusatzinformation ausgestattet werden. (Siehe Anzahl der Anmeldungen bei einem Teilnehmer)

Ebenen

Zwei zusammenhängende Navigationsebenen legen die Grundstruktur fest.

Dieses Navigationsprinzip wird nicht über Tabs oder andere Verzweigungen aufgeweicht

Buttons zur Steuerung von Formularen sind immer oben Rechts angeordnet. Diese Buttons haben eine einheitliche Anordnung (Reihenfolge: Abbrechen, Speichern)

Anwendungsrahmen

Alle "übergeortneten" Funktionen befinden sich im Kopf.

Der "Footer" wird nicht durch eine zusätzliche Navigation aufgeweicht

Layout / Design Richtlinien

Wir verzichten auf Farbverläufe und "verspielte" Symbole

Das Design wird "zeitlos" gestaltet werden. Dies erhöht die Akzeptanz und Lebensdauer

Inhalts- und Maskengestaltung / -Anordnung

Die Elemente im Inhaltsbereich können einem zwei- oder ein spaltigem Aufbau folgen. Für Widescreens ist es möglich eine dritte Spalte einzufügen, dies muss im Team entschieden werden

Alle darzustellenden Elemente (Kurse, Teilnehmer, Mitarbeiter, Räume) haben einen einheitlichen Aufbau

Listendarstellung

Wir bieten zwei Listen-Typen.

Variante 1: "fastlist" - Ist dafür zuständig Inhalte maximal transparent darzustellen und schnell bedient zu werden. Der Leitgedanke hierbei: User sucht genau ein Element

Variante 2: "extendedlist" - Bietet zusätzliche Verwaltungsfunktionen. Der Leitgedanke hierbei: User sucht mehrere Elemente für eine Sammelaktion

Sehhilfen und Berücksichtigung von Sehschwächen

Ein zwei spaltiger Inhaltsaufbau wird automatisch bei einem hohen Zoomlevel auf ein einspaltigen Aufbau umgebrochen

Die Navigation ist in einem dunkelen Farbton gehalten. Dies ist nützlich im Hinblick auf den Kontrast der Anwendung und wird bei längerem Arbeiten vom menschlichen Auge "ausgeblendet". (Leinwand-Efffekt)

Alle Farben im System sind mittels einem hohen Farbkontrast auch mit einer Rotgrün-Schwäche zu unterscheiden.

Wir verwenden wiederkehrende Farben aus einem festgelegten Katalog und unterscheiden bei Systemnachrichten in Info, Error, Warnung und Erfolg

Die Farbgebung der Schaltflächen ist nach dem Hauptnutzen-Prinzip vergeben (Abbrechen grau, Speichern blau)

Cross-Browser Kompatibiliät

Kompatible Browser: IE8, IE9, IE10, Firefox, Safari, Opera, Chrome

Achtung: Um eine hohe Browser-Kompatibilität im weiteren Projektverlauf zu gewährleisten empfiehlt es sich weitestgehend auf dynamische Inhalte zu verzichten (Stichwort: Ajax, Javascript)

Touchfähig

Alle Navigationselemente sind touchfähig. Es werden nur Buttons in einheitlicher Größe und Kontrast ausgeliefert.

Buttons werden durch das Symbol repräsentiert (Bspw: Speichern = Diskettensymbol)

Navigation

Navigation wird für die mobile Nutzung automatisch auf eine optimale Größe transformiert

Navigation kann ein und ausgeblendet werden

Ebenen

Die Navigation wird in der Mobilen-Variante durch eine Ebene abgebildet, wobei die Ebene 2 der Desktop-Variante unter die Ebene 1 verschachtelt wird.

Horizontales scrollen wird vermieden. Vertikales scrollen wird gefördert. Wobei der Inhaltliche Aufbau einem festgelegten Standard folgt

Anwendungsrahmen

Die Funktionen aus dem Kopf werden in die Mobile-Navigationsebene verschoben. So z.B. die globale Suche.

Der "Footer" wird komplett ausgeblendet.

Listendarstellung

Für die mobile Nutzung ist besonders die "fastlist" wichtig

"fastlist" - Ist dafür zuständig Inhalte maximal transparent darzustellen und schnell bedient zu werden

Kompatibilität

Moderne Endgeräte mit HTML5 fähigen Browsern werden unterstützt. (Alle modernen IPhone und Android-Smartphones)

Achtung: Auch aus diesem Grund verzichten wir im Projektverlauf auf dynamische Inhalte

Kleine flexible Bereiche schaffen

Das Layout unterstützt uns kleine flexible Inhaltsbereiche zu schaffen und möglichst wenige Funktionen mit einander zu vermischen. Bestenfalls wird eine Funktion pro Inhaltsbereich zugännglich gemacht, denn diese Funktion wird dann auch optimal an das Rollen- und Rechtesystem von Veasy Sport gekoppelt werden.

Aktionen Loggen

Das Logging-System von Veasy Sport kann die Aufgabe effektiv übernehmen, wenn die Ansichten nicht überfrachtet sind. Als Beispiel: Niemals zwei Formulare auf einer Seite!

Moderne Standards

Durch Einhaltung von moderner Standards können wir uns Browser interne Funktionen zu nutze machen und damit die Geschwindigkeit erhöhen

Icons sind eine skalierbare Schriftart

Alle im System verwendeten Icons sind eine vektorbasierte Schriftart. Das bedeutet sie entsprechen immer der Farbe des Textes und sind unendlich skalierbar ohne das sich daraus längere Ladezeiten ergeben.