SlideShare a Scribd company logo
1 of 255
出荷
発注
発注
出荷
図の出典:ISOMETRIC.ONLINE
[フリー素材]
物流管理システム店舗在庫管理領域
ユーザインタフェース改善
2022年01月13日 SB Tech Festival 配布資料
ソフトバンク 物流管理システム UI設計者 中井崚日(@Leader_General) 1
2
本資料はSB Tech Festival 2022(connpass)の配布資料です
3
注意
・ToBeに記載の提案のUIモックは検討段階のプロ
トタイプであり開発中のものではありません
・UIモック内やスクリーンショットに実店舗名が記
載されておりますが、商品の在庫状況等はダミーデ
ータであり商用稼働中のものではありません
・図および””囲いの文は著作法32条に則り引用して
おります 4
もくじ 物流管理システム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
現行UI
Overview
6
AsIs SCMOne スクリーンショット
7
YouTube動画リンク
改善後UI
Overview
8
ToBe SCMOne スクリーンショット
9
YouTube動画リンク
SCMOne店舗在庫領域のUI改善点
1. シングルページアプリ化
2. オブジェクトとタスクを分別
3. 出力の階層標準化
4. 共通化による冗長性排除
5. 横スクロール排除
6. モーダルウィンドウ排除
7. 社内フレームワーク脱却
10
改善点1
シングルページアプリ化
11
シングルページアプリ(SPA)とは
マルチページアプリ
表示データを更新するたびに0からページを読み直す
シングルページアプリ
変更した部分のみを都度ロードして表示
検索
ページ遷移 or 再読み込み
検索結果
検索結果
検索結果一覧
検索
キーワード
検索
検索結果
検索結果
検索
キーワード
検索
検索
キーワード 検索
キーワード
必要な部分のみ更新
12
AsIs SCMOneはマルチページアプリ
画面遷移
13
ToBe マルチページアプリ対応可能な構造に再設計
テーブルのみ
再読込
14
左側は初期起動時に
予め読込
AsIs ページによるテーブルレコードの表示範囲切替
メリット
・ページ数から読み込んだ数を把握しやすい
・ページスキップが可能
デメリット
・マルチページアプリ向けUI
・クリックの手間
・ページからは内容が予測できない
15
ToBe ページ切替からインフィニティスクロールへ
30件ごとに
自動読込
16
改善点2
オブジェクトとタスクを分別
17
「人間が使いづらい」と思うプロセス
18
人間は経験や論理をもとにUIから全体構造を想像する
入荷検索
店舗在庫
SCMOne
販促品管理
入荷登録
メンタルモデル
19
人間は見えていない項目の構造を予測する
入荷検索
店舗在庫
SCMOne
販促品管理
入荷登録
メンタルモデル
販促品検索 販促品登録 販促品削除
20
予測と現実の構造に乖離があった場合に使いづらさを感じる
メンタルモデル
販促品検索 販促品登録 販促品削除
販促品管理
SCMOne
発注管理 発注照会 入荷予定
販促品管理
SCMOne
実際の構造
21
ギャップ
UIを人間の記憶構造に近いモデルに近似させるのが重要
カナリア
鳥
動物
ダチョウ
飛べない 長い脚
黄色 さえずる
飛ぶ 翼がある
皮膚がある
呼吸する
食べる
意味ネットワークモデル 出典
・人間の記憶構造の仮説モデルの一種
※記憶構造仮説としては活性化拡散モデルが最有力である。
・木構造でありノード間に親子関係が存在
・各ノードの特徴がリンクで紐づく
例
カナリアは黄色い鳥である。
鳥は動物である。
22
意味ネットに基づいたUI設計フレームワーク
オブジェクト指向UI(OOUI)
出典:オブジェクト指向UIとタスク指向UI
23
オブジェクト
ユーザ タスク
UI
図の出典:ICOOON MONO
[フリー素材]
オブジェクト指向UI(OOUI)とは
“オブジェクト”を中心としたUI
・最初から対象物が見えている
・名詞 → 動詞
・決まった操作手順がない
出典:オブジェクト指向UIデザイン(上野学)
24
オブジェクト指向UIの例:Twitter
25
オブジェクト指向UIの例:Twitter
オブジェクト(名詞)
タスク(動詞)
26
オブジェクト指向UIとは
“オブジェクト”を中心としたUI
・ テキスト を 投稿
・ 写真 を 閲覧
・ 色 を 削除
オブジェクト タスク
→
27
オブジェクト指向UIの例:Twitter
ツイート いいね
を する
28
オブジェクト指向UIの例:Twitter
リツイート
いいね
29
オブジェクト指向UIの利点
・機能が増えても画面構成や操作方法やシンプル
・モードレス:操作対象の選び直しが楽
・仕様変更や機能追加の工数は小規模で済む
・条件分岐が少なくバグも少ない
30
意味ネットモデルやOOUIの思想はDDDに通ずる
DDD(ドメイン・ドリブン・デザイン)
・変更に強いシステム構築のための設計論
・ドメイン(解決対象領域)の概念モデルを
軸としてソフトウェア設計を行う
31
ヒアリング
モデルをUIに投影
ドメインモデリング
意味ネット
ユースケース図
ロバストネス図
UIもドメインモデリングで変更に強くなる
ドメインモデルと常に同期
ユーザ
本社
SB
直営店 代理店
ロジ
担当者
販促物
担当者
YM 併売店
取次店
店舗 量販 外販
SY
システム
管理者
店長 店員
YS
一次
運営店 法人
広域
責任者 閲覧者
管理者 責任者 閲覧者 責任者 閲覧者
責任者 閲覧者
ドメインモデル図の例 ユーザ分類
ユーザドメイン
ユーザ
SB
直営店
取次店
店舗
店長
ドメインモデル図の例 取次店長による発注
倉庫
商品
枠残数確認
注文ヘッダ
伝票番号
注文詳細
注文数量
納期
配送予定日
取扱品
アイテムコード
アイテム名
販促品
アイテム在庫
有効在庫数量
商品 販促品
発注
保管場所
倉庫名
住所
ユーザ
ドメイン
受注
ドメイン
在庫
ドメイン
取扱品
ドメイン
1
*
1…*
1
1
1
1
1 1
0…*
0…* 0…*
0…*
0…* 1
1
1…*
AsIs メインメニュー
34
AsIs メインメニュー 入荷~在庫照会
35
店舗在庫 入荷
在庫照会
入荷検索/登録
店舗間移動
入荷登録(登録)
入荷検索(独自商品)
出庫登録
出庫検索
出庫検索/登録
在庫状況
在庫数一覧
在庫数状況(過去日)
在庫数状況(過去日)
シリアル情報照会
在庫受払検索
条件
CSV
照会 商品
伝票
登録
修正
削除
AsIs UI構造図解 オブジェクトとタスクが混在
36
店舗在庫 入荷
在庫照会
入荷検索/登録
店舗間移動
入荷登録(登録)
入荷検索(独自商品)
出庫登録
出庫検索
出庫検索/登録
在庫状況
在庫数一覧
在庫数状況(過去日)
在庫数状況(過去日)
シリアル情報照会
在庫受払検索
条件
CSV
照会 商品
伝票
登録
修正
削除
AsIs UI構造図解 オブジェクトとタスクが混在
オブジェクト
指向ではない
37
AsIs メインメニュー 在庫修正~返品
38
店舗在庫 在庫修正
商品予約
棚卸
RFIDタグ印刷
返品
在庫修正
商品予約登録
予約済商品一覧
(予約解除)
棚卸開始
再開/取消/2人目
以降開始/RFID
棚卸履歴検索
RFIDタグ印刷
返品登録
返品一覧/
返品取消
AsIs UI構造図解 オブジェクトとタスクが混在
条件
CSV
照会 商品
伝票
登録
修正
削除
39
店舗在庫 在庫修正
商品予約
棚卸
RFIDタグ印刷
返品
在庫修正
商品予約登録
予約済商品一覧
(予約解除)
棚卸開始
再開/取消/2人目
以降開始/RFID
棚卸履歴検索
RFIDタグ印刷
返品登録
返品一覧/
返品取消
AsIs UI構造図解 オブジェクトとタスクが混在
条件
CSV
照会 商品
伝票
登録
修正
削除
オブジェクト
指向ではない
40
41
オブジェクト[商品リスト]
予約済商品
パターン1: オブジェクト
パターン2: タスク
オブジェクト[商品リスト]
42
棚卸
返品
43
オブジェクト[商品リスト]
履歴検索
在庫修正
パターン3: オブジェクトタスク
44
オブジェクト[商品リスト]
返品一覧
パターン4: タスクオブジェクト
45
非MECE 漏れや重複がある状態
在庫状況 在庫数一覧
在庫数状況
(過去日)
3つの違いが分からない
構造的問題点
非MECEな下記パターンが同階層に混在
1. オブジェクト
2. タスク
3. タスクオブジェクト
4. オブジェクトタスク
46
アンチパターン:タスク指向UI
“タスク”(動詞)を中心としたUI
47
タスク
ユーザ オブジェクト
UI
図の出典:ICOOON MONO
[フリー素材]
動作/品物の管理 作業 詳細作業
<collection>
動作/品物の管理
動作/品物の管理
<collection>
作業
対象+作業名
OR
作業名
<collection>
詳細作業
詳細作業名
<collection>
端末や付属品類
ステータス
入荷予定日
出荷伝票番号
発注伝票番号
入荷検品登録日
開く 開く 開く
CUD
CSV出力
AsIs UI構造図解 汎化
<single>
照会
照会条件
照会条件
照会
端末や付属品
48
動作/品物の管理 作業 詳細作業
<collection>
動作/品物の管理
動作/品物の管理
<collection>
作業
対象+作業名
OR
作業名
<collection>
詳細作業
詳細作業名
<collection>
端末や付属品類
ステータス
入荷予定日
出荷伝票番号
発注伝票番号
入荷検品登録日
開く 開く 開く
CUD
CSV出力
AsIs UI構造図解 汎化 オブジェクトとタスクが混在
<single>
照会
照会条件
照会条件
照会
端末や付属品
メニュー項目
標準化が必要
49
オブジェクト指向に基づき構造化
商品
伝票
店舗在庫
出力
登録
修正
削除
CSV
RFI
D
出庫情報
受払情報
予約情報
棚卸情報
在庫情報
返品情報
照会
入荷情報
棚卸情報
出庫情報
入庫情報
返品情報
在庫締め情報
共通アクション
50
AsIs SCMOneにおけるオブジェクト 検索項目
51
AsIs SCMOneにおけるオブジェクト 検索項目
商品 伝票
52
AsIs SCMOneにおけるオブジェクト 表項目
53
AsIs SCMOneにおけるオブジェクト 表項目
商品
伝票
54
オブジェクト指向に基づき構造化
商品
伝票
店舗在庫
出力
登録
修正
削除
CSV
RFI
D
出庫情報
受払情報
予約情報
棚卸情報
在庫情報
返品情報
照会
入荷情報
棚卸情報
出庫情報
入庫情報
返品情報
在庫締め情報
共通アクション
オブジェクト
ベース
55
商品
伝票
店舗在庫
出力
登録
修正
削除
CSV
RFI
D
出庫情報
受払情報
予約情報
棚卸情報
在庫情報
返品情報
照会
入荷情報
棚卸情報
出庫情報
入庫情報
返品情報
在庫締め情報
共通アクション
ToBe オブジェクト指向に基づき構造化
オブジェクト
OR
タスクオブジェクト
56
商品
伝票
店舗在庫
出力
登録
修正
削除
CSV
RFI
D
出庫情報
受払情報
予約情報
棚卸情報
在庫情報
返品情報
照会
入荷情報
棚卸情報
出庫情報
入庫情報
返品情報
在庫締め情報
共通アクション
ToBe オブジェクト指向に基づき構造化
明確に区分け
57
ToBe オブジェクト指向に基づき構造化
商品
伝票
店舗在庫
出力
登録
修正
削除
CSV
RFI
D
出庫情報
受払情報
予約情報
棚卸情報
在庫情報
返品情報
照会
入荷情報
棚卸情報
出庫情報
入庫情報
返品情報
在庫締め情報
共通アクション
58
商品/伝票 作業領域 端末や付属品
<collection>
商品/伝票
アイテム名
CRUD
<collection>
作業領域
作業領域名
<collection>
端末や付属品類
ステータス
入荷予定日
出荷伝票番号
発注伝票番号
入荷検品登録日
<collection>
CRUD
CRUD
選択状態
開く
選択状態
開く
選択状態
CRUD
出力
選択状態
開く
<single>
CRUD
CRUD条件
CRUD条件
CRUD
ToBe UIモデル図解 汎化
59
改善点3
出力の階層標準化
60
店舗在庫 在庫修正
商品予約
棚卸
RFIDタグ印刷
返品
在庫修正
商品予約登録
予約済商品一覧
(予約解除)
棚卸開始
再開/取消/2人目
以降開始/RFID
棚卸履歴検索
RFIDタグ印刷
返品登録
返品一覧/
返品取消
AsIs UI構造図解
条件
CSV
照会 商品
伝票
登録
修正
削除
61
店舗在庫 在庫修正
商品予約
棚卸
RFIDタグ印刷
返品
在庫修正
商品予約登録
予約済商品一覧
(予約解除)
棚卸開始
再開/取消/2人目
以降開始/RFID
棚卸履歴検索
RFIDタグ印刷
返品登録
返品一覧/
返品取消
AsIs 出力の階層非標準 RFIDタグ
条件
CSV
照会 商品
伝票
登録
修正
削除
62
AsIs 出力の階層非標準 RFIDタグ
メイン
メニューに
出力が存在
63
店舗在庫 在庫修正
商品予約
棚卸
RFIDタグ印刷
返品
在庫修正
商品予約登録
予約済商品一覧
(予約解除)
棚卸開始
再開/取消/2人目
以降開始/RFID
棚卸履歴検索
RFIDタグ印刷
返品登録
返品一覧/
返品取消
AsIs UI構造図解 出力の階層非標準 CSV出力
条件
CSV
照会 商品
伝票
登録
修正
削除
64
AsIs 出力の階層非標準 CSV
検索欄に出力が存在
65
店舗在庫 在庫修正
商品予約
棚卸
RFIDタグ印刷
返品
在庫修正
商品予約登録
予約済商品一覧
(予約解除)
棚卸開始
再開/取消/2人目
以降開始/RFID
棚卸履歴検索
RFIDタグ印刷
返品登録
返品一覧/
返品取消
AsIs 出力の階層非標準
条件
CSV
照会 商品
伝票
登録
修正
削除
出力の階層
不揃い
66
ToBe 出力をタスクバーに凝縮
商品
伝票
店舗在庫
出力
登録
修正
削除
CSV
RFI
D
出庫情報
受払情報
予約情報
棚卸情報
在庫情報
返品情報
照会
入荷情報
棚卸情報
出庫情報
入庫情報
返品情報
在庫締め情報
共通アクション
67
階層
統一
ToBe 出力をタスクバーに凝縮
階層統一
・プルダウンで階層化
・レコードの選択状況に
合わせてボタンを有効化
68
改善点4
共通化による冗長性排除
69
AsIs 照会条件が重複している画面が複数存在
70
AsIs 画面遷移時に入力欄ステートが棄却
棄却 再入力の手間発生
71
ToBe 共通化により冗長性排除・条件ステート保持
共通条件
72
改善策5
横スクロール排除
73
AsIs 横スクロール
横スクロールの欠点
・一覧性低
・操作ステップ多
・スマホ対応困難
74
ToDo 横スクロール廃止してレコードを縦長化
情報を1カラムに凝縮
・操作ステップ減
・スマホ対応容易
・慣性スクロールに特化
75
改善点6
モーダルウィンドウ排除
76
AsIs モーダルウィンドウ(ダイアログ)の欠点
ユーザビリティ低下要因
・操作を制限
・操作順序を固定
出典:モーダル[ソシオメディア]
77
AsIs モーダルウィンドウはヒューリスティック原則違反
ヤコブ・ニールセンのユーザビリティ・ヒューリスティック10原則
1. システム状態の視認性を高める
2. 実環境に合ったシステムを構築する
3. ユーザーにコントロールの主導権と自由度を与える
4. 一貫性と標準化を保持する
5. エラーの発生を事前に防止する
6. 記憶しなくても、見ればわかるようなデザインを行う
7. 柔軟性と効率性を持たせる
8. 最小限で美しいデザインを施す
9. ユーザーによるエラー認識、診断、回復をサポートする
10. ヘルプとマニュアルを用意する
出典:10 Usability Heuristics for User Interface Design 78
AsIs モーダルウィンドウはヒューリスティック原則違反
ヤコブ・ニールセンのユーザビリティ・ヒューリスティック10原則
1. システム状態の視認性を高める
2. 実環境に合ったシステムを構築する
3. ユーザーにコントロールの主導権と自由度を与える
4. 一貫性と標準化を保持する
5. エラーの発生を事前に防止する
6. 記憶しなくても、見ればわかるようなデザインを行う
7. 柔軟性と効率性を持たせる
8. 最小限で美しいデザインを施す
9. ユーザーによるエラー認識、診断、回復をサポートする
10. ヘルプとマニュアルを用意する
出典:10 Usability Heuristics for User Interface Design 79
安全設計手法 フェイルセーフ適用 出典
80
製品安全 危害の程度を下げる
危害の発生頻度を下げる 故障防止
故障・操作ミスしても安全確保
誤用しても安全確保 フールプルーフ
フェイルセーフ
セーフライフ
ToBe バナー通知によりモードレス&フェイルセーフ化
ユーザビリティ向上
・操作を非制限
・操作ミスを許容
出典:
モードレスインタラクション[ソシオメディア]
81
SnackBarで「実行しますか?」ではなく「実行しておきました。取り消しますか?」方式に変更
ToBe バナー通知によりモードレス&フェイルセーフ化
色彩による成否明示
・成功:青
・失敗:赤
82
ユーザ操作に紐づくインタラクティブなバナー通知はSnackBarと呼ばれる
改善点7
レコードの一括操作
83
AsIs 選択中の1レコードに対してのみ更新可能
84
操作ステップ多
操作ステップ数
= アイテム数 × 修正項目数
例:Apple USM Power Adaptorの在庫修正画面
Tobe 複数アイテムの一括更新 操作ステップ削減
85
更新対象選択
Tobe 複数アイテムの一括更新 操作ステップ削減
86
更新対象選択
タスクがアクティベート
改善点8
社内フレームワーク脱却
87
AsIs 社内フレームワーク ARKDesigner
88
ToBe 案1 オープンフレームワーク × Ant Designに移行
89
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
ToBe 案2 オープンフレームワーク × MaterialDesign
91
MaterialDesign
・Googleのデザインシステム
・AndroidOSなどに搭載
・Reactで簡単に実装可能
・Material-UI
・開発人材調達易化
・豊富なコンポーネント
提案の設計的特徴
1. 左右のフレキシブルペイン
2. ペインのRRR-M+M-Eハイブリッド展開
3. CRUDボタンのアクティベート
4. 機能タブの表示・非表示切替
5. ソートキーのプルダウン化
6. 棚卸はデフォルトで全選択 92
特徴1
左右のフレキシブルペイン
93
フレキシブルペインとは
94
ペイン 出典
画面内で特定のタスクやオブジェ
クトを表す不可分な矩形領域
フレキシブルペイン 出典
伸縮可能なペイン
例:Slack
伸縮
ペインA ペインB
ToBe ペインのフレキシブル対応
95
左ペイン 右ペイン
伸縮
少ない画面リソースを
活用しやすい仕様
ToBe 右ペイン内テーブルのフレキシブル対応
96
・フレキシブルテーブルによ
って各レコードの値のレイア
ウトが横並びに統一
・1画面に表示可能なレコー
ド数アップ
→レコード間の値比較が楽
特徴2
ペインの
RRR-M+M-E
ハイブリッド展開
97
98
MV展開 出典
“2ペインを用いて、一覧操作(Manipulator)と閲覧(Viewer)を同一画面
上に提示する。一覧用ペインでオブジェクトを選択すると、その内容が閲
覧用のペインに表示されるようにする型。”
効能
・”対象オブジェクトの集合と、選択したひとつのオブジェクトの内容表示
を同一画面上で行うことで、両者の関係を常に認識可能”
・”一覧上で、自由な順序でオブジェクトを選択しながら、その内容を閲覧
可能”
・”閲覧用の画面を別に開く必要がないため、閉じるという操作なしに次の
オブジェクトを閲覧可能”
解説、図の引用元:ソシオメディア
ペイン MV展開
一覧用ペインでオブジェクトを選択すると内容が閲覧用ペインに表示
99
R-R-M展開 出典
“数の異なる検索(Retriever)を連続して提示しながら
対象を限定していき、一覧操作(Manipulator)画面に
辿り着かせる。”
効能
必要な回数だけ条件分岐させることが可能
→ 操作ステップ短縮に繋がる
解説・図の引用元:ソシオメディア
ペイン R-R-M展開
複数の検索画面を経た後で一覧操作画面に辿り着く
ToBe 展開パターンの応用 左ペイン RRR-M展開
100
左ペイン(RRR, E) 右ペイン(M) 【左ペイン】RRR-M展開
RRR:
3つの検索(Retriever)
の連結展開
E:
更新タブなら一覧操作
(Manipulator)画面の情
報を編集(Edit)可能
左ペイン上(R)
左ペイン中(R)
左ペイン下(R,E)
ToBe 展開パターンの応用 右ペイン M-E展開
101
【右ペイン】
M:
一覧操作(Manipulator)
画面。
M-E展開:
各レコードを選択すると左
ペインの編集画面(Editer)
展開。
左ペイン(RRR, E) 右ペイン(M)
ToBe 展開パターンの応用 RRR-M + M-Eのハイブリッド展開
102
RRR-M + M-E R-R-MとMVの2つの長所を
受け継いだハイブリッド構造
・”両ペインの関係を常に認識可能”
・”一覧上で、自由な順序でオブジェクトを選択しなが
ら、その内容を閲覧・編集”
・”閲覧用の画面を別に開く必要がないため、閉じる操
作なしに次のオブジェクトを閲覧・編集”
・”必要な回数だけ条件分岐させることが可能”
解説の引用元:ソシオメディア
→ ユーザビリティ向上
特徴3
CRUDボタンのアクティベート
103
機能ごとのCRUD権限有無
104
CRUDとは
1. CREATE 登録
2. READ 読込
3. UPDATE 更新
4. DELETE 削除
C R U D
商品 在庫 ◯ ◯
出庫 ◯ ◯ ◯
受払 ◯ ◯
予約 ◯ ◯
棚卸 ◯ ◯ ◯ ◯
返品 ◯
伝票 入荷 ◯
出庫 ◯
入庫 ◯
棚卸 ◯
返品 ◯
在庫
締め ◯ ◯ ◯ ◯
Tobe 各画面のCRUD権限に合わせてアクティベート
105
アクティベート
C R U D
商品 在庫 ◯ ◯
出庫 ◯ ◯ ◯
受払 ◯ ◯
予約 ◯ ◯
棚卸 ◯ ◯ ◯ ◯
返品 ◯
伝票 入荷 ◯
出庫 ◯
入庫 ◯
棚卸 ◯
返品 ◯
在庫締め ◯ ◯ ◯ ◯
特徴4
機能タブの表示・非表示切替
106
ユーザ
本社
SB
直営店 代理店
ロジ
担当者
販促物
担当者
YM 併売店
取次店
店舗 量販 外販
SY
システム
管理者
店長 店員
YS
一次
運営店 法人
広域
責任者 閲覧者
管理者 責任者 閲覧者 責任者 閲覧者
責任者 閲覧者
各ユーザによって使う機能が異なる
ユーザドメイン
ユーザ権限に合わせて機能を非表示して利用制限
108
利用制限
本社
ロジ
担当者
販促物
担当者
システム
管理者
本社の社員は棚卸や返品の必要がないため非表示
ユーザブル&セキュアブル
・ユーザが使う機能へのリーチが容易
・無関係なユーザが操作するリスクが
無くセキュア
特徴5
ソートキーのプルダウン化
109
ToBe ソートキー選択はプルダウンメニュー
110
少ない画面リソースを
活用しやすい仕様
特徴6
棚卸はデフォルトで全選択
111
ToBe 棚卸はデフォルトで全選択
112
SCM開発チームの意見を反映
棚卸対象を毎度一つずつ
選択していくと膨大な時
間がかかる。
棚卸対象は全選択をデフ
ォルトにするべき
SCM
UI改善の意義
113
ユーザビリティ(使いやすさ)を司る2大要因
114
UIの品質 ユーザの慣れ
UI刷新時の想定懸念 ヘビーユーザからのクレーム
115
ユーザは使いにくいシステムも慣れれば使いやすく感じる
改修前のシステムの方が使いやすかったのに!
ヘビー
ユーザ
TwitterのUI刷新時などでよく観測されるユーザの声
UIを刷新する意義 新規ユーザの学習・研修コスト削減
116
UI品質を高めれば新規ユーザにとって使いやすくなる
操作マニュアルが無くても使える!
新規
ユーザ
提案の評価
117
提案の評価 費用対効果の懸念
我々では良し悪しの判断が難しい。
案件化するには費用対効果を算出して
月何円削減できるかを明示する必要がある。
UI改修でそこをどう主張していくかが最大の課題。
業務側
118
提案の評価 開発コスト大 改修後の開発効率向上に期待大
改修コストがかなり高いと思われる。フレームワークを
利用しない場合は下手をすれば数年がかかり。ARKが使
えると楽そう。
しかし、もし実装できればその後の機能追加は今よりは
るかに楽になるであろう。
ソースコードの削減にも繋がりそう。
開発担当
ベンダー
119
本資料の評価
120
全社展開 本資料
121
本資料の評価 全社アンケート 総合評価
122
2021/12/14 [n=37]
総合評価
4.3
人数/評価
本資料の評価 全社アンケート 業務に活かせる
123
2021/12/14 [n=37]
業務に活かせる
4.2
人数/評価
本資料の評価 全社アンケート 次回作があれば読みたい
124
2021/12/14 [n=37]
次回作があれば読みたい
4.7
人数/評価
本資料の評価 全社アンケート
特に改善点2は全社員が読むべきと思いました。
SB社員
125
階層構造の整理とOOUIの話が、例もあって、と
ても分かりやすかった
よく勉強されているなと思いました。私もUXデザ
イナとしてお仕事しているのでお話できたら楽し
そうだなと思いました。
まとめ 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
127
付録
128
引用に関する
著作法への配慮
129
引用の著作権 著作法 第32条に則り掲載
130
“[1]公正な慣行に合致すること,引用の目的上,正当な範囲内で行わ
れることを条件とし,自分の著作物に他人の著作物を引用して利用す
ることができる。同様の目的であれば,翻訳もできる。(注5)[2]国
等が行政のPRのために発行した資料等は,説明の材料として新聞,
雑誌等に転載することができる。ただし,転載を禁ずる旨の表示がさ
れている場合はこの例外規定は適用されない。”
引用の著作権 著作法 第32条に対する文化庁の見解
131
“(注5)引用における注意事項
他人の著作物を自分の著作物の中に取り込む場合,すなわち引用を行う場合,一般的には,以下の事項に注意しなければなりません。
(1)他人の著作物を引用する必然性があること。
(2)かぎ括弧をつけるなど,自分の著作物と引用部分とが区別されていること。
(3)自分の著作物と引用する著作物との主従関係が明確であること(自分の著作物が主体)。
(4)出所の明示がなされていること。(第48条)
(参照:最判昭和55年3月28日 「パロディー事件」)”
参考:https://www.bunka.go.jp/seisaku/chosakuken/seidokaisetsu/gaiyo/chosakubutsu_jiyu.html
既存UI
132
メインメニュー 入荷
133
メインメニュー 店舗間移動
134
メインメニュー 在庫照会
135
メインメニュー 在庫修正
136
メインメニュー 商品予約
137
メインメニュー 棚卸
138
メインメニュー RFIDタグ印刷
139
メインメニュー 返品
140
入荷 入荷検索
141
入荷 入荷検索(独自商品)
142
入荷 入荷登録(独自商品)
143
店舗間移動 入庫検索
144
店舗間移動 出庫検索
145
店舗間移動 出庫登録
146
店舗間移動 出庫検品
147
店舗間移動 出庫検品 キーボード入力
148
店舗間移動 出庫登録
149
店舗間移動 取次店検索
150
在庫照会 在庫状況
151
在庫照会 在庫状況(過去日)
152
在庫照会 在庫受払検索
153
在庫照会 在庫数一覧
154
在庫照会 シリアル情報照会
155
在庫修正 商品選択
156
在庫修正 在庫修正
157
商品予約 商品予約登録 商品コード入力
158
商品予約 商品予約登録
159
商品予約 予約済商品一覧(予約解除)
160
棚卸 棚卸対象選択
161
棚卸 棚卸中のデータがある
162
棚卸 カテゴリ別棚卸-移動機
163
棚卸 棚卸再開/取消
164
棚卸 棚卸履歴検索
165
RFIDタグ印刷
166
返品 返品登録 商品種別選択
167
返品 返品登録
168
返品 返品一覧/返品取消
169
既存UIの構造図解
170
既存UIの構造図解
171
既存UIの構造図解
172
既存UIの構造図解
173
既存UIの構造図解
174
既存UIの構造図解
175
既存UIの構造図解
176
既存UIの構造図解
177
既存UIの構造図解
178
既存UIの構造図解
179
既存UIの構造図解
180
既存UIの構造図解
181
既存UIの構造図解
182
既存UIの構造図解
183
既存UIの構造図解
184
既存UIの構造図解
185
既存UIの構造図解
186
既存UIの構造図解
187
既存UIの構造図解
188
既存UIの構造図解
189
既存UIの構造図解
190
既存UIの構造図解
191
Ver1
低精度プロトタイプ
193
Ver1
提案UI
194
Ver1 商品ページUI
195
Ver1 商品ページUI
商品検索条件
196
Ver1 商品ページUI
商品
197
Ver1 商品ページUI
アクションボタン
198
Ver1 商品ページUI
プルダウン
199
Ver1 伝票ページUI
200
Ver1 伝票ページUI
201
評価 ver1
コンセプトは理解したけど、
データがないとイメージが湧かない。
店舗スタッフもそれは同じだと思う。
次回はダミーレコードを入れてきて。
業務側
202
Ver2
中精度プロトタイプ
203
Ver2 商品 在庫 照会
204
Ver2 商品 在庫 更新 対象未選択
205
Ver2 商品 在庫 更新 対象選択中1
206
Ver2 商品 在庫 更新 対象選択中2
207
Ver2 商品 出庫 登録
208
Ver2 商品 受払 照会
209
Ver2 商品 予約 照会
210
Ver2 商品 予約 照会
211
Ver2 商品 棚卸 更新 個体管理品 対象未選択
212
Ver2 商品 棚卸 更新 個体管理品 対象選択中
213
Ver2 商品 棚卸 更新 数量管理品 対象未選択
214
Ver2 商品 棚卸 更新 数量管理品 対象選択中
215
Ver2 商品 棚卸 更新 個体管理差分 対象未選択
216
Ver2 商品 棚卸 更新 個体管理差分
217
Ver2 商品 棚卸 更新 数量管理差分 対象未選択
218
Ver2 商品 棚卸 更新 数量管理差分
219
Ver2 商品 棚卸 個体管理品 照会
220
Ver2 商品 棚卸 数量管理品 照会
221
Ver2 商品 棚卸 個体管理品差分 照会
222
Ver2 商品 棚卸 数量管理品差分 照会
223
Ver2 商品 返品 登録(CS商材)
224
Ver2 商品 返品 登録(SB商材)
225
Ver2 商品 入荷 照会
226
Ver2 伝票 出庫 照会
227
Ver2 伝票 入庫 照会
228
Ver2 伝票 棚卸 照会
229
Ver2 伝票 返品 照会
230
評価 ver2
概ね良さそう。
しかし、棚卸は再検討の余地あり。
チェックボックスを入力しないと棚卸が
実施できないのは不便だし分かりづらい。
SCM
メンバ
231
評価 ver2
改修漏れが怖いので課題表を
作成して順次課題消化していきましょう。
工数見積はその後です。
開発担当
ベンダ
232
Ver3
高精度プロトタイプ
233
Ver3 商品 在庫数照会
234
Ver3 商品 在庫 照会 シリアルナンバー
235
Ver3 商品 在庫数 照会 運営店
236
Ver3 商品 在庫 更新 対象未選択
237
Ver3 商品 在庫 更新 選択中
238
Ver3 伝票 出庫 登録
239
Ver3 商品 受払 更新
240
Ver3 商品 受払 照会
241
Ver3 商品 予約 照会
242
Ver3 商品 予約 登録
243
Ver3 伝票 棚卸 更新
244
Ver3 伝票 棚卸 照会
245
Ver3 伝票 棚卸 登録
246
Ver3 商品 登録(返品登録CS商材)
247
Ver3 商品 登録(返品登録SB商材)
248
Ver3 伝票 入荷 照会
249
Ver3 伝票 出庫 照会
250
Ver3 伝票 入庫 照会
251
Ver3 伝票 棚卸 照会
252
Ver3 伝票 返品 照会
253
Ver3 伝票 在庫締め 照会
254
Ver3 伝票 在庫締め 登録
255
Ver3 伝票 在庫締め 更新
256

More Related Content

What's hot

【SB Tech Festival 2022】SCM_店舗在庫管理領域_UI改善_設計意図説明資料【配布用】
【SB Tech Festival 2022】SCM_店舗在庫管理領域_UI改善_設計意図説明資料【配布用】【SB Tech Festival 2022】SCM_店舗在庫管理領域_UI改善_設計意図説明資料【配布用】
【SB Tech Festival 2022】SCM_店舗在庫管理領域_UI改善_設計意図説明資料【配布用】崚日 中井
 
SQLアンチパターン - 開発者を待ち受ける25の落とし穴 (拡大版)
SQLアンチパターン - 開発者を待ち受ける25の落とし穴 (拡大版)SQLアンチパターン - 開発者を待ち受ける25の落とし穴 (拡大版)
SQLアンチパターン - 開発者を待ち受ける25の落とし穴 (拡大版)Takuto Wada
 
ホットペッパービューティーにおけるモバイルアプリ向けAPIのBFF/Backend分割
ホットペッパービューティーにおけるモバイルアプリ向けAPIのBFF/Backend分割ホットペッパービューティーにおけるモバイルアプリ向けAPIのBFF/Backend分割
ホットペッパービューティーにおけるモバイルアプリ向けAPIのBFF/Backend分割Recruit Lifestyle Co., Ltd.
 
チャットボットのUXと、導入現場のリアル:Webmaster Camp: 企業サイトの担当者が考えておきたい、AIとUIの今。
チャットボットのUXと、導入現場のリアル:Webmaster Camp: 企業サイトの担当者が考えておきたい、AIとUIの今。 チャットボットのUXと、導入現場のリアル:Webmaster Camp: 企業サイトの担当者が考えておきたい、AIとUIの今。
チャットボットのUXと、導入現場のリアル:Webmaster Camp: 企業サイトの担当者が考えておきたい、AIとUIの今。 Yoshiki Hayama
 
アジャイルによくきく?モデリング
アジャイルによくきく?モデリングアジャイルによくきく?モデリング
アジャイルによくきく?モデリングIwao Harada
 
世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture世界一わかりやすいClean Architecture
世界一わかりやすいClean ArchitectureAtsushi Nakamura
 
どこに何を書くのか?
どこに何を書くのか?どこに何を書くのか?
どこに何を書くのか?pospome
 
「顧客の声を聞かない」とはどういうことか
「顧客の声を聞かない」とはどういうことか「顧客の声を聞かない」とはどういうことか
「顧客の声を聞かない」とはどういうことかYoshiki Hayama
 
DX 組織デザインパターン
DX 組織デザインパターンDX 組織デザインパターン
DX 組織デザインパターンOsaka University
 
UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家Yoshiki Hayama
 
オブジェクト指向プログラミング入門 -- Java object-oriented programming primer
オブジェクト指向プログラミング入門 -- Java object-oriented programming primerオブジェクト指向プログラミング入門 -- Java object-oriented programming primer
オブジェクト指向プログラミング入門 -- Java object-oriented programming primer増田 亨
 
ウェブアプリケーションセキュリティ超入門
ウェブアプリケーションセキュリティ超入門ウェブアプリケーションセキュリティ超入門
ウェブアプリケーションセキュリティ超入門Hiroshi Tokumaru
 
Modeling in the Agile Age - JP
Modeling in the Agile Age - JPModeling in the Agile Age - JP
Modeling in the Agile Age - JPKenji Hiranabe
 
世界でいちばんわかりやすいドメイン駆動設計
世界でいちばんわかりやすいドメイン駆動設計世界でいちばんわかりやすいドメイン駆動設計
世界でいちばんわかりやすいドメイン駆動設計増田 亨
 
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFE
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFEUX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFE
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFEYoshiki Hayama
 
スタートアップの 3 分ピッチテンプレート
スタートアップの 3 分ピッチテンプレートスタートアップの 3 分ピッチテンプレート
スタートアップの 3 分ピッチテンプレートTakaaki Umada
 
オーバーエンジニアリングって何? #devsumi #devsumiA
オーバーエンジニアリングって何? #devsumi #devsumiAオーバーエンジニアリングって何? #devsumi #devsumiA
オーバーエンジニアリングって何? #devsumi #devsumiAOre Product
 
ユーザーにうれしいチャットボットのUX 7原則 - 7 Principles to Design UX of Chatbots
ユーザーにうれしいチャットボットのUX 7原則 - 7 Principles to Design UX of ChatbotsユーザーにうれしいチャットボットのUX 7原則 - 7 Principles to Design UX of Chatbots
ユーザーにうれしいチャットボットのUX 7原則 - 7 Principles to Design UX of ChatbotsYoshiki Hayama
 
「アクセス解析思考の磨き方」CSS Nite LP, Disk 19
「アクセス解析思考の磨き方」CSS Nite LP, Disk 19「アクセス解析思考の磨き方」CSS Nite LP, Disk 19
「アクセス解析思考の磨き方」CSS Nite LP, Disk 19Yasuki Ichishima
 

What's hot (20)

【SB Tech Festival 2022】SCM_店舗在庫管理領域_UI改善_設計意図説明資料【配布用】
【SB Tech Festival 2022】SCM_店舗在庫管理領域_UI改善_設計意図説明資料【配布用】【SB Tech Festival 2022】SCM_店舗在庫管理領域_UI改善_設計意図説明資料【配布用】
【SB Tech Festival 2022】SCM_店舗在庫管理領域_UI改善_設計意図説明資料【配布用】
 
はじめてのPRD
はじめてのPRDはじめてのPRD
はじめてのPRD
 
SQLアンチパターン - 開発者を待ち受ける25の落とし穴 (拡大版)
SQLアンチパターン - 開発者を待ち受ける25の落とし穴 (拡大版)SQLアンチパターン - 開発者を待ち受ける25の落とし穴 (拡大版)
SQLアンチパターン - 開発者を待ち受ける25の落とし穴 (拡大版)
 
ホットペッパービューティーにおけるモバイルアプリ向けAPIのBFF/Backend分割
ホットペッパービューティーにおけるモバイルアプリ向けAPIのBFF/Backend分割ホットペッパービューティーにおけるモバイルアプリ向けAPIのBFF/Backend分割
ホットペッパービューティーにおけるモバイルアプリ向けAPIのBFF/Backend分割
 
チャットボットのUXと、導入現場のリアル:Webmaster Camp: 企業サイトの担当者が考えておきたい、AIとUIの今。
チャットボットのUXと、導入現場のリアル:Webmaster Camp: 企業サイトの担当者が考えておきたい、AIとUIの今。 チャットボットのUXと、導入現場のリアル:Webmaster Camp: 企業サイトの担当者が考えておきたい、AIとUIの今。
チャットボットのUXと、導入現場のリアル:Webmaster Camp: 企業サイトの担当者が考えておきたい、AIとUIの今。
 
アジャイルによくきく?モデリング
アジャイルによくきく?モデリングアジャイルによくきく?モデリング
アジャイルによくきく?モデリング
 
世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture
 
どこに何を書くのか?
どこに何を書くのか?どこに何を書くのか?
どこに何を書くのか?
 
「顧客の声を聞かない」とはどういうことか
「顧客の声を聞かない」とはどういうことか「顧客の声を聞かない」とはどういうことか
「顧客の声を聞かない」とはどういうことか
 
DX 組織デザインパターン
DX 組織デザインパターンDX 組織デザインパターン
DX 組織デザインパターン
 
UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
 
オブジェクト指向プログラミング入門 -- Java object-oriented programming primer
オブジェクト指向プログラミング入門 -- Java object-oriented programming primerオブジェクト指向プログラミング入門 -- Java object-oriented programming primer
オブジェクト指向プログラミング入門 -- Java object-oriented programming primer
 
ウェブアプリケーションセキュリティ超入門
ウェブアプリケーションセキュリティ超入門ウェブアプリケーションセキュリティ超入門
ウェブアプリケーションセキュリティ超入門
 
Modeling in the Agile Age - JP
Modeling in the Agile Age - JPModeling in the Agile Age - JP
Modeling in the Agile Age - JP
 
世界でいちばんわかりやすいドメイン駆動設計
世界でいちばんわかりやすいドメイン駆動設計世界でいちばんわかりやすいドメイン駆動設計
世界でいちばんわかりやすいドメイン駆動設計
 
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFE
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFEUX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFE
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFE
 
スタートアップの 3 分ピッチテンプレート
スタートアップの 3 分ピッチテンプレートスタートアップの 3 分ピッチテンプレート
スタートアップの 3 分ピッチテンプレート
 
オーバーエンジニアリングって何? #devsumi #devsumiA
オーバーエンジニアリングって何? #devsumi #devsumiAオーバーエンジニアリングって何? #devsumi #devsumiA
オーバーエンジニアリングって何? #devsumi #devsumiA
 
ユーザーにうれしいチャットボットのUX 7原則 - 7 Principles to Design UX of Chatbots
ユーザーにうれしいチャットボットのUX 7原則 - 7 Principles to Design UX of ChatbotsユーザーにうれしいチャットボットのUX 7原則 - 7 Principles to Design UX of Chatbots
ユーザーにうれしいチャットボットのUX 7原則 - 7 Principles to Design UX of Chatbots
 
「アクセス解析思考の磨き方」CSS Nite LP, Disk 19
「アクセス解析思考の磨き方」CSS Nite LP, Disk 19「アクセス解析思考の磨き方」CSS Nite LP, Disk 19
「アクセス解析思考の磨き方」CSS Nite LP, Disk 19
 

More from 崚日 中井

【SB Tech Festival 2022】モデルベースUIデザイン【登壇用】
【SB Tech Festival 2022】モデルベースUIデザイン【登壇用】【SB Tech Festival 2022】モデルベースUIデザイン【登壇用】
【SB Tech Festival 2022】モデルベースUIデザイン【登壇用】崚日 中井
 
ユーザインタフェース評価入門
ユーザインタフェース評価入門ユーザインタフェース評価入門
ユーザインタフェース評価入門崚日 中井
 
視覚障碍者ための音声認証インタフェースデザイン
視覚障碍者ための音声認証インタフェースデザイン視覚障碍者ための音声認証インタフェースデザイン
視覚障碍者ための音声認証インタフェースデザイン崚日 中井
 
コンセプトデザインガイド
コンセプトデザインガイドコンセプトデザインガイド
コンセプトデザインガイド崚日 中井
 
【HaptiGraph】ミナールのロシア戦役表象地図を触覚で味わうプロダクトの提案
【HaptiGraph】ミナールのロシア戦役表象地図を触覚で味わうプロダクトの提案【HaptiGraph】ミナールのロシア戦役表象地図を触覚で味わうプロダクトの提案
【HaptiGraph】ミナールのロシア戦役表象地図を触覚で味わうプロダクトの提案崚日 中井
 
Wiss2018_RyokaNAKAI_HapTalker
Wiss2018_RyokaNAKAI_HapTalkerWiss2018_RyokaNAKAI_HapTalker
Wiss2018_RyokaNAKAI_HapTalker崚日 中井
 
HapTalker:視覚障害者向け 電子書籍リーダアプリの開発
HapTalker:視覚障害者向け電子書籍リーダアプリの開発HapTalker:視覚障害者向け電子書籍リーダアプリの開発
HapTalker:視覚障害者向け 電子書籍リーダアプリの開発崚日 中井
 
猫を目覚ましに変えるプロダクト「ねこざまし」
猫を目覚ましに変えるプロダクト「ねこざまし」猫を目覚ましに変えるプロダクト「ねこざまし」
猫を目覚ましに変えるプロダクト「ねこざまし」崚日 中井
 

More from 崚日 中井 (8)

【SB Tech Festival 2022】モデルベースUIデザイン【登壇用】
【SB Tech Festival 2022】モデルベースUIデザイン【登壇用】【SB Tech Festival 2022】モデルベースUIデザイン【登壇用】
【SB Tech Festival 2022】モデルベースUIデザイン【登壇用】
 
ユーザインタフェース評価入門
ユーザインタフェース評価入門ユーザインタフェース評価入門
ユーザインタフェース評価入門
 
視覚障碍者ための音声認証インタフェースデザイン
視覚障碍者ための音声認証インタフェースデザイン視覚障碍者ための音声認証インタフェースデザイン
視覚障碍者ための音声認証インタフェースデザイン
 
コンセプトデザインガイド
コンセプトデザインガイドコンセプトデザインガイド
コンセプトデザインガイド
 
【HaptiGraph】ミナールのロシア戦役表象地図を触覚で味わうプロダクトの提案
【HaptiGraph】ミナールのロシア戦役表象地図を触覚で味わうプロダクトの提案【HaptiGraph】ミナールのロシア戦役表象地図を触覚で味わうプロダクトの提案
【HaptiGraph】ミナールのロシア戦役表象地図を触覚で味わうプロダクトの提案
 
Wiss2018_RyokaNAKAI_HapTalker
Wiss2018_RyokaNAKAI_HapTalkerWiss2018_RyokaNAKAI_HapTalker
Wiss2018_RyokaNAKAI_HapTalker
 
HapTalker:視覚障害者向け 電子書籍リーダアプリの開発
HapTalker:視覚障害者向け電子書籍リーダアプリの開発HapTalker:視覚障害者向け電子書籍リーダアプリの開発
HapTalker:視覚障害者向け 電子書籍リーダアプリの開発
 
猫を目覚ましに変えるプロダクト「ねこざまし」
猫を目覚ましに変えるプロダクト「ねこざまし」猫を目覚ましに変えるプロダクト「ねこざまし」
猫を目覚ましに変えるプロダクト「ねこざまし」
 

【修正版】SCM_店舗在庫管理領域_ui改善_設計意図説明資料【SB_Tech_Festival_2022】