Your SlideShare is downloading. ×
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~

1,092

Published on

A-1-4 …

A-1-4

Azure × Metro Style Apps
~ Azure ではじめるMetro スタイル アプリ~


Windows 女子部
Japan Windows Azure User Group 女子部
椎野 磨美

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,092
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Windows Azure × Metro Style Apps~ Windows Azure ではじめる Metro Style Apps ~ Windows 女子部 Japan Windows Azure User Group 女子部 椎野 磨美(Mami Shiino)
  • 2. Agenda UI の進化には理由があります! Part1 ~ なぜ、Metro Style なのか ? ~ Part2 Windows Azure × Metro Style Apps
  • 3. 以前の Windows Azure Platform
  • 4. Metro Style へ
  • 5. Universal Design ≠ Usability
  • 6. Universal Design ≠ Usability Universal Design Usabilityできるだけ多くの人が利用可能な ある製品が、デザインにすること 指定された利用者によって、 指定された利用の状況下で、 指定された目的を達成するために文化・言語・国籍の違い、老若男女といった 用いられる際の、有効さ、効率、及び差異、障害・能力の如何を問わずに利用する 利用者の満足度の度合いことができる施設・製品・情報の設計 【ISO 9241-11 / JIS Z8521】
  • 7. Windows の Universal Designアクセスキーの設定 マウスクリックを唯一の方法にしない キーボードからのアクセスも可能にする 各タブページで Alt を押下すると表示 ESC を押下すると非表示
  • 8. Windows 8 (Release Preview)ではWindows キー :メトロとデスクトップの切り替えWindows キー + C:チャームの表示Windows キー + D:デスクトップ画面Windows キー + E:エクスプローラー起動Windows キー + L:画面ロックWindows キー + Q:アプリ一覧Windows 8では・マウス・キーボード・タッチ様々な入力デバイスに対応
  • 9. ユーザーが求める画面の 『価値』とは アクセシビリティ ユーザビリティ イノベーション の対応 の対応 の創出 魅力ある 使えるように 使えるように わくわく感を生 する する む製品の 創出 使いにくい 使いたい使えない 使いやすい が使える 学習し易さ エラーの少なさ 記憶のしやすさ 効率性
  • 10. 『記憶の種類』 手続き記憶 プライミング記憶 意味記憶 短期記憶 エピソード記憶「体で覚える」 先行刺激によって、 専門用語の定義や 意識に昇る以前の 個人的体験や出来記憶 後続刺激に対する 客観的な知見など 感覚器官で短期間 事についての記憶 認知や行動、判断 学習行動によって (約20秒間) に無意識的に影響 身に付ける記憶 保持される記憶 ある期間と場所で が出て、促進され の出来事について たり抑制されたり 一般的な知識教養 保持される情報数 の記憶 する現象 に関する記憶 は、7±2(マジカ ルナンバー)
  • 11. 『人間の情報処理のながれ』 ■短期記憶 取り込んだ情報を解釈する機能感覚情報貯蔵庫 GUI では、短期記憶で情報を処理(0.5秒格納) ■短期記憶の処理能力 ・マジカルナンバー( 7±2 ) 短期記憶 ・チャンキング(20秒格納) 情報を理解したり記憶しようとする際、 その情報をいくつかの まとまりとしてとらえること 長期記憶 (記憶) メニューの区分線やリボンUIに おけるグループ化
  • 12. 再生と再認 再生 再認CUI GUICharacter User Interface Graphical User Interface
  • 13. NUE & NUI■ NUE(Natural User Experience) 「触る」「話す」「書く」「ジェスチャーする」など、 人間が自然に思考することによって、直感的に行動する体験■NUI (Natural User Interface) NUEによって制御可能な製品やシステムのユーザーインターフェース■NUI の利点人の思考に沿ったNUIを適用することで、ユーザーが操作の為に思考や行動を止めることが無くなり、ストレスなく思った通りの結果を得ることができる
  • 14. What is purpose of this button ? ▶ PUSH■ 再認記憶(recognition memory) とは ① 人間は、日常生活で遭遇する様々な事物や人物を記憶に留める ② 遭遇した事物や人物が、初めて出会ったものなのか、それとも、 以前にも出会ったことがあるのかを的確に判断するための記憶
  • 15. 認知と認知不安■認知( cognition)とは外部の対象や事象に関する情報を『後天的な知識・記憶・学習』の影響を受けて理解する過程のこと ユーザーインターフェースが分かりづらい 認知  不安が強すぎる ⇒ 攻撃、逃避 不安  不安が適度 ⇒ 理解しようとする
  • 16. Buttonは四角?▶
  • 17. Microsoft Office の UI の進化Excel 2003Excel 2007Excel 2010
  • 18. 2重プロセス 問題直観による NO 判断が正しいか? 推論による NOYES 判断がエラー を正せるか? YES 正解 不正解
  • 19. 『使いやすさ 』へ の影響技術的なスキルだけでなく、判断能力によっても、『使いやすさ』が大きく左右されるスキルの高いユーザーであっても、2つ目のプロセス(推論による判断)を経由することが多い UI は、『使いにくい』と感じる 『プロセス1』 『プロセス2』 ・速い ・遅い ・並列に処理 ・順番に処理 ・無意識的・自動的 ・管理されている ・努力は不要 ・努力が必要 ・連想に基づく ・規則に基づく
  • 20. 『認知』≠『使いやすい』アプリケーションの終了 Windows 7 まで 閉じるボタンをクリックする Windows 8 の Metro Style アプリケーション アプリケーションの上部のへりをつかみ下にスライドするWindows 8 の Metro Style ではアプリは、ユーザーに対して、ずっと動き続けているように見せるというコンセプト
  • 21. アフォーダンスとは環境が人間や動物の知覚・認知・行動に与える意味物理的な特徴が、そのモノの機能に与える影響
  • 22. デザインの理由を説明できますか?
  • 23. デザインの理由を説明できますか? 西暦または和暦が 明示されていない例
  • 24. ISO5218とは? 性別の選択① 言語に依存しない1桁のコードによるヒトの性別の表記に関する 国際規格 0 = not known(不明) 1 = male(男性) 2 = female(女性) 9 = not applicable(適用不能)
  • 25. FaceBookの事例 ISO5218対応1. ユーザー登録における性別選択は任意 理由:性別選択を望まない人々の意思を尊重する2. 性別が分からないと翻訳に支障をきたすというフィードバックが多数寄せられた3. 性別の選択が必須に変更 従来どおり、プロフィールにおける性別の表示は任意
  • 26. 分かりやすさとは?ユーザーが判断に迷わない
  • 27. Go Azure × Go Metro
  • 28. Metro Styleとは地下鉄の行き先案内のように見やすく、意味を理解しやすいデザイン 目的に早く到着できるタイポグラフィ(Typography)を基調■タイポグラフィとは活字の配置・構成などによって、可読性、視認性、美しさを整えること • 書体・字体の大きさ(ウェイト) • 行と行との間隔(レディング) • 文字と文字との間隔(カーニング及びスペーシング)
  • 29. Metro Style Design Layout
  • 30. レイアウト視線の流れを考慮する1行の文字数を考慮するスクロールバーとマウスの移動距離を考慮する スクロール量の考慮各機能のグループ化 チャンキングによる記憶の負荷を軽くする
  • 31. Metro Style Design アプリバー ・右側: グローバルコマンド ・左側: コンテクスチャル(文脈上)のコマンド
  • 32. Metro Style Design アプリバー
  • 33. +NEW ? +ADD ? ここだけ、 ルールが違うのかも?
  • 34. プッシュ通知の利用
  • 35. Metro Style ライブタイルアイコンの役割&情報の表示領域 動的コンテンツの表示 Ex) 未読メール数、現在の株価 etc・・・
  • 36. kabu.com for Windows Phone高頻度で発生する株価情報の随時更新が必要 ・ネットワークで発生する通信遅延の考慮 ・非同期処理を前提としたスケールアウトしやすい分散基盤が必要
  • 37. Windows Azure Web サイト小規模から開始し、トラフィックの拡大に合わせて規模を調整できる拡張性の高いクラウド環境にサイトをすばやく簡単に配置できるWindows Azure の管理ポータルサイト のように、Webサイトにも Metro Styleは 適用できる!
  • 38. 今のトレンド常時接続 Go AzurePC とクラウドの両方に保存されるコンテンツ Go Azureファイルではなくユーザーを中心としたアクティビティ Go Metroデスクトップ PC に対するモバイル PC の台頭 Go Metro
  • 39. ① まずは、試してみる!http://www.windowsazure.com/ja-jp/pricing/free-trial/
  • 40. ② いくらかかるの!
  • 41. Go Azure × Go Metro ご清聴ありがとうございました!

×