Die Diversität der Endgeräte erhöht sich jeden Tag. Ein Usability Professional steht hier vor den Fragen: “Wie teste ich meine Anwendungen und wann bin ich damit fertig?” Aufwandsprojekte und Festpreisprojekte unterscheiden sich zudem stark im zeitlichen Umfang der Evaluation, sollen aber gleichwertig im Endergebnis sein. Welche Werkzeuge brauche ich als Usability Professional um effizient im Projektablauf die Qualität meiner Anwendungen zu gewährleisten? Praxiserfahrungen aus Festpreisprojekten sollen Usability Professionals helfen, die richtigen Fragen zu stellen und sich das eigene (physische oder virtuelle) “Testlabor” zusammenzustellen.

Wir erläutern in diesem Beitrag unseren Workflow für das Cross-Browser und Cross-Device Testen. Im ersten Teil zeigen wir Möglichkeiten auf, günstig mit den Cross-Browser bzw. Cross-Device-Tests zu starten. Tests auf echten Geräten werden wir im zweiten Beitrag betrachten – Schlagwort synchronisiertes Cross-Browser/Cross-Device Testen. Im letzten Beitrag benennen wir relevante Entscheidungskriterien für Tools und Methoden und schließen mit der Vorstellung unseres Setup (Testlabor) sowie Erkenntnissen aus Festpreisprojekten.

Günstig starten.

Zu Beginn jedes Projekts liegt der Schwerpunkt auf effizienten, schnell realisierbaren Machbarkeitsstudien, grafischen und technischen MockUps und den ersten Umsetzungen für Webbrowser. Dazu bieten sich zwei Tools an, welche auf den meisten Entwicklungsrechnern vorhanden sind oder schnell eingerichtet werden können: Webbrowser mit Developer Tools und Gerätesimulatoren.

Web Developer Tools

Ganz ohne Zusatzprogramme können Browserfenster verkleinert und vergrößert werden, um verschiedene Viewport-Größen zu testen. Häufig verwendete Abmessungen für den Schnellzugriff können mit hilfreichen Plugins oder den nachfolgend genannten Tools hinterlegt werden. Web Developer Tools sind in allen gängigen Webbrowsern wie Chrome, Firefox, Safari und Internet Explorer integriert oder über Erweiterungen wie Firebug verfügbar. Sie ermöglichen die Interpretation von JavaScript und CSS direkt im Browser zu prüfen, den Netzwerkverkehr einzusehen und erste Performancedaten zu betrachten. Die Tools können wie folgt eingeblendet werden:

• Chrome (Version 35.0.x):
  Mac: Anzeigen → Entwickler → Entwickler-Tools
  Windows: Menü → Tools → Entwicklertools
  https://developer.chrome.com/devtools/index (24.06.2014)

• Firefox (Version 30.0):
  Mac und Windows: a) Menü → Entwickler-Werkzeuge → Werkzeuge ein-/ausblenden
  b) Extras → Web-Entwickler → Werkzeuge ein-/ausblenden
  zusätzlich gibt es die Mozilla Responsive Design View im Firefox:
  https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View (24.06.2014)

• Safari (Version 7.0.x):
  Schritt 1) Safari → Einstellungen → Erweitert → “Menü “Entwickler” in der Menüleiste anzeigen
  Schritt 2) Entwickler → Webinformationen einblenden
  https://developer.apple.com/library/safari/documentation/
  AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/
  Introduction.html (24.06.2014)

• Internet Explorer (Version 11.0):
  Mac: Tools → “F12 Entwickler Tools”
  Windows: Extras → F12 Entwicklertools
  http://msdn.microsoft.com/en-us/library/ie/bg182326(v=vs.85).aspx (24.06.2014)

Um die korrekte Darstellung und Funktionsfähigkeit für eine möglichst hohe Anzahl von Endkunden zu erreichen, sollten so viele Plattformvarianten wie möglich auf Kompatibilität überprüft werden, um gegebenenfalls Anpassungen bzw. Polyfills (http://remysharp.com/2010/10/08/what-is-a-polyfill/) umzusetzen. Die Kombinationen wachsen stetig, sind doch Betriebssystem, Browsermodell und Browserversion zusammen wichtige Faktoren. Auf den meisten Betriebssystemen kann standardmäßig von jedem Browsermodell nur eine Version gleichzeitig installiert sein. Updates überschreiben oder aktualisieren die vorherige Installation. Welche Möglichkeiten bieten sich, um lokal mehrere Versionen bereitzustellen? Zum einen können portable Browservarianten neben einer Installation verwendet werden. Diese sind nach dem Entpacken vollständig lauffähig und einer installierten Anwendung gleichwertig. Unter dem Stichwort „portable apps“ oder „pen drive apps“, die Bezeichnung resultiert von USB-Sticks, gibt es heutzutage eine Vielzahl von Programmen, beispielsweise die marktführenden Webbrowser sowie bekannte Grafik- und Bürosoftware. Virtuelle Maschinen (VM) sind eine zweite Möglichkeit, um eine Kombinationen aus Betriebssystemen und Webbrowser bereitzustellen. Entweder installieren wir uns diese von Grund auf selber oder greifen auf VM zurück, die von bekannten Softwareherstellern (bspw. http://www.modern.ie) zur Verfügung gestellt werden.

Gerätesimulatoren

Neben den Web Developer Tools sind Gerätesimulatoren in der ersten Projektphase ideal geeignete Werkzeuge. Außer dem Browserverhalten kann darin das gerätespezifische Verhalten annähernd beurteilt werden. Live Prüfen und auch live Verändern sind weiterhin möglich. Chrome bettet Simulatoren für mobile Geräte in die Web Developer Tools ein (https://developers.google.com/chrome-developer-tools/docs/mobile-emulation). Diese gehen über einfache Viewport- und User Agents-Veränderung hinaus und melden der Webseite die Gerätegröße, Pixeldichte, Lagesensoren, Geo-Daten und bietet eine Touch-Simulation. Chrome kann sich also als echtes Gerät ausgeben. Dieses Feature enthält im Moment nur dieser Browser. Zum Aktivieren öffnen wir die Entwickler Tools, blenden über das “Telefon-Symbol” (siehe Foto) oder durch Druck auf die „Escape“ Taste das untere Fenster mit Konsole und Emulator ein. Viele Voreinstellungen ermöglichen einen schnellen Einstieg in das Simulationsverhalten. Die einzelnen Werte können jedoch manuell angepasst werden.

Ein Simulator für mehrere iPhone- und iPad-Varianten ist in der Entwicklungsumgebung XCode unter Mac OS integriert. Auch hier sind Touch- und Rotationseingaben möglich, um das Verhalten der Webseite zu überprüfen.
Der Simulator in XCode wird wie folgt gestartet: Menu → Open Developer Tools → iOS Simulator → Gerät → [bspw. iPad Retina]
(https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/iOS_Simulator_Guide/GettingStartedwithiOSStimulator/GettingStartedwithiOSStimulator.html)

Für Android gibt es ebenfalls Emulatoren. Im Gegensatz zu den erwähnten Simulatoren, sollen sich diese genau wie die native Plattform verhalten. Dies ist für native Anwendungen ein wichtiger Faktor beim Testen.
Der Emulator von Google bietet kein Multi-Touch und nur begrenzte Unterstützung von Hardwarekomponenten wie der Kamera. Es steht initial auch nur der Standard Browser zur Verfügung, da Google auf den PlayStore verzichtet. Die Installation von Chrome, Firefox und Co gestaltet sich als Herausforderung und die Paketdateien enthalten nicht immer den vollen Funktionsumfang (http://paul.kinlan.me/installing-chrome-for-android-on-an-emulator/). Es gibt jedoch auch alternative Emulatoren für Android.

All diese Tools können auf einem Computer installiert werden und sind für jede folgende Projektrunde oder Kundenbesuche verfügbar. Kurzfristige und schnelle Code-Änderungen oder demonstrative Umsetzungsvarianten lassen sich effektiv und effizient realisieren. Für das Cross-Browser-Szenario sind die Developer-Tools-Simulatoren aber performanter und von der Funktionalität ausgeprägter. Performance-Betrachtungen innerhalb Simulatoren sind jedoch nur bedingt aussagekräftig, da der Host-Computer meist über höhere Rechengeschwindigkeit als Smartphones oder Tablets verfügt. Der nächste Schritt in die reale Welt der Anwender erfordert einen Testaufbau mit echten Geräten.

Nächster Teil
Im zweiten Teil der Reihe werden wir die Vorteile von echten Geräten im Gegensatz zu Simulatoren und Browsern betrachten.

Autoren: Daniel Süß und Nicole Charlier, akquinet tech@spree GmbH

 

Edit: Update zu den Chrome Developer Tools, Danke für den Hinweis im Kommentar