Via Online CAFM Software: Eine Webapp für komplexes Gebäudemanagement.

Produkt

SPARTACUS

Branche

Enterprise

Jahr

2014

Service

User Interface &
User Experience Design

facility management software

Facility Management

SPARTACUS

Komplexe Gebäude erfordern komplexe Unterstützung. Hierzu hat die N+P Informationssysteme GmbH ein Tool entwickelt, welches eine IT-Unterstützung der Nutzer im kaufmännischen, im infrastrukturellen und technischen Facility Management bietet. Mit der CAFM SoftwareCAFM (Computer-Aided Facility Management) unterstützt Gebäudemanagement durch eine Softwareanwendung. (klicken für weitere Infos) lässt sich in Projekten denken und Budget sowie Maßnahmen können komfortabel verwaltet werden. Außerdem können Informationen aus Fremdsystemen integriert werden. Diese und weitere Features helfen dabei Prozesse zu vereinfachen und führen zur Arbeitserleichterung in der Gebäudeverwaltung.

Wireframes mobile app

UX-Design mit speziellen Anforderungen

Die Computer Aided Facility Management SoftwareCAFM (Computer-Aided Facility Management) unterstützt Gebäudemanagement durch eine Softwareanwendung. (klicken für weitere Infos) sollte als Web-AppEine Webanwendung ist eine Software die nicht lokal auf einem Computer installiert ist, sondern auf einem Webserver liegt. (klicken für weitere Infos) konzipiert werden und auf den gängigen internetfähigen Geräten zum Einsatz kommen. Im Vordergrund der Anforderungen stand weiterhin die gewohnte User ExperienceDie User Experience (dt. Nutzererfahrung, Nutzererlebnis) beschreibt die Erfahrungen die ein Anwender mit einem Produkt macht. (klicken für weitere Infos) von iOS und Android miteinander zu vereinen und dennoch die Maus-Interaktionen von Desktop-Rechnern zu behalten.

Von Beginn an stand die Skalierbarkeit der Anwendung im Fokus – damit konnte die Webapp um Module und Features problemlos erweitert werden.

Mitarbeiterin Whiteboard

Vom Experten Review über Papierprototypen zum UI-Konzept

Auf Basis dieser Anforderungen betrachteten wird das bestehende Konzept der CAFM Software SPARTACUS Facility Management® unter UsabilityDie Benutzerfreundlichkeit (engl. Usability) bezeichnet die Gebrauchstauglichkeit eines Produktes. (klicken für weitere Infos)-Aspekten.
Nach einem Experten-ReviewExpertenbasierte Evaluation wird eingesetzt um die Usability einer Anwendung zu bewerten und Möglichkeiten der Verbesserungen zu finden. (klicken für weitere Infos) entwickelten wir Nutzerszenarien Bei der Konzeption einer Anwendungsoberfläche spielen wir die Verwendung einer Software anhand von Nutzerszenarien durch. (klicken für weitere Infos) und arbeiteten mit Hilfe von PapierprototypenFür schnelle Tests arbeiten wir mit gedruckten oder handgezeichneten Dummies. (klicken für weitere Infos) verschiedene Vorschläge für eine optimierte NutzerinteraktionIm Interaction Design geht es darum die Interaktionen zwischen dem Anwender und dem Produkt zu gestalten. (klicken für weitere Infos) aus. Wir testeten den Umgang mit PC, Tablet sowie Smartphone und gestalteten gezielt Entwürfe für eine variable NutzeroberflächeDas User Interface oder die Benutzeroberfläche einer Softwareanwendung ist die Schnittstelle zwischen Mensch und Maschine (klicken für weitere Infos).

Einen visuellen Stil definieren

Nachdem wir das finale Konzept der Web-App entwickelt hatten, setzen wir uns an die Definition des visuellen Stils. Unter Berücksichtigung der Corporate IdentityDie Corporate Identity vereint strategische Faktoren eines Unternehmens, um ein einheitliches Erscheinungsbild zu schaffen. (klicken für weitere Infos) kreierten wir eine Farb- und Formsprache für die Softwareanwendung. Entsprechende Farbcodierungen sorgen dabei für eine einfache und verständliche Orientierung und geben Hinweise zu Status und Funktionen der CAFM Software. Für eine leichte und verständliche Zugänglichkeit einer breiten Anwendergruppe sorgt die reduzierte und sachliche Gestaltung auf weißem Grund. Einzelne Elemente und das Key VisualsEin Key Visual, oder auch Leitbild, ist ein Grundmotiv, welches den langfristigen Auftritt einer Marke oder eines Unternehmens abbildet. (klicken für weitere Infos) im Header setzen Farbakzente und sorgen für den nötigen Kontrast und die Spannung.

Interface Tablet
Interface Phone

Die passenden Icons gestalten

Weiterhin mussten für die CAFM SoftwareCAFM (Computer-Aided Facility Management) unterstützt Gebäudemanagement durch eine Softwareanwendung. (klicken für weitere Infos) verständliche Icons gestaltet werden. Das Icon-SetEin Icon Set ist eine Sammlung benötigter Icons für, zum Beispiel, eine Softwareanwendung. (klicken für weitere Infos) sollte dem Benutzer die Auswahl in der Navigation erleichtern und Orientierung in der Anwendung geben. Bei der Gestaltung wurde ein Stil entwickelt, welcher Outlines und gefüllte Flächen miteinander verknüpft. Die Unterscheidung zwischen dem normalen bzw. nichtselektierten und dem selektierten Zustand wird sowohl durch die Farbe als auch durch die Invertierung des Symbols geschaffen. Da bei einer webbasierten Anwendung auf unterschiedliche Auflösungen zu achten ist, haben wir das Icon-Set im skalierbaren SVG-Format erstellt. Somit können die Symbole Geräte- und Browserunabhängig eingesetzt werden.

Styleguide

Einen Styleguide erstellen

Für die technische UmsetzungWenn unsere Entwicklungsarbeit am Design getan ist, muss das User Interface technisch realisiert oder implementiert werden. (klicken für weitere Infos) und die Möglichkeit das Design um weitere Module zu ergänzen, erstellten wir schließlich einen StyleguideIn einem Styleguide werden definierte Elemente einer Software, Website oder eines Druckerzeugnisses dokumentiert. (klicken für weitere Infos). Darin enthalten sind alle gestalterischen Prinzipien. Dafür wurden alle UIDas User Interface oder die Benutzeroberfläche einer Softwareanwendung ist die Schnittstelle zwischen Mensch und Maschine (klicken für weitere Infos)-Komponenten bemaßt und Farbcodierung sowie Zustände übersichtlich dokumentiert. Zudem wurden Interaktionsprinzipien erläutert und eine Vielzahl an Beispiel-MockupsVorführmodelle oder Attrappen die einen Eindruck zur Funktionalität eines Produktes vermitteln. (klicken für weitere Infos) bereitgestellt. Der Styleguide sorgte für eine zügige und einheitliche Umsetzung bei der technischen Entwicklung.

„Im Rahmen der Neuimplementierung des Web-Front-Ends unserer CAFM-Software SPARTACUS Facility Management® haben wir uns zur weiteren Verbesserung der Usability und User Experience für professionelle Unterstützung entschieden. Nach einer umfassenden Marktrecherche und dem Kennenlernen verschiedener Agenturen konnte uns letztendlich FORM & DRANG überzeugen.

Nach einer unkomplizierten Konzeptphase mit einem intensiven und direkten Austausch konnten wir schnell mit der Umsetzung der Designvorlagen starten. Die Zuarbeiten hat FORM & DRANG pünktlich und zuverlässig geliefert und damit den reibungslosen Projektablauf sehr gefördert.

Nach dem ersten erfolgreichen Projekt haben wir uns später auch bei der Neugestaltung unseres Desktop-Front-Ends für FORM & DRANG entschieden. Auch dieses Projekt konnten wir mit der gewohnten Zuverlässigkeit seitens FORM & DRANG erfolgreich abschließen.

FORM & DRANG ist in der Zeit zu einem zuverlässigen Partner geworden, der uns bei Fragen und Entscheidungen zur Usability und User Experience unserer Produkte kompetent zur Seite steht.“

Daniel Dietrich | Teamleiter Web- und Mobile-Entwicklung CAFM | N+P Informationssysteme GmbH

Interface Desktop

Webapp

Healthcare DMS

AB+M Online Portal

Das Dokumentmanagementsystem unterstützt gängige Prozesse und beschleunigt die Abwicklungen der Aufträge zwischen Praxen und Laboren…

Webapp

Paychex Deutschland GmbH

Das digitale Personalbüro

Die cloudbasierte Webanwendung von Paychex ist eine neue Lösung des Personalmanagements

Unser Service

User Experience Design &
User Interface Design

Wir entwickeln und gestalten für Sie benutzerfreundliche, intuitive Bedieneroberflächen

Planen Sie Ihr nächstes
Projekt mit uns!

Geschäftsführer

Daniel Funke

Tel.: +49 (0) 341 35 58 969

Webapp

Healthcare DMS

AB+M Online Portal

Das Dokumentmanagementsystem unterstützt gängige Prozesse und beschleunigt die Abwicklungen der Aufträge zwischen Praxen und Laboren…

Webapp

Paychex Deutschland GmbH

Das digitale Personalbüro

Die cloudbasierte Webanwendung von Paychex ist eine neue Lösung des Personalmanagements

Unser Service

User Experience Design &
User Interface Design

Wir entwickeln und gestalten für Sie benutzerfreundliche, intuitive Bedieneroberflächen

Planen Sie Ihr nächstes
Projekt mit uns!

Geschäftsführer

Daniel Funke

Tel.: +49 (0) 341 35 58 969

KONTAKT

FORM & DRANG

Alte Straße 53

04229 Leipzig

Deutschland

SERVICES

User Experience Design

User Interface Design

Icon Design

Usability Consulting

Research and Conception

Styleguide und Development

BRANCHEN

Industrie 4.0

Enterprise

Healthcare

Consumer

Automotive & Mobility