Integrationstests der Benutzeroberfläche für Windows 8-Apps

Entwicklerblog für Windows 8-Apps

Ein Einblick in die Entwicklung von Apps im Metro-Stil – präsentiert vom Windows 8-Entwicklerteam

Integrationstests der Benutzeroberfläche für Windows 8-Apps

Rate This
  • Comments 0

Im Blogbeitrag Testen von Windows Store-Apps wurde darauf eingegangen, worauf eine App in den verschiedenen Laufzeitstatus getestet werden sollte. Gleichzeitig wurden einige Aspekte der Windows 8-Benutzeroberfläche besprochen und die Auswirkungen dieser auf die Umgebung Ihrer App. Wir werden jetzt die neue Benutzeroberfläche etwas näher untersuchen und einige der interessanten Interaktionen und Szenarien hervorheben, die Ihrer App begegnen können. Grundlage sind unsere Tests von vorhandenen Apps, Sie erfahren, wie Sie sicherstellen, dass Ihre App ordnungsgemäß funktioniert.

Grundlegendes Layout und Verhalten

In Windows 8 wurden neue und umfangreiche Funktionen eingeführt, die Ihre Apps umfassend und ansprechend wirken lassen. Beim Initialisieren Ihrer App wird ein Begrüßungsbildschirm angezeigt, der dem Benutzer einen ersten Eindruck der App vermittelt. Wenn Ihre App dann angezeigt und ausgeführt wird, kann sie der Benutzer jederzeit drehen, skalieren, andocken oder im Fenstermodus anzeigen. Wichtiger: Alle Ereignisse können gleichzeitig oder kurz hintereinander auftreten. Ihre App kann beispielsweise eine Ausrichtungsänderung empfangen, während der Begrüßungsbildschirm angezeigt wird, oder das Gerät kann in einer angedockten Ansicht an einen Projektor angeschlossen werden und damit eine Skalierungsänderung auslösen. Sehen wir uns einmal genauer an, welche Anforderungen bei den einzelnen Ereignissen besonders beachtet werden müssen.

Begrüßungsbildschirm

Das Hinzufügen von Begrüßungsbildschirmen ermöglicht Ihrer App eine Aktivität, während das System die App für die erste Verwendung initialisiert oder aus einem angehaltenen Zustand aus dem Back-Stapel holt. Um das ordnungsgemäße Anzeigen des Begrüßungsbildschirms sicherzustellen, starten Sie die App in der Vollbildansicht im Hoch- und im Querformat und prüfen Sie, ob der Begrüßungsbildschirm richtig positioniert wird (üblicherweise zentriert) und keine Probleme mit animierten oder visuellen Inhalten hat. Achten Sie ebenfalls sehr genau auf die Auflösungsqualität von im Begrüßungsbildschirm angezeigten Grafiken, schauen Sie nach gezackten Rändern oder pixeligen Bildern.

Wenn Ihre App einen erweiterten Begrüßungsbildschirm unterstützt, prüfen Sie den Übergang vom Begrüßungsbildschirm zum erweiterten Begrüßungsbildschirm auf eine konsistente und ruckelfreie Darstellung. Achten Sie insbesondere auf irritierende Effekte, beispielsweise Positionsänderung eines Symbols oder Anzeigeblitzer.

Drehen

Drehungen können beim Ausführen Ihrer App jederzeit auftreten, sogar wenn sich die App im angehaltenen Zustand befindet. Stellen Sie sicher, dass Ihre App auf Ausrichtungsänderungen reagiert, in den unterschiedlichen Zuständen Ihrer UI. Achten Sie insbesondere auf Layout- und Clippingprobleme, die die Benutzererfahrung Ihrer App beeinträchtigen könnten. Stellen Sie ebenfalls sicher, dass Inhalte beim Übergang zwischen den Ausrichtungen nicht springen oder blitzen.

Stellen Sie sicher, dass die Ausrichtung des Systems an die bevorzugte Ausrichtung Ihrer App angepasst wird, wenn ein Benutzer Ihre App startet oder zu ihr wechselt, sofern Ihre App Einstellungen zur automatischen Bildschirmdrehung verwendet. Überprüfen Sie ebenfalls, ob Ihre App in der gespiegelten Ansicht verwendet werden kann. Wenn die Voreinstellung für die automatische Drehung beispielsweise Querformat ist, stellen Sie sicher, dass ihre App sowohl im Querformat als auch im gespiegelten Querformat wie gewünscht angezeigt wird und funktioniert.

Mithilfe des Visual Studio-Simulators können Sie Drehungen simulieren, wenn Sie über keinen Zugriff auf geeignete Hardware zum Testen verfügen. Hier finden Sie weitere Informationen zur Verwendung des Simulators beim Testen von Windows 8-Apps mit Visual Studio 2012.

Skalieren

Windows 8 skaliert Ihre App, damit Fingereingabe und Benutzerfreundlichkeit auch bei den unterstützten unterschiedlichen Pixeldichten erhalten bleiben. Überprüfen Sie die Benutzererfahrung in Ihrer App bei Skalierungen von 100 %, 140 % und 180 %. Stellen Sie sicher, dass die App in allen Skalierungsstufen ordnungsgemäß angezeigt wird, und testen Sie dabei alle möglichen Zustände Ihrer UI.

Im Visual Studio-Simulator können Sie die folgenden Einstellungen verwenden, um Ihre App in den einzelnen Skalierungsstufen zu testen:

  • 100 % – 26,92 cm, 1366 x 768
  • 140 % – 26,92 cm, 1920 x 1080
  • 180 % – 26,92 cm, 2560 x 1440

Skalierungsänderungen können dynamisch auftreten beim Ausführen Ihrer App, beim Verschieben der App von einem auf einen zweiten Monitor oder beim Präsentieren über einen Projektor. Achten Sie insbesondere auf Layout- und Clippingprobleme, die die Benutzererfahrung Ihrer App beeinträchtigen könnten. Achten Sie ebenfalls sehr genau auf die Auflösungsqualität von Symbolen, Kacheln, Bildern in den Inhaltsbereichen Ihrer App, suchen Sie nach gezackten Rändern oder pixeligen Bildern.

Ansichten „Andocken“ und „Füllen“

Änderungen der Bildschirmansicht, Wechsel zwischen angedockten und gefüllten Ansichten können beim Ausführen Ihrer App jederzeit auftreten, sogar wenn sich die App im angehaltenen Zustand befindet. Stellen Sie sicher, dass Ihre App auf Änderungen der Ansicht korrekt reagiert, auch in den unterschiedlichen Zuständen Ihrer UI. Achten Sie insbesondere auf Layout- und Clippingprobleme, die die Benutzererfahrung Ihrer App beeinträchtigen könnten.

Eine minimale Bildschirmauflösung von 1366 x 768 ist erforderlich, um zwei Apps auf dem Bildschirm in einer angedockten Ansicht darzustellen. Ihre App muss ausgeführt werden und eine weitere App muss im Back-Stapel vorhanden sein, um Ihre App andocken zu können. Streifen Sie vom linken Bildschirmrand aus nach innen und bewegen Sie die zweite App, bis ein vertikaler Steg angezeigt wird, um die angedockte Ansicht zu ermöglichen.

Verträge und optionales Verhalten

Windows 8 bietet neue, reichhaltige und flexible Möglichkeiten zum Interagieren zwischen Apps und zum Teilen von Daten und Dateien. Apps können die Dateiauswahl verwenden, um Dateien zu öffnen oder zu speichern. Durch Implementieren der Verträge für „Dateiauswahl“ können Apps Dateien oder Speicherorte auch anderen Apps zur Verfügung stellen. Der Vertrag für „Suche“ eröffnet Apps einen wesentlichen Weg, die von einem Benutzer gesuchten Informationen anzuzeigen. Der Freigabe-Vertrag eröffnet dem Benutzer einen bequemen Weg zum Teilen von Inhalten, beispielsweise Fotos oder Links, aus einer in eine andere App.

Durch vielfältigere Optionen spielen Apps eine wichtige Rolle im Gestalten der Benutzererfahrung im Umgang mit Dateien und Daten, gleichzeitig tragen die Apps selbst eine höhere Verantwortung, dass diese Erfahrungen intuitiv vom Benutzer verwendet werden können. Im Anschluss betrachten wir einige Optionen für das Arbeiten mit Dateien und Daten sowie einige interessante Szenarien.

Vertrag für „Auswahl 'Datei öffnen'“

Unter Windows 8 können Apps die Dateiauswahl verwenden, um Dateien zu öffnen oder zu speichern. Durch Implementieren der Verträge für „Dateiauswahl“ können Apps Dateien oder Speicherorte auch anderen Apps zur Verfügung stellen.

Wenn Sie anderen Apps ermöglichen, die Dateiauswahl für die von Ihrer App unterstützten Dateitypen aufzurufen, stellen Sie sicher, dass die Miniaturansichten für die Einträge, die von Ihrer App dem Korb der Dateiauswahl hinzugefügt werden, korrekt dargestellt werden, und die vom Benutzer ausgewählten Dateien (einschließlich Inhalten) ebenfalls fehlerfrei an die App zurückgegeben werden, die die Dateiauswahl aufgerufen hat.

Sofern Ihre App eine individuelle Ansicht der Dateien bereitstellt, stellen Sie sicher, dass die Dateien ordnungsgemäß in den Korb der Dateiauswahl eingefügt und aus ihm entfernt werden.

Eine in der Dateiauswahl gehostete App kann meist angehalten, jedoch nicht beendet werden, wenn der Benutzer die App in der Dateiauswahl nicht weiter berücksichtigt. Daher sollte Ihre App die Ereignisse zum Pausieren oder Fortsetzen nicht verarbeiten, da dies die wahrgenommene Leistung verringert, wenn der Benutzer wieder zur Dateiauswahl zurück navigiert. Stattdessen sollten Sie das Ereignis zum Schließen der Dateiauswahl registrieren und so feststellen, wann Ihre App geschlossen wird und dann sicherstellen, dass die App in dieser Zeit alle erforderlichen Bereinigungen durchführt.

Vertrag für „Suche“

Der Vertrag für „Suche“ eröffnet Apps einen wesentlichen Weg, die von einem Benutzer gesuchten Informationen anzuzeigen. Sofern Ihre App eine Suche unterstützt, besteht das übliche Verhalten darin, dass der Benutzer den Suchbereich öffnet und einen Suchbegriff eingibt und Ihre App die Suche verarbeitet und alle wesentliche Ergebnisse darstellt. Wenn Sie den Vertrag für „Suche“ nicht ordnungsgemäß implementiert haben, wird die Mitteilung „Diese App kann nicht durchsucht werden“ angezeigt und jede durch den Benutzer ausgelöste Suche an die App übergeben.

Sofern Ihre App Suchvorschläge bereitstellt, sollten Sie die korrekte Darstellung, die Sichtbarkeit und die Abmessungen des Symbols überprüfen. Wenn Ihre App Eingaben zum Suchen verwendet, prüfen Sie das Öffnen des Suchbereichs, wenn die App geöffnet und die Suche begonnen wird, und ob die erwarteten Ergebnisse zurückgegeben werden.

Der Vertrag für „Suche“ unterstützt einen Hinweistext, der als grauer Beispielsuchtext im Suchfeld angezeigt wird, wenn der Benutzer das Suchfeld öffnet. Achten Sie in Ihrer App beim Festlegen des Hinweistexts für das Suchfeld darauf, dass dieser für den Benutzer hilfreich ist und wie erwartet angezeigt wird, wenn der Suchbereich in Ihrer App geöffnet wird.

Wenn Ihre App ein programmgesteuertes Festlegen des Suchbereichtexts unterstützt, überprüfen Sie die erwartete Funktionalität. Machen Sie bei geschlossenem Suchbereich etwas in Ihrer App, damit der Suchbereichtext festgelegt wird, öffnen Sie dann den Suchbereich und überprüfen Sie die Darstellung des Texts.

Drehungen können jederzeit während der Ausführung Ihrer App auftreten, auch beim Durchführen einer Suche. Schauen Sie in den Abschnitt über Drehungen weiter oben und überprüfen Sie in Ihrer App die fehlerfreie Suche während einer Drehung des Geräts.

Freigabe-Vertrag

Der Freigabe-Vertrag eröffnet Benutzern einen bequemen Weg zum Teilen von Inhalten, beispielsweise Fotos oder Links, aus einer in eine andere App. Beim Freigeben stellen Quellen-Apps die Inhalte bereit und die Ziel-Apps verwenden diese. Ihre App kann eine Rolle ausüben oder beide.

Beachten Sie, wenn Ihre App die Quellenfreigabe unterstützt, dass unterschiedliche Ziel-Apps die geteilten Daten auch unterschiedlich verarbeiten, nach ihren eigenen Szenarien. Daher können einige Inhalte wichtiger sein als andere. Wenn Sie beispielsweise gleichzeitig einen Link und ein HTML-Fragment teilen, werden einige Apps möglicherweise den HTML-Inhalt ignorieren und lieber den Link verwenden, oder auch umgekehrt. Um Benutzern eine gute Erfahrung beim Teilen mit Ihrer App zu ermöglichen, stellen Sie sicher, dass Ihr Datenpaket verschiedene Darstellungen der gleichen Inhalte enthält, und versuchen Sie das Teilen mit verschiedenen Ziel-Apps (mit Sharing content target app sample, Mail und anderen installierten Ziel-Apps zum Teilen) bereits beim Entwerfen und Testen Ihrer App.

Benutzer erwarten, dass die zu teilenden Inhalte sichtbar, mit der aktuellen Seite verknüpft, von Ihnen ausgewählt sind oder offensichtlich aus dem Kontext der App stammen. Bewegen Sie sich in Ihrer App, teilen Sie mit verschiedenen Orten, wählen Sie etwas aus und teilen Sie den ausgewählten Inhalt. Überprüfen Sie dabei, ob die geteilten Inhalte aus Ihrer App den Benutzerwartungen entsprechen.

Wenn Ihre App als Ziel zum Teilen vorgesehen ist, wird sie im Bereich „Teilen“ gehostet. Hierbei handelt es sich um eine schmalere Ansicht als eine Vollbilddarstellung und der Benutzer kann den Bereich leicht verfehlen (auch Ihre App), indem er außerhalb des Bereichs tippt. Es wurde entworfen, um einen einfachen und schnellen Umgang zum Teilen mit Ziel-Apps zu ermöglichen. Stellen Sie sicher, dass sich Ihre App in dieser Umgebung wie erwartet verhält. Je schwieriger oder verzwickter der Aufwand für den Benutzer zum Teilen wird, umso wahrscheinlicher wird es, dass er versehentlich in einen anderen Bereich tippt und die ganze Mühe umsonst war. Achten Sie auf Steuerelemente wie beispielsweise Bildlaufleisten auf der linken Seite, die ähnliche Probleme verursachen können. Es ist ebenfalls denkbar, dass ein Benutzer Ihre App beim erstmaligen Verwenden als Ziel zum Teilen öffnen möchte. Wenn Ihre App eine Authentifizierung oder eine einmalige Einrichtung benötigt, stellen Sie sicher, dass ein Benutzer dies entweder im Bereich „Teilen“ durchführen kann oder Ihre App einen hilfreichen Benutzerhinweis mit den Informationen über die notwendigen Schritte anzeigt, damit er die App zum Teilen verwenden kann.

Kann sich Ihre App als Quelle und Ziel zum Teilen verhalten, kann der Benutzer ggf. die App auch gleichzeitig als Quelle und Ziel verwenden. Überprüfen Sie, ob dies für Ihre Szenarien sinnvoll ist.

Fazit

Windows 8 bietet eine reichhaltige und umfassende Erfahrung, in der Ihre App eine Hauptrolle spielt. Neben der Benutzererfahrung in der App werden Sie möglicherweise mit Drehungen, Skalierungen, verschiedenen Ansichtszuständen und Verträgen umgehen müssen, abhängig von den in Ihrer App unterstützten Features oder den Absichten eines Benutzers beim Ausführen Ihrer App. In diesem Blogbeitrag haben wir einige der Interaktionen betrachtet, die für Apps möglicherweise Probleme aufwerfen können, und erläutert, wie Sie Ihre App durch entsprechende Tests davor schützen können. Wir hoffen, dieser Blog unterstützt Sie beim Ermitteln von Problemen, die die Benutzererfahrung in Ihren Apps beeinträchtigen können. Teilen Sie uns Ihr Feedback zu diesem Thema oder auch zu anderen interessanten Problemstellungen mit, die Ihnen begegnet sind und die Sie gerne teilen möchten.

-- Rick Muszynski, SDET, Windows

-- Patrik Lundberg, SDET, Windows

Besonderen Dank an Tom White und Jake Sabulsky für Ihre Hilfe und Beteiligung an diesem Blogbeitrag.

  • Loading...
Leave a Comment
  • Please add 4 and 1 and type the answer here:
  • Post