Your SlideShare is downloading. ×
モバイルのためのUXデザイン
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

2,732
views

Published on

how we can design mobile UX? …

how we can design mobile UX?
How to engaged users to use service frequently?
We have introduced those TIPS through this presentation
with summary of book "mobile frontier" © rosenfeld media
http://rosenfeldmedia.com/books/the-mobile-frontier/

This presentation was made for HDIfes #02
http://hdifes.doorkeeper.jp/events/5884

Published in: Design

0 Comments
34 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,732
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
43
Comments
0
Likes
34
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HDIfes #02「『ユーザーが毎日使いたくなる』ためにできること」 UXとモバイルの 超ざっくりとした話
  • 2. UXの超ざっくりした話
  • 3. 優れたUXを提供する パフォーマンス改善でUXを向上 UXの改善 この操作性のUXが悪い UI/UX UXのためのUIデザイン ログインのUXをデザインする コンテクストに基づいてUXを定義
  • 4. UXの解釈を議論しだしてもラチがあかん
  • 5. じゃあ何が大事なの?
  • 6. 「ユーザーが毎日使いたくなるため」にできること
  • 7. ユーザーのデバイスの外と中での体験を考える
  • 8. デバイスの外での体験+デバイスの中での体験 UXデザインの領域 UIデザインの領域
  • 9. デバイスの外での体験を 調査して気づきを得る 提供するアプリ、サービスの定義 デバイスの中での体験の 骨格を作成 デバイスの中での体験の 詳細を網羅する
  • 10. UXデザイン UXデザイン (調査フェーズ) (コンセプトフェーズ) UIデザイン UIデザイン (コンセプトフェーズ) (プロダクションフェーズ)
  • 11. モバイルの超ざっくりした話
  • 12. 1 章 いかりを上げる 2 章 モバイルNUI パラダイムの登場 3 章 デンバーのピーナツバター 4 章 形態の変化 5 章 モバイルUX パターン 6 章 モバイルプロトタイピング 7 章 モーションとアニメーション 8 章 感覚の目覚め 9 章 新しいモバイルのかたち
  • 13. 2 章 モバイルNUI パラダイムの登場 デバイスの中の話(UIデザイン) 3 章 デンバーのピーナツバター 4 章 形態の変化 デバイスの外の話(UXデザイン) 5 章 モバイルUX パターン 6 章 モバイルプロトタイピング 7 章 モーションとアニメーション 8 章 感覚の目覚め 9 章 新しいモバイルのかたち デバイスの中と外の話(UIとUXのデザイン) デバイスの中の話(UIデザイン) デバイスの中も外も無い話
  • 14. HDIfes #02「『ユーザーが毎日使いたくなる』ためにできること」 モバイルの利用コンテクスト
  • 15. スマホの特徴 小さな画面&タッチ操作 いつでもどこからでもインターネットにアクセスできる 独自のI/F(タッチパネル、カメラ、GPS、加速度センサー) PCとは利用体験が異なる
  • 16. メディアの進化 (c)copperval marketing http://www.copperval.com/index.html 印刷物からWebへ
  • 17. メディアの進化 (c)copperval marketing http://www.copperval.com/index.html PCメディアの進化
  • 18. メディアの進化 (c) yahoo! (c) google PCからモバイルへ
  • 19. メディアの進化 (c) nhn (c) path スマホ発のサービス
  • 20. メディアの進化 印刷メディア 企業 ブローシャ オンライン メディア モバイル コミュニケーション PC モバイル(スマホ)
  • 21. モバイルならではの体験
  • 22. end-to-end experience モバイル モバイル (c) TV Everywhere – Thoughts on designing for multiple devices http://sherylyulin.com/2011/04/24/tv-everywhere-thoughts-on-designing-for-multiple-devices/
  • 23. モバイルのコンテクスト モバイル=「いつでも、どこからでも」使える (c) rosenfeldmedia
  • 24. モバイルのコンテクスト チャレンジングな状況でも気にしない (c) rosenfeldmedia
  • 25. 1. モバイルならではの体験 PCとモバイルでの利用状況の違い スクリーンサイズ 大きい 小さい 利用状況 限定的 ばらばら 注意のレベル 高い 断片的 ネットワークへのアクセス 快適 限定的 (c) rosenfeldmedia
  • 26. モバイルコンテクストの原則 いつでも、どこからでも な状況にのためのデザイン 1. モバイルならではの体験を作ることにフォーカスする 2. 注意散漫、行動が遮られることを前提にデザインする 3. 認知的負荷や機会費用を減らす
  • 27. モバイルコンテクストの原則 どこでも な状況に対処するために 1. モバイルならではの体験を作ることにフォーカスする 2. 注意散漫、行動が遮られることを前提にデザインする 3. 認知的負荷や機会費用を減らす
  • 28. 1. モバイルならではの体験 モバイルならではのユニークな体験とは? 既存のメディア(PC)の延長線上にあるeMail モバイルでの新しい体験を提供しているShazam (c) rosenfeldmedia
  • 29. 1. モバイルならではの体験 音声入力:その場で流れている音楽から楽曲検索 Shazam
  • 30. 1. モバイルならではの体験 カメラ:撮ったその場でWebにアップ、共有 Instagram
  • 31. 1. モバイルならではの体験 位置情報:現在地の検索、現在地からの経路検索 google map
  • 32. 1. モバイルならではの体験 プッシュ通知:サービス側からイベント通知 Calendar (c) rosenfeldmedia
  • 33. 1. モバイルならではの体験 入力 I/F:テキスト、画像、音声 Google search
  • 34. end-to-end experience モバイルならではの体験を作ることにフォーカスする 他のタッチポイントを活用してユーザーとの接点を増やす サービスエコシステム モバイル ならでは モバイル ならでは (c) TV Everywhere – Thoughts on designing for multiple devices http://sherylyulin.com/2011/04/24/tv-everywhere-thoughts-on-designing-for-multiple-devices/
  • 35. モバイルデザインのノウハウ Web、アプリデザインに関する良書、ガイドライン コンセプト 設計手法
  • 36. モバイルフロンティア(Mobile Frontier) 2013年4月刊行
  • 37. 2013年4月刊行
  • 38. HDIfes #02「『ユーザーが毎日使いたくなる』ためにできること」 エコシステム
  • 39. 90秒のミニワークショップを入れます。 慌ただしいですが、よろしくお願いします。 筆記用具、ご用意ください。 白紙、配布します。
  • 40. お伝えしたいこと 「価値は、つながりが生む」
  • 41. 想像してみてください。楽しいですか? フォローもフォロワーも、1人もいないTwitter。 フレンドが1人もいないFacebook。 アプリも、App StoreもないiPad。 接続できないインターネット。
  • 42. ユーザーが毎日、使いたくなる 「価値」を生んでいるのは、 何でしょうか?
  • 43. エコシステム ユーザーも、ソフトウェアも、サービス ユーザーも、ソフトウェアも、サービス も、デバイスも、それひとつだけで、存在 も、デバイスも、それを支える色々なもの しているわけではない。 も、つながって価値が生まれる。
  • 44. エコシステム タッチポイント ビジネスプロセスと 技術環境 人々
  • 45. ワークショップ 90秒 個人作業 • このセミナーの、申し込みサイト、覚えてますか。 支える要素を描き出してみよう。 • • タッチポイント、人々、ビジネスプロセスと技術環境 箇条書きでもいいけど、関係図のほうが、よりおすすめ
  • 46. ワークショップ 結果例 発表者が90秒で描いたもの。デバイスの存在を描き忘れました。
  • 47. P.119 ブライアン・リーガー氏 インタビュー より 「自分の仕事を『ウェブページをデザインする』と考えることを止 め、代わりに複数のコンテクストで表示されるコンテンツをデザイ ンすることだと考える」 P.115 より 「もはやPC上の体験を考慮するだけでは足りず、さらに言うなら ば、モバイル体験だけを考慮するだけでは足りません」 「モバイル端末はより大きなデバイスエコシステムの一部である」
  • 48. HDIfes #02「『ユーザーが毎日使いたくなる』ためにできること」 モバイルUXパターン モビリティのためにデザインする Designing for Mobility
  • 49. セクション2 モバイルパターンの登場 Oct 26 2013 Hiroko NOZAWA@ HDIfes
  • 50. 5.タスクベースのデザインよ、さようなら Oct 26 2013 Hiroko NOZAWA@ HDIfes
  • 51. 3つのインタラクションモデル ・使い続けることで価値が増える ・察する ・いじりたくなる Oct 26 2013 Hiroko NOZAWA@ HDIfes
  • 52. 3つのインタラクションモデル ・使い続けることで価値が増える ・察する ・いじりたくなる Oct 26 2013 Hiroko NOZAWA@ HDIfes
  • 53. 察する • プリズムエフェクト • 同じエクスペリエンスを複製しない • デバイスの強みを活かす Oct 26 2013 Hiroko NOZAWA@ HDIfes
  • 54. モバイルは小さいPCじゃない! • PCのデザインパターンは積むこと。 • モバイルのデザインパターンは、広げること。直感。 Oct 26 2013 Hiroko NOZAWA@ HDIfes
  • 55. モバイルならではの入力方法 Oct 26 2013 Hiroko NOZAWA@ HDIfes
  • 56. 3つのインタラクションモデル ・使い続けることで価値が増える ・察する ・いじりたくなる Oct 26 2013 Hiroko NOZAWA@ HDIfes
  • 57. HDIfes #02「『ユーザーが毎日使いたくなる』ためにできること」 「ユーザーが毎日使いたくなる」  ためにできること  UI アニメーション編  安藤幸央 @yukio_andoh
  • 58. 毎日使いたくなる Photo by Nanagyei
  • 59. 毎日は人それぞれ Facebook : 平均1日14回32分 アクティビティバイアス:いろいろする日もあれば、しない日もある
  • 60. 毎日は人それぞれ 通常利用アプリ10個、1日120回アプリ起動(10代女性) Dock に入っているアプリは何?1画面目のアプリは何? 4番バッター/1軍/2軍/戦力外
  • 61. 8%
  • 62. × 毎日使いたくなる Photo by ali edwards
  • 63. 毎回使いたくなる Photo by ali edwards
  • 64. タクシー配車、目覚まし、天気予報、占い、乗り換え案内、家計簿、電卓
  • 65. ? ? ?
  • 66. ディズニーのアニメーションの12原則 multitasking woman
  • 67. ■ スクオッシュ(潰し)とストレッチ(伸ばし) ■ アンチシペーション(予備動作) ■ ステージング(舞台演出) ■ ストレート・アヘッド・アクション(逐次描き)と       ポーズ・トゥ・ポーズ(原画による設計) ■ フォロー・スルーとオーバーラッピング・アクション (あと追いの工夫) ■ スロー・インとスロー・アウト(両端づめ) ■ アーク(運動曲線) ■ 副次アクション ■ タイミング ■ 誇張 ■ 実質感のある絵
  • 68. ディズニーアニメーション 生命を吹き込む魔法
  • 69. 意味のある動き 予測できる 予想できる 遅 速 い い 意味の無い動き
  • 70. GROWTH HACK ENGAGEMENT RETENTION
  • 71. GROWTH HACK ■ SNS で伝搬しやすい要素。アプリを使っていなくても楽しめる ■ バイラルループが 1-hop で終わらずに、広がり続ける要素 ■ Give & Take の関係が始められる要素。親切とおせっかい ■ ギフトを贈ったり、加入を誘い込める、インセンティブもあり ★ 何かの時間を奪ったら、いつか奪われる。新しい市場を作る ★ ゲームは最初の一回失敗して覚える。アプリは失敗したら辞める ■ ソーシャルアクションを各所に作る(コメント、共有、タグ) ■ ソーシャルだけでない、人に影響を与える、影響を受ける要素 ■ できるだけ登録しなくても多くの事ができると良い ★ ソーシャルすぎるアプリやサービスは、話題になりにくい
  • 72. ★ 使っていない期間、時間も何かしてあげる : Argus ■ プッシュ通知で、きっかけづくり : Growth Push ■ 時間を浪費しない(夢中になってもいいがいつか離れる) ■ いつでも中断、いつでも再開できる。仮体験できる ★ 感情のピークポイントを作る(いいね!の瞬間、ランキング) ENGAGEMENT ■ 時間制限、特定時刻の出来事、一定期間等。時間のデザイン■ コンタクトポイントを増やす。使うきっかけを増やす ■ 想定外の使い方を許容する(ハッシュタグ、バルス) ■ バッジ数表示による、もどかしさと、モチベーションの維持 ★ 便利すぎない。ほどほどの手間と、焦燥感、心地よい達成感
  • 73. ★ モバイルだけではない、連続した体験(PC, TV, Tablet, 紙)■ アプリ外でもサービスやブランドとの連携がとれている ■ いつでも中断、いつでも再開できる。いつも使わなくてもいい ■ サービスの負の要素を減らし、小さな改善を積み重ねる ■ サービスの成功の基準をシンプルに考える。無理に継続させない ■ しばらく使わなくなってからも、思い出すきっかけを ★ どんなアプリ、サービスもいつかは辞める。心地よい余韻を ★ バランスブレイカー、想定外のことが起これば、離れない ■ 簡単すぎない、偶然すぎないこと、飽きる(飽和)要素の排除 RETENTION
  • 74. “Take a Human desire.” 人間の欲を つかむのだ! Evan Williams (Twitter ex-CEO)
  • 75. via. http://www.au.kddi.com/pr/4glte/index.html
  • 76. Customer Journey Map 朝起きる Activities ユーザー行動 寝起きに見てる 通勤する 仕事中 友だちのリストを リアルタイムのツイート チェックしてる 昼休み 友だちのリストを チェックしてる 事件・イベントごと 面白いねたを投稿する 自宅でWebを見てい カウントでログイン 給湯室でお茶を入れる隙にする たばこ休憩で見ている 就寝前 るときにTwitterア リストの情報 ハッシュタグを追う 帰宅 海外ネタのチェック イベント内容をチェック Feature & Contents 日本のツイートを見ている 天気もチェック 友だちの行動 写真&説明ひとこと UX情報 別のサービス 利用するコンテンツ 便利 Insight 考えていること Feeling みんな楽しそう。。 Retweetされるとうれしい とりあえずチェックする あんまり考えてない 感じていること フォローしている友 だちがついてくる うらやましい。。 共有して、共感してもらいたい 楽・ラッキー 上司に見つからないようにしたい ドキドキ Key Experience 重要なデザイン要素 ・いろいろな使い方 ・フォローしている人によって、全くタイムラインが変わる ・いろいろな使い方 ・PCとモバイルでの使い分け ・ニュースのタイムライン ・自分のフィードを見る ・他のアプリとの連携;RSS Readerなど ・bot系のタイムライン ・継続利用、使い続けることで価値が出て ・フィードバック。ソーシャル。いつ来る ・TV等を見ながらフィードを見る ・継続利用、使い続けることで価値が出てくる。楽しくなる ・他のアプリとの連携;RSS ・PCとモバイルでの使い分け Readerなど ・アイドルのリスト ・旅行先で移動しながら見る くる楽しくなる か分からない情報を見続ける ・一日の中で使い続ける、変化する、価値が出てくる ・フィードバック。ソーシャル。いつ来るか分からない情報を見 ・災害時に役立つ ・たくさんあるTwitterクライアントについて 続ける ・140文字の制限がもたらす絶妙なバランス ・最近、Twitterを使わなくなった、何故 ・エコシステムについて ・フォローしている人によって、全くタイムラインが変わる