Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to いまだからしっかり話しておきたい、ユーザーエクスペリエンス概論
Similar to いまだからしっかり話しておきたい、ユーザーエクスペリエンス概論 (20)
More from インフラジスティックス・ジャパン株式会社
More from インフラジスティックス・ジャパン株式会社 (20)
Recently uploaded
Recently uploaded (10)
いまだからしっかり話しておきたい、ユーザーエクスペリエンス概論
- 2. INFRAGISTICS 【名】 ɪnfrədʒɪˈstɪks ： インフラジスティックス 1. ニュージャージーに本社を置く UI コントロールを中心としたソフトウェ ア製品を開発・販売するグローバルカンパニー 2. Infrastructure（基礎構造）+ logistics（後方支援） 3. バイク乗りが社長の東京・原宿の会社【日本】 4. インフラさん【俗称】
- 3. 利用のポイント／傾向 ユーザーインターフェイス開発において、いかに生産性を高め、 優れたUXを実現するための支援が出来るかを追求 •プロジェクトにおける工数の削減 •提案／設計時のラピッドプロトタイピングにも利用SIer •自社製品の継続的アップグレードに伴う価値向上 •弊社製品による他のプラットフォームへの迅速な対応ISV •セルフ開発スキーム確立における標準パーツとしての利用 •「作らない」ための弊社製品の利用In-house IT • 開発／テスト双方における工数の削減 • パフォーマンスの高さ（特にグリッド／チャート） • 手軽に一貫した優れたスタイルによる外観の高い品質を得ることが可能 • 日本法人によるダイレクトサポート • サブスクリプション／アップグレードにおける継続的な価値向上（大小の機能追加及びバグフィックスを含む） • ソースコードの開示（100万行以上の洗練されたコード！） • どの製品でも一貫したアーキテクチャと同じアプローチをとっていることによる学習コストの削減
- 4. Ken Azuma 東 賢（Ken Azuma） インフラジスティックス・ジャパン株式会社 代表取締役／シニアUXアーキテクト 「全ての状況における生産性の向上」と 「優れた UI / UX をお届けすること」の二つを コアバリューとして、様々な形で アプリケーションにかかわる皆様が、 優れたユーザーインターフェイスを通じ、 満足度の高いサービスを展開されるための 様々なお手伝いをさせていただいております。 インフラジスティックス・ジャパン株式会社 f Microsoft MVP Windows Touch & Tablet PC Blog
- 6. NETADVANTAGE
- 7. Cross Platform Modern User Experience
- 8. XAML styles to match published Microsoft themes.
- 13. What is UX?
- 19. ハーレーダビッドソン
- 20. UXケーススタディ：寿司屋
- 24. 避けることのできない大波 “Consumerization of IT” Forrester Research, Inc.、『The Hour Of The Vendor Strategist: Three Mega Business Trends Will Reshape The Tech Sector』 ユーザーは普段の生活の中で 高度なIT活用体験を当たり前に享受している
- 26. UX が Consumerization of IT を加速する ユーザーは普段の生活の中で 高度なIT活用体験を当たり前に享受している ユーザーがエンタープライズITにおいても 同様の体験を求める傾向が加速する
- 28. Elements of UX?
- 29. “UX” の要素 Jesse James Garrett’s Elements of User Experience: http://www.jjg.net/elements/ Surface : 表層 Skeleton : 骨格 Structure : 構造 Scope : 要件 Strategy : 戦略
- 30. UX Iceberg
- 31. 表層レイヤーでは最終的な ビジュアルデザインを表現します Surface : 表層 Skeleton : 骨格 Structure : 構造 Scope : 要件 Strategy : 戦略
- 32. 骨格レイヤーでは レイアウトと機能区画を表現します Surface : 表層 Skeleton : 骨格 Structure : 構造 Scope : 要件 Strategy : 戦略
- 33. 構造レイヤーでは 状態間のナビゲーションを定義します Surface : 表層 Skeleton : 骨格 Structure : 構造 Scope : 要件 Strategy : 戦略 モーダルダイアログ リボンウィザード タスクペイン
- 34. UIにおけるすべての要素は、 ユーザータスク＝要件に対応して作られます Surface : 表層 Skeleton : 骨格 Structure : 構造 Scope : 要件 Strategy : 戦略 ユーザータスク： • 数値を入力する • テキストを入力する • 式を入力する • セルの書式設定を行う • 情報をソートする • 情報をフィルターする • 情報を集約する • データでグラフ描画する • データを保存する • データをインポートする • データをエクスポートする • 印刷 • …
- 35. ビジネスゴールに向かって想定ユーザーや 利用の背景を検討することで戦略を形作ります Surface : 表層 Skeleton : 骨格 Structure : 構造 Scope : 要件 Strategy : 戦略 ビジネスゴール： • 競合製品を入れ替える • その他の連携製品のセールスに貢 献する • 共有のための標準データフォーマット を確立する • … 想定ユーザー： • 会計担当者 • ビジネスプランナー • 主婦 • … 利用の背景： • オフィスのデスクトップ • モバイル環境でのラップトップ • スマートフォン • …
- 36. それぞれのレイヤーは 以下のように大別できます Surface : 表層 Skeleton : 骨格 Structure : 構造 Scope : 要件 Strategy : 戦略 Goals : ゴール Tasks : タスク Features : 機能 • ビジネスゴール • コンセプト • ユーザーゴールに従ったユーザーモデル • ユーザータスクと行動、ユースケース • テクノロジーに依存しない • ナビゲーションマップ • ワイヤフレーム • UI デザインガイドライン
- 39. UX と UI の関係 （IGの場合） Devel Supt UX Project Initiation Project Execution: Phase 1 – UX Concept Design Project Execution: Phase 2 – UI Implementation Project Closing UIUX UI Infragistics Consulting Service Integrates User Experience Design Principals with Agile Development Sales UIUX Engr Prod Mgt UI UX
- 41. UX Design 101
- 42. パレートの法則 20% EFFORT 80% RESULT パレートの法則は、優れた UX を追い求める取り組みにも適用できます。最小限の取り組みだと しても、大きな成果をあげることは可能です。ただし、ある段階以後の成果をあげるためには専門 家による大変な努力が必要になるのも事実です。また、何もしなければ、何も生まれません。
- 43. Why are we here? （我々はなぜここにいるのか？） • ＜重要な理由その１＞ • ＜重要な理由その２＞ • ＜重要な理由その３＞ ＜このプロジェクトを実施する最大の理由＞
- 44. Why are we here? 実例「Mazda デミオ SkyActiv」 • 日本におけるコンパクトカー市場では，ハイ ブリッド車やアイドルストップ搭載車も登場， 軽自動車も含めて各社とも一段と燃費向 上を進めてきており，更なる燃費向上は 必須の状況となっている。 • 本格的マイナーチェンジのタイミング • 走る歓びとクラスを超えた安全性をお客様 に提供する ガソリンエンジンのコンパクトカーでハイブリッドに勝つ！ ©Mazda Motor Corporation http://www.mazda.co.jp/
- 45. エレベーターピッチ • [潜在的なニーズを満たしたり、抱えている課題 を解決したり] したい • [対象顧客] 向けの • [プロダクト名] というプロダクトは、 • [プロダクトのカテゴリー] です。 • これは、 [重要な利点、対価に見合う説得力 のある理由] ができ、 • [代替手段の最右翼] とは違って、 • [差別化の決定的な特徴] が備わっています。
- 46. エレベーターピッチ 実例「Mazda デミオ SkyActiv」 • 低価格で燃費の良いエコカーに乗りたい • エコに敏感な標準所得層向けの • デミオ SkyActivというプロダクトは、 • 主力製品のコンパクトカーです。 • これは、 ガソリンエンジンにもかかわらず 30.0km/lを実現し、 • PRIUSに代表される他社のエコカーとは 違って、 • 楽しく走っても得られるエコが備わっています。 ©Mazda Motor Corporation http://www.mazda.co.jp/
- 48. カバーストーリー 実例「Mazda デミオ SkyActiv」 Mazda デミオ SkyActiv イメージ写真 驚きの低燃費で、もっとクルマにワクワクしませんか？ ガソリンエンジンなのに、ハイブリッド並みの低燃費 思いのままに走れるから、きっともっと、運転が楽しくなります。 きっと走りたくなる、洗練されたスポーティなスタイルです。 ©Mazda Motor Corporation http://www.mazda.co.jp/
- 49. カバーストーリー • カバーストーリーから得られるものは「ユーザーが 何故これから開発する製品を使うのか」です。 私達も何かを選択したり購買したりする時に、 何かに心動かされて選択をしています。皆さん の大好きな物に関するカバーストーリーを集めて みるとヒントがたくさん見つかると思います。「どう して私はこの製品が好きなんだろう？」「どうして この製品を選択しているんだろう？」と考えてみ てください。 • キャッチコピーはコンセプトと表裏一体です。コン セプトをわかり易い言葉で表現したもの、といっ たほうが良いかもしれません。（製品コンセプト はとても抽象的な言葉で表現されることが多い です） • セールスポイントは、コンセプトを受けたサブコン セプトに対応するものです。このサブコンセプトを 受ける形で大機能に紐付く様になれば、これか ら開発するものはコンセプトに沿ったものとなりま す。 ゴール コンセプト サブコンセプト フィーチャセット
- 51. NOT list 実例「Mazda デミオ SkyActiv」 やる やらない アイドリングストップ ハイブリッド ガソリンエンジンクラス最高の低燃費 高級な内装 マツダらしいエクステリアデザイン シャシー含むプラットフォームの再設計 未決 純正カーナビの設定 各種オプション類の設計 カラーバリエーション ©Mazda Motor Corporation http://www.mazda.co.jp/
- 52. Elements of UI?
- 53. ユーザーインターフェイスの構成要素 : View アセット ベクターやビットマップによるアイコンなど、 UI 上でそのまま表示されるもの スタイル UI コントロールに適用される外観 モーション 状態内／状態間のアニメーション レイアウト ネスト構造を持ったグループ化されたレイアウトコントロール UI コントロール 多くはデータバインドの対象となる UI コントロール スクリーンフロー 複数のレイアウトを管理する画面の集合
- 56. 赤 情熱、活気、誠心、愛情、喜悦、 換気、闘争 ピンク 女性、可愛さ オレンジ 陽気、喜楽、嫉妬、わがまま、疑 惑 黄 希望、発展、光明、歓喜、快活、 軽薄、猜疑、優柔 茶 暖かさ、失敗、汚泥 緑 平和、親愛、公平、成長、安易、 慰安、理想、柔和、永久、青春 青 沈着、冷淡、悠久、真実、冷静、 静寂、知性 紫 高貴、優雅、優美、神秘、謹厳、 複雑 白 純潔、潔白、正常、素 朴、冷たさ 黒 厳粛、荘重、静寂、沈 黙、悲哀、不正、罪悪、 失敗 灰 覆雲、憂鬱、意気消沈、 老齢 色とイメージ ※色彩のイメージは文化によって異なります 赤：エジプトでは死 赤：中国では幸福 赤：インドでは人生、創造性 カラー † Web Concept & Design. Indianapolis: New Riders Publishing † How fluent is your interface? Designing for international users
- 57. 背景色 黒 白 マゼンタ 青 シアン 緑 黄 赤 黒 白 マゼンタ 青 シアン 緑 黄 赤 シンボル色 カラーとコントラスト † Hymnos Style Guide Machine Tools
- 58. カラースキーム＝色の調整と調和に関する選択 12色相環に基づくカラースキーム 3つの近接した色を選択する（類似 色） 1つの対局にある色（補色）を選択します。 写真などから取るカラースキーム 写真をピクセル化していきます カラースキームは、少ない色相と、彩度／明度に寄るバリエーションに基づいていると良いと言われています。 カラースキーム † The Non-Designer’s Design Book. 3rd Edition
- 59. 58 Adobe Kuler † The Non-Designer’s Design Book. 3rd Edition Kuler は、カラースキームの共有を目的としたコミュニティサイトです。世界中のユーザーが作成した カラースキームを利用することが可能です。また、自分で作成したものも保存／公開することが可能 です。カラースキームはHEXやHSVで値を取得でき、AdobeのCSツールとの連携も可能です。
- 60. スタイル：iOS
- 61. スタイル：Android 60
- 63. モーション：分類 • モーションには大別して「トランジショ ン」と「アニメーション」の2種がありま す。 • トランジションは、画面遷移に代表 されるある状態からある状態へユー ザーが移動する際に与える視覚的 なフィードバックです。 • アニメーションは、ある状態の中での、 例えばある画面内での動きを伴った 視覚的なフィードバックで、ユーザー のアクションとは必ずしも紐づかない ものです。 • モーションは常に目的を持っており、 ユーザーにアプリケーションやデバイス が「活きている」事を伝えたり、どのよ うにし関わるかを伝えるためにも使わ れます。
- 65. モーション：見かけのパフォーマンス • レスポンスを「即時に」するという仕様は「言う は易し行うは難し」で、特にネットワークを経 由したアクセスを前提にしている場合にはどう してもユーザーを待たせることになってしまいま す。その時、どううまく待ってもらえるかがとても 大事になります。 • 例えばWindows Phone のガイドラインで は、100 ms 以下（ボタンタッチ時の挙動 など）、500 ms から１秒（リストビューで スワイプした時の Pivot アニメーションなど）、 ２秒以下（アプリのローディングやメールが 飛んでいくアニメーションなど）、２～５秒、 ５～１０秒、１０秒以上、もっと長いプロ セスと分けて説明していて、２秒以下のもの は基本的に Built in common controls に挙動を任せています。適切に UI がフィー ドバックを返していなければ、デバイスが活き ているのかどうかもわからないと感じるもので す。 • 逆に、適切にフィードバックを返していれば、 それほど待った気がしなくなるケースもありま す。実際に動作するモーションをたくさん見て、 モーションのパレットを増やしておきましょう。
- 66. レイアウト • レイアウトはUIコントロールを配置す るもので、多くの場合はあるテクノロ ジーのレイアウトコントロールの能力 に依存しています。 • 選択する／選択する可能性のある テクノロジーにおけるコントロールでど のようなレイアウトが可能であるかを 事前に把握しておくことが必要にな ります。 • Windows Form における Canvas のような絶対位置の指定 を行うものだけではレイアウトの再利 用に限界があります。 • 可能な限り、スクリーンの検討を始 める前に利用するフォームファクター と画面サイズを把握してください。
- 67. レイアウト：グリッドシステム • グリッドシステムは、情報を掲載する面 を分割する手段です画面全体を縦や 横の罫線で規則的に区切って面（グ リッド）に分割した中へ、文字や画像、 UI コントロールを配置していきます。 • 多くの UI に対するグリッドシステムで は、最小の文字サイズに合わせて、余 裕を持って配置できる幅で最小単位 が決められます。これをユニットと呼び ます。 • ユニットが決まれば、ユニットを目安に 使って画面全体を分割していきます。 本文が横組であれば、列方向に短く 行方向に長いブロックの連続がベー シックな分割スタイルになります。 • グリッド／ユニットがうまく設定されてい ると、コンテンツ位置の差し替えも容 易になります。 † デザインする技術
- 69. レイアウト：グリッドシステム（Metro） © 2006-2011 Infragistics Japan, All rights reserved, jp.infragistics.com 68 † Microsoft Corporation
- 70. © 2006-2011 Infragistics Japan, All rights reserved, jp.infragistics.com 69 † Microsoft Corporation レイアウト：グリッドシステム（Metro）
- 71. © 2006-2011 Infragistics Japan, All rights reserved, jp.infragistics.com 70 † Microsoft Corporation レイアウト：グリッドシステム（Metro）
- 72. © 2006-2011 Infragistics Japan, All rights reserved, jp.infragistics.com 71 † Microsoft Corporation レイアウト：グリッドシステム（Metro）
- 73. © 2006-2011 Infragistics Japan, All rights reserved, jp.infragistics.com 72 † Microsoft Corporation レイアウト：グリッドシステム（Metro）
- 74. © 2006-2011 Infragistics Japan, All rights reserved, jp.infragistics.com 73 † Microsoft Corporation レイアウト：グリッドシステム（Metro）
- 75. © 2006-2011 Infragistics Japan, All rights reserved, jp.infragistics.com 74 † Microsoft Corporation レイアウト：グリッドシステム（Metro）
- 76. © 2006-2011 Infragistics Japan, All rights reserved, jp.infragistics.com 75 † Microsoft Corporation レイアウト：グリッドシステム（Metro）
- 77. © 2006-2011 Infragistics Japan, All rights reserved, jp.infragistics.com 76 † Microsoft Corporation レイアウト：グリッドシステム（Metro）
- 81. • 身近な例として弁当を考えてみましょう。 • 弁当箱には仕切りがあり、ご飯のパート、メイ ンのおかずのパート、添え物のパートというよ うにレイアウトが分割されています。 • 弁当屋さんに行ってみるとわかりますが、同じ 弁当のトレイを使って様々な弁当が売られて います。皆さんの作るUIのレイアウトもこのよ うに、ネスト構造を持った再利用可能なレイ アウトになっている必要があります。 • 例えば、アウトルックに代表されるような3ペイ ンの分割において、詳細情報が表示される エリアはバリエーションをつけやすいエリアです し、アウトルック自体がメール／カレンダー／ タスクと切り替えるにあたってレイアウトの再 利用を行なっています。是非参考にしてみて ください。 • 再利用可能なレイアウトができたら、ソリュー ションなどでプロジェクトに組み込んでしまうと 理想的です。画面を増やす際に、レイアウト の中から選べるようなテンプレートにしてしまう のです。Visual Studio では比較的容易 に実現できますので試してみてください。 レイアウト：弁当
- 82. • 利用される画面解像度は非常に多く のバリエーションがある状況になってお り、企業で使われるPCにしても全員 が完全に同じ物を利用できることは少 なくなってきています。 • 内包するコンテンツを解像度が上がっ た状態では多く見せられるように、フ ローレイアウト（流しこみが出来るレイ アウト）可能なコントロールがあります。 XAMLにおけるwrap panelなどが代 表的なものです。 • フローレイアウトを行う際にも、しっかり とグリッドシステムが確立されていれば、 何処を固定にして、何処を可変領域 にするべきかが見えやすくなります。ウェ ブサイトなどではフローレイアウトが実 現されていることが多いので、ブラウザ サイズを変更しながら動きを確かめて みてください。 レイアウト：フローレイアウト
- 83. UIコントロール • UI コントロールには、大別してデータバイン ディングの対象となってデータ表示を行う データプレゼンターコントロール、レイアウ トのために存在して 他の UI コントロール を内包するレイアウトコントロール、 UI コ ントロール間／ UI コントロールとバックエン ドロジック間でロジック処理を行う UI フ レームワークの3つに分けることができます。 • UI コントロールは、これまで説明してきた UI の要素を全てコントロールの中に含ん でいる場合があります。全体をネスト構造 として捉えるようにしてください。グリッドなど の大型コントロールはその代表的なもので す。 • サードパーティ製の UI コントロールを選ぶ 場合、既存の開発環境や UI コントロー ルとの関係を確認してください。なにか特 殊な実装方法になっていたり、利用方法 が明らかに異なるようであればスムーズな 開発を阻害することにもなりかねません。
- 84. UIコントロール： データバインディング • WPF や Silverlight 、Flex などのモダン な UI フレームワークにおいては、データバ インディングが設計の前提となっていること が多くなっています。 • Windows Form や過去のテクノロジー においてもデータバインディングを部分的に 利用できた場合があり、その時の経験から 「速度が出ないのではないか」というような 懸念を持っている人もいますが、データバイ ンディングの利用は今日の設計では必須 の項目ともいえる状態です。 • ある状況におけるパフォーマンスの差だけで はなく、一貫性を維持するためにデータバ インディングを利用した場合にどれ程の工 数を削減できるかを確かめてみてください。 • また、データバインディングを前提としておく ことで、バインディング先の UI コントロール を変更することも非常に簡単になります。 レイアウト毎のコントロール配置にバリエー ションを設定するような場合にはすぐに使え る方法です。
- 86. スクリーン • スクリーンは複数のレイアウトを管理 する画面の集合で、アプリケーション の構造を表すものです。 • 実際に画面が遷移するのではなく、 一部が変化するだけの場合もありま すが、そのようなケースもスクリーンの 変化として考えます。 • ペーパープロトタイプなどを行うので あれば、スクリーン一枚に対して一 枚のスケッチを書くことになります。 • 1枚の中のレイアウトは別途考える として、まずは全体の構造をしっかり と考えるようにしてください。 © 2006-2011 Infragistics Japan, All rights reserved, jp.infragistics.com 85
- 90. スクリーン：ハブ＆スポーク型構造
- 92. ユーザーインターフェイスの構成要素 : View アセット ベクターやビットマップによるアイコンなど、 UI 上でそのまま表示されるもの スタイル UI コントロールに適用される外観 モーション 状態内／状態間のアニメーション レイアウト ネスト構造を持ったグループ化されたレイアウトコントロール UI コントロール 多くはデータバインドの対象となる UI コントロール スクリーンフロー 複数のレイアウトを管理する画面の集合
- 98. ユーザーインターフェイスの変遷
- 99. ユーザーインターフェイスの変遷 それぞれの段階で開発の方法も対象も変わっている。 NUIへ至る過程でのタッチ UI の登場は CUI→GUIの変革と 同等あるいは更に大きなインパクトをもたらすと考えられる。 Command-line UI Graphical UI Natural UI