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