HTML
CSS
JavaScript
UI
デザインパターン

【WebアプリUI】 非活性と非表示どっちを使う?

非活性と非表示使い分け

Webアプリを作っていると避けて通れないのが、非活性と非表示。
ネットサーフィンしても中々、この手の話が出てこない。
これまで、エンタープライズ向けの業務アプリのUIを考える機会が何回かあったので、まとめてみました。

まずは、通常状態と比較して、非活性と非活性とは何かを知る

ボタンを例に非活性と非表示を違いを明らかにします。

通常と非活性

非活性は、ボタンが表示されているけど押せない状態のこと。
何か必要な情報が入力されていないと押せない場合に、よく使われます。
ex)ログインボタン

非活性.jpg

通常と非表示

非表示は、ボタンがそもそも表示されていない状態のこと。
もちろん、ユーザーは操作することができません。
権限などによって使えないボタンの場合に、使われます。
ex)管理者メニュー

非表示.jpg

コンシューマー向けアプリでは、非表示と非活性はあまり使わない?

コンシューマ向けアプリは、必要な機能を基本的にユーザーに提供していくことを目的にしているはず。(BtoBよりの人間だったので、詳しいことはわかりません。)
仮に、ユーザー登録をしなければいけないアプリだったとしても基本的にはボタンを押せるようにするため、表示して活性状態しておく。ボタンをユーザーが押した時に登録済か判断する。そうすることによって離脱率を低くしている。

エンタープライズ向けでは、非表示と非活性はよく使う!

私がこれまでやってきたエンタープライズ向けのアプリだとよく非表示と非活性の概念を用います。なぜなら、エンタープライズ向けのアプリは往々にしてボタンの数や入力エリアの数が多い。例えば、以前私が携わったアプリでは、一覧の一つのリストから行えるメニューが20個以上あった。そうなる理由は、人によって使うボタンが変わるからである。その会社で行われる業務を賄うように作られるから機能がモリモリになって操作が多くなる。

どう使い分ける?

非活性

  • ユーザーが操作できない。何かしらの操作すればできる。
  • UIが使えないのに表示されているので、鬱陶しい

非表示

  • ユーザーが操作できない。そもそもわからない。
  • 非表示になることでUIがずれる

私の見解としては、基本的にはコンシューマー向けだろうが、エンタープライズ向けだろうが表示して、活性状態であることが望ましい。つまり、非活性と非表示を極力使うべきではないと思う。押せないボタンや入力できないフォーム、消えているボタンがたくさん発生する場合は、そもそもユーザーに使いやすい導線になっていないことが考えられる。
導線の見直しや機能分割をするべきである。

ユーザーへ極力、オープンなUI!そして、シンプルイズベスト!