Your SlideShare is downloading. ×
CSS Nite LP33 UI/UX "Bridge Builder"
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

CSS Nite LP33 UI/UX "Bridge Builder"

7,725
views

Published on

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

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

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

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