Windows Phone アプリデザインの考え方

Windows Phone アプリデザインの考え方 株式会社アゼスト UX コンサルタント後藤雄介 D4-203

セッションの目的とゴールSessionObjectives and Takeaways • セッションの目的 • Windows Phoneのデザイン・設計の流れを理解する • セッションのゴール • Windows Phone開発に興味を持っていただく • WindowsPhoneの開発者仲間を増やす

アプリデザインのあらすじ • WPアプリも通常のアプリ制作と同じ。 • 下記のステップで考える。 • 1. 課題 • 2. 要件 • 3. プロトタイピング • 4. 設計 • 5. 実装

キモはここの3つ • 要件 • モバイルとしての要件、コンセプト立て。 • プロトタイピング • スケッチ、動作モックで形にする。 • 設計 • 現実としての仕様やお作法に落とし込む。

要件 • モバイルとしての要件、コンセプト立て。

携帯だからこそのコンセプト • 4W1H • 何をするアプリ？ • 誰のためのアプリ？ • どんな場面で使うアプリ？ • どんな表示のアプリ？ • どこにハマるアプリ？出典 : Windows Phone Application Conceptualization (MSDN)

何をするアプリ？ • アプリがユーザーに何を提供してくれるか。 • 機能主軸で詰め込みすぎない。 • 人主軸で。 • 深い階層、小さなボタンにはどうせアクセスできない、しない。 • 目的をシンプルに、 • 重要で必須のタスクは何か。それだけじゃだめなのか。 • 簡単にタイトル、説明ができ、誰でも理解できるもの。 • 簡単に理解されないアプリはダウンロードもされない。

誰のためのアプリ？ • WPを持つすべての人をターゲットと捉える。 • 極力、ユーザーを限定して考えない。 • 年齢、性別、職業、リテラシー、ライフスタイル • 誰でも理解して使うことができることが前提。 • ペルソナもいいけれど・・・ • 理想のユーザーだけを思い描かない。 • 初めから特定の人だけをターゲットで大丈夫？

どんな場面で使うアプリ？ • モバイルとは何か。 • 外出、移動しながら使う。 • どこかへ向かって歩きながら、ちょっと立ち止まりながら • 電車の車内や駅のホームで使う。 • 不安定な足場、片手は塞がっている。 • 周りに人が多い、のぞき見られるかもしれない。 • ほんのちょっとの空き時間に使う。 • 信号待ち、エレベーター内、十数秒程度で目的を達成したい。

どんな表示のアプリ？ • 誰も説明書は読まない。 • 余計な要素を排する。 • 説明書を読まないと理解できない要素や手順は無くす。 • 説明不要なUIを考える。 • シンプルに、必要な要素、情報が提示されること。 • ユーザーは触りながら覚えていく。

どこにハマるアプリ？ • ユーザーはどこに価値を見出すか。 • 競合アプリに対する優位性は何か。 • マーケットプレイスからダウンロードされるだけの理由は？ • 別のアイデアや、他のサービス連携も模索してみる。 • ただし、コンシューマ向けの場合のみ。

プロトタイピング • 見える形にしてみる。 • スケッチ • 動作モック • 紙モックという手もあり。出典 : Windows Phone Prototype Key Aspects of YuourDesignon (MSDN)

スケッチ • 情報構造と大まかな見た目をまとめる。 • 紙とペン、ホワイトボードで十分。 • ステップごとに分けて。 • 1. 代表的な画面の大まかな機能と見た目を書き出す。 • 2. 画面間をつなぐ「待ち画面」の見た目を書き出す。 • 3. 特殊画面があれば、その機能と見た目を書き出す。 • 4. 主要なタスクの導線を結ぶ。 • 5. その他のユーザー操作の導線を結ぶ。

プロトタイプ • 実際に動くものを作ってみる。 • 粒度設定を慎重に • 何をどこまで評価することを目的とするのか。 • 捨てモックか、何かを引き継ぐのか。 • 特に、お客様ありきの場合は、この辺を明確に。 • イテレーション • 何回か回しながら、最終形態に近づけていくのも有効。 • Expression BlendのSkech Flowが便利

画面設計 • 現実としての仕様やお作法に落とし込む。

まずはUIデザインガイド • Metroに即したUIデザインのガイド • 初期版が日本語に訳されている。 • 第2版がMSDNに掲載されている。 • ガイドに従うことで「WP標準」に出来る。 • 個々の画面デザインに悩むことはない。

考え方 • 詳細は、UIデザインガイドへ。 • ここでは下記の項目に言及してみる。 • ナビゲーション • 情報構造 • アプリケーションバー • UIパーツ • タイトル • テーマ • 画面の向き

ナビゲーション • 画面間の移動 • 画面間を進むときはアプリ内のボタンから。 • 画面間を戻るときはバックボタン（←）。 • いつでもトップに戻れる安心感を • バックボタンを連打すればトップへ戻れるように。 • ループとなってしまう画面構造は不可。 • 終了は、明示的な「終了」操作で。 • バックボタンで終了も出来るが、分かりにくい。

画面内の情報構造 • パノラマ、ピボットの使い方を考える。 • 並列のデータセット、メニューセットを提供。 • 横方向は、並列のグループを表す。 • 個々の要素は、縦スクロールで。 • 縦方向は、そのグループ内での選択肢を表す。 • 縦横操作で、2次元のデータに素早くアクセス可能！ • パノラマとピボットの違い • パノラマは背景付。横に並ぶグループは別種でもOK。 • ピボットの方は、ほぼ同種の情報のフィルタリングなど。

アプリケーションバー • 画面内に配置するボタンと異なる役割。 • その画面全体の操作 • 送信や確定、キャンセルなど。 • 画面内の個々の要素に対するものは配置しない。 • 有効無効の切り替えを。使えないときは無効に。 • アプリケーションバーのメニュー • 画面の副次的なシナリオの操作メニュー。

UIパーツ • 用意されているコントロールで。 • Metro準拠、見た目と挙動の一貫性が容易に保てる。 • 足りなければサードパーティ製という手もあり。 • サポートされていないコントロールもある。 • タッチ操作にそぐわないもの、API都合のもの等。 • コンボボックスやデータグリッド、ファイル保存など。 • Frame、Pageなどは、Phone専用が用意されている。

タイトル・背景画像 • 画面タイトルは重要。 • モバイルではどこで中断しているかわからない。 • どのコンテクストの途中か瞬時に分かること。 • 背景画像も、ユーザーへの • アプリケーションのアイデンティティとなる。 • タイトルと併せ、ユーザーが現在位置を瞬時に理解。

テーマ • テーマによる一貫性と互換性の保持。 • 個々にプロパティを設定する必要がない。 • テーマによって規定されるのは色のみ。 • フォント、コントロールは変わらない。 • テーマとアプリ独自の色がお互いに邪魔しないように。

画面の向き • 縦横対応は当たり前。 • 縦横に対応した画面を前提とした設計とすべき。 • 縦横それぞれの画面構成を作らない。 • アプリケーションバーは、自動的に縦横に応じて変化してくれる。 • ただし、バーの位置は固定。 • 時計回り・反時計回りによって、2タイプの横画面がある。 • 縦横を任意に切り替えることはできない。 • ただし、縦画面固定の方が望ましければ、固定とする。

セッションのまとめSession wrap up • セッションの目的 • Windows Phoneアプリのデザインをどう進めるか？ • アプリのコンセプトがUXのキモ。まずはそこを固める。 • 画面の見た目、動きは独自性の前にまず原則を意識。 • このセッションで持ち帰っていただきたいモノ • 設計・デザイン前に UXガイドラインに目を通そう • プロトタイピングしてから作ろう

リファレンス UIデザイン/操作ガイドhttp://blogs.msdn.com/b/shintak/archive/2010/12/10/10102734.aspx User Experience Design Guidelines for Windows Phone http://msdn.microsoft.com/en-us/library/hh202915(v=VS.92).aspx Design Resources for Windows Phone http://msdn.microsoft.com/en-us/library/ff637515(v=VS.92).aspx

Windows Phone Arch のご紹介Introduction of WP Arch Windows Phone 開発者のコミュニティです。 • 勉強会、情報共有会を各地で開催しています。 • ご興味のある方は http://wp-arch.net/へ。

ご清聴ありがとうございました • D4-203

Windows Phone アプリデザインの考え方