Das Bearbeiten per Fingereingabe in Office Web Apps auf Windows 8- und iOS-Tablets

Veröffentlichung des Originalartikels: 20.08.2012

Vor einigen Wochen haben wir die neuen Office Web Apps vorgestellt. Wir haben neue Features eingeführt, die Leistungsfähigkeit userer Apps verbessert und arbeiten weiter daran, Ihnen den Zugang zu Ihren Dokumenten an jedem Ort in einer Vielzahl an beliebten Browsern zu ermöglichen.

Wir freuen uns, Ihnen mit der Fingereingabe-Unterstützung „Touch“ eine neue Dimension der Eingabe vorstellen zu dürfen, mit der die umfassenden Anzeige- und Bearbeitungsfunktionen der Office Web Apps nun auch für Tablets und Browser, die Fingereingabe unterstützen, verfügbar sind. Dazu zählen u. a. IE unter Windows 8 und mobile Safari unter iOS.

 Beim Entwickeln der Office Web Apps mit Fingereingabe-Unterstützung wollten wir die folgenden Ziele erreichen:

• Benutzer sollten die Office Web Apps mit Fingereingabe-Unterstützung sofort problemlos nutzen können.
• Benutzer sollten nicht erst lernen müssen, wie man auf einer neuen Benutzeroberfläche navigiert.
• Benutzer sollten einfach zwischen Fingereingabe und Maus-/Tastatur-Eingabe hin und her wechseln können.
• Der gesamte Funktionsumfang von Office Web Apps, einschließlich der Bearbeitungstools, sollte auf Touch-Geräten wie Tablets und Touch-Bildschirmen verfügbar sein.

Die Entwicklung einer für die Fingereingabe optimierten Benutzeroberfläche stellte uns vor spannende Herausforderungen. In diesem Blogbeitrag möchte ich beschreiben, wie wir unsere Ziele erreicht haben.

Entwicklung des Frameworks für Touch

Wir haben ein einheitliches Framework entwickelt, dass im Einklang mit den von uns unterstützten Plattformen sowie mit Touch-Interaktionsrichtlinien für Microsoft Office-Desktopanwendungen, Windows 8 und iOS ist.  Wir haben dabei auch die Erfahrungen und typischen Bewegungen berücksichtigt, die Benutzer beim Verwenden bestimmter Touch-Geräte erwarten.

Beim Entwickeln des plattformübergreifenden Benutzererlebnisses haben wir die folgenden Prinzipien angewendet:

• Schaffen eines angenehmen Benutzererlebnisses bei ausschließlicher Verwendung der Fingereingabe.
  • Schwerpunkt auf Szenarien und Erfahrungen mit Touch-Geräten.
  • Benutzer sollen voller Vertrauen mit der Touch-Benutzeroberfläche arbeiten.
  • Entwickeln von einfachen und intuitiven Gesten.
  • Wirksamer Einsatz von Browserfunktionen.
• Schaffen eines herausragenden Benutzererlebnisses bei kombinierter Verwendung von Fingereingabe, Maus und Tastatur.
  • Benutzer können einfach zwischen Fingereingabe und Maus-/Tastatur-Eingabe hin und her wechseln, um mit der Anwendung zu interagieren.
  • Die Anwendung reagiert auf die Eingabe.

Gehen wir im Folgenden näher auf die einzelnen Prinzipien ein:

Für die Fingereingabe optimierte Szenarien und Benutzererlebnisse

Ich habe diesen Blogbeitrag über mehrere Tage hinweg geschrieben und ihn mehrmals bearbeitet. Wie die meisten von Ihnen habe ich dabei nicht die ganze Zeit am Schreibtisch gesessen. Auch habe ich keinen Laptop mit zum Fechttraining meiner Kinder genommen. Ich habe am Schreibtisch auf Arbeit mit dem Schreiben des Blogbeitrags begonnen und ihn auf meinem Tablet weitergeschrieben, da das Dokument dank Skydrive überall verfügbar war.

Auf der Grundlage von Trends und Mustern in der Verwendung und im Verhalten, die aus einer Benutzerstudie hervorgingen, konnten wir zwei Szenarien bestimmen: 

1.        Das Lesen und Konsumieren von Dokumentinhalten sowie das Anzeigen von Präsentationen und Arbeitsblättern soll schnell, angenehm und spannend sein.

• Das Lesen und Konsumieren von Informationen war für die meisten Benutzer die Lieblingsbeschäftigung auf einem Tablet.
• Die Benutzer durchsuchen Dokumente und Präsentationen und kommentieren Inhalte, die von Kollegen und Freunden geteilt wurden.
• Andere wiederum wollten z. B. alle Informationen zum Kauf eines Autos in OneNote Web App sammeln und die Informationen beim Verhandeln auf Ihrem Tablet zur Hand haben.

 2.        Wenn Benutzer Dokumente hinzufügen, ändern und überarbeiten, sollen die reduzierten Bearbeitungsfunktionen höchst zufriedenstellende Ergebnisse ermöglichen.

• Mütter wie ich wollen schnell ein Dessert in das vom Eltern-/Schüler-/Lehrerbeirat (Parent Student Teacher Association, PTSA) geteilte Arbeitsblatt eintragen, das mein Kind dann zum gemeinsamen Büffet mitbringt.

• Schüler und Studenten möchten schnelle Änderungen an der Hausarbeit vornehmen, an der sie gerade arbeiten, und gemeinsam an der Präsentation arbeiten, an der noch gefeilt werden muss.

Voller Vertrauen mit der Touch-Benutzeroberfläche arbeiten

Es gibt kaum etwas Frustrierenderes, als ein Steuerelement auf der Benutzeroberfläche zu berühren, das man gar nicht auswählen wollte. Das Vertrauen in die App steigt, wenn man zuverlässig das Steuerelement oder den Bereich der Benutzeroberfläche auswählen kann, das bzw. den man ursprünglich auswählen wollte. Wir wollen, dass Sie genau dieses Vertrauen beim Arbeiten mit unseren Office Web Apps haben.

Mit der Maus lässt sich eine Benutzeroberfläche präzise und kontrolliert steuern. In Kombination mit einer physisch vorhandenen Tastatur vermittelt sie dem Benutzer das nötige Vertrauen, um mit hoher Präzision Einfügemarken zu setzen, Elemente auszuwählen, Schaltflächen anzuklicken sowie Kontextmenüs, Dropdownmenüs und andere Softwareelemente zu aktivieren.

Im Vergleich dazu können menschliche Finger alle möglichen Größen und Formen aufweisen. Sie sind ungeschickt beim Setzen von Einfügemarken und unpräzise beim Steuern der Interaktion mit der Benutzeroberfläche.

Wir wollten erreichen, dass Benutzer die Benutzeroberfläche ohne Angst berühren können und immer die gewünschten Ergebnisse erhalten, so wie es bei der Steuerung per Maus der Fall ist.

Wenn man Elemente so gestalten möchte, dass sie leicht zu berühren sind, kommt es auf die Größe des Elements an. Viele Benutzeroberflächenelemente wie Menüband-Steuerelemente und Kontextmenüs lagen deutlich außerhalb der in Windows 8 und Microsoft Office definierten Größenspezifikationen für „einfach zu berührende“ Elemente.

All diese Elemente wurden in den neuen Office Web Apps so gestaltet, dass sie spielend leicht per Fingereingabe bedient werden können. Mit großer Sorgfalt wurde ein ausgewogenes Verhältnis zwischen der Größe der Benutzeroberfläche und dem für das eigentliche Dokument nutzbaren Platz sichergestellt, der so groß wie möglich sein sollte.

Achten Sie auf die größeren und leichter per Fingereingabe zu bedienenden Schaltflächen sowie die großzügigen Freiräume zwischen den Steuerelementen in der Nahansicht:

 Die Registerkarte „Home“ (Start) in Excel Web App:

Die Registerkarte „Insert“ (Einfügen) in PowerPoint Web App:

Die Registerkarte „Insert“ (Einfügen) in OneNote Web App:

Das Farbauswahlfenster in Word Web App:

Verwendung einfacher und intuitiver Gesten

Eines unserer Hauptziele war es, dass Benutzer Office Web Apps mit einfachen und intuitiven Gesten sofort auf ihren Tablets nutzen können, anstatt vorher komplexe Gesten explizit erlernen zu müssen.

Man muss nur die folgenden fünf Gesten kennen, um Office Web Apps sofort nutzen zu können:

Sehen wir uns an, wie Sie mit den Gesten in den Office Web Apps arbeiten:

Scrollen und Durchsuchen des Dokuments

Wenn Sie ein Dokument schnell durchsuchen möchten, können Sie mit Streif- und Streichbewegungen schnelle Scrollbewegungen ausführen. Dabei wird mit schneller und flüssiger Beschleunigung durch die Dokumentinhalte gescrollt. Bei Bedarf kann die Scrollbewegung jederzeit mit einer Tippbewegung angehalten werden.

Wir haben die systemeigene Browserfunktionalität dazu verwendet, um in den Lese- und Bearbeitungsansichten von Word Web App beschleunigtes Scrollen zu ermöglichen.

In PowerPoint Web App können Sie die gleiche Streifbewegung dazu verwenden, um zwischen Folien zu wechseln.  

Vergrößern und Verkleinern:

Sie können die Benutzeroberfläche vergrößern oder verkleinern, indem Sie zwei Finger auseinander- oder zusammenführen (Spread/Pinch).

Eingabe:

Durch einfaches Tippen in die Bearbeitungsansicht von Office Web Apps wird eine Einfügemarke gesetzt und die Tastatur wird angezeigt, sodass Sie mit der Eingabe beginnen können.

Die Einfügemarke in Word Web App:

Achten Sie auf die Einfügemarke. Sie unterscheidet sich von der Einfügemarke bei Verwendung von Maus und Tastatur. Das kreisförmige Ziehelement mit Einfügemarke ermöglicht Ihnen ein einfaches Aufnehmen und Ziehen des Elements, um eine Auswahl zu treffen.

Die Eingabe ist grundlegend für das Bearbeiten und somit ist ein angenehmes Benutzererlebnis hier von entscheidender Bedeutung.

Setzen der Einfügemarke

Da der Finger ein äußerst unpräzises Eingabegerät ist, mussten wir einen Weg finden, wie der Benutzer die Einfügemarke zuverlässig an die gewünschte Stelle setzen kann.

Die meisten Benutzer ändern entweder den Anfang oder das Ende eines Worts.

Also wenden wir beim Setzen der Einfügemarke eine Art „Buchstützenansatz“ an:

Bei einmaligem Antippen eines Worts wird das nächstgelegene Ende (Wortanfang oder Wortende) berechnet und die Einfügemarke wird an die entsprechende Stelle gesetzt. Wird das gleiche Wort erneut angetippt, wird die Einfügemarke genau an die Stelle gesetzt, an der die Berührung erfasst wurde.

Auswahl

Wenn Sie Text und Objekte auswählen, können Sie sie bearbeiten, Formatierungen übernehmen oder andere Aktionen ausführen. Bei Verwendung von Maus und STRG-/UMSCHALTTASTE auf der Tastatur können Benutzer diese Aktionen äußerst effizient ausführen, da sie sich die Maus zielgenau steuern lässt.

Bei der Fingereingabe dient das Ziehelement an der Einfügemarke als ein Anfasspunkt, den Sie entsprechend ziehen können, um eine neue Auswahl zu treffen. Sie können auch eine bestehende Auswahl ändern, indem Sie den ausgewählten Bereich anhand der Ziehelemente auf beiden Seiten vergößern oder verkleinern.

Ziehen des Ziehelements zum Auswählen von Text in Word Web App:

 Ziehen zum Auswählen der Größe einer einzufügenden Tabelle:

Anwenden von Aktionen im Kontext:

Kontextmenüs bieten einen schnellen und einfachen Weg, um Aktionen in einem bestimmten Kontext anzuwenden. Möglicherweise sind Sie bereits mit der Verwendung von Kontextmenüs in Office Web Apps mit der Maus vertraut. Dabei wird das Kontextmenü per Rechtsklick angezeigt.

Anzeigen von Kontextmenüs in der Word Web App-Bearbeitungsansicht per Maus:

Wir haben das Aufrufen des Kontextmenüs äußerst einfach gestaltet. Sie müssen lediglich eine Auswahl antippen, um das Kontextmenü anzuzeigen. Wenn Sie einen Bereich außerhalb des Kontextmenüs antippen, wird es wieder ausgeblendet.

Antippen einer Auswahl zum Anzeigen des Kontextmenüs:

Achten Sie auf den großzügigen Freiraum zwischen den Steuerelementen des Kontextmenüs für die Fingereingabe.

An einer Einfügemarke können Sie das Kontextmenü anzeigen, indem Sie Ihren Finger kurz auf die Einfügemarke halten:

In der Word Web App-Leseansicht wird durch einmaliges Antippen eine Zeile ausgewählt. Wenn Sie einmal auf die Auswahl tippen, wird das Kontextmenü angezeigt.

Auswahl und Kontextmenü im Word Web App Viewer:

Schaffen eines herausragenden Benutzererlebnisses bei kombinierter Verwendung von Fingereingabe, Maus und Tastatur.

Tablets können per Fingereingabe, Maus und Tastatur bedient werden.

Unter Windows 8 können Office Web Apps can per Fingereingabe oder mit Maus und Tastatur bzw. mit einer Kombination aus beiden verwendet werden. Unter iOS lassen sich die Office Web Apps am besten per Fingereingabe bedienen.

Fingereingabemodus

In den Office Web Apps kann die Benutzeroberfläche wie folgt unterteilt werden:

• Feststehende Benutzeroberfläche

Diese Benutzeroberfläche ist immer vorhanden und wird durchgehend angezeigt.

Beispiel: Navigationsbereich, Menüband in OneNote Web App.

• Kontextbasierte Benutzeroberfläche

 Diese Benutzeroberfläche kann je nach Bedarf ein- oder ausgeblendet werden.

Beispiel: Kontextmenüs.

Wenn Sie auf einem Touch-Gerät arbeiten, wird in Office Web Apps standardmäßig die feststehende Benutzeroberfläche im Fingereingabemodus angezeigt. Sie können den Modus durch Umschalten der Schaltfläche für den Fingereingabemodus ändern, um die Benutzeroberfläche per Maus steuern zu können.

Die Schaltfläche für den Fingereingabemodus wird in der Symbolleiste für den Schnellzugriff oben links in den Office Web Apps angezeigt, sodass Sie bequem zwischen Fingereingabe und der präzisen Bedienung per Maus umschalten können.

Schaltfläche für den Fingereingabemodus: (auf EIN gestellt) zeigt die für die Fingereingabe optimierte Benutzeroberfläche an:

Eine Nahansicht der Schaltfläche für den Fingereingabemodus:

Kontextmenüs, Menüband-Flyouts und Menüs, die nach Bedarf angezeigt werden, werden in dem Modus angezeigt, in dem Sie aktiviert wurden, also im Fingereingabemodus oder Mausmodus.

Zusammenfassung:

Ich möchte Sie ermutigen, das neuen Office Web Apps-Preview unter skydrive.com oder unter Office 365 Preview auf einem Touch-Gerät mit Windows 8 oder auf dem iPad mit iOS auszuprobieren. 

Wir würden gern wissen, welche Erfahrungen Sie gemacht haben, und würden uns über Ihr Feedback freuen.  In der oberen rechten Ecke der App und im Menü „Datei“ gibt es eine Option zum Übermitteln von Feedback.

Wir arbeiten konstant daran, das Benutzererlebnis zu verfeinern und zu optimieren und hören aktiv auf das, was Sie mögen und was Sie nicht mögen.

 Renu Devi

Program Manager, Office Web Apps

Es handelt sich hierbei um einen übersetzten Blogbeitrag. Sie finden den Originalartikel unter Bringing touch editing to Office Web Apps on Windows 8 and iOS tablets