Der Blog

Der weniger befahrene Weg: Unser Weg zur Veröffentlichung einer besseren mobilen App

von Vivian Au 18. November 2013 | 5 Minuten Lesezeit

Die Entwicklung unserer mobilen App begann als internes Hackday-Projekt, um eine mobile Ansicht für die PagerDuty -Web-App zu erstellen. Diese mobile Website wurde mithilfe eines nativen Wrappers in eine provisorische mobile App für Push-Benachrichtigungen umgewandelt. Trotz der Einschränkungen unserer ersten App waren bereits nach acht Monaten 30 % der Nicht-E-Mail-Benachrichtigungen Push-Benachrichtigungen.

Da die App für PagerDuty Kunden öffentlich zugänglich war, wurden wir vielfach kritisiert. Wie der folgende Kommentar zeigt:

LOL, die PagerDuty -App ist nur ein mobiler Webbrowser mit Push-Benachrichtigungen? Wie schlimm ist das denn?“ – Einer (und die meisten) unserer Kunden, die die mobile App heruntergeladen haben

Die alte mobile App von PagerDuty

Den Weg zum HTML5-Modell beschreiten

Mit jQuery Mobile als HTML5-Lösung haben wir den falschen Weg eingeschlagen. Die ursprüngliche App war träge, mit Verzögerungen von ein bis zwei Sekunden bei den meisten In-App-Aktionen, und sie war nicht für Touch-Oberflächen optimiert. Das lag aber nicht unbedingt an unserer Entscheidung, eine HTML5-App zu entwickeln, sondern an der schnellen und ungeschickten Implementierung, um unseren Kunden Push-Benachrichtigungen bereitzustellen.

Ein Großteil des Feedbacks stammte von Kunden, die sich eine native App wünschten. Nach eingehender Analyse dieses Feedbacks stellten wir fest, dass das eigentliche Problem unserer mobilen App die Benutzerfreundlichkeit, insbesondere die Geschwindigkeit, war. Die Annahme „Web = langsam“ ist unzutreffend. Wir glauben, dass eine HTML5-App ein schnelleres und zuverlässigeres Erlebnis ermöglicht.

Wenn ich die Leute gefragt hätte, was sie wollen, hätten sie gesagt: schnellere Pferde. – Henry Ford (vielleicht)

Da sich bei unserer ersten App vor allem die wahrgenommene und funktionale Geschwindigkeit als Problem herausgestellt hat, haben wir wesentliche Änderungen vorgenommen, um unseren Kunden ein besseres Erlebnis zu bieten.

Wie wir eine schnellere und zuverlässigere App entwickelt haben

Wir haben die App komplett neu konzipiert, um die wesentlichen Bedürfnisse unserer Kunden, die auf sie angewiesen sind, zu erfüllen. Wir haben außerdem sichergestellt, dass wichtige Informationen zu Vorfällen schnell und einfach zugänglich sind.

Unser erster Schritt bestand darin, jQuery Mobile zu verwerfen, da es nicht anpassbar war und aufgrund der Dateigröße (unkomprimiert und unminimiert 216 KB) sehr aufgebläht war. jQuery Mobile fördert tiefe Informationshierarchien, was bedeutete, dass man sich durch unzählige Navigationsmenüs wühlen musste, um nützliche Informationen zu finden. Dies war in unserer ersten App weit verbreitet, da mehrere Klicks und Fingertipps erforderlich waren, um eine Aufgabe zu erledigen.

Bei unserer neuen App stand die frühzeitige Anzeige von Informationen im Vordergrund. Wir verwenden Farben in der Benutzeroberfläche, um den Status anzuzeigen. Grün bedeutet „Start frei“, Rot bedeutet „etwas stimmt nicht“ und Orange bedeutet „jemand hat einen Vorfall bestätigt“. Weitere Vorfalldetails sind leicht zugänglich, und wir legen Wert auf verwertbare Informationen.

Mit der neuen App können Sie Vorfalldetails mit nur einem Fingertipp oder Wisch einsehen, um einen Vorfall zu bestätigen, zu lösen und neu zuzuweisen. Sie können sogar alle aktuellen Vorfälle Ihres Teams bestätigen und lösen. Dank dieser UI-Updates ist die App deutlich schneller als ihr Vorgänger.

Auch im Backend haben wir die App schneller gemacht. Wir wollten möglichst wenige Bibliotheken verwenden, um die Aufgabe zu erfüllen. Nach dem Testen anderer Bibliotheken stellten wir fest, dass Hammer.js die beste Touch-Gesten-Unterstützung für ältere Android- und iOS-Geräte bietet. Hammer.js ist sehr flexibel und ermöglicht uns die Erstellung pixelgenauer Interaktionsmuster.

Zusätzlich zu Hammer.js haben wir Zepto als Ersatz für jQuery verwendet, um die Leistung zu verbessern, sowie eine spezielle mobile Version von lodash.js.

Bestätigung unserer Entscheidungen

Entscheidungen zu treffen ist einfach, aber um sicherzustellen, dass unsere Annahmen richtig sind, waren zahlreiche Tests, eine laufende Überwachung und Iterationen erforderlich.

Vor der Entwicklung der App erstellten wir Wireframes unserer neuen Benutzeroberfläche, um die Interaktionen in der App zu prototypisieren. Wären wichtige Informationen leicht zugänglich? Wie viele Klicks oder Fingertipps wären nötig, um einen Vorfall zu bestätigen, zu lösen oder neu zuzuweisen? Das Feedback von PagerDuty Nutzern half uns, unsere Designentscheidungen zu validieren und mit der Entwicklung der App zu beginnen.

mobile_app_wireframes

Nachdem die App fertig war, haben wir eine öffentliche Betaversion veröffentlicht, in der unsere Nutzer die neue App in Aktion testen konnten. Dank ihres Feedbacks konnten wir bereits vor der Veröffentlichung zahlreiche Änderungen an der Funktionalität und der Benutzeroberfläche der App vornehmen.

Unsere letzte Bestätigung kam nach der Veröffentlichung der neuen App. Wir konnten beobachten, wie unsere Bewertungen in den App Stores stetig stiegen und erhielten jede Menge positives Feedback zum Aussehen, der Bedienung und der Geschwindigkeit der neuen App.

ENDLICH! Das war früher so nervig, dass ich wieder auf SMS-Benachrichtigungen umgestiegen bin. Mit der neuesten Version erhalte ich wieder nur Push-Benachrichtigungen, es sei denn, ich antworte nicht innerhalb von fünf Minuten. Die neue Version ist unglaublich! Sie läuft viel flüssiger und benötigt deutlich weniger Bandbreite, und es ist ganz einfach, Seiten zu bestätigen/aufzulösen und Notizen hinzuzufügen. Wer das geschrieben hat, verdient einen Stern und sollte die nächsten Versionen dieser App weiterhin im Auge behalten. Sie haben euch endlich einen guten Start in die mobile Welt ermöglicht. Super gemacht, Jungs! – Charles Panayides, Associate Systems Engineer bei Tumblr

Haben Sie unsere neue mobile App noch nicht ausprobiert? Sie können sie hier herunterladen. Google Play oder die Apple App Store Hinterlassen Sie uns unten eine Bewertung oder einen Kommentar. Wir würden uns freuen, Ihre Meinung zur neuen App zu erfahren. Vielleicht nehmen wir Ihre Vorschläge auf und verwenden sie in einem zukünftigen Update der App!