狠狠撸

狠狠撸Share a Scribd company logo
Windows Azure
    × Metro Style Apps
~ Windows Azure ではじめる Metro Style Apps
~

               Windows 女子部
               Japan Windows Azure User Group 女子
               部
Agenda
          UI                          !
  Part1
          ~      Metro Style      ?


  Part2   Windows Azure   Metro Style Apps
以前の Windows Azure Platform
Metro Style へ
Universal Design ≠ Usability
Universal Design ≠ Usability

  Universal Design                  Usability

できるだけ多くの人が利用可能な            ある製品が、
デザインにすること                  指定された利用者によって、
                           指定された利用の状況下で、
                           指定された目的を達成するために
文化?言語?国籍の違い、老若男女といった       用いられる際の、有効さ、効率、及び
差異、障害?能力の如何を問わずに利用する       利用者の満足度の度合い
ことができる施設?製品?情報の設計


                                   【ISO 9241-11 / JIS
                          Z8521】
Windows の Universal Design

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




                     各タブページで
                      Alt  を押下すると表示
                      ESC を押下すると非表示
Windows 8 (Release Preview)では

Windows キー    :メトロとデスクトップの切り替え
Windows キー + C:チャームの表示
Windows キー + D:デスクトップ画面
Windows キー + E:エクスプローラー起動
Windows キー + L:画面ロック
Windows キー + Q:アプリ一覧

Windows 8では
?マウス
?キーボード
?タッチ
様々な入力デバイスに対応
ユーザーが求める画面の 『価値』とは
  アクセシビリティ   ユーザビリティ      イノベーション
    の対応        の対応          の創出
                           魅力ある
   使えるように    使えるように       わくわく感を生
     する        する          む製品の
                            創出

         使いにくい                 使いたい
使えない              使いやすい
         が使える
                 ?学習し易さ

                 ?エラーの少なさ

                 ?記憶のしやすさ

                 ?効率性
『記憶の種類』




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

「体で覚える」   先行刺激によって、   専門用語の定義や   意識に昇る以前の    個人的体験や出来
記憶        後続刺激に対する    客観的な知見など   感覚器官で短期間    事についての記憶
          認知や行動、判断    学習行動によって   (約20秒間)
          に無意識的に影響    身に付ける記憶    保持される記憶     ある期間と場所で
          が出て、促進され                           の出来事について
          たり抑制されたり    一般的な知識教養   保持される情報数    の記憶
          する現象        に関する記憶     は、7±2(マジカ
                                 ルナンバー)
『人间の情报処理のながれ』
            ■短期記憶
            取り込んだ情報を解釈する機能
感覚情報貯蔵庫     GUI では、短期記憶で情報を処理
(0.5秒格納)
            ■短期記憶の処理能力
             ?マジカルナンバー( 7±2 )
 短期記憶        ?チャンキング
(20秒格納)       情報を理解したり記憶しようとする際、
              その情報をいくつかの
              まとまりとしてとらえること

 長期記憶
 (記憶)         メニューの区分線やリボンUIに
              おけるグループ化
再生と再认


   再生                              再認
CUI                            GUI
Character User Interface       Graphical User Interface
NUE & NUI


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


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



              ?                 PUSH
■ 再認記憶(recognition memory) とは
 ① 人間は、日常生活で遭遇する様々な事物や人物を記憶に留める

 ② 遭遇した事物や人物が、初めて出会ったものなのか、それとも、
   以前にも出会ったことがあるのかを的確に判断するための記憶
認知と認知不安

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


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


                認知
             ? 不安が強すぎる ? 攻撃、逃避
                    不安
             ? 不安が適度     ? 理解しようとする
Buttonは四角?




?
Microsoft Office の UI の進化

Excel 2003


Excel 2007



Excel 2010
2重プロセス

  問題


直観による    NO
 判断が
正しいか?
                推論による   NO
YES            判断がエラー
               を正せるか?
         YES


  正解                    不正解
『使いやすさ 』へ の影響

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

    『プロセス1』     『プロセス2』
    ?速い         ?遅い
    ?並列に処理      ?順番に処理
    ?無意識的?自動的   ?管理されている
    ?努力は不要      ?努力が必要
    ?連想に基づく     ?規則に基づく
『認知』≠『使いやすい』

アプリケーションの終了
    Windows 7 まで
      閉じるボタンをクリックする
    Windows 8 の Metro Style アプリケーション
      アプリケーションの上部のへりをつかみ下にスライドする

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


環境が人間や動物の知覚?認知?行動に与える意味
物理的な特徴が、そのモノの機能に与える影響
デザインの理由を説明できますか?
デザインの理由を説明できますか?




             西暦または和暦が
            明示されていない例
滨厂翱5218とは?
                     性別の選択①




?   言語に依存しない1桁のコードによるヒトの性別の表記に関する
    国際規格
?   0 = not known(不明)
?   1 = male(男性)
?   2 = female(女性)
?   9 = not applicable(適用不能)
贵补肠别叠辞辞办の事例
     ISO5218対応
1.   ユーザー登録における性別選択は任意
     理由:性別選択を望まない人々の意思を尊重する
2.   性別が分からないと翻訳に支障をきたすというフィードバックが多数寄せられた
3.   性別の選択が必須に変更
     従来どおり、プロフィールにおける性別の表示は任意
分かりやすさとは?




ユーザーが判断に迷わない
Go Azure × Go Metro
Metro Styleとは

地下鉄の行き先案内のように見やすく、
意味を理解しやすいデザイン
  目的に早く到着できる
タイポグラフィ(Typography)を基調

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

 ? 書体?字体の大きさ(ウェイト)
 ? 行と行との間隔(レディング)
 ? 文字と文字との間隔(カーニング及びスペーシング)
Metro Style Design   Layout
レイアウト
視線の流れを考慮する
1行の文字数を考慮する
スクロールバーとマウスの移動距離を考慮する
  スクロール量の考慮
各機能のグループ化
  チャンキングによる记忆の负荷を軽くする
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


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

More Related Content

Go azure5 16 9_提出用