Nutzerfreundliche Webanwendung: das fruuts VMS

Das neue fruuts VMS erfüllt gleich mehrere Kriterien: es lässt sich optimal an das Design des Kunden anpassen, hält den Nutzer dank der Kombination von Navigation und Notification-Indicator immer auf dem Laufenden, ist mobil nutzbar und entfaltet seine ganze Pracht auf großen Monitoren!

Das Vendor Management System von fruuts ist ein Tool, um die Ausschreibung von Freelancer-Aufträgen an Vermittler und die komplette Kette bis hin zur Vertragsverwaltung und -verlängerung organisieren zu können. Funktional und fachlich stand das System bereits, mit meiner Hilfe sollte eine nutzerfreundliche Webanwendung daraus werden.

Durch mein neues Design konnte ich die Usability des Systems stark verbessern: Vor allem habe ich die Zahl der Overlays reduziert und damit die Interaktionen stärker mit den Einträgen verknüpft zu denen sie gehören.

Im Dashboard sehen die Lieferanten wie viele Freelancer sie aktuell bei ihrem Kunden platziert haben, wie viele Anfragen offen sind, und wie viele Interviews sie vereinbart haben. Darüber hinaus sehen sie die Vertragsarten und die Entwicklung der Budgets.

Im Dashboard werden die wichtigsten Kennzahlen zum Profil des Lieferanten grafisch dargestellt. Die Farben basieren auf dem Farbspektrum der fruuts GmbH und können vom Kunden ebenso wie das Logo und die primäre Farbe geändert werden.

Nutzerfreundliche Webanwendungen müssen immer gut navigierbar sein

Ein häufiger Fehler im responsiven Webdesign ist in der Umsetzung der Navigation zu beobachten: Diese lässt sich nicht immer scrollen! Damit die einzelnen Unterseiten des Systems auch im mobilen Querformat erreichbar bleiben habe ich hier Vorgaben gemacht wie sich die Navigation verhalten soll wenn nur die Hälfte der benötigten Höhe verfügbar ist:

Nutzerfreundliche Webanwendungen müssen auch mobil nutzbar sein.
Wichtig war mir in diesem Projekt, sicher zu stellen, dass die Navigation, die auf allen Bildschirmen gleich breit bleibt, sich auch an unterschiedliche Höhen anpasst. Zu diesem Zweck können nicht nur die einzelnen Navigations-Bereiche eingeklappt werden, sondern auch die Support-Daten, die ebenso wie das Logo ständig sichtbar bleiben.

Nutzerfreundliche Webanwendungen müssen in vielen Formaten lesbar und bedienbar sein

Die größte Herausforderung war die Anforderung, die Tabellen mit den Vertragsdetails zwischen 1024 und 1920 Pixeln Screenbreite sinnvoll darzustellen. Die Lösung: Tabellenzeilen, bei denen in der kleinen Versionen zwei Werte untereinander stehen, in der größten Version hingegen alle Werte in einer Zeile nebeneinander passen.

Andererseits gab es auch Bereiche, in denen das Layout „auseinander fiel“. Um das Auge besser zu leiten werden Formulare maximal dreispaltig. Auch solche Überlegungen machen eine nutzerfreundliche Webanwendung aus!

Responsives Verhalten von Formularelementen für das fruuts VMS
Innerhalb von Formularen wird die Darstellung bei ausreichendem Platzangebot von zweispaltig zu dreispaltig. Das Verhalten ist individuell innerhalb der Blöcke einstellbar.

Mehr über das Produkt


Produkt White Label Web-App ProduktWhite Label Web-App Kundefruuts Auftraggeberfruuts ProjektRe-Design des bestehenden Vendor Management System ZeitraumEnde 2018 Meine AufgabeDie Usability des bestehenden Systems verbessern und für eine gute Eignung als White Label vorbereiten. BesonderheitenResponsive Tabellen zwischen 1024 und 1920 Pixeln Bildschirmbreite möglichst optimal nutzen. Illustrationfontawesome.com (Icons) Umsetzungfruuts inhouse Entwickler