Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
効果的な管理画面を デザインをするために 避けるべき5つの罠
Search
takanorip
August 09, 2024
Design
14
6.3k
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
August 09, 2024
Tweet
Share
More Decks by takanorip
See All by takanorip
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
700
社内管理画面のデザインもプロダクトデザイン
takanorip
4
1.6k
早わかり W3C Community Group
takanorip
0
420
Ubieとアクセシビリティのこれからを考える
takanorip
0
400
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.7k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
3.1k
デザインシステム運用とOKRの良い関係
takanorip
0
2k
ユビーのペイシェントジャーニーを支えるデザインシステム構築
takanorip
0
280
Other Decks in Design
See All in Design
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜
tak073
0
140
20240921-図書館の実空間とデジタル資源の接点をデザインする-dtk55-Designing-the-interface-between-the-library's-physical-space-and-digital-resources
majimasachi
0
370
Night Shift concept 9/15/2024
cpineda57
0
750
Night Shift (beginning sequence)
cpineda57
0
920
ふわっとはじめるSSOT – SSOT for Communication Design
sekiguchiy
0
1.2k
開発チームの中心で心理的安全性をつくる、UXデザイナーの問いかけ方
takuto_yonemichi
2
600
デザインからアプリ実装まで一貫したデザインシステムを構築するベストプラクティス
shuzo
14
6.6k
今日から始める グラレコ チャレンジ DevRel/Tokyo #94 〜グラレコ チャレンジ〜
moshimoshiyuki
0
130
Designship2024 Panel Discussion インハウスデザイナーは 何をデザインしているか、するべきか で使用したスライドを公開します。
kiyoshifuwa
0
2.2k
Fleet Gas Station
joshtang
0
140
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
910
Managing Design Systems (Smashing NY 2024)
nathanacurtis
2
330
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
334
57k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.9k
How to Ace a Technical Interview
jacobian
276
23k
Faster Mobile Websites
deanohume
305
30k
Speed Design
sergeychernyshev
25
650
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Producing Creativity
orderedlist
PRO
341
39k
Fireside Chat
paigeccino
34
3.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.1k
Transcript
効果的な管理画面を デザインをするために 避けるべき5つの罠 takanorip 2024年8月9日 DIST.44
自己紹介 takanorip デザインエンジニア@Ubie デザインしたりコード書いたりしてます。 趣味は個人サイト制作、料理、筋トレ、得意料理はパスタ。 デザインシステムとかデザインエンジニアとかの同人誌書いています。 https://zenn.dev/takanorip
Ubie株式会社
None
None
None
避けるべき 5つの罠 hs 既存のオペレーションに引っ張られすぎP Hs オペレーターのマインドとデータ構造が一致しな2 `s 階層が深くなりすぎて今どこにいるのかわからな2 !s Tableの呪縛から逃れられな2
Ys 汎用的に作りすぎて誰も使いやすくない
既存のオペレーションに 引っ張られすぎる
現場の人の声どおりにしたくなるけど… 「今まではこうやってたので」 → 改善できる部分を見逃してしまう 管理画面を使っている人は今あるものでなんとかしようと自然と慣れていi 気づかないうちに無駄な工程を作っていたU 意見を聞くのは大事だけど100%鵜呑みにするのは危険かも
ゼロベースでのコミュニケーションが大切 ゼロベースで オペレーションからデザインする ~ 管理画面のデザインにはオペレーションのデザインも含まれ ~ 業務遂行に必要な要素を見極めて管理画面に落とし込んでいl ~ もちろんトレードオフやキャッチアップコストを考慮する必要があ ~
一方的に押し付けるのはNG。しつこくコミュニケーションしよう。
オペレーターのマインドと データ構造が一致しない
データモデリングをしていると利用者の目線が抜けてしまいがちになる 「この値はあっちのデータと一緒に 入力したいんだよなあ」 n 具体的なオペレーションに詳しいメンバーがいないとデータ構造が オペレーターの認識とずれてしまうことがあf n 管理画面の使いやすさとデータ構造は密接に関係しているので データ構造が実際のオペレーションに耐えうるものなのか情報を集める
有識者を早い段階から巻き込んでデータ設計をする オペレーターのメンタルモデルを 理解してデータ設計をすることで UIの設計もやりやすくなる デザイナーだからこそ関心を払った方が良p オペレーションの観察会をやったり、得たいものを整理したり
有識者を早い段階から巻き込んでデータ設計をする 1エンティティ1画面に こだわる必要はない CRUDが中心のアプリケーションだと1エンティティ1画面になることが多いが 複数のエンティティをまとめて表示したり一気に登録できるようにしても良s メンタルモデルに近い画面になっていることが重要
階層が深くなりすぎて 今どこにいるのかわからない
データの階層って深くなりがち… 案件 ミッション ミッション 施策 ユーザー セグメント
ショートカットできるナビゲーション設計 ナビゲーション ミッション 案件 ミッション 施策 ユーザー セグメント
ショートカットできるナビゲーション設計 グローバルナビゲーションから 1,2手で遷移できるように f ページ階層が深くなると、どの画面にいるのかわからなくな f 情報を探しやすくするためにグローバルナビゲーションから辿れるようにす f 前後にどんなデータがあるのか明示できるとなお良い
Tableの呪縛から 逃れられない
Tableって便利だよね 気を抜くと全部がTableになる いっぱい情報が出てるけど見にくい? Tableは素晴らしいUIではあるが、Tableにいろんな情報を詰め込み過ぎると 逆に情報を見つけにくくなってしまv Tableは情報に強弱つけることが苦手なので、項目が多くなればなるほど 重要な情報を見落としてしまう可能性が高くなる
ケースバイケースで考えよう Tableが向いている場合 9 同じ重要度の情報をいっぱい並べたg 9 例:アカウント一Q 9 見る人によって大事な情報が変わる場4 9 例:入稿作業者は紐づいている疾患を見たいけど、マネージャーは公開期間を見たい
Tableが向いてない場面 9 情報の優先度をつけたほうが良い場4 9 例:タイトルを目立たせたい、その他の情報は見えててもいいけど重要ではないか 9 表示する情報量が少ない
汎用的に作りすぎて 誰も使いやすくない
みんなの願いを叶えてあげようとすると… こういうときはこれが良いけど 違う場面だと違う機能も欲しくて… 役割や立場が違う人が同じ画面で作業したくなることがあ みんなの願いを叶えてあげたくなるけど、そうすると誰にとっても使いやすく ない画面になってしまう
一番重要なターゲットを考える 一番重要度の高い人が使いやすい 画面を考えることが重要 U もし管理画面で操作ミスがあると数億円レベルの損害が出ることだってあf U 一番ミスされてた困る人にフォーカスすf U 必要があれば画面を分ける
まとめ
管理画面 デザイン 5つの ポイント Pu オペレーションの設計・改善から考えV fu オペレーターのメンタルモデルを深く理解すV bu 深いデータにもアクセスしやすいナビゲーション設X
(u 一覧に出すべき情報を見極めV au ターゲットユーザーを明確にする