Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Fixel Inc.
September 04, 2020
3.3k

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

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

Fixel Inc.

September 04, 2020
Tweet

More Decks by Fixel Inc.

Transcript

  1. 3 l システムの⾒た⽬が古いし、使いにくい l 単⾊で暗いイメージ l ユーザーが「怖くて触れないボタン」がある l 機能が⽭盾している l

    システムの使い⽅を教えるのが⼤変(マニュアルは5年前に更新が途絶えて。。。) l 多様なクライアント(特に声の⼤きい⼈)の依頼に答えて機能拡張し続けたら、シス テムがおかしくなった。 l どうにかしないといけないが、対応できないから⾒ないふりをしている。 l 開発を委託している会社にデザイン改善の話をしても、良い提案をしてくれない。 システムにおけるデザインの課題(500⼈以上のシステム責任者の声)
  2. 4 l システムの⾒た⽬が古いし、使いにくい Ø サービス︓売上低下、競合に負ける Ø 社内システム︓効率が悪い(作業の時間が増えるだけ) l 単⾊で暗いイメージ Ø

    気持ちの問題 ⾊使いなどによっては頭痛くなる l ユーザーが「怖くて触れないボタン」がある Ø 便利な機能も埋もれる システムにおけるデザインの課題→そのままにしておくと
  3. 5 l 機能が⽭盾している Ø 使い込んだ⼈にしか分からないシステムになっていく l システムの使い⽅を教えるのが⼤変(マニュアルは5年前に更新が途絶えて。。。) Ø 教育コスト増⼤、離職率が上がる l

    多様なクライアント(特に声の⼤きい⼈)の依頼に答えて機能拡張し続けたら、シス テムがおかしくなった。 Ø どんどん⽭盾したシステムになる l どうにかしないといけないが、対応できないから⾒ないふりをしている。 l 開発を委託している会社にデザイン改善の話をしても、良い提案をしてくれない。 Ø 臭いものにフタをしても、そのまま。いつも頭の⽚隅に課題として残る。 システムにおけるデザインの課題→そのままにしておくと
  4. 三越伊勢丹百貨店 企業データ ・業界︓百貨店 ・従業員数︓18,799⼈ ・売上︓1.2兆円(2019年) 解決したかった課題 ・顧客カルテは、バックヤードのPCか紙で管理していた。 ・カルテの管理を担当スタッフ依存から脱却 ・購買実績に基づきパーソナライズして提案をしたい 得られた効果

    ・iPadアプリ利用により、顧客情報をスタッフ間で共有 ・お客さんとアプリで一緒に購買履歴などを確認→提案 →満足度アップ ・伊勢丹テンプレートデザインに対して、各店舗でカスタマイズ ・伊勢丹で好評だったので、三越にも展開
  5. ヒューマンテクノロジーズ( KING OF TIME ) 企業データ ・業界︓企業向けクラウド勤怠管理サービス ・従業員数︓39⼈ (2015年⽀援時) ・売上︓9億円(2015年⽀援時)

    解決したかった課題 ・UI/UXの優れた他社サービスにコンペで負ける ・2004年にサービスイン以降⼤きなUXUIの変更していない。 →改善したいがデザインのことはよくわからない ・実は、過去に⾃社でUI/UXを⼩さく変えてみたら、ユーザから叱 られた。 得られた効果 ・単⽉の契約数が80%アップ ・売上は4年で約3倍に向上 ・Fixelの⽀援でデザイン部署の開設 ・デザイン改善で⾒た⽬は良くなったが⼀覧性が悪くなり改善依頼 →対応することで、既存ユーザも満⾜(B2Bならでは) Before After
  6. ヒューマンテクノロジーズ( 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/
  7. 生産装置メーカ 企業データ ・業界︓半導体・電⼦部品・その他 ・従業員数︓6,500⼈ ・売上︓2,200億円 解決したかった課題 ・ 古い⾒た⽬で使い勝⼿の悪い制御画⾯を刷新したい ・視線の移動が多いので操作が疲れる(ミスも起きやすい) 得られた効果(具体的な数値等は⾮公開)

    ・視線の移動が減ったため操作が容易になった。チェックも容易に ・営業がスクショを貼って提案するようになり、受注が増えた。 ※古い画⾯のときは、スクショを避けていた。。 ・社内の他の⽣産装置にも展開し、会社としてデザイン統⼀を進め ている。 Before After
  8. 3DCADメーカ 企業データ ・業界︓3D CADメーカ ・従業員数︓数百名 ・売上︓⾮公開 解決したかった課題 ・アイコンから出来ることの想像が難しい ・ショートカットを覚えないと使いこなすのが難しい 得られた効果(具体的な数値等は⾮公開)

    ・メインメニューサブメニューの構成を⾒直して使いやすく ・アイコンにも程よく説明を追記して、ビギナーユーザをフォロー ・今⾵のデザインを取り⼊れて積極販売が出来るようになった Before After
  9. 国内楽器メーカ(ギターマルチエフェクター) 企業データ ・業界︓楽器メーカー ・従業員数︓703⼈ ・売上︓⾮公開 解決したかった課題 ・ 競合に遅れずエフェクターのスマホアプリをリリースしたいが、 ノウハウが無く遅れた。後発であるならばUXデザインを 考慮したアプリにしたい。

    ・ブランド感を損なわないアプリにしたい。 得られた効果(具体的な項⽬は⾮公開) ・デザインを標準化することで継続的に展開可能な デザイン基盤を構築 ・ギターを持ったまま、スマホでチューニングが容易なアプリで ⾼評価を得た。
  10. 23 デザイン会社選定で考慮しないといけないポイント l アプリケーションのデザインが出来るか → Webサイトとアプリケーションのデザインは別のモノ l 実装に使われているライブラリの制限などを理解してデザインが出来るか →例えばMFCで作られている場合は、デザインに制限がかかる l

    システムの制限制約を考慮した上で情報設計やデザイン出来るか →ユーザに便利な⼀覧画⾯をデザインしても、表⽰に1分かかるなら現実的ではない l 再現可能なロジカルなデザインを出来るか →業務システムは属⼈化せずに、確かな仕事が出来るためのロジックでデザインが必須 デザイン会社に依頼したら解決するの︖
  11. 26 l 3rd party サービスプロバイダー向けのデザインガイド ラインを公開していたが、あまり効果がなかったのでデ ザインシステムの提供に⽅針転換 l Web、iOS、Android向けのデザインシステムを提供 l

    実装技術に依存しない、UIコンポーネントを提供 l Localization、markupやスタイルガイドラインまで提 供 例︓Salesforceのデザインシステム Salesforce Lightning Design System https://www.lightningdesignsystem.com
  12. 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
  13. 28 デザインシステムを媒体にしたコラボレーション デザイン システム ビジネス パーソン エンジニア デザイナー 機能追加・改善の際に、 判断の基準になる︕

    デザイン資産の 価値を定量化できる 再利⽤できる部品が 揃っている︕ 企業活動におけるデザイン活⽤の基盤
  14. 29 l 情シス l 社内システムを分かりやすく、使いやすくできる l システム間の使い勝⼿の⼀貫性を確保 l システム構築のコスト低減 l

    SIer l 再利⽤可能なデザイン及びフロントエンド部品の活⽤による⽣産性向上(25%以上) l ⼀貫性のあるデザインを⾼品質で提供することでお客様に対するサービス向上 l 他Sierに対する競争優位を占めることが可能になる l サービスプロバイダー l デザインの⼀貫性獲得によるブランド構築 l より迅速な改善・リリースが可能に l リリースを重ねてもデザインの⼀貫性や品質が落ちない l 今後のデザイントレンド変化に迅速に対応可能 各プレイヤーにおけるデザインシステムの価値
  15. 30 Fixelのデザインシステムの作成・運⽤⽀援サービス • デザインシステム公開 • デザインテーマ変更機能 • コメントなどフィードバック • 公開・編集などの権限管理

    • バージョン管理・履歴管理 UXHub デザインシステムプラットフォーム • 必要なガイドライン、UI部品が揃 っている • 複製&カスタマイズすることで新 しいデザインシステムを瞬時作 成可能 Fixel Design System 業務システム向け汎用的 デザインシステムのテンプレート • 多数の実績からのノウハウ • UXHubとFDSを有効活用し、費用 低減・工期短縮 プロフェッショナルサービス デザインシステム作成・運用支援 + + https://fixel.co.jp/lp/design-system/ https://uxhub.tokyo
  16. 32 UXデザインプロセス ※プロジェクトのゴール・状況に応じて上記のプロセスを適切に調整 反復 コンテキスト分析 ジャーニーマップ 作成 メンタルモデル 分析 ワイヤーフレーム

    作成 ユーザーテスト 評価と改善 ゴールと 範囲の設定 評価基準の検討 ペルソナ定義 計画フェーズ 分析フェーズ 実証フェーズ プロトタイピング
  17. 35 ペルソナ定義 ü 対象ユーザー像を具体的に定義 ü ユーザーの視点で物事を考えるための⼿法 ü 必要に応じて複数のペルソナを定義して使う v メインペルソナ、サブペルソナ、アンチペルソナ、エクストリームペルソナ等

    ü 定義の詳細度は製品特性に応じて決める v 業務システムの場合、ITリテラシー、年齢代、性別など、 かなり制限的な特徴の定義に留めることもあり ペルソナ定義 分析フェーズ [ユーザー] [ペルソナ] 佐藤さん 鈴⽊さん ⽞⼈さ ん A B C
  18. 37 コンテキスト分析 ü ペルソナが対象商品に接する 動機、場所、環境などを確認する ü 主に制約条件や考慮すべき環境要因を確認して 後のUI設計に反映する v [例]

    使⽤するデバイス、⼿袋で操作、操作時間、後続作業、 他の関連システムがある、など ü 後述するジャーニーマップ作成と並⾏可能 コンテキスト 分析 分析フェーズ 佐藤さん 鈴⽊さん ユーザーコンテキスト ユーザーコンテキスト 外部コンテキスト マーケット 競合 など
  19. 38 ジャーニーマップ作成 ü ペルソナが対象商品に接する以前から接した後までの 接点を時系列で描写する ü ユーザーと商品間の接点を分析し、 ユーザーの⾏動を理解することが第⼀の⽬的 ü 綺麗なものを作成することより、

    ⼿軽に作成して変更できるものにする ü 先のコンテキスト分析と、後述するメンタルモデルを 併記して作成することがある ジャーニーマップ 作成 分析フェーズ
  20. 42 メンタルモデル分析 ü ペルソナが対象商品に接する際に何を感じて、 何を考えているかを定義して分析する ü 表⾯的な動機からより根本的な動機を探ることで 本当のニーズを⾒つけだす v 5

    Why法に近い ü ペルソナの根本的な課題を解決する⼿段を検討する v イノベーションを起こし得るのはここ︕ ü リサーチを⾏い、定量的な分析をする⽅法もあるが、 多くの場合ジャーニーマップと併記しながら定性的 な分析を⾏う メンタルモデル 分析 分析フェーズ
  21. 44 ワイヤーフレーム作成・プロトタイピング ü 今までの作業で⽴てた仮説を検証するための必要最⼩限のUIを作る l 最初は紙とペンを使ったUIスケッチで ペーパープロトタイミングを⾏う l 最初はたくさんのアイデアを出して、 それを集約していくことを繰り返す

    l チーム内で簡易的なユーザーテストを繰り返しながら 短期間で成熟させて⾏く ü ある程度まとまった段階でユーザーテストで使えるプロトタイプにする ワイヤーフレーム 作成 実証フェーズ プロトタイピング
  22. 45 ユーザーテスト ü 仮説検証と問題発⾒の場 l ⽬的として価値をユーザーに提供できているかを確認 l ペルソナに近いユーザーを招き、役割劇、発話⽅などで⾏ う (必要に応じて録画・録⾳を⾏う。専⾨機関に依頼する⽅法もある)

    l テストユーザーは社内など⾝近なところから探すのも⼿︕ l 課題を⾒つけ、分析を⾏い、対応策を考える ü UXデザインでも、最も⼤事なタスク︕ ユーザーテスト 実証フェーズ
  23. 47 評価と改善 ü ユーザーテストの結果を分析し、必要な対応を⾏う l 仮説の誤りがあった場合は新しい仮説に基づいて再度検 討を⾏う l ノイズと情報の区分が⼤事 l

    [最初に定義したゴールを達成できているか] で反復の 必要性を決める(※現実的には予算や時間という制約を考慮する) 評価と改善 実証フェーズ 反復 コンテキスト分析 ジャーニーマップ 作成 メンタルモデル 分析 ワイヤーフレーム 作成 ユーザーテスト 評価と改善 ゴールと 範囲の設定 評価基準の検討 ペルソナ定義 計画フェーズ 分析フェーズ 実証フェーズ プロトタイピング [反復して完成度を⾼める] 最初から満点を狙わない。それは不可能︕
  24. 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 その他、事例紹介など
  25. 56 About us 社名 Fixel 株式会社 / Fixel Inc. 所在地

    〒100-6208 東京都千代⽥区丸の内1-11-1 パシフィックセンチュリープレイス丸の内8階 設⽴ 2019年8⽉1⽇ 資本⾦ 3,100万円 役員 代表取締役 CEO ⾦ 成哲 執⾏役員 COO 宮﨑 和樹 CDO 池本 哲也
  26. 57 Our Mission ”Make Design Easy” デザインを個⼈の感性に依存す る抽象的な⾏為から、 デザインをロジックで組み⽴て る客観的、かつ具体的なものに

    変える ことで、ビジネスや⽇常での活 ⽤度を上げる。 デザインの制作過程や成果物、 そして⻑期に渡るデザインの運 ⽤に⾄る、全ての⼿法を明確に 定義して提供することで、企 業・組織のデザイン導⼊を加速 させる。デザインを評価可能な 資産にすることで、ビジネスに おけるデザインの価値を最⼤化 する ビジネスとテクノロジーの観点 からデザインをリバースエンジ ニアリングし、「ノンデザイ ナーでも理解できるもの・再利 ⽤が容易なもの・価値を測定・ 評価できるもの」としてデザイ ンを再定義する
  27. 59 Fixelの4つのサービス l 既存サービス・システムのUI/UXデザイン改善 ü 既存システムの技術的制約を把握した上で改善を⽀援 l 新規サービス・ビジネスビルドアップ⽀援 ü 早期にモックアップを作りビジネス検証、並⾏して技術的な検証も実施

    l デザインシステムの制作と運⽤⽀援 UXHub ü 事業会社のデザインシステム作成⽀援から、SIerの⽀援まで l 事業会社・SIerのデザインパートナーとして継続的なサービスの提供