Reflex Solutions Pro (2024)

Farben spielen eine wichtige Rolle, damit unsere Kunden sich in der RSP-App klar und schnell orientieren können. Bestimmte Funktionen bzw. Inhalte werden daher stets in den unten aufgeführten Farben ausgewiesen – bitte achten Sie unbedingt darauf, diese Farbcodierung immer einzuhalten!

Reflex Grün ist die Leitfarbe. Sie leitet den Nutzer Schritt für Schritt durch die App, indem sie ihm die jeweils nächsten Interaktions-Möglichkeiten anzeigt.
Rot ist die Warnfarbe. Sie deutet an, dass der Nutzer zum Beispiel seine Eingaben noch einmal überprüfen oder auf Besonderheiten achten muss.
Orange ist die Hinweisfarbe. Elemente in Orange geben zusätzliche Hinweise oder bieten Hilfethemen, die für die Auslegung relevant sein können.

Allgemeine Hinweise zum Thema Farben finden Sie hier: Die Farben.

Alle allgemeinen Hinweise, welche Schriftarten wir wo einsetzen, finden Sie in diesem Manual im Kapitel Die Typografie. Für die Auslegungssoftware RSP benutzen wir:

1. Webfont Netto Pro
Für Überschriften

2. Webfont Arial
Weil Arial auch in sehr niedriger Auflösung gut lesbar ist, verwenden wir sie in der App für alle Formulardaten und alle Inhalte, die keine Überschriften sind. Auf diese Weise stellen wir die Bedienungsfreundlichkeit der App sicher.

Das hier verzeichnete Iconset wurde speziell für die Reflex Solutions Pro entwickelt.

Die Icons bilden die Funktionen der App klar und deutlich ab, sie können fast nicht fehlverstanden werden. Mithilfe der eigens entwickelten Icons sorgen wir für eine hohe Usability und positive User Experience.

Bitte beachten Sie: Zusätzlich kommen in RSP auch die Icons der Produktbereiche zur Anwendung.

Das Interfacedesign von Reflex Solutions Pro ist aufgeräumt und klar und unterstützt die Nutzer dabei, ihre individuellen Lösungen (Einzelprodukte und Produktkombinationen) mit vollständiger Dokumentation zu erzeugen.

Die einzelnen Programmfunktionen von RSP besitzen jeweils eine eigene, unverwechselbare Ansicht (View). Die App nutzt demnach vier visuell klar unterscheidbare Views: für die Funktion Startseite, für die Auslegung, für die Konfiguration der Solutions und zuletzt für die Projektverwaltung. Diese Klarheit des Designs macht die App einmal mehr äußerst Nutzer-freundlich.

(Weitere Informationen über die Gestaltung von Startscreen und App Icon finden Sie im Kapitel Apps.)

Die Startseite zeigt die wichtigsten Funktionen der App auf einen Blick.

1. Header
Der Header enthält den Schnellzugriff zum Sprachwechsel, Kontakt, Toolbox und die Anmeldeoptionen. Er bleibt während der gesamten Anwendung und in allen Screens oben präsent. Die Details zum Aufbau des Headers finden Sie in diesem Abschnitt weiter unten im Kapitel Komponenten.

2. Reflex Produkte auslegen
Dieser Bereich der Startseite bietet den Einstieg in die Auslegung der Reflex- und Sinus-Produkte – und zwar je nach Anwendungsbereich des Nutzers. Die einzelnen Anwendungsmöglichkeiten sind mit den Icons der Anwendungsbereiche dargestellt.

3. Reflex Solutions auslegen
Dieser Bereich der Startseite ist der Einstieg für die Auslegung von Reflex Solutions. Ein Klick auf diesen Bereich – und der Nutzer kann mit der Auslegung beginnen!

4. Marketingbanner
Dieser Block zeigt wechselnde Themen analog zum Header auf unserer Webseite. Hier präsentieren wir neue Produkte, Services und bevorstehende Veranstaltungen. Bitte beachten Sie bei der Gestaltung der Grafik, dass die wichtigen Bildinhalte rechts angeordnet sind, damit sie nicht vom Textfeld überlagert werden.

1. Auswahlmenü der Reflex Solutions
Auf dieser Seite wählt der Nutzer seine Reflex Solution über die entsprechende Kachel aus. Die Kachel klappt aus und zeigt die wesentlichen Inhalte der Solution. Ein Icon weist zum nächsten Schritt „Solution jetzt auslegen“.

2. Eingabe der Eckdaten für die Anlagenplanung
Dieser Bereich enthält Filtermöglichkeiten. Und: Der Nutzer kann die statistische Höhe, Anlagenleistung und Anwendung eintragen.

3. Parameterauswahl anhand des Lösungsradars
Welche Parameter sind für das konkrete Projekt besonders wichtig? In diesem Bereich kann der Nutzer nach favorisierten Funktionen filtern.

Der Header ist grundsätzlich wie folgt aufgebaut: links das Logo, dann v.l.n.r. die Navigationszeile (Breadcrumbs), Spracheinstellungen,Schnellzugriff Kontakt und die Toolbox. Ganz rechts ist der Bereich Anmeldeoptionen („Login options“), der sich unterscheidet in einen:

Aufbau im nicht eingeloggten Zustand
Dropdown-Auswahl zwischen Anmelden („Sign in“) oder Registrieren („Register“). Bitte beachten Sie unbedingt, dass die Begriffe jeweils in der ausgewählten Sprache klar voneinander zu unterscheiden sind (im abgebildeten Beispiel: Englisch).

Aufbau im eingeloggten Zustand
Eingeloggte Nutzer können rechts unter Mein Konto („My account“) ihre relevanten Nutzerdaten einsehen und ändern.

1. Gefüllter Button
Auf diesem Button liegt eine sehr starke Betonung, da er vollflächig grün gefüllt ist. Er bindet die Aufmerksamkeit des Nutzers deutlich. Daher sollten diese hervorgehobenen Schaltflächen sparsam eingesetzt werden.

2. Umrandeter Button
Der umrandete Button ist der Standard-Button. Er zeigt die Aktionen, die dem Nutzer auf diesem Screen (auch) zur Verfügung stehen. Die favorisierte Aktion hingegen wird mit dem gefüllten Button angezeigt.

3. Button mit Icon
Sowohl der gefüllte als auch der umrandete Button (1 und 2) können mit einem Icon kombiniert werden. Das Icon hebt dann die Aktion, die beim Klick auf den Button ausgeführt wird, nochmals zusätzlich hervor. Die Farbe des Icons entspricht der Textfarbe im Button.

4. Button in Pfeilform
Buttons in Pfeilform werden dann verwendet, wenn der Klick darauf eine wichtige Aktion auslöst und den Nutzer auf einen neuen Screen bringt: es geht weiter! Auch Pfeil-Buttons können mit einem Icon kombiniert werden (Iconfarbe entspricht Textfarbe). Bitte beachten Sie: auch der Pfeilbutton kommt in zwei Varianten – gefüllt und umrandet.

5. Eingabefeld
Eingabefelder sind für alle Zahlen- und Texteingaben des Nutzers im Programm vorgesehen. Ist den Werten eine Einheit zugeordnet, wird diese rechts „angedockt“.

6. Combobox
Die Combobox dient der Auswahl von Eingaben, die nicht individualisierbar sind – zum Beispiel, weil sie bestimmten Normen oder Standard-Werten genügen müssen.

7. Dropdownmenü
Im Dropdown-Menü steuert der Nutzer direkt auf den gewünschten Link.

8. Toggle Button „Switch“
Der Toggle Button ist eine vereinfachte Checkbox, in der der Nutzer zwischen Option A oder B auswählt. Dieser Switch-Button ist immer binär.

9. Checkbox
Alles erledigt? Checkboxen kommen entweder einzeln oder als Liste. Als Liste kann der Nutzer keine, eine oder mehrere Checkboxen „anhaken“.

10. Radiobutton
Ein so genannter Radiobutton wird dann eingesetzt, wenn in einer Liste zwei oder mehr Optionen zur Auswahl stehen, die sich ausschließen. Der Nutzer kann sich per Radiobutton dann nur für eine Option entscheiden.

Alle Module besitzen fünf verschiedene Status bzw. zeigen an den Status …

• Interactable – der Nutzer kann mit dem Eingabemodul interagieren
• Hover – der Mauszeiger befindet sich jetzt auf dem Eingabemodul
• Focus– der Nutzer hat das Modul mit der Tastatur angewählt
• Pressed – das Modul wurde gerade angeklickt
• Not interactable – der Benutzer kann an dieser Stelle nicht mit dem Modul interagieren.

Für Toggle Buttons, Checkboxen und Radiobuttons gibt es zusätzlich noch die Status:

• Selected – das Modul ist ausgewählt
• Deselected – das Modul wurde abgewählt.

Für das Modul „Eingabefelder“ gibt es noch vier weitere spezielle Status:

• Errechnetes Ergebnis – der angezeigte Wert wurde aus Angaben des Nutzers oder anderen Angaben errechnet
• Übertragenes Ergebnis – der angezeigte Wert wurde aus der Eingabe oder Berechnung in einem Overlay übernommen
• Ungültiges Ergebnis – der Wert befindet sich außerhalb der möglichen Eingaben, der Nutzer sollte die Angabe überprüfen
• Verändertes Ergebnis – der im System hinterlegte Standardwert wurde vom Nutzer angepasst (und kann wieder zurückgesetzt werden).