Windows クライアント UX 再考 インフラジスティックス ジャパンデベロッパーエバンジェリスト池原大然 1

Windows クライアント

UX 再考

インフラジスティックス・ジャパン

デベロッパー エバンジェリスト

池原大然

[email protected]

自己紹介

•

池原 大然(いけはら だいぜん)

•

デベロッパー エバンジェリスト

•

WPF トレーナー

•

Blog

▫

http://blogs.jp.infragistics.com/blogs/dikehara/

あなたの

アプリケーションは

使いやすいですか?

アジェンダ

• Windows クライアントの歩み

• UX とは？

Windows クライアント と UX

• UX ≒ コスト増?

• フルスクラッチ vs コンポーネント

• NetAdvantage WinClient

UX vs コスト

• Project Aqua v2

UX + インフラジスティックス

Windows クライアント と UX

•

Windows クライアントの歩み

•

UX とは？

Windows クライアントの歩み

Win32API

MFC, COM

(95, 98)

Windows Forms

(2000, XP)

Windows

Presentation

Foundation

(Vista, 7)

Windows 7

•

2009 年 7 月: RTM

•

パフォーマンス向上

▫

使用メモリ低減

•

より「使い勝手」を重視

▫

マルチ タッチ UI

UX とは？

役立つ

価値が

ある

信頼

できる

アクセシビ

リティ

探し

やすい

使い

やすい

求め

られる

UI事例1:リボン インターフェイス

•

Office 2007

•

ユーザーに表示する機能を限定

▫

混乱を防ぐ

▫

新規ユーザーの習熟までの時間を減少

•

今後の主流

▫

Windows 7 で積極採用

UI事例2:ブレッド クラム

•

Web ブラウザーに似たナビゲーション

•

現在の位置を直感的に把握

C:¥Users¥Daizen¥Documents¥Infragistics

UX を考える上で大事なこと

シナリオ

ペルソナ

UX vs コスト

•

UX ≒ コスト増?

•

フルスクラッチ vs コンポーネント

•

NetAdvantage for WinClient

UX ≒ コスト増?

•

どの「コスト」を重視？

▫

開発、保守の「コスト」

▫

運用の「コスト」

トータルでの

Return Of Investment (ROI)

•

UX 向上によるコスト削減

▫

状況把握の時間短縮

▫

作業効率の向上

•

トータルでの指標、調査

▫

平均作業時間

▫

ページ ビュー

▫

アクティブ ユーザー数

▫

成約率

•

サービスの差別化による売上向上

フルスクラッチ

VS コンポーネント

フルスクラッチ

◎

◎

× ~ ◎*

×

×

* 設計による

NetAdvantage

◎

◎

◎

◎

◎

コンポーネント

○

△

△

○

○

機能性

柔軟性

拡張性

開発効率

コスト低減

WPF

•

基本は Windows Forms と同じ

▫

UIデザイン部: コード → XAML

•

「使い勝手」を考えた設計が可能

▫

柔軟なレイアウト

▫

視認性向上

•

ハードウェア アクセラレーション

▫

CPU リソースの低減

•

WPF ベース Visual Studio 2010

NetAdvantage for WinClient

•

WPF の特性をフル活用

▫

レイアウト、アニメーション、スタイリング

•

仮想化技術

▫

100万レコード以上に耐える

•

デザイン エクスペリエンス向上

▫

Expression Blend サポート

▫

Visual Studio デザイン サポート

WPF の特性をフル活用

•

柔軟なレイアウト

▫

xamDataPresenter

•

スタイリング サポート

▫

プリセット テーマ

•

アニメーション サポート

▫

xamChart

パフォーマンス重視

•

仮想化技術を採用 - xamDataGrid

▫

レコードローディング

▫

レコード コンテナー仮想化

▫

セル仮想化

▫

ラベル仮想化

▫

遅延スクロール モード

•

設定を組み合わせることにより、100万行に耐えうる

デザイン エクスペリエンス向上

•

Expression Blend サポート

•

Visual Studio デザイン サポート

NetAdvantage for WPF

柔軟なデータ表現

xamDataCarousel

(カルーセル)

xamDataGrid

(データ グリッ

ド)

NetAdvantage for WPF

UX を考える上で大事なこと(再)

シナリオ

ペルソナ

•

NA for WPF を用いたベスト プラクティス

▫

Healthcare CRM

•

ユーザー中心の設計

▫

ペルソナ、シナリオ、プロトタイピング

▫

タイル パネル インタラクション

•

デザインパターン

使用コントロール

•

NetAdvantage WPF

▫

XamDataGrid

▫

XamCarouselListBox

▫

XamTileView :

Prototype

▫

XamTab

▫

XamChart

▫

XamTimeLine:

Prototype

まとめ

• Windows クライアントの進化と共に

UX への取り組みが必要

Windows クライアント と UX

• ツールの積極採用による UX とコストの両立

UX vs コスト

• ユーザー中心の設計 (Project Aqua)

UX + インフラジスティックス

リソース

本日のデモ ソース並びに NetAdvantage for WinClient Tips

http://blogs.jp.infragistics.com/Blogs/DIkehara/

インフラジスティックス・ジャパン ホームページ http://jp.infragistics.com

Project Aqua – CodePlex(英語)

http://healthcare.codeplex.com/ Windows 7 ホーム ページ http://www.microsoft.com/japan/windows/windows-7/default.aspx Visual Studio 2010 ホーム ページ Model-View-ViewModel デザイン パターンによる WPF アプリケーション http://msdn.microsoft.com/ja-jp/magazine/dd419663.aspx

あなたの

アプリケーションは

使いやすいですか?

ペルソナ

医師

• Dr. マックス カーソ

ン

• 37 歳

• 一般医

• Westwood 病院

• 月 2 回、8 時間の救

急外来勤務

患者

• ジョン リッゾ

• 44 歳

• テクニカル ライター

• 過去にイラクにおい

て爆発物による頭部

および腕部の負傷歴

あり

• 慢性的な頭痛に悩ま

されている

• 2009 年 5 月にひど

い頭痛ならびに息切

れを感じ、Westwood

病院の救急外来へ来

シナリオ

•

Dr. マックス カーソンが仕事を開始するさ

い彼のホーム ページを開くと、治療を待つ

患者の一覧が優先度がついた形で表示される。

•

患者リストの中からジョン リッゾを選択

•

症状を確認後、該当箇所のデータを検索

•

ナースによる報告を参照

•

その他の検査結果を確認

•

治療計画を立案

•

多くのデータを参照する必要があるため、画

面繊維を極力抑えた UI が必要

デザイン パターン

•

Model View ViewModel パターン

•

データ バインディングを多用

▫

View に ViewModelをバインド

•

コマンド

View