Advertisement

More Related Content

Slideshows for you(20)

Similar to X dev 20121106(20)

Advertisement

X dev 20121106

  1. デバイス時代における生産性とUX ~今後のエンタープライズ開発における両立のポイントとは~ インフラジスティックス・ジャパン株式会社 東 賢 株式会社セカンドファクトリー 有馬 正人
  2. INFRAGISTICS 【名】 ɪnfrədʒɪˈstɪks : インフラジス ティックス 1. ニュージャージーに本社を置く UI コントロールを中心とし たソフトウェア製品を開発・販売するグローバルカンパニー 2. Infrastructure(基礎構造)+ logistics(後方支援) 3. バイク乗りが社長の東京・原宿の会社【日本】 4. インフラさん【俗称】
  3. インフラジスティックス・ジャパン株式会社 東 賢(Ken Azuma) インフラジスティックス・ジャパン株式会社 代表取締役/シニアUXアーキテクト 「全ての状況における生産性の向上」と Microsoft MVP Ken Azuma Windows Touch & Tablet PC 「優れた UI / UX をお届けすること」の二つ f を コアバリューとして、様々な形で アプリケーションにかかわる皆様が、 優れたユーザーインターフェイスを通じ、 Blog 満足度の高いサービスを展開されるための 様々なお手伝いをさせていただいております。
  4. NETADVANTAGE
  5. ANDROID HTML5 iOS
  6. インフラジスティックス・ジャパン株式会社 Windows ストアアプリケーション用UIコントロール (Beta)
  7. 避けることのできないモノ:Consumerization of IT これまで以上に短いサイクルで細やかな要求に応えられる 開発プロセスが求められるようになる
  8. デバイスフォームファクターの変化 利用シナリオ/スクリーンサイズ/インプットデバイス/OS/ブラウザなど 様々な要素の多様化に対応する必要が出てきている
  9. Consumerization of IT が期待値を引き上げる ユーザーは普段の生活の中で 高度なIT活用体験を当たり前に享受している ユーザーがエンタープライズITにおいても 同様の体験を求める傾向が加速する
  10. Touch = More Speed! タッチインターフェイスであることによって、アプリケーションに これまで以上のレスポンススピードを求めることになる。
  11. “App” = more update! Less cost! デプロイメントコスト メンテナンスサイクル グローバルマーケット 低価格化 これまでの開発/リリー スサイクルでは追いつけ なくなる。
  12. 身近に接する IT が一貫性を持ち、直感的である ユーザーは普段の生活の中で 高度なIT活用体験を当たり前に享受している Forrester Research, Inc.、『The Hour Of The Vendor Strategist: Three Mega Business Trends Will Reshape The Tech Sector』
  13. デバイスの時代は... DEVICE AGE
  14. DEVICE AGE DEVICE AGE 開発者にとって「氷河期」 のような危機的状況にある
  15. DEV-ICE-AGE 「恐竜」のような組織・体制では生き残れない。 俊敏に変化に適応できる必要がある。
  16. DEV-ICE-AGE この変革の時代を生き残るための 2つのキーポイントとは: 開発スピードを加速させる生産性 ユーザー体験のデザイン
  17. UIコントロールを使った生産性の向上 できるだけ部品をそのまま利用することによって、 できるだけ「作らない」ことを検討する。 そのために、標準コントロールだけでなく、 多くのUIコントロールをカードとして持っておく。 既に顧客の頭の中にあるUIのイメージは 標準コントロールの範囲を大幅に超えている。
  18. UIコントロールを使った生産性の向上 他のどの産業も生産工程で「開発」をしていない。 優れたプロトタイプを繰り返し「開発」し、 最終的な生産工程でスムーズに組み立てていく。
  19. 組み立てるのは何か? ベクターやビットマップによるアイコンなど、 アセット UI 上でそのまま表示されるもの スタイル UI コントロールに適用される外観 モーション 状態内/状態間のアニメーション ネスト構造を持ったグループ化されたレイアウトコ レイアウト ントロール 多くはデータバインドの対象となる UI コントロー UI コントロール ル スクリーン 複数のレイアウトを管理する画面の集合 これらの項目はUIガイドラインの項目として書かれるような ポイントとして押さえるべき大項目となる
  20. UIコントロールを活用した開発 重要なポイント 設計にコンポーネントを合わせるのではなく、 コンポーネントを設計時点の選択肢として検討することで最大の効率化が実現 フェーズ 標準コントロール使用 UIコントロールを使用 設計 • 標準のコントロールでカ • 多機能なコンポーネントを前 バーできない仕様は、追加 提とすることで、多くの仕様 開発の為の設計が必要 を吸収することが可能 • 早期に多くの機能を備えたプ ロトタイプの実装が可能 実装(拡張) • 標準コントロールの拡張 • コンポーネントの機能の範囲 • 単体テスト で仕様が決定している場合、 拡張は不要 本実装 • コーディング等負荷大 • プロパティベースの効率的な • 機能が増えればその分テス 開発 トの負荷大 • 製品でテスト済みなので単体 テストの負荷小 結合テスト • Bugfixの負荷大 • Bugfixの負荷小 • パフォーマンスチューニン • パフォーマンスチューニング グの負荷大 の負荷小
  21. 実工数比較  コンサルティング会社A様のケース チャートコンポーネント(ローソク足)をご活用 30人日 13人日 開発効率に2倍以上の差! 単体テスト 「テスト工数が圧倒的に変わってくる」 21
  22. お客様導入事例 カブドットコム証券株式会社様 • NetAdvantage(WindowsForms)を採用し、 大幅に開発効率を向上 (通常3~4ヶ月→1ヶ月に短縮) • Gridのソートや列の並び替え機能や ツリー、ツールバー機能等を活用 株価情報の一覧表示画面 →開発工数の削減 • デザインツールAppStylistにより、 アプリの外観を一元的に設定・管理 →デザイン工数の削減 ※詳細は弊社サイトをご参照下さい http://jp.infragistics.com/jirei/kabudotcom.aspx 発注パネル
  23. NetAdvantageのメリット 開発工数の大幅な削減 高度なパフォーマンスチューニング ビジュアルデザインを独立して設定可能 プリセットのスタイルも多数用意
  24. パフォーマンス検証例 • 業界最速のデータグリッド – 対象コントロール:XamGrid – テスト内容:xamGrid をさまざまな ItemSource へバインドし、 LayoutUpdated イベントの描画にかかった時間を測定 – 想定操作:データの読み込み時のエンド ユーザーの待ち時間を測定 ■表1:描画に要した時間 ※IList へバインド - 10 列、1,000,000 行のデータ 弊社製品 競合製品 I 競合製品 II 所要時間 (ms) 1,028 2,050 99% 遅い 1,962 90% 遅い メモリ使用量 91,852 88,964 0.3% 尐ない 90,683 0.1% 多い - テスト前(KB) メモリ使用量 91,762 144,394 57% 多い 128,511 40% 多い - テスト後(KB) ■表2:描画に要した時間 ※ObservableCollection へバインド - 10 列、1,000,000 行のデータ 弊社製品 競合製品 I 競合製品 II 所要時間 (ms) 1,028 2,025 96% 遅い 1,962 90% 遅い メモリ使用量 - テスト前 91,852 91,360 等しい 90,660 1% 尐ない (Kb) メモリ使用量 - テスト後 91,762 113,795 24% 多い 128,207 39% 多い (Kb) ※詳しくは、パフォーマンスホワイトペーパーをご参照下さい。 http://jp.infragistics.com/innovations/performance-whitepapers.aspx#13967
  25. ビジュアルスタイルの適用 例:リソース ウォッシング機能 基本色を1色選択するだけで アプリケーションの外観を キレイにスタイリング
  26. 株式会社セカンドファクトリー UI&CLOUD Professional Services UI・CLOUDに関するコンサルティング及びトレーニング 設計/開発及び開発支援、R&D代行業務 自社プロダクト(Office365向けアプリ、電子書籍) 2nd FACTORY CO.,Ltd. CONFIDENTIAL 26
  27. エンタープライズシステムに求められる要素 快適なユーザーインターフェース 快適なインタラクション  コンシューマー向けサービスと操作感に大きな違和感を感じさせな いこと 差別化されたユーザー体験(UX)  ユーザーが本当にやりたいこと(ユーザーが気が付いていないことも 含めて)を提供できるか? 短時間で実現する必要がある 2nd FACTORY CO.,Ltd. CONFIDENTIAL 27
  28. ユーザーインターフェース/インタラクション タッチアプリケーション(モバイ ル/タブレットPC)に必要なボタン サイズとは? 2nd FACTORY CO.,Ltd. CONFIDENTIAL 28
  29. ユーザーインターフェース/インタラクション 出展:www.meti.go.jp/press/20071001007/004_bessi.pdf (主要寸法項目の年代別平均値(2007.10) 経済産業省) 2nd FACTORY CO.,Ltd. CONFIDENTIAL 29
  30. ユーザーインターフェース/インタラクション iOS Windows Phone7 デザインガイドライン UIガイドライン ボタンサイズは44×44pxを基準とする。 タッチさせるオブジェクトの表現は7mm/26px以上、 オブジェクトの反応範囲9mm/34px以上を推奨。 ボタン間には最低8pxの余白を設ける。 オブジェクトサイズを並べる場合は、最低でも 2mm/8pxの マージンが必要。 2nd FACTORY CO.,Ltd. CONFIDENTIAL 30
  31. デザインガイドライン/コントロール 各プラットフォームが提供するデザインガイドライン デザインガイドラインをベースにカスタマイズの必要性を検討 コントロール開発のメリットが発揮されるポイント 2nd FACTORY CO.,Ltd. CONFIDENTIAL 31
  32. ユーザー体験=UXとは ?? • UX = 見た目 ? • UX = デザイナーの仕事 ? • UX = ユーザビリティ ? • UX = クリック数が尐ないこ と? 2nd FACTORY CO.,Ltd. CONFIDENTIAL 32
  33. What is “UX” ?? • ISO9241-210 (国際規格) 「製品、システムまたはサービスに対する使用、および/または使用を 予想したときの人の知覚と反応」  注釈1:ユーザエクスペリエンスには、使用前、使用中、使用後に生じるユーザの感情、信念、 嗜好、知覚、生理学的・心理学的な反応、行動や達成の全てを含む。  注釈2:ユーザエクスペリエンスは、ブランドイメージ、見た目、機能、システム性能、対話行 動や対話システムの補助機能、以前の経験から生じるユーザの内的・身体的状態、態度、技能や 個性、および利用状況の結果である。  注釈3:ユーザの個人的目標という観点から考えた時には、通常はユーザエクスペリエンスに付 随する知覚的・感情的な側面を、ユーザビリティは含むことができる。ユーザビリティの評価基 準はユーザエクスペリエンスの諸側面を評価するのに用いることができる。 2nd FACTORY CO.,Ltd. CONFIDENTIAL 33
  34. What is “UX” ?? ユーザーが得られる有意義な体験と行動 そのもの ユーザーが本当にやりたいこと(ユーザー が気が付いていないことも含めて)を、 「楽しく」、「面白く」、「心地よく」 できること 2nd FACTORY CO.,Ltd. CONFIDENTIAL 34
  35. UX検討の重要性 2FCで利用している工数入力システムを例に 2nd FACTORY CO.,Ltd. CONFIDENTIAL 35
  36. 全機能を盛り込むことがゴールではない 工数入力ツールの機能一覧 No 機能 No 機能 1 作業項目(時間)入力機能 11 工数集計ダウンロード機能 2 作業項目(時間)修正機能 12 集計データ検索機能 3 日付変更(カレンダー) 13 マスタ管理機能 4 過去日の作業項目コピー機能 14 システム管理機能 5 直近作業表示機能 15 パスワード変更機能 6 プロジェクト新規追加機能 7 工程新規追加機能 8 プロジェクト削除機能 9 工程削除機能 10 プロジェクト検索機能 2nd FACTORY CO.,Ltd. CONFIDENTIAL 36
  37. 全機能を盛り込むことがゴールではない 業務アプリケーションらしく、メニューを並べてみました 2nd FACTORY CO.,Ltd. CONFIDENTIAL 37
  38. 全機能を盛り込むことがゴールではない そもそも何故工数入力ツールをスマフォに対応させる必要があるのか? 実は… 外出が多いメンバーの工数入力率が低下していた 毎月末に時間を掛けて、一月分の工数を入力していた 入力値も曖昧な部分が多い 管理部門は月末の締め近くになると、未入力メンバーをチェックしていた 誰に? 外出中の2FCメンバー 何を? 個人所有のスマフォ(iPhone / Android) どんなシチュエーションで? 外出先 何を行わせる? その日の工数入力 結果ユーザーはどうなる? メンバーも管理部門も楽に!(Happyに!) 2nd FACTORY CO.,Ltd. CONFIDENTIAL 38
  39. 全機能を盛り込むことがゴールではない タッチデバイスで何をさせるのか?どんな価値を提供するの か? No 機能 No 機能 1 作業項目(時間)入力機能 11 工数集計ダウンロード機能 2 作業項目(時間)修正機能 12 集計データ検索機能 3 日付変更(カレンダー) 13 マスタ管理機能 4 過去日の作業項目コピー機能 14 システム管理機能 5 直近作業表示機能 15 パスワード変更機能 6 プロジェクト新規追加機能 7 工程新規追加機能 1日の作業が入力 8 プロジェクト削除機能 しやすいことに注力する! 初期表示は…メニューじゃない! 9 工程削除機能 1日のタイムライン 「何時から何時間、何した?」 10 プロジェクト検索機能 2nd FACTORY CO.,Ltd. CONFIDENTIAL 39
  40. 優れたUXの事例 Sony ウォークマン 2nd FACTORY CO.,Ltd. CONFIDENTIAL 40
  41. 優れたUXの事例 Sony ウォークマンが提供したのは、 音楽を”持ち歩く”ライフスタイル 2nd FACTORY CO.,Ltd. CONFIDENTIAL 41
  42. UXを高めるための専門的手法 プロセスへのアプローチ:HCD(人間中心設計) 使用状況の理 解と明示 ユーザーと組 設計の評価 織の要求事項 の明示 設計による解 決策の作成 2nd FACTORY CO.,Ltd. CONFIDENTIAL 42
  43. よりシンプルな手法 仮説 ユーザー、課題の理解 インタラクション設計 早期の検証 プロトタイプ開発 このフローを踏む(1度でも)ことにより、 UXは大きく向上する 2nd FACTORY CO.,Ltd. CONFIDENTIAL 43
  44. 簡単に検証できるモックアップを UIの画像イメージをスマートフォンに 2nd FACTORY CO.,Ltd. CONFIDENTIAL 44
  45. システム開発におけるUXデザインの要素 具体的 Surface:表層 Skeleton:骨格 Structure:構造 Scope:要件 Strategy:戦略 抽象的 出典:Jesse James Garrett’s Elements of User Experience http://www.jjg.net/elements 2nd FACTORY CO.,Ltd. CONFIDENTIAL 45
  46. システム開発におけるデザインの要素 具体的 • 快適なインターフェース • 快適なインタラクション デザインガイドラインの活用 UIコントロールによる生産性向上 • 差別化されたユーザー体験 ユーザー、課題の理解 プロトタイプによる早期の検証 抽象的 出典:Jesse James Garrett’s Elements of User Experience http://www.jjg.net/elements 2nd FACTORY CO.,Ltd. CONFIDENTIAL 46
  47. UIコントロールの有効活用 単体 結合 システム 要件定義 基本設計 詳細設計 開発 テスト テスト テスト 従来、導入が検討されたのは開発一歩手前、あ るいは開発に着手してからであり、要件が完全 に固まった状態であった。そのため、やむを得 ずコントロールのカスタマイズをされるケース も多く、あまり効率の良い状態ではない。 単体 結合 システム 要件定義 基本設計 詳細設計 開発 テスト テスト テスト 有効活用されているお客様では、共通して「設 計段階においてUIコンポーネントで要件が満た せるかどうかについて評価」を行い、開発の難 易度を決定されている。結果として見積もりが 正確になり、手戻りが尐なくなる。
  48. 私たちが協業でお届けできるものは: コードレベルで再利用可能な 継続的な開発に利用できる 実際にコントロールを配置した 仮説 練りこまれたUXを表現するための ユーザー、課題の理解 レイアウトデザイン UI ガイドライン インタラクション設計 グラフィックアセット 触れる、実機で動く、最終に近い、 テーマ/スタイル ユーザーの想像力を喚起できる 早期の検証 プロトタイプ開発 ビジュアルデザイン プロトタイプ 実際に利用できる成果物をお届けしてい きます。 2nd FACTORY CO.,Ltd. CONFIDENTIAL 48
Advertisement