～ Windows Azure ではじめる Metro Style Apps ～

Windows Azure × Metro Style Apps

Windows 女子部 Japan Windows Azure User Group 女子部　　　　　　　　　　　　　椎野　磨美（ Mami Shiino ）

Agenda

Part1UI の進化には理由があります ! ~ なぜ、 Metro Style なのか ? ～　　

Part2 Windows Azure × Metro Style Apps

以前の Windows Azure Platform

Metro Style へ 　

Universal Design ≠ Usability

　できるだけ多くの人が利用可能な　デザインにすること

　文化・言語・国籍の違い、老若男女といった　差異、障害・能力の如何を問わずに利用する　ことができる施設・製品・情報の設計

　

Universal Design ≠ Usability

　ある製品が、　指定された利用者によって、　指定された利用の状況下で、　指定された目的を達成するために　用いられる際の、有効さ、効率、及び　利用者の満足度の度合い

　　　　　　　　　　　　 　　　　　　【 ISO 9241-11 ／ JIS Z8521 】

Universal Design Usability

アクセスキーの設定マウスクリックを唯一の方法にしないキーボードからのアクセスも可能にする

Windows の Universal Design

各タブページで　 Alt 　 を押下すると表示　 ESC 　を押下すると非表示

Windows キー　 ：メトロとデスクトップの切り替えWindows キー + Ｃ：チャームの表示Windows キー + Ｄ：デスクトップ画面Windows キー + Ｅ：エクスプローラー起動Windows キー + Ｌ：画面ロックWindows キー + Ｑ：アプリ一覧

Windows 8 (Release Preview) では

Windows ８では・マウス・キーボード・タッチ様々な入力デバイスに対応

使えない 使いにくいが使える 使いやすい 使いたい

学習し易さ

エラーの少な

さ

記憶のしやす

さ

効率性

ユーザーが求める画面の 『価値』とは

イノベーションの創出

魅力あるわくわく感を生

む製品の創出

ユーザビリティの対応

使えるようにする

使えるようにする

アクセシビリティの対応

『記憶の種類』

手続き記憶 プライミング記憶 意味記憶 短期記憶 エピソード記憶

「体で覚える」記憶

先行刺激によって、後続刺激に対する認知や行動、判断に無意識的に影響が出て、促進されたり抑制されたりする現象

専門用語の定義や客観的な知見など学習行動によって身に付ける記憶

一般的な知識教養に関する記憶

意識に昇る以前の感覚器官で短期間（約 20 秒間）保持される記憶

保持される情報数は、 7±2 （マジカルナンバー）

個人的体験や出来事についての記憶

ある期間と場所での出来事についての記憶

短期記憶（ 20 秒格納）　　

長期記憶（記憶）　　

感覚情報貯蔵庫（ 0.5 秒格納）　　

『人間の情報処理のながれ』

■短期記憶取り込んだ情報を解釈する機能GUI では、短期記憶で情報を処理

■短期記憶の処理能力　・マジカルナンバー（ 7±2 ）　　・チャンキング

情報を理解したり記憶しようとする際、その情報をいくつかの　まとまりとしてとらえること

メニューの区分線やリボン UI におけるグループ化

CUICharacter User Interface

GUIGraphical User Interface

再生 再認

再生と再認

NUE & NUI

■ NUE （ Natural User Experience ）　「触る」「話す」「書く」「ジェスチャーする」など、　人間が自然に思考することによって、直感的に行動する体験■NUI (Natural User Interface) 　 NUE によって制御可能な製品やシステムのユーザーインターフェース

■NUI の利点人の思考に沿った NUI を適用することで、ユーザーが操作の為に思考や行動を止めることが無くなり、ストレスなく思った通りの結果を得ることができる

▶ PUSH

■ 再認記憶（ recognition memory ） とは

　①　人間は、日常生活で遭遇する様々な事物や人物を記憶に留める　　②　遭遇した事物や人物が、初めて出会ったものなのか、それとも、

　　　以前にも出会ったことがあるのかを的確に判断するための記憶

What is purpose of this button ?

ユーザーインターフェースが分かりづらい

　不安が強すぎる ⇒ 攻撃、逃避

　不安が適度　　 ⇒ 理解しようとする

■認知（ cognition ）とは外部の対象や事象に関する情報を『後天的な知識・記憶・学習』の影響を受けて理解する過程のこと

認知不安

認知と認知不安

▶

Button は四角？

Excel 2010

Excel 2007

Excel 2003

Microsoft Office の UI の進化

問題

直観による判断が

正しいか？

正解

推論による判断がエラーを正せるか？

不正解

YES

YES

NO

NO

2重プロセス

技術的なスキルだけでなく、判断能力によっても、『使いやすさ』が大きく左右されるスキルの高いユーザーであっても、2つ目のプロセス（推論による判断）を経由することが多い UI は、『使いにくい』と感じる

『プロセス１』・速い・並列に処理・無意識的・自動的・努力は不要・連想に基づく

『プロセス２』・遅い・順番に処理・管理されている・努力が必要・規則に基づく

『使いやすさ 』へ の影響

アプリケーションの終了Windows 7 まで閉じるボタンをクリックする

Windows 8 の Metro Style アプリケーション

アプリケーションの上部のへりをつかみ下にスライドする

『認知』≠『使いやすい』

Windows ８ の Metro Style ではアプリは、ユーザーに対して、ずっと動き続けているように見せるというコンセプト

環境が人間や動物の知覚・認知・行動に与える意味物理的な特徴が、そのモノの機能に与える影響

アフォーダンスとは

デザインの理由を説明できますか？

デザインの理由を説明できますか？

西暦または和暦が明示されていない例

性別の選択①ISO5218 とは？

言語に依存しない１桁のコードによるヒトの性別の表記に関する国際規格　

0 = not known （不明） 1 = male （男性） 2 = female （女性） 9 = not applicable （適用不能）

1. ユーザー登録における性別選択は任意理由：性別選択を望まない人々の意思を尊重する

2. 性別が分からないと翻訳に支障をきたすというフィードバックが多数寄せられた

3. 性別の選択が必須に変更従来どおり、プロフィールにおける性別の表示は任意

ISO5218 対応

FaceBook の事例

　分かりやすさとは？

ユーザーが判断に迷わない

Go Azure × Go Metro

地下鉄の行き先案内のように見やすく、意味を理解しやすいデザイン

目的に早く到着できるタイポグラフィ（ Typography ）を基調

■タイポグラフィとは活字の配置・構成などによって、可読性、視認性、美しさを整えること

• 書体・字体の大きさ（ウェイト）• 行と行との間隔（レディング）• 文字と文字との間隔（カーニング及びスペーシング）

Metro Style とは

Metro Style Design 　 Layout

レイアウト視線の流れを考慮する１行の文字数を考慮するスクロールバーとマウスの移動距離を考慮する

スクロール量の考慮各機能のグループ化

チャンキングによる記憶の負荷を軽くする

・右側： グローバルコマンド・左側： コンテクスチャル（文脈上）のコマンド

Metro Style Design 　アプリバー

Metro Style Design 　アプリバー

＋ NEW ? +ADD ?

ここだけ、ルールが違うのかも？

プッシュ通知の利用

Metro Style ライブタイル

アイコンの役割＆情報の表示領域動的コンテンツの表示

Ex) 未読メール数、現在の株価　 etc ･･･

kabu.com for Windows Phone

高頻度で発生する株価情報の随時更新が必要　・ネットワークで発生する通信遅延の考慮　・非同期処理を前提としたスケールアウトしやすい分散基盤が必要

Windows Azure Web サイト

小規模から開始し、トラフィックの拡大に合わせて規模を調整できる拡張性の高いクラウド環境にサイトをすばやく簡単に配置できる

Windows Azure の管理ポータルサイトのように、 WebサイトにもMetro Style は 適用できる !

常時接続Go Azure

PC とクラウドの両方に保存されるコンテンツGo Azure

ファイルではなくユーザーを中心としたアクティビティGo Metro

デスクトップ PC に対するモバイル PC の台頭Go Metro

今のトレンド

http://www.windowsazure.com/ja-jp/pricing/free-trial/

①　まずは、試してみる！

②　いくらかかるの！

Go Azure × Go Metro

ご清聴ありがとうございました！