In wenigen Schritten zu einer Applikation für Tablets

10 November 2014
| |
Lesezeit: 3 Minutes

Im Blog-Artikel „Ein Kundencenter für alle Geräte“ haben wir schon einen Überblick über die Migration des Swisscom Kundencenter gegeben. Nun möchten wir detaillierter auf unsere Strategie zu sprechen kommen, wie wir die Migration dieser grossen Applikation mit etwa 800 Seiten unter laufendem Betrieb technisch durchführen konnten.

Analyse der Ausgangslage

Als erstes haben wir die bestehende Seitenstruktur im Kundencenter analysiert:

Kundercenter: Seite Mobile Dienste in der Desktop-Ansicht

Kundercenter: Seite Mobile Dienste in der Desktop-Ansicht

Die Seiten folgen jeweils dem gleichen Layout. Rechts in der Mitte (unter dem Titel „Meine mobilen Dienste“) befindet sich die Hauptbühne des Kundencenter, wo die Interaktion mit dem Kunden stattfindet. Dieser Content-Bereich hat auf den 800 Seiten jeweils völlig unterschiedlichen Inhalt. Was darum herum geschieht hingegen ist auf allen Seiten fast identisch: Oben befindet sich der Header-Bereich (inkl. dem Suchen-Feld), links die Navigation („Kundencenter home“ usw.) und unten der Footer.

Das Kundencenter besteht technisch gesehen aus vier unterschiedlichen Applikationen, die jeweils ihren eigenen technischen Stack und ein eigenes Entwicklungsteam haben. Für den Kunden sollen diese Teile aber wie ein Ganzes aussehen, d.h. das Layout der HTML-Seite muss gleich aufgebaut sein. Das bedeutet, dass ein Umbau des Kundencenters für bestehende Nutzer nur gleichzeitig und im ganzen Umfang sinnvoll ist.

Eine Hochrechnung hat recht schnell gezeigt, dass ein Umbau sämtlicher Seiten von allen Applikationen sehr aufwändig wäre und mit den bestehenden personellen Ressourcen in nur einem Release, das heisst in drei Monaten, nicht zu schaffen ist. Da es bei dem Projekt „Responsive Kundencenter“ ja sowieso primär darum ging, den Anteil von Nutzern auf neuen Endgeräten wie Smartphones und Tablets zu erhöhen, hat das Projekt die Entscheidung getroffen, für Nutzer klassischer Computer (wozu wir auch Notebooks zählen) vorerst nichts am Layout zu ändern.

Konzentration aufs Wesentliche

Doch was lässt sich nun machen für mobile Endgeräte? Diese zeichnen sich in erster Linie einmal durch einen kleineren Bildschirm als Desktop-Computer und Notebooks aus. Das Layout der bestehenden Seite ist für Geräte mit einer Bildschirmbreite von mindestens 1024 Pixeln ausgelegt, wie sie bei Computern normal ist. Benutzer mit kleineren Bildschirmen müssen jedoch entweder seitlich scrollen oder zoomen, was nicht benutzerfreundlich ist. Ein Tablet, das im Hochformat gehalten wird, hat üblicherweise eine Bildschirmbreite von ungefähr 768 Pixeln. Das reicht zwar nicht für die ganze Seite, doch hat sich recht schnell gezeigt, dass es genug ist für den Content-Bereich, um den es ja primär geht. Für Tablets konnte das Kundencenter-Layout folgendermassen umgestaltet werden:

Kundercenter: Seite Mobile Dienste in der Tablet-Ansicht

Kundercenter: Seite Mobile Dienste in der Tablet-Ansicht

Off-Canvas-Navigation

Da für die Navigationsspalte auf der linken Seite kein Platz mehr blieb, haben wir uns für den Off-Canvas-Ansatz entschieden, d.h. die Navigation fährt seitlich hinein, wenn auf ein Menü-Symbol oben links oder rechts geklickt wird. Dieses Konzept nutzen die Anwender schon in vielen Apps auf Smartphone und Tablet. Ausgeklappt sieht die Tablet-Seite folgendermassen aus:

Kundercenter: Seite Mobile Dienste in der Tablet-Ansicht mit ausgefahrenem Menu

Kundercenter: Seite Mobile Dienste in der Tablet-Ansicht mit ausgefahrenem Menu

Für Tablets konnte also eine optimierte Ansicht erzeugt werden, alleine durch den Umbau des Layouts und durch die Einführung der Navigation als ausklappbares Menu. Dafür musste lediglich das Haupt-Template angepasst werden – die 800 Seiten mussten damit noch nicht angefasst werden.

Mit diesem Vorgehen konnte dieser erste Umbau innerhalb von einem Release erfolgen.  Mit relativ kleinem Aufwand konnte für die Kunden der Swisscom schon ein erster Mehrwert geschaffen werden. In einem nächsten Beitrag werden wir den Umbau der Smartphone-Ansicht näher beleuchten, der etwas länger gedauert hat.

Kommentare (0)

×

Updates

Schreiben Sie sich jetzt ein für unsere zwei-wöchentlichen Updates per E-Mail.

This field is required
This field is required
This field is required

Mich interessiert

Select at least one category
You were signed up successfully.