![出荷
発注
発注
出荷
図の出典：ISOMETRIC.ONLINE
[フリー素材]
物流管理システム店舗在庫管理領域
ユーザインタフェース改善
2022年01月13日 SB Tech Festival 配布資料
ソフトバンク 物流管理システム UI設計者 中井崚日（@Leader_General） 1](https://image.slidesharecdn.com/sbtechfestival2022scmui-211227050944/85/SB-Tech-Festival-2022-SCM_-_UI-_-1-320.jpg)
Recommended
More Related Content
What's hot
What's hot (20)
More from 崚日 中井
【SB Tech Festival 2022】SCM_店舗在庫管理領域_UI改善_設計意図説明資料【配布用】
- 1. 出荷 発注 発注 出荷 図の出典：ISOMETRIC.ONLINE [フリー素材] 物流管理システム店舗在庫管理領域 ユーザインタフェース改善 2022年01月13日 SB Tech Festival 配布資料 ソフトバンク 物流管理システム UI設計者 中井崚日（@Leader_General） 1
- 2. 2
- 3. 本資料はSB Tech Festival 2022(connpass)の配布資料です 3
- 5. もくじ 物流管理システムSCMOne 店舗在庫領域のUI改善 改善提案 1. シングルページアプリ化 a. レイアウト変更 b. 無限スクロール 2. オブジェクトとタスクを分別 a. 「使いづらい」瞬間 b. 人間の記憶構造に近似 3. 出力の階層標準化 4. 共通化による冗長性排除 5. 横スクロール排除 6. モーダルウィンドウ排除 7. レコードの一括操作 8. 社内フレームワーク脱却 提案の設計的特徴 1. 左右のフレキシブルペイン 2. ペインのRRR-M+M-Eハイブリッド展開 3. CRUDボタンのアクティベート 4. ソートキーのプルダウン化 5. 棚卸はデフォルトで全選択 評価 1. 提案 2. 本資料 付録 1. AsIsのスクリーンショット集 2. 構造分析の過程で生まれた成果物 3. ToBeのUIモック集 5
- 10. SCMOne店舗在庫領域のUI改善点 1. シングルページアプリ化 2. オブジェクトとタスクを分別 3. 出力の階層標準化 4. 共通化による冗長性排除 5. 横スクロール排除 6. モーダルウィンドウ排除 7. 社内フレームワーク脱却 10
- 12. シングルページアプリ（SPA）とは マルチページアプリ 表示データを更新するたびに0からページを読み直す シングルページアプリ 変更した部分のみを都度ロードして表示 検索 ページ遷移 or 再読み込み 検索結果 検索結果 検索結果一覧 検索 キーワード 検索 検索結果 検索結果 検索 キーワード 検索 検索 キーワード 検索 キーワード 必要な部分のみ更新 12
- 21. 予測と現実の構造に乖離があった場合に使いづらさを感じる メンタルモデル 販促品検索 販促品登録 販促品削除 販促品管理 SCMOne 発注管理 発注照会 入荷予定 販促品管理 SCMOne 実際の構造 21 ギャップ
- 22. UIを人間の記憶構造に近いモデルに近似させるのが重要 カナリア 鳥 動物 ダチョウ 飛べない 長い脚 黄色 さえずる 飛ぶ 翼がある 皮膚がある 呼吸する 食べる 意味ネットワークモデル 出典 ・人間の記憶構造の仮説モデルの一種 ※記憶構造仮説としては活性化拡散モデルが最有力である。 ・木構造でありノード間に親子関係が存在 ・各ノードの特徴がリンクで紐づく 例 カナリアは黄色い鳥である。 鳥は動物である。 22
- 24. オブジェクト指向UI（OOUI）とは “オブジェクト”を中心としたUI ・最初から対象物が見えている ・名詞 → 動詞 ・決まった操作手順がない 出典：オブジェクト指向UIデザイン（上野学） 24
- 27. オブジェクト指向UIとは “オブジェクト”を中心としたUI ・ テキスト を 投稿 ・ 写真 を 閲覧 ・ 色 を 削除 オブジェクト タスク → 27
- 32. ユーザ 本社 SB 直営店 代理店 ロジ 担当者 販促物 担当者 YM 併売店 取次店 店舗 量販 外販 SY システム 管理者 店長 店員 YS 一次 運営店 法人 広域 責任者 閲覧者 管理者 責任者 閲覧者 責任者 閲覧者 責任者 閲覧者 ドメインモデル図の例 ユーザ分類 ユーザドメイン
- 33. ユーザ SB 直営店 取次店 店舗 店長 ドメインモデル図の例 取次店長による発注 倉庫 商品 枠残数確認 注文ヘッダ 伝票番号 注文詳細 注文数量 納期 配送予定日 取扱品 アイテムコード アイテム名 販促品 アイテム在庫 有効在庫数量 商品 販促品 発注 保管場所 倉庫名 住所 ユーザ ドメイン 受注 ドメイン 在庫 ドメイン 取扱品 ドメイン 1 * 1…* 1 1 1 1 1 1 0…* 0…* 0…* 0…* 0…* 1 1 1…*
- 34. AsIs メインメニュー 34
- 36. 店舗在庫 入荷 在庫照会 入荷検索/登録 店舗間移動 入荷登録（登録） 入荷検索（独自商品） 出庫登録 出庫検索 出庫検索/登録 在庫状況 在庫数一覧 在庫数状況（過去日） 在庫数状況（過去日） シリアル情報照会 在庫受払検索 条件 CSV 照会 商品 伝票 登録 修正 削除 AsIs UI構造図解 オブジェクトとタスクが混在 36
- 37. 店舗在庫 入荷 在庫照会 入荷検索/登録 店舗間移動 入荷登録（登録） 入荷検索（独自商品） 出庫登録 出庫検索 出庫検索/登録 在庫状況 在庫数一覧 在庫数状況（過去日） 在庫数状況（過去日） シリアル情報照会 在庫受払検索 条件 CSV 照会 商品 伝票 登録 修正 削除 AsIs UI構造図解 オブジェクトとタスクが混在 オブジェクト 指向ではない 37
- 39. 店舗在庫 在庫修正 商品予約 棚卸 RFIDタグ印刷 返品 在庫修正 商品予約登録 予約済商品一覧 （予約解除） 棚卸開始 再開/取消/2人目 以降開始/RFID 棚卸履歴検索 RFIDタグ印刷 返品登録 返品一覧/ 返品取消 AsIs UI構造図解 オブジェクトとタスクが混在 条件 CSV 照会 商品 伝票 登録 修正 削除 39
- 40. 店舗在庫 在庫修正 商品予約 棚卸 RFIDタグ印刷 返品 在庫修正 商品予約登録 予約済商品一覧 （予約解除） 棚卸開始 再開/取消/2人目 以降開始/RFID 棚卸履歴検索 RFIDタグ印刷 返品登録 返品一覧/ 返品取消 AsIs UI構造図解 オブジェクトとタスクが混在 条件 CSV 照会 商品 伝票 登録 修正 削除 オブジェクト 指向ではない 40
- 46. 構造的問題点 非MECEな下記パターンが同階層に混在 1. オブジェクト 2. タスク 3. タスクオブジェクト 4. オブジェクトタスク 46
- 48. 動作/品物の管理 作業 詳細作業 <collection> 動作/品物の管理 動作/品物の管理 <collection > 作業 対象+作業名 OR 作業名 <collection> 詳細作業 詳細作業名 <collection> 端末や付属品類 ステータス 入荷予定日 出荷伝票番号 発注伝票番号 入荷検品登録日 開く 開く 開く CUD CSV出力 AsIs UI構造図解 汎化 <single> 照会 照会条件 照会条件 照会 端末や付属品 48
- 49. 動作/品物の管理 作業 詳細作業 <collection> 動作/品物の管理 動作/品物の管理 <collection > 作業 対象+作業名 OR 作業名 <collection> 詳細作業 詳細作業名 <collection> 端末や付属品類 ステータス 入荷予定日 出荷伝票番号 発注伝票番号 入荷検品登録日 開く 開く 開く CUD CSV出力 AsIs UI構造図解 汎化 オブジェクトとタスクが混在 <single> 照会 照会条件 照会条件 照会 端末や付属品 メニュー項目 標準化が必要 49
- 52. AsIs SCMOneにおけるオブジェクト 検索項目 商品 伝票 52
- 60. 改善点３ 出力の階層標準化 60
- 61. 店舗在庫 在庫修正 商品予約 棚卸 RFIDタグ印刷 返品 在庫修正 商品予約登録 予約済商品一覧 （予約解除） 棚卸開始 再開/取消/2人目 以降開始/RFID 棚卸履歴検索 RFIDタグ印刷 返品登録 返品一覧/ 返品取消 AsIs UI構造図解 条件 CSV 照会 商品 伝票 登録 修正 削除 61
- 62. 店舗在庫 在庫修正 商品予約 棚卸 RFIDタグ印刷 返品 在庫修正 商品予約登録 予約済商品一覧 （予約解除） 棚卸開始 再開/取消/2人目 以降開始/RFID 棚卸履歴検索 RFIDタグ印刷 返品登録 返品一覧/ 返品取消 AsIs 出力の階層非標準 RFIDタグ 条件 CSV 照会 商品 伝票 登録 修正 削除 62
- 64. 店舗在庫 在庫修正 商品予約 棚卸 RFIDタグ印刷 返品 在庫修正 商品予約登録 予約済商品一覧 （予約解除） 棚卸開始 再開/取消/2人目 以降開始/RFID 棚卸履歴検索 RFIDタグ印刷 返品登録 返品一覧/ 返品取消 AsIs UI構造図解 出力の階層非標準 CSV出力 条件 CSV 照会 商品 伝票 登録 修正 削除 64
- 66. 店舗在庫 在庫修正 商品予約 棚卸 RFIDタグ印刷 返品 在庫修正 商品予約登録 予約済商品一覧 （予約解除） 棚卸開始 再開/取消/2人目 以降開始/RFID 棚卸履歴検索 RFIDタグ印刷 返品登録 返品一覧/ 返品取消 AsIs 出力の階層非標準 条件 CSV 照会 商品 伝票 登録 修正 削除 出力の階層 不揃い 66
- 73. 改善策５ 横スクロール排除 73
- 78. AsIs モーダルウィンドウはヒューリスティック原則違反 ヤコブ・ニールセンのユーザビリティ・ヒューリスティック10原則 1. システム状態の視認性を高める 2. 実環境に合ったシステムを構築する 3. ユーザーにコントロールの主導権と自由度を与える 4. 一貫性と標準化を保持する 5. エラーの発生を事前に防止する 6. 記憶しなくても、見ればわかるようなデザインを行う 7. 柔軟性と効率性を持たせる 8. 最小限で美しいデザインを施す 9. ユーザーによるエラー認識、診断、回復をサポートする 10. ヘルプとマニュアルを用意する 出典：10 Usability Heuristics for User Interface Design 78
- 79. AsIs モーダルウィンドウはヒューリスティック原則違反 ヤコブ・ニールセンのユーザビリティ・ヒューリスティック10原則 1. システム状態の視認性を高める 2. 実環境に合ったシステムを構築する 3. ユーザーにコントロールの主導権と自由度を与える 4. 一貫性と標準化を保持する 5. エラーの発生を事前に防止する 6. 記憶しなくても、見ればわかるようなデザインを行う 7. 柔軟性と効率性を持たせる 8. 最小限で美しいデザインを施す 9. ユーザーによるエラー認識、診断、回復をサポートする 10. ヘルプとマニュアルを用意する 出典：10 Usability Heuristics for User Interface Design 79
- 80. 安全設計手法 フェイルセーフ適用 出典 80 製品安全 危害の程度を下げる 危害の発生頻度を下げる 故障防止 故障・操作ミスしても安全確保 誤用しても安全確保 フールプルーフ フェイルセーフ セーフライフ
- 84. AsIs 選択中の1レコードに対してのみ更新可能 84 操作ステップ多 操作ステップ数 = アイテム数 × 修正項目数 例：Apple USM Power Adaptorの在庫修正画面
- 89. ToBe オープンフレームワーク × Ant Designに移行 89
- 90. 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
- 91. 提案の設計的特徴 1. 左右のフレキシブルペイン 2. ペインのRRR-M+M-Eハイブリッド展開 3. CRUDボタンのアクティベート 4. ソートキーのプルダウン化 5. 棚卸はデフォルトで全選択 91
- 95. ToBe 右ペイン内テーブルのフレキシブル対応 95 ・フレキシブルテーブルによ って各レコードの値のレイア ウトが横並びに統一 ・1画面に表示可能なレコー ド数アップ →レコード間の値比較が楽
- 98. 98 R-R-M展開 出典 “数の異なる検索（Retriever）を連続して提示しながら 対象を限定していき、一覧操作（Manipulator）画面に 辿り着かせる。” 効能 必要な回数だけ条件分岐させることが可能 → 操作ステップ短縮に繋がる 解説・図の引用元：ソシオメディア ペイン R-R-M展開 複数の検索画面を経た後で一覧操作画面に辿り着く
- 99. ToBe 展開パターンの応用 左ペイン RRR-M展開 99 左ペイン（RRR, E） 右ペイン(M) 【左ペイン】RRR-M展開 RRR： ３つの検索（Retriever） の連結展開 E： 更新タブなら一覧操作 （Manipulator）画面の情 報を編集(Edit)可能 左ペイン上（R） 左ペイン中（R） 左ペイン下（R,E）
- 100. ToBe 展開パターンの応用 右ペイン M-E展開 100 左ペイン（RRR, E） 右ペイン(M) 【右ペイン】 M： 一覧操作（Manipulator） 画面。 M-E展開： 各レコードを選択すると左 ペインの編集画面(Editer) 展開。
- 101. ToBe 展開パターンの応用 RRR-M + M-Eのハイブリッド展 開 101 RRR-M + M-E R-R-MとMVの2つの長所を受 け継いだハイブリッド構造 ・”両ペインの関係を常に認識可能” ・”一覧上で、自由な順序でオブジェクトを選択しなが ら、その内容を閲覧・編集” ・”閲覧用の画面を別に開く必要がないため、閉じる操 作なしに次のオブジェクトを閲覧・編集” ・”必要な回数だけ条件分岐させることが可能” 解説の引用元：ソシオメディア → ユーザビリティ向上
- 103. 機能ごとのCRUD権限有無 103 CRUDとは 1. CREATE 登録 2. READ 読込 3. UPDATE 更新 4. DELETE 削除 C R U D 商品 在庫 ◯ ◯ 出庫 ◯ ◯ ◯ 受払 ◯ ◯ 予約 ◯ ◯ 棚卸 ◯ ◯ ◯ ◯ 返品 ◯ 伝票 入荷 ◯ 出庫 ◯ 入庫 ◯ 棚卸 ◯ 返品 ◯ 在庫 締め ◯ ◯ ◯ ◯
- 104. Tobe 各画面のCRUD権限に合わせてアクティベート 104 アクティベート C R U D 商品 在庫 ◯ ◯ 出庫 ◯ ◯ ◯ 受払 ◯ ◯ 予約 ◯ ◯ 棚卸 ◯ ◯ ◯ ◯ 返品 ◯ 伝票 入荷 ◯ 出庫 ◯ 入庫 ◯ 棚卸 ◯ 返品 ◯ 在庫締め ◯ ◯ ◯ ◯
- 105. 特徴４ ソートキーのプルダウン化 105
- 107. 特徴５ 棚卸はデフォルトで全選択 107
- 109. UI改善の意義 109
- 113. 提案の評価 113
- 116. 本資料の評価 116
- 117. 全社展開 本資料 117
- 118. 本資料の評価 全社アンケート 総合評価 118 2021/12/14 [n=37] 総合評価 4.3 人数/評価
- 119. 本資料の評価 全社アンケート 業務に活かせる 119 2021/12/14 [n=37] 業務に活かせる 4.2 人数/評価
- 120. 本資料の評価 全社アンケート 次回作があれば読みたい 120 2021/12/14 [n=37] 次回作があれば読みたい 4.7 人数/評価
- 122. まとめ SCMOne店舗在庫領域のUI改善 改善提案 1. シングルページアプリ化 a. レイアウト変更 b. 無限スクロール 2. オブジェクトとタスクを分別 a. 「使いづらい」瞬間 b. 人間の記憶構造に近似 3. 出力の階層標準化 4. 共通化による冗長性排除 5. 横スクロール排除 6. モーダルウィンドウ排除 7. レコードの一括操作 8. 社内フレームワーク脱却 提案の設計的特徴 1. 左右のフレキシブルペイン 2. ペインのRRR-M+M-Eハイブリッド展開 3. CRUDボタンのアクティベート 4. ソートキーのプルダウン化 5. 棚卸はデフォルトで全選択 122
- 123. 123
- 124. 付録 124
- 125. 引用に関する 著作法への配慮 125
- 127. 引用の著作権 著作法 第32条に対する文化庁の見解 127 “（注5）引用における注意事項 他人の著作物を自分の著作物の中に取り込む場合，すなわち引用を行う場合，一般的には，以下の事項に注意しなければなりません。 （1）他人の著作物を引用する必然性があること。 （2）かぎ括弧をつけるなど，自分の著作物と引用部分とが区別されていること。 （3）自分の著作物と引用する著作物との主従関係が明確であること（自分の著作物が主体）。 （4）出所の明示がなされていること。（第48条） （参照：最判昭和55年3月28日 ｢パロディー事件｣）” 参考：https://www.bunka.go.jp/seisaku/chosakuken/seidokaisetsu/gaiyo/chosakubutsu_jiyu.html
- 128. 既存UI 128
- 129. メインメニュー 入荷 129
- 130. メインメニュー 店舗間移動 130
- 131. メインメニュー 在庫照会 131
- 132. メインメニュー 在庫修正 132
- 133. メインメニュー 商品予約 133
- 134. メインメニュー 棚卸 134
- 135. メインメニュー RFIDタグ印刷 135
- 136. メインメニュー 返品 136
- 137. 入荷 入荷検索 137
- 138. 入荷 入荷検索（独自商品） 138
- 139. 入荷 入荷登録（独自商品） 139
- 140. 店舗間移動 入庫検索 140
- 141. 店舗間移動 出庫検索 141
- 142. 店舗間移動 出庫登録 142
- 143. 店舗間移動 出庫検品 143
- 145. 店舗間移動 出庫登録 145
- 146. 店舗間移動 取次店検索 146
- 147. 在庫照会 在庫状況 147
- 148. 在庫照会 在庫状況（過去日） 148
- 149. 在庫照会 在庫受払検索 149
- 150. 在庫照会 在庫数一覧 150
- 151. 在庫照会 シリアル情報照会 151
- 152. 在庫修正 商品選択 152
- 153. 在庫修正 在庫修正 153
- 155. 商品予約 商品予約登録 155
- 157. 棚卸 棚卸対象選択 157
- 158. 棚卸 棚卸中のデータがある 158
- 159. 棚卸 カテゴリ別棚卸-移動機 159
- 160. 棚卸 棚卸再開／取消 160
- 161. 棚卸 棚卸履歴検索 161
- 162. RFIDタグ印刷 162
- 163. 返品 返品登録 商品種別選択 163
- 164. 返品 返品登録 164
- 165. 返品 返品一覧／返品取消 165
- 166. 既存UIの構造図解 166
- 167. 既存UIの構造図解 167
- 168. 既存UIの構造図解 168
- 169. 既存UIの構造図解 169
- 170. 既存UIの構造図解 170
- 171. 既存UIの構造図解 171
- 172. 既存UIの構造図解 172
- 173. 既存UIの構造図解 173
- 174. 既存UIの構造図解 174
- 175. 既存UIの構造図解 175
- 176. 既存UIの構造図解 176
- 177. 既存UIの構造図解 177
- 178. 既存UIの構造図解 178
- 179. 既存UIの構造図解 179
- 180. 既存UIの構造図解 180
- 181. 既存UIの構造図解 181
- 182. 既存UIの構造図解 182
- 183. 既存UIの構造図解 183
- 184. 既存UIの構造図解 184
- 185. 既存UIの構造図解 185
- 186. 既存UIの構造図解 186
- 187. 既存UIの構造図解 187
- 188. Ver1 低精度プロトタイプ 189
- 189. Ver1 提案UI 190
- 190. Ver1 商品ページUI 191
- 192. Ver1 商品ページUI 商品 193
- 195. Ver1 伝票ページUI 196
- 196. Ver1 伝票ページUI 197
- 198. Ver2 中精度プロトタイプ 199
- 199. Ver2 商品 在庫 照会 200
- 200. Ver2 商品 在庫 更新 対象未選択 201
- 201. Ver2 商品 在庫 更新 対象選択中１ 202
- 202. Ver2 商品 在庫 更新 対象選択中２ 203
- 203. Ver2 商品 出庫 登録 204
- 204. Ver2 商品 受払 照会 205
- 205. Ver2 商品 予約 照会 206
- 206. Ver2 商品 予約 照会 207
- 207. Ver2 商品 棚卸 更新 個体管理品 対象未選択 208
- 208. Ver2 商品 棚卸 更新 個体管理品 対象選択中 209
- 209. Ver2 商品 棚卸 更新 数量管理品 対象未選択 210
- 210. Ver2 商品 棚卸 更新 数量管理品 対象選択中 211
- 211. Ver2 商品 棚卸 更新 個体管理差分 対象未選択 212
- 212. Ver2 商品 棚卸 更新 個体管理差分 213
- 213. Ver2 商品 棚卸 更新 数量管理差分 対象未選択 214
- 214. Ver2 商品 棚卸 更新 数量管理差分 215
- 215. Ver2 商品 棚卸 個体管理品 照会 216
- 216. Ver2 商品 棚卸 数量管理品 照会 217
- 217. Ver2 商品 棚卸 個体管理品差分 照会 218
- 218. Ver2 商品 棚卸 数量管理品差分 照会 219
- 219. Ver2 商品 返品 登録（CS商材） 220
- 220. Ver2 商品 返品 登録（SB商材） 221
- 221. Ver2 商品 入荷 照会 222
- 222. Ver2 伝票 出庫 照会 223
- 223. Ver2 伝票 入庫 照会 224
- 224. Ver2 伝票 棚卸 照会 225
- 225. Ver2 伝票 返品 照会 226
- 228. Ver3 高精度プロトタイプ 229
- 229. Ver3 商品 在庫数照会 230
- 230. Ver3 商品 在庫 照会 シリアルナンバー 231
- 231. Ver3 商品 在庫数 照会 運営店 232
- 232. Ver3 商品 在庫 更新 対象未選択 233
- 233. Ver3 商品 在庫 更新 選択中 234
- 234. Ver3 伝票 出庫 登録 235
- 235. Ver3 商品 受払 更新 236
- 236. Ver3 商品 受払 照会 237
- 237. Ver3 商品 予約 照会 238
- 238. Ver3 商品 予約 登録 239
- 239. Ver3 伝票 棚卸 更新 240
- 240. Ver3 伝票 棚卸 照会 241
- 241. Ver3 伝票 棚卸 登録 242
- 244. Ver3 伝票 入荷 照会 245
- 245. Ver3 伝票 出庫 照会 246
- 246. Ver3 伝票 入庫 照会 247
- 247. Ver3 伝票 棚卸 照会 248
- 248. Ver3 伝票 返品 照会 249
- 249. Ver3 伝票 在庫締め 照会 250
- 250. Ver3 伝票 在庫締め 登録 251
- 251. Ver3 伝票 在庫締め 更新 252