優れた管理画面UIの条件を考えてみた【管理画面作成会社が考える】

「管理画面における優れたUIってなんなんだろう」

このようなお悩みをお持ちの方に向け、ノンプログラミングで管理画面が作成できるPigeonFramework を開発した当事者が丁寧に解説しましたので、ぜひご覧ください。

とりあえずPigeonFrameworkのデモを触ってみたい方はこちら(会員登録不要)
 

優れた管理画面とは

まずは、優れたUIの定義をはっきりさせておきましょう。もちろん、優れたUIとは「ユーザーがスムーズに管理画面を扱えるUI」です。ユーザーのための管理画面であるので当然ですね。では、どのようにすればスムーズに、ストレスレスに扱えるのかを考えていきましょう。
 

まずはペルソナを想定する

ペルソナとは、「管理画面を使う典型的なユーザー像」のことです。使う人をまずは思い浮かべてみましょう。「どういう目的のために、その管理画面を必要としているのか」「どのような端末からアクセスしてくることが多いのか」「よく確認したいデータは何であるのか」

ペルソナから、このようなことを明確になってくるはずです。

スマホから使用するのか、PCから使用するのかでは画面の比率がかなり異なってきます。タッチ操作なのかマウス操作なのかなども異なってきます。であれば、当然適したUIも変わってきますよね。

また、何を目的にしているかによって、よく確認するデータとそこまで見ないデータが明らかになってきます。もちろんよく見るデータを目に付く場所に配置した方がユーザーに寄り添っています。

このように、ペルソナを思い浮かべることにより、必然とUIをどうすべきかもわかってくるのです。
 

閲覧頻度の高いものをダッシュボードに用意する

ダッシュボードは管理画面の顔です。ログインした後に、初めに訪れる場所です。ここには、ペルソナを想定して最も頻繁に確認するであろうものを表示しておきましょう。有名サービスの管理画面では、「お知らせ(ニュース)」や「売り上げグラフ」などを設置することが多いです。
 

慣習に従って、迷いをなくす

慣習とは、「一般的に通ずるならわし」のことです。例えば、「リンクは青色」等ですね。優れたUIに、トリッキーさは必要ありません。もしリンクが黄色になっていれば、リンクであることに気が付かず「なんだこのわかりにくい管理画面は」となることでしょう。

他にも、「グローバルメニューは左端に設置する(もしくは上部)」「選択中のものは強調色、色反転をする」等いろいろあります。複数の有名サービス管理画面をよく見てみると良いです。

UIデザインにおいて、慣習というのは非常に大切です。慣習に従ったUIを心掛け、使いやすい管理画面にしましょう。
 

グラフを積極的に使い、視覚化する

視覚化するというのは、視認性が大幅に向上するため、非常に大切なことです。そして、その中でもグラフというのはとても優れた視覚化方法です。人類の叡智です。データの羅列を見るのに比べ、グラフにすることで「上がっているのか」「下がっているのか」瞬時に判断することが出来ます。データ類はもれなくグラフ表示できるようにしておきましょう。

「グラフのラベルを斜めにすると読みにくくなる」「データに合わせて適したグラフを使用する」等、グラフの扱いも奥深いです。「せっかくグラフを使っているのに見にくい」なんてことにならないように気を付けましょう。

グラフの適切な使い方は、統計をグラフにあらわそう(種類と特徴)が参考になります。

 

アイコン・画像も積極的に使う

アイコンも優れた視覚化手段です。文字を読むよりアイコンを見る方がストレスがかからずにアイテムを把握することが出来ます。逆に、文字ばかりになっていると、大きな認知ストレスがかかってしまいます。絶対に避けましょう。

特に、リスト形式で何かを表示させる場合は、アイコンや画像を用います。この記事であってもそうです。ときおり画像を張ることで、文字ばかりのストレスを軽減させています。
 

無駄に縦長のページを作らない

異なる種類のアイテムを同じページに詰め込んで、とても縦長のページを作ってしまうのは優れたUIとは言えません。多くスライドさせないと目的のデータが出てこないというのはとてもストレスなことです。

異なる種類のアイテムを複数詰め込んでしまって縦長のページを作るくらいなら、もう一つページを作って、メニューの中に入れておきましょう。

リスト形式で、同質のアイテムを複数並べるのはこれに入りません。逆に、改ページするよりもスライド読み込みする方が手間が省かれ、優れたUIといえます。
 

まとめ

優れたUIについて細かいことを書いていくと、キリがありません。最も大切な概念を常に意識して管理画面を作ればよいのです。そして、優れたUIデザインを作るうえで最も大切なことは、ユーザーを想定し、ユーザーのことをよく考えて管理画面を作るということです。

ぜひ、ペルソナを想定し、ユーザーのことを考え抜いてみてください。

ここからはPRなのですが、弊社が提供するPigeonFramework なら、プログラミングをすることなく、シンプルでスタイリッシュな管理画面を作成することができます。しかも、スマホでの閲覧も可能になっています。

このようなイメージの管理画面がノンプログラミングで、すぐに作成可能です!だまされたと思って、一度使ってみてください。
 

とりあえずデモを触ってみたい方はこちら(会員登録不要)

より詳しい機能は、PigeonFrameworkの機能をご覧ください。