ハード優先順位付け、またはWindows 8用の優れたアプリケーションへの5つの最初のステップ。ナビゲーション

前のパートでは、アプリケーションを設計する方法の最初の3つのステップを調べました。

1. 対象者の定義
2. アプリケーション目標ステートメント
3. 主なシナリオの選択

ご覧のように、最初の3つのステップはどのプロジェクトにも本当に安全に適用できます。

彼らはこれから恩恵を受けると思います。 このパートでは、 4番目のステップ-アプリケーションでのナビゲーションの計画を検討します 。今回は、Windows 8の詳細を理解せずにはできません。

4.ナビゲーションを計画する

おそらく、記事の最初の部分全体を読んだ場合、私たちがまだ単一の画面を描画しておらず、何かの特定の実装に目を向けたことがないことに驚くでしょう。 驚かないでください-この記事では、画面を詳細に描画したり、コードを記述したりしません。 それでも、次の2つのステップで行うすべてのことが、今後のすべてのインターフェイス設計およびアプリケーション開発自体に重要な役割を果たします。



4番目のステップの最終的な目標は、アプリケーションで画面がどのようになるか、画面間で情報がどのように配布されるか、画面間でどのように移行が行われるかを理解することです。 情報マップを作成する必要があります （これは情報アーキテクチャでもあります）。







原則として、1）アプリケーションがどのように見えるかについてのかなり明確なアイデア、および2）Windows 8の動作の理解がすでにある場合、すぐに図を描くことができます。画面間の遷移を遷移トリガー（要素、ボタン、リンク、ジェスチャーなど）にリンクすることで指定します。



私たちは2つの側面から取り組みます。主要なシナリオをカバーするために仮想アプリケーションに必要な画面を理解しようとし、Windows 8専用のアプリケーションを設計する上で注意する必要があるものを説明します。

アプリケーション画面

画面から始めましょう-さまざまな戦略があるかもしれません。 たとえば、メイン画面から始めて徐々に詳細に突入して、すぐに情報スキームを描くことができます。 原則として、このアプローチは、アプリケーションがどのように見えるべきか、そして何よりも情報ブロックがどのようになり、どのようにそれらと対話するべきかについての一般的な考えを既に持っている場合に機能します。 そのためには、デザインの経験も必要だと思います。



なじみのないタスクについては、パズル全体を1つの絵にまとめる前に、別々のピース/フラグメントから始めることができます。 いくつかの点で、これは本当にパズル（モザイク）の折り畳みに似ています：別々の小さなピースから、最初に別々のフラグメントを追加し、次にこれらのフラグメントを1つの画像に取り込みます。



この作業を開始するには、ストーリーに戻って、さまざまなシナリオに従って、簡潔で一貫した方法でストーリーを修正する必要があります。

例 。 私たちは引き続き映画会議に取り組んでいます-私の話は次のように簡単に書くことができます：

1. I：ポスターを見た→映画を認識した
2. 私：会議を作成する
   
   
   • 招待状を送信する
   • 関心を可視化する
3. 友達：招待状を受け取った→詳細
4. 友だち：受信したリマインダー→詳細
5. I：ステータス、詳細、注文の食品を見る
6. 私と友達：エンゲージメントが強化された映画をお楽しみください

ここで、最初の2つのポイントは最初のシナリオ、2番目の2番目から2番目、5番目から5番目の二次食品、6番目のポイントは3番目のシナリオのアカウントに関連しています。

これで、これらのストーリーを個別の小さなスキームに変換することができます-意思決定やユーザーの満足のために重要な情報の主要なブロックを特定する必要がある画面、および移動のシーケンス（アプリケーションフロー）を反映する画面間の遷移：

「A」という文字は、これらの画面でユーザーによる追加の明示的なアクション（アクション）が必要になる可能性があるという感覚を示しています。

ストーリーがさまざまな方法で主要なシナリオを明らかにすると仮定すると、アプリケーションの本質をより完全に明らかにするさまざまなミニスキームのセットを取得できます。



次に進むには、Windows 8のナビゲーションパターンに関する重要なニュアンスを明確にする必要があります。ナビゲーションに関する重要な記事は、Metroスタイルアプリケーションのナビゲーションの設計です。 また、いくつかの重要なポイントと、覚えておく価値のあるいくつかの追加のニュアンスに注目します。

Windows 8でのナビゲーション。

まず第一に、厳密な優先順位付けもナビゲーション設計の根底にあるべきであると言わなければなりません（そして強調されなければなりません）。 1つの画面にできるだけ多くの情報、アクション、リンクなどを配置するという強迫観念と戦わなければなりません。



この意味で、スーザン・ヴァインシェンクの記事「 心理学者のUXデザインの見解 」からの次の引用が本当に好きです。

「人々はタスクを完了するために、 可能な限り最小限の作業を行います。 人々に少しの情報を見せて、もっと詳細を知りたい場合は選択させるのがよいでしょう。 これの凝った用語は漸進的な開示です。」

2階に移動して、最も必要な場所だけにアクセスし、必要に応じてユーザーが詳細に簡単に飛び込めるようにします。 これとともに、ユーザーがどこに行くべきかではなく、ユーザーがどこに行くべきかを示してみてください（このアイデアについて説明しますが、すぐにそれをつかめば、あなたは正しい道を進んでいます）。



Windows 8アプリには、階層とフラットの2つの主要なナビゲーションパターンがあります。 （原則として、たとえばメールアプリケーションで使用されるマスター詳細オプションは別のタイプと見なすことができますが、この質問はこの記事の範囲外です。）



階層ナビゲーションモデルは、各ステップでユーザーが特定の詳細レベルで情報の特定のセクションを表示し、必要に応じて詳細に順番に没入できることを前提としています。



たとえば、第1レベルのニュースアプリケーションでは、最新の最も重要なニュース（見出しと写真）が別々のグループに分けて表示されます。 最後の5〜10のニュースだけでは不十分で、政治に関する最新のニュースをすべて知りたい場合は、該当するセクション（第2レベル）に移動して、すべての政治ニュースのリストを表示できます。 何が起こっているのかを理解するのに十分な見出しと写真がなく、いくつかのニュースに夢中になった場合は、第1レベルまたは第2レベルから第3レベルに進み、ニュース全体を読むことができます。



各レベルですでに一定量の情報を取得しているという事実は、自分がどこに行くことができるかではなく、どこにいるかを示すという考えと一致しています。 また、ここでは、下位レベルへのダイビングはコンテンツを通じて直接行われることに注意することも重要です。







特定のアプリケーションには3つ以上のレベルがある場合がありますが、優先順位については常に覚えておくことが重要です。 深さの次のレベルごとに、その存在の2倍の重要な理由が必要になるような方法で考えることができます。 （ただし、一般的にすべての情報を1つの最初の画面に配置するように努力することも制限する必要があります。）



ナビゲーションスタックに戻るには、見出しの横に戻る矢印を配置します。 また、隣接するセクションやアプリケーションのメインページにすばやくジャンプするには、ヘッダーメニュー（下図のドロップダウンリスト5）を使用できます。







階層ナビゲーションモデルは、コンテンツの大規模なコレクションと多くのセクションまたはカテゴリに適しています。



異なる画面間をナビゲートするためのフラットナビゲーションモデルは、特別なインターフェイス要素を使用します。ナビゲーションバー（ナビゲーションバー）は、マウスの右ボタンを押すか、キーボードのコマンド（Win + Z）によって、指で適切なジェスチャーで上部に表示されます：







この要素は常に画面に表示されるわけではなく、ユーザーの要求がある場合にのみ呼び出されることに注意してください。



ナビゲーションバーは、多くのタブ（ブラウザなど）、IMダイアログ、ドキュメント、ゲームセッションなどを切り替える必要がある場合や、少数の特別なセクションにすばやくアクセスする場合に適しています。



特定のアプリケーションでは、両方のモデルを同時に組み合わせて使用​​できます。 たとえば、Bing Newsアプリケーションでは、階層モデルを使用してニュースと特定のニュースの別々のセクションに飛び込み、フラットモデルを使用して、一般的なフロー、選択したニュース、ニュースソースの管理をすばやく切り替えます。











コンテキストスケーリング （セマンティックズーム）。 Windows 8のアプリケーションには、情報を配置する主な方法（水平スクロールと水平スクロール）に関連する別の機能があります。 情報が画面を超えるとすぐに、1）次の内容をユーザーに伝える必要があり、2）コンテンツの目的のセクションにすばやくジャンプするのに役立つ必要があります。







これらの両方の問題を解決するために、特別な手法が使用されます。これは、指が圧縮されたときに発生するコンテキストスケーリング、ctrl +マウスでスクロール、ctrl +“ +”、または開発者から提供された場合は特別なボタンをクリックすることによって行われます：







このモードでは、すべてのセクションがすぐに（またはほぼすぐに）表示され、ユーザーは目的のセクションを簡単に選択できます。 セクションの見出しだけでなく、いくつかの有用なメタ情報を表示することは、優れたテクニックと見なされます。



コンテキストスケーリングは、コンテキストを変更せず、他のページに移動しないことに注意することが重要です。現在のページをすばやく把握するのに役立ちます。 さらに、この手法は、それが理にかなっている場合、アプリケーションの任意のページで使用できます。







Windows Phoneでおなじみのピボット （ピボット）は、Windows 8のアプリケーションでも発生する可能性があります。たとえば、特定のアプリケーションに移動すると、Windowsストアで簡単に見つけることができます。







この決定は「タブ付きのインターフェイス」と見なすことができますが、その主な目的はWindows Phoneと同じであり、オブジェクトに関する情報のさまざまなフィルターまたはスライス（グループ）を切り替えることです。 たとえば、アプリケーションストアの場合、特定の（単一の）アプリケーションのレビュー、詳細、レビューを切り替えます。



チャームとコントラクト （まず、検索、共有、設定）もアプリケーションの重要なコンポーネントであり、機能の一部、またはより正確にはそのアクティベーションを引き継ぎます。



奇跡のボタンは、右に伸びる特別なパネルにあり、アプリケーションの検索、他のアプリケーションとの情報の共有（転送）、外部デバイスとの対話（2番目の画面での表示や印刷など）、呼び出し設定。







情報アーキテクチャの観点から見ると、これは、たとえば、アプリケーション設定への呼び出しは、アプリケーション内のリンクまたはボタンではなく、対応するチャームボタンをクリックすることで初期化されることを意味します。 描写するのは簡単ですが、これがそのように機能することを覚えておいてください。







検索と共有 （共有）は、覚えておく必要があるもう1つの重要な役割を果たします。これらは、アプリケーションのアクティベーターになることができます 。 たとえば、ユーザーニュースを表示する場合、ユーザーは、スタート画面のタイルから（またはアプリケーションのリストでアプリケーションを選択して）アプリケーションを入力するか、検索バーで検索クエリを直接駆動してアプリケーションを選択します。 この場合、アプリケーションの検索結果ページがすぐに開きます（開く必要があります）。 アプリケーションがデータを受信できる場合、同様のシナリオがデータ転送で機能します。



（原則として、他のアクティベーターについて知っておく必要があります。MSDNの契約に関するセクションを参照してください。ただし、これはこの記事の範囲外です）。



簡単に推測できるように、 タイルとアラートは、アプリケーションへの追加エントリポイントであり、全体として、アプリケーションの特定のエンティティの現在の状態をユーザーに通知するタスクのソリューションの一部です。 これについては特に説明しませんが、設計するときはこのことを忘れないでください。



ナビゲーション構造に影響を与える可能性がありますが、別途考慮が必要なもう1つの重要なことは、スナップモードです。このモードでは、アプリケーションが別のアプリケーションと並行して左右に狭いストリップの形でドッキングされます。 この場合、使用可能なスペースが少なく、主に垂直スクロールを考慮して、画面とナビゲーションを再設計する必要があります（おそらく追加の中間画面を挿入することによって）-ハード優先順位を設定する必要性を積極的に覚えています。

---

これで、Windows 8のアプリケーションでのナビゲーションシステムの要素の簡単な没入は終わり、仮想アプリケーションの情報アーキテクチャを設計するという主要なタスクに戻ることができます。

例 。 友人との共同映画鑑賞の整理に役立ち、3つの重要なシナリオがあるMovie Meetingアプリケーションを検討していることを思い出してください。

• 見るべき面白い映画を見つける
• 友達との共有を手配する
• 多くの視聴体験を得る

ミニスキームを修正する段階で、これらのスクリプトがどのように機能するか（アクション/画面のシーケンス）とそれらに必要な情報ブロックの最初のアイデアを得る必要がありました。



（徹底的なアプローチを持つ設計者は、使い慣れた形式で詳細なユーザーシナリオを安全にキャプチャすることもできます。）

これらすべてのシナリオの性質と寿命を研究すると、それらはすべて互いに重なり合っており、ピラミッドを構成していることがわかります。

• 「映画を観る」ことは、前日と観戦中に重要です。
• 「視聴/議論/投票の計画」は、意思決定が行われる約1週間前に、将来の視聴の「視聴」と並行して重要です。
• 「おもしろいものの選択」は、あなたの好みや希望を形成するために常に重要です（アイデアのプール、見るべきものなど）。

これは、3つのシナリオすべてがランディングスクリーン（ランディングページ）からアクセスできる可能性があり、コンテンツの表示の問題に戻ると、それらはすぐにアクセスできることを示唆しています：単純化または表面的なプレゼンテーションではありますが、リンクではなく直接アクセス可能。 つまり、3つのシナリオすべての入力ポイントを1つの画面に減らす必要があります。

この場合、ユーザーの関与の度合いとスクリプトの速度（存続時間）によるアクション（コンテンツ）の優先順位付けは、映画の視聴から計画、そして関心の形成まで構築されるため、ユーザーが1位になる予定の次のビュー、2番目に予定されているイベントそして、この好み/ユーザーと彼の友人の興味の後にのみ。



最初の近似として、このような画面のコレクションを取得します（多くの遷移矢印の代わりに、色分けを使用しました）-ここでは、階層ナビゲーションモデルがメインとして使用されます。

この段階では、すぐに主要なシナリオを追い出し、それらが機能することを確認することが重要です。

さらに詳しく説明する際に、さまざまな変更を加えることができます。

たとえば、この特定のケースでは、確かに適切です。

• スキャナー（写真）を広げて、さまざまな画面で検索し、
• 自分の興味のある画面と友人の画面を分けるために（2番目の画面では、最初の画面とは異なり、視聴計画を表示するのが理にかなっています。アプリケーションの開始画面から画面を表示します）
• 別の画面を直接表示に追加し、
• 食べ物/飲み物の注文画面を追加し、
• 友人の出身地（そして一般的にはソーシャルコンポーネント）について考えます。たとえば、システムのContacts Pickerとの統合、
• 追加のエントリポイントとして通知を追加します。
• 宣伝または推奨コンテンツを追加する
• すべての長いリストにコンテキストスケーリングのサポートを追加します。
• 設定パネルを追加する
• チケットの購入履歴（適切な契約による印刷の可能性を含む）について考えるため、
• そしてささいなことでも...

ただし、この壮大さのすべてにおいて、主要なタスクとシナリオの優先順位を覚えておくことが重要です。また、私は繰り返し、各決定をそれらと相関させます。



この点で、最も重要なタスクの1つは、回路を解き明かし、回路をより簡単にし、それに応じて可能な限りサイクルを削除することです。

例。 次の繰り返しのいずれかで、次の画面情報図が表示されました。







トランジションでも同じこと：

次のことに注意することが重要です：

• 重要なシナリオは、可能な限り簡単に（当然）解決する必要があります。
• 寿命が最短の（運用上の）シナリオは、可能な限り迅速に解決する必要があります。
• セカンダリシナリオは、重要な場合は簡単にアクセスできるはずですが（ほとんどの場合、最初のレベルからではなく）、ユーザーの注意をそらすものではありません。

継続するには...

素晴らしい、これで機能について考える準備ができました。これは次のパートで行います;）

---

主なリソース

Windows 8向けの設計

Windows 8向けの開発

Microsoftアプリケーション開発