Prototypen auf mobilen Endgeräten bereitstellen – einfach und flexibel mit lokalem Webserver und dynamischem DNS

Besonders seit dem letzten Jahr nimmt das Testen von mobilen Webseiten und Anwendungen immer weiter zu. Genau wie auf dem Desktop macht es Sinn, möglichst früh mit Prototypen zu beginnen. Das Bereitstellen dieser Prototypen auf den mobilen Geräten ist jedoch leider nicht trivial – gerade wenn die Probanden ihre eigenen Geräte verwenden sollen. Nach meiner Erfahrung ist die beste Lösung ein Webserver im lokalen WLAN, der per dynamischem DNS einfach aufgerufen werden kann. So erreicht man schnelle Zugriffszeiten, hält den Aufwand für die Probanden gering und kann zudem den Prototypen noch während der Tests sehr flexibel anpassen. In diesem Artikel möchte ich erklären, wie sich diese Lösung umsetzen lässt.

Die Herausforderungen bei der Bereitstellung von Prototypen auf mobilen Endgeräten

Desktop-Prototypen können im Normalfall einfach auf den Testrechner kopiert und lokal aufgerufen werden. Bei mobilen Endgeräten ist das leider nicht so einfach:

  • Wenn Probanden ihre eigenen Geräte mitbringen muss der Prototyp am Anfang jedes Tests kopiert werden. Das kostet viel wertvolle Zeit.
  • Das Kopieren auf das mobile Endgerät ist meistens mit etwas Aufwand verbunden, da das Dateisystem häufig geschützt ist. Es sind spezielle Apps und/oder Browser auf dem Gerätes notwendig. Die möglichen Lösungen unterscheiden sich zudem von Betriebssystem zu Betriebssystem, was das Unterfangen zusätzlich verkompliziert. (Einige Lösungen fürs Kopieren finden sich etwa im Buch Axure for Mobile)
  • Wenn während des Tests noch Änderungen am Prototypen vorgenommen werden sollen, beginnt das ganze Spiel von vorne.
  • Insgesamt ist das Übertragen des Prototypen auf die Endgeräte somit ein aufwändiger und fehleranfälliger Weg, der in der ohnehin stressigen Situation eines Tests nur weiteren Stress schafft.

Eine andere Lösung ist das Ablegen des Prototypen auf einem Webserver, auf dessen URL die mobilen Endgeräte dann zugreifen können. Auch Axure bietet kostenlos die Möglichkeit, Prototypen auf AxShare hochzuladen. Nach meiner Erfahrung werden jedoch bei Prototypen häufig sehr viele, große Bilder eingesetzt, um nicht jedes Detail mit Bordmitteln (etwa von Axure) nachbauen zu müssen. Das treibt die Ladezeiten beim Zugriff über das Internet sehr stark in die Höhe.

Lokaler Webserver für schnellen Zugriff und hohe Flexibilität

Das Problem der zu hohen Ladezeiten lässt sich umgehen, indem der Webserver direkt im lokalen WLAN betrieben wird, so dass die Daten nicht über die Internetverbindung laufen müssen. Die Software des Webservers kann auf jedem beliebigen PC laufen – ich mache es am liebsten direkt auf meinem eigenen, der während der Tests sowieso an ist. Die Installation ist heutzutage kein Hexenwerk mehr und kann auch von weniger erfahrenen PC-Nutzern vorgenommen werden. Sehr empfehlen kann ich dafür XAMPP, das mit einem einfachen Installer einen Apache-Webserver aufsetzt. Zusätzliche Konfiguration ist im Normalfall nicht notwendig.

Wenn der Webserver läuft gibt dieser einen bestimmten Ordner des Rechners frei. In diesem Ordner muss nun noch der Prototyp abgelegt werden. Andere Geräte können dann über das WLAN auf den Prototypen zugreifen.

Den Webserver auf dem eigenen Rechner zu betreiben hat einen weiteren großen Vorteil: Änderungen am Prototypen können sehr einfach verfügbar gemacht werden, indem einfach die Dateien im Webserver-Ordner ausgetauscht werden. Es ist nicht notwendig, an den Endgeräten etwas zu ändern, da sie automatisch auf die aktualisierten Daten des Webservers zugreifen. Aus diesem Grund habe ich auch schon bei Desktop-Tests auf diese Webserver-Lösung gesetzt. Eine in Axure vorgenommene Anpassung konnte ich so innerhalb weniger Sekunden zwischen zwei Testsessions live schalten.

Vereinfachter Aufruf durch dynamisches DNS

Mit einem laufenden Webserver lässt sich der Prototyp bereits problemlos auf allen Geräten im WLAN aufrufen. Dies muss allerdings über die WLAN-IP des Rechners mit dem Webserver erfolgen, was etwas unschön ist. Zum einen kann sich die IP ändern, zum anderen ist sie schlecht zu merken und einzugeben. Eine Alternative dazu ist die Einrichtung einer leichter lesbaren Domain per dynamischem DNS, die auf die WLAN-IP verweist. Die verlinkte IP lässt sich problemlos anpassen, so dass auch bei einer Änderung weiterhin dieselbe Domain verwendet werden kann.

Es gibt viele verschiedene Anbieter von dynamischen DNS. Je nach Features sind diese kostenfrei oder auch nicht. Ich habe bisher auf No-IP zurückgegriffen und keine Probleme gehabt. Man kann dort kostenlos eine Subdomain registrieren, etwa http://firmenname.no-ip.biz. Im Account lässt sich dann einstellen, auf welche IP diese Domain verweisen soll. Hier sollte die lokale WLAN-IP des Webservers angegeben werden. So müssen die Probanden im Test nur die einfach lesbare Domain in ihrem Browser aufrufen und gelangen automatisch zum Prototypen auf dem Webserver.

Fazit


Abb. 1: Der Aufruf des Prototypen vom mobilen Endgerät über DNS-Server und Webserver

Abb. 1: Der Aufruf des Prototypen vom mobilen Endgerät über DNS-Server und Webserver


Die hier beschriebene Lösung für das Bereitstellen eines mobilen Prototypen auf den Endgeräten besteht aus zwei Teilen: 1. Einem Webserver im WLAN, auf dem der Prototyp liegt, und 2. Einem dynamischen DNS, der auf den Webserver verweist (siehe Abb. 1).

Dieses Setup bietet folgende Vorteile:

  • Schneller Zugriff auf den Prototypen über WLAN, so dass auch große Bilder kein Problem sind.
  • Keine Modifikation der Endgeräte notwendig, was Zeit spart und es ermöglicht, dass die Probanden ihre eigenen Geräte verwenden.
  • Aktualisieren des Prototypen nur durch Kopieren in den Webserver-Ordner, also schnell und ohne Änderung an den Endgeräten.
  • Einfacher Aufruf des Prototypen durch Eingabe einer lesbaren URL im Browser der Endgeräte.

Für mich ist dies bisher die beste Lösung. Haben Sie das auch schon einmal so ausprobiert? Oder kommt Ihnen vielleicht noch eine bessere Idee? Mich würde sehr interessieren, wie Andere mit dieser Problematik umgehen.

Ein Gedanke zu „Prototypen auf mobilen Endgeräten bereitstellen – einfach und flexibel mit lokalem Webserver und dynamischem DNS

  1. Jens Jacobsen

    Hallo Jan, danke für den detaillierten Tipp!
    Ich nutze für schnelle Tests das HTML-Tool „Coda“ zusammen mit „Diet Coda“ (heißt wirklich so) auf dem iPad – die beiden arbeiten nahtlos zusammen, und so kann man ein Preview von Coda per Mausklick übers WLAN aufs iPad übertragen.
    Das eignet sich aber nur für einzelne Seiten, für große Nutzertests ist das Setpup von mir nicht zu gebrauchen.

    Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.