5C-モバイルフロンティア

フロントエンドエンジニアとデザイナーのための

モバイルユーザーエクスペリエンス

安藤幸央・佐藤伸哉・清水かほる・野澤紘子・羽山祥樹・脇阪善則

Nov 30 2013 Kaoru Shimizu @HTML5 Conference

いかりを上げるCasting Off Anchors

1章

モバイルフロンティアを探索するための準備Preparing to Explore the Mobile Frontier

過去との決別デスクトップコンピューティングからモバイルへ

• 普遍的なパラダイム

• 共通化されたUI規則

• 標準化された入力手法

• デザイン理論

• 学術的研究結果

• 普遍的なパラダイム

• 共通化されたUI規則

• 標準化された入力手法

• デザイン理論

• 学術的研究結果

?

Nov 30 2013 Kaoru Shimizu @HTML5 Conference

モバイルNUIパラダイムの登場GUIとNUIの境界を越えて

The Emergent Mobile NUI Paradigm

Traversing the GUI/NUI Chasm

2章

Past Future

ユーザーインターフェースの進化

コマンドラインインターフェースCLI (Command Line Interface)

ユーザがコマンドを覚え、テキストベースのインターフェースに打ち込む。

グラフィカルユーザーインターフェースGUI (Graphical User Interface)

WYSIWYG(What You See Is What You Get)ユーザーにコマンドを見せて選ばせる。フォルダやゴミ箱といったオフィスを模したメタファーを利用。

ナチュラルユーザーインターフェースNUI (Natural User Interface)

WYDIWYG(What You Do Is What You Get)ユーザの状況に応じて、表示される情報が変化。より直感的に、速い操作が可能。

Past Future

ユーザーインターフェースの進化

Past Future

ユーザーインターフェースの進化

Now

日本のスマートフォン普及率

Our Mobile Planethttp://www.thinkwithgoogle.com/mobileplanet/

CHAPTER����������� ������������������  3

Nov 30 2013 Yoshinori Wakizaka @HTML5 Conference

デンバーのピーナッツバター

Demystifying the ElusiveMobile Context

スマホの特徴

小さな画面＆タッチ操作いつでもどこからでもインターネットにアクセスできる

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

PCとは利用体験が異なる

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

(c) rosenfeldmedia

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

(c) rosenfeldmedia

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

スクリーンサイズ

利用状況

注意のレベル

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

大きい限定的

高い快適

小さいばらばら

断片的限定的

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

(c) rosenfeldmedia

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

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

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

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

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

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

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

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

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

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

(c) rosenfeldmedia

1. モバイルならではの体験音声入力：その場で流れている音楽から楽曲検索

Shazam

1. モバイルならではの体験カメラ：撮ったその場でWebにアップ、共有

Instagram

1. モバイルならではの体験位置情報：現在地の検索、現在地からの経路検索

google map

1. モバイルならではの体験プッシュ通知：サービス側からイベント通知

Calendar

(c) rosenfeldmedia

1. モバイルならではの体験入力 I/F：テキスト、画像、音声

Google search

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

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

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

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

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

(c) rosenfeldmedia

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

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

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

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

3. 認知的負荷や機会費用を減らすある状況で、他よりも簡単にできるようにすること

ニーズ: 近所のショッピングセンターでお買い物するために電車に乗りたいモチベーション/緊急性: 低い利用環境: 自宅代替手段: PCを使ってオンラインスケジュールを確認、車で運転して買い物に行く、駅まで行って駅員に電車の時刻を聞く、友だちに電話する

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

平常時

緊急時

モバイルUXの足がかりモバイルの特性は時空間的な情報が使えること

Shazam：今、目の前にある音楽とユーザーの関係性を活用している。IntroNow：ShazamのTV番組版。TVの音声を使って番組を検索し、ソーシャルでシェアできる。

(c) rosenfeldmedia

コンテクストがトリガになるマップのエクスペリエンス

PCでは現在地を自分で入力しなければいけないモバイルでは、現在地の情報を自然と利用することができる

(c) rosenfeldmedia

形態の変化Shapeshifting

4章

コンバージェンスとマルチデバイス体験Convergence and Multi device Experiences

Nov 30 2013 Yoshiki Hayama @Mobile Frontier Workshop

4章を、ひとことで言うと

「ユーザーは、つながりのなかにいる」

「自分の仕事を『ウェブページをデザインする』と考えることを止

め、代わりに複数のコンテクストで表示されるコンテンツをデザイ

ンすることだと考える」

P.119 ブライアン・リーガー氏 インタビュー より

「もはやPC上の体験を考慮するだけでは足りず、さらに言うなら

ば、モバイル体験だけを考慮するだけでは足りません」

P.115 より

「モバイル端末はより大きなデバイスエコシステムの一部である」

コンバージェンス

あなたのウェブサイトを利用するために、

ユーザーはウェブサイトに合わせていた。

ユーザーがしたいことの途中に、あなたの

ウェブサイトがある、だけなのだ。

メディア アクティビティ（行為）

テクノロジー

コンバージェンス

エコシステム

ユーザーも、ソフトウェアも、サービス

も、デバイスも、それひとつだけで、存在

しているわけではない。

ユーザーも、ソフトウェアも、サービス

も、デバイスも、それを支える色々なもの

も、つながって価値が生まれる。

フォローもフォロワーも、1人もいないTwitter。

フレンドが1人もいないFacebook。

アプリも、App StoreもないiPad。

接続できないインターネット。

想像してみてください。楽しいですか？

エコシステムタッチポイント 人々

ビジネスプロセスと技術環境

参加型デザイン

「つながり」を理解するには「参加型デザイン」がよい。

「環境」「小道具」「刺激」を用意し、ユーザーに演技をしてもらおう。

環境 小道具 刺激

P.98～101 より

ユーザー調査しましょう

4章 見どころ• コンバージェンス（融合）

• デバイスからデバイスへシームレスに

• テクノロジー、メディア、アクティビティ（行為）

• エコシステム

• タッチポイント、人々、プロセスと環境

• 参加型デザイン

• 状況的行為

• マルチスクリーン戦略

• ネイティブアプリ、ウェブアプリ、モバイル向けウェブサイト

Nov 30 2013 Hiroko Nozawa @HTML5 Conference

モバイルUXパターンMobile UX Patterns

5章

モビリティのためにデザインするDesigning for Mobility

モバイルのパタンランゲージとは？1. クラウドとアプリがモバイルUXの構成単位となる

2. 優れたモバイルエクスペリエンスは徐々にその本質を明らかにする

3. コンテンツがインターフェイスになる

4. モバイルにふさわしい入力方法を使う

5. タスクを終わらせることよ、さようなら

• PCのデザインパターンは積むこと。

• モバイルのデザインパターンは、広げること。直感。

モバイルは小さいPCではない！

モバイルUXのためのパターンマトリョーシカ

ハブ＆スポークス

コンテンツがインタフェースになる• 物理的なUIから相互につながった情報のUIへ

• NUI（ジェスチャーとスーパーリアル）

モバイルならではの入力方法を使う

タスクを終わらせることよ、さようなら

1.使い続けることで価値が増える

2.いじりたくなる

３.察する

モバイルプロトタイピングMobile Prototyping

6章

モバイルエクスペリエンスをデザインするためのツールと手法Tools and Methods for Designing Mobile

Nov 30 2013 Nob Sato @HTML5 Conference

モバイルUXのためのデザインプロセス

なぜプロトタイピングか？

モバイルプロトタイピングの種類

戦術的プロトタイピング

体験的プロトタイピング

プロトタイピング、3つの公理

モバイルUXのためのデザインプロセス

時間

発見

開始

終了アイデアが広がるフェーズ

アイデアを実現するフェーズ

定義 開発 納品

デザインの決定

典型的なダブルダイアモンド型のデザインプロセス

なぜプロトタイピングなのか？

• デザインアイデアやエクスペリエンスの伝達（共有）

• ユーザーのフィードバックの収集できる

• 未知の探求ができる

• アイデアの微調整を行える

モバイルプロトタイピングの種類

• 戦術的プロトタイピング 　Tactical Prototyping

• 体験的プロトタイピング 　Experimental Prototyping

戦術的プロトタイピング

1. スケッチ

2. ペーパープロトタイピング

3. 実機上でのインタラクティブなプロトタイプ

体験的プロトタイピング

1. ストーリーボーディング2. ボディーストーミング（アクティングアウト）3. スピード・デート法4. コンセプトビデオ

プロトタイピング、3つの公理

• 適度な忠実度で行う、完璧主義者にならない。

• 失敗を受け入れ、勇気をもって次のアイデアに進む。

• プロトタイピングは万能薬ではない。

「完璧は最適の敵」フランスの有名な詩人ヴォルデール

Nov 30 2013 Yukio Andoh @Mobile Frontier Workshop

モーションとアニメーションMotion and Animation

7章

新しいモバイルUXのためのデザイン要素A New Mobile UX Design Material

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

ディズニーアニメーション 生命を吹き込む魔法

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

Meaningful Transitions

アニメーションの原則を生かす方法1■ 良いアプリをたくさん探し、使い込む。事例の引き出し

2■ 良いものが、なぜ良いのか、要素を分析・分解する (ハイスピードカメラ）

3■ 常用アプリが更新したら、どこが変わったのか比較する

4■ 必要なのは「意味のある」動きだけ。操作の前後の動き重要

5■ コンテンツが王様。直接操作。UIは本来無くていいもの

6■ 指が触れて操作する瞬間は画面が見えてないことを考慮

7■ 情報の密度を落とす。動きで着目すべきところを演出する (速さ）

8■ 中断、途中から始まることが前提。時間の流れを考慮する

感覚の目覚めAwakening the Senses

8章

タッチ、ジェスチャー、音声とサウンドTouch, Gesture, Voice, and Sound

Nov 30 2013 Yoshiki Hayama @Mobile Frontier Workshop

8章を、ひとことで言うと

「視覚以外の感覚も、ある」

「人間は実際に見なくても、どこで何が起こっているかをとても

正しく把握することができます。消防車の音、ゴミの臭い、地震の

揺れ。私たちは感覚を使って本能的に身のまわりの状況を把握して

います」

P.231 より

「モバイルUXをデザインする際に考慮すべき、十分に活用されて

いない3つの感覚をとりあげます。それは、タッチ、ジェス

チャー、音声とサウンドです」

P.232より

タッチインターフェース

10mm15mm18mm

タッチターゲット タッチジェスチャーの配置 コンテンツにつなげる

押しやすい大きさ 姿勢と、操作しやすい配置 UIを意識しない

なじみのジェスチャー+ 新しいジェスチャー

付加的な感覚のフィードバック

根気と創造力

ジェスチャー

操作した感じがする知っている操作をもとにする

ユーザーに使ってもらう

音声によるインターフェース

HTML 5 : alt属性 HTML5仕様書 （Editor's Draft 27 November 2013）4.8.1.1 Requirements for providing text to act as an alternative for images

alt属性の書きかたすごい充実した解説

どのくらい充実しているかというと・・・

まだまだ続くよ！

じつに充実

入力 確認 完了

HTML 5 : alt属性の書きかた例：フォームのステップナビゲーション

alt=“入力” alt=“確認” alt=“完了”

入力 確認 完了

HTML 5 : alt属性の書きかた　[例]例：フォームのステップナビゲーション

alt=“ステップ1の入力は完了しています"

alt=“現在はステップ2の確認です”

alt=“最後はステップ3の完了です”

alt=“お問い合わせ完了まで全部で3ステップです"

8章 見どころ• 人間の感覚は、視覚だけでなく、触覚、身体の動き、聴覚

• タッチインターフェース

• タッチターゲット、タッチジェスチャーの配置、コンテンツと一体化

• ジェスチャー

• なじみのジェスチャー+新しいジェスチャー、付加的な感覚のフィードバック、根気と創造力

• 音声によるインターフェース

Nov 30 2013 Yukio Andoh @HTML5 Conference

新しいモバイルのかたちNew Mobile Forms

9章

モバイルフロンティアの開拓者Pioneering the Mobile Frontier

デジタルデバイスの新しいかたち

■コンピュータと身体との境界の遷移

■コンピュータと環境との境界の遷移

■モバイルと新興市場

デジタルデバイスの新しいかたち

ファッションとして身体として

世の中にあふれるID

携帯電話が銀行の代わりに（M-PESA）

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

モバイルフロンティアの開拓

(CC) by Woody H1