Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS Nite LP33 UI/UX "Bridge Builder"

9,745 views

Published on

2014年3月29日 (土) に開催したセミナーイベント CSS Nite LP33 UI /UX セッションで講演した「Bridge Builder: IAシンキングで進める体験とコンテンツの構造化」のスライドです。

CSS Nite LP, Disk 33「UI/UX」(2014年3月29日開催)
http://cssnite.jp/lp/lp33/

講演ログを Storify でまとめてみましたので、こちらもご覧ください。

CSS Nite LP33 UI/UX session #1 Bridge Builder - Storify
https://storify.com/bookslope/css-nite-lp33-ui-ux-session-1

Published in: Design

CSS Nite LP33 UI/UX "Bridge Builder"

  1. 1. BridgeBuilder 坂本貴史 2014.3.29 IAシンキングで進める体験とコンテンツの構造化 CSS Nite LP33 #cssnite_lp33 by Kamil Porembiński
  2. 2. グラフィックデザイナー出身 ネットイヤーグループ参画 デジタルマーケティングエージェンシー HCD-Net 評議員 IA Institute, IxDA, UXPA メンバー OpenUM プロジェクト発足 寄稿・講演多数 著書『IAシンキング』ほか 坂本貴史 @bookslope
  3. 3. IA Thinking 人間中心デザインに基づいた、情報アーキテクチャの 分野におけるソリューションを提供するための手法。
  4. 4. ブリッジビルダーとは ジャーニーマップの要求整理 タッチポイントのデザイン デザインパターンの活用
  5. 5. ブリッジビルダーとは ジャーニーマップの要求整理 タッチポイントのデザイン デザインパターンの活用
  6. 6. by Peter Morville
  7. 7. ユーザー コンテンツ 戦略 戦術 プラットフォーム チャネル 研究 実践
  8. 8. お見合い になりがちなさまざまな間を取り持つ役割。 その関係性を構築すること。 BridgeBuilder
  9. 9. IAインフォメーションアーキテクト
  10. 10. UX UIユーザーエクスペリエンス ユーザーインターフェース
  11. 11. 研究分野現象 実践 User Experience White Paper ユーザーエクスペリエンス白書
  12. 12. UXD User Experience White Paper ユーザーエクスペリエンス白書
  13. 13. あなたは何をつくりますか? What do you make?
  14. 14. サービスデザインプロダクトデザイン ・ステークホルダーマップ ・ジャーニーマップ ・サイトやアプリ ・広告
  15. 15. プロダクトエクスペリエンス サービスエクスペリエンス PX SX
  16. 16. あなたは何視点を持っていますか? What perspective do you have?
  17. 17. ブリッジビルダーとは ジャーニーマップの要求整理 タッチポイントのデザイン デザインパターンの活用
  18. 18. 企画 仮説シナリオの開発 分析 チャネル横断の動線分析 Customer Experience Journey Map カスタマーエクスペリエンスジャーニーマップ
  19. 19. サービス提供者 クロスチャネル状況の可視化
  20. 20. 現状課題の可視化 制作者
  21. 21. エモーション ステークホルダー ユーザーフロー ステージ
  22. 22. 住宅ローンのジャーニーマップ ステージ ユーザーフロー コンテンツ・機能 ビジネス課題 改善点 ユーザー課題
  23. 23. ステージ ユーザーシナリオ エモーション デバイス 要求事項
  24. 24. タッチ
 ポイント クロス
 チャンネル マルチ
 スクリーン 網羅性は重要ではない
  25. 25. 要求事項を整理するためのツール
  26. 26. ブリッジビルダーとは ジャーニーマップの要求整理 タッチポイントのデザイン デザインパターンの活用
  27. 27. タッチポイント
  28. 28. 登録に時間がかかる 登録メリットの説明 会員登録数 登録ページ ISSUE EMOTION KPI
  29. 29. プロトタイピング ユーザーシナリオにある画面 その画面の目的は明確 全面リニューアルとは異なる
  30. 30. 表層 骨格 構造 要件 戦略 ビジュアルデザイン ナビゲーション
 デザイン インタラクション
 デザイン 機能仕様 インターフェース
 デザイン 情報デザイン コンテンツ要求 情報アーキテクチャ ユーザーニーズ サイトの目的 逆工程
  31. 31. 既会員向け新規会員向け 専用アカウント向け
  32. 32. 現状を調査し情報を可視化したうえで、目的や課題を 明らかにし新たな情報の提供方法を構築すること。 IA Thinking
  33. 33. タッチポイント
  34. 34. 現状の課題 モバイル向けレイアウト 文字が多く読みにくい 読んだら終わりの利用方法
  35. 35. プロトタイピング モバイル向けレイアウト 文字サイズを大きく読みやすく ブックマークや共有の利用方法
  36. 36. Prototyping デザインは仮説です。その仮説が合っているか間違って いるかを見極めるのが評価であり、分析につながります。
  37. 37. ブリッジビルダーとは ジャーニーマップの要求整理 タッチポイントのデザイン デザインパターンの活用
  38. 38. Design Pattern ノンデザイナーの仮説を手助けするツール「デザインパター ン」があります。アイデア具現化の手助けをしてくれる。
  39. 39. IAパターン UIパターン
  40. 40. タブビュー フィルタビュー ハブ・スポーク 弁当箱 マトリョーシカ 階層型 IAパターン
  41. 41. タブビュー フィルタビュー ハブ・スポーク 弁当箱
  42. 42. ナビゲーション フォーム テーブル・リスト 検索・ソート・フィルタ ツール グラフ 誘導 フィードバック・アフォーダンス ヘルプ アンチパターン UIパターン
  43. 43. RWD
  44. 44. 具現化 表層 骨格 構造 要件 戦略 ビジュアルデザイン ナビゲーション
 デザイン インタラクション
 デザイン 機能仕様 インターフェース
 デザイン 情報デザイン コンテンツ要求 情報アーキテクチャ ユーザーニーズ サイトの目的
  45. 45. IA Thinking 現状を調査し情報を可視化したうえで、目的や課題を 明らかにし新たな情報の提供方法を構築すること。
  46. 46. 異なる視点と共通言語 ジャーニーマップと要求整理 仮説としてのプロトタイピング 具現化のためのデザインパターン
  47. 47. by Kamil Porembiński 坂本貴史 @bookslope www.bookslope.jp/blog/ Thank you!
  48. 48. 4.8 IN STORE

×