Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
効果的な管理画面を デザインをするために 避けるべき5つの罠
Search
takanorip
August 09, 2024
Design
14
7k
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
August 09, 2024
Tweet
Share
More Decks by takanorip
See All by takanorip
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
110
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
820
社内管理画面のデザインもプロダクトデザイン
takanorip
4
1.9k
早わかり W3C Community Group
takanorip
0
470
Ubieとアクセシビリティのこれからを考える
takanorip
0
440
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.8k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
3.2k
デザインシステム運用とOKRの良い関係
takanorip
0
2.1k
Other Decks in Design
See All in Design
なぜ今必要?Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
hilokifigma
0
750
241214_StackNagoya_プレイングマネージャーのプレイングの時間の使い方
kiyoshifuwa
0
250
ネーミングの極意 - その名は体を現していますか? -
kakukoki
2
530
タイミーでフィールドワークしたら、サービスデザインが始まった
kenichiota0711
1
1k
オリジナルのデザイン地図を作ってみた!〜OpenMapTilesとMaputnikを活用した地図スタイル〜
hjmkth
1
430
マンガで分かるサービスデザインガイドライン
senryakuka
1
760
無自覚なランクとその影響を紐解くワークショップ / Unpacking Unconscious Privilege Workshop
spring_aki
4
190
セブンデックス カルチャーブック
sevendex
1
9.3k
Haley's adventure chase
ivettetwin
0
110
デザイナーのマネジメント職、 身構えずにやっていこう
fumink7
0
870
入社3ヶ月目のプロダクトデザイナー視点で見たヤプリ / Joining Yappli as a Product Designer: My Perspective After 90 Days
yappli_developers
0
180
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 移動・不動産領域の取り組み
tmtgtkhs
0
240
Featured
See All Featured
Become a Pro
speakerdeck
PRO
27
5.3k
Practical Orchestrator
shlominoach
186
11k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.1k
A Modern Web Designer's Workflow
chriscoyier
693
190k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
30k
Code Review Best Practice
trishagee
67
18k
Why Our Code Smells
bkeepers
PRO
336
57k
A better future with KSS
kneath
239
17k
What's in a price? How to price your products and services
michaelherold
245
12k
Optimizing for Happiness
mojombo
377
70k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
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 ターゲットユーザーを明確にする