開発者にできるＵＸ
インフラジスティックス・ジャパン
鈴木 誠
自己紹介
インフラジスティックス・ジャパン
デベロッパーサポート エンジニア
テクニカル エバンジェリスト
UX の定義
U
ser e
X
perience
エンド ユーザーをデザインと開発の焦点とする
あるシステムを使用した際の総合的な経験と満足感
ユーザー インタラクションの結果
人間は感情が中心
開発者にできるＵＸ優れた
UX が提供するもの
開発者にできるＵＸ情報の
正確さ
見た目
の良さ
わかり
楽しさ
生産性
やすさ
一つの要素が強調されすぎて、
ほかの要素が陰に隠れてはならない
優れた
UX の
構成アプローチ
デバイス／環境
iPod と iTunes
MS キーボード と Windows
アプリケーション スイート
MS Office
開発者にできるＵＸ私たちは開発者だ！
雇われてます＇よね？（
マ○ク○ソフトではない
開発者に何ができるのか？
開発者ならではのことは？
開発者にできるＵＸ今日のゴール
開発者ができるUXを考えよう
UX の要素
UX フレンドリーな開発方法
UX パターンの例
→
ユーザビリティ
→
どのようにしたら？
ＵＸ の原則UXの要素
ユーザーエクスペリエンス
これも
UX…?
例: 缶切り
目的＝缶を開ける
種類はいろいろ
すべてが同じ UX を提供？
目的＝缶を開ける
種類はいろいろ
すべてが同じ UX を提供？
缶切りと
UX
エディさん
小腹がすいている
缶詰を見つける
缶を開けよう
開け方？
＃％＆＄！
だれかに
開けてもらおう
UXの原則ユーザーエクスペリエンス
缶切りと缶詰 = UI
缶が開けられない UX
→ 目的が達成されない
→ お腹は空いたまま
→ アンハッピー
→ 買わない
価値のあるエクスペリエンス？
UXの原則価値のあるエクスペリエンス
UXの原則 価値のある エクスペリエンス 来たかいが あった ストーリーを 伝えたい 理解されたい 信じられたい 信頼されたい 忠誠心を 築きたい また来たい 伝えられたこと が理解できた 受け入れられる メッセージが 信頼できる提供する側
提供される側
ガイドの原則
作り手・アプリケーションに必要なもの？
→
ユーザーの知識と必要性を重視
一方的な想定は混乱を招く
→
ユーザーをガイドする
＇コンテキストに対応など（
一貫性！
UXの原則UX の原則
UX の原則役に
立つ
価値
がある
信頼
できる
アクセ
ス
探しや
すい
使える
求めら
れる
作り手に必要とされる
UX コンピテンシー
情報アーキテクト
(
役に立つ
使える
)
インタラクション デザイナー
(
使える
求められる
)
ユーザビリティ エンジニア／テスター
(使える アクセス)
ビジュアル デザイナー
(求められる 信頼できる)
HCI, CHI
(使える アクセス)
ソフトウェア アーキテクト
(使える 価値がある 他)
UX デザイナー
＇全体的（ UX の原則役に立
つ
価値が
ある
信頼で
アクセ
ス
探しや
すい
使える
求めら
れる
開発者には？
開発者の仕事
「内部使用のアプリケーション開発だし・・・」
「LINQ、SharePoint、Dynamic Data・・・覚えることが
たくさんあって・・・」
「時間ないです・・・」
「予算もないです・・・」
「UX って UI でしょ？」
UX の原則「データベース、 オブジェク
ト思考、セキュリティ、バッチ
プロセス、SOA、エクセ
ル・・・UXに関係ないし」
UXに含まれるもの
UX の原則実は
すべて
がUXにつながる
開発者の役割も重要
開発者が実際できること
ユーザー中心のデザイン (UCD)
UX フレンドリーな開発方法
ペルソナ
ユーザビリティのテスト
パターン
リファクタリング
実際に必要なこと
開発者が実際できることユーザー中心のデザイン
仕様書
目的は書かれている
ユーザーの身になって考える
ペルソナを用いる
ユーザー観察
実際に必要なこと ＇開発者が実際できること（UX フレンドリーな開発方法
アジャイル
ドメイン ドリブン デザイン
オブジェクト思考
テスト ドリブン 開発
ビヘイビア ドリブン 開発
実際に必要なこと ＇開発者が実際できること（アジャイル
明確なビジョンを共有する
変更しない
シナリオに基づいた要件定義
ワイヤフレーム
紙でもホワイトボードでも
とにかくやってみる
実際に必要なこと ＇開発者が実際できること（http://www.disambiguity.com/waterfall-bad-ペルソナ
作業の仕方は十人十色
バックグラウンド
興味のあること
ツールにどれだけ慣れているか
目的の違い
実際に必要なこと ＇開発者が実際できること（パターン
よく使用される実用的な解決策
パターン自体も成長していく
様々なところで採用される
実際に必要なこと ＇開発者が実際できること（パターン
パターンを活用
パターンに縛られすぎないことも大切
パターンの中で何が重要なのかを把握する
伝えられる情報、操作の焦点、など
UX デザインのプロの作ったものを使用する
実際に必要なこと ＇開発者が実際できること（既存コンポーネント
ユーザビリティを実証ずみ
のパターンを活用
統一されたＵＩデザイン
配色など
カスタマイズ？
実際に必要なこと ＇開発者が実際できること（ユーザビリティのテスト
「想定」には限りが・・・
「想定」する人の視野と考え
「想定」された人の実際
実際に必要なこと ＇開発者が実際できること（ユーザビリティのテスト
ライトウェイト
そこら辺にいる人でテスト
アプリケーションを使ってもらう
ヘビーウェイト
実際のユーザー
正式なテスト
プロにお願い
ユーザビリティ実験室＇使用観察（
実際に必要なこと ＇開発者が実際できること（リファクタリング
常に向上させる
「使い勝手」にユーザーはついてくる
→ ユーザーの後押しで仕様が変わる
新しいフェーズやプロジェクト
フィードバックに常に耳を傾けること
一日一歩
実際に必要なこと ＇開発者が実際できること（どれだけ
UX に投資すれば
いいのか？
実際に必要なこと ＇開発者が実際できること（ユーザーに
よる受け入れ
目的
社内ポータル オンラインツール (グーグル、ヤフー) 消費者向け パッケージソフト (MS Office) E-コマース (アマゾン, 楽天) エンタープライズ (SAP, オラクル) CRM アプリ (Salesforce.com, コールセンター 社内プロジェクト のトラッキング 自発的 学習させる 内部アプリ 商用よくつかわれるパターン紹介
レイアウト
ナビゲーション
などなど
実際に必要なこと ＇開発者が実際できること（パターン例
レイアウト
パターン
入力フィールドと
ラベルの配置
レイアウト パターン
上よせ配置
レイアウトパターン☺
情報の視覚的処理を促進する☺
ラベルと入力フィールドの 関係がつかみやすい☹
画面が縦方向に 広くなりすぎる右寄せ配置
レイアウトパターン☺
画面が縦に広がらない☹
読みにくくなる☺
ラベルと入力フィールドの 関係がつかみやすい左よせ配置
レイアウトパターン☺
ラベルを簡単に スキャンできる☹
ラベルと入力フィールドの 関係がつかみにくい☺
画面が縦に広がら ないレスポンスによる
インターフェースのガイド
レイアウト パターン ＇TurboTax オンライン ソフトウェアを使ったことがありますか？（ ＇ＩＤを作成せずに開始（ ＇ユーザーＩＤを作成（ 次のステップが異なるビュー ＇その１（
レイアウトパターン異なるビュー ＇その２（
レイアウトパターンナビゲーション
パターン
ページング
ナビゲーションパターン 現在のページが一目で分かるように
データ間の 移動手段を提供
ブレッドクラム
ナビゲーションパターンナビゲート可能な 現在表示されている
ユーザー入力
パターン
複数選択
ユーザー入力パターン複数選択と先取り入力
ユーザー入力パターン入力に従って選択肢を フィルタリング
ユーザーフレンドリーな
フォーマット
ユーザー入力 パターン ユーザーは「正しいフォーマット」に とらわれないコマンドの
パターン
プライマリー＇主目的（の
アクション
コマンドの パターン プライマリー＇主目的（の アクション セカンダリー＇副目的（のアクション現在の状況表示
コマンドのパターン 視覚的フィードバックにより何かが起こっていることを表示
全体のプロセスに相対した 現在のステップを表示
Office Fluent
ユーザーインターフェイス
NetAdvantage ToolBarManager コントロール
WinForm, ASP.NET, WPF 上で作成可能
コマンドの パターン クイックアクセスツールバー アプリケーションメニュー 様々なパターンを含むOFUI の ガイドラインに従っている複雑なデータの表示
パターン
推移表示のための
複数表示
複雑なデータの表示 パターン 2つ以上の次元＇項目（や 直接関連のない複数のデータ 各イメージのサイズ、形、倍率などを 温度 放射線量 短波量 月スタイリングと
見た目のパターン
色相、明るさ、彩度
スタイリングと見た目のパターン 白・黒のほか3つまでの色相 灰色は他の色とよく合う 暖色・寒色の使い分け 色相 : 赤・黄・緑・青・紫といった「色合い」 選んだ色相の中の明るさや 彩度の異なる色を選ぶスタイリング
スタイリングと見た目のパターン目を引く視覚要素は エネルギッシュな印象を
