目的
社内ポータル
オンラインツール
(グーグル、ヤフー)
消費者向け パッケージソフト
(MS Office)
E-コマース
(アマゾン, 楽天)
エンタープライズ
(SAP, オラクル)
CRM アプリ
(Salesforce.com,
コールセンター 社内プロジェクト
のトラッキング
自発的
学習させる
内部アプリ 商用
よくつかわれるパターン紹介
レイアウト
ナビゲーション
などなど
実際に必要なこと
＇開発者が実際できること（
パターン例
開発者にできる
UXレイアウト パターン
開発者にできる
UX入力フィールドと ラベルの配置
レイアウト パターン
上よせ配置
レイアウトパターン☺
情報の視覚的処理を促進する☺
ラベルと入力フィールドの 関係がつかみやすい☹
画面が縦方向に広くなりすぎる
右寄せ配置
レイアウトパターン☺
画面が縦に広がらない☹
読みにくくなる☺
ラベルと入力フィールドの 関係がつかみやすい左よせ配置
レイアウトパターン☺
ラベルを簡単にスキャンできる
☹
ラベルと入力フィールドの 関係がつかみにくい☺
画面が縦に広がらない
レスポンスによる
インターフェースのガイド
レイアウト パターン
＇TurboTax オンライン ソフトウェアを使ったことがありますか？（
＇ＩＤを作成せずに開始（
＇ユーザーＩＤを作成（
次のステップが
異なるビュー ＇その１（
レイアウトパターン目的別のビューを用意
異なるビュー ＇その２（
レイアウトパターン用途に沿った切り替え
ナビゲーション
パターン
ページング
ナビゲーションパターン現在のページが 一目で分かるように
データ間の 移動手段を提供
ブレッドクラム
ナビゲーションパターンナビゲート可能な 現在表示されている
レベル
ユーザー入力 パターン
開発者にできる
UX複数選択
ユーザー入力パターン全ての選択肢を表示
複数選択と先取り入力
ユーザー入力パターン入力に従って選択肢を フィルタリング
ユーザーフレンドリーな フォーマット
ユーザー入力 パターン
ユーザーは「正しいフォーマット」に とらわれない
コマンドの パターン
開発者にできる
UXプライマリー＇主目的（の アクション
コマンドの パターン
プライマリー＇主目的（の
アクション セカンダリー＇副目的（の
アクション
現在の状況表示
コマンドのパターン視覚的フィードバックにより 何かが起こっていることを表示
全体のプロセスに相対した 現在のステップを表示
Office Fluent
ユーザーインターフェイス
NetAdvantage ToolBarManager コントロール
WinForm, ASP.NET, WPF 上で作成可能
コマンドの パターン
クイックアクセスツールバー アプリケーションメニュー
様々なパターンを含むOFUI の ガイドラインに従っている
複雑なデータの表示 パターン
開発者にできる
UX推移表示のための 複数表示
複雑なデータの表示 パターン
2つ以上の次元＇項目（や
直接関連のない複数のデータ
各イメージのサイズ、形、倍率などを 温度
放射線量 短波量
月
スタイリングと
見た目のパターン
開発者にできる ＵＸ
色相、明るさ、彩度
スタイリングと見た目のパターン白・黒のほか3つまでの色相 灰色は他の色とよく合う
暖色・寒色の使い分け 色相 : 赤・黄・緑・青・紫といった「色合い」
選んだ色相の中の明るさや 彩度の異なる色を選ぶ
スタイリング
スタイリングと見た目のパターン目を引く視覚要素は エネルギッシュな印象を
UX 実践？
ほかの例
インフラジスティックス コミュニティ サイト
開発者向けのリソース
開発者が必要な時に参考に
実際の使用例
ヘルプファイルで十分
サポートに聞く
見てません
UX 実践？
ほかの例
インフラジスティックス コミュニティ サイト
ブラウズしてみてください
どんなことができるでしょう？
開発者が実際できること
http://community.jp.infragistics.com
今日のゴールは・・・
開発者ができる UX を考えよう
UX
の要素
UX
フレンドリーな開発方法
UX
パターンの例
→ ユーザビリティ
→ どのようにしたら？
終りに
まとめ
ユーザー中心
デザイン
テスト
開発方法
アジャイル
ペルソナ
リファクタリング
パターン
パターンは沢山！
おわりに
まとめ
ブログ＇製品・技術関連（
http://blogs.infragistics.com/blogs/msuzuki
個人ブログ
http://allthingstech-pondered.blogspot.com
質問等
[email protected]
おわりに