Slide 1

Slide 1 text

業務システムのU X/ U I改善に取り組むための 正しいアプローチと技術トレンド 2020/05/21 NCDC株式会社

Slide 2

Slide 2 text

プレゼンター紹介 2 代表取締役/ビジネスアーキテクト 早津 俊秀 和歌山大学経済学部 非常勤講師 元グロービス経営大学院 客員准教授 日本電信電話にてエンジニア、新規ビジネスプ ロデュースを経験後、HP,BEA、オラクル等の 外資系IT企業にてITコンサルタント、製薬ベン チャーでのIT部門を統括。ベンチャー支援等の 後 NCDCを創業。 ◉執筆 SOA サービス指向アーキテクチャ(翔泳社) ビジネスはSOAで変革する(IDGジャパン) スマートデバイス×業務システム導入ガイド(秀和システ ム)

Slide 3

Slide 3 text

NCDCのサービス l CX/UXと先端テクノロジーによってデジタルイノベーションを推進します 3 NCDC CX/UX デザイン 先端 テクノロジー 自社 サービス • 新規サービス企画 • CX/UXデザインコンサルティング • IoT/AI • クラウドインテグレーション • モバイル・Web先端技術 • モバイルプラットフォーム [AppPot]の製造・販売 • IoTプラットフォーム • [AppPot IoT]の製造・販売

Slide 4

Slide 4 text

NCDCのサービスの特徴 l ビジネスモデルの検討からデザインによる可視化、先端テクノロジーの組み合わせで システムを構築します 4 ビジネスモデルのデザイン UXデザイン/PoC システム・インテグレーション ITアーキテクチャのデザイン リファレンス実装 DX推進のための組織デザイン

Slide 5

Slide 5 text

UXとUXデザイン そしてUIデザイン

Slide 6

Slide 6 text

U X と U X デ ザ イ ン l UX l User Experience l 利用者の経験、製品・サービスを使用する際の印象や体験 l UXデザイン l UXを設計する。UXを実現するための仕組みや施策を考える l 最適な「UX」を実現するために「UXデザイン」を行う 6

Slide 7

Slide 7 text

UXとUIの関係 その1 l ユーザーの体験(UX)は一連の活動の中で多岐にわたる 7 UX UI Operation UI System

Slide 8

Slide 8 text

UXとUIの関係 その2 l 一つのシステムの中でのユーザーの体験(UX)という考え方もある 8 UX UX UI U I

Slide 9

Slide 9 text

「業務システムのUX/UIの正しいアプローチ」のポイント① l 施策やプロジェクトで対象としているUX/UIの定義を関係者で明確にする l UXの定義は抽象度が高い。時代によって、文脈によって、人によって解釈・ ディスカッションポイントが異なる場合が多い l その結果、UIの定義も曖昧になりがち 9

Slide 10

Slide 10 text

NCDCのUXデザインプロセス ⽬的の確認・ 定義 ジャーニー マップ 作成 ワイヤーフレーム 作成 ユーザーテスト ペルソナ定義 優先順位 機能抽出 UXデザインフェーズ UIデザインフェーズ UX UI Operation UI System NCDCのUXデザインプロセスはこちら寄り その1 UX UX UI U I 業務向けUX/UIはこちら寄り その2 10

Slide 11

Slide 11 text

NCDCのUXデザインプロセス UXデザインフェーズ UIデザインフェーズ UXとUIの違いが大切。 つまり 「機能」なのか「画面表現」 なのか? ⽬的の確認・ 定義 ジャーニー マップ 作成 ワイヤーフレーム 作成 ユーザーテスト ペルソナ定義 優先順位 機能抽出 UX UX UI U I 業務向けUX/UIはこちら寄り その2 11

Slide 12

Slide 12 text

業務システムでよく聞くUX/UIの課題 「外回りの時に検索するので、マップ表示してタップ したら商談メモが見れるといいですね」 「受注No.から出荷状況まで見れると良いのですが、 このシステムでは出荷状況は見られないので、受注 No.から倉庫担当者を検索してメモ。次に出荷システ ムから担当者を検索して日付の合致する顧客を探 すしかないんです」 使用者の「使い勝手」に対する声 機能面の課題→UXの課題 機能面の課題→UXの課題 課題はどこか? 12

Slide 13

Slide 13 text

業務システムでよく聞くUX/UIの課題 「UIが使いにくい!!」 「月末に使用するのですが、毎回操作手順がわ からなくなって資料やわかる人を探します」 「「保存」と「確定」と「申請」のボタンの違 いがわかりにくく、本来「申請」まで必要なの に「確定」のままにしている場合が多い」 「入力項目が多く、かつ、途中保存ができないので、 一からやり直しになることが多くて大変です」 「検索するとなぜか欲しい情報が1件も出てこないの で検索を使わず目視で探してます」 「検索結果のソートがあれば便利なのですが・・・」 使用者の「使い勝手」に対する声 課題はどこか? 画面表現の課題→UIの課題 画面表現の課題→UIの課題 機能面の課題→UXの課題 機能面の課題→UXの課題 機能面の課題→UXの課題 13

Slide 14

Slide 14 text

「業務システムのUX/UIの正しいアプローチ」のポイント② l 課題及び意識すべき対象は「機能面」(UX)なのか? 「画面表現」(UI)なのか?を明確に l 業務システムのUX/UIを正しく実現するためには、「機能面」の検討時点 から使用性(UX/UI)に関する機能を定義しておく必要がある l 業務システムはUIの裏側にビジネスロジックが隠れている。ビジネスロジックの出来が UXに大きく影響を与える 14

Slide 15

Slide 15 text

業 務 シ ス テ ム の UX/ UI プ ロ ジ ェ ク ト UXデ ザ イ ン フ ェ ー ズ

Slide 16

Slide 16 text

UXデザインフェーズでの正しいアプローチ l 機能を抽出することがUXデザインフェーズでの目的 l 一般的なUXデザインのプロセスにこだわらなくても良い 16 ⽬的の確認・ 定義 ジャーニー マップ 作成 ワイヤーフレーム 作成 ユーザーテスト ペルソナ定義 優先順位 機能抽出 UXデザインフェーズ UIデザインフェーズ システム利用者 業務フロー 機能一覧 機能仕様 画面仕様を詳細 レベルで定義 • 表示件数上限設定 • 検索補助、入力補助 • ソート、フィルタ • 一次保存 • CSV出力、CSV読み込み • ・・・ • ・・・ 管理画面も どうするか?

Slide 17

Slide 17 text

具体的な2つのアプローチ l 画面詳細仕様をどこかで定義しない限り実現はされない l 要件定義時に定義して進めるパターン l 要件定義時に定義するのは無理なので、使用性が低くても早めにリ リースし、ユーザの評価を受けて改善を繰り返すパターン 17 要件定義フェーズで画面詳細仕様まで定義する 要件定義フェーズでは画面詳細は 定義しない リリース後、改善要望を 集約してから改修 リリース後、改善要望 を集約してから改修 この時点では 使用性は低いこ とを受け入れる

Slide 18

Slide 18 text

「業務システムのUX/UIの正しいアプローチ」のポイント ③ l 使用性に大きく影響を与えるUXデザインフェーズ(機能定義フェーズ) において「画面詳細仕様」まで定義することが必要 →定義していないものは実装されない l 「画面詳細仕様」をいつ、どうやって定義するかは2つのアプローチに 大別される。 どちらを採用するのかは「使用者」、「発注元」、「開発委託先」含め、 合意形成が必要。 l 発注元、開発委託先、共にUX/UIを重視した業務システムを初めて構築する 場合は特に注意が必要 18

Slide 19

Slide 19 text

業 務 シ ス テ ム の UX/ UI プ ロ ジ ェ ク ト UI デ ザ イ ン フ ェ ー ズ

Slide 20

Slide 20 text

業務向けシステムのUIデザインフェーズで重要なのは? 20 ⽬的の確認・ 定義 ジャーニー マップ 作成 ワイヤーフレーム 作成 ユーザーテスト ペルソナ定義 優先順位 機能抽出 UXデザインフェーズ UIデザインフェーズ 業務システムならではの 実装工数含めたパターンや ベストプラクティスを もっておくと良い

Slide 21

Slide 21 text

一覧表示パターン l コンシューマ向けの一般的なデザインの常識がNGの場合がある • マージン(隙間)が多く、実線が少なく、 おしゃれでスッキリしたUI • 情報量が多く、実線も多く、古臭いごちゃごちゃ したUIだが、一画面でできることが多い 21

Slide 22

Slide 22 text

よくある検索&結果一覧表示(NG例) • マージン(隙間)が多く、実線が少なく、 おしゃれでスッキリしたUI • しかし、表示件数が少なく、多くの業務をこ なすためには何度もページを遷移させないと いけない 22

Slide 23

Slide 23 text

よくある検索&結果一覧表示(Good例) • おしゃれでスッキリしたUIでありながら、表示件数も多く、 実行できる機能も多く実現できている 23

Slide 24

Slide 24 text

業務システムの使用性で議論になるパターン l 使用性は高くなるが実装工数がかかる場合もある。費用対効果を考える必要あり 24 入力フォームの中で検索する ダイアログ画面がポップアッ プしてくるタイプ 入力文字単位で絞り込み ソート 列を非表示 列順を入れ替え 列の非表示状態を ブラウザ単位で保存しておきたい? 列の非表示状態を ユーザー単位で保存しておきたい?

Slide 25

Slide 25 text

「業務システムのUX/UIの正しいアプローチ」のポイント ④ l 業務向けシステム特有のUIのルールやパターンを理解しておく l 利便性の高いUI部品(検索等)は実装工数もかかることに注意。 利便性と工数のバランスが大切。 25

Slide 26

Slide 26 text

デザインシステムの活用 26

Slide 27

Slide 27 text

従来よく使っていたのは「デザイン指示書」 l いままでは多くの場合、カラー、フォント、フォーム、ボタンなど、UIを構成す る要素を「デザイン指示書」として開発に引き継いでいた 27

Slide 28

Slide 28 text

これからは「デザインシステム」を活用する l 世界には公開されているデザインシステムが存在する l 業務向けとしてIBM社やSalesforce社のものが参考になる l HTML/CSSやReact/Vue向けのJava Script実装コードがセットになっている IBM Carbon Design System https://www.carbondesignsystem.com/ Salesforce.com Lightning Design System https://www.lightningdesignsystem.com/ 28

Slide 29

Slide 29 text

公開されているデザインシステムの例 l Salesforce.com Lightning Design System l IBM Carbon Design System 29

Slide 30

Slide 30 text

自社用のデザインシステムを作ることも可能 l ガイドライン、コンポーネントライブラリ(部品群) を定義 l デザインシステムプラットフォームに登録、運用 l Storybook l Invision Design System Manager l Specify 30

Slide 31

Slide 31 text

フロント実装のトレンド 31

Slide 32

Slide 32 text

アーキテクチャの変遷とフロント実装のトレンド l アーキテクチャ大変革期なので、SPAでUX/UIの優れた、アーキテクチャ としても優れたシステムへ 32 ホストコンピューター クラサバ MVC SPA サーバー:Fat クライアント:Thin サーバー:Thin クライアント:Fat サーバー:Fat クライアント:Thin サーバー:Thin クライアント:Fat ダム端末 ダム端末 VB,C++ ,Notes PHP, Java, .Net React,Vue.js • Windows95 • LAN化 • 一人一台に • Internet • クライアント配 布の手間をブラ ウザ利用で解決 90年代 2000年代 2015年〜 • スマホのネイティブアプリ登場でクライアントリッチ/ サーバーシンプル(API)に • HTML5/JavaScriptの標準化・フレームワークの成熟 • サーバーサイドがシンプルになったことで、再利用性 が上がる。かつサーバレス等のシンプルなアーキテク チャが可能に

Slide 33

Slide 33 text

装置のUIについてのアプローチ 33

Slide 34

Slide 34 text

装置のUIパターン l UXデザインプロセスは使わない l 非常に多くの操作を操作パターンで分類する→配置するが基本 34

Slide 35

Slide 35 text

装置のUX/UI応用例 35

Slide 36

Slide 36 text

デザインザインパートナーの選び方 36

Slide 37

Slide 37 text

よくある問題「デザイナーがいない!」 l デザインがあまり重視されてこなかった業務システムの開発では、これまでデザ イナーがほとんど関与せず、エンジニアが適当にデザインしてしまうことも多 かったのでは? l 近年、Webサービスやアプリの分野ではUX/UIデザインの重要性の認識が一般的 になり、業務システムの分野でもUX/UIデザインのニーズが高まってきている。 l しかし、社内にデザイナーがいない場合どうするのか… 業務システムのデザ インを外部に頼める ものなのか? 頼むといっても、誰に? WEB制作が主業務の デザイン会社に頼ん でもいいものか? 37

Slide 38

Slide 38 text

どのようなパートナーを探すべきか l 結論からいうと、「業務システムの特性や、開発のこともよくわかっている デザイン会社」が望ましい。 l WEB制作会社などをあたれば、おそらく「見た目が整って美しい」「今っぽい」 画面デザインをつくってくれる会社はたくさんあります。 しかし、多面的に業務システムに最適なUX/UIを検討デザインできる会社は実は そう多くない。 ü どんなユーザーがどう いった目的で使うのか、 ユーザー像や業務フロー の深い理解 ü 見た目の良し悪しだけで なく実装や、他のシステ ムとの結合まで想定した 課題の抽出 難しいのは、たとえば… 38

Slide 39

Slide 39 text

システム開発の知見がUI検討時に役立った具体例① その場合は、AWS側でサマリーデータをつくってからデータ を渡せばデータ量を抑えられるので問題ないですよ。 必要であればAWS側の処理もアドバイスしますので、3年分の データを表示できるようにつくりましょう! 本当はこの画面では3年分のデータをひとつのグラフにし て表示したいんだけど、3年分のデータをAWSから引っ 張ってくると表示が遅くなったり、データ量が増えて 課金が心配になるのでやめました。 当社のデザイナー &エンジニア お客さまの 画面設計担当者 39

Slide 40

Slide 40 text

システム開発の知見がUI検討時に役立った具体例② おそらく裏側でこういった処理をしてデータを引っ張ってく ることになるのではないか? その場合、過去に似たような仕組みの実装をした経験から、 表示にかなり時間がかかってしまうリスクが考えられます。 要望にはできるだけ応えつつ、表示速度のリスクを回避して、 たとえばこういうUIに変えてはどうでしょうか? 現場の話によると、膨大なデータの中からあれとそれと これとを持ってきて1画面でに同時に表示する必要があ る。 それを実現するためにこのようなワイヤーフレームにし ました。 当社のデザイナー &エンジニア お客さまの 画面設計担当者 40

Slide 41

Slide 41 text

まとめ 41

Slide 42

Slide 42 text

業務システムのUX/UI改善に取り組むための正しいアプローチと技術トレンド l 課題及び意識すべき対象は「機能面」(UX)なのか?「画面表現」(UI)なのか?を 明確に l 使用性に大きく影響を与えるUXデザインフェーズ(機能定義フェーズ)において 「画面詳細仕様」も定義しないと実装されない l 「画面詳細仕様」をいつ、どうやって定義するかは2つのアプローチの大別される。どちらを 採用するのかは「使用者」、「発注元」、「開発委託先」含め、合意形成が必要 l 業務向けシステム特有のUIのルールやパターンを理解しておく l 利便性の高いUI部品(検索等)は実装工数もかかることに注意。利便性と工数のバラ ンスが大切。解決するためにはデザインシステムを構築することも有効な手段 l 技術の大きな転換期なので、最適なUX/UIはSPAを検討すべき 42

Slide 43

Slide 43 text

[email protected] www.ncdc.co.jp