Optimierung für Quer- und Hochformat

Die Entwicklung von Windows 8

Einblicke in die Arbeit des Windows-Entwicklerteams

Optimierung für Quer- und Hochformat

  • Comments 0

Da Windows 8 in vielen Foren vorgestellt wurde, haben wir häufig das Querformat (Breitbild) verwendet. Dies liegt hauptsächlich daran, dass wir meist Projektionen verwenden, und dieses Format ist hierfür besser geeignet. Ein weiterer Grund ist, dass viele neuere Geräte (z. B. das Samsung-Tablet, das auf der //build/-Konferenz mit der Windows Developer Preview vorgestellt wurde) das Breitbildformat verwenden, um Anwendungen mithilfe des neuen Andockfeatures nebeneinander anzuzeigen, und dies funktioniert besser im Querformat. Wir haben intensiv an schnellen und flüssigen Übergängen beim Drehen des Bildschirms gearbeitet, und selbstverständlich ist die Benutzeroberfläche auch für das Hochformat bestens geeignet. Wie im Folgenden beschrieben, waren hierbei insbesondere die Faktoren ausschlaggebend, aufgrund derer die Benutzer das jeweilige Format bevorzugen. Wir haben sogar unsere Visual Studio- und Expression-Tools überarbeitet, um Entwicklern hervorragende Tools zum Erstellen von Anwendungen zur Verfügung zu stellen, die in jeder Ausrichtung optimal funktionieren. Dieser Beitrag zu Quer- und Hochformat unter Windows 8 wurde von David Washington vom Team für Benutzerfreundlichkeit verfasst. Sehen Sie außerdem seine Präsentation auf der //build/: APP-207T. – Steven

Bei einem Windows 8-PC handelt es sich um ein völlig neues Gerät, da die Benutzeroberfläche sowohl für kleine Touchscreens auf Tablets als auch für Laptops und Desktops geeignet ist. Bei der Neuentwicklung von Windows 8 zielen wir darauf ab, unabhängig von der Bauart und der Bildschirmausrichtung eine hervorragende Benutzerfreundlichkeit zu bieten. Dank der ergonomischen Flexibilität von Tablet-Geräten können Sie das Gerät in der Ausrichtung verwenden, die Ihren Vorstellungen und Inhalten am besten entspricht.

Einer der größten Vorteile von Tablets ist ihre Handlichkeit. Das macht sie sehr persönlich. Unabhängig davon, ob Sie die Sonntagszeitung lesen oder einen Stapel Hochzeitsbilder durchblättern, entsteht durch die Möglichkeit, das Interaktionsmedium in den Händen zu halten und zu berühren, eine emotionale Bindung. Im digitalen Zeitalter haben Geräte einen wichtigen Stellenwert im täglichen Leben. Daher haben wir bei der Planung von Windows 8 großen Wert darauf gelegt, dass in jeder beliebigen Geräteausrichtung die besten Ergebnisse erzielt werden.

Beim Entwickeln der End-to-End-Erfahrung für verschiedene Formate unter Windows 8 haben wir uns an folgenden Prinzipien orientiert:

  • Die Wiedergabe passt sich bei allen Bauarten automatisch an: Kleinbildschirme, Breitbildschirme, Laptops und Desktops.
  • Für Multitasking und Videowiedergaben im Vollbildmodus sind Breitbildformate besonders vorteilhaft.
  • Das Halten und Bedienen des Geräts kann in der jeweils komfortabelsten Position erfolgen.
  • Entwickler können mit minimalem Aufwand Anwendungen erstellen, die unabhängig von der Bauart in allen Ansichten und Ausrichtungen ausgeführt werden können.

Wir haben viel Zeit damit verbracht, zu analysieren, wie Tablet-Geräte von den Benutzern verwendet werden, sowohl in unseren Usability-Laboren als auch beim täglichen Umgang zu Hause. Dabei handelte es sich sowohl um Benutzer, die mit Tablets bereits vertraut waren, als auch um Personen, die zunächst noch keinerlei Erfahrungen mit diesen Geräten hatten, und unsere Untersuchungen dauerten mehrere Monate. Wir haben verschiedene Hand- und Körperhaltungen, Handbewegungen sowie Interaktionen mit einer Vielzahl von Anwendungen in unterschiedlichsten Gerätepositionen und -ausrichtungen erfasst. Was die Körperhaltung und die Ausrichtung der Geräte betrifft, konnten wir sehr große individuelle Unterschiede feststellen, die von zahlreichen Faktoren beeinflusst werden, wie beispielsweise anthropometrische (Handgröße und Daumenreichweite) und ergonomische Faktoren (Wiederholung und Ermüdung), Hardwarefaktoren (Erreichbarkeit von Tasten), der Verwendungsort der Tablets (Küche, Schlafzimmer oder Wohnzimmer) und wie die Geräte verwendet werden (im Stehen, auf der Couch oder am Schreibtisch). Die Anzahl der möglichen Kombinationen ist gigantisch, und Haltungen, Griffe und Ausrichtungen werden relativ häufig geändert. Die Benutzer halten ihr Gerät nicht in einer bestimmten Art und Weise in der Hand, sondern suchen sich für die jeweilige Aktivität die bequemste Position und Ausrichtung.

Benutzer auf der Couch mit einem Tablet im Hochformat

Ursprünglich gingen wir davon aus, dass die Ausrichtung im Hoch- oder Querformat im Grunde von den Vorlieben des jeweiligen Benutzers abhängt. Alle beobachteten Personen verwendeten ihre Geräte jedoch in beiden Formaten und erwarteten, dass Gerät und Benutzeroberfläche im jeweiligen Format unmittelbar funktionieren. Überraschend war, dass je vertrauter die Benutzer mit dem Gerät und ihren bevorzugten Anwendungen sind, desto mehr ist ihre Entscheidung, in welchem Format sie das Gerät betrachten, von den jeweiligen Inhalten auf dem Bildschirm abhängig. Wenn Inhalt und Benutzeroberfläche eher für das Querformat geeignet sind, verwenden die Benutzer die Anwendung wie selbstverständlich im Querformat. Sind Inhalt und Benutzeroberfläche eher auf das Hochformat ausgerichtet, wird die jeweilige Anwendung im Hochformat verwendet. Die meisten Benutzer sehen beispielsweise einen Film im Vollbildmodus lieber im Querformat und ohne schwarze Balken. Längere Artikel oder Webseiten werden hingegen bevorzugt im Hochformat gelesen, da der Bildlauf in diesem Modus weniger häufig verwendet werden muss. Auch die Benutzer selbst gaben an, dass es stark von der jeweiligen Anwendung abhängig ist, ob sie das Hoch- oder Querformat verwenden. Wir erhielten viele Fragen und Kommentare zu dem Thema, ob Windows 8 besser für das Querformat oder das Hochformat geeignet ist. Unserer Meinung nach sind beide Ausrichtungen wichtig, und die Benutzerfreundlichkeit ist sowohl im Quer- als auch im Hochformat hervorragend. Wir wollten eine Benutzeroberfläche entwickeln, die nicht für eine spezielle Haltung und Ausrichtung optimiert ist, sondern unabhängig davon, wie das Gerät gehalten wird, sinnvoll ist und sich der jeweiligen Anwendung und deren Inhalt anpasst.

In Bezug auf Hoch- und Querformat haben wir uns Folgendes zum Ziel gesetzt:

  • Das Tablet kann entsprechend der Aufgabe und der ergonomischen Anforderungen einfach gedreht werden.
  • Die Rotation erfolgt unter Windows schnell und flüssig.
  • Die Rotation erfolgt für das gesamte Windows-System und die Anwendungen einheitlich und vorhersehbar, sodass der Benutzer stets die Kontrolle behält.
  • Entwicklern steht entsprechend der jeweils gewünschten Ausrichtung eine einfache Methode zum Erstellen von Hoch- oder Querformatlayouts in hoher Qualität zur Verfügung.

Windows im Querformat

Einige haben gefragt, warum wir auf der //build/-Konferenz die Windows 8-Benutzeroberfläche meist im Querformat vorgestellt haben. Windows 8 wird auf allen PCs und nicht nur auf Tablets verwendet werden. Das Betriebssystem wird auf Hunderten von Millionen Laptops und Desktops ausgeführt werden, die teilweise noch für Windows 7 oder neu für Windows 8 entworfen sind, und meist ausschließlich das Querformat verwenden. Das Quer- und Breitbildformat ist außerdem für Multitasking (zwei Anwendungen werden nebeneinander angedockt) und für die Videowiedergabe im Vollbildmodus ohne schwarze Streifen besser geeignet. Darüber hinaus projizieren wir viele Präsentationen auf große Leinwände, die im Querformat besser aussehen.

Wir haben Windows 8 so entworfen, dass es in allen Ausrichtungen ergonomisch komfortabel ist. Wir haben herausgefunden, dass das Tablet im Querformat am bequemsten in beiden Händen gehalten wird, während die Daumen den Bildschirm berühren. Aus diesem Grund haben wir die meisten Bildschirmelemente so entworfen, dass sie mit den Daumen leicht zugänglich sind. Außerdem haben wir das System für den horizontalen Bildlauf optimiert, der sich sowohl im Quer- als auch im Hochformat schnell und flüssig anfühlt.

Im Querformat angedockte Anwendungen "AllThingsD" und "Stocks"

Windows im Hochformat

Windows funktioniert auch hervorragend im Hochformat. Wir haben uns ausführlich mit verschiedenen Szenarien auseinandergesetzt, wie z. B. dem Lesen von Nachrichten im Webbrowser, dem Anzeigen von Fotos im Hochformat und dem Navigieren durch lange Listen von E-Mail-Nachrichten, und unsere Erfahrungen sind in den Entwurf eines Systems eingeflossen, das in beiden Ausrichtungen nahtlos funktioniert. Wir haben Systemelemente wie Tastatur, Dateiauswahl und Kategorien so angepasst, dass Sie sowohl im Hoch- als auch im Querformat komfortabel zu bedienen sind. Uns war wichtig, dass die Bedienung des Systems nach einem Wechsel ins Hochformat nicht neu erlernt werden muss.

Anwendung "Stocks" im Hochformat mit 3:4, 10:16 und 9:16

Rotation

Da eines unserer Ziele darin bestand, den Rotationsübergang zwischen Quer- und Hochformat schnell und flüssig zu gestalten, haben die verschiedenen Windows-Teams einen Schwerpunkt auf die Optimierung des Übergangspfads gelegt, von der Beschleunigungsmesserhardware bis hin zum Grafikstapel für die Anwendung.

Ein wichtiger Teil des Übergangs zwischen Querformat und Hochformat ist die Animation. Die Animation choreografiert den reibungslosen Übergang zwischen zwei Layoutstatus. Das Timing der Animation ist wichtig für einen reaktionsschnellen und flüssigen Übergang. Diese Animation wird von Desktopfenster-Manager orchestriert, der die Grundlage für die flüssigen Animationen in Windows 7 und Windows 8 bildet.

Die Zeitachse veranschaulicht, wann der Beschleunigungsmesser sich zu bewegen beginnt, wann das Gerät ins Hochformat rotiert wird, wann sich der Beschleunigungsmesser stabilisiert (bei 100 Millisekunden) und wann die Zeitachse abgeschlossen ist (bei 500 Millisekunden)

Wir arbeiten kontinuierlich daran, die Rotation so stabil und vorhersehbar wie möglich zu gestalten, da wir wissen, wie störend eine unruhige Rotation sein kann. Bevor die Rotation gestartet wird, wartet das System, bis sich der Beschleunigungsmesser stabilisiert, um versehentliche Rotationen zu verhindern. Wir wollten Ihnen auch die Kontrolle über die Rotation geben, damit sie nicht unbeabsichtigt ausgelöst wird. Wir haben eine Hardwareausrichtungssperre eingeführt, mit der die "Schwerkraft aufgehoben" und die gewünschte Ausrichtung beibehalten werden kann.

Befehle zum Aktivieren/Deaktivieren der Rotationssperre

Unterschiedliche Bildschirme

In einem späteren Beitrag werden wir ausführlich behandeln, wie sich Windows 8 aus der Entwicklerperspektive an die Größe unterschiedlicher Bildschirme anpasst. Es lohnt sich jedoch auch, im Zusammenhang mit Quer- und Hochformat ein wenig über die Bildschirmgröße zu sprechen. Windows 8 wird auf PCs mit unterschiedlichen Bildschirmgrößen, Auflösungen und Seitenverhältnissen ausgeführt werden – von nahezu quadratischen 4:3- bis hin zu breitformatigen 16:9-Bildschirmen. Unsere Skalierungsplattform ermöglicht, dass sich Windows-Inhalte und Anwendungen nahtlos an diese unterschiedlichen Bildschirme anpassen und der Platz optimal ausgenutzt wird. Sie können viele dieser Geräte sowohl im Hoch- als auch im Querformat verwenden. Diese Vielfalt ist ausschließlich unter Windows möglich. Sie können das Gerät und die Ausrichtung auswählen, die Ihren Anforderungen am besten entspricht.

Querformat mit 4:3, 16:10 und 16:9

Die minimale Auflösung, mit der Windows 8-Anwendungen im Metro-Stil ausgeführt werden können, ist 1024 x 768. Wir haben dieses Format gewählt, da es eine verbreitete Größe im Internet ist und die große Mehrheit (98,8 %) der Windows-Benutzer diese oder eine höhere Auflösung anzeigen können (siehe nachfolgendes Diagramm).

Über 42 % der Windows 7-Benutzer verfügen über eine Bildschirmauflösung von 1366 x 768. Alle anderen Auflösungen liegen bei 12 % oder weniger.  1024 x 600 und 1280 x 720 unterstützen nur Desktopanwendungen, während alle anderen Auflösungen von sämtlichen Windows 8-Anwendungen unterstützt werden.

Wir glauben, dass es wichtig ist, eine Mindestauflösung für Anwendungen festzulegen, da Entwickler dadurch die kleinste Hauptansicht ihrer Anwendung entwerfen können, ohne dass es zu einer Fragmentierung zwischen Geräten kommt. Durch diese Mindestgröße wird außerdem sichergestellt, dass Benutzer keine abgeschnittenen Anwendungslayouts wegen kleiner Bildschirmgrößen zu sehen bekommen.

Die Auflösung 1366 x 768 unterstützt alle Features von Windows 8, einschließlich Multitasking mit Andocken. Wir haben diese Auflösung gewählt, da sie die Breite einer angedockten Anwendung mit 320 px (dies ist auch die Breite vieler Telefonlayouts) neben einer Hauptanwendung mit 1024 x 768 (eine häufig verwendete Größe im Internet) aufnehmen kann.

Diese Beschränkungen werden zur Laufzeit erzwungen. Wir brechen mit der bisherigen Praxis, eine Problemumgehung hierfür anzubieten, da die Hauptmotivation darin besteht, sicherzustellen, dass Anwendungen im Metro-Stil für den vollen Funktionsumfang bei einer bestimmten veröffentlichten Auflösung entworfen werden. In der Developer Preview gab es abgesehen von der Mitteilung auf der Downloadwebsite keine brauchbare Laufzeitwarnung, und dies werden wir in der Betaversion natürlich beheben. Wir haben zur Kenntnis genommen, dass leider einige Benutzer virtueller Computern mit einer Auflösung von 600 x 800 oder 1024 x 600-Netbooks unzufrieden waren. Es ist beachtenswert, dass die Ablaufrate von 1024 x 600-Computern sehr niedrig ist, da sich die Bildschirmauflösungen am unteren Ende Auflösungen von 1280 x 800 annähern, die Anwendungen im Metro-Stil ohne Andocken unterstützen. Diese Auflösung ist weiterhin abgeschlagener Zweiter für voll funktionsfähige Auflösungen, und wir erwarten mit der Markteinführung neuer PCs eine weitere Entwicklung hin zu höher auflösenden Bildschirmen.

Rotation und Entwickler

In Windows 8 stehen Anwendungen im Mittelpunkt, daher haben wir es Entwicklern so einfach wie möglich gemacht, Ansichten sowohl im Quer- als auch im Hochformat zu erstellen. Wie auf jeder anderen Plattform können Entwickler wählen, welche Ausrichtungen sie für ihre Anwendungen unterstützen und wie die Oberfläche angepasst werden soll. Wir erwarten, dass die meisten Entwickler eine Ansicht im Querformat bereitstellen, da vorhandene Laptops und Desktops die größte Zahl an PCs auf dem heutigen Markt stellen. Da die Darstellung einer Anwendung jedoch sowohl Quer- als auch Hochformat unterstützen kann, stellt die Unterstützung des Hochformats nur eine inkrementelle Menge an Layoutarbeit dar.

Mithilfe der gleichen Techniken wie für die Unterstützung des Andockfeatures oder unterschiedlicher Bildschirmgrößen, können Entwickler auf einfache Weise Hochformatansichten erstellen. HTML5-Entwickler werden ihren Layoutstil über CSS-Medienabfragen an die Ausrichtung des Systems binden, und XAML-Entwickler das Layout abhängig von den Anzeigestatusereignissen ändern. Sowohl in HTML als auch in XAML unterstützen alle adaptiven Steuerelemente und Vorlagen, die die Plattform bereitstellt, sowohl Hoch- als auch Querformat. Außerdem wird die Übergangsanimation automatisch vom System gehandhabt, ohne zusätzlichen Aufwand für Entwickler. Wenn es Inhalte in einer Anwendung gibt, die für eine bestimmte Ausrichtung besser geeignet sind, können Entwickler diese Ausrichtung bevorzugen, und das System behält für die Anwendung diese Ausrichtung bei (soweit vom Gerät unterstützt).

Zum Testen von Anwendungen ermöglichen Visual Studio 11 und Expression Blend Entwicklern, ihre Anwendungen im Hoch- und Querformat sowie mit verschiedenen Bildschirmgrößen und Seitenverhältnissen zu testen, auch wenn sie keinen Zugang zu einem Tabletgerät haben.

Quer- und Hochformat im Visual Studio 11-Simulator

Sie können das Gerät nach Ihren Anforderungen auswählen, es auf die komfortabelste Weise halten, und die Darstellung wird an diese Haltung angepasst. Anwendungen können Breitbild mit Multitasking nutzen und dennoch auch im Hochformat gut aussehen – mit minimalem zusätzlichem Aufwand.

Sehen Sie ein kurzes Video, das den Übergang vom Quer- zum Hochformat zeigt.


Laden Sie dieses Video herunter, und spielen Sie es in einem geeigneten Media-Player ab:
MP4 in hoher Qualität | MP4 in niedriger Qualität

Probieren Sie es aus!

Vielen Dank,
David

  • Loading...
Leave a Comment
  • Please add 3 and 8 and type the answer here:
  • Post