ProMinent, User Interface, Entwicklung, Wireframe, Touchscreen, Mess- und Regelsystem, D, Werbeagentur magenta, Mannheim
ProMinent, User Interface, Entwicklung, Wireframe, Touchscreen, Mess- und Regelsystem, DULCOMARIN® 3, Anlagenübersicht
ProMinent, User Interface, Entwicklung, Wireframe, Touchscreen, Mess- und Regelsystem, DULCOMARIN® 3, Beckenkontrolle
ProMinent, User Interface, Entwicklung, Wireframe, Touchscreen, Mess- und Regelsystem, DULCOMARIN® 3, Strukturbaum
ProMinent, User Interface, Entwicklung, Wireframe, Touchscreen, Mess- und Regelsystem, DULCOMARIN® 3, Wireframe-Screen
ProMinent, User Interface, Entwicklung, Wireframe, Touchscreen, Mess- und Regelsystem, DULCOMARIN® 3, Timer
ProMinent, User Interface, Entwicklung, Wireframe, Touchscreen, Mess- und Regelsystem, DULCOMARIN® 3, Messgröße
ProMinent, User Interface, Entwicklung, Wireframe, Touchscreen, Mess- und Regelsystem, DULCOMARIN® 3, Wireframe-Screen
ProMinent, User Interface, Entwicklung, Wireframe, Touchscreen, Mess- und Regelsystem, DULCOMARIN® 3, Prozessbild
ProMinent, User Interface, Entwicklung, Wireframe, Touchscreen, Mess- und Regelsystem, DULCOMARIN® 3, Wireframe-Screen
ProMinent, User Interface, Entwicklung, Wireframe, Touchscreen, Mess- und Regelsystem, DULCOMARIN® 3, PH-Sollwert
ProMinent, User Interface, Entwicklung, Wireframe, Touchscreen, Mess- und Regelsystem, DULCOMARIN® 3, Schreiber
ProMinent, User Interface, Entwicklung, Wireframe, Touchscreen, Mess- und Regelsystem, DULCOMARIN® 3, Wireframe-Screen

Ein User Interface für ProMinent

Wasseraufbereitung in Schwimmbädern 4.0

Seit mehr als 55 Jahren ist die ProMinent-Unternehmensgruppe mit Hauptsitz in Heidelberg ein führender Entwickler und Fertiger von Komponenten und Systemen rund um die Dosierung von Flüssigkeiten sowie für die Wasseraufbereitung und Wasserdesinfektion. Von Anfang an setzt das Unternehmen auf kontinuierliche Innovation und Benutzerfreundlichkeit. Die hochkomplexen Systeme werden zunehmend von Touch-Screens gesteuert. Sogenannte User Interfaces bilden das Bindeglied zwischen Mensch und Technologie, bei deren Gestaltung der Bediener und klare, einfache Navigationswege im Vordergrund stehen. Für das Mess- und Regelsystem DULCOMARIN® 3 entwickelte die Mannheimer Werbeagentur magenta ein zeitgemäßes UI, das sich durch intuitive Bedienbarkeit und hohe Usability auszeichnet.

Das Mess- und Regelsystem DULCOMARIN® 3 ist Ihre digitale Anbindung an die Technologie der Zukunft. Es regelt komplette Schwimmbäder jeder Größenordnung – vom Erlebnisbad bis zum privaten Pool. Gleichzeitig helfen intelligente Steuerungsfunktionen, den Chemikalienverbrauch zu reduzieren und die Energiekosten um bis zu 50 Prozent zu senken.

Die Bedienung ist denkbar einfach und äußerst flexibel. Sie erfolgt direkt am Touch-Display des Systems. Zusätzlich kann das System per Smartphone oder über jedes andere internetfähige Endgerät aus der Ferne bedient werden.

Touchscreen statt Tasten

Die Aufgabenstellung für die Mannheimer Werbeagentur magenta war es, ein User Interface für einen 7"-Touchscreen zu entwickeln, das die z.T. seit Jahren bestehenden und dadurch erlernten Funktionen der bisherigen, konventionell mittels Tasten bedienten Geräte abdeckt und neue Funktionen integriert. Dabei sollte das UI trotz der geringen Maße (7 Zoll, 800 x 480 px) den Betrieb und die Verwaltung/Konfiguration von bis zu 16 Becken gleichzeitig ermöglichen. Zudem sollten permanent wichtige Betriebszustände angezeigt und eine einfache, intuitive Bedienung bzw. Navigation durch einen weitverzweigten Strukturbaum ermöglicht werden. Zusätzliche Assistenten zur Inbetriebnahme, Planung und Administration mussten integriert werden.

Workshops mit Auftraggeber und Agentur

Bei regelmäßigen, gemeinsamen Workshops mit dem Auftraggeber wurde die Agentur in die konzeptionelle Arbeit einbezogen. Dort wurden die Anforderungen, der Funktionsumfang, die Benutzerwege sowie die relevanten Infos/Inhalte der einzelnen Screen-Module definiert. Dazu wurde magenta in die komplexen technischen Zusammenhänge eingearbeitet und auftretende Fragen konnten direkt geklärt werden. Durch regelmäßiges Hinterfragen der konzeptionellen Ansätze und Anforderungen wurden diese optimiert, alternative Ansätze entwickelt und Groblayouts erarbeitet. Abläufe, Inhalte und Navigationswege wurden während des Prozesses ständig weiterentwickelt und an zwischenzeitlich geänderte Anforderungen angepasst.

Umsetzung mittels Wireframe

Vor der eigentlichen Layouterstellung wurde das gesamte System als interaktiver Wireframe umgesetzt, mit dem sich die komplette Bedienung vorab testen ließ. Ziel war es, sich zunächst auf die Inhalte, Funktionen und Abhängigkeiten zu konzentrieren, bevor das Layout im Detail fixiert wurde. Änderungen im Ablauf und/oder spezifischer Inhalte wurden regelmäßig in den Wireframe eingepflegt. So konnten einzelne Teilabschnitte separat geplant/umgesetzt und layoutet werden, während sich andere noch in der Entwicklung befanden.

Schritt für Schritt zum Ziel

Der zeitliche Rahmen konnte wie geplant eingehalten werden. Die Fertigstellung erfolgte in Teilabschnitten mit mehreren Milestones in enger Abstimmung mit dem kundenseitigen Entwicklerteam. Die finalen Layouts wurden als Einzelgrafiken nach Layoutvorgabe (Farbdefinition, Abstände, Mindest- und Maximalgrößen von Elementen, Definition der eingesetzten typografischen Elemente) erstellt. In regelmäßigen Design-Reviews wurde die technische Umsetzung des Layouts überprüft und ggf. Korrekturen vorgenommen. Als weitere Agenturleistung wurde eine umfassende Dokumentation von Strukturbaum, Navigationsprinzip und den einzelnen Funktionen/Screens erstellt.

Mit dem neuen User Interface von DULCOMARIN® 3, das von der Mannheimer Werbeagentur magenta umgesetzt wurde, bietet ProMinent eine moderne und umfassende Steuerung aller Parameter der Schwimmbadwasseraufbereitung – mit der gewohnt intuitiven Usability eines Smartphones.

Wissen

Wireframe – was ist das eigentlich?

Ein Wireframe ist ein grober, konzeptioneller Entwurf einer digitalen Anwendung, wie beispielsweise einer Internetseite oder eines User Interfaces, und ist ein früher Schritt während der Planungsphase. Hierbei werden nur die benötigten Elemente möglichst reduziert dargestellt. Auf Bilder, Grafiken, Farben, Textformatierungen oder andere Gestaltungselemente wird bewusst verzichtet. Bei der Erstellung eines Wireframes geht es nicht um Design, sondern um die Konzeption, Struktur und Logik der digitalen Anwendung.

Es gibt zwei Arten von Wireframes: statische Wireframes und dynamische/interaktive Wireframes. Bei einem statischen Wireframe handelt es sich um eine schematische Darstellung einer einzelnen Webseite. Für diese werden die grundlegenden Elemente festgehalten.

Dynamische Wireframes bestehen aus mehreren Seiten oder Ebenen. Diese werden interaktiv miteinander verknüpft und bilden einen funktionellen Prototypen, bei dem innerhalb des Contents navigiert und implementierte Funktionalitäten getestet werden können.

Der Einsatz von Wireframes bringt erhebliche Vorteile gerade in frühen Phasen der Entwicklung. Struktur und Funktionalitäten werden isoliert dargestellt und bleiben damit anschaulich. Die Darstellung eignet sich zudem bestens zu einer frühzeitigen, häufigeren und besseren Abstimmung mit dem Auftraggeber. Dies verringert das Risiko, komplett in die falsche Richtung zu planen. Projekte werden spürbar verkürzt und schneller fertiggestellt, unnötige Kosten werden vermieden.

„Das Kommunikations­ziel entscheidet über Konzept, Umsetzung und Medium.“

Matthias Tamm
Werbekaufmann, Geschäftsführer