SlideShare une entreprise Scribd logo
1  sur  40
CHAPTER
 3




Peanut Butter
in Denver
Demystifying the Elusive
Mobile Context

                                             July 28 2012 Yoshinori Wakizaka @UX TOKYO
Table of Contents



コンテクスト

モバイルコンテクストの原則

モバイルコンテクストのデザインTips

コンテクストのフレームワーク
コンテクスト

モバイルコンテクストの原則

モバイルコンテクストのデザインTips

コンテクストのフレームワーク
モバイルのコンテクスト
コンテクストは「どこでも」
モバイルのコンテクスト
チャレンジングな状況
コンテクスト

モバイルコンテクストの原則

モバイルコンテクストのデザインTips

コンテクストのフレームワーク
モバイルコンテクストの原則
どこでも な状況に対処するために



1. モバイルならではの体験を作ることにフォーカスする


2. 注意散漫、行動が遮られることを前提にデザインする


3. 認知的負荷や機会費用を減らす
モバイルコンテクストの原則
どこでも な状況に対処するために



1. モバイルならではの体験を作ることにフォーカスする


2. 注意散漫、行動が遮られることを前提にデザインする


3. 認知的負荷や機会費用を減らす
1. モバイルならではの体験
 the rear-view mirror effect( Marshall McLuhan)
 新しいテクノロジーを既存の視点で見ようとする傾向のこと。デジタル情報を古いメディア(印刷)の
 メタファで見ようとすること。例)デジタル技術が利用できるウェブで紙のブローシャをそのまま移行
 させたようなブローシャウェアというサイト。


Brochure     BrochureWare




                                      ?
      印刷物         ウェブ          モバイル
1. モバイルならではの体験
モバイルならではのユニークな体験




 既存のメディア(PC)の延長線上にあるeMail   モバイルでの新しい体験を提供しているShazam
1. モバイルならではの体験
ニーズとソリューション
1. モバイルならではの体験
ニーズとソリューション



Why would I email someone from my mobile phone

          when I can just text them?




ニーズ:テキストでコミュニケーションしたい

ソリューション:e-mail、テキストメッセージ
1. モバイルならではの体験
ソリューションとニーズ
ユーザーがしたいこと、システム側で提供できること



   ソリューション                     ニーズ
  医者の名前とアドレスのデータベース        近所のお医者さんを見つけたい


          マップ              A地点からB地点へ移動したい

                            何の予定があるか知りたい
        カレンダー
                            先に計画を立てておきたい

         eメール              コミュニケーションを取りたい


     Facebookアップデート            繋がりたい


         LinkedIn      仕事に関するアイデンティティを管理したい


           検索                 質問に答えたい


         Picasa                シェアしたい
1. モバイルならではの体験
    Context of Use
     PCとモバイルにおける差異




   Screen size       Large       Small

 Context of use      Limited     Varied

Attention levels      High     Fragmented

Network access        High      Limited
1. モバイルならではの体験
      モバイルにおける3つの制約


デバイスの制約                                             人間の制約
スモールフォームファクター                                       無くしやすい
T9/QWERTY英数入力                                       言語やメタファが適切ではない
カメラ/ビデオ                                             認知に集中を要する
バッテリー駆動                                             文字入力が難しい
無線通信、Wi-Fi、Bluetoothでのネットアクセス                       人付き合いが苦手、利用できない状況がある
マイク、スピーカー、ヘッドフォン                                    文字やイメージが小さくて読みにくい場合がある
加速度センサ                                              コンテクストによっては聞き取りにくい場合がある
                                                    作業記憶を多分に要する場合がある




                                環境の制約
                                ほぼどこでも使える、どこにでも仕舞える
                                明るい太陽光の下ではスクリーンのグレアが発生する
                                壊れやすい(水没、埃など)
                                ある状況では利用が禁止されている
                                ネットワーク圏外では使えない
                                電源が手に入らない状況がある
                                料金プランによる制約がある(ローミング、データ通信)
モバイルコンテクストの原則
どこでも な状況に対処するために



1. モバイルならではの体験を作ることにフォーカスする


2. 注意散漫、行動が遮られることを前提にデザインする


3. 認知的負荷や機会費用を減らす
2. 注意散漫・行動が遮られる
行動や制約に関する差異
2. 注意散漫・行動が遮られる
multitasking woman
2. 注意散漫・行動が遮られる
大小様々なタスクを同時にやりくりしている状態



       生産的&効率的でありたい
マルチタスクが非効率なのは調査でも実証されているが、人は日常的にマルチタスクな状態にある




モバイル端末が複数の目的を持っている
音楽プレーヤー、ボイスコール、テキストメッセージングなど




         どこでも使えてしまう
常に携帯しているのでどこでも使える反面、物理的な環境やデバイスの他の機能に遮られてしまう
2. 注意散漫・行動が遮られる
電話がかかってくる、バスが到着する、、



       Multi-Tasking


      Task Switching


        Always On
2. 注意散漫・行動が遮られる
デバイスの機能や外部環境から常に遮られている状態



          Multi-Tasking

    継続的注意力断片化
      Task Switching
 (Continuous Partial Attention:CPA)

            Always On
2. 注意散漫・行動が遮られる
継続的注意力断片化とは?
第一のキーワード、Wikipediaにも項目がある「Continuous Partial Attention」(以下、CPA)
は、かつてアップルに、そしてマイクロソフトの研究部門に在籍していた Linda Stoneが考案した用
語です。多種多様なメディアやコミュニケーションチャネルの動向に対して常に注意を払わずにはい
られない状態を意味し、「継続的注意力断片化」などと訳されることもあります。
                                                   (c) IA Spectrum 2009




          マルチタスク→継続的注意力断片化
                能動的                       受動的
2. 注意散漫・行動が遮られる
 継続的注意力断片化に対する対処方法




 中断してもすぐに再開できるようにする

• メニューを深くしない
• すべてのコンテンツをみせない
モバイルコンテクストの原則
どこでも な状況に対処するために



1. モバイルならではの体験を作ることにフォーカスする


2. 注意散漫、行動が遮られることを前提にデザインする


3. 認知的負荷や機会費用を減らす
3. 認知的負荷や機会費用を減らす
Contextual Design により負荷や費用を減らす



認知的負荷
ワーキングメモリをコントロールするための負荷



機会費用
ある行動を選択することで失われる、他の選択肢を選んだ時に得られる利益
3. 認知的負荷や機会費用を減らす
ワーキングメモリのトレーニング



  Memory! (iPhone / iPad)
  The game Memory is a matching game designed to improve children s short-term memory skills, thus
  increasing their cognitive load thresholds.
3. 認知的負荷や機会費用を減らす
     二重貯蔵モデル:短期記憶と長期記憶
                                        維持リハーサル




                                   符号化


外界     感覚器                短期記憶            長期記憶
                 パターン認識
                                   検索




         消失                置き換え            干渉・検索
                                             失敗

     外界から感覚器を通してインプットされた情報(物理的な刺激)は短期記憶として蓄えられます。
     しかし短期記憶の貯蔵庫は容量が小さく、一時的にしか情報を保持できません。
     しかし一旦長期記憶に貯蔵されると容易に忘れることはなく、容易に忘れることはありません。
     この短期記憶と長期記憶の間を行き来する情報を扱うのがワーキングメモリ(作業記憶)である。
     簡単な計算をする、試験勉強で暗記する、人の話を聞いてそれに対する答を用意する、など。
3. 認知的負荷や機会費用を減らす
コンテクストが変われば、代替案を選ぶ費用も変わる
Need: Transportation to the local shopping district.
Motivation/Urgency: Low.
Environment: Home.
Alternatives: Online schedule through PC, driving, showing up at the station and asking
an attendant, calling a friend.


         平常時




         緊急時

Need: Transportation to an unfamiliar neighborhood.
Motivation/Urgency: Very high.
Environment: On the street, rushing to the station.
Alternatives: Maps at the BART station, showing up at the station and asking an
attendant or fellow passenger, calling a friend.
コンテクスト

モバイルコンテクストの原則

モバイルコンテクストのデザインTips

コンテクストのフレームワーク
モバイルコンテクストのデザインTips
モバイルコンテクストの偏在性のためにできること

 余分なものを削ぎ落す
 ユーザーはモバイルのコンテクストに関連あるもので編集されたオプションを期待している


 チラ見しやすいようにデザインする
 フォーカスしたり注意を向けなければいけないビジュアルは避けましょう


 階層を深くしない
 階層を深くする代わりに、直感的かつ素早く素早く   り着けるようなものを求めている


 自然な接点を設ける
 予測可能なインタラクションのパスを設ける


 途中で操作を止めても同じところから再開できるようにする
 モバイルの利用コンテクストでは、操作を停止したり中断することが多いので


 組織化の原理として時間を使う
 タイムライン、リスト、ストリームだと時間を使ってユーザーを容易にリオリエントできる
モバイルコンテクストのデザインTips




 余分なものを削ぎ落す   階層を深くしない
モバイルコンテクストのデザイン手法
ブレストは現場で、コンテクストを      える




      環境がアイディアをインスパイアする
      現実的な感覚に浸る
      制約や要求が見えてくる
コンテクスト

モバイルコンテクストの原則

モバイルコンテクストのデザインTips

コンテクストのフレームワーク
モバイルコンテクストのフレームワーク
名詞と関係性(Nouns and relationships)
ユーザーと世界を構成する人や場所、物(名詞)の間にある関係性を理解することで、モバイルコンテ
クストを理解する。その関係は、空間的あるいは時間的、社会的、意味的である。
モバイルコンテクストのフレームワーク
名詞と関係性(Nouns and relationships)
ユーザーと世界を構成する人や場所、物(名詞)の間にある関係性を理解することで、モバイルコンテ
クストを理解する。その関係は、空間的あるいは時間的、社会的、意味的である。




               空間的関係性
 スーパーマーケットの棚に陳列されているピーナッツバター、家の冷蔵庫の中のピーナツバター




               時間的関係性
        朝食にでてくるピーナツバター、3時のおやつのピーナツバター




               意味的関係性
      ピーナッツバターは大好物、 スターバックスでピーナツバターを注文する
デンバーのピーナツバター
空港で急にピーナツバターを食べたくなったら?
あなたが飛行機であまり馴染みのない街、例えばデンバーの空港に着いたところを想像してください。
そして手荷物受取所でスーツケースを受け取りながら、ピーナツバターに対する飽くなき欲望に取り憑
かれたとします。モバイル端末が使ってピーナツバターを探せるとしたら、どうやって使いますか?




        物の意味や関係性に関する情報は利用しやすいが、
       場所や時空間の情報を利用する方法は発展途上である
モバイルUXの足がかり
モバイルの特性は時空間的な情報とダイナミクス
Shazam:今、目の前にある音楽とユーザーの関係性を活用している。
IntroNow:ShazamのTV番組版。TVの音声を使って番組を検索し、ソーシャルでシェアできる。
コンテクストとジェスチャー
ダイナミックで直感的なインタラクション
目の前のユーザーとBumpすることにより、情報を交換する。
時間、空間を共有することによってしかなし得ないインタラクション。
コンテクストがトリガになる
マップのエクスペリエンス
PCでは現在地を自分で入力しなければいけない
モバイルでは、現在地の情報を自然と利用することができる

Contenu connexe

Similaire à Peanuts butterindenver ja

記号を用いたコミュニケーションを実現するために何が必要か?― 記号創発ロボティクスの 視点から ―
記号を用いたコミュニケーションを実現するために何が必要か?― 記号創発ロボティクスの 視点から ―記号を用いたコミュニケーションを実現するために何が必要か?― 記号創発ロボティクスの 視点から ―
記号を用いたコミュニケーションを実現するために何が必要か?― 記号創発ロボティクスの 視点から ―Tadahiro Taniguchi
 
Tablet 20121129 KnowledgeCOMMONS vol.18
Tablet 20121129 KnowledgeCOMMONS vol.18Tablet 20121129 KnowledgeCOMMONS vol.18
Tablet 20121129 KnowledgeCOMMONS vol.18Visso株式会社
 
これからはじめるIoTデバイス mbed入門編
これからはじめるIoTデバイス mbed入門編これからはじめるIoTデバイス mbed入門編
これからはじめるIoTデバイス mbed入門編Naoto Tanaka
 
今日から業務で使える17の運用系Linuxツール、そして円環の理
今日から業務で使える17の運用系Linuxツール、そして円環の理今日から業務で使える17の運用系Linuxツール、そして円環の理
今日から業務で使える17の運用系Linuxツール、そして円環の理Masahito Zembutsu
 
微博(ウェイボ)型社内SNSとモバイルで始める社内の可視化
微博(ウェイボ)型社内SNSとモバイルで始める社内の可視化微博(ウェイボ)型社内SNSとモバイルで始める社内の可視化
微博(ウェイボ)型社内SNSとモバイルで始める社内の可視化Takamitsu Nakao
 
無題の添付ファイル 00060
無題の添付ファイル 00060無題の添付ファイル 00060
無題の添付ファイル 00060Shigeru Kishikawa
 
ビジュアライゼーションの役割とUI開発のイノベーション(2)
ビジュアライゼーションの役割とUI開発のイノベーション(2)ビジュアライゼーションの役割とUI開発のイノベーション(2)
ビジュアライゼーションの役割とUI開発のイノベーション(2)BizCOLLEGE
 
デブサミ2013【15D-3】Azureセッション資料
デブサミ2013【15D-3】Azureセッション資料デブサミ2013【15D-3】Azureセッション資料
デブサミ2013【15D-3】Azureセッション資料Shinichiro Isago
 
タブレットセミナ[八子] R 20110217
タブレットセミナ[八子] R 20110217タブレットセミナ[八子] R 20110217
タブレットセミナ[八子] R 20110217知礼 八子
 
"UI Patterns for Smartphone" HCD-Net SD #6 2014
"UI Patterns for Smartphone" HCD-Net SD #6 2014"UI Patterns for Smartphone" HCD-Net SD #6 2014
"UI Patterns for Smartphone" HCD-Net SD #6 2014Takashi Sakamoto
 

Similaire à Peanuts butterindenver ja (11)

記号を用いたコミュニケーションを実現するために何が必要か?― 記号創発ロボティクスの 視点から ―
記号を用いたコミュニケーションを実現するために何が必要か?― 記号創発ロボティクスの 視点から ―記号を用いたコミュニケーションを実現するために何が必要か?― 記号創発ロボティクスの 視点から ―
記号を用いたコミュニケーションを実現するために何が必要か?― 記号創発ロボティクスの 視点から ―
 
Tablet 20121129 KnowledgeCOMMONS vol.18
Tablet 20121129 KnowledgeCOMMONS vol.18Tablet 20121129 KnowledgeCOMMONS vol.18
Tablet 20121129 KnowledgeCOMMONS vol.18
 
これからはじめるIoTデバイス mbed入門編
これからはじめるIoTデバイス mbed入門編これからはじめるIoTデバイス mbed入門編
これからはじめるIoTデバイス mbed入門編
 
今日から業務で使える17の運用系Linuxツール、そして円環の理
今日から業務で使える17の運用系Linuxツール、そして円環の理今日から業務で使える17の運用系Linuxツール、そして円環の理
今日から業務で使える17の運用系Linuxツール、そして円環の理
 
微博(ウェイボ)型社内SNSとモバイルで始める社内の可視化
微博(ウェイボ)型社内SNSとモバイルで始める社内の可視化微博(ウェイボ)型社内SNSとモバイルで始める社内の可視化
微博(ウェイボ)型社内SNSとモバイルで始める社内の可視化
 
無題の添付ファイル 00060
無題の添付ファイル 00060無題の添付ファイル 00060
無題の添付ファイル 00060
 
ビジュアライゼーションの役割とUI開発のイノベーション(2)
ビジュアライゼーションの役割とUI開発のイノベーション(2)ビジュアライゼーションの役割とUI開発のイノベーション(2)
ビジュアライゼーションの役割とUI開発のイノベーション(2)
 
Oss on Azure, social mobile web
Oss on Azure, social mobile webOss on Azure, social mobile web
Oss on Azure, social mobile web
 
デブサミ2013【15D-3】Azureセッション資料
デブサミ2013【15D-3】Azureセッション資料デブサミ2013【15D-3】Azureセッション資料
デブサミ2013【15D-3】Azureセッション資料
 
タブレットセミナ[八子] R 20110217
タブレットセミナ[八子] R 20110217タブレットセミナ[八子] R 20110217
タブレットセミナ[八子] R 20110217
 
"UI Patterns for Smartphone" HCD-Net SD #6 2014
"UI Patterns for Smartphone" HCD-Net SD #6 2014"UI Patterns for Smartphone" HCD-Net SD #6 2014
"UI Patterns for Smartphone" HCD-Net SD #6 2014
 

Plus de Yoshinori Wakizaka

Plus de Yoshinori Wakizaka (8)

情報デザインの多面性
情報デザインの多面性情報デザインの多面性
情報デザインの多面性
 
UX Design Lecture in TUAD 2014
UX Design Lecture in TUAD 2014UX Design Lecture in TUAD 2014
UX Design Lecture in TUAD 2014
 
モバイルのためのUXデザイン
モバイルのためのUXデザインモバイルのためのUXデザイン
モバイルのためのUXデザイン
 
Storytelling ux tokyo-en
Storytelling ux tokyo-enStorytelling ux tokyo-en
Storytelling ux tokyo-en
 
Storytelling workshop handout
Storytelling workshop handoutStorytelling workshop handout
Storytelling workshop handout
 
Devlove1210 wackiesrock
Devlove1210 wackiesrockDevlove1210 wackiesrock
Devlove1210 wackiesrock
 
UI for UX_Aug2011
UI for UX_Aug2011 UI for UX_Aug2011
UI for UX_Aug2011
 
#4_web_ux_wakizaka
#4_web_ux_wakizaka#4_web_ux_wakizaka
#4_web_ux_wakizaka
 

Peanuts butterindenver ja