Function follows Form?

UI-Design einer Multiplattform-App für Servicetechniker
Kommentare

Bei der Entwicklung einer neuen Service-App stand für die mobileX AG eine benutzerorientierte Oberfläche im Fokus. Die Herausforderung lag dabei auch darin, die komplexe Funktionalität des bestehenden mobilen Clients auf das Wesentliche zu reduzieren, die Anwendungsfälle auf ein neues Format zu übertragen und ein völlig neues, intuitives und modernes UI zu erschaffen. Eine User Study sollte die App noch in der Entwicklungsphase auf ihre Endusertauglichkeit hin überprüfen.

Den mobilen Client mobileX-MIP for Field Service der mobileX AG gibt es bereits seit über zehn Jahren. Er wird jedes Jahr überarbeitet und um neue Funktionen erweitert und gewährt Kunden somit langjährige Investitionssicherheit. Er bietet Technikern in der Instandhaltung und im Service eine umfangreiche und gewachsene Funktionalität mit zahlreichen Anwendungsfällen. So können sie von unterwegs mit ihrem Notebook oder Laptop auf Auftragsdaten in Backend-Systemen inklusive Kundenhistorie und Dokumente zugreifen, nach der Reparatur oder Wartung ihre Arbeit dokumentieren, Checklisten abarbeiten sowie Serviceberichte erstellen und über den mobilen Client an das Backoffice übertragen.

Da immer mehr Techniker neben ihren Laptops auch mit Smartphones oder Tablets ausgestattet sind, gab es in den letzten Jahren eine steigende Kundennachfrage nach einer schlanken Companion-App, mit der sie untertags einfache Aufgaben wie das Bearbeiten von Aufträgen und Statuswechsel durchführen können, während sie ausführlichere Berichte und Statusreports abends auf ihrem Laptop ausfüllen. Eine Smartphone-App bietet dabei den Vorteil, dass die Techniker das Gerät immer dabei haben und auch unter schwierigen Bedingungen Auftragsdetails schnell und einfach nachsehen oder den Kunden direkt aus der App heraus anrufen können.

Vor diesem Hintergrund beschloss die mobileX AG, eine neue Service-App zu entwickeln, die die wesentlichen Aufgaben abbildet und eine einfache und intuitive Nutzeroberfläche bietet. Sie sollte multiplattformfähig sein und somit Anwendern Freiheit bei der Wahl ihres mobilen Geräts und Betriebssystems bieten. Daraus entstand auch der Name für die App: mobileX-CrossMIP.

Iterativer Entwicklungsprozess

Für die Entwicklung der Service-App wurde ein Team aus fünf Entwicklern für die Cliententwicklung inklusive eines Verantwortlichen für das User Interface gebildet. Ausgehend von der bestehenden Anwendung mobileX-MIP for Field Service und den bekannten Anwendungsfällen sammelte das Entwicklungsteam Ideen für das neue Konzept von mobileX-CrossMIP. Daraus entstanden die ersten Mock-ups des User Interface. In einer User Study mit Bestandskunden der mobileX AG wurden die Ideen und Entwürfe anschließend anhand eines Prototyps validiert. Dabei begleitete der UI-/UX-Designer die Servicetechniker von Kunden, um die Alltagstauglichkeit der Anwendung zu überprüfen und ein erstes Feedback von den Nutzern einzuholen. Die Ergebnisse dieser Feldstudie wurden dann intern überprüft, bewertet und damit das Benutzungskonzept der App weiter verbessert.

So kam es zum Beispiel zur Entwicklung des so genannten „Workspace“ – einer zunächst leeren Seite zum aktuellen Auftrag, auf der Techniker ihre Notizen zu Zeiten, Material, Messwerten oder Merkmalen erfassen können (Abb. 1). Automatismen und Logik ordnen die Notizen dann in einer Vorlage für ihre Rückmeldungen zum Auftrag an.

Abb. 1: Der noch leere Workspace

Abb. 1: Der noch leere Workspace

Benutzerorientiertes Design: weniger ist mehr

Bei der Entwicklung des User Interface der Service-App stand ein benutzerorientiertes Design ganz oben auf der Prioritätenliste. Die Konzentration auf die wesentlichen Funktionen in einer übersichtlichen und flachen Struktur war hier essenziell. Das kleine Display eines Smartphones oder Tablets führt dabei zwangsläufig zu einer Reduktion auf wirklich relevante und notwendige Inhalte. Dafür galt es, sich zuallererst Gedanken über die Aufteilung, etwaige Abhängigkeiten, intelligentes Verbergen von Details sowie den Umgang mit Icons zu machen. In einem Styleguide wurden dafür Richtlinien entwickelt, die die grundlegenden Gestaltungsprinzipien für die grafische Darstellung sowie fachliche Konzepte für mobileX-CrossMIP beschreiben.

Sinnhafte Strukturierung von Inhalten

Die Kernanwendungsfälle wurden dabei im ersten Schritt stärker konkretisiert und in verschiedene Nutzungsszenarien eingeteilt. So ließen sich überladene Anwendungsbereiche wie das Auftragsmodul in mehrere kleine und damit übersichtlichere Einheiten aufteilen. Der Bereich „Arbeiten“ stellt dabei alle Informationen und Funktionen bereit, die der Techniker während der eigentlichen Auftragsbearbeitung benötigt. Dazu gehören unter anderem die Übersicht über die aktuellen Aufträge, die Start- und Stoppfunktion für Aufträge, Informationen für die Bearbeitung sowie Rückmeldungen. Das Konzept eines separaten Bereichs „Organisieren“ erwies sich in der User Study als zu komplex bzw. als nicht erforderlich für die Prozesse vieler Kunden, sodass es im Produkt nicht umgesetzt wurde. Stattdessen können die Techniker nun über Filter im Hauptmenü direkt in die einzelnen Aufträge springen. Geblieben ist allerdings die Start-/Stopp-Automatik in der Auftragsliste, die einen wesentlich aufwendigeren Statuswechsel ersetzt.

Über die Definition von Abhängigkeiten wurden zudem Inhalte priorisiert – also bestimmt, welche Inhalte angezeigt und welche zunächst verborgen werden. Dieses Konzept kommt zum Beispiel bei den statusabhängigen Auftragsdetails zum Tragen und kann auf andere Kundenszenarien angepasst werden. Anstatt die Details eines Auftrags auf mehrere Seiten oder Reiter zu verteilen, ist im CrossMIP-Client der Inhalt über eine einzige Seite erreichbar. Je nach Bearbeitungsstand des Auftrags lassen sich die für den Techniker wichtigen Informationen – etwa die Adresse während der Anfahrt oder Gerätedetails während der Arbeit vor Ort – in den Vordergrund bringen. Über einen Klick lassen sich aber auch immer alle Details ein- und wieder ausblenden.

International JavaScript Conference 2017

The Vue of Search Engine Optimization – How to make your Single-Page App rank well

mit Dennis Schaaf (futurice) & André Scharf (DigitasLBi)

Von 0 auf 100 – Performance im Web

mit Sebastian Springer (MaibornWolff GmbH)

I didn’t know the Browser could do that

mit Sam Bellen (madewithlove)

Intuitive Benutzeroberfläche

Neben der Neugestaltung der fachlichen Features galt es vor allem auch, ein ansprechendes, intuitives und modernes UI zu erstellen, um die Userakzeptanz der App sicherzustellen. Dazu gehörten die generelle Gestaltung durch Schriftart und -größe, Farben und Icons, die Integration von interaktiven Elementen wie Gesten, Indikatoren, Feedback und Navigation sowie Gestaltungsmittel wie Karten, Dashboards, Wizards, dynamische Header und das Shortcut-Menü.

Icons spielten bei der Entwicklung der benutzerorientierten Oberfläche eine zentrale Rolle, da sie Inhalte auf deutlich weniger Raum vermitteln und damit die Reduktion bei der Entwicklung des Clients unterstützten. Zudem bieten sie einen hohen Wiedererkennungswert, lockern die Benutzeroberfläche auf und funktionieren sprachunabhängig. Insgesamt wurden für die Service-App über 150 neue Flat-Icons für technische oder abstrakte Begriffe kreiert. Dabei wurde darauf geachtet, dass ein Icon entweder im Kontext selbsterklärend ist oder dass es bereits aus einem anderen Zusammenhang bekannt ist. So entstand zum Beispiel der Aktenkoffer als Icon für den „heutigen Arbeitsvorrat“ an Aufträgen eines Technikers. Ein Stern markiert den Status eines Auftrags als neu.

Farben übernehmen eine weitere wichtige Funktion in der App, da sie für den Anwender eine Signalwirkung haben, wie zum Beispiel Rot für Warnungen oder fehlgeschlagene Validierungen und Grün für erfüllte Anforderungen. Das mobileX-Orange wird verwendet, um Elemente wie das Shortcut-Menü hervorzuheben oder um auf aktive Elemente wie beispielsweise das Eingabefeld, in dem gerade getippt wird, hinzuweisen. Um die funktionale Wirkung von Farben zu erhalten, wurden sie allerdings sehr bewusst eingesetzt. Neben den definierten Produktfarben wurden noch ergänzende Farbsets entwickelt, die für Kundenprojekte individuell verwendet werden können.

Die so genannten Karten bilden die strukturelle Basis des User Interface von CrossMIP (Abb. 2). Sie geben je nach Auswahl eine reduzierte oder eine erweiterte Sicht auf Informationen, die der Benutzer selbst steuern kann. Eine reduzierte Sicht in der Auftragsliste kann zum Beispiel die Auftragsnummer, ein Kurztext und eine Adresse darstellen. In der erweiterten Sicht werden dann noch Informationen zum Equipment und zum Kontakt angezeigt. Ein Link ermöglicht eine noch tiefere Detailansicht. So kann in den Auftragsdetails ein ausgewählter Kontakt angezeigt und per Link dann in die gesamte Kontaktliste navigiert werden. Eine Karte kann auch Aktionen beinhalten, die auf das Objekt der Karte angewandt werden. Durch ihre gegenständliche Optik rufen sie die Erwartung hervor, dass man mit ihnen interagieren kann. Funktionen wie etwa Verschieben, Löschen und Auswählen sind für den Anwender deswegen grundsätzlich intuitiv. Eine Karte mit einem Kontakt kann so zum Beispiel die Aktionen „Anruf“ und „E-Mail“ enthalten.

Erste Version im Kundeneinsatz

Nach etwa zwei Jahren Entwicklungszeit ist die Version 1.0 des CrossMIP-Clients seit Ende August 2016 für Android- und iOS-Smartphones verfügbar und bereits bei den ersten Kunden im Einsatz. Die App wird ständig weiter entwickelt, um Anwendern noch mehr Anwendungsfälle wie die Einbindung der Materialwirtschaft und die Erstellung von Serviceberichten zur Verfügung zu stellen. So erhalten die Techniker etwa alle vier Wochen ein Update der Service-App. Auch ihr Feedback liefert den Entwicklern wertvollen Input und fließt wieder in die Weiterentwicklung ein.

PHP Magazin

Entwickler MagazinDieser Artikel ist im PHP Magazin erschienen. Das PHP Magazin deckt ein breites Spektrum an Themen ab, die für die erfolgreiche Webentwicklung unerlässlich sind.

Natürlich können Sie das PHP Magazin über den entwickler.kiosk auch digital im Browser oder auf Ihren Android- und iOS-Devices lesen. In unserem Shop ist das Entwickler Magazin ferner im Abonnement oder als Einzelheft erhältlich.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -