Windows 8 および iOS タブレットの Office Web Apps でタッチ編集を使用する
原文の記事の投稿日: 2012 年 8 月 20 日 (月曜日)
数週間前に新しい Office Web Apps (英語) を紹介しました。この Office Web Apps では新しい機能が追加され、アプリのパフォーマンスが向上しています。また、よく使用されるさまざまなブラウザーのどこからでも、引き続きドキュメントにアクセスすることができます。
今日は、入力操作に新風を吹き込む "タッチ" について紹介し、Office Web Apps の本格的な表示および編集機能を、Windows 8 の IE、iOS のモバイル Safari など、タッチをサポートするタブレットやブラウザーに取り入れていきます。
タッチ用に Office Web Apps を設計するときは、次の目標の達成を目指します。
- ユーザーがタッチ対応 Office Web Apps をすぐに起動して実行できるようにする
- ユーザーが新しいユーザー インターフェイスの操作を覚えなくても使えるようにする
- ユーザーがタッチ操作とマウス/キーボード操作を簡単に切り替えられるようにする
- Office Web Apps のすべての機能セット (編集ツールを含む) を、タブレット、タッチ モニターなどのデバイスで有効にする
ユーザー インターフェイスをタッチ可能に、かつタッチ入力できるように設計する作業はやりがいがありました。この投稿では、これをどのように実現したかについて説明します。
タッチ用フレームワークを開発する
Microsoft では、サポートするプラットフォームと、Microsoft Office デスクトップ アプリケーション、Windows 8、および iOS のタッチ操作のガイドラインに合わせて統合フレームワークを開発しました。また、その統合フレームワークと、ユーザーが特定のタッチ デバイスを使用するときに期待する操作性やタッチ操作とのバランスも考えました。
Microsoft では次の原則に従って、複数のプラットフォームでのユーザー エクスペリエンスを構築しました。
- タッチ入力のみで快適なエンドツーエンド エクスペリエンスを提供する
- タッチ デバイスでのシナリオと操作に焦点を当てる
- ユーザー インターフェイスに正確にタッチできる
- シンプルかつ直観的なタッチ操作を確立する
- ブラウザーの機能を利用する
- タッチ、マウス、およびキーボードを組み合わせることで、良好なエンドツーエンド エクスペリエンスを確保する
- ユーザーがタッチ、マウス、キーボードの各操作を簡単に切り替えて、アプリケーションを操作できる
- アプリケーションが入力に応答する
各原則について詳しく見ていきましょう。
タッチ向けに最適化されたシナリオと操作
私はこの投稿の執筆に数日かけ、校閲を重ねました。ご多分に漏れず、私もいつもデスクの前にいるとは限らず、また、子供のフェンシングの練習にノート PC を持っていくこともしませんでした。仕事場のデスクトップで投稿の執筆を開始し、Skydrive にドキュメントをアップすれば、そのドキュメントはどこからでも利用できます。編集作業の続きは、タブレット上で行うことができました。
ユーザー調査によって得られた利用状況と操作の傾向/パターンから、次の 2 つのシナリオをターゲットにすることにしました。
1. ドキュメントのコンテンツを読み取って使用し、プレゼンテーションおよびスプレッドシートを表示する処理が、高速かつ快適、そして魅力的になる。
- 情報を読み取って利用する作業は、タブレットのユーザーのほとんどが好んで行います。
- ユーザーはドキュメントおよびプレゼンテーションに目を通し、同僚や友人が共有するコンテンツにコメントを追加します。
- 自動車購入に関する調査で入手した情報を OneNote Web App にまとめ、タブレット上で常に利用できるようにし、車購入時の交渉で使いたいと考えている人がいました
2. 簡易編集は、ドキュメントを追加、変更、および修正するユーザーに対して高い満足度をもたらす。
PTA 主催の学校のポットラック パーティに持っていくお菓子を、早くサインアップ シートに記入するように母がせかします。
学生達は、作業しているレポートを迅速に編集したがっています。また、洗練させる必要があるプレゼンテーションで共同作業を行いたいと思っています。
確かなタッチ
ユーザー インターフェイスで意図していないコントロールに触れてしまうほどイライラすることはありません。ユーザー インターフェイスの思ったとおりの場所またはコントロールに正確にタッチできれば、アプリの信頼性も上がります。Office Web Apps を使用すると、正確かつ確実に操作することができます。
マウスは、ユーザー インターフェイスを制御された方法で正確に操作できるようにするツールです。このマウスと物理キーボードを組み合わせることで、挿入ポイントの配置、選択、ボタンの押下、コンテキスト メニュー、ドロップ ダウン、UI の起動などの作業を、正確かつ確実に行うことができます。
対照的に、人間の指は形もサイズもさまざまです。挿入ポイントに指を置くのは難しく、ユーザー インターフェイスの操作を正確には制御できません。
Microsoft では、ユーザーがユーザー フェイスに迷わずタッチし、マウスでの操作と同じように、期待する結果を得られるようにすることを目的としています。
タッチが簡単かどうかは、そのタッチ対象のサイズによります。リボン コントロール、コンテキスト メニューなど、ユーザー インターフェイス要素の多くは、Windows 8 および Microsoft Office で定義された "タッチ可能" なサイズ制限内にうまく収まっています。
これらの要素はすべて、新しい Office Web Apps でタッチしやすいように作られています。UI の物理サイズを大きくすることと、実際のドキュメントのコンテンツの領域をできるだけ確保すること、この 2 つのバランスには細心の注意を払ってください。
拡大されタッチしやすくなったボタンと、コントロール間のスペースが適切に空いていることを、このクローズ アップで確認してください。
Excel Web App の [ホーム] (Home) タブ:
PowerPoint Web App の [挿入] (Insert) タブ:
OneNote Web App の [ホーム] (Home) タブ:
Word Web App のカラー ピッカー:
シンプルかつ直観的なタッチ操作を使用する
習得が必要な複雑な操作ではなく、シンプルで直観的なタッチ操作によって、タブレット上の Office Web Apps をすぐに使用できるようにすること、これが Microsoft の主な目標の 1 つでした。
次の 5 つのアクション以外は何も要りません。これだけで開始することができます。
Office Web Apps でこのアクションを使用する方法を見ていきましょう。
ドキュメントをスクロールおよび確認する
ドキュメントをすばやくスキャンする必要がある場合は、迅速なスクロール動作でスワイプ/フリックします。ドキュメントのコンテンツは、すばやく流れるように加速的にスクロールされます。スクロールの動きを止めるには、タップします。
ネイティブのブラウザー機能を使用して、閲覧表示および編集表示の Word Web App でスクロールの加速の設定を有効にしました。
PowerPoint Web App では、同じスワイプ アクションを使用して、スライドを変更できます。
拡大/縮小:
2 本の指を広げたり、つまむように動かしたりすることで、ユーザー インターフェイスを拡大および縮小できます。
入力:
Office Web Apps の編集表示で 1 回タップすると、挿入ポイントとキーボードが表示されるので、その挿入ポイントから入力を開始します。
Word Web App の挿入ポイント:
挿入ポイントが、マウスやキーボードを使っているときに表示されるものとは違うことに注意してください。挿入ポイントに示される丸い "グリッパー" によって、その挿入ポイントからのドラッグ選択を簡単に行うことができます。
入力は編集の基本的な操作です。したがって、快適な操作性を確保することが重要です。
挿入ポイントの配置
入力ツールとしての指に正確性を求めることはできません。したがって、ユーザーが意図した場所に挿入ポイントを確実に配置する方法を考え出す必要がありました。
ほとんどのユーザーが、単語の先頭または末尾のどちらかを変更します。
したがって、"ブックエンド" アプローチを使用して、挿入ポイントを配置します。
既存の単語を一度タップすると、一番近くにある単語の端 (単語の先頭または単語の末尾) が計算され、その場所に挿入ポイントが配置されます。同じ単語をもう一度タップすると、タッチが登録されている正確な場所に挿入ポイントが絞り込まれます。
選択
テキストおよびオブジェクトを選択すると、その選択したテキストやオブジェクトに対する書式設定など、さまざまな操作を行うことができます。こうした操作は、マウスや、キーボードの Ctrl キーと Shift キーを使って行うのが効率的です。マウスやキー操作の方が対象を正確に指定できるからです。
タッチ環境では、挿入ポイントの "グリッパー" がハンドルとして機能します。新しい範囲を選択するには、挿入ポイントのグリッパーをドラッグします。また、どちらかの端にあるグリッパーを使用して選択範囲を縮小または拡大し、既存の選択範囲を変更することもできます。
Word Web App でグリッパーをドラッグしてテキストを選択:
ドラッグによってディメンションを選択し表を挿入:
コンテキストへのアクションの適用:
コンテキスト メニューを使用すると、特定のコンテキストですばやく簡単にアクションを適用できます。コンテキスト メニューの使い方については、Office Web Apps のマウスによるコンテキスト メニューの操作で既に慣れているでしょう。このメニューは、マウスを右クリックすると表示されます。
Word Web App 編集表示のマウスによる右クリック コンテキスト メニュー:
コンテキスト メニューは、選択部分をタップするだけで簡単に表示することができます。コンテキスト メニュー以外の場所をタップすると、メニューは閉じます。
選択範囲をタップすることで表示されるコンテキスト メニュー:
コンテキスト メニューのコントロールには、タッチしやすいように十分なスペースが空いていることに注意してください。
挿入ポイントでコンテキスト メニューを表示するには、指を短く押下します。
Word Web App 閲覧表示では、1 回タップすると、1 行選択されます。選択範囲を 1 回タップすると、コンテキスト メニューが表示されます。
Word Web App Viewer の選択範囲とコンテキスト メニュー:
タッチ、マウス、およびキーボードを組み合わせることで、良好なエンドツーエンド エクスペリエンスを確保する
タブレットは、タッチ、マウス、およびキーボード入力で使用できます。
Windows 8 では、タッチまたはマウス/キーボード、あるいはその両方の組み合わせによって Office Web Apps を使用できます。iOS では、Office Web Apps はタッチ入力によって最適に動作します。
タッチ モード
Office Web Apps では、ユーザー インターフェイスは次の点で区別されます。
- 固定ユーザー インターフェイス
これは常駐のユーザー インターフェイスで、常にアプリに表示されます。
例: OneNote Web App ナビゲーション ウィンドウ、リボン
- コンテキスト ユーザー インターフェイス
このユーザー インターフェイスは、必要に応じて表示したり非表示にしたりできます。
例: コンテキスト メニュー
タッチ デバイスを使っている場合、Office Web Apps では、既定で固定ユーザー インターフェイスがタッチ モードで表示されます。このモードを変更し、マウスでユーザー インターフェイスを操作するには、"タッチ モード" ボタンで切り替えます。
タッチ モード ボタンは、Office Web Apps の左上にあるクイック アクセス ツール バーに表示されます。このボタンを使用すると、タッチ モードと精度/マウス モードを切り替えることができます。
タッチ モード ボタン (オン) によってタッチ可能なユーザー インターフェイスを表示
タッチ モード ボタンのクローズ アップ:
必要な場合にのみ表示されるコンテキスト メニュー、リボンのポップアップ、メニューは、それを起動した入力方法 (タッチまたはマウス) で表示されます。
まとめ:
新しい Office Web Apps プレビューは、skydrive.com (英語) または Windows 8 タッチ デバイスの Office 365 プレビュー、および iPad の iOS でお試しになることをお勧めします。
皆様のご意見、ご感想を心よりお待ちしております。是非、フィードバックをお寄せください。アプリの右上隅または [ファイル] (File) メニューには [フィードバックの送信] (Give Feedback) オプションが用意されています。
Microsoft では、機能強化や操作改善を実現すべく常に取り組んでおります。操作するうえで満足した点、不満に感じた点など、さまざまな意見をお聞かせください。
Renu Devi
プログラム マネージャー、Office Web Apps
これはローカライズされたブログ投稿です。原文の記事は、「Bringing touch editing to Office Web Apps on Windows 8 and iOS tablets」をご覧ください。