User Experience

Transcription

1 開発者にできる UX インフラジスティックス ジャパン 鈴木誠 1

2 自己紹介 開発者にできる UX インフラジスティックス ジャパン デベロッパーサポートエンジニア テクニカルエバンジェリスト 2

3 UX の定義 開発者にできる UX User experience エンドユーザーをデザインと開発の焦点とする あるシステムを使用した際の総合的な経験と満足感 ユーザーインタラクションの結果 人間は感情が中心 3

4 優れた UX が提供するもの 開発者にできる UX 情報の正確さ 見た目の良さ わかりやすさ 楽しさ 生産性 一つの要素が強調されすぎて ほかの要素が陰に隠れてはならない 4

5 優れた UX の構成アプローチ 開発者にできる UX デバイス / 環境 ipod と itunes MS キーボードと Windows アプリケーションスイート MS Office 5

6 私たちは開発者だ! 開発者にできる UX 雇われてます ' よね?( マ ク ソフトではない 開発者に何ができるのか? 開発者ならではのことは? 6

7 今日のゴール UX の原則 開発者ができる UX を考えよう UX の要素 UX フレンドリーな開発方法 UX パターンの例 ユーザビリティ どのようにしたら? 7

8 UX の要素 開発者にできる UX 8

9 ユーザーエクスペリエンス UX の原則 これも UX? 例 : 缶切り 9

10 缶切り UX の原則 目的 = 缶を開ける 種類はいろいろ すべてが同じ UX を提供? 10

11 缶切り UX の原則 目的 = 缶を開ける 種類はいろいろ すべてが同じ UX を提供? 11

12 缶切りと UX UX の原則 エディさん 小腹がすいている 缶詰を見つける 缶を開けよう 開け方? #%&$! だれかに開けてもらおう 12

13 ユーザーエクスペリエンス UX の原則 缶切りと缶詰 = UI 缶が開けられない UX 目的が達成されない お腹は空いたまま アンハッピー 買わない 価値のあるエクスペリエンス? 13

14 価値のあるエクスペリエンス UX の原則 提供する側 提供される側 理解されたい ストーリーを伝えたい 来たかいがあった 伝えられたことが理解できた 信じられたい 価値のあるエクスペリエンス メッセージが信頼できる 信頼されたい 受け入れられる 忠誠心を築きたい また来たい 14

15 ガイドの原則 UX の原則 作り手 アプリケーションに必要なもの? ユーザーの知識と必要性を重視 一方的な想定は混乱を招く ユーザーをガイドする ' コンテキストに対応など ( 一貫性! 15

16 UX の原則 UX の原則 使える 探しやすい 役に立つ 価値がある 信頼できる 求められる アクセス 16

17 作り手に必要とされる UX コンピテンシー UX の原則 情報アーキテクト ( 役に立つ使える ) インタラクションデザイナー ( 使える求められる ) ユーザビリティエンジニア / テスター ( 使えるアクセス ) ビジュアルデザイナー ( 求められる信頼できる ) HCI, CHI ( 使えるアクセス ) ソフトウェアアーキテクト ( 使える価値がある他 ) UX デザイナー ' 全体的 ( 使える 探しやすい 役に立つ 価値がある 信頼できる 求められる アクセス 17

18 開発者には? UX の原則 開発者の仕事 内部使用のアプリケーション開発だし LINQ SharePoint Dynamic Data 覚えることがたくさんあって 時間ないです 予算もないです UX って UI でしょ? 18

19 UX に含まれるもの UX の原則 データベース オブジェクト思考 セキュリティ バッチプロセス SOA エクセル UX に関係ないし 実はすべてが UX につながる 開発者の役割も重要 19

20 開発者が実際できること 開発者にできる UX 20

21 実際に必要なこと 開発者が実際できること ユーザー中心のデザイン (UCD) UX フレンドリーな開発方法 ペルソナ ユーザビリティのテスト パターン リファクタリング 21

22 ユーザー中心のデザイン 実際に必要なこと ' 開発者が実際できること ( 仕様書 目的は書かれている ユーザーの身になって考える ペルソナを用いる ユーザー観察 22

23 UX フレンドリーな開発方法 実際に必要なこと ' 開発者が実際できること ( アジャイル ドメインドリブンデザイン オブジェクト思考 テストドリブン開発 ビヘイビアドリブン開発 23

24 アジャイル 実際に必要なこと ' 開発者が実際できること ( 明確なビジョンを共有する 変更しない シナリオに基づいた要件定義 ワイヤフレーム 紙でもホワイトボードでも とにかくやってみる 24

25 ペルソナ 実際に必要なこと ' 開発者が実際できること ( 作業の仕方は十人十色 バックグラウンド 興味のあること ツールにどれだけ慣れているか 目的の違い 25

26 パターン 実際に必要なこと ' 開発者が実際できること ( よく使用される実用的な解決策 パターン自体も成長していく 様々なところで採用される 26

27 パターン 実際に必要なこと ' 開発者が実際できること ( パターンを活用 パターンに縛られすぎないことも大切 パターンの中で何が重要なのかを把握する 伝えられる情報 操作の焦点 など UX デザインのプロの作ったものを使用する 27

28 既存コンポーネント 実際に必要なこと ' 開発者が実際できること ( ユーザビリティを実証ずみのパターンを活用 統一されたUIデザイン 配色など カスタマイズ? 28

29 ユーザビリティのテスト 実際に必要なこと ' 開発者が実際できること ( 想定 には限りが 想定 する人の視野と考え 想定 された人の実際 29

30 ユーザビリティのテスト 実際に必要なこと ' 開発者が実際できること ( ライトウェイト そこら辺にいる人でテスト アプリケーションを使ってもらう ヘビーウェイト 実際のユーザー 正式なテスト プロにお願い ユーザビリティ実験室 ' 使用観察 ( 30

31 リファクタリング 実際に必要なこと ' 開発者が実際できること ( 常に向上させる 使い勝手 にユーザーはついてくる ユーザーの後押しで仕様が変わる 新しいフェーズやプロジェクト フィードバックに常に耳を傾けること 一日一歩 31

32 どれだけ UX に投資すればいいのか? ユーザーに よる受け入れ 自発的 学習させる 社内ポータル 実際に必要なこと ' 開発者が実際できること ( オンラインツール ( グーグル ヤフー ) E- コマース ( アマゾン, 楽天 ) 消費者向けパッケージソフト (MS Office) エンタープライズ (SAP, オラクル ) コールセンター 社内プロジェクトのトラッキング 内部アプリ コスト削減 目的 商用 利益 CRM アプリ (Salesforce.com, Siebel) 32

33 よくつかわれるパターン紹介 実際に必要なこと ' 開発者が実際できること ( レイアウト ナビゲーション などなど 33

34 パターン例 開発者にできる UX 34

35 レイアウト パターン 開発者にできる UX 35

36 入力フィールドとラベルの配置 レイアウト パターン 36

37 上よせ配置 レイアウト パターン ラベルと入力フィールドの関係がつかみやすい 情報の視覚的処理を促進する 画面が縦方向に広くなりすぎる 37

38 右寄せ配置 レイアウト パターン ラベルと入力フィールドの関係がつかみやすい 読みにくくなる 画面が縦に広がらない 38

39 左よせ配置 レイアウト パターン ラベルと入力フィールドの関係がつかみにくい ラベルを簡単にスキャンできる 画面が縦に広がらない 39

40 レスポンスによるインターフェースのガイド レイアウト パターン 'TurboTax オンラインソフトウェアを使ったことがありますか?( ' ユーザー ID を作成 ( 'ID を作成せずに開始 ( 次のステップが同じページに作成される 40

41 異なるビュー ' その 1( レイアウト パターン 目的別のビューを用意 41

42 異なるビュー ' その 2( レイアウト パターン 用途に沿った切り替え 42

43 ナビゲーション パターン 開発者にできる UX 43

44 ページング ナビゲーション パターン 現在のページが一目で分かるように データ間の移動手段を提供 44

45 ブレッドクラム ナビゲーション パターン 現在表示されているレベル ナビゲート可能な次のレベル 45

46 ユーザー入力 パターン 開発者にできる UX 46

47 複数選択 ユーザー入力パターン 全ての選択肢を表示 選択済みのオプションの表示方法 47

48 複数選択と先取り入力 ユーザー入力パターン 入力に従って選択肢をフィルタリング 48

49 ユーザーフレンドリーなフォーマット ユーザー入力パターン ユーザーは 正しいフォーマット にとらわれない フリーフォーマット入力をシステムが支援 49

50 コマンドの パターン 開発者にできる UX 50

51 プライマリー ' 主目的 ( のアクション コマンドの パターン プライマリー ' 主目的 ( のアクション セカンダリー ' 副目的 ( のアクション 51

52 現在の状況表示 コマンドの パターン 視覚的フィードバックにより何かが起こっていることを表示 全体のプロセスに相対した現在のステップを表示 52

53 Office Fluent ユーザーインターフェイス コマンドの パターン アプリケーションメニュー クイックアクセスツールバー 様々なパターンを含む OFUI のガイドラインに従っている NetAdvantage ToolBarManager コントロール WinForm, ASP.NET, WPF 上で作成可能 53

54 複雑なデータの表示 パターン 開発者にできる UX 54

55 推移表示のための複数表示 複雑なデータの表示 パターン 2 つ以上の次元 ' 項目 ( や直接関連のない複数のデータ 月 短波量 放射線量 温度 各イメージのサイズ 形 倍率などを均一にすることで視覚的に 違い を強調 55

56 スタイリングと 見た目のパターン 開発者にできる UX 56

57 色相 明るさ 彩度 スタイリングと見た目のパターン 白 黒のほか 3 つまでの色相 灰色は他の色とよく合う 選んだ色相の中の明るさや彩度の異なる色を選ぶ 色相 : 赤 黄 緑 青 紫といった 色合い 彩度 : 色の 鮮やかさ の度合い 暖色 寒色の使い分け 色の使いすぎに注意 57

58 スタイリング スタイリングと見た目のパターン 目を引く視覚要素はエネルギッシュな印象を 統一された曲線角 斜め角の使用 58

59 UX 実践? 開発者にできる UX 59

60 ほかの例 UX 実践? インフラジスティックスコミュニティサイト 開発者向けのリソース 開発者が必要な時に参考に 実際の使用例 ヘルプファイルで十分 サポートに聞く 見てません 60

61 ほかの例 開発者が実際できること インフラジスティックスコミュニティサイト ブラウズしてみてください どんなことができるでしょう? 61

62 今日のゴールは 終りに 開発者ができる UX を考えよう UX の要素 UX フレンドリーな開発方法 UX パターンの例 ユーザビリティ どのようにしたら? 62

63 まとめ おわりに ユーザー中心 デザイン テスト 開発方法 アジャイル ペルソナ リファクタリング パターン パターンは沢山! 既存のコンポーネントを使用 63

64 まとめ おわりに ブログ ' 製品 技術関連 ( 個人ブログ 質問等 msuzuki@infragistics.com 64

65 Resources

66 おしまい ご清聴ありがとうございました 66