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

by takanorip

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Ubie株式会社

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

避けるべき 5つの罠 hs 既存のオペレーションに引っ張られすぎP Hs オペレーターのマインドとデータ構造が一致しな2 `s 階層が深くなりすぎて今どこにいるのかわからな2 !s Tableの呪縛から逃れられな2 Ys 汎用的に作りすぎて誰も使いやすくない

Slide 8

Slide 8 text

既存のオペレーションに引っ張られすぎる

Slide 9

Slide 9 text

現場の人の声どおりにしたくなるけど… 「今まではこうやってたので」 → 改善できる部分を見逃してしまう管理画面を使っている人は今あるものでなんとかしようと自然と慣れていi 気づかないうちに無駄な工程を作っていたU 意見を聞くのは大事だけど100%鵜呑みにするのは危険かも

Slide 10

Slide 10 text

ゼロベースでのコミュニケーションが大切ゼロベースでオペレーションからデザインする ~ 管理画面のデザインにはオペレーションのデザインも含まれ ~ 業務遂行に必要な要素を見極めて管理画面に落とし込んでいl ~ もちろんトレードオフやキャッチアップコストを考慮する必要があ ~ 一方的に押し付けるのはNG。しつこくコミュニケーションしよう。

Slide 11

Slide 11 text

オペレーターのマインドとデータ構造が一致しない

Slide 12

Slide 12 text

データモデリングをしていると利用者の目線が抜けてしまいがちになる「この値はあっちのデータと一緒に  入力したいんだよなあ」 n 具体的なオペレーションに詳しいメンバーがいないとデータ構造が  オペレーターの認識とずれてしまうことがあf n 管理画面の使いやすさとデータ構造は密接に関係しているので  データ構造が実際のオペレーションに耐えうるものなのか情報を集める

Slide 13

Slide 13 text

有識者を早い段階から巻き込んでデータ設計をするオペレーターのメンタルモデルを理解してデータ設計をすることで UIの設計もやりやすくなるデザイナーだからこそ関心を払った方が良p オペレーションの観察会をやったり、得たいものを整理したり

Slide 14

Slide 14 text

有識者を早い段階から巻き込んでデータ設計をする 1エンティティ1画面にこだわる必要はない CRUDが中心のアプリケーションだと1エンティティ1画面になることが多いが複数のエンティティをまとめて表示したり一気に登録できるようにしても良s メンタルモデルに近い画面になっていることが重要

Slide 15

Slide 15 text

階層が深くなりすぎて今どこにいるのかわからない

Slide 16

Slide 16 text

データの階層って深くなりがち… 案件ミッションミッション施策ユーザーセグメント

Slide 17

Slide 17 text

ショートカットできるナビゲーション設計ナビゲーションミッション案件ミッション施策ユーザーセグメント

Slide 18

Slide 18 text

ショートカットできるナビゲーション設計グローバルナビゲーションから 1,2手で遷移できるように f ページ階層が深くなると、どの画面にいるのかわからなくな f 情報を探しやすくするためにグローバルナビゲーションから辿れるようにす f 前後にどんなデータがあるのか明示できるとなお良い

Slide 19

Slide 19 text

Tableの呪縛から逃れられない

Slide 20

Slide 20 text

Tableって便利だよね気を抜くと全部がTableになるいっぱい情報が出てるけど見にくい？ Tableは素晴らしいUIではあるが、Tableにいろんな情報を詰め込み過ぎると逆に情報を見つけにくくなってしまv Tableは情報に強弱つけることが苦手なので、項目が多くなればなるほど  重要な情報を見落としてしまう可能性が高くなる

Slide 21

Slide 21 text

ケースバイケースで考えよう Tableが向いている場合 9 同じ重要度の情報をいっぱい並べたg 9 例：アカウント一Q 9 見る人によって大事な情報が変わる場4 9 例：入稿作業者は紐づいている疾患を見たいけど、マネージャーは公開期間を見たい Tableが向いてない場面 9 情報の優先度をつけたほうが良い場4 9 例：タイトルを目立たせたい、その他の情報は見えててもいいけど重要ではないか 9 表示する情報量が少ない

Slide 22

Slide 22 text

汎用的に作りすぎて誰も使いやすくない

Slide 23

Slide 23 text

みんなの願いを叶えてあげようとすると… こういうときはこれが良いけど違う場面だと違う機能も欲しくて… 役割や立場が違う人が同じ画面で作業したくなることがあみんなの願いを叶えてあげたくなるけど、そうすると誰にとっても使いやすくない画面になってしまう

Slide 24

Slide 24 text

一番重要なターゲットを考える一番重要度の高い人が使いやすい画面を考えることが重要 U もし管理画面で操作ミスがあると数億円レベルの損害が出ることだってあf U 一番ミスされてた困る人にフォーカスすf U 必要があれば画面を分ける

Slide 25

Slide 25 text

まとめ

Slide 26

Slide 26 text

管理画面デザイン 5つのポイント Pu オペレーションの設計・改善から考えV fu オペレーターのメンタルモデルを深く理解すV bu 深いデータにもアクセスしやすいナビゲーション設X (u 一覧に出すべき情報を見極めV au ターゲットユーザーを明確にする