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

HDIfes #02「『ユーザーが毎日使いたくなる』ためにできること」

UXとモバイルの超ざっくりとした話

UXの超ざっくりした話

この操作性のUXが悪い

ログインのUXをデザインする

パフォーマンス改善でUXを向上

UXの改善

UI/UX

コンテクストに基づいてUXを定義

UXのためのUIデザイン

優れたUXを提供する

UXの解釈を議論しだしてもラチがあかん

じゃあ何が大事なの？

「ユーザーが毎日使いたくなるため」にできること

ユーザーのデバイスの外と中での体験を考える

デバイスの外での体験＋デバイスの中での体験

UXデザインの領域 UIデザインの領域

デバイスの外での体験を調査して気づきを得る

デバイスの中での体験の骨格を作成

デバイスの中での体験の詳細を網羅する

提供するアプリ、サービスの定義

UIデザイン(コンセプトフェーズ)

UIデザイン(プロダクションフェーズ)

UXデザイン（調査フェーズ）

UXデザイン（コンセプトフェーズ）

モバイルの超ざっくりした話

9 章新しいモバイルのかたち

1 章いかりを上げる2 章モバイルNUI パラダイムの登場3 章デンバーのピーナツバター

5 章モバイルUX パターン6 章モバイルプロトタイピング7 章モーションとアニメーション

4 章形態の変化

8 章感覚の目覚め

9 章新しいモバイルのかたち

2 章モバイルNUI パラダイムの登場

3 章デンバーのピーナツバター

5 章モバイルUX パターン

6 章モバイルプロトタイピング

7 章モーションとアニメーション

4 章形態の変化

8 章感覚の目覚め

デバイスの中の話（UIデザイン）

デバイスの外の話（UXデザイン）

デバイスの中と外の話（UIとUXのデザイン）

デバイスの中の話（UIデザイン）

デバイスの中も外も無い話


モバイルの利用コンテクスト

スマホの特徴

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

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

PCとは利用体験が異なる

メディアの進化

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

印刷物からWebへ

http://www.copperval.com/index.html



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

PCメディアの進化




(c) yahoo!

(c) google

PCからモバイルへ


(c) nhn (c) path

スマホ発のサービス


企業ブローシャ

オンラインメディア

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

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

モバイルならではの体験

(c) TV Everywhere – Thoughts on designing for multiple devices

http://sherylyulin.com/2011/04/24/tv-everywhere-thoughts-on-designing-for-multiple-devices/

end-to-end experience

モバイルモバイル



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

(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

(c) TV Everywhere – Thoughts on designing for multiple devices


end-to-end experience

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

他のタッチポイントを活用してユーザーとの接点を増やす

モバイルならでは

サービスエコシステム

モバイルならでは



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

コンセプト設計手法

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

2013年4月刊行


エコシステム

90秒のミニワークショップを入れます。

慌ただしいですが、よろしくお願いします。

筆記用具、ご用意ください。

白紙、配布します。

お伝えしたいこと

「価値は、つながりが生む」

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

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

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

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

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

ユーザーが毎日、使いたくなる

「価値」を生んでいるのは、

何でしょうか？

エコシステム

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

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

しているわけではない。

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

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

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

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

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

ワークショップ　90秒　個人作業• このセミナーの、申し込みサイト、覚えてますか。支える要素を描き出してみよう。

• タッチポイント、人々、ビジネスプロセスと技術環境

• 箇条書きでもいいけど、関係図のほうが、よりおすすめ

ワークショップ　結果例

発表者が90秒で描いたもの。デバイスの存在を描き忘れました。

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

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

ンすることだと考える」

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

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

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

P.115 より

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


モバイルUXパターンモビリティのためにデザインするDesigning for Mobility

Oct 26 2013 Hiroko NOZAWA@ HDIfes

セクション２モバイルパターンの登場

5.タスクベースのデザインよ、さようなら


３つのインタラクションモデル・使い続けることで価値が増える

・いじりたくなる

・察する




・察する


察する

• プリズムエフェクト• 同じエクスペリエンスを複製しない• デバイスの強みを活かす


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

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

モバイルは小さいPCじゃない！


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




・察する



「ユーザーが毎日使いたくなる」　ためにできること　UI アニメーション編　安藤幸央 @yukio_andoh

毎日使いたくなる

Photo by Nanagyei

Facebook : 平均1日14回32分

アクティビティバイアス：いろいろする日もあれば、しない日もある

毎日は人それぞれ

通常利用アプリ10個、1日120回アプリ起動（10代女性）

4番バッター／1軍／2軍／戦力外

毎日は人それぞれ

Dock に入っているアプリは何？1画面目のアプリは何？

8%

毎日使いたくなる×

Photo by ali edwards

毎回使いたくなる

Photo by ali edwards

タクシー配車、目覚まし、天気予報、占い、乗り換え案内、家計簿、電卓

???

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

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

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

意味のある動き

意味の無い動き

速い

遅い

予測できる　予想できる

GROWTH HACK

ENGAGEMENT

RETENTION

GROWTH HACK■ SNS で伝搬しやすい要素。アプリを使っていなくても楽しめる■ バイラルループが 1-hop で終わらずに、広がり続ける要素■ Give & Take の関係が始められる要素。親切とおせっかい■ ギフトを贈ったり、加入を誘い込める、インセンティブもあり★ 何かの時間を奪ったら、いつか奪われる。新しい市場を作る★ ゲームは最初の一回失敗して覚える。アプリは失敗したら辞める■ ソーシャルアクションを各所に作る（コメント、共有、タグ）■ ソーシャルだけでない、人に影響を与える、影響を受ける要素■ できるだけ登録しなくても多くの事ができると良い★ ソーシャルすぎるアプリやサービスは、話題になりにくい

ENGAGEMENT

★ 使っていない期間、時間も何かしてあげる : Argus■ プッシュ通知で、きっかけづくり : Growth Push■ 時間を浪費しない（夢中になってもいいがいつか離れる）■ いつでも中断、いつでも再開できる。仮体験できる★ 感情のピークポイントを作る（いいね！の瞬間、ランキング）

■ 時間制限、特定時刻の出来事、一定期間等。時間のデザイン■ コンタクトポイントを増やす。使うきっかけを増やす■ 想定外の使い方を許容する（ハッシュタグ、バルス） ■ バッジ数表示による、もどかしさと、モチベーションの維持★ 便利すぎない。ほどほどの手間と、焦燥感、心地よい達成感

RETENTION

★ モバイルだけではない、連続した体験（PC, TV, Tablet, 紙）■ アプリ外でもサービスやブランドとの連携がとれている■ いつでも中断、いつでも再開できる。いつも使わなくてもいい■ サービスの負の要素を減らし、小さな改善を積み重ねる ■ サービスの成功の基準をシンプルに考える。無理に継続させない ■ しばらく使わなくなってからも、思い出すきっかけを★ どんなアプリ、サービスもいつかは辞める。心地よい余韻を★ バランスブレイカー、想定外のことが起これば、離れない■ 簡単すぎない、偶然すぎないこと、飽きる（飽和）要素の排除

“Take a Human desire.”

人間の欲をつかむのだ！Evan Williams (Twitter ex-CEO)

via. http://www.au.kddi.com/pr/4glte/index.html

http://www.au.kddi.com/pr/4glte/index.html

http://www.au.kddi.com/pr/4glte/index.html

Customer Journey Map朝起きる通勤する仕事中昼休み事件・イベントごと帰宅就寝前

Insight

Activitiesユーザー行動

考えていること

Feature&Contents利用するコンテンツ

Key Experience重要なデザイン要素

Feeling感じていること

・PCとモバイルでの使い分け

・いろいろな使い方・自分のフィードを見る・TV等を見ながらフィードを見る・旅行先で移動しながら見る・災害時に役立つ・たくさんあるTwitterクライアントについて・エコシステムについて

・他のアプリとの連携；RSS Readerなど・フィードバック。ソーシャル。いつ来るか分からない情報を見続ける・継続利用、使い続けることで価値が出てくる楽しくなる

・フォローしている人によって、全くタイムラインが変わる・ニュースのタイムライン・bot系のタイムライン・アイドルのリスト・一日の中で使い続ける、変化する、価値が出てくる・140文字の制限がもたらす絶妙なバランス・最近、Twitterを使わなくなった、何故

面白いねたを投稿する

・いろいろな使い方・PCとモバイルでの使い分け・他のアプリとの連携；RSS Readerなど・継続利用、使い続けることで価値が出てくる。楽しくなる・フィードバック。ソーシャル。いつ来るか分からない情報を見続ける・フォローしている人によって、全くタイムラインが変わる

写真＆説明ひとこと

Retweetされるとうれしい

共有して、共感してもらいたい

友だちのリストをチェックしてる

友だちの行動UX情報

みんな楽しそう。。

うらやましい。。

友だちのリストをチェックしてる

給湯室でお茶を入れる隙にする

上司に見つからないようにしたいドキドキ

寝起きに見てる

たばこ休憩で見ている海外ネタのチェック

とりあえずチェックする

日本のツイートを見ている

あんまり考えてない

イベント内容をチェック

天気もチェック

自宅でWebを見ているときにTwitterアカウントでログイン

別のサービス

便利フォローしている友だちがついてくる

楽・ラッキー

リアルタイムのツイート

リストの情報

ハッシュタグを追う