Windows クライアント UX 再考 インフラジスティックス ジャパンデベロッパーエバンジェリスト池原大然 dikehara@infragistics.com 1
自己紹介 池原大然 ( いけはらだいぜん ) デベロッパーエバンジェリスト WPF トレーナー Blog http://blogs.jp.infragistics.com/blogs/dikehara/ 2
あなたの アプリケーションは 使いやすいですか? 3
アジェンダ Windows クライアントと UX Windows クライアントの歩み UX とは? UX vs コスト UX コスト増? フルスクラッチ vs コンポーネント NetAdvantage WinClient UX + インフラジスティックス Project Aqua v2 4
Windows クライアントと UX Windows クライアントの歩み UX とは? 5
Windows クライアントの歩み Win32API MFC, COM (95, 98) Windows Presentation Foundation (Vista, 7) Windows Forms (2000, XP) 6
Windows 7 2009 年 7 月 : RTM パフォーマンス向上 使用メモリ低減 より 使い勝手 を重視 マルチタッチ UI 7
UX とは? 役立つ 探しやすい 使いやすい 価値がある 信頼できる 求められる アクセシビリティ Peter Morville UX ハニカム http://semanticstudios.com/publications/semantics/000029.php 8
UI 事例 1: リボンインターフェイス Office 2007 ユーザーに表示する機能を限定 混乱を防ぐ 新規ユーザーの習熟までの時間を減少 今後の主流 Windows 7 で積極採用 9
UI 事例 2: ブレッドクラム Web ブラウザーに似たナビゲーション 現在の位置を直感的に把握 C: Users Daizen Documents Infragistics vs 10
UX を考える上で大事なこと シナリオ 繰り返し開発 ユーザー中心設計 プロトタイピング ワイヤーフレーム ユーザビリティテスティング ペルソナ 11
UX vs コスト UX コスト増? フルスクラッチ vs コンポーネント NetAdvantage for WinClient 12
UX コスト増? どの コスト を重視? 開発 保守の コスト 運用の コスト エンドユーザー教育に発生する コスト 13
トータルでの Return Of Investment (ROI) UX 向上によるコスト削減 状況把握の時間短縮 作業効率の向上 トータルでの指標 調査 平均作業時間 ページビュー アクティブユーザー数 成約率 サービスの差別化による売上向上 14
フルスクラッチ VS コンポーネント フルスクラッチ コンポーネント NetAdvantage 機能性 柔軟性 拡張性 ~ * 開発効率 コスト低減 * 設計による 15
WPF 基本は Windows Forms と同じ UI デザイン部 : コード XAML 使い勝手 を考えた設計が可能 柔軟なレイアウト 視認性向上 ハードウェアアクセラレーション CPU リソースの低減 WPF ベース Visual Studio 2010 16
NetAdvantage for WinClient Windows Forms 17
WPF の特性をフル活用 レイアウト アニメーション スタイリング 仮想化技術 100 万レコード以上に耐える デザインエクスペリエンス向上 Expression Blend サポート Visual Studio デザインサポート 18
WPF の特性をフル活用 柔軟なレイアウト xamdatapresenter スタイリングサポート プリセットテーマ アニメーションサポート xamchart 19
パフォーマンス重視 仮想化技術を採用 - xamdatagrid レコードローディング Preload LoadOnDemand レコードコンテナー仮想化 Recycle Virtualize LazyLoad PreLoad セル仮想化 CellVirtualization ラベル仮想化 LabelVirtualization 遅延スクロールモード 設定を組み合わせることにより 100 万行に耐えうる 20
デザインエクスペリエンス向上 Expression Blend サポート Visual Studio デザインサポート 2009 Volume1 よりスマートタグを追加 21
NetAdvantage for WPF デザインエクスペリエンス + パフォーマンス 22
柔軟なデータ表現 xamdatacarousel ( カルーセル ) xamdatagrid ( データグリッド ) xamdatapresenter 23
NetAdvantage for WPF xamdatapresenter によるビューの切り替え 24
UX + インフラジスティックス 25
UX を考える上で大事なこと ( 再 ) シナリオ 繰り返し開発 ユーザー中心設計 プロトタイピング ワイヤーフレーム ユーザビリティテスティング ペルソナ 26
NA for WPF を用いたベストプラクティス Healthcare CRM ユーザー中心の設計 ペルソナ シナリオ プロトタイピング タイルパネルインタラクション デザインパターン Model View ViewModel パターンを採用 27
使用コントロール NetAdvantage WPF XamDataGrid XamCarouselListBox XamTileView : Prototype XamTab XamChart XamTimeLine: Prototype 28
Project Aqua 29
まとめ Windows クライアントと UX Windows クライアントの進化と共に UX への取り組みが必要 UX vs コスト ツールの積極採用による UX とコストの両立 UX + インフラジスティックス ユーザー中心の設計 (Project Aqua) 30
リソース 本日のデモソース並びに NetAdvantage for WinClient Tips http://blogs.jp.infragistics.com/blogs/dikehara/ インフラジスティックス ジャパンホームページ Project Aqua CodePlex( 英語 ) http://healthcare.codeplex.com/ Model-View-ViewModel デザインパターンによる WPF アプリケーション http://msdn.microsoft.com/ja-jp/magazine/dd419663.aspx Windows 7 ホームページ http://www.microsoft.com/japan/windows/windows-7/default.aspx Visual Studio 2010 ホームページ http://www.microsoft.com/japan/msdn/vstudio/2010/
あなたの アプリケーションは 使いやすいですか? 使いやすい 役立つ 求められる 価値がある 探しやすい アクセシビリティ 信頼できる 32
ご清聴ありがとうございました 33
参考資料 Project Aqua 34
医師 患者 ペルソナ Dr. マックスカーソン 37 歳 一般医 Westwood 病院 月 2 回 8 時間の救急外来勤務 ジョンリッゾ 44 歳 テクニカルライター 過去にイラクにおいて爆発物による頭部および腕部の負傷歴あり 慢性的な頭痛に悩まされている 2009 年 5 月にひどい頭痛ならびに息切れを感じ Westwood 病院の救急外来へ来院 35
シナリオ Dr. マックスカーソンが仕事を開始するさい彼のホームページを開くと 治療を待つ患者の一覧が優先度がついた形で表示される 患者リストの中からジョンリッゾを選択 症状を確認後 該当箇所のデータを検索 ナースによる報告を参照 その他の検査結果を確認 治療計画を立案 多くのデータを参照する必要があるため 画面繊維を極力抑えた UI が必要 36
デザインパターン Model View ViewModel パターン データバインディングを多用 View に ViewModel をバインド コマンド View (XAML) ViewModel (VB, C#) Model (DataAccess) 37