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

【SBTechFestival2022】SCM_店舗在庫管理領域_UI改善_設計意図説明資料【...

RyokaNAKAI
January 17, 2022

 【SBTechFestival2022】SCM_店舗在庫管理領域_UI改善_設計意図説明資料【配布用】

モデルベースユーザインタフェースデザイン

ソフトバンク株式会社 テクノロジーユニット コンシューマIT本部 業務支援システム統括部 業務支援システム部 SCM推進課

中井 崚日

ユーザインタフェース(UI)の世界では自己の感性に則った論理的な根拠の乏しい設計が散見される。感性に則った設計は属人的な側面があり、引継ぎが困難である上に、クライアントへの説得力が乏しい。
この問題を解決する手法として、Goodpatch社およびソシオメディア社が提唱している「モデルベースUIデザイン」がある。モデルベースUIデザインとはドメイン(解決領域)を概念モデル図に落とし込み、概念モデルに対してUIを設計する手法である。本手法はUI界のDDD(エリック・エヴァンスのドメイン駆動設計)と言える。
DDDの知見や認知心理学における意味ネットワークモデルを活用したSoftbank流モデルベースUIデザインの実践プロセスを語る。本手法の実践により、仕様変更に強く非属人的なUIの実現が可能である。

【スライド】
フルバージョン
https://www.slideshare.net/ssuser7ad47f/sb-tech-festival2022scmui/

ティザーバージョン
https://www.slideshare.net/ssuser7ad47f/sb-tech-festival2022ui/ssuser7ad47f/sb-tech-festival2022ui

【動画】
改善前の物流管理システムのUI
https://youtu.be/CSGVquqC4xg

改善後の物流管理システムのUI
https://youtu.be/BILaXrb1QVE

【イベント情報】
https://www.softbank.jp/biz/events/techfestival-deeptech-2022/
https://sbtechnight.connpass.com/event/230085/

-----

Model-Based User Interface Design

Business Support System Division, Business Support System Management Department, Consumer IT Division, Technology Unit, Softbank Corp.

Ryoka NAKAI

In the world of user interface (UI), there are many designs that are based on one's own sensibility and have little logical basis. In the world of user interface (UI), there are many designs which are based on our sensibility and have little logical basis. The designs based on our sensibility are not only difficult to transfer but also hard to convince clients.
Goodpatch and Sociomedia have proposed "Model-Based UI Design" as a solution to this problem. Model-Based UI Design is a method of designing UI based on a conceptual model of a domain (solution domain). This method can be called the DDD (Eric Evans' Domain Driven Design) of the UI world.
I will talk about the practical process of Softbank's model-based UI design using the knowledge of DDD and the semantic network model in cognitive psychology. By practicing this method, it is possible to realize a non-personal UI that is resistant to specification changes.

RyokaNAKAI

January 17, 2022
Tweet

More Decks by RyokaNAKAI

Other Decks in Design

Transcript

  1. 2

  2. もくじ 物流管理システムSCMOne 店舗在庫領域のUI改善 改善提案 1. シングルページアプリ化 a. レイアウト変更 b. 無限スクロール

    2. オブジェクトとタスクを分別 a. 「使いづらい」瞬間 b. 人間の記憶構造に近似 3. 出力の階層標準化 4. 共通化による冗長性排除 5. 横スクロール排除 6. モーダルウィンドウ排除 7. レコードの一括操作 8. 社内フレームワーク脱却 提案の設計的特徴 1. 左右のフレキシブルペイン 2. ペインのRRR-M+M-Eハイブリッド展開 3. CRUDボタンのアクティベート 4. 機能タブの表示・非表示切替 5. ソートキーのプルダウン化 6. 棚卸はデフォルトで全選択 評価 1. 提案と本資料 付録 1. AsIsのスクリーンショット集 2. 構造分析の過程で生まれた成果物 3. ToBeのUIモック集 5
  3. シングルページアプリ(SPA)とは マルチページアプリ 表示データを更新するたびに0からページを読み直す シングルページアプリ 変更した部分のみを都度ロードして表示 検索 ページ遷移 or 再読み込み 検索結果

    検索結果 検索結果一覧 検索 キーワード 検索 検索結果 検索結果 検索 キーワード 検索 検索 キーワード 検索 キーワード 必要な部分のみ更新 12
  4. UIを人間の記憶構造に近いモデルに近似させるのが重要 カナリア 鳥 動物 ダチョウ 飛べない 長い脚 黄色 さえずる 飛ぶ

    翼がある 皮膚がある 呼吸する 食べる 意味ネットワークモデル 出典 ・人間の記憶構造の仮説モデルの一種 ※記憶構造仮説としては活性化拡散モデルが最有力である。 ・木構造でありノード間に親子関係が存在 ・各ノードの特徴がリンクで紐づく 例 カナリアは黄色い鳥である。 鳥は動物である。 22
  5. ユーザ 本社 SB 直営店 代理店 ロジ 担当者 販促物 担当者 YM

    併売店 取次店 店舗 量販 外販 SY システム 管理者 店長 店員 YS 一次 運営店 法人 広域 責任者 閲覧者 管理者 責任者 閲覧者 責任者 閲覧者 責任者 閲覧者 ドメインモデル図の例 ユーザ分類 ユーザドメイン
  6. ユーザ SB 直営店 取次店 店舗 店長 ドメインモデル図の例 取次店長による発注 倉庫 商品

    枠残数確認 注文ヘッダ 伝票番号 注文詳細 注文数量 納期 配送予定日 取扱品 アイテムコード アイテム名 販促品 アイテム在庫 有効在庫数量 商品 販促品 発注 保管場所 倉庫名 住所 ユーザ ドメイン 受注 ドメイン 在庫 ドメイン 取扱品 ドメイン 1 * 1…* 1 1 1 1 1 1 0…* 0…* 0…* 0…* 0…* 1 1 1…*
  7. 店舗在庫 入荷 在庫照会 入荷検索/登録 店舗間移動 入荷登録(登録) 入荷検索(独自商品) 出庫登録 出庫検索 出庫検索/登録

    在庫状況 在庫数一覧 在庫数状況(過去日) 在庫数状況(過去日) シリアル情報照会 在庫受払検索 条件 CSV 照会 商品 伝票 登録 修正 削除 AsIs UI構造図解 オブジェクトとタスクが混在 36
  8. 店舗在庫 入荷 在庫照会 入荷検索/登録 店舗間移動 入荷登録(登録) 入荷検索(独自商品) 出庫登録 出庫検索 出庫検索/登録

    在庫状況 在庫数一覧 在庫数状況(過去日) 在庫数状況(過去日) シリアル情報照会 在庫受払検索 条件 CSV 照会 商品 伝票 登録 修正 削除 AsIs UI構造図解 オブジェクトとタスクが混在 オブジェクト 指向ではない 37
  9. 店舗在庫 在庫修正 商品予約 棚卸 RFIDタグ印刷 返品 在庫修正 商品予約登録 予約済商品一覧 (予約解除)

    棚卸開始 再開/取消/2人目 以降開始/RFID 棚卸履歴検索 RFIDタグ印刷 返品登録 返品一覧/ 返品取消 AsIs UI構造図解 オブジェクトとタスクが混在 条件 CSV 照会 商品 伝票 登録 修正 削除 39
  10. 店舗在庫 在庫修正 商品予約 棚卸 RFIDタグ印刷 返品 在庫修正 商品予約登録 予約済商品一覧 (予約解除)

    棚卸開始 再開/取消/2人目 以降開始/RFID 棚卸履歴検索 RFIDタグ印刷 返品登録 返品一覧/ 返品取消 AsIs UI構造図解 オブジェクトとタスクが混在 条件 CSV 照会 商品 伝票 登録 修正 削除 オブジェクト 指向ではない 40
  11. 動作/品物の管理 作業 詳細作業 <collection> 動作/品物の管理 動作/品物の管理 <collection> 作業 対象+作業名 OR

    作業名 <collection> 詳細作業 詳細作業名 <collection> 端末や付属品類 ステータス 入荷予定日 出荷伝票番号 発注伝票番号 入荷検品登録日 開く 開く 開く CUD CSV出力 AsIs UI構造図解 汎化 <single> 照会 照会条件 照会条件 照会 端末や付属品 48
  12. 動作/品物の管理 作業 詳細作業 <collection> 動作/品物の管理 動作/品物の管理 <collection> 作業 対象+作業名 OR

    作業名 <collection> 詳細作業 詳細作業名 <collection> 端末や付属品類 ステータス 入荷予定日 出荷伝票番号 発注伝票番号 入荷検品登録日 開く 開く 開く CUD CSV出力 AsIs UI構造図解 汎化 オブジェクトとタスクが混在 <single> 照会 照会条件 照会条件 照会 端末や付属品 メニュー項目 標準化が必要 49
  13. オブジェクト指向に基づき構造化 商品 伝票 店舗在庫 出力 登録 修正 削除 CSV RFI

    D 出庫情報 受払情報 予約情報 棚卸情報 在庫情報 返品情報 照会 入荷情報 棚卸情報 出庫情報 入庫情報 返品情報 在庫締め情報 共通アクション 50
  14. オブジェクト指向に基づき構造化 商品 伝票 店舗在庫 出力 登録 修正 削除 CSV RFI

    D 出庫情報 受払情報 予約情報 棚卸情報 在庫情報 返品情報 照会 入荷情報 棚卸情報 出庫情報 入庫情報 返品情報 在庫締め情報 共通アクション オブジェクト ベース 55
  15. 商品 伝票 店舗在庫 出力 登録 修正 削除 CSV RFI D

    出庫情報 受払情報 予約情報 棚卸情報 在庫情報 返品情報 照会 入荷情報 棚卸情報 出庫情報 入庫情報 返品情報 在庫締め情報 共通アクション ToBe オブジェクト指向に基づき構造化 オブジェクト OR タスクオブジェクト 56
  16. 商品 伝票 店舗在庫 出力 登録 修正 削除 CSV RFI D

    出庫情報 受払情報 予約情報 棚卸情報 在庫情報 返品情報 照会 入荷情報 棚卸情報 出庫情報 入庫情報 返品情報 在庫締め情報 共通アクション ToBe オブジェクト指向に基づき構造化 明確に区分け 57
  17. ToBe オブジェクト指向に基づき構造化 商品 伝票 店舗在庫 出力 登録 修正 削除 CSV

    RFI D 出庫情報 受払情報 予約情報 棚卸情報 在庫情報 返品情報 照会 入荷情報 棚卸情報 出庫情報 入庫情報 返品情報 在庫締め情報 共通アクション 58
  18. 商品/伝票 作業領域 端末や付属品 <collection> 商品/伝票 アイテム名 CRUD <collection> 作業領域 作業領域名

    <collection> 端末や付属品類 ステータス 入荷予定日 出荷伝票番号 発注伝票番号 入荷検品登録日 <collection> CRUD CRUD 選択状態 開く 選択状態 開く 選択状態 CRUD 出力 選択状態 開く <single> CRUD CRUD条件 CRUD条件 CRUD ToBe UIモデル図解 汎化 59
  19. 店舗在庫 在庫修正 商品予約 棚卸 RFIDタグ印刷 返品 在庫修正 商品予約登録 予約済商品一覧 (予約解除)

    棚卸開始 再開/取消/2人目 以降開始/RFID 棚卸履歴検索 RFIDタグ印刷 返品登録 返品一覧/ 返品取消 AsIs UI構造図解 条件 CSV 照会 商品 伝票 登録 修正 削除 61
  20. 店舗在庫 在庫修正 商品予約 棚卸 RFIDタグ印刷 返品 在庫修正 商品予約登録 予約済商品一覧 (予約解除)

    棚卸開始 再開/取消/2人目 以降開始/RFID 棚卸履歴検索 RFIDタグ印刷 返品登録 返品一覧/ 返品取消 AsIs 出力の階層非標準 RFIDタグ 条件 CSV 照会 商品 伝票 登録 修正 削除 62
  21. 店舗在庫 在庫修正 商品予約 棚卸 RFIDタグ印刷 返品 在庫修正 商品予約登録 予約済商品一覧 (予約解除)

    棚卸開始 再開/取消/2人目 以降開始/RFID 棚卸履歴検索 RFIDタグ印刷 返品登録 返品一覧/ 返品取消 AsIs UI構造図解 出力の階層非標準 CSV出力 条件 CSV 照会 商品 伝票 登録 修正 削除 64
  22. 店舗在庫 在庫修正 商品予約 棚卸 RFIDタグ印刷 返品 在庫修正 商品予約登録 予約済商品一覧 (予約解除)

    棚卸開始 再開/取消/2人目 以降開始/RFID 棚卸履歴検索 RFIDタグ印刷 返品登録 返品一覧/ 返品取消 AsIs 出力の階層非標準 条件 CSV 照会 商品 伝票 登録 修正 削除 出力の階層 不揃い 66
  23. ToBe 出力をタスクバーに凝縮 商品 伝票 店舗在庫 出力 登録 修正 削除 CSV

    RFI D 出庫情報 受払情報 予約情報 棚卸情報 在庫情報 返品情報 照会 入荷情報 棚卸情報 出庫情報 入庫情報 返品情報 在庫締め情報 共通アクション 67 階層 統一
  24. AsIs モーダルウィンドウはヒューリスティック原則違反 ヤコブ・ニールセンのユーザビリティ・ヒューリスティック10原則 1. システム状態の視認性を高める 2. 実環境に合ったシステムを構築する 3. ユーザーにコントロールの主導権と自由度を与える 4.

    一貫性と標準化を保持する 5. エラーの発生を事前に防止する 6. 記憶しなくても、見ればわかるようなデザインを行う 7. 柔軟性と効率性を持たせる 8. 最小限で美しいデザインを施す 9. ユーザーによるエラー認識、診断、回復をサポートする 10. ヘルプとマニュアルを用意する 出典:10 Usability Heuristics for User Interface Design 78
  25. AsIs モーダルウィンドウはヒューリスティック原則違反 ヤコブ・ニールセンのユーザビリティ・ヒューリスティック10原則 1. システム状態の視認性を高める 2. 実環境に合ったシステムを構築する 3. ユーザーにコントロールの主導権と自由度を与える 4.

    一貫性と標準化を保持する 5. エラーの発生を事前に防止する 6. 記憶しなくても、見ればわかるようなデザインを行う 7. 柔軟性と効率性を持たせる 8. 最小限で美しいデザインを施す 9. ユーザーによるエラー認識、診断、回復をサポートする 10. ヘルプとマニュアルを用意する 出典:10 Usability Heuristics for User Interface Design 79
  26. ToBe Ant Designにより実装工数抑制・開発人材調達易化 90 Ant Design ・Alibabaのデザインシステム ・Vue/Reactで簡単に実装可能 ・AntDesign of

    Vue ・AntDesign of React ・開発人材調達易化 ・豊富なコンポーネント Vue.jsにおけるDatePicker使用時の記述文 import { DatePicker } from 'ant-design-vue'; Vue.use(DatePicker); DatePicker <template> <div> <a-date-picker @change="onChange" /> <br /> <a-month-picker placeholder="Select month" @change="onChange" /> <br /> <a-range-picker @change="onChange" /> <br /> <a-week-picker placeholder="Select week" @change="onChange" /> </div> </template> <script> export default { methods: { onChange(date, dateString) { console.log(date, dateString); }, }, }; </script> DatePicker
  27. ToBe 展開パターンの応用 左ペイン RRR-M展開 100 左ペイン(RRR, E) 右ペイン(M) 【左ペイン】RRR-M展開 RRR:

    3つの検索(Retriever) の連結展開 E: 更新タブなら一覧操作 (Manipulator)画面の情 報を編集(Edit)可能 左ペイン上(R) 左ペイン中(R) 左ペイン下(R,E)
  28. ToBe 展開パターンの応用 右ペイン M-E展開 101 【右ペイン】 M: 一覧操作(Manipulator) 画面。 M-E展開:

    各レコードを選択すると左 ペインの編集画面(Editer) 展開。 左ペイン(RRR, E) 右ペイン(M)
  29. ToBe 展開パターンの応用 RRR-M + M-Eのハイブリッド展開 102 RRR-M + M-E R-R-MとMVの2つの長所を

    受け継いだハイブリッド構造 ・”両ペインの関係を常に認識可能” ・”一覧上で、自由な順序でオブジェクトを選択しなが ら、その内容を閲覧・編集” ・”閲覧用の画面を別に開く必要がないため、閉じる操 作なしに次のオブジェクトを閲覧・編集” ・”必要な回数だけ条件分岐させることが可能” 解説の引用元:ソシオメディア → ユーザビリティ向上
  30. 機能ごとのCRUD権限有無 104 CRUDとは 1. CREATE 登録 2. READ 読込 3.

    UPDATE 更新 4. DELETE 削除 C R U D 商品 在庫 ◯ ◯ 出庫 ◯ ◯ ◯ 受払 ◯ ◯ 予約 ◯ ◯ 棚卸 ◯ ◯ ◯ ◯ 返品 ◯ 伝票 入荷 ◯ 出庫 ◯ 入庫 ◯ 棚卸 ◯ 返品 ◯ 在庫 締め ◯ ◯ ◯ ◯
  31. Tobe 各画面のCRUD権限に合わせてアクティベート 105 アクティベート C R U D 商品 在庫

    ◯ ◯ 出庫 ◯ ◯ ◯ 受払 ◯ ◯ 予約 ◯ ◯ 棚卸 ◯ ◯ ◯ ◯ 返品 ◯ 伝票 入荷 ◯ 出庫 ◯ 入庫 ◯ 棚卸 ◯ 返品 ◯ 在庫締め ◯ ◯ ◯ ◯
  32. ユーザ 本社 SB 直営店 代理店 ロジ 担当者 販促物 担当者 YM

    併売店 取次店 店舗 量販 外販 SY システム 管理者 店長 店員 YS 一次 運営店 法人 広域 責任者 閲覧者 管理者 責任者 閲覧者 責任者 閲覧者 責任者 閲覧者 各ユーザによって使う機能が異なる ユーザドメイン
  33. ユーザ権限に合わせて機能を非表示して利用制限 108 利用制限 本社 ロジ 担当者 販促物 担当者 システム 管理者

    本社の社員は棚卸や返品の必要がないため非表示 ユーザブル&セキュアブル ・ユーザが使う機能へのリーチが容易 ・無関係なユーザが操作するリスクが 無くセキュア
  34. まとめ SCMOne店舗在庫領域のUI改善 改善提案 1. シングルページアプリ化 a. レイアウト変更 b. 無限スクロール 2.

    オブジェクトとタスクを分別 a. 「使いづらい」瞬間 b. 人間の記憶構造に近似 3. 出力の階層標準化 4. 共通化による冗長性排除 5. 横スクロール排除 6. モーダルウィンドウ排除 7. レコードの一括操作 8. 社内フレームワーク脱却 提案の設計的特徴 1. 左右のフレキシブルペイン 2. ペインのRRR-M+M-Eハイブリッド展開 3. CRUDボタンのアクティベート 4. 機能タブの表示・非表示切替 5. ソートキーのプルダウン化 6. 棚卸はデフォルトで全選択 126
  35. 127