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

7,022 views

Published on

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
41 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,022
On SlideShare
0
From Embeds
0
Number of Embeds
100
Actions
Shares
0
Downloads
52
Comments
0
Likes
41
Embeds 0
No embeds

No notes for slide

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

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

×