業務システムは使いにくいもの？当たり前をUXデザインで変えた時の効果を事例を交えて紹介

9/4開催の業務システムは使いにくいもの？当たり前をUXデザインで変えた時の効果を事例を交えて紹介ウェビナーの資料です。
https://fixel.co.jp/news/webinar002/

Transcript

1. 2020/09/04 Fixel株式会社 COO宮崎和樹 業務システムは使いにくいもの︖ 当たり前をUXデザインで変えた時 の効果を事例を交えて紹介
2. 2 l システムにおけるデザインの課題（500⼈以上のシステム責任者の声） l デザイン改善事例を通してUXデザインの効果紹介 l なぜ、業務システムは使いにくい︖ l デザイン会社に依頼したら解決できるのか︖ l UXデザインのプロジェクトはどうやってすすめる︖ l UXデザインプロジェクトの成果物（納品物）は何がある︖ l まとめ アジェンダ
3. 3 l システムの⾒た⽬が古いし、使いにくい l 単⾊で暗いイメージ l ユーザーが「怖くて触れないボタン」がある l 機能が⽭盾している l システムの使い⽅を教えるのが⼤変（マニュアルは5年前に更新が途絶えて。。。） l 多様なクライアント（特に声の⼤きい⼈）の依頼に答えて機能拡張し続けたら、シス テムがおかしくなった。 l どうにかしないといけないが、対応できないから⾒ないふりをしている。 l 開発を委託している会社にデザイン改善の話をしても、良い提案をしてくれない。 システムにおけるデザインの課題（500⼈以上のシステム責任者の声）
4. 4 l システムの⾒た⽬が古いし、使いにくい Ø サービス︓売上低下、競合に負ける Ø 社内システム︓効率が悪い（作業の時間が増えるだけ） l 単⾊で暗いイメージ Ø 気持ちの問題 ⾊使いなどによっては頭痛くなる l ユーザーが「怖くて触れないボタン」がある Ø 便利な機能も埋もれる システムにおけるデザインの課題→そのままにしておくと
5. 5 l 機能が⽭盾している Ø 使い込んだ⼈にしか分からないシステムになっていく l システムの使い⽅を教えるのが⼤変（マニュアルは5年前に更新が途絶えて。。。） Ø 教育コスト増⼤、離職率が上がる l 多様なクライアント（特に声の⼤きい⼈）の依頼に答えて機能拡張し続けたら、シス テムがおかしくなった。 Ø どんどん⽭盾したシステムになる l どうにかしないといけないが、対応できないから⾒ないふりをしている。 l 開発を委託している会社にデザイン改善の話をしても、良い提案をしてくれない。 Ø 臭いものにフタをしても、そのまま。いつも頭の⽚隅に課題として残る。 システムにおけるデザインの課題→そのままにしておくと
6. 事例紹介
7. 三越伊勢丹百貨店 企業データ ・業界︓百貨店 ・従業員数︓18,799⼈ ・売上︓1.2兆円（2019年） 解決したかった課題 ・顧客カルテは、バックヤードのPCか紙で管理していた。 ・カルテの管理を担当スタッフ依存から脱却 ・購買実績に基づきパーソナライズして提案をしたい 得られた効果 ・iPadアプリ利用により、顧客情報をスタッフ間で共有 ・お客さんとアプリで一緒に購買履歴などを確認→提案 →満足度アップ ・伊勢丹テンプレートデザインに対して、各店舗でカスタマイズ ・伊勢丹で好評だったので、三越にも展開
9. ヒューマンテクノロジーズ（ KING OF TIME ） 企業データ ・業界︓企業向けクラウド勤怠管理サービス ・従業員数︓39⼈ （2015年⽀援時） ・売上︓9億円（2015年⽀援時） 解決したかった課題 ・UI/UXの優れた他社サービスにコンペで負ける ・2004年にサービスイン以降⼤きなUXUIの変更していない。 →改善したいがデザインのことはよくわからない ・実は、過去に⾃社でUI/UXを⼩さく変えてみたら、ユーザから叱 られた。 得られた効果 ・単⽉の契約数が80％アップ ・売上は4年で約3倍に向上 ・Fixelの⽀援でデザイン部署の開設 ・デザイン改善で⾒た⽬は良くなったが⼀覧性が悪くなり改善依頼 →対応することで、既存ユーザも満⾜（B2Bならでは） Before After
10. ヒューマンテクノロジーズ（ KING OF TIME ） 企業データ ・業界︓企業向けクラウド勤怠管理サービス ・従業員数︓39⼈ （2015年⽀援時） ・売上︓9億円（2015年⽀援時） 解決したかった課題 ・UI/UXの優れた他社サービスにコンペで負ける ・2004年にサービスイン以降⼤きなUXUIの変更していない。 →改善したいがデザインのことはよくわからない ・実は、過去に⾃社でUI/UXを⼩さく変えてみたら、ユーザから叱 られた。 得られた効果 ・単月の契約数が80％アップ ・売上は4年で約3倍に向上 ・Fixelの支援でデザイン部署の開設 ・デザイン改善で見た目は良くなったが一覧性が悪くなり改善依頼 →対応することで、既存ユーザも満足（B2Bならでは） HT社サイトより引用：https://www.h-t.co.jp/recruit/company/
11. 11 メニューに強弱 がない トップ画⾯に なくてもよい 情報 Todoが⼩さく てわかりずらい
12. 12 よく使う機能 はアクセスし やすい場所へ 配置 ToDoをシンプ ルで分かりや すくした 他の機能は 中へ隠した
13. ① ② ③
14. 住友電工（ 楽々Workflow） 企業データ ・業界︓⾮鉄⾦属 ・従業員数︓272,796⼈ ・売上︓3兆1779億円 解決したかった課題 ・アメリカの関連会社へ本システムの導⼊を承諾させる（内部統 制） ・説得するためには、2週間でスマホとwebのデザイン改善 得られた効果 ・アメリカの関連会社が導⼊を決定 ・中国など他国への販売が加速 Before After
17. コールセンター 資料では⾮公開
18. モータ制御 企業データ ・業界︓モータ ・従業員数︓3,000名 ・売上︓600億円 解決したかった課題 ・単軸制御から多軸制御にソフトウェアをアップグレードが必要 ・⾒た⽬が古い 得られた効果（具体的な数値等は⾮公開） ・単軸の操作感で多軸を制御を可能としてユーザを混乱させない ・時代に合った画⾯で古さを感じさせない Before After
19. 生産装置メーカ 企業データ ・業界︓半導体・電⼦部品・その他 ・従業員数︓6,500⼈ ・売上︓2,200億円 解決したかった課題 ・ 古い⾒た⽬で使い勝⼿の悪い制御画⾯を刷新したい ・視線の移動が多いので操作が疲れる（ミスも起きやすい） 得られた効果（具体的な数値等は⾮公開） ・視線の移動が減ったため操作が容易になった。チェックも容易に ・営業がスクショを貼って提案するようになり、受注が増えた。 ※古い画⾯のときは、スクショを避けていた。。 ・社内の他の⽣産装置にも展開し、会社としてデザイン統⼀を進め ている。 Before After
20. 3DCADメーカ 企業データ ・業界︓3D CADメーカ ・従業員数︓数百名 ・売上︓⾮公開 解決したかった課題 ・アイコンから出来ることの想像が難しい ・ショートカットを覚えないと使いこなすのが難しい 得られた効果（具体的な数値等は⾮公開） ・メインメニューサブメニューの構成を⾒直して使いやすく ・アイコンにも程よく説明を追記して、ビギナーユーザをフォロー ・今⾵のデザインを取り⼊れて積極販売が出来るようになった Before After
21. 国内楽器メーカ（ギターマルチエフェクター） 企業データ ・業界︓楽器メーカー ・従業員数︓703⼈ ・売上︓⾮公開 解決したかった課題 ・ 競合に遅れずエフェクターのスマホアプリをリリースしたいが、 ノウハウが無く遅れた。後発であるならばUXデザインを 考慮したアプリにしたい。 ・ブランド感を損なわないアプリにしたい。 得られた効果（具体的な項⽬は⾮公開） ・デザインを標準化することで継続的に展開可能な デザイン基盤を構築 ・ギターを持ったまま、スマホでチューニングが容易なアプリで ⾼評価を得た。
22. 22 答えは簡単 デザインを考慮しないで エンジニアが配置しただけのシステムだから なぜ、業務システムは使いにくい︖
23. 23 デザイン会社選定で考慮しないといけないポイント l アプリケーションのデザインが出来るか → Webサイトとアプリケーションのデザインは別のモノ l 実装に使われているライブラリの制限などを理解してデザインが出来るか →例えばMFCで作られている場合は、デザインに制限がかかる l システムの制限制約を考慮した上で情報設計やデザイン出来るか →ユーザに便利な⼀覧画⾯をデザインしても、表⽰に1分かかるなら現実的ではない l 再現可能なロジカルなデザインを出来るか →業務システムは属⼈化せずに、確かな仕事が出来るためのロジックでデザインが必須 デザイン会社に依頼したら解決するの︖
24. 24 属⼈化しないために Design System
25. 25 デザインシステムとは デザインシステム デザインガイドライン UIコンポーネント （デザイン＆コード） 各種リソース
26. 26 l 3rd party サービスプロバイダー向けのデザインガイド ラインを公開していたが、あまり効果がなかったのでデ ザインシステムの提供に⽅針転換 l Web、iOS、Android向けのデザインシステムを提供 l 実装技術に依存しない、UIコンポーネントを提供 l Localization、markupやスタイルガイドラインまで提 供 例︓Salesforceのデザインシステム Salesforce Lightning Design System https://www.lightningdesignsystem.com
27. 27 l Bluemix、Watson向けのデザインシステム作成後、 全社向けのデザインシステムに発展 l SketchファイルによるUI Design KitとComponent Library Kitを提供 l Vanila.jsとReact.js、Vue.js、AngularJS向けの実装 を提供 例︓IBMのデザインシステム IBM Carbon Design System http://carbondesignsystem.com
28. 28 デザインシステムを媒体にしたコラボレーション デザイン システム ビジネス パーソン エンジニア デザイナー 機能追加・改善の際に、 判断の基準になる︕ デザイン資産の 価値を定量化できる 再利⽤できる部品が 揃っている︕ 企業活動におけるデザイン活⽤の基盤
29. 29 l 情シス l 社内システムを分かりやすく、使いやすくできる l システム間の使い勝⼿の⼀貫性を確保 l システム構築のコスト低減 l SIer l 再利⽤可能なデザイン及びフロントエンド部品の活⽤による⽣産性向上（２５％以上） l ⼀貫性のあるデザインを⾼品質で提供することでお客様に対するサービス向上 l 他Sierに対する競争優位を占めることが可能になる l サービスプロバイダー l デザインの⼀貫性獲得によるブランド構築 l より迅速な改善・リリースが可能に l リリースを重ねてもデザインの⼀貫性や品質が落ちない l 今後のデザイントレンド変化に迅速に対応可能 各プレイヤーにおけるデザインシステムの価値
30. 30 Fixelのデザインシステムの作成・運⽤⽀援サービス • デザインシステム公開 • デザインテーマ変更機能 • コメントなどフィードバック • 公開・編集などの権限管理 • バージョン管理・履歴管理 UXHub デザインシステムプラットフォーム • 必要なガイドライン、UI部品が揃 っている • 複製&カスタマイズすることで新 しいデザインシステムを瞬時作 成可能 Fixel Design System 業務システム向け汎用的 デザインシステムのテンプレート • 多数の実績からのノウハウ • UXHubとFDSを有効活用し、費用 低減・工期短縮 プロフェッショナルサービス デザインシステム作成・運用支援 ＋ ＋ https://fixel.co.jp/lp/design-system/ https://uxhub.tokyo
31. 実際にどうやって進めるの︖
32. 32 UXデザインプロセス ※プロジェクトのゴール・状況に応じて上記のプロセスを適切に調整 反復 コンテキスト分析 ジャーニーマップ 作成 メンタルモデル 分析 ワイヤーフレーム 作成 ユーザーテスト 評価と改善 ゴールと 範囲の設定 評価基準の検討 ペルソナ定義 計画フェーズ 分析フェーズ 実証フェーズ プロトタイピング
33. 33 [UX Pyramid] ゴールと範囲の設定 ü プロジェクトの⽬的と対象範囲を明⽂化する ü UXデザインで達成すべき 使⽤者経験の特徴とレベルを決める ü 必要に応じてプロジェクトの範囲を⾒直す ゴールと 範囲の設定 計画フェーズ [UX Honeycomb]
34. 34 評価基準の検討 ü UXデザイン作業の成果を数字で測ることができる項⽬で定義する ü ⽐較のために現在のデータを取得し、⽬標値を定義する ü 必要なデータの取得ができていない場合は データ取得⽅法を追加することを検討 ü 価格変更や機能追加など、UXデザイン以外の影響要素を可能な限り分離した ⽅がより厳密な評価測定ができる 評価基準の検討 計画フェーズ
35. 35 ペルソナ定義 ü 対象ユーザー像を具体的に定義 ü ユーザーの視点で物事を考えるための⼿法 ü 必要に応じて複数のペルソナを定義して使う v メインペルソナ、サブペルソナ、アンチペルソナ、エクストリームペルソナ等 ü 定義の詳細度は製品特性に応じて決める v 業務システムの場合、ITリテラシー、年齢代、性別など、 かなり制限的な特徴の定義に留めることもあり ペルソナ定義 分析フェーズ [ユーザー] [ペルソナ] 佐藤さん 鈴⽊さん ⽞⼈さ ん A B C
36. 36 ペルソナの例 ペルソナ定義 分析フェーズ
37. 37 コンテキスト分析 ü ペルソナが対象商品に接する 動機、場所、環境などを確認する ü 主に制約条件や考慮すべき環境要因を確認して 後のUI設計に反映する v [例] 使⽤するデバイス、⼿袋で操作、操作時間、後続作業、 他の関連システムがある、など ü 後述するジャーニーマップ作成と並⾏可能 コンテキスト 分析 分析フェーズ 佐藤さん 鈴⽊さん ユーザーコンテキスト ユーザーコンテキスト 外部コンテキスト マーケット 競合 など
38. 38 ジャーニーマップ作成 ü ペルソナが対象商品に接する以前から接した後までの 接点を時系列で描写する ü ユーザーと商品間の接点を分析し、 ユーザーの⾏動を理解することが第⼀の⽬的 ü 綺麗なものを作成することより、 ⼿軽に作成して変更できるものにする ü 先のコンテキスト分析と、後述するメンタルモデルを 併記して作成することがある ジャーニーマップ 作成 分析フェーズ
39. 39 ジャーニーマップ作成 よく⾒かけるジャーニーマップの例 ジャーニーマップ 作成 分析フェーズ
40. 40 ジャーニーマップ作成 実⽤的なジャーニーマップの例 ジャーニーマップ 作成 分析フェーズ ポストイットを使い素早く検討︕ デジタル化して整理
41. 41 ジャーニーマップの例 ジャーニーマップ 作成 分析フェーズ 資料では⾮公開
42. 42 メンタルモデル分析 ü ペルソナが対象商品に接する際に何を感じて、 何を考えているかを定義して分析する ü 表⾯的な動機からより根本的な動機を探ることで 本当のニーズを⾒つけだす v 5 Why法に近い ü ペルソナの根本的な課題を解決する⼿段を検討する v イノベーションを起こし得るのはここ︕ ü リサーチを⾏い、定量的な分析をする⽅法もあるが、 多くの場合ジャーニーマップと併記しながら定性的 な分析を⾏う メンタルモデル 分析 分析フェーズ
43. 43 メンタルモデル分析 ü ペルソナが対象商品に接する際に何を感じて、 何を考えているかを定義して分析する メンタルモデル 分析 分析フェーズ 定量的な分析例 ジャーニーマップに併記して分析する例 ジャーニーマップ メンタルモデル
44. 44 ワイヤーフレーム作成・プロトタイピング ü 今までの作業で⽴てた仮説を検証するための必要最⼩限のUIを作る l 最初は紙とペンを使ったUIスケッチで ペーパープロトタイミングを⾏う l 最初はたくさんのアイデアを出して、 それを集約していくことを繰り返す l チーム内で簡易的なユーザーテストを繰り返しながら 短期間で成熟させて⾏く ü ある程度まとまった段階でユーザーテストで使えるプロトタイプにする ワイヤーフレーム 作成 実証フェーズ プロトタイピング
45. 45 ユーザーテスト ü 仮説検証と問題発⾒の場 l ⽬的として価値をユーザーに提供できているかを確認 l ペルソナに近いユーザーを招き、役割劇、発話⽅などで⾏ う (必要に応じて録画・録⾳を⾏う。専⾨機関に依頼する⽅法もある) l テストユーザーは社内など⾝近なところから探すのも⼿︕ l 課題を⾒つけ、分析を⾏い、対応策を考える ü UXデザインでも、最も⼤事なタスク︕ ユーザーテスト 実証フェーズ
46. 46 ユーザーテスト ü プロトタイピングツールを有効活⽤する l コードを書かなくてもユーザーに疑似体験をさせることができる l 迅速に新しい案を試すことができる ユーザーテスト 実証フェーズ
47. 47 評価と改善 ü ユーザーテストの結果を分析し、必要な対応を⾏う l 仮説の誤りがあった場合は新しい仮説に基づいて再度検 討を⾏う l ノイズと情報の区分が⼤事 l [最初に定義したゴールを達成できているか] で反復の 必要性を決める（※現実的には予算や時間という制約を考慮する） 評価と改善 実証フェーズ 反復 コンテキスト分析 ジャーニーマップ 作成 メンタルモデル 分析 ワイヤーフレーム 作成 ユーザーテスト 評価と改善 ゴールと 範囲の設定 評価基準の検討 ペルソナ定義 計画フェーズ 分析フェーズ 実証フェーズ プロトタイピング [反復して完成度を⾼める] 最初から満点を狙わない。それは不可能︕
48. 成果物はどんなものがあるの︖
49. 49 UIデザイン成果物の例 1. ビジュアルデザイン 画⾯デザインの仕上がりイメージ
50. 50 UIデザイン成果物の例 2. デザインガイドライン UIデザインの各部品ごとのデザイン仕様とルールをまとめたもの
51. 51 UIデザイン成果物の例 3. デザイン指⽰書 画⾯ごとのデザイン仕様（要素のサイズや⾊、余⽩など）を記したもの
52. 52 なぜ今、UI/UXに投資すべきか︖ 品質 時間 初回UXデザインプロジェクトの 効果が最も⼤きい フェーズ 1 フェーズ 2 Quality of UX
53. 53 まとめ l 業務システムはデザインされていないから、使いやすくない l ユーザ⽬線で、少しだけでもデザインするだけで効果は絶⼤ l 開発のことを考慮しながらデザインしないと、絵に描いた餅になる。
54. 54 今後計画しているウェビナー（セミナー）の内容 l ⾮デザイナーの為の l UXデザイン l ビジュアルデザイン l UIデザイン l サービスデザイン l プロトタイピング l 業務システムのデザイン l デザインとITをマージしたUX Driven Processes l デザインを囲むコミュニケーション l 適切なフィードバック⽅法 l デザインへのインプット l ITへのアウトプット l デザインのROI l UXHubとFixel Design Systemの詳細 l その他、事例紹介など
55. Fixel株式会社のご紹介 Fix + Pixel = Fixel We take care of every pixels in your System.
56. 56 About us 社名 Fixel 株式会社 / Fixel Inc. 所在地 〒100-6208 東京都千代⽥区丸の内1-11-1 パシフィックセンチュリープレイス丸の内８階 設⽴ 2019年8⽉1⽇ 資本⾦ 3,100万円 役員 代表取締役 CEO ⾦ 成哲 執⾏役員 COO 宮﨑 和樹 CDO 池本 哲也
57. 57 Our Mission ”Make Design Easy” デザインを個⼈の感性に依存す る抽象的な⾏為から、 デザインをロジックで組み⽴て る客観的、かつ具体的なものに 変える ことで、ビジネスや⽇常での活 ⽤度を上げる。 デザインの制作過程や成果物、 そして⻑期に渡るデザインの運 ⽤に⾄る、全ての⼿法を明確に 定義して提供することで、企 業・組織のデザイン導⼊を加速 させる。デザインを評価可能な 資産にすることで、ビジネスに おけるデザインの価値を最⼤化 する ビジネスとテクノロジーの観点 からデザインをリバースエンジ ニアリングし、「ノンデザイ ナーでも理解できるもの・再利 ⽤が容易なもの・価値を測定・ 評価できるもの」としてデザイ ンを再定義する
58. 58 Position of Fixel
59. 59 Fixelの4つのサービス l 既存サービス・システムのUI/UXデザイン改善 ü 既存システムの技術的制約を把握した上で改善を⽀援 l 新規サービス・ビジネスビルドアップ⽀援 ü 早期にモックアップを作りビジネス検証、並⾏して技術的な検証も実施 l デザインシステムの制作と運⽤⽀援 UXHub ü 事業会社のデザインシステム作成⽀援から、SIerの⽀援まで l 事業会社・SIerのデザインパートナーとして継続的なサービスの提供
60. 60 Fixelのサービス リモートデザインサービス 全てのデザイン⽀援をオンラインで⾏うことで、オフラインに⽐べ、より リアルタイム、迅速、柔軟な対応 新サービス⽴ち上げ⽀援サービス 全デザインシンキング、UXデザインなど、デザインの⼿法を⽤いて貴社 の新しいビジネスモデルを迅速に検証し事業化する https://fixel.co.jp/lp/remote-design https://fixel.co.jp/lp/new-services
61. 61 Fixelのサービス 製造業向けUX/UIデザインサービス 組み込みの制御パネルや稼働モニタ、設計ツールなど、 製造業の現場で使われるシステムのUX/UIデザインや開発を⽀援 クラウドを活⽤したサービス開発 AWSなどのマイクロサービスを疎結合させたシステムの開発サービス。 ⾼速な開発が可能。 https://fixel.co.jp/lp/manufacturing https://fixel.co.jp/lp/cloud-si
62. 62 Fixelのサービス 業務システムのUI/UXデザイン改善 仕事に使われるシステムの⾒た⽬、 効率・使い勝⼿を格段に向上 デザインシステム作成・運⽤サービス デザインシステムの設計から制作・運⽤の⽀援はもちろん 実装技術の統合などもお⼿伝い致します。 https://fixel-ux.studio.design https://fixel.co.jp/lp/design-system/
63. 63 Fixelのサービス UXHub デザインシステムの作成と運⽤の⼿間を限りなく「ゼロ」に︕ デザインシステム構築・運⽤プラットフォーム https://uxhub.tokyo/
64. MAKE DESIGN EASY