効果的な管理画面をデザインをするために避けるべき5つの罠

効果的な管理画面をデザインをするために避けるべき5つの罠 takanorip 2024年8月9日 DIST.44

自己紹介 takanorip デザインエンジニア@Ubie デザインしたりコード書いたりしてます。趣味は個人サイト制作、料理、筋トレ、得意料理はパスタ。デザインシステムとかデザインエンジニアとかの同人誌書いています。 https://zenn.dev/takanorip

Ubie株式会社

避けるべき 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 ターゲットユーザーを明確にする

効果的な管理画面をデザインをするために避けるべき5つの罠

効果的な管理画面をデザインをするために避けるべき5つの罠

takanorip

More Decks by takanorip

Other Decks in Design

Featured

Transcript