複雑なUIに効く「わける」

この記事をきっかけに、Noteを始めてみました。自己紹介記事はそんなに需要があるかわかんないので後日自己満足のために書くことにします。

---

自分は本業ではApp ApeというSaaSのUI/UXを一通り見ています。https://appa.pe

B2Bサービス、なかなか大変なのが情報や機能が複雑化してしまうこと。経理上のツールなんかがいい例ですが、会社によって給与体系、雇用体系など様々でそれに対応しなければなりませんし、経理と一緒に管理したい情報とかって大体は多種多様かつ複雑。もちろんそれを何の工夫もせずに画面に出してしまうと煩雑化してしまい、ユーザーはストレスをかかえ離れていくことでしょう。

そこで大事なのが「わける」です

---

わける : 情報分割・ルールの制定・タイミングよく提示

例え話で言えば本棚。自分の家ではざっくり、マンガ・小説・実用書・謎解き本…を場所ごとに分けて配置してあります。それと同じようなもので、情報をカテゴライズすることはとても大事になります。

しかし情報をカテゴライズするだけではまだ半分。大事なのは「カテゴライズした情報の配置を固定・定着させること」と「情報のツリー構造を美しく見せること」

うちの汚部屋ですら、本棚のカテゴライズはなんとなくされてる例

配置の固定と定着

前者は本棚でも想像しやすいかと思いますし、皆さん実施している気がします。例えば三段の本棚があって、上段にはマンガ、中段には実用書、下段には小説とわかれていたら、次に本を入れるときも、本を探すときも楽です。

UIも同じ。ここには何の情報を、と決めてしまうことでユーザーはどこを見ればいいのか一目瞭然になるわけです。

これは名著「ノンデザイナーズ・デザインブック」の中でも「近接」という名前のテクニックとして紹介されてる基本中の基本にあたります。意味の近いコンテンツを近づけ、意味の遠いコンテンツは離す。これを自分は「意味上の距離と実際の距離をあわせる」といつも説明しています。

三年以上前に発表したスライドから抜粋
意味の近いもん同士が物理的にも近くにあるよ〜といいたいスライド

構造を見せる

後者は少し言い回しが難しいですが、これを本棚で例えるなら書店の本棚を想像すると良いかと思います。店の右手手前がマンガで、右手奥がラノベ、中央には雑誌がならび…というように、似た本を固めるようなお店はみなさんもなじみがあるかと思います。また、例えば右手の漫画コーナーに行くと、「XX社」「YY社」…と出版社ごとの棚があり、XX社のコーナーでも更に作者ごとに本がわかれている光景もあるあるだと思います。

本棚がほんの種類ごとに整理されていて、ある程度探しやすそう

このように、適切なカテゴライズが情報の理解・検索性を高めるのはわかるかと思いますが、本屋さんの本棚で大事なのは配置や分割だけではありません。たとえば店内の天井から吊ってあるタイプの案内板? Pop? タペストリー??に「雑誌」「小説」「マンガ」と書かれているようなお店は多いでしょう

僕がもしマンガ「ちはやふる」を買う場合、初めて行く書店ではそのPopをみてマンガコーナーへ行き、そこで更に棚の分け方を知るために辺りを見回します。「講談社」「集英社」と名前がかいてあれば、講談社の棚へ。「少年コミック」「女性向けコミック」とあれば女性向けへ。先日言った本屋さんでは「ジャンプ」「マガジン」とあったので「Be Love」のコーナーへ行きます。そしてそれぞれの棚から末次由紀先生のコーナーを探し、目当てのちはやふるを探し出します。

これもまたUIでも同じことをしたほうがわかりやすいことが多いです。すべての情報を一箇所にまとめるのは複雑度の高い情報に対しては有効でないこともあります。たとえば経理関係の管理をする場合は給与管理と経費管理の機能はわける。経費の中でも給与の中でも業務体型ごとに分けたり部署の構成が見やすかったりするほうが良いでしょう。

しかしそこで更に大切なのは、「わけ方をいつ、どのように理解してもらうか」です。本屋の例だと入店してすぐに本の種別・種別のエリアの近くに来たら出版社・さらに出版社ごとのエリア棚の中では作者…というように、情報提示を「タイミングをわけて」実施しています。

SaaSのUIでは、サイドバーを用いることで、おおまかな機能の分け方をログイン直後に理解してもらえるようなUIが多く見られます 。そして更に機能の中でもいくつかの遷移先があり、情報が分かれていることが多いかと思います。

大メニューと小メニューに分けることで情報把握がしやすくなる
Wordpressの管理画面とかこんな感じ

コーポレートサイトなどでも、おおまかな種別はナビゲーションバーにて説明し、ナビゲーションバーにマウスポインターを乗せるとその中の小ページの一覧が見える、といった構成もよく見るかと思います。これにより「大雑把なカテゴリを把握した後にその中身だけをきれいに把握する」といった二段階での理解が促されます。

こういう構成のNavbarありがち

これらの「情報ツリーの見える化」と「適切なタイミングでの提示」を行うことで、複雑な情報設計になりがちなSaaSのUIデザインをよりシンプルに、よりわかりやすくできるのです。

余談 わけない : あえて情報を分けないのも大事

ここまでわける話をしてきましたが、書店へ行くとだいたい自動ドアのすぐそばにあるのは「話題の新作」コーナーです。ぼくもちょっと前の時期だと書店てついつい「2.0系の本」「メンタリズム系の本」を手にとってしまい、「あぁ、違う違う、この本を見に来たんじゃねーや」と我に返ることがありました。また自分用の本棚を考えても、今読んでいる本は本棚にいちいちしまわず、机の上に置いて会社へ行ったりすることも多いです。

こういった分類・配置を意識しすぎない配置が上手なのは動画・マンガなどのコンテンツ配信系。例えばVOD系のサービスを利用していると「自分の見たことのある作品の続編シリーズ」「似たようなカテゴリの作品」を紹介するおすすめ機能や、「今見てる途中のドラマ」を優先的に表示してくれる機能などがあるかと思います

こいついっつも恥ずいぐらい僕にアニメを勧めてくる。つい見ちゃう。

こういったように、あえて情報をUIの奥に仕舞い込んでしまわず、適切に前に出すことも併せて考えると、ユーザーは受動的にも情報を受け取ることができるようになり、結果的にユーザビリティは向上するでしょう。

まとめ

- 情報は分けたら配置を固定しよう
- 情報を分けたら、いいタイミングでわかりやすく分け方を説明しよう
- あえてルールを破るような部分もつくってユーザビリティにも配慮しよう

初記事は拙いですがこんなところにて！