Tweet
Tweet

Slide 1

Slide 1 text

業務システムのUX/UI改善のための 正しいアプローチとは︖ 2 0 2 0 / 0 2 / 1 9 N C D C 株 式 会 社 早 津 俊 秀

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Copyright © NCDC Co., Ltd. All rights reserved. NCDCのサービスの特徴 4 ビジネスモデルのデザイン PoC・検証 システム・インテグレーション ワークショップ中⼼にビジネスモデル からUXデザインまでを迅速に⾏いま す。組織横断、会社横断のファシリ テーションも得意です。 モックによる検証から現地検証まで、 PoCをその⽬的に応じて企画・実施 します センサーから、AI、クラウド、 モバイルの標準技術まで、多 くのテクノロジーをインテグ レーションします ビジネスモデルの検討からデザインによる可視化、 先端テクノロジーの組み合わせでシステムを構築します

Slide 5

Slide 5 text

UXとUXデザイン

Slide 6

Slide 6 text

Copyright © NCDC Co., Ltd. All rights reserved. UXとUXデザイン l UX • User Experience • 利⽤者の経験、製品・サービスを使⽤する際の印象や体験 l UXデザイン • UXをデザインする。UXを設計する。UXを実現するための仕組みや 施策を考える l 最適な「UX」を実現するために「UXデザイン」を⾏う 6

Slide 7

Slide 7 text

Copyright © NCDC Co., Ltd. All rights reserved. UXの構成要素 7 http://www.jjg.net/elements/pdf/elements.pdf UX UI （体験） （使⽤性） ⽬的・ニーズ 機能 最近はUXとUIは分けて考える。 UIはUXを実現する⼀要素 少し古い時代の定義

Slide 8

Slide 8 text

Copyright © NCDC Co., Ltd. All rights reserved. NCDCのUXデザインプロセス 8 ⽬的の確認・ 定義 ジャーニー マップ 作成 ワイヤーフレーム 作成 ユーザーテスト ペルソナ定義 UXフェーズ UIフェーズ 優先順位 機能抽出 UI UX

Slide 9

Slide 9 text

Copyright © NCDC Co., Ltd. All rights reserved. 業務向けシステムのUX/UIプロセスは？ 9 ⽬的の確認・ 定義 ジャーニー マップ 作成 ワイヤーフレーム 作成 ユーザーテスト ペルソナ定義 UXフェーズ UIフェーズ 優先順位 機能抽出 システム の⽬的 業務フロー ターゲット ユーザー 要件確定 ワイヤーフレーム 作成 ユーザーテスト ⼀ 般 的 な UX デ ザ イ ン 業 務 向 け UX デ ザ イ ン ⼀般的な業務システム開発のプロセスと同じ

Slide 10

Slide 10 text

Copyright © NCDC Co., Ltd. All rights reserved. NCDCのUXデザイン（ジャーニーマップ） l ジャーニーマップ • ペルソナになりきって、思考や⾏動のフローを可視化し、その時の Insight（本⾳）を考えます。 業務フロー等、業務要件をヒアリング等によって定義すればよい 10

Slide 11

Slide 11 text

Copyright © NCDC Co., Ltd. All rights reserved. NCDCのUXデザイン（ペルソナ） l ペルソナ • UXの視点で考えるため、「個の思考」を連想できるユーザーを定義 します 使⽤者が明確の場合がほとんどなので、ターゲットユーザー として定義すればよい。 11

Slide 12

Slide 12 text

Copyright © NCDC Co., Ltd. All rights reserved. 業務向けシステムのUX/UIで重要なのは？ 12 ⽬的の確認・ 定義 ジャーニー マップ 作成 ワイヤーフレーム 作成 ユーザーテスト ペルソナ定義 UXフェーズ UIフェーズ 優先順位 機能抽出 システム の⽬的 業務フロー ターゲット ユーザー 要件確定 ワイヤーフレーム 作成 ユーザーテスト ⼀ 般 的 な UX デ ザ イ ン 業 務 向 け UX デ ザ イ ン ここのベストプラクティス・ デザインパターンが重要

Slide 13

Slide 13 text

Copyright © NCDC Co., Ltd. All rights reserved. 業務向けUX / UIのポイント l ⼀般的なUXデザインのプロセスに引っ張られてはいけない l 業務向けならではのUIパターン・ベストプラクティスを 持つ 13

Slide 14

Slide 14 text

業務向けUI特有のデザインパターン

Slide 15

Slide 15 text

Copyright © NCDC Co., Ltd. All rights reserved. 一覧表示 l 業務向けとしてはマージンとりすぎ l ⼀画⾯での検索結果の表⽰が少なすぎ ☓ ☓ 15

Slide 16

Slide 16 text

Copyright © NCDC Co., Ltd. All rights reserved. 一覧表示 l ゆとりのあるマージンよりも⼀画⾯での表⽰量 l 検索結果をできるだけスクロールしないで表⽰ ○ ○ 16

Slide 17

Slide 17 text

Copyright © NCDC Co., Ltd. All rights reserved. 検索画面 l グーグルのような⾃由検索の機能がほしい︕ • しかし、検索結果はドキュメント検索ではなく、構造化された データ項⽬だったりする 17 ☓

Slide 18

Slide 18 text

Copyright © NCDC Co., Ltd. All rights reserved. 検索画面 l 業務で使う検索画⾯は項⽬ごとの検索フォームがあったほ うが効果的な場合が多い 18 ○

Slide 19

Slide 19 text

Copyright © NCDC Co., Ltd. All rights reserved. 装置のUIパターン l UXデザインプロセスは使わない l ⾮常に多くの操作を操作パターンで分類する→配置する 19

Slide 20

Slide 20 text

Copyright © NCDC Co., Ltd. All rights reserved. 業務向けUX / UIのポイント l ⼀般的なUXデザインのプロセスに引っ張られてはいけない l 業務向けならではのUIパターン・ベストプラクティスを 持つ 20

Slide 21

Slide 21 text

より具体的なアプローチ

Slide 22

Slide 22 text

Copyright © NCDC Co., Ltd. All rights reserved. Step1:ガイドラインを整備する l カラー、フォント、フォーム、ボタンなど、UIを構成する要素を定義する 22

Slide 23

Slide 23 text

Copyright © NCDC Co., Ltd. All rights reserved. Step1:ガイドラインを整備する l カラー、フォント、フォーム、ボタンなど、UIを構成する要素を定義する 23

Slide 24

Slide 24 text

Copyright © NCDC Co., Ltd. All rights reserved. Step2:デザインシステムを活用する 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/ 24

Slide 25

Slide 25 text

Copyright © NCDC Co., Ltd. All rights reserved. Step2:デザインシステムを活用する l Salesforce.com Lightning Design System 25

Slide 26

Slide 26 text

Copyright © NCDC Co., Ltd. All rights reserved. Step2:デザインシステムを活用する l IBM Carbon Design System 26

Slide 27

Slide 27 text

Copyright © NCDC Co., Ltd. All rights reserved. Step3：自社のデザインシステムを作る・運用する l ガイドライン、コンポーネントライブラリ（部品群） を定義 l デザインシステムプラットフォームに登録、運⽤ l デザインシステムプラットフォーム • Storybook • Invision Design System Manager • Specify 27

Slide 28

Slide 28 text

デザインザインパートナーの選び⽅

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

まとめ

Slide 34

Slide 34 text

Copyright © NCDC Co., Ltd. All rights reserved. 業務システムのUX/UI改善のための 正しいアプローチとは？ l ⼀般的なUXデザインプロセスに惑わされないこと l UXとUIは完全に別物として考える • 業務システムならではのUIパターンを考える l ガイドラインからデザインシステムに⾄るまで、 UIパターンやUIコンポーネントを定義・運⽤する l 業務向けのUIは実績が豊富で、実装技術がわかっている 会社をパートナーとして選ぶ 34

Slide 35

Slide 35 text

Copyright © NCDC Co., Ltd. All rights reserved. 35 ご相談はお気軽に︕ [email protected] www.ncdc.co.jp

Slide 36

Slide 36 text

No content