X dev 20121106

デバイス時代における生産性とUX～今後のエンタープライズ開発における両立のポイントとは～

インフラジスティックス・ジャパン株式会社東 賢

株式会社セカンドファクトリー 有馬 正人

INFRAGISTICS 【名】

ɪnfrədʒɪˈstɪks ： インフラジスティックス

1. ニュージャージーに本社を置く UI コントロールを中心としたソフトウェア製品を開発・販売するグローバルカンパニー

2. Infrastructure（基礎構造）+ logistics（後方支援）

3. バイク乗りが社長の東京・原宿の会社【日本】

4. インフラさん【俗称】

Ken Azuma

東 賢（Ken Azuma）インフラジスティックス・ジャパン株式会社

代表取締役／シニアUXアーキテクト

「全ての状況における生産性の向上」と

「優れた UI / UX をお届けすること」の二つを

コアバリューとして、様々な形で

アプリケーションにかかわる皆様が、

優れたユーザーインターフェイスを通じ、

満足度の高いサービスを展開されるための

様々なお手伝いをさせていただいております。

インフラジスティックス・ジャパン株式会社

fMicrosoft MVP

Windows Touch & Tablet PC

Blog

NETADVANTAGE

ANDROID HTML5 iOS

インフラジスティックス・ジャパン株式会社

Windows ストアアプリケーション用UIコントロール （Beta)

避けることのできないモノ：Consumerization of IT

これまで以上に短いサイクルで細やかな要求に応えられる開発プロセスが求められるようになる

デバイスフォームファクターの変化

利用シナリオ／スクリーンサイズ／インプットデバイス／OS／ブラウザなど様々な要素の多様化に対応する必要が出てきている

Consumerization of IT が期待値を引き上げる

ユーザーは普段の生活の中で高度なIT活用体験を当たり前に享受している

ユーザーがエンタープライズITにおいても同様の体験を求める傾向が加速する

Touch = More Speed!

タッチインターフェイスであることによって、アプリケーションにこれまで以上のレスポンススピードを求めることになる。

“App” = more update! Less cost!

デプロイメントコスト

メンテナンスサイクル

グローバルマーケット

低価格化

これまでの開発／リリースサイクルでは追いつけ

なくなる。

身近に接する IT が一貫性を持ち、直感的である

Forrester Research, Inc.、『The Hour Of The Vendor Strategist: Three Mega Business Trends Will Reshape The Tech Sector』

ユーザーは普段の生活の中で高度なIT活用体験を当たり前に享受している

デバイスの時代は．．．

AGEDEVICE

DEVICE AGE

AGEDEVICE

開発者にとって「氷河期」のような危機的状況にある

DEV-ICE-AGE

「恐竜」のような組織・体制では生き残れない。俊敏に変化に適応できる必要がある。

DEV-ICE-AGE

この変革の時代を生き残るための２つのキーポイントとは：

開発スピードを加速させる生産性

ユーザー体験のデザイン

UIコントロールを使った生産性の向上

できるだけ部品をそのまま利用することによって、できるだけ「作らない」ことを検討する。

そのために、標準コントロールだけでなく、多くのUIコントロールをカードとして持っておく。

既に顧客の頭の中にあるUIのイメージは標準コントロールの範囲を大幅に超えている。

UIコントロールを使った生産性の向上

他のどの産業も生産工程で「開発」をしていない。

優れたプロトタイプを繰り返し「開発」し、最終的な生産工程でスムーズに組み立てていく。

アセットベクターやビットマップによるアイコンなど、

UI 上でそのまま表示されるもの

スタイル UI コントロールに適用される外観

モーション 状態内／状態間のアニメーション

レイアウトネスト構造を持ったグループ化されたレイアウトコ

ントロール

UI コントロール多くはデータバインドの対象となる UI コントロー

ル

スクリーン 複数のレイアウトを管理する画面の集合

組み立てるのは何か？

これらの項目はUIガイドラインの項目として書かれるようなポイントとして押さえるべき大項目となる

UIコントロールを活用した開発

重要なポイント設計にコンポーネントを合わせるのではなく、

コンポーネントを設計時点の選択肢として検討することで最大の効率化が実現

フェーズ 標準コントロール使用 UIコントロールを使用

設計 • 標準のコントロールでカバーできない仕様は、追加開発の為の設計が必要

• 多機能なコンポーネントを前提とすることで、多くの仕様を吸収することが可能

• 早期に多くの機能を備えたプロトタイプの実装が可能

実装（拡張） • 標準コントロールの拡張• 単体テスト

• コンポーネントの機能の範囲で仕様が決定している場合、拡張は不要

本実装 • コーディング等負荷大

• 機能が増えればその分テストの負荷大

• プロパティベースの効率的な開発

• 製品でテスト済みなので単体テストの負荷小

結合テスト • Bugfixの負荷大

• パフォーマンスチューニングの負荷大

• Bugfixの負荷小

• パフォーマンスチューニングの負荷小

単体テスト

コンサルティング会社A様のケースチャートコンポーネント（ローソク足）をご活用

21

30人日

13人日

開発効率に2倍以上の差!

「テスト工数が圧倒的に変わってくる」

実工数比較

お客様導入事例

カブドットコム証券株式会社様

• NetAdvantage（WindowsForms）を採用し、大幅に開発効率を向上（通常3～4ヶ月→1ヶ月に短縮）

• Gridのソートや列の並び替え機能やツリー、ツールバー機能等を活用→開発工数の削減

• デザインツールAppStylistにより、アプリの外観を一元的に設定・管理→デザイン工数の削減

※詳細は弊社サイトをご参照下さい

http://jp.infragistics.com/jirei/kabudotcom.aspx

株価情報の一覧表示画面

発注パネル

NetAdvantageのメリット

開発工数の大幅な削減

高度なパフォーマンスチューニング

ビジュアルデザインを独立して設定可能プリセットのスタイルも多数用意

パフォーマンス検証例

• 業界最速のデータグリッド– 対象コントロール：XamGrid

– テスト内容：xamGrid をさまざまな ItemSource へバインドし、LayoutUpdated イベントの描画にかかった時間を測定

– 想定操作：データの読み込み時のエンドユーザーの待ち時間を測定

■表1：描画に要した時間 ※IList へバインド - 10 列、1,000,000 行のデータ

弊社製品 競合製品 I 競合製品 II

所要時間 (ms) 1,028 2,050 99% 遅い 1,962 90% 遅い

メモリ使用量- テスト前(KB)

91,852 88,964 0.3% 尐ない 90,683 0.1% 多い

メモリ使用量- テスト後(KB)

91,762 144,394 57% 多い 128,511 40% 多い

■表2：描画に要した時間 ※ObservableCollection へバインド - 10 列、1,000,000 行のデータ

弊社製品 競合製品 I 競合製品 II

所要時間 (ms) 1,028 2,025 96% 遅い 1,962 90% 遅い

メモリ使用量 - テスト前(Kb)

91,852 91,360 等しい 90,660 1% 尐ない

メモリ使用量 - テスト後(Kb)

91,762 113,795 24% 多い 128,207 39% 多い

※詳しくは、パフォーマンスホワイトペーパーをご参照下さい。http://jp.infragistics.com/innovations/performance-whitepapers.aspx#13967

ビジュアルスタイルの適用

例：リソースウォッシング機能

基本色を1色選択するだけでアプリケーションの外観をキレイにスタイリング

2nd FACTORY CO.,Ltd. CONFIDENTIAL 26

株式会社セカンドファクトリー

自社プロダクト（Office365向けアプリ、電子書籍）

UI・CLOUDに関するコンサルティング及びトレーニング

設計/開発及び開発支援、R&D代行業務

UI＆CLOUD Professional Services

2nd FACTORY CO.,Ltd. CONFIDENTIAL 27

エンタープライズシステムに求められる要素

快適なユーザーインターフェース

快適なインタラクション コンシューマー向けサービスと操作感に大きな違和感を感じさせな

いこと

差別化されたユーザー体験(UX) ユーザーが本当にやりたいこと(ユーザーが気が付いていないことも

含めて)を提供できるか？

短時間で実現する必要がある

2nd FACTORY CO.,Ltd. CONFIDENTIAL 28

ユーザーインターフェース/インタラクション

タッチアプリケーション(モバイル/タブレットPC)に必要なボタンサイズとは？

2nd FACTORY CO.,Ltd. CONFIDENTIAL 29

ユーザーインターフェース/インタラクション

出展：www.meti.go.jp/press/20071001007/004_bessi.pdf （主要寸法項目の年代別平均値(2007.10) 経済産業省）

2nd FACTORY CO.,Ltd. CONFIDENTIAL 30

ユーザーインターフェース/インタラクション

ボタンサイズは44×44pxを基準とする。

ボタン間には最低8pxの余白を設ける。

タッチさせるオブジェクトの表現は7mm/26px以上、オブジェクトの反応範囲9mm/34px以上を推奨。

オブジェクトサイズを並べる場合は、最低でも2mm/8pxの マージンが必要。

iOS

デザインガイドライン

Windows Phone7

UIガイドライン

2nd FACTORY CO.,Ltd. CONFIDENTIAL 31

デザインガイドライン/コントロール

デザインガイドラインをベースにカスタマイズの必要性を検討コントロール開発のメリットが発揮されるポイント

各プラットフォームが提供するデザインガイドライン

2nd FACTORY CO.,Ltd. CONFIDENTIAL 32

ユーザー体験＝UXとは ??

• UX = 見た目 ?

• UX = デザイナーの仕事 ?

• UX = ユーザビリティ ?

• UX = クリック数が尐ないこと？

2nd FACTORY CO.,Ltd. CONFIDENTIAL 33

What is “UX” ??

• ISO9241-210 (国際規格)「製品、システムまたはサービスに対する使用、および/または使用を予想したときの人の知覚と反応」

注釈１：ユーザエクスペリエンスには、使用前、使用中、使用後に生じるユーザの感情、信念、嗜好、知覚、生理学的・心理学的な反応、行動や達成の全てを含む。

注釈２：ユーザエクスペリエンスは、ブランドイメージ、見た目、機能、システム性能、対話行動や対話システムの補助機能、以前の経験から生じるユーザの内的・身体的状態、態度、技能や個性、および利用状況の結果である。

注釈３：ユーザの個人的目標という観点から考えた時には、通常はユーザエクスペリエンスに付随する知覚的・感情的な側面を、ユーザビリティは含むことができる。ユーザビリティの評価基準はユーザエクスペリエンスの諸側面を評価するのに用いることができる。

2nd FACTORY CO.,Ltd. CONFIDENTIAL 34

What is “UX” ??

ユーザーが得られる有意義な体験と行動そのもの

ユーザーが本当にやりたいこと(ユーザーが気が付いていないことも含めて)を、

「楽しく」、「面白く」、「心地よく」できること

2nd FACTORY CO.,Ltd. CONFIDENTIAL 35

UX検討の重要性

2FCで利用している工数入力システムを例に

2nd FACTORY CO.,Ltd. CONFIDENTIAL 36

全機能を盛り込むことがゴールではない

No 機能

1 作業項目(時間)入力機能

2 作業項目(時間)修正機能

3 日付変更(カレンダー)

4 過去日の作業項目コピー機能

5 直近作業表示機能

6 プロジェクト新規追加機能

7 工程新規追加機能

8 プロジェクト削除機能

9 工程削除機能

10 プロジェクト検索機能

No 機能

11 工数集計ダウンロード機能

12 集計データ検索機能

13 マスタ管理機能

14 システム管理機能

15 パスワード変更機能

工数入力ツールの機能一覧

2nd FACTORY CO.,Ltd. CONFIDENTIAL 37

全機能を盛り込むことがゴールではない

業務アプリケーションらしく、メニューを並べてみました

2nd FACTORY CO.,Ltd. CONFIDENTIAL 38

全機能を盛り込むことがゴールではない

そもそも何故工数入力ツールをスマフォに対応させる必要があるのか？

その日の工数入力

メンバーも管理部門も楽に！(Happyに！）

誰に？

何を？

どんなシチュエーションで？

何を行わせる？

結果ユーザーはどうなる？

外出中の2FCメンバー

個人所有のスマフォ(iPhone / Android)

外出先

実は…

外出が多いメンバーの工数入力率が低下していた毎月末に時間を掛けて、一月分の工数を入力していた入力値も曖昧な部分が多い管理部門は月末の締め近くになると、未入力メンバーをチェックしていた

2nd FACTORY CO.,Ltd. CONFIDENTIAL 39

No 機能

1 作業項目(時間)入力機能

2 作業項目(時間)修正機能

3 日付変更(カレンダー)

4 過去日の作業項目コピー機能

5 直近作業表示機能

6 プロジェクト新規追加機能

7 工程新規追加機能

8 プロジェクト削除機能

9 工程削除機能

10 プロジェクト検索機能

No 機能

11 工数集計ダウンロード機能

12 集計データ検索機能

13 マスタ管理機能

14 システム管理機能

15 パスワード変更機能

1日の作業が入力しやすいことに注力する！初期表示は…メニューじゃない！

1日のタイムライン「何時から何時間、何した？」

タッチデバイスで何をさせるのか？どんな価値を提供するのか？

全機能を盛り込むことがゴールではない

2nd FACTORY CO.,Ltd. CONFIDENTIAL 40

優れたUXの事例

Sony ウォークマン

2nd FACTORY CO.,Ltd. CONFIDENTIAL 41

優れたUXの事例

Sony ウォークマンが提供したのは、

音楽を”持ち歩く”ライフスタイル

2nd FACTORY CO.,Ltd. CONFIDENTIAL 42

UXを高めるための専門的手法

プロセスへのアプローチ：HCD（人間中心設計）

使用状況の理解と明示

設計による解決策の作成

ユーザーと組織の要求事項

の明示設計の評価

2nd FACTORY CO.,Ltd. CONFIDENTIAL 43

よりシンプルな手法

ユーザー、課題の理解仮説

インタラクション設計

プロトタイプ開発早期の検証

このフローを踏む(1度でも)ことにより、UXは大きく向上する

2nd FACTORY CO.,Ltd. CONFIDENTIAL 44

簡単に検証できるモックアップを

UIの画像イメージをスマートフォンに

2nd FACTORY CO.,Ltd. CONFIDENTIAL 45

システム開発におけるUXデザインの要素

具体的

抽象的

Strategy：戦略

Scope：要件

Structure：構造

Skeleton：骨格

Surface：表層

出典：Jesse James Garrett’s Elements of User Experience

http://www.jjg.net/elements

2nd FACTORY CO.,Ltd. CONFIDENTIAL 46

システム開発におけるデザインの要素

具体的

抽象的

出典：Jesse James Garrett’s Elements of User Experience

http://www.jjg.net/elements

• 快適なインターフェース

• 快適なインタラクションデザインガイドラインの活用UIコントロールによる生産性向上

• 差別化されたユーザー体験ユーザー、課題の理解

プロトタイプによる早期の検証

要件定義 基本設計 詳細設計 開発単体テスト

結合テスト

システムテスト

従来、導入が検討されたのは開発一歩手前、あるいは開発に着手してからであり、要件が完全に固まった状態であった。そのため、やむを得ずコントロールのカスタマイズをされるケースも多く、あまり効率の良い状態ではない。

要件定義 基本設計 詳細設計 開発単体テスト

結合テスト

システムテスト

有効活用されているお客様では、共通して「設計段階においてUIコンポーネントで要件が満たせるかどうかについて評価」を行い、開発の難易度を決定されている。結果として見積もりが正確になり、手戻りが尐なくなる。

UIコントロールの有効活用

2nd FACTORY CO.,Ltd. CONFIDENTIAL 48

私たちが協業でお届けできるものは：

ユーザー、課題の理解仮説

インタラクション設計

プロトタイプ開発早期の検証

実際に利用できる成果物をお届けしていきます。

触れる、実機で動く、最終に近い、ユーザーの想像力を喚起できる

プロトタイプ

グラフィックアセットテーマ／スタイル

ビジュアルデザイン

コードレベルで再利用可能な実際にコントロールを配置した

レイアウトデザイン

継続的な開発に利用できる練りこまれたUXを表現するための

UI ガイドライン