Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

UX approach for real cross media planning

437 vues

Publié le

2015年2月19日 (木) に開催したセミナーイベント「第2回クロスメディアカンファレンス NAGOYA 2015」で講演したときのスライドです。

第2回クロスメディアカンファレンスNagoya開催のお知らせ
http://gcc.sky-inet.ne.jp/action/schedule/2nagoya.html

Publié dans : Design
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

UX approach for real cross media planning

  1. 1. by Jean-Pierre UXapproachforrealcrossmediaplanning CrossMediaPlanning 坂本貴史 2015.02.19
  2. 2. グラフィックデザイナー出身 ネットイヤーグループ参画 HCD-Net 評議員 OpenUM プロジェクト発足 寄稿・講演多数 著書『IAシンキング』ほか 坂本貴史 @bookslope
  3. 3. by Sgkh
  4. 4. 情報は少ないほどきちんと処理される 読むことと理解することは同じではない 一度に覚えられるのは4つだけ 目標に近づくほど「ヤル気」が出る データより物語のほうが説得力がある
  5. 5. koboを開封 YouTube
  6. 6. いい製品でも、いい体験とは限らない
  7. 7. Good UI = Good UX
  8. 8. UX Design
  9. 9. シーン 制約プロセス
  10. 10. プロセスを理解する
  11. 11. by color-ip.com
  12. 12. Why?
  13. 13. 具現化 表層 骨格 構造 要件 戦略 ビジュアルデザイン ナビゲーション
 デザイン インタラクション
 デザイン 機能仕様 インターフェース
 デザイン 情報デザイン コンテンツ要求 情報アーキテクチャ ユーザーニーズ サイトの目的
  14. 14. 戦略策定 インターフェース アクティビティ インタラクションサービス シナリオ
  15. 15. Experience by Saku Takakusaki
  16. 16. インサイト ソリューション どこでも仕事がしたい 支払いを手早くしたい 心地良く過ごしたい アロマの香り Wi-Fi 環境 クレジットカード支払い
  17. 17. インターフェース インタラクション
  18. 18. シナリオ アクティビティ
  19. 19. 利用状況の理解 デザインの作成 要求の明確化評価、再検証 1 2 3 4 HCD Process ユーザーテスト ペルソナ/シナリオ インタビュー プロトタイピング
  20. 20. ユーザーへの提供価値からはじめる
  21. 21. シーンを読み解く
  22. 22. by Marco Derksen
  23. 23. そのシーンに求められるもの タッチポイント
  24. 24. TV Web くわしくキッカケ
  25. 25. シーンごとに適したメディアがある
  26. 26. D2C, マルチデバイス利用動向調査, 2013/05 情報をじっくり調べる時 10% 9% 82%
  27. 27. D2C, マルチデバイス利用動向調査, 2013/05 外出先や移動中での利用 9% 4% 87%
  28. 28. タッチポイント
  29. 29. タッチポイントをデザインする
  30. 30. 制約を特性にする
  31. 31. 一方向性 固定・ストック型の情報 一覧性が高い 入手方法はひとつ 端末は不要 双方向性 流動・フロー型の情報 一覧性が低い 入手方法が選べる 専用端末が必要 by visualpun.ch
  32. 32. 画面が小さい 利用環境が違う by Kouki Kuriyama
  33. 33. 必要十分な表現に留める ちら見しやすいようにデザインする 階層を深くしない 自然な形で接点を見せる 途中で操作を止めても同じ事ができる 時間軸を使って情報を整理する
  34. 34. チラ見でわかるシンプルなデザイン
  35. 35. コンテンツファースト
  36. 36. どの情報を優先するか
  37. 37. タッチポイント コンテンツファースト提供価値
  38. 38. ミニワーク 30 min
  39. 39. 10 min ここからは皆さんに頭と手を動かしていただきます。 途中で説明をしていただいたりしますので、この機会に隣の方に挨拶をし、自己 紹介をしてください。日頃どういうことをされているのか、今回どういうことを 目的に来られたかなどを軽くご紹介してください。 アイスブレイク
  40. 40. 10 min 当イベントに訪れるユーザーの皆さんに、用意した情報/コンテンツをもとに、 スマートフォンで見るウェブサイトの画面構成を提案してください。 また、なぜそうするのか構成意図を説明できるようにしてください。 課題
  41. 41. ステップ 情報を使って、画面構成を作成してください 日を決めて、画面構成を再作成してください 日別に分類された中から、日を決めて画面構成を再作成してください。 作成後、日別の分類と合わせて構成意図を説明してください。 STEP 1 STEP 3 10 min 10 min 右側に並ぶ情報/コンテンツを使って、画面構成を作成してください。 作成後に、隣の方に設計意図を説明してください。 前日・当日・後日に分けてください 情報/コンテンツを、ステージ(この場合は日)ごとに分類してください。 STEP 2 10 min
  42. 42. Cross Media Conference 2015 NagoyaWORKSHEET #1 情報/コンテンツ: •推薦コメント •アンケート •フロアマップ •参加費 •第二回の告知 •タイムテーブル •スライド •プログラム •前回の写真 •地図 •申込みフォーム •日時 •スピーカー •当日の写真 •交通・アクセス
  43. 43. ステップ 情報を使って、画面構成を作成してください 日を決めて、画面構成を再作成してください 日別に分類された中から、日を決めて画面構成を再作成してください。 作成後、日別の分類と合わせて構成意図を説明してください。 STEP 1 STEP 3 10 min 10 min 右側に並ぶ情報/コンテンツを使って、画面構成を作成してください。 作成後に、隣の方に設計意図を説明してください。 前日・当日・後日に分けてください 情報/コンテンツを、ステージ(この場合は日)ごとに分類してください。 STEP 2 10 min
  44. 44. Cross Media Conference 2015 NagoyaWORKSHEET #2 情報/コンテンツ:前日 当日 後日 •推薦コメント •アンケート •フロアマップ •参加費 •第二回の告知 •タイムテーブル •スライド •プログラム •前回の写真 •地図 •申込みフォーム •日時 •スピーカー •当日の写真 •交通・アクセス
  45. 45. ステップ 情報を使って、画面構成を作成してください 前日・当日・後日に分けてください 日を決めて、画面構成を再作成してください 日別に分類された中から、日を決めて画面構成を再作成してください。 作成後、日別の分類と合わせて構成意図を説明してください。 情報/コンテンツを、ステージ(この場合は日)ごとに分類してください。 STEP 1 STEP 2 STEP 3 10 min 10 min 10 min 右側に並ぶ情報/コンテンツを使って、画面構成を作成してください。 作成後に、隣の方に設計意図を説明してください。
  46. 46. Cross Media Conference 2015 NagoyaWORKSHEET #3 1 2 3 (ユーザーの状況や気持ち) 構成意図:
  47. 47. 情報設計が効率化したことが実感できる 必要最小の情報のみでシンプルにできる 論理的な思考で人に説明できる
  48. 48. Cross Media Conference 2015 NagoyaWORKSHEET #1 Answer 情報/コンテンツ: •推薦コメント •アンケート •フロアマップ •参加費 •第二回の告知 •タイムテーブル •スライド •プログラム •前回の写真 •地図 •申込みフォーム •日時 •スピーカー •当日の写真 •交通・アクセス
  49. 49. Cross Media Conference 2015 NagoyaWORKSHEET #2 Answer 情報/コンテンツ:前日 当日 後日 •日時 •地図 •プログラム •スピーカー •参加費 •申込みフォーム •推薦コメント •前回の写真 •タイムテーブル •フロアマップ •交通・アクセス •スライド •アンケート •当日の写真 •第二回の告知 •推薦コメント •アンケート •フロアマップ •参加費 •第二回の告知 •タイムテーブル •スライド •プログラム •前回の写真 •地図 •申込みフォーム •日時 •スピーカー •当日の写真 •交通・アクセス
  50. 50. Cross Media Conference 2015 NagoyaWORKSHEET #3 Answer 構成意図: タイムテーブルを細かく表 示。終了したものを明示。 フロアマップ 住所 〒東京都東京市東京1-2-3 交通・アクセス 丸ノ内線東京駅から徒歩10分 1 タイムテーブル 11:00∼ 開会の挨拶 5min 11:30∼ 講演 #1 13min 12:00∼ 休憩 10min 12:30∼ 講演 #2 30min 13:00∼ 閉会の挨拶 5min フロアマップ 1 2 3 トイレや喫煙所、自販機の 場所がわかるようフロアマッ プを配置。 2 住所や交通・アクセスは帰 る場合を想定し最下部に配 置。 3 当日、遅れて到着したため、タイ ムレーブルを確認したい。次の休 憩時間にトイレに行きたいと考 えています。 13F クロスメディア クロスメディア 13F
  51. 51. ストーリーが重要
  52. 52. シーン 制約プロセス 提供価値 コンテンツファーストタッチポイント
  53. 53. よりよい体験をデザインする
  54. 54. UXマップを作成するツールを開発中
  55. 55. @bookslope bookslope@gmail.com bookslope.jp/blog/ UXapproachforrealcrossmediaplanning Thankyou!

×