第６回 スマホデザイン会議「UI/UX最前線」

Mar 19 2013 Yukio Ando, Yoshinori Wakizaka (UX TOKYO)

モバイルが切り拓くマルチデバイスエクスペリエンスの未来The mobile frontier : Designing mobile experience

なぜモバイルなのか？

モバイル≒スマホ

スマートフォン国内契約者数予測（2012.03）

http://www.m2ri.jp/data/news/image/20120313/1331622492-2.jpg(c)MM総研2012

契約者の５割がスマートフォン

スマートフォン国内出荷台数予測（2012.03）

http://www.m2ri.jp/data/news/image/20120313/1331622492-1.jpg(c)MM総研2012

出荷台数の７割がスマートフォン

国内モバイルトラフィックの変遷http://itpro.nikkeibp.co.jp/article/NEWS/20120319/387162/?SS=imgview&FD=1400632865&ST=network(c)総務省2012

世界のモバイルトラフィック予測 (c)cisco

地域別にみた推移http://www.cisco.com/web/JP/solution/isp/ipngn/literature/images/white_paper_c11-520862-03.jpg

http://www.cisco.com/web/JP/solution/isp/ipngn/literature/images/white_paper_c11-520862-04.jpg

デバイス別にみた推移

メディアの進化

(c)copperval marketinghttp://www.copperval.com/index.html

印刷物からWebへ

メディアの進化

(c)copperval marketinghttp://www.copperval.com/index.html

PCメディアの進化

メディアの進化

(c) yahoo!

(c) google

PCからモバイルへ

メディアの進化

(c) nhn (c) path

スマホ発のサービス

メディアの進化

企業ブローシャ

オンラインメディア

モバイルコミュニケーション

印刷メディア PC モバイル（スマホ）

スマホの特徴

いつでもどこからでもインターネットに接続できるインターネットサービスの新しい利用端末になった

独自のI/F（タッチパネル、カメラ、GPS、加速度センサー）

新しいサービス体験

モバイルのためのデザイン

モバイルデザインのノウハウWeb、アプリデザインに関する良書、ガイドライン

コンセプト 設計手法

モバイルUXデザインの可能性を探る

モバイルフロンティア（Mobile Frontier）2013年4月刊行予定

モバイルUXのコンテクスト

モバイルのコンテクストモバイル＝「いつでも、どこからでも」使える

(c) rosenfeldmedia

モバイルのコンテクストチャレンジングな状況でも気にしない

(c) rosenfeldmedia

モバイルコンテクストの原則”いつでも、どこからでも”な状況にのためのデザイン

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

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

3. 認知的負荷や機会費用を減らす

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

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

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

3. 認知的負荷や機会費用を減らす

1. モバイルならではの体験

スクリーンサイズ

利用状況

注意のレベル

ネットワークへのアクセス

大きい限定的

高い快適

小さいばらばら

断片的限定的

PCとモバイルでの利用状況の違い

(c) rosenfeldmedia

1. モバイルならではの体験モバイルならではのユニークな体験

既存のメディア（PC）の延長線上にあるeMail モバイルでの新しい体験を提供しているShazam

(c) rosenfeldmedia

1. モバイルならではの体験

デバイスの制約スモールフォームファクターT9/QWERTY英数入力カメラ/ビデオバッテリー駆動無線通信、Wi-Fi、Bluetoothでのネットアクセスマイク、スピーカー、ヘッドフォン加速度センサ

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

人間の制約無くしやすい言語やメタファが適切ではない認知に集中を要する文字入力が難しい文字やイメージが小さくて読みにくい場合があるコンテクストによっては聞き取りにくい場合がある作業記憶を多分に要する場合がある

モバイルにおける３つの制約

モバイルコンテクストの原則”いつでも、どこからでも”な状況に対処するために

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

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

3. 認知的負荷や機会費用を減らす

2. 注意散漫・行動が遮られる行動や制約に関する差異

シュノーケリング（限定的＝狭い視界、息継ぎが必要）スキューバーダイビング（連続的＝視界良好、酸素もいっぱい）

(c) rosenfeldmedia

2. 注意散漫・行動が遮られる誰もに覚えがある「マルチタスク」

(c) rosenfeldmedia

2. 注意散漫・行動が遮られる

マルチタスク

頻繁にタスクを切り替える

常にネットワークに繋がっている

電話がかかってくる、バスが到着する、、

マルチタスキング

頻繁にタスクを切り替える

常にネットワークに繋がっている

2. 注意散漫・行動が遮られる

継続的注意力断片化（Continuous Partial Attention：CPA）

デバイスの機能や外部環境から常に遮られている状態

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

マルチタスク→継続的注意力断片化能動的 受動的

2. 注意散漫・行動が遮られる継続的注意力断片化に対する対処方法

• 中断してもすぐに再開できるようにする• メニューを深くしない• すべてのコンテンツをみせない

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

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

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

3. 認知的負荷や機会費用を減らす

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

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

機会費用ある行動を選択することで失われる、他の選択肢を選んだ時に得られる利益

3. 認知的負荷や機会費用を減らすコンテクストが変われば、代替案を選ぶ費用も変わるニーズ: 近所のショッピングセンターでお買い物するために電車に乗りたいモチベーション/緊急性: 低い利用環境: 自宅代替手段: PCを使ってオンラインスケジュールを確認、車で運転して買い物に行く、駅まで行って駅員に電車の時刻を聞く、友だちに電話する

ニーズ: 土地勘がない場所での検索モチベーション/緊急性: 非常に高い利用環境: ストリート、混雑した駅代替手段: BART（地下鉄の名称）の駅にある地図、駅で乗務員や乗客に尋ねる、友だちに電話する

平常時

緊急時

モバイルUXの足がかりモバイルの特性は時空間的な情報とダイナミクスShazam：今、目の前にある音楽とユーザーの関係性を活用している。IntroNow：ShazamのTV番組版。TVの音声を使って番組を検索し、ソーシャルでシェアできる。

(c) rosenfeldmedia

コンテクストがトリガになるマップのエクスペリエンスPCでは現在地を自分で入力しなければいけないモバイルでは、現在地の情報を自然と利用することができる

(c) rosenfeldmedia

メディアコンバージェンス

デバイスエコシステムPC中心のエコシステムに変化が起きたモバイルを含めたマルチデバイス環境が構築され、UXデザインのルールが変化している

デバイスエコシステムモバイルを含めたエコシステムが構築されているエコシステムの代表的なデザインパターン＝モバイルデバイスの使い方

(c)mobile frontier

一貫性の保持 状態の保持 デバイス間の移動

デバイスエコシステム一貫性の保持各タッチポイントのUX（デザイン、コンテンツ、インタラクション）に一貫性を持たせること

(c)mobile frontier

デバイスエコシステム

(c)evernote

デバイスエコシステム状態の保持どのタッチポイントでサービスを利用しても、同じ状態を保っていること

(c)mobile frontier

デバイスエコシステム

(c)amazon

デバイスエコシステムデバイス間の移動同じエコシステム内にあるデバイス間で情報をやり取りできること

(c)mobile frontier

デバイスエコシステムデバイス間の移動あるデバイスで利用しているコンテンツを他のデバイスでも利用できること

(c)Apple

モバイルUXのデザインパターン

モバイルUXのデザインパターンUXの定義、UI設計の参考にになるデザインパターン

　UX　 　UI　 入力 I/Fモバイル特有の機能を生かすモバイルの画面設計についての考え方モバイルで提供すべきUXの考え方

モバイルUXのデザインパターンクラウドとアプリを基本単位としてデザインする

モバイルUXのデザインパターンクラウドにあるデータをモバイル端末で利用する

コンテンツを観る データを操作する 日記、メモを共有する ニュースを共有する

モバイルUXのデザインパターンスマホの画面は狭い＆通信環境が良くない場合がある

モバイルUXのデザインパターン

マトリョーシカパターン

Hub＆Spokeパターン Bento Boxパターン

モバイルUXのデザインパターンいろいろな入力メソッドを活用する

(c) flickr

モバイルUXのデザインパターンデバイスの機能≒入力インターフェース候補

タッチ入力 音声入力 画像入力 位置情報・GPS

UI / IxDの作り込み

アニメーションの法則multitasking woman

ディズニーのアニメーションの12原則■スクオッシュ（潰し）とストレッチ（伸ばし）■アンチシペーション（予備動作）■ステージング（舞台演出）■ストレート・アヘッド・アクション（逐次描き）とポーズ・　トゥ・ポーズ（原画による設計）■フォロー・スルーとオーバーラッピング・アクション（あと　追いの工夫）■スロー・インとスロー・アウト（両端づめ）■アーク（運動曲線）■副次アクション■タイミング■誇張■実質感のある絵

ディズニーのアニメーションの12原則

http://www.youtube.com/watch?v=xqGL1ZLk3n8

アニメーションの原則を生かす手法1■ 良いアプリをたくさん自分で使い込む。たくさん探す。2■ 良いものが、なぜ良いのか、自分の中で分析・分解する。3■ 常用アプリが更新したら、どこが変わったのか比較する。4■ 必要なのは「意味のある」動きだけ。単一画面内での動き。5■ コンテンツが王様。直接操作。UIは本来無くていいもの。6■ インタフェースは媒介物、人々のインタラクションを考慮。7■ 指が触れて操作する瞬間は画面が見えないことを考慮。8■ 使っている人を観察する。5人の試用で85%の問題は解明。9■ 情報の密度を落とす。着目すべきところを演出する。10■ 中断されることが前提。途中から始まることが前提。11■ iPhone と Android と同じにする必要無し。一人１台。12■ 外に出て使う。ストレスフルな状況下で使う。速度重要。

間違いなくモバイルの時代

2013年4月刊行予定