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

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

株式会社アゼスト

UX コンサルタント

後藤雄介D4-203

セッションの目的Windows Phone のデザイン・設計の流れを理解する

セッションのゴールWindows Phone 開発に興味を持っていただく

Windows Phone の開発者仲間を増やす

セッションの目的とゴールSession Objectives and Takeaways

WP アプリも通常のアプリ制作と同じ。

下記のステップで考える。1. 課題

2. 要件

3. プロトタイピング

4. 設計

5. 実装

アプリデザインのあらすじ

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

プロトタイピングスケッチ、動作モックで形にする。

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

キモはここの 3 つ

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

要件

4W1H

何をするアプリ？

誰のためのアプリ？

どんな場面で使うアプリ？

どんな表示のアプリ？

どこにハマるアプリ？

携帯だからこそのコンセプト

出典 : Windows Phone Application Conceptualization (MSDN)

アプリがユーザーに何を提供してくれるか。

機能主軸で詰め込みすぎない。人主軸で。

深い階層、小さなボタンにはどうせアクセスできない、しない。

目的をシンプルに、重要で必須のタスクは何か。それだけじゃだめなのか。

簡単にタイトル、説明ができ、誰でも理解できるもの。

簡単に理解されないアプリはダウンロードもされない。

何をするアプリ？

WP を持つすべての人をターゲットと捉える。

極力、ユーザーを限定して考えない。年齢、性別、職業、リテラシー、ライフスタイル

誰でも理解して使うことができることが前提。

ペルソナもいいけれど・・・理想のユーザーだけを思い描かない。

初めから特定の人だけをターゲットで大丈夫？

誰のためのアプリ？

モバイルとは何か。

外出、移動しながら使う。どこかへ向かって歩きながら、ちょっと立ち止まりながら

電車の車内や駅のホームで使う。不安定な足場、片手は塞がっている。

周りに人が多い、のぞき見られるかもしれない。

ほんのちょっとの空き時間に使う。信号待ち、エレベーター内、十数秒程度で目的を達成したい。

どんな場面で使うアプリ？

誰も説明書は読まない。

余計な要素を排する。説明書を読まないと理解できない要素や手順は無くす。

説明不要な UI を考える。シンプルに、必要な要素、情報が提示されること。

ユーザーは触りながら覚えていく。

どんな表示のアプリ？

ユーザーはどこに価値を見出すか。

競合アプリに対する優位性は何か。マーケットプレイスからダウンロードされるだけの理由は？

別のアイデアや、他のサービス連携も模索してみる。

ただし、コンシューマ向けの場合のみ。

どこにハマるアプリ？

見える形にしてみる。

スケッチ

動作モック紙モックという手もあり。

プロトタイピング

出典 : Windows Phone Prototype Key Aspects of Yuour Designon (MSDN)

情報構造と大まかな見た目をまとめる。

紙とペン、ホワイトボードで十分。

ステップごとに分けて。1. 代表的な画面の大まかな機能と見た目を書き出す。

2. 画面間をつなぐ「待ち画面」の見た目を書き出す。

3. 特殊画面があれば、その機能と見た目を書き出す。

4. 主要なタスクの導線を結ぶ。

5. その他のユーザー操作の導線を結ぶ。

スケッチ

実際に動くものを作ってみる。

粒度設定を慎重に何をどこまで評価することを目的とするのか。

捨てモックか、何かを引き継ぐのか。

特に、お客様ありきの場合は、この辺を明確に。

イテレーション何回か回しながら、最終形態に近づけていくのも有効。

Expression Blend の Skech Flow が便利

プロトタイプ

現実としての仕様やお作法に落とし込む。

画面設計

Metro に即した UI デザインのガイド

初期版が日本語に訳されている。第 2版が MSDN に掲載されている。

ガイドに従うことで「WP標準」に出来る。個々の画面デザインに悩むことはない。

まずは UI デザインガイド

詳細は、 UI デザインガイドへ。ここでは下記の項目に言及してみる。

ナビゲーション

情報構造

アプリケーションバー

UIパーツ

タイトル

テーマ

画面の向き

考え方

画面間の移動画面間を進むときはアプリ内のボタンから。

画面間を戻るときはバックボタン（←）。

いつでもトップに戻れる安心感をバックボタンを連打すればトップへ戻れるように。

ループとなってしまう画面構造は不可。

終了は、明示的な「終了」操作で。バックボタンで終了も出来るが、分かりにくい。

ナビゲーション

パノラマ、ピボットの使い方を考える。

並列のデータセット、メニューセットを提供。横方向は、並列のグループを表す。

個々の要素は、縦スクロールで。縦方向は、そのグループ内での選択肢を表す。

縦横操作で、 2次元のデータに素早くアクセス可能！

パノラマとピボットの違いパノラマは背景付。横に並ぶグループは別種でも OK 。

ピボットの方は、ほぼ同種の情報のフィルタリングなど。

画面内の情報構造

画面内に配置するボタンと異なる役割。

その画面全体の操作送信や確定、キャンセルなど。

画面内の個々の要素に対するものは配置しない。

有効無効の切り替えを。使えないときは無効に。

アプリケーションバーのメニュー画面の副次的なシナリオの操作メニュー。

アプリケーションバー

用意されているコントロールで。Metro準拠、見た目と挙動の一貫性が容易に保てる。

足りなければサードパーティ製という手もあり。

サポートされていないコントロールもある。タッチ操作にそぐわないもの、 API都合のもの等。

コンボボックスやデータグリッド、ファイル保存など。

Frame 、 Page などは、 Phone専用が用意されている。

UIパーツ

画面タイトルは重要。モバイルではどこで中断しているかわからない。

どのコンテクストの途中か瞬時に分かること。

背景画像も、ユーザーへのアプリケーションのアイデンティティとなる。

タイトルと併せ、ユーザーが現在位置を瞬時に理解。

タイトル・背景画像

テーマによる一貫性と互換性の保持。個々にプロパティを設定する必要がない。

テーマによって規定されるのは色のみ。フォント、コントロールは変わらない。

テーマとアプリ独自の色がお互いに邪魔しないように。

テーマ

縦横対応は当たり前。縦横に対応した画面を前提とした設計とすべき。縦横それぞれの画面構成を作らない。

アプリケーションバーは、自動的に縦横に応じて変化してくれる。

ただし、バーの位置は固定。

時計回り・反時計回りによって、 2 タイプの横画面がある。

縦横を任意に切り替えることはできない。

ただし、縦画面固定の方が望ましければ、固定とする。

画面の向き

セッションの目的Windows Phone アプリのデザインをどう進めるか？

アプリのコンセプトが UX のキモ。まずはそこを固める。

画面の見た目、動きは独自性の前にまず原則を意識。

このセッションで持ち帰っていただきたいモノ設計・デザイン前に UXガイドライン に目を通そう

プロトタイピング してから作ろう

セッションのまとめSession wrap up

リファレンス

UI デザイン /操作ガイドhttp://blogs.msdn.com/b/shintak/archive/2010/12/10/10102734.aspx

User Experience Design Guidelines for Windows Phonehttp://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