Integration mit intuitiver Benutzeroberfläche

Lesezeit: 5 Minuten

Führen Sie Ihre Anwendungen über eine systemunabhängige Benutzeroberfläche zusammen.

Autor: Julian Catoni, Frontend Specialist TRANSCONNECT

"Mit unserer Integrationslösung TRANSCONNECT können unsere Kunden verschiedene Systeme, Datenquellen und Anwendungen effizient verbinden. Das Backend ist an die Integrationsanforderungen unserer Zielgruppe in der Industrie angepasst. Doch auch das Frontend muss unsere User intuitiv durch die Anwendung führen, um Prozesse schnell und einfach zu automatisieren. Das Web bietet heute immer mehr Möglichkeiten, Technologien besser zu integrieren und benutzerfreundlich zu gestalten. Wir haben TRANSCONNECT daher einem Rebrush unterzogen. In diesem Blogartikel erfahren Sie, wie wir dabei vorgegangen sind."

Julian Catoni, Frontend Specialist TRANSCONNECT

Systemunabhängige Integration

Paul, Jonas und ich kennen uns schon lange. Wir sind ein eingespieltes Team und haben in verschiedenen Firmen bereits Web-Oberflächen konzipiert und entwickelt. Ich würde nicht sagen, dass das ausschlaggebend für den Projektverlauf ist. Aber es spielt eine entscheidende Rolle beim Punkt Zeit. In einem eingespielten Team kennt jeder die Kompetenz des anderen. Jeder weiß, wo er seine Stärken hat und welche Aufgaben er lieber an die anderen vergibt. Dennoch führen wir regelmäßig Diskussionen, denn gerade daraus entstehen die besten Ideen. Win-win: Das gab uns ein stabiles Fundament, auf dem wir beginnen konnten, um die neue Produktoberfläche für unsere Integrationslösung TRANSCONNECT zu bauen. Und jetzt fragen Sie sich sicher, wo fängt man denn nun an? Am besten mit dem Konzept, oder? Wir haben mit der Vision begonnen. Denn unsere Führung hatte ein klares Ziel mit unserem Produkt: Unsere Business Integration Platform sollte einen kompletten Relaunch erleben. Mit vielen technischen Neuerungen, die natürlich die neue UI abbilden muss. Das hieß für uns, dass wir alles Bisherige in Frage stellen konnten und zuerst unsere eigene UI-Vision anhand der technischen Vorgaben erarbeitet haben. Eine Vision, an der wir uns über das ganze Projekt hinweg orientieren können. TRANSCONNECT war bisher mit dem TRANSCONNECT Manager verbunden, der in Sachen Benutzerfreundlichkeit an seine Grenzen stieß. Er ließ wenig Flexibilität bei der Oberflächengestaltung zu.

Das Web bietet heute viel mehr Möglichkeiten als je zuvor. Wir wollten eine Plattform unabhängige Oberfläche bauen, auf der jede:r Enduser:in von jedem Gerät systemunabhängig auf die Anwendung zugreifen kann. Zeitgleich soll die Usability der Oberfläche auf das höchste Level gebracht werden. Unsere Anwendung ist komplex und enthält viele Funktionalitäten. Letztendlich spielte für uns auch der Aspekt Vielfalt eine große Rolle: Menschen in Industrie und Verwaltung sollten die Oberfläche nutzen, egal wie viel Kompetenz sie im Bereich Programmierung haben. Das war ein ganz wichtiger Punkt auf unserer Agenda.

intuitive-benutzeroberflaeche-mitarbeiter-arbeitet-im-figma-scaled

1. Vision

Wir sind ganz ehrlich: wir haben uns sehr viel Zeit für die Prozessmodellierung genommen. Die visuelle Sprache, in der wir jegliche Prozesse darstellen und damit festlegen, wie der User mit der Anwendung interagiert, hatte für uns höchste Priorität. In einem iterativen Prozess haben wir ein Fundament geschaffen, auf dem wir in den darauffolgenden Wochen aufgebaut haben und noch weiter entwickeln werden. Hier gab es viele Abstimmungsrunden, wir haben sämtliche User-Gruppen in unsere Gedanken mit einbezogen und viele Details unter die Lupe genommen und in den Kontext der verschiedenen Nutzer:innen gestellt. Die Sprache muss für Entwickler:innen genauso funktionieren wie für die Facharbeiter:innen und Mitarbeiter:innen in der Verwaltung. Wir haben uns auf bestimmte visuelle Bilder, Formen und Farben festgelegt, die für unsere Zielgruppe und nach unserem Empfinden sinnvoll sind. Wir haben damit eine komplett neue Art und Weise entwickelt, wie wir Prozesse benutzerfreundlich darstellen.

2. Konzept

Nach der Vision ging es für uns weiter mit der Konzeptionierung. Wie sieht das Nutzungsumfeld aus? Wie ist der Workflow der Nutzer:innen? Wie können Barrierefreiheit und Usability optimiert werden? Welche Daten müssen dargestellt werden und wie können sie visualisiert werden? Wie können Farben, Logos und Schriftarten gemäß Corporate Identity integriert werden? Welche Sicherheitsaspekte müssen berücksichtigt werden? Welche Komponenten braucht es, die verknüpft werden? Um den optischen Entwurf zu machen und dabei auf der Spur zu bleiben, nutzen wir das Entwurfswerkzeug Figma. Hier können wir die Oberfläche gestalten und diskutieren, ob das alles so funktioniert, wie wir uns das vorgestellt haben und ob es gut bedienbar ist. Wir sehen, wie die Formen und Farben sowie Anordnungen später aussehen. Mithilfe von Figmas Prototyping-Funktionalität, sehen wir live, wie Bilder und Buttons dynamisch miteinander verknüpft sind und in verschiedenen Ansichten wirken. Wir bekommen ein Gefühl dafür, wie der User mit der Anwendung interagiert. Das Mockup zeigt uns quasi, wie der User aktiv durch die Anwendung klickt. Prototyping at it’s best.

intuitive-benutzeroberflaeche-screenshot-aus-figma

3. Umsetzung

Diese groben Entwürfe aus der Konzeptphase in Figma wandeln wir nun in der Umsetzung in Feinentwürfe um. Wir teilen die Entwürfe in Aufgaben ein, erstellen Tickets und nehmen uns nach der Priorisierung durch unseren Product Owner peu a peu bestimmte Features heraus, die wir detailliert für den Kunden umsetzen und in die neue Oberfläche übertragen. Wir haben mit dem Bereich Monitoring begonnen. Das hat den Vorteil, dass wir hier mit vielen Farben und Bildern und Anzeigen spielen konnten, um den Nutzer:innen ein Erlebnis zu schaffen. Dashboards und Signalfarben zeigen den Anwendern und Anwenderinnen die gewünschten Daten. So werden wir weiter vorgehen und im Austausch mit unseren Kunden alle Entwürfe in die Realität übertragen. Das ist schon etwas Besonderes. Und unser Team kann es kaum erwarten, Ihnen die fertige Benutzeroberfläche unserer Business Integration Platform TRANSCONNECT® vorzustellen.

Fazit

Insgesamt kann ich sagen, dass das Vertrauen in unserem Team und die konsequente Ausrichtung an den Bedürfnissen der Nutzer:innen wesentliche Faktoren für unser Projekt sind. Regelmäßige Meetings, Stand-ups, Reviews und Retrospektiven ermöglichen uns, Fortschritte zu überwachen und aus jedem Sprint zu lernen. Die interdisziplinäre Zusammenarbeit lässt Ideenvielfalt zu und schafft innovative Lösungen, die letztendlich unser Produkt TRANSCONNECT auf ein neues Level heben.

Durch regelmäßige Nutzerbefragungen und interne Feedback-Schleifen haben wir bis heute sichergestellt, dass die Nutzerbedürfnisse und -präferenzen im Kern des Entwicklungsprozesses stehen. Und diese Strategie verfolgen wir auch weiterhin. Wir sind noch nicht am Ziel. Aber bis hierher hat unsere Methodik nicht nur zu einem produktiveren und angenehmeren Erlebnis für die Endnutzer:innen geführt, sondern auch die Kundenbindung gestärkt. Und das hat einen wesentlichen und direkten Einfluss auf die Markenwahrnehmung von TRANSCONNECT.

Effektive Automatisierung für jeden User

Unser Ziel ist es, dass Sie eine schnelle und einfache Prozessautomatisierung – auch in einer gewachsenen IT-Landschaft – erreichen. Unsere Integrationslösung zielt darauf ab, sämtlichen Fachabteilungen in der Industrie ein bereicherndes Erlebnis zu bieten und Ihnen Freude an der Automatisierung zu bereiten. Vereinbaren Sie gerne einen Termin mit unserem Sales Director, Eduard Daoud, und lassen Sie sich unsere Live-Demo TRANSCONNECT präsentieren.