ncdc_UXSession20200521

2020/05/21 弊社主催のウェビナー資料です。
--------------------------------------------
【セミナー内容】
多くのユーザーが優れたUI（ユーザインターフェース）を備えたプロダクトや、それらの使用を通じて得られるUX（ユーザーエクスペリエンス）に慣れてしまった今、UX/UIデザインの観点を持たずにつくられた製品は、ユーザの満足度が低下していく危機に直面しています。

従来は機能要件だけを満たせばよしとされていた業務システムの分野においても、UXというキーワード・概念が一般化してきた最近では状況が変わりつつあります。
開発側（ベンダー側）でも、ユーザ側でも「このシステムはユーザにとって使いにくのでないか」「UXデザインの観点を取り入れて設計するべきではないか」といった意見が出ることが増えているようです。

当社へのお問い合わせでも「社内システムのUX/UIを改善したい」「自社で改善に取り組んだがうまくいっていない」というご相談が急増しています。
こうしたご相談を受けて実際にコンサルティングをはじめてみると、既存システムのUX/UIが良くないことに加えて、改善のアプローチにも問題があるケースが多いようです。

そこで、今回のセミナーでは、UX/UI改善の豊富な実績を持つ当社が考える「業務システムのUX/UI改善」のための正しいアプローチについてお伝えします。
また、フロントエンド、バックエンド両面の技術トレンドを踏まえて、UX/UI改善プロジェクトではどのような実装技術を選択すべきかや、デザイン資産を効率的に管理するための手法として最近注目されている「デザインシステム」についても解説します。

（一般的な業務システムだけでなく、装置向けソフトウェアのUX/UI改善にも役立てていただける内容です。）
※本セミナーは2020年2月19日に実施したセミナーのアップデート版です。一部同セミナーと重複する内容もあります。

Transcript

1. 業務システムのU X/ U I改善に取り組むための 正しいアプローチと技術トレンド 2020/05/21 NCDC株式会社
2. プレゼンター紹介 2 代表取締役/ビジネスアーキテクト 早津 俊秀 和歌山大学経済学部 非常勤講師 元グロービス経営大学院 客員准教授 日本電信電話にてエンジニア、新規ビジネスプ ロデュースを経験後、HP，BEA、オラクル等の 外資系IT企業にてITコンサルタント、製薬ベン チャーでのIT部門を統括。ベンチャー支援等の 後 NCDCを創業。 ◉執筆 SOA サービス指向アーキテクチャ（翔泳社） ビジネスはSOAで変革する（IDGジャパン） スマートデバイス×業務システム導入ガイド（秀和システ ム）
3. NCDCのサービス l CX/UXと先端テクノロジーによってデジタルイノベーションを推進します 3 NCDC CX/UX デザイン 先端 テクノロジー 自社 サービス • 新規サービス企画 • CX/UXデザインコンサルティング • IoT/AI • クラウドインテグレーション • モバイル・Web先端技術 • モバイルプラットフォーム [AppPot]の製造・販売 • IoTプラットフォーム • [AppPot IoT]の製造・販売
4. NCDCのサービスの特徴 l ビジネスモデルの検討からデザインによる可視化、先端テクノロジーの組み合わせで システムを構築します 4 ビジネスモデルのデザイン UXデザイン/PoC システム・インテグレーション ITアーキテクチャのデザイン リファレンス実装 DX推進のための組織デザイン
5. UXとUXデザイン そしてUIデザイン
6. U X と U X デ ザ イ ン l UX l User Experience l 利用者の経験、製品・サービスを使用する際の印象や体験 l UXデザイン l UXを設計する。UXを実現するための仕組みや施策を考える l 最適な「UX」を実現するために「UXデザイン」を行う 6
7. UXとUIの関係 その１ l ユーザーの体験（UX）は一連の活動の中で多岐にわたる 7 UX UI Operation UI System
8. UXとUIの関係 その２ l 一つのシステムの中でのユーザーの体験（UX）という考え方もある 8 UX UX UI U I
9. 「業務システムのUX/UIの正しいアプローチ」のポイント① l 施策やプロジェクトで対象としているUX/UIの定義を関係者で明確にする l UXの定義は抽象度が高い。時代によって、文脈によって、人によって解釈・ ディスカッションポイントが異なる場合が多い l その結果、UIの定義も曖昧になりがち 9
10. NCDCのUXデザインプロセス ⽬的の確認・ 定義 ジャーニー マップ 作成 ワイヤーフレーム 作成 ユーザーテスト ペルソナ定義 優先順位 機能抽出 UXデザインフェーズ UIデザインフェーズ UX UI Operation UI System NCDCのUXデザインプロセスはこちら寄り その１ UX UX UI U I 業務向けUX/UIはこちら寄り その２ 10
11. NCDCのUXデザインプロセス UXデザインフェーズ UIデザインフェーズ UXとUIの違いが大切。 つまり 「機能」なのか「画面表現」 なのか？ ⽬的の確認・ 定義 ジャーニー マップ 作成 ワイヤーフレーム 作成 ユーザーテスト ペルソナ定義 優先順位 機能抽出 UX UX UI U I 業務向けUX/UIはこちら寄り その２ 11
12. 業務システムでよく聞くUX/UIの課題 「外回りの時に検索するので、マップ表示してタップ したら商談メモが見れるといいですね」 「受注No.から出荷状況まで見れると良いのですが、 このシステムでは出荷状況は見られないので、受注 No.から倉庫担当者を検索してメモ。次に出荷システ ムから担当者を検索して日付の合致する顧客を探 すしかないんです」 使用者の「使い勝手」に対する声 機能面の課題→UXの課題 機能面の課題→UXの課題 課題はどこか？ 12
13. 業務システムでよく聞くUX/UIの課題 「UIが使いにくい！！」 「月末に使用するのですが、毎回操作手順がわ からなくなって資料やわかる人を探します」 「「保存」と「確定」と「申請」のボタンの違 いがわかりにくく、本来「申請」まで必要なの に「確定」のままにしている場合が多い」 「入力項目が多く、かつ、途中保存ができないので、 一からやり直しになることが多くて大変です」 「検索するとなぜか欲しい情報が1件も出てこないの で検索を使わず目視で探してます」 「検索結果のソートがあれば便利なのですが・・・」 使用者の「使い勝手」に対する声 課題はどこか？ 画面表現の課題→UIの課題 画面表現の課題→UIの課題 機能面の課題→UXの課題 機能面の課題→UXの課題 機能面の課題→UXの課題 13
14. 「業務システムのUX/UIの正しいアプローチ」のポイント② l 課題及び意識すべき対象は「機能面」（UX）なのか？ 「画面表現」（UI）なのか？を明確に l 業務システムのUX/UIを正しく実現するためには、「機能面」の検討時点 から使用性（UX/UI）に関する機能を定義しておく必要がある l 業務システムはUIの裏側にビジネスロジックが隠れている。ビジネスロジックの出来が UXに大きく影響を与える 14
15. 業 務 シ ス テ ム の UX/ UI プ ロ ジ ェ ク ト UXデ ザ イ ン フ ェ ー ズ
16. UXデザインフェーズでの正しいアプローチ l 機能を抽出することがUXデザインフェーズでの目的 l 一般的なUXデザインのプロセスにこだわらなくても良い 16 ⽬的の確認・ 定義 ジャーニー マップ 作成 ワイヤーフレーム 作成 ユーザーテスト ペルソナ定義 優先順位 機能抽出 UXデザインフェーズ UIデザインフェーズ システム利用者 業務フロー 機能一覧 機能仕様 画面仕様を詳細 レベルで定義 • 表示件数上限設定 • 検索補助、入力補助 • ソート、フィルタ • 一次保存 • CSV出力、CSV読み込み • ・・・ • ・・・ 管理画面も どうするか？
17. 具体的な２つのアプローチ l 画面詳細仕様をどこかで定義しない限り実現はされない l 要件定義時に定義して進めるパターン l 要件定義時に定義するのは無理なので、使用性が低くても早めにリ リースし、ユーザの評価を受けて改善を繰り返すパターン 17 要件定義フェーズで画面詳細仕様まで定義する 要件定義フェーズでは画面詳細は 定義しない リリース後、改善要望を 集約してから改修 リリース後、改善要望 を集約してから改修 この時点では 使用性は低いこ とを受け入れる
18. 「業務システムのUX/UIの正しいアプローチ」のポイント ③ l 使用性に大きく影響を与えるUXデザインフェーズ（機能定義フェーズ） において「画面詳細仕様」まで定義することが必要 →定義していないものは実装されない l 「画面詳細仕様」をいつ、どうやって定義するかは２つのアプローチに 大別される。 どちらを採用するのかは「使用者」、「発注元」、「開発委託先」含め、 合意形成が必要。 l 発注元、開発委託先、共にUX/UIを重視した業務システムを初めて構築する 場合は特に注意が必要 18
19. 業 務 シ ス テ ム の UX/ UI プ ロ ジ ェ ク ト UI デ ザ イ ン フ ェ ー ズ
20. 業務向けシステムのUIデザインフェーズで重要なのは？ 20 ⽬的の確認・ 定義 ジャーニー マップ 作成 ワイヤーフレーム 作成 ユーザーテスト ペルソナ定義 優先順位 機能抽出 UXデザインフェーズ UIデザインフェーズ 業務システムならではの 実装工数含めたパターンや ベストプラクティスを もっておくと良い
21. 一覧表示パターン l コンシューマ向けの一般的なデザインの常識がNGの場合がある • マージン（隙間）が多く、実線が少なく、 おしゃれでスッキリしたUI • 情報量が多く、実線も多く、古臭いごちゃごちゃ したUIだが、一画面でできることが多い 21
22. よくある検索＆結果一覧表示（NG例） • マージン（隙間）が多く、実線が少なく、 おしゃれでスッキリしたUI • しかし、表示件数が少なく、多くの業務をこ なすためには何度もページを遷移させないと いけない 22
23. よくある検索＆結果一覧表示（Good例） • おしゃれでスッキリしたUIでありながら、表示件数も多く、 実行できる機能も多く実現できている 23
24. 業務システムの使用性で議論になるパターン l 使用性は高くなるが実装工数がかかる場合もある。費用対効果を考える必要あり 24 入力フォームの中で検索する ダイアログ画面がポップアッ プしてくるタイプ 入力文字単位で絞り込み ソート 列を非表示 列順を入れ替え 列の非表示状態を ブラウザ単位で保存しておきたい？ 列の非表示状態を ユーザー単位で保存しておきたい？
25. 「業務システムのUX/UIの正しいアプローチ」のポイント ④ l 業務向けシステム特有のUIのルールやパターンを理解しておく l 利便性の高いUI部品（検索等）は実装工数もかかることに注意。 利便性と工数のバランスが大切。 25
26. デザインシステムの活用 26
27. 従来よく使っていたのは「デザイン指示書」 l いままでは多くの場合、カラー、フォント、フォーム、ボタンなど、UIを構成す る要素を「デザイン指示書」として開発に引き継いでいた 27
28. これからは「デザインシステム」を活用する 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
29. 公開されているデザインシステムの例 l Salesforce.com Lightning Design System l IBM Carbon Design System 29
30. 自社用のデザインシステムを作ることも可能 l ガイドライン、コンポーネントライブラリ（部品群） を定義 l デザインシステムプラットフォームに登録、運用 l Storybook l Invision Design System Manager l Specify 30
31. フロント実装のトレンド 31
32. アーキテクチャの変遷とフロント実装のトレンド 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の標準化・フレームワークの成熟 • サーバーサイドがシンプルになったことで、再利用性 が上がる。かつサーバレス等のシンプルなアーキテク チャが可能に
33. 装置のUIについてのアプローチ 33
34. 装置のUIパターン l UXデザインプロセスは使わない l 非常に多くの操作を操作パターンで分類する→配置するが基本 34
35. 装置のUX/UI応用例 35
36. デザインザインパートナーの選び方 36
37. よくある問題「デザイナーがいない！」 l デザインがあまり重視されてこなかった業務システムの開発では、これまでデザ イナーがほとんど関与せず、エンジニアが適当にデザインしてしまうことも多 かったのでは？ l 近年、Webサービスやアプリの分野ではUX/UIデザインの重要性の認識が一般的 になり、業務システムの分野でもUX/UIデザインのニーズが高まってきている。 l しかし、社内にデザイナーがいない場合どうするのか… 業務システムのデザ インを外部に頼める ものなのか？ 頼むといっても、誰に？ WEB制作が主業務の デザイン会社に頼ん でもいいものか？ 37
38. どのようなパートナーを探すべきか l 結論からいうと、「業務システムの特性や、開発のこともよくわかっている デザイン会社」が望ましい。 l WEB制作会社などをあたれば、おそらく「見た目が整って美しい」「今っぽい」 画面デザインをつくってくれる会社はたくさんあります。 しかし、多面的に業務システムに最適なUX/UIを検討デザインできる会社は実は そう多くない。 ü どんなユーザーがどう いった目的で使うのか、 ユーザー像や業務フロー の深い理解 ü 見た目の良し悪しだけで なく実装や、他のシステ ムとの結合まで想定した 課題の抽出 難しいのは、たとえば… 38
39. システム開発の知見がUI検討時に役立った具体例① その場合は、AWS側でサマリーデータをつくってからデータ を渡せばデータ量を抑えられるので問題ないですよ。 必要であればAWS側の処理もアドバイスしますので、3年分の データを表示できるようにつくりましょう！ 本当はこの画面では3年分のデータをひとつのグラフにし て表示したいんだけど、3年分のデータをAWSから引っ 張ってくると表示が遅くなったり、データ量が増えて 課金が心配になるのでやめました。 当社のデザイナー ＆エンジニア お客さまの 画面設計担当者 39
40. システム開発の知見がUI検討時に役立った具体例② おそらく裏側でこういった処理をしてデータを引っ張ってく ることになるのではないか？ その場合、過去に似たような仕組みの実装をした経験から、 表示にかなり時間がかかってしまうリスクが考えられます。 要望にはできるだけ応えつつ、表示速度のリスクを回避して、 たとえばこういうUIに変えてはどうでしょうか？ 現場の話によると、膨大なデータの中からあれとそれと これとを持ってきて１画面でに同時に表示する必要があ る。 それを実現するためにこのようなワイヤーフレームにし ました。 当社のデザイナー ＆エンジニア お客さまの 画面設計担当者 40
41. まとめ 41
42. 業務システムのUX/UI改善に取り組むための正しいアプローチと技術トレンド l 課題及び意識すべき対象は「機能面」（UX）なのか？「画面表現」（UI）なのか？を 明確に l 使用性に大きく影響を与えるUXデザインフェーズ（機能定義フェーズ）において 「画面詳細仕様」も定義しないと実装されない l 「画面詳細仕様」をいつ、どうやって定義するかは２つのアプローチの大別される。どちらを 採用するのかは「使用者」、「発注元」、「開発委託先」含め、合意形成が必要 l 業務向けシステム特有のUIのルールやパターンを理解しておく l 利便性の高いUI部品（検索等）は実装工数もかかることに注意。利便性と工数のバラ ンスが大切。解決するためにはデザインシステムを構築することも有効な手段 l 技術の大きな転換期なので、最適なUX/UIはSPAを検討すべき 42
43. info@ncdc.co.jp www.ncdc.co.jp