Tipps und Techniken für die Dashboard-Entwicklung von mobilen Endgeräten

Einleitung

Was begleitet uns täglich und hält uns ständig über die neuesten Ereignisse oder Informationen auf dem Laufenden? Richtig, unser Smartphone. Genau diesen kleinen Helfer können wir auch für Business Analytics einsetzen. Tableau entwickelte eine App speziell für die Nutzung von mobilen Dashboards sowie neue Features zur Erstellung von Layouts für einzelne mobile Endgeräte. Das Entwickeln von mobilen Dashboards erfordert ein Umdenken bezüglich des Aufbaus, Inhaltes und Designs. Dieser Blogbeitrag befasst sich mit den grundlegenden Entwicklungsunterschieden zu herkömmlichen Dashboards und liefert nützliche Tipps und Tricks.

Unterschiede in der Anforderungsanalyse und Dashboard-Entwicklung

Zuerst muss man sich bei der Entwicklung von mobilen Dashboards von dem Gedanken verabschieden, möglichst viele Daten greifbar machen zu können. Dazu sind Dashboards auf dem Smartphone völlig ungeeignet und es verfehlt ihren Nutzen. Entsprechend muss man sich auf eine höhere Betrachtungsebene begeben und diese auch bei der Anforderungsanalyse berücksichtigen. Nachfolgend werden typische Fragen bei der Anforderungsanalyse aufgezeigt und begründet, weshalb diese gefragt werden sollten.

Endgerätspezifische Fragen:

• Welche mobilen Endgeräte werden genutzt?
• Wie groß sind diese Endgeräte?
• Gibt es bestimmte Geräte/Marken, die im Unternehmen verwendet werden?
• Wie werden die Endgeräte verwendet? Werden Tablets auch hochkant genutzt?

Diese Fragen dienen zum einen dazu, die maximale Displaygröße der jeweiligen Layouts zu identifizieren. Bei der Festlegung der Displaygröße setzt Tableau automatisch die passenden Inframe-Dimensionen. Wird diese Größe beispielsweise bei der Nutzung eines größeren Tablets überschritten, zeigt Tableau automatisch das nächstgrößere Dashboard an. Mit dem Wissen, welche Geräte verwendet werden, kann man diese Funktion umgehen, indem die passenden Größen vorab eingestellt werden.

Zusätzlich spielt die Entscheidung, wie das Gerät genutzt wird, eine wichtige Rolle beim Dashboard-Design. Wird beispielsweise ein Dashboard für die Porträtnutzung (Hochkant) entwickelt, so könnten die Visualisierungen beim Drehen des Gerätes verzerrt werden. Funktional gibt es hier keine Einschränkungen, jedoch sieht die Ansicht nicht mehr passend aus. Hier empfiehlt es sich, mehrere Layouts bereitzustellen. Tableau wechselt automatisch beim Drehen des Endgerätes in das passende Layout, da hier auch spezifische Größen und damit auch die Inframe-Dimensionen gesetzt werden.

Inhaltsspezifische Fragen:

• Welche Kennzahlen überprüfen Sie täglich?
• Wenn Sie auf dem Weg zu einem Meeting sind, welche Informationen überprüfen Sie davor?
• Welche Informationen sind zwingend notwendig, um die mobile Version richtig nutzen zu können?
• Sollte es zur mobilen Version eine Detailansicht geben mit der Möglichkeit zur vertiefenden Analyse?

Bei einem mobilen Dashboard möchte man nur auf einer sehr hohen Ebene die Informationen konsumieren. Entsprechend müssen die Ansichten die Kennzahlen bzw. deren Ergebnisse direkt und aussagekräftig präsentieren. Der Nutzer möchte hier nicht die Daten „erkunden“, sondern die Informationen direkt auf einen Blick erhalten. Daher ist es hier auch wichtig, genau zu wissen, was der Nutzer konsumieren möchte.

Beim klassischen Weg wird zunächst eine Desktop-Version erstellt, die weitere Informationen wie z.B. längere Texte und Grafiken mit einer hohen Granularität enthalten kann. Diese Version wird im Anschluss auf die Inhalte der mobilen Version reduziert.

Der zweite Weg ist entgegengesetzt. Hier wird zunächst die mobile Version entwickelt und im Anschluss mit weiteren Informationen zu einer Desktop-Version angereichert.

Umdenken? Ja, bitte!

Wenn ein User ein Smartphone oder Tablet in den Händen hält, was tut er/sie hauptsächlich damit? Man scrollt oder swiped, tippt etwas an oder spricht hinein. Diese Aspekte müssen zwingend bei der Entwicklung von mobilen Dashboards beachtet werden. Beispielsweise werden Eingaben ausschließlich mit dem Finger getätigt. Eine separate Taste oder eine Maus gibt es nicht. Das ist bei interaktiven Dashboards zu beachten. Hierzu ein kleines Beispiel:

Es wird eine Visualisierung zur Filterung der Regionen „Central“, „West“, „South“ und „East“ angeboten

In einem Desktop-Dashboard hat der User mehrere Möglichkeiten mehrere Werte auszuwählen. Hierbei nutzt er entweder nur seine Maus oder hält die STRG-Taste gedrückt, um seine Auswahl zu tätigen. Hier hat der User immer ein Hilfsmittel, um eine Mehrfachauswahl tätigen zu können. Bei einem mobilen Endgerät gibt es jedoch dieses Hilfsmittel nicht. Daher muss bei der Entwicklung solcher Visualisierungen beachtet werden, dass eine Mehrfachauswahl auch ohne gedrückte STRG-Taste erfolgen kann. Empfohlen wird hier die Nutzung der herkömmlichen Filter von Tableau. Diese sind bereits optimiert auf die mobilen Versionen und lassen sich sehr gut in der App verwenden.

Was häufig unterschätzt wird, ist der Platz zum Scrollen. Um mit dem Finger scrollen zu können, benötigt der User entsprechend eine freie Fläche zum Antippen. Manche Visualisierungen bieten diesen Platz auch an, aber oft werden direkt ungewünschte Selektionen getätigt. Dabei kann der User ein Tooltip öffnen oder eventuell eine Filter-Aktion auslösen. Dies stört die User-Experience. Eine einfache Abhilfe ist, genügend freie Flächen zwischen den Visualisierungen anzubieten.

Bei einem Smartphone oder Tablet sieht der User nicht, ob das Dashboard weitere Inhalte beinhaltet, da hier kein Scrollbalken angezeigt wird. Damit der User direkt erkennt, dass es weitere Inhalte gibt, kann man die nachfolgende Überschrift oder Visualisierung überlappen lassen.
In Tooltips lassen sich einfach weitere Informationen zu der jeweiligen Visualisierung einbinden. Jedoch sollte die Verwendung von Tootlips gut überdacht werden, da diese oft bei den mobilen Dashboards die Inhalte überdecken. Dies ist vor allem bei einer Smartphone-Version sehr nachteilig. Eine Alternative ist ein Absprung auf ein zweites Dashboard, das bei der Auswahl des jeweiligen Elementes gefiltert und geöffnet wird.

Ist die Performance bereits bei der Entwicklung schlecht, so wird diese in der App nicht besser. Man sollte mit komplexen Abfragen, eingebetteten Visualisierungen in Tooltips und Aktionen sparsam umgehen. Gleiches gilt auch für Tabellenkalkulationen, da diese zur Laufzeit berechnet werden. Diese sind jedoch abhängig von der Datenmenge und der Visualisierung. Zeigt man beispielsweise nur die Top 5 und die zugehörigen Ränge in der Visualisierung an, so ist die Ladezeit sehr überschaubar. Zeigt man jedoch eine Top 100 inklusive der Ränge an, kann dies zu längeren Ladezeiten führen. Bei Filter-, Parameter- und Set-Aktionen kommt zusätzlich der Punkt hinzu, dass die Ausführung länger dauert und man hier mit höheren Ladezeiten rechnen muss. Bei Filter-, Parameter- und Set-Aktionen kommt zusätzlich der Punkt hinzu, dass die Ausführung länger dauert und man hier mit höheren Ladezeiten rechnen muss.

Tipps und Tricks

• Das Wichtigste gehört direkt nach oben, weitere Details sollten weiter nach unten positioniert werden.
• Mache das Dashboard scrollbar, dadurch schafft man sich Platz und scrollen ist bei einem Smartphone völlig normal.
• Elemente sollten leicht selektierbar sein. Vermeide unbedingt kleine Elemente. Achte hier auch auf die Anzahl der unterschiedlichen Kategorien und die Größe des jeweiligen Elementes. Pie-Charts sind zwar übersichtlich, haben aber den Nachteil, dass kleinere Anteile nur schwer mit dem Finger selektierbar sind.
• Vermeide einen hohen Detailgrad in den Visualisierungen. Tabellen und Scatterplots sind ungeeignet für mobile Dashboards.
• Achte auf die Selektierbarkeit der Filter. In Tableau ist das kein Problem, sofern die mobile App verwendet wird. Hier wurde die Ansicht der Filter optimiert und sie werden entsprechend größer angezeigt.
• Vermeide komplexe Darstellungen. Aufgrund des geringen Platzes können diese nicht richtig verwendet oder interpretiert werden. Dies gehört in die Desktop-Version.
• Empfohlen wird eine Schriftgröße von mind. 12 pt. Natürlich gibt es die Möglichkeit zum Zoomen, aber es ist für den User besser, direkt alles lesen zu können.
• Die Verwendung von Tabs sollte vermieden werden, da diese die Ansicht in Tablet- und Smartphone-Versionen verzerren. Wird hier ein Wechsel zwischen mehreren Dashboards benötigt, so sollte dies über Navigationsschaltflächen oder Absprünge realisiert werden.

Testen, Testen und nochmal Testen

Das Testen der Dashboards auf den entsprechenden Endgeräten ist ein wichtiger Punkt, der nicht unterschätzt werden darf. Man kann nicht davon ausgehen, dass die Version, die in Tableau Desktop entwickelt wurde, auch tatsächlich so im Endgerät dargestellt wird. Beispielsweise werden unverankerte Elemente verschoben und verzerrt oder personalisierte Hintergründe füllen nicht die gesamte Ansicht. Erfahrungsgemäß publiziert man das entwickelte mobile Dashboard ein Vielfaches mehr als das Dashboard für die Desktopversion. Häufig werden kleinere Änderungen am Design oder Layout verändert und direkt wieder publiziert. Dies erhöht den Testaufwand bei der Entwicklung. Neben der Ansicht sollte auch die Usability und die Performance des Dashboards getestet werden. Den endgültigen Test sollte eine Person ausführen, die nicht direkt an der Entwicklung beteiligt war. Sie kann hier auf weitere Aspekte aufmerksam machen, die bei der Entwicklung außer Acht geraten wurden.