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
地図・デザイン・可視化 −情報をわかりやすく伝えるために−
hjmkth
2
520
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 組織横断のデザインの 取り組みについて
sig
1
160
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
320
ふわっとはじめるSSOT – SSOT for Communication Design
sekiguchiy
0
1.2k
1年目のクリエイターがつくりあげた!採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
310
Managing Design Systems (Smashing NY 2024)
nathanacurtis
2
330
知を活かせるチームづくりとは?-MIMIGURIで実践している「全員探究」の仕組みと文化づくり-
chiemitaki
1
750
Charcoal 2.0: デザインシステムの基盤を再構築
godlingkogami
1
530
(第1回) アーキテクト・テックリード育成講座
masakaya
0
110
志ある事業の種を社会に開花させるための挑戦/ Designship2024_Nishimura
root_recruit
0
200
【pmconf2024】ユーザーになりきる「コスプレUX」で リサーチ解像度を上げる
kamechi7222222
1
5.9k
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜
tak073
0
140
Featured
See All Featured
A better future with KSS
kneath
238
17k
Music & Morning Musume
bryan
46
6.2k
Imperfection Machines: The Place of Print at Facebook
scottboms
266
13k
KATA
mclloyd
29
14k
Visualization
eitanlees
145
15k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.2k
Making Projects Easy
brettharned
116
5.9k
Thoughts on Productivity
jonyablonski
67
4.3k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Building Adaptive Systems
keathley
38
2.3k
GitHub's CSS Performance
jonrohan
1030
460k
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 ターゲットユーザーを明確にする