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
15
7.5k
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
August 09, 2024
Tweet
Share
More Decks by takanorip
See All by takanorip
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
0
580
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
530
Bulletproof Design System with TypeScript
takanorip
7
4.2k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
170
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
950
社内管理画面のデザインもプロダクトデザイン
takanorip
5
2.1k
早わかり W3C Community Group
takanorip
0
510
Ubieとアクセシビリティのこれからを考える
takanorip
0
480
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
4k
Other Decks in Design
See All in Design
第4回関東Kaggler会LT HCD-Net人間中心設計スペシャリストが語るNotebookメダルの取り方
utm529f
0
1.3k
Portfolio 齋藤明敏 Hiroyuki Saito
crearedesign
0
120
数理的アプローチで挑むスマホUIのデザイン改善:タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
lycorptech_jp
PRO
0
870
アプリ360onWeb使い方と裏ワザ?紹介!
ikejun360
0
310
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
410
Yahoo!フリマ:生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
lycorptech_jp
PRO
0
510
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
1.4k
Findyのプロデチームの 歩みとこれから
satty9556
0
320
Installing and Running decksh/pdfdeck
ajstarks
1
860
企業にデザインが融けたとき、デザイナーにできること。事業会社12年間の探究と葛藤 / Designship2025
visional_engineering_and_design
0
740
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
320
1年目デザイナーが実践する、チーム貢献のための2つのアプローチ
kinomidesign
0
120
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Designing for Performance
lara
610
69k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
620
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Six Lessons from altMBA
skipperchong
29
4k
The World Runs on Bad Software
bkeepers
PRO
72
11k
Mobile First: as difficult as doing things right
swwweet
225
10k
How STYLIGHT went responsive
nonsquared
100
5.8k
Scaling GitHub
holman
463
140k
Designing Experiences People Love
moore
142
24k
4 Signs Your Business is Dying
shpigford
185
22k
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 ターゲットユーザーを明確にする