css nite lp33 ui/ux "bridge builder"

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パターン

具現化

表層

骨格

構造

要件

戦略

ビジュアルデザイン

ナビゲーションデザイン

インタラクションデザイン

機能仕様

インターフェースデザイン

情報デザイン

コンテンツ要求

情報アーキテクチャ

ユーザーニーズ

サイトの目的

IA Thinking現状を調査し情報を可視化したうえで、目的や課題を明らかにし新たな情報の提供方法を構築すること。

異なる視点と共通言語

ジャーニーマップと要求整理

仮説としてのプロトタイピング

具現化のためのデザインパターン

by Kamil Porembiński

坂本貴史

@bookslope

www.bookslope.jp/blog/

Thank you!

http://www.bookslope.jp/blog/